reflet-sdk 0.4.2 → 0.5.0

package/dist/feedback.js

@@ -1,932 +1,12 @@
 "use client";
-import { a as REFLET_Z_INDEX, t as RefletContext } from "./react-context-3_IbhIFB.js";
-import { t as Reflet } from "./client-BYuSKJw5.js";
-import { useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { n as Reflet } from "./client-BWEBWk1k.js";
+import { A as TrashIcon, C as MoreIcon, E as SquareIcon, F as SDK_VERSION, G as capturedFromCanvas, I as collectPageContext, K as releaseCapture, L as MAX_SELECTION_COMMENT_LENGTH, M as isDegenerate, N as normalizeRect, O as TargetIcon, P as DEFAULT_WIDGET_LABELS, R as buildElementSelection, S as HighlightIcon, T as SpotlightIcon, U as WIDGET_MARKER, W as captureViewport, _ as ChatIcon, b as CloseIcon, d as SelectionOutline, f as drawAnnotations, g as CameraIcon, h as BlurIcon, j as UndoIcon, k as TextIcon, l as submitWidgetFeedback, m as ArrowIcon, o as attachPreparedScreenshots, p as listenToKeydown, r as useFloatingPosition, s as createFeedbackTransport, t as ElementPicker, v as CheckIcon, w as PencilIcon, x as GripIcon, y as ChevronDownIcon } from "./picker-DDDpVcfr.js";
+import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-CKxBgZTG.js";
+import { Suspense, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
 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 {
-		cache: "disabled",
-		clip: options.element ? void 0 : "viewport",
-		dpr: Math.min(Math.max(ratio || 1, 1), MAX_PIXEL_RATIO),
-		embedFonts: true,
-		exclude: [`[${WIDGET_MARKER}]`, ...options.excludeSelectors ?? []],
-		fast: true,
-		filter: options.filter,
-		reconcile: true
-	};
-}
-function fitWithin(size, maxWidth) {
-	if (size.width <= maxWidth) return {
-		height: size.height,
-		scale: 1,
-		width: size.width
-	};
-	const scale = maxWidth / size.width;
-	return {
-		height: Math.max(1, Math.round(size.height * scale)),
-		scale,
-		width: maxWidth
-	};
-}
-function toBlob(canvas) {
-	return new Promise((resolve) => {
-		canvas.toBlob(resolve, "image/png");
-	});
-}
-function downscale(canvas, target) {
-	const resized = document.createElement("canvas");
-	resized.width = target.width;
-	resized.height = target.height;
-	const context = resized.getContext("2d");
-	if (!context) return canvas;
-	context.imageSmoothingQuality = "high";
-	context.drawImage(canvas, 0, 0, target.width, target.height);
-	return resized;
-}
-/** Wraps a rendered canvas as an owned capture, downscaled to `maxWidth`. */
-async function capturedFromCanvas(source, maxWidth) {
-	const fitted = fitWithin({
-		height: source.height,
-		width: source.width
-	}, maxWidth);
-	const output = fitted.scale === 1 ? source : downscale(source, fitted);
-	const blob = await toBlob(output);
-	if (!blob) return null;
-	return {
-		blob,
-		height: output.height,
-		mimeType: "image/png",
-		objectUrl: URL.createObjectURL(blob),
-		width: output.width
-	};
-}
-/**
-* Renders what the user is looking at right now.
-*
-* Runs off the DOM rather than `getDisplayMedia` on purpose: a screen-share
-* permission prompt on every report would cost more reports than it captures.
-* Returns null instead of throwing — a screenshot is never worth losing the
-* written feedback.
-*/
-async function captureViewport(options = {}) {
-	try {
-		const { snapdom } = await import("@zumer/snapdom");
-		const target = options.element ?? document.documentElement;
-		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;
-	}
-}
-function releaseCapture(image) {
-	if (image) URL.revokeObjectURL(image.objectUrl);
-}
-//#endregion
-//#region src/feedback/core/react-source.ts
-const FIBER_KEY_PREFIXES = ["__reactFiber$", "__reactInternalInstance$"];
-const MEMO_TYPE = Symbol.for("react.memo");
-const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-const MAX_STACK_DEPTH = 6;
-const MAX_FIBER_WALK = 60;
-const MAX_OWNER_WALK = 8;
-const MIN_NAME_LENGTH = 4;
-const CAPITALIZED = /^[A-Z]/;
-const WORD_INSIDE = /[a-z]{2}/;
-const ORIGIN_PREFIX = /^[a-z][\w+.-]*:\/\/[^/]*/i;
-const WEBPACK_PREFIX = /^webpack-internal:\/{2,}(\.\/)?/;
-const STACK_LOCATION = /([^\s()]+):(\d+):(\d+)\)?\s*$/;
-const NON_SOURCE_FRAME = /node_modules|\/_next\/|\/chunks?\/|\/\.vite\/|\/dist\/|\/build\/|hot-update/;
-const SOURCE_EXTENSION = /\.(?:[cm]?[jt]sx?)$/;
-const SOURCE_ROOT_MARKERS = [
-	"src",
-	"app",
-	"pages",
-	"components",
-	"features",
-	"lib"
-];
-function isRecord(value) {
-	return typeof value === "object" && value !== null;
-}
-/** React attaches the fiber under a randomly suffixed key on the host node. */
-function getFiberFromNode(node) {
-	for (const key of Object.getOwnPropertyNames(node)) for (const prefix of FIBER_KEY_PREFIXES) if (key.startsWith(prefix)) return Reflect.get(node, key) ?? null;
-	return null;
-}
-function readName(value) {
-	if (typeof value !== "function" && !isRecord(value)) return null;
-	const displayName = Reflect.get(value, "displayName");
-	if (typeof displayName === "string" && displayName) return displayName;
-	const name = Reflect.get(value, "name");
-	return typeof name === "string" && name ? name : null;
-}
-/**
-* Minified bundles hand out names like `Ur` or `Sn`. Reporting those as the
-* owning component actively misleads an agent, so only real words get through.
-*/
-function isMeaningfulName(name) {
-	if (name.includes("/") || name.includes("_")) return true;
-	return name.length >= MIN_NAME_LENGTH && CAPITALIZED.test(name) && WORD_INSIDE.test(name);
-}
-function componentName(type, depth = 0) {
-	if (typeof type === "string" || type === null || depth > 3) return null;
-	if (isRecord(type)) {
-		const marker = Reflect.get(type, "$$typeof");
-		if (marker === MEMO_TYPE) return componentName(Reflect.get(type, "type"), depth + 1);
-		if (marker === FORWARD_REF_TYPE) return componentName(Reflect.get(type, "render"), depth + 1);
-	}
-	const name = readName(type);
-	return name && isMeaningfulName(name) ? name : null;
-}
-/** Component names owning the fiber, innermost first. */
-function resolveComponentStack(fiber) {
-	const stack = [];
-	let current = fiber;
-	let steps = 0;
-	while (isRecord(current) && steps < MAX_FIBER_WALK) {
-		const name = componentName(Reflect.get(current, "type")) ?? componentName(Reflect.get(current, "elementType"));
-		if (name && stack.at(-1) !== name) {
-			stack.push(name);
-			if (stack.length >= MAX_STACK_DEPTH) break;
-		}
-		current = Reflect.get(current, "return");
-		steps++;
-	}
-	return stack;
-}
-function shortenSourcePath(raw) {
-	const path = raw.replace(WEBPACK_PREFIX, "").replace(ORIGIN_PREFIX, "").split("?")[0];
-	if (!path) return raw;
-	for (const marker of SOURCE_ROOT_MARKERS) {
-		if (path.startsWith(`${marker}/`)) return path;
-		const index = path.lastIndexOf(`/${marker}/`);
-		if (index !== -1) return path.slice(index + 1);
-	}
-	return path.split("/").filter(Boolean).slice(-3).join("/");
-}
-function formatLocation(fileName, line, column) {
-	const base = `${shortenSourcePath(fileName)}:${line}`;
-	return column === void 0 ? base : `${base}:${column}`;
-}
-function fromDebugSource(source) {
-	if (!isRecord(source)) return;
-	const fileName = Reflect.get(source, "fileName");
-	const lineNumber = Reflect.get(source, "lineNumber");
-	if (typeof fileName !== "string" || typeof lineNumber !== "number") return;
-	const columnNumber = Reflect.get(source, "columnNumber");
-	return formatLocation(fileName, lineNumber, typeof columnNumber === "number" ? columnNumber : void 0);
-}
-function fromDebugStack(stack) {
-	const raw = isRecord(stack) ? Reflect.get(stack, "stack") : stack;
-	if (typeof raw !== "string") return;
-	for (const line of raw.split("\n")) {
-		const match = STACK_LOCATION.exec(line);
-		const file = match?.[1];
-		if (!(match && file) || NON_SOURCE_FRAME.test(file)) continue;
-		const path = file.replace(ORIGIN_PREFIX, "").split("?")[0] ?? "";
-		if (!SOURCE_EXTENSION.test(path)) continue;
-		return formatLocation(path, Number(match[2]), Number(match[3]));
-	}
-}
-/**
-* `src/components/login-form.tsx:46:19` when the React build exposes it.
-* Production bundles strip debug info — callers must treat this as optional.
-*/
-function resolveSourceLocation(fiber) {
-	let current = fiber;
-	let steps = 0;
-	while (isRecord(current) && steps < MAX_OWNER_WALK) {
-		const located = fromDebugSource(Reflect.get(current, "_debugSource")) ?? fromDebugStack(Reflect.get(current, "_debugStack"));
-		if (located) return located;
-		current = Reflect.get(current, "_debugOwner");
-		steps++;
-	}
-}
-function inspectReactElement(element) {
-	const fiber = getFiberFromNode(element);
-	return {
-		componentStack: resolveComponentStack(fiber),
-		sourceLocation: resolveSourceLocation(fiber)
-	};
-}
-//#endregion
-//#region src/feedback/core/redact.ts
-/**
-* The picked element's markup leaves the reporter's browser and ends up in an
-* agent prompt, so it is scrubbed here: typed-in values, credentials and
-* anything marked `data-reflet-redact` never make the trip.
-*/
-const EMAIL = /[\w.%+-]+@[\w.-]+\.[a-z]{2,}/gi;
-const LONG_TOKEN = /\b[\w-]{28,}\b/g;
-const OPAQUE_URI = /^(?:data|blob|javascript):/i;
-const WHITESPACE_RUN = /\s+/g;
-const URL_QUERY = /[?#]/;
-const REDACTED = "[redacted]";
-const ELLIPSIS = "…";
-const MAX_ATTRIBUTE_LENGTH = 120;
-const MAX_TEXT_LENGTH$1 = 200;
-const MAX_CHILD_DEPTH = 3;
-const MAX_CLONED_NODES = 400;
-const DROPPED_TAGS = /* @__PURE__ */ new Set([
-	"script",
-	"style",
-	"noscript",
-	"template"
-]);
-const VALUE_HOLDERS = /* @__PURE__ */ new Set([
-	"input",
-	"textarea",
-	"select",
-	"option"
-]);
-const URL_ATTRIBUTES = /* @__PURE__ */ new Set([
-	"src",
-	"srcset",
-	"href",
-	"poster",
-	"action",
-	"formaction"
-]);
-function truncate$1(value, max) {
-	return value.length <= max ? value : `${value.slice(0, max - 1)}${ELLIPSIS}`;
-}
-/** Emails and token-shaped strings, wherever they appear in reported text. */
-function maskSecrets(value) {
-	return value.replace(EMAIL, REDACTED).replace(LONG_TOKEN, REDACTED);
-}
-const SENSITIVE_PARAM = /token|secret|pass(?:word|wd)?|pwd|auth|jwt|credential|session|sid|key|email|ssn|otp|code|signature|nonce/i;
-const LEADING_QUESTION_MARK = /^\?/;
-function decoded(value) {
-	try {
-		return decodeURIComponent(value);
-	} catch {
-		return value;
-	}
-}
-/**
-* Query strings carry signed-in state (`?token=…`, `?userEmail=…`) straight
-* into stored reports and agent prompts. Values of anything credential- or
-* identity-shaped are masked; every other byte of the address stays intact.
-*/
-function redactUrl(href) {
-	let url;
-	try {
-		url = new URL(href);
-	} catch {
-		return maskSecrets(href);
-	}
-	const pairs = url.search.replace(LEADING_QUESTION_MARK, "").split("&").filter(Boolean);
-	if (!pairs.some((pair) => SENSITIVE_PARAM.test(decoded(pair.split("=")[0] ?? "")))) return href;
-	const query = pairs.map((pair) => {
-		const equals = pair.indexOf("=");
-		if (equals === -1 || !SENSITIVE_PARAM.test(decoded(pair.slice(0, equals)))) return pair;
-		return `${pair.slice(0, equals)}=${REDACTED}`;
-	}).join("&");
-	return `${url.origin}${url.pathname}${query ? `?${query}` : ""}${url.hash}`;
-}
-function sanitizeUrl(value) {
-	if (OPAQUE_URI.test(value)) return `${value.slice(0, value.indexOf(":"))}:${ELLIPSIS}`;
-	return value.split(URL_QUERY)[0] ?? value;
-}
-function sanitizeAttributes(element) {
-	const holdsTypedValue = VALUE_HOLDERS.has(element.localName);
-	for (const { name, value } of Array.from(element.attributes)) {
-		if (holdsTypedValue && name === "value") {
-			element.removeAttribute(name);
-			continue;
-		}
-		const cleaned = URL_ATTRIBUTES.has(name) ? sanitizeUrl(value) : maskSecrets(value);
-		element.setAttribute(name, truncate$1(cleaned, MAX_ATTRIBUTE_LENGTH));
-	}
-}
-function collapse(element) {
-	element.replaceChildren(element.ownerDocument.createTextNode(ELLIPSIS));
-}
-function sanitizeTree(element, depth) {
-	sanitizeAttributes(element);
-	if (element.hasAttribute("data-reflet-redact")) {
-		element.replaceChildren(element.ownerDocument.createTextNode(REDACTED));
-		return;
-	}
-	if (element.localName === "svg") {
-		element.replaceChildren();
-		return;
-	}
-	for (const child of Array.from(element.childNodes)) {
-		if (child.nodeType === Node.COMMENT_NODE) {
-			child.remove();
-			continue;
-		}
-		if (child.nodeType === Node.TEXT_NODE) {
-			child.textContent = truncate$1(maskSecrets(child.textContent ?? ""), MAX_TEXT_LENGTH$1);
-			continue;
-		}
-		if (!(child instanceof Element)) continue;
-		if (DROPPED_TAGS.has(child.localName)) {
-			child.remove();
-			continue;
-		}
-		if (depth >= MAX_CHILD_DEPTH) {
-			sanitizeAttributes(child);
-			collapse(child);
-			continue;
-		}
-		sanitizeTree(child, depth + 1);
-	}
-}
-/** Redacted `outerHTML`, shallow-cloned when the subtree is too large to be useful. */
-function sanitizeMarkup(element, maxLength) {
-	const isSmallEnough = element.querySelectorAll("*").length <= MAX_CLONED_NODES;
-	const clone = element.cloneNode(isSmallEnough);
-	if (!(clone instanceof Element)) return "";
-	sanitizeTree(clone, 0);
-	if (!isSmallEnough) collapse(clone);
-	return truncate$1(clone.outerHTML.replace(WHITESPACE_RUN, " "), maxLength);
-}
-//#endregion
-//#region src/feedback/core/element-selector.ts
-const SAFE_ID = /^[A-Za-z][\w-]*$/;
-const WHITESPACE = /\s+/g;
-const MAX_LABEL_LENGTH = 80;
-const MAX_HTML_LENGTH = 600;
-const MAX_TEXT_LENGTH = 300;
-const MAX_REGION_LENGTH = 160;
-const MAX_HANDLE_VALUE_LENGTH = 80;
-const MAX_DEPTH = 12;
-const MIN_PATH_SEGMENTS = 2;
-const MAX_SELECTOR_LENGTH = 600;
-const MAX_SOURCE_LOCATION_LENGTH = 400;
-const MAX_SELECTION_COMMENT_LENGTH = 2e3;
-const TEST_ATTRIBUTES = [
-	"data-testid",
-	"data-test-id",
-	"data-test",
-	"data-cy",
-	"data-qa"
-];
-const NAMING_ATTRIBUTES = ["name", "aria-label"];
-const LANDMARK_SELECTOR = "dialog, [role=\"dialog\"], [role=\"alertdialog\"], main, nav, aside, header, footer, form, section, article";
-const HEADING_SELECTOR = "h1, h2, h3, h4, h5, h6, [role=\"heading\"]";
-/** Elements that start a new visual block — their text gets separated by a space. */
-const BLOCK_TAGS = /* @__PURE__ */ new Set([
-	"address",
-	"article",
-	"aside",
-	"blockquote",
-	"dd",
-	"details",
-	"div",
-	"dl",
-	"dt",
-	"fieldset",
-	"figcaption",
-	"figure",
-	"footer",
-	"form",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"header",
-	"hr",
-	"li",
-	"main",
-	"nav",
-	"ol",
-	"p",
-	"pre",
-	"section",
-	"summary",
-	"table",
-	"td",
-	"th",
-	"tr",
-	"ul"
-]);
-function visibleText(element) {
-	const clone = element.cloneNode(true);
-	if (!(clone instanceof Element)) return "";
-	for (const node of clone.querySelectorAll("*")) if (BLOCK_TAGS.has(node.localName)) node.before(clone.ownerDocument.createTextNode(" "));
-	return collapseText(maskSecrets(clone.textContent ?? ""));
-}
-function isUnique(selector) {
-	try {
-		return document.querySelectorAll(selector).length === 1;
-	} catch {
-		return false;
-	}
-}
-function escapeAttributeValue(value) {
-	return value.replace(/["\\]/g, "\\$&");
-}
-function attributeHandle(element, attribute, qualifier) {
-	const value = element.getAttribute(attribute);
-	if (!value || value.length > MAX_HANDLE_VALUE_LENGTH) return null;
-	const selector = `${qualifier}[${attribute}="${escapeAttributeValue(value)}"]`;
-	return isUnique(selector) ? selector : null;
-}
-/** Something an engineer would have written on purpose, unlike a positional path. */
-function uniqueHandle(element) {
-	const id = element.getAttribute("id");
-	if (id && SAFE_ID.test(id) && isUnique(`#${id}`)) return `#${id}`;
-	for (const attribute of TEST_ATTRIBUTES) {
-		const handle = attributeHandle(element, attribute, "");
-		if (handle) return handle;
-	}
-	for (const attribute of NAMING_ATTRIBUTES) {
-		const handle = attributeHandle(element, attribute, element.localName);
-		if (handle) return handle;
-	}
-	return null;
-}
-function positionalSegment(element) {
-	const tag = element.localName;
-	const parent = element.parentElement;
-	if (!parent) return tag;
-	const sameTag = Array.from(parent.children).filter((child) => child.localName === tag);
-	if (sameTag.length <= 1) return tag;
-	return `${tag}:nth-of-type(${sameTag.indexOf(element) + 1})`;
-}
-/**
-* Shortest selector that still resolves back to `element` from the document.
-* Grows the path one ancestor at a time and stops as soon as it is unique, so
-* a stable handle anywhere up the tree replaces the whole positional chain.
-* A bare tag is never enough: positional paths keep a parent for context.
-*/
-function buildSelector(element) {
-	if (element === document.documentElement) return "html";
-	if (element === document.body) return "body";
-	const handle = uniqueHandle(element);
-	if (handle) return handle;
-	const segments = [];
-	let current = element;
-	for (let depth = 0; current && depth < MAX_DEPTH; depth++) {
-		const ancestorHandle = current === element ? null : uniqueHandle(current);
-		segments.unshift(ancestorHandle ?? positionalSegment(current));
-		const candidate = segments.join(" > ");
-		const isAnchored = segments.length >= MIN_PATH_SEGMENTS;
-		if (ancestorHandle || current === document.body || isAnchored && isUnique(candidate)) return candidate;
-		current = current.parentElement;
-	}
-	return segments.join(" > ");
-}
-function truncate(value, max) {
-	return value.length <= max ? value : `${value.slice(0, max - 1)}…`;
-}
-function collapseText(value) {
-	return value.replace(WHITESPACE, " ").trim();
-}
-function accessibleLabel(element) {
-	const explicit = element.getAttribute("aria-label") ?? element.getAttribute("title") ?? element.getAttribute("alt") ?? element.getAttribute("placeholder");
-	if (explicit?.trim()) return explicit.trim();
-	return collapseText(element.textContent ?? "");
-}
-/** Short human label such as `button "Sign in"` or `div.card`. */
-function describeElement(element) {
-	const tag = element.localName;
-	const label = maskSecrets(accessibleLabel(element));
-	if (label) return truncate(`${tag} "${label}"`, MAX_LABEL_LENGTH);
-	const firstClass = element.classList.item(0);
-	return truncate(firstClass ? `${tag}.${firstClass}` : tag, MAX_LABEL_LENGTH);
-}
-function describeLandmark(element) {
-	const landmark = element.parentElement?.closest(LANDMARK_SELECTOR);
-	if (!landmark) return null;
-	const name = landmark.getAttribute("aria-label") ?? landmark.getAttribute("title");
-	return name?.trim() ? `${landmark.localName} "${collapseText(name)}"` : landmark.localName;
-}
-function headingAbove(element) {
-	const scope = element.closest(LANDMARK_SELECTOR) ?? document.body;
-	const probe = document.createRange();
-	probe.selectNodeContents(element);
-	probe.collapse(true);
-	let closest = null;
-	for (const heading of scope.querySelectorAll(HEADING_SELECTOR)) if (probe.comparePoint(heading, 0) < 0) closest = heading;
-	return collapseText(closest?.textContent ?? "") || null;
-}
-/**
-* Where the element sits from a reader's point of view — `dialog "Members" ›
-* Danger zone` says more to an agent than any DOM path can.
-*/
-function describeRegion(element) {
-	const landmark = describeLandmark(element);
-	const heading = headingAbove(element);
-	const parts = [landmark];
-	if (heading && !landmark?.includes(`"${heading}"`)) parts.push(heading);
-	const region = parts.filter((part) => part !== null).join(" › ");
-	return region ? truncate(maskSecrets(region), MAX_REGION_LENGTH) : void 0;
-}
-function getElementRect(element) {
-	const rect = element.getBoundingClientRect();
-	return {
-		height: Math.round(rect.height),
-		width: Math.round(rect.width),
-		x: Math.round(rect.x),
-		y: Math.round(rect.y)
-	};
-}
-/** Everything an agent needs to find the picked element back in the codebase. */
-function buildElementSelection(element) {
-	const { componentStack, sourceLocation } = inspectReactElement(element);
-	const text = truncate(visibleText(element), MAX_TEXT_LENGTH);
-	return {
-		componentStack,
-		html: sanitizeMarkup(element, MAX_HTML_LENGTH),
-		label: describeElement(element),
-		rect: getElementRect(element),
-		region: describeRegion(element),
-		selector: truncate(buildSelector(element), MAX_SELECTOR_LENGTH),
-		sourceLocation: sourceLocation ? truncate(sourceLocation, MAX_SOURCE_LOCATION_LENGTH) : sourceLocation,
-		text: text || void 0
-	};
-}
-//#endregion
-//#region src/feedback/core/page-context.ts
-const BROWSER_PATTERNS = [
-	["Edge", /Edg(?:e|A|iOS)?\/([\d.]+)/],
-	["Opera", /OPR\/([\d.]+)/],
-	["Samsung Internet", /SamsungBrowser\/([\d.]+)/],
-	["Firefox", /(?:Firefox|FxiOS)\/([\d.]+)/],
-	["Chrome", /(?:Chrome|CriOS)\/([\d.]+)/],
-	["Safari", /Version\/([\d.]+).*Safari/]
-];
-const OS_PATTERNS = [
-	["iOS", /iPhone|iPad|iPod/],
-	["Android", /Android/],
-	["Windows", /Windows NT/],
-	["macOS", /Mac OS X|Macintosh/],
-	["ChromeOS", /CrOS/],
-	["Linux", /Linux|X11/]
-];
-const MOBILE_HINT = /Mobile|iPhone|iPod/;
-const TABLET_HINT = /iPad|Tablet/;
-const TRAILING_ZERO = /\.0$/;
-const ANDROID = /Android/;
-function shortenVersion(version) {
-	return version.split(".").slice(0, 2).join(".").replace(TRAILING_ZERO, "");
-}
-function detectDevice(userAgent) {
-	if (TABLET_HINT.test(userAgent)) return "tablet";
-	if (MOBILE_HINT.test(userAgent)) return "mobile";
-	return ANDROID.test(userAgent) ? "tablet" : "desktop";
-}
-function parseUserAgent(userAgent) {
-	const info = { device: detectDevice(userAgent) };
-	for (const [name, pattern] of BROWSER_PATTERNS) {
-		const version = pattern.exec(userAgent)?.[1];
-		if (version) {
-			info.browser = `${name} ${shortenVersion(version)}`;
-			break;
-		}
-	}
-	for (const [name, pattern] of OS_PATTERNS) if (pattern.test(userAgent)) {
-		info.os = name;
-		break;
-	}
-	return info;
-}
-const MAX_PAGE_TITLE_LENGTH = 300;
-const MAX_URL_LENGTH = 2e3;
-const MAX_USER_AGENT_LENGTH = 600;
-function clip(value, max) {
-	return value.length <= max ? value : value.slice(0, max);
-}
-function optionalText(value, max) {
-	return value?.trim() ? clip(value, max) : void 0;
-}
-function resolveTimezone() {
-	try {
-		return Intl.DateTimeFormat().resolvedOptions().timeZone;
-	} catch {}
-}
-/** Everything about the page that a bug report needs and the DOM already knows. */
-function collectPageContext(options) {
-	const userAgent = navigator.userAgent;
-	const agent = parseUserAgent(userAgent);
-	return {
-		browser: agent.browser,
-		device: agent.device,
-		language: navigator.language,
-		os: agent.os,
-		pageTitle: optionalText(document.title, MAX_PAGE_TITLE_LENGTH),
-		referrer: optionalText(document.referrer, MAX_URL_LENGTH),
-		screen: {
-			height: window.screen.height,
-			width: window.screen.width
-		},
-		scroll: {
-			x: window.scrollX,
-			y: window.scrollY
-		},
-		sdkVersion: options?.sdkVersion,
-		timezone: resolveTimezone(),
-		url: redactUrl(window.location.href),
-		userAgent: clip(userAgent, MAX_USER_AGENT_LENGTH),
-		viewport: {
-			devicePixelRatio: window.devicePixelRatio,
-			height: window.innerHeight,
-			width: window.innerWidth
-		}
-	};
-}
-//#endregion
-//#region src/feedback/types.ts
-const SDK_VERSION = "0.4.2";
-const DEFAULT_WIDGET_LABELS = {
-	annotateHint: "Draw on the screenshot to point at the problem.",
-	attachElement: "Attach this element",
-	attachmentUploadFailed: "Your feedback was saved, but some screenshots are still pending. Retry to attach them.",
-	attachScreenshot: "Attach a screenshot",
-	back: "Back",
-	cancel: "Cancel",
-	captureFailed: "Screenshot unavailable. Try again or send without it.",
-	capturing: "Taking screenshot…",
-	clearAnnotations: "Clear drawing",
-	descriptionPlaceholder: "What would you like to share?",
-	dismissForDays: "Hide for {days} days",
-	done: "Done",
-	elementNote: "Comment on the picked element",
-	elementNotePlaceholder: "What is wrong with this?",
-	emailInvalid: "Enter a valid email address.",
-	emailLabel: "Email",
-	emailPlaceholder: "you@company.com",
-	emailPromptBody: "We only use it to follow up on this report.",
-	emailPromptTitle: "Add your email?",
-	errorGeneric: "Something went wrong. Please try again.",
-	errorTitleRequired: "Tell us a bit about it first.",
-	minimize: "Minimize feedback",
-	moreOptions: "More options",
-	moveFeedback: "Move feedback",
-	pickAnother: "Pick another",
-	pickElement: "Point at an element",
-	pickElementHint: "Pick the element you are talking about",
-	recapture: "Retake",
-	removeScreenshot: "Remove",
-	resume: "Resume feedback",
-	retakeHint: "Screenshot of this page",
-	retryAttachments: "Retry attachments",
-	screenshot: "Screenshot",
-	sendWithoutEmail: "Send without email",
-	submit: "Send feedback",
-	successMessage: "We read every report. Thanks for taking the time.",
-	successTitle: "Feedback sent",
-	title: "Send feedback",
-	titlePlaceholder: "Short summary",
-	trigger: "Feedback",
-	undo: "Undo"
-};
-//#endregion
-//#region src/feedback/core/annotations.ts
-const BOX_TOOLS = [
-	"text",
-	"rectangle",
-	"spotlight",
-	"highlight",
-	"blur"
-];
-const MIN_GESTURE_LENGTH = 8;
-const DEFAULT_PATH_TOLERANCE = 2.5;
-function normalizeRect(start, end) {
-	return {
-		height: Math.abs(end.y - start.y),
-		width: Math.abs(end.x - start.x),
-		x: Math.min(start.x, end.x),
-		y: Math.min(start.y, end.y)
-	};
-}
-function simplifyPath(points, tolerance = DEFAULT_PATH_TOLERANCE) {
-	if (points.length < 3) return points;
-	const [first, ...rest] = points;
-	if (!first) return points;
-	const kept = [first];
-	let anchor = first;
-	for (const point of rest.slice(0, -1)) if (Math.hypot(point.x - anchor.x, point.y - anchor.y) >= tolerance) {
-		kept.push(point);
-		anchor = point;
-	}
-	const last = points.at(-1);
-	if (last) kept.push(last);
-	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;
-}
-function toWire(annotation) {
-	const { color, start, end, tool } = annotation;
-	if (tool === "pen") return {
-		color,
-		points: simplifyPath(annotation.points ?? []),
-		type: tool,
-		x: start.x,
-		y: start.y
-	};
-	if (BOX_TOOLS.includes(tool)) {
-		const rect = normalizeRect(start, end);
-		return {
-			color,
-			height: rect.height,
-			...tool === "text" ? { text: annotation.text } : {},
-			type: tool,
-			width: rect.width,
-			x: rect.x,
-			y: rect.y
-		};
-	}
-	return {
-		color,
-		endX: end.x,
-		endY: end.y,
-		type: tool,
-		x: start.x,
-		y: start.y
-	};
-}
-function toWireAnnotations(annotations) {
-	return annotations.filter((item) => !isDegenerate(item)).map(toWire);
-}
-//#endregion
 //#region src/feedback/ui/annotation/color-value.ts
 const DEFAULT_ANNOTATION_COLOR = {
 	baseColor: "#ef4444",
@@ -943,118 +23,6 @@ function annotationColorHex({ baseColor, strengthPercent }) {
 	}).join("")}`;
 }
 //#endregion
-//#region src/feedback/ui/icons.tsx
-function Svg({ children, className, size = 16 }) {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		className,
-		fill: "none",
-		height: size,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: "1.8",
-		viewBox: "0 0 24 24",
-		width: size,
-		children
-	});
-}
-function ChatIcon({ className }) {
-	return /* @__PURE__ */ jsx(Svg, {
-		className,
-		size: 15,
-		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-	});
-}
-function CloseIcon({ className }) {
-	return /* @__PURE__ */ jsx(Svg, {
-		className,
-		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
-	});
-}
-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",
-		cy: "13",
-		r: "3.2"
-	})] });
-}
-function PencilIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M16.5 4.5a2.1 2.1 0 0 1 3 3L8 19l-4 1 1-4z" }) });
-}
-function TargetIcon() {
-	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3" }), /* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "5"
-	})] });
-}
-function TrashIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13M10 11v5M14 11v5" }) });
-}
-function ArrowIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 19 19 5M11 5h8v8" }) });
-}
-function UndoIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 9h11a5 5 0 0 1 0 10h-5M4 9l4-4M4 9l4 4" }) });
-}
-function CheckIcon({ size = 28 }) {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		fill: "none",
-		height: size,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: "2.4",
-		viewBox: "0 0 24 24",
-		width: size,
-		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
-	});
-}
-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 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 ?? "");
@@ -1196,11 +164,11 @@ function useDetailsPopover() {
 			summaryRef.current?.focus();
 		};
 		document.addEventListener("pointerdown", dismissOutside);
-		document.addEventListener("keydown", dismissWithEscape, true);
+		const stopListeningToKeys = listenToKeydown(detailsRef.current, dismissWithEscape, true);
 		window.addEventListener("resize", reposition);
 		return () => {
 			document.removeEventListener("pointerdown", dismissOutside);
-			document.removeEventListener("keydown", dismissWithEscape, true);
+			stopListeningToKeys();
 			window.removeEventListener("resize", reposition);
 		};
 	}, []);
@@ -1444,207 +412,34 @@ function AnnotationToolbar({ editor, labels, drawing }) {
 	});
 }
 //#endregion
-//#region src/feedback/core/arrow-geometry.ts
-function arrowOutline(start, end) {
-	const dx = end.x - start.x;
-	const dy = end.y - start.y;
-	const length = Math.hypot(dx, dy);
-	if (length === 0) return {
-		points: [],
-		strokeWidth: 0
-	};
-	const shaftWidth = Math.min(20, Math.max(6, length * .025), length * .2);
-	const headLength = Math.min(length * .45, shaftWidth * 3);
-	const headHalfWidth = headLength * .55;
-	const shaftLength = length - headLength;
-	const pointOnArrow = (along, across) => ({
-		x: start.x + (dx * along - dy * across) / length,
-		y: start.y + (dy * along + dx * across) / length
-	});
-	return {
-		points: [
-			pointOnArrow(0, 0),
-			pointOnArrow(shaftLength, -shaftWidth / 2),
-			pointOnArrow(shaftLength, -headHalfWidth),
-			{
-				x: end.x,
-				y: end.y
-			},
-			pointOnArrow(shaftLength, headHalfWidth),
-			pointOnArrow(shaftLength, shaftWidth / 2)
-		],
-		strokeWidth: Math.min(4, length * .02)
-	};
-}
-//#endregion
-//#region src/feedback/core/annotation-renderer.ts
-const STROKE_WIDTH = 3;
-const 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;
-}
-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, annotation, scale) {
-	const { points, strokeWidth } = arrowOutline(annotation.start, annotation.end);
-	const [first, ...rest] = points.map((point) => scalePoint(point, scale));
-	if (!first) return;
-	context.beginPath();
-	context.moveTo(first.x, first.y);
-	for (const point of rest) context.lineTo(point.x, point.y);
-	context.closePath();
-	context.lineWidth = strokeWidth * scale;
-	context.fill();
-	context.stroke();
-}
-function drawPen(context, points, scale) {
-	const [first, ...rest] = points;
-	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, annotation, 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;
-	});
-}
-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 && bitmap && isDecoded)) return;
-		context.clearRect(0, 0, canvas.width, canvas.height);
-		context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-		drawAnnotations(context, annotations);
-	}, [
-		annotations,
-		bitmap,
-		isDecoded
-	]);
+//#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 && bitmap && isDecoded)) return;
+		context.clearRect(0, 0, canvas.width, canvas.height);
+		context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+		drawAnnotations(context, annotations);
+	}, [
+		annotations,
+		bitmap,
+		isDecoded
+	]);
 	return {
 		canvasRef,
 		hasError: failedUrl === capture.objectUrl,
@@ -1870,6 +665,42 @@ function Annotator({ capture, labels, editor, note }) {
 	});
 }
 //#endregion
+//#region src/feedback/ui/devtools-owner.ts
+const claims = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+	for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+function currentOwner() {
+	for (const [token, claim] of claims) if (claim.hasWidget) return token;
+	return claims.keys().next().value;
+}
+/**
+* One devtools bar per page, however many RefletFeedback instances mount:
+* the one with a visible widget wins, so its bar can step aside for its panel.
+*/
+function useOwnsDevtools(wantsDevtools, hasWidget) {
+	const [token] = useState(() => Symbol("reflet-devtools"));
+	useEffect(() => {
+		if (!wantsDevtools) return;
+		claims.set(token, { hasWidget });
+		notify();
+		return () => {
+			claims.delete(token);
+			notify();
+		};
+	}, [
+		hasWidget,
+		token,
+		wantsDevtools
+	]);
+	return useSyncExternalStore(subscribe, () => currentOwner() === token, () => false);
+}
+//#endregion
 //#region src/feedback/ui/launcher.tsx
 function Launcher({ isOpen, label, onClick, buttonRef }) {
 	return /* @__PURE__ */ jsxs("button", {
@@ -2410,1813 +1241,1199 @@ function FeedbackPanel({ floatingControls, labels, state }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/selection-outline.tsx
+//#region src/feedback/core/console-recorder.ts
+const DEFAULT_LIMIT = 30;
+const MAX_MESSAGE_LENGTH = 1e3;
+const RECORDED_METHODS = ["error", "warn"];
+function serializeArgument(value) {
+	if (typeof value === "string") return value;
+	if (value instanceof Error) return `${value.name}: ${value.message}`;
+	if (value === null || value === void 0) return String(value);
+	if (typeof value === "object") try {
+		return JSON.stringify(value) ?? "[unserializable]";
+	} catch {
+		return "[unserializable]";
+	}
+	if (typeof value === "function") return "[function]";
+	return String(value);
+}
+function formatMessage(args) {
+	const message = args.map(serializeArgument).join(" ");
+	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
+}
 /**
-* Keeps the picked element ringed while the reporter writes about it, so the
-* composer parked next to it is visibly about that element.
+* Buffers the console noise a user saw right before reporting a bug.
+* Wrappers delegate to the previous implementation, so nothing is swallowed.
 */
-function SelectionOutline({ node }) {
-	const boxRef = useRef(null);
-	useEffect(() => {
-		const box = boxRef.current;
-		if (!(box && node)) return;
-		let frame = 0;
-		const draw = () => {
-			frame = 0;
-			const rect = node.getBoundingClientRect();
-			const hidden = rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > window.innerHeight;
-			box.style.opacity = hidden ? "0" : "1";
-			box.style.width = `${rect.width}px`;
-			box.style.height = `${rect.height}px`;
-			box.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
-		};
-		const schedule = () => {
-			frame ||= requestAnimationFrame(draw);
-		};
-		draw();
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(draw);
-		observer?.observe(node);
-		window.addEventListener("scroll", schedule, {
-			capture: true,
-			passive: true
+function startConsoleRecorder(options) {
+	const limit = options?.limit ?? DEFAULT_LIMIT;
+	const buffer = [];
+	let active = true;
+	const push = (level, message) => {
+		if (!(active && message)) return;
+		buffer.push({
+			level,
+			message,
+			timestamp: Date.now()
 		});
-		window.addEventListener("resize", schedule);
-		return () => {
-			cancelAnimationFrame(frame);
-			observer?.disconnect();
-			window.removeEventListener("scroll", schedule, true);
-			window.removeEventListener("resize", schedule);
+		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
+	};
+	const originals = /* @__PURE__ */ new Map();
+	const wrappers = /* @__PURE__ */ new Map();
+	for (const method of RECORDED_METHODS) {
+		const original = console[method];
+		const wrapper = (...args) => {
+			push(method, formatMessage(args));
+			Reflect.apply(original, console, args);
 		};
-	}, [node]);
-	if (!node) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: "selection-outline",
-		ref: boxRef
-	});
-}
-//#endregion
-//#region src/feedback/ui/visible-viewport.ts
-/**
-* The part of the page the reporter can actually see, in fixed-position
-* coordinates. On mobile the keyboard shrinks this without touching
-* `window.innerHeight`, so anything that must stay reachable measures here.
-*/
-function visibleViewport() {
-	const viewport = window.visualViewport;
-	const left = viewport?.offsetLeft ?? 0;
-	const top = viewport?.offsetTop ?? 0;
-	const width = viewport?.width ?? window.innerWidth;
-	const height = viewport?.height ?? window.innerHeight;
-	return {
-		bottom: window.innerHeight - top - height,
-		height,
-		left,
-		right: window.innerWidth - left - width,
-		top,
-		width
+		originals.set(method, original);
+		wrappers.set(method, wrapper);
+		console[method] = wrapper;
+	}
+	const onError = (event) => {
+		const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
+		push("error", `${event.message}${where}`);
 	};
-}
-function onViewportChange(update) {
-	window.addEventListener("resize", update);
-	window.visualViewport?.addEventListener("resize", update);
-	window.visualViewport?.addEventListener("scroll", update);
-	return () => {
-		window.removeEventListener("resize", update);
-		window.visualViewport?.removeEventListener("resize", update);
-		window.visualViewport?.removeEventListener("scroll", update);
+	const onRejection = (event) => {
+		push("error", `Unhandled rejection: ${serializeArgument(event.reason)}`);
 	};
-}
-//#endregion
-//#region src/feedback/ui/floating/use-floating-position.ts
-const EDGE_GAP$1 = 12;
-const KEYBOARD_STEP = 24;
-const KEY_DIRECTIONS = {
-	ArrowDown: {
-		x: 0,
-		y: KEYBOARD_STEP
-	},
-	ArrowLeft: {
-		x: -24,
-		y: 0
-	},
-	ArrowRight: {
-		x: KEYBOARD_STEP,
-		y: 0
-	},
-	ArrowUp: {
-		x: 0,
-		y: -24
-	}
-};
-function clampPosition(point, bounds, viewport = visibleViewport()) {
+	window.addEventListener("error", onError);
+	window.addEventListener("unhandledrejection", onRejection);
 	return {
-		x: Math.max(viewport.left + EDGE_GAP$1, Math.min(point.x, viewport.left + viewport.width - bounds.width - EDGE_GAP$1)),
-		y: Math.max(viewport.top + EDGE_GAP$1, Math.min(point.y, viewport.top + viewport.height - bounds.height - EDGE_GAP$1))
+		events: () => buffer.slice(),
+		stop: () => {
+			if (!active) return;
+			active = false;
+			buffer.length = 0;
+			for (const method of RECORDED_METHODS) {
+				const original = originals.get(method);
+				if (original && console[method] === wrappers.get(method)) console[method] = original;
+			}
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		}
 	};
 }
-function useFloatingPosition(corner = "bottom-right", isPanelOpen = false) {
-	const rootRef = useRef(null);
-	const gesture = useRef(null);
-	const [position, setPosition] = useState(null);
-	const [positionedPanelOpen, setPositionedPanelOpen] = useState(isPanelOpen);
-	const [viewport, setViewport] = useState(visibleViewport);
-	const horizontalEdge = corner.endsWith("right") ? "right" : "left";
-	const verticalEdge = corner.startsWith("bottom") ? "bottom" : "top";
-	if (positionedPanelOpen !== isPanelOpen) {
-		setPositionedPanelOpen(isPanelOpen);
-		setPosition(null);
-	}
-	const moveTo = useCallback((point, bounds) => {
-		const fitted = clampPosition(point, bounds);
-		const visible = visibleViewport();
-		const anchor = {
-			x: horizontalEdge === "right" ? visible.left + visible.width - fitted.x - bounds.width : fitted.x - visible.left,
-			y: verticalEdge === "bottom" ? visible.top + visible.height - fitted.y - bounds.height : fitted.y - visible.top
-		};
-		setPosition((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
-	}, [horizontalEdge, verticalEdge]);
-	const keepInViewport = useCallback(() => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds) return;
-		const fitted = clampPosition(bounds, bounds, viewport);
-		if (Math.abs(fitted.x - bounds.x) > .5 || Math.abs(fitted.y - bounds.y) > .5) moveTo(fitted, bounds);
-	}, [moveTo, viewport]);
-	useLayoutEffect(() => {
-		keepInViewport();
-	}, [keepInViewport]);
-	useEffect(() => {
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
-		if (rootRef.current) observer?.observe(rootRef.current);
-		const stopListening = onViewportChange(() => setViewport(visibleViewport()));
-		return () => {
-			observer?.disconnect();
-			stopListening();
-		};
-	}, [keepInViewport]);
-	const onPointerDown = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds || event.button !== 0) return;
-		event.currentTarget.setPointerCapture(event.pointerId);
-		gesture.current = {
-			x: event.clientX - bounds.x,
-			y: event.clientY - bounds.y
-		};
-	};
-	const onPointerMove = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		const grab = gesture.current;
-		if (!(bounds && grab && event.currentTarget.hasPointerCapture(event.pointerId))) return;
-		moveTo({
-			x: event.clientX - grab.x,
-			y: event.clientY - grab.y
-		}, bounds);
+//#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 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 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);
+			}
+		}
 	};
-	const viewportStyles = `.root { --rf-viewport-width: ${viewport.width}px; --rf-viewport-top: ${viewport.top}px; --rf-viewport-bottom: ${viewport.bottom}px; --rf-viewport-left: ${viewport.left}px; --rf-viewport-right: ${viewport.right}px; }`;
-	const anchorStyles = position ? `.root[data-moved="true"] { left: auto; right: auto; top: auto; bottom: auto; ${horizontalEdge}: ${position.x + viewport[horizontalEdge]}px; ${verticalEdge}: ${position.y + viewport[verticalEdge]}px; }` : "";
 	return {
-		handleProps: {
-			onKeyDown,
-			onLostPointerCapture: () => {
-				gesture.current = null;
-			},
-			onPointerCancel: () => {
-				gesture.current = null;
-			},
-			onPointerDown,
-			onPointerMove,
-			onPointerUp: () => {
-				gesture.current = null;
-			}
-		},
-		position,
-		rootRef,
-		styles: viewportStyles + anchorStyles
+		hasPendingAttachments: pendingReport !== null,
+		isEditingDisabled: activeRequest !== null || pendingReport !== null,
+		isSubmitting: activeRequest !== null,
+		resetSubmission,
+		submit
 	};
 }
 //#endregion
-//#region src/feedback/ui/floating/floating-widget.tsx
-function FloatingWidget({ labels, position, state }) {
-	const [minimized, setMinimized] = useState(false);
-	const launcherRef = useRef(null);
-	const showPanel = state.isOpen && !minimized;
-	const floating = useFloatingPosition(position, showPanel);
-	const minimize = () => {
-		setMinimized(true);
-		requestAnimationFrame(() => launcherRef.current?.focus());
-	};
-	useEffect(() => {
-		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
-	}, [state.step, state.annotationTrigger]);
+//#region src/feedback/ui/state/use-screenshot-drafts.ts
+function releaseDraft(draft) {
+	releaseCapture(draft?.image);
+	releaseCapture(draft?.closeUp);
+}
+function useScreenshotDrafts(captureFailed, onError) {
+	const [screenshots, setScreenshots] = useState([]);
+	const [activeId, setActiveId] = useState(null);
+	const [pendingCapture, setPendingCapture] = useState(null);
+	const ownedDrafts = useRef(/* @__PURE__ */ new Map());
+	const captureRequest = useRef(null);
 	useEffect(() => {
-		if (!showPanel || state.step !== "compose") return;
-		const onKeyDown = (event) => {
-			if (event instanceof KeyboardEvent && event.key === "Escape" && !event.defaultPrevented) {
-				setMinimized(true);
-				requestAnimationFrame(() => launcherRef.current?.focus());
-			}
-		};
-		const widgetRoot = floating.rootRef.current?.getRootNode();
-		document.addEventListener("keydown", onKeyDown);
-		widgetRoot?.addEventListener("keydown", onKeyDown);
+		const drafts = ownedDrafts.current;
 		return () => {
-			document.removeEventListener("keydown", onKeyDown);
-			widgetRoot?.removeEventListener("keydown", onKeyDown);
+			captureRequest.current = null;
+			for (const draft of drafts.values()) releaseDraft(draft);
+			drafts.clear();
 		};
-	}, [
-		floating.rootRef,
-		showPanel,
-		state.step
+	}, []);
+	const storeScreenshot = useCallback((screenshot) => {
+		releaseDraft(ownedDrafts.current.get(screenshot.id));
+		ownedDrafts.current.set(screenshot.id, screenshot);
+		setScreenshots((previous) => {
+			return previous.some(({ id }) => id === screenshot.id) ? previous.map((item) => item.id === screenshot.id ? screenshot : item) : [...previous, screenshot];
+		});
+		setActiveId(screenshot.id);
+	}, []);
+	const cancelPendingCapture = useCallback(() => {
+		captureRequest.current = null;
+		setPendingCapture(null);
+	}, []);
+	const takeScreenshot = useCallback(async (request) => {
+		captureRequest.current = request;
+		setPendingCapture(request);
+		onError(null);
+		const context = collectPageContext({ sdkVersion: SDK_VERSION });
+		const image = await captureViewport().catch(() => null);
+		if (captureRequest.current !== request) {
+			releaseCapture(image);
+			return;
+		}
+		cancelPendingCapture();
+		if (!image) {
+			onError(captureFailed);
+			return;
+		}
+		storeScreenshot({
+			...request,
+			annotations: [],
+			context,
+			image
+		});
+	}, [
+		cancelPendingCapture,
+		captureFailed,
+		onError,
+		storeScreenshot
 	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "root",
-		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
-		"data-moved": Boolean(floating.position),
-		"data-position": position,
-		ref: floating.rootRef,
-		children: [
-			/* @__PURE__ */ jsx("style", { children: floating.styles }),
-			showPanel && state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null),
-			showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
-				floatingControls: /* @__PURE__ */ jsxs("div", {
-					className: "floating-controls",
-					children: [/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.moveFeedback,
-						className: "icon-btn drag-handle",
-						title: labels.moveFeedback,
-						type: "button",
-						...floating.handleProps,
-						children: /* @__PURE__ */ jsx(GripIcon, {})
-					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": labels.minimize,
-						className: "icon-btn",
-						onClick: minimize,
-						title: labels.minimize,
-						type: "button",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
-					})]
-				}),
-				labels,
-				state
-			}) : /* @__PURE__ */ jsx(Launcher, {
-				buttonRef: launcherRef,
-				isOpen: false,
-				label: state.isOpen ? labels.resume : labels.trigger,
-				onClick: () => {
-					setMinimized(false);
-					if (!state.isOpen) state.open();
-				}
-			})
-		]
-	});
-}
-//#endregion
-//#region src/feedback/ui/floating/element-walk.ts
-const ARROW_SIBLING = {
-	ArrowLeft: "previousElementSibling",
-	ArrowRight: "nextElementSibling"
-};
-const AIM_KEYS = [
-	"Tab",
-	"ArrowUp",
-	"ArrowDown",
-	"ArrowLeft",
-	"ArrowRight"
-];
-function isWidgetOwned(element) {
-	return element.closest(`[${WIDGET_MARKER}]`) !== null;
-}
-function isPickable(element) {
-	if (!element || element === document.documentElement || isWidgetOwned(element)) return false;
-	const rect = element.getBoundingClientRect();
-	return rect.width > 0 && rect.height > 0;
-}
-function pickableElements() {
-	return Array.from(document.body.querySelectorAll("*")).filter(isPickable);
-}
-function documentStep(from, backwards) {
-	const all = pickableElements();
-	const index = all.indexOf(from);
-	if (all.length === 0) return null;
-	if (index === -1) return all[0] ?? null;
-	return all[(index + (backwards ? -1 : 1) + all.length) % all.length] ?? null;
-}
-function climb(from) {
-	let candidate = from.parentElement;
-	while (candidate && !isPickable(candidate)) candidate = candidate.parentElement;
-	return candidate;
-}
-function descend(from) {
-	let candidate = from.firstElementChild;
-	while (candidate && !isPickable(candidate)) candidate = candidate.nextElementSibling;
-	return candidate;
-}
-function sibling(from, direction) {
-	let candidate = from[direction];
-	while (candidate && !isPickable(candidate)) candidate = candidate[direction];
-	return candidate;
-}
-function stepAim(from, key, backwards) {
-	if (!(from && isPickable(from))) return pickableElements()[0] ?? null;
-	if (key === "Tab") return documentStep(from, backwards);
-	if (key === "ArrowUp") return climb(from);
-	if (key === "ArrowDown") return descend(from);
-	const direction = ARROW_SIBLING[key];
-	return direction ? sibling(from, direction) : null;
-}
-//#endregion
-//#region src/feedback/ui/picker.tsx
-const LABEL_HEIGHT = 24;
-const LABEL_GAP = 6;
-const NOTE_WIDTH = 300;
-const NOTE_GAP = 10;
-const EDGE_GAP = 12;
-/** Events raised by the picker's own note card must reach it, never be swallowed. */
-function targetsWidget(event) {
-	return event.composedPath().some((node) => node instanceof Element && isWidgetOwned(node));
-}
-function elementUnder(x, y) {
-	const element = document.elementFromPoint(x, y);
-	if (!element || isWidgetOwned(element)) return null;
-	return element;
-}
-function describeTarget(element) {
+	const takeCapture = useCallback(() => {
+		if (!captureRequest.current) takeScreenshot({
+			id: crypto.randomUUID(),
+			source: "manual"
+		});
+	}, [takeScreenshot]);
+	const refreshAutomatic = useCallback(() => {
+		takeScreenshot({
+			id: ownedDrafts.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
+			source: "automatic"
+		});
+	}, [takeScreenshot]);
+	const retakeCapture = useCallback((id) => {
+		if (!captureRequest.current && ownedDrafts.current.has(id)) takeScreenshot({
+			id,
+			source: "manual"
+		});
+	}, [takeScreenshot]);
+	const removeCapture = useCallback((id) => {
+		if (captureRequest.current?.id === id) cancelPendingCapture();
+		releaseDraft(ownedDrafts.current.get(id));
+		ownedDrafts.current.delete(id);
+		setScreenshots((previous) => previous.filter((item) => item.id !== id));
+		setActiveId((current) => current === id ? null : current);
+	}, [cancelPendingCapture]);
+	const resetScreenshots = useCallback(() => {
+		cancelPendingCapture();
+		for (const draft of ownedDrafts.current.values()) releaseDraft(draft);
+		ownedDrafts.current.clear();
+		setScreenshots([]);
+		setActiveId(null);
+	}, [cancelPendingCapture]);
+	const setAnnotations = useCallback((annotations) => {
+		setScreenshots((previous) => previous.map((item) => item.id === activeId ? {
+			...item,
+			annotations
+		} : item));
+	}, [activeId]);
+	const setSelectionComment = useCallback((id, comment) => {
+		setScreenshots((previous) => previous.map((item) => item.id === id && item.selection ? {
+			...item,
+			selection: {
+				...item.selection,
+				comment
+			}
+		} : item));
+	}, []);
 	return {
-		componentName: resolveComponentStack(getFiberFromNode(element))[0],
-		element,
-		label: describeElement(element),
-		rect: element.getBoundingClientRect(),
-		region: describeRegion(element)
+		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
+		cancelPendingCapture,
+		pendingCapture,
+		refreshAutomatic,
+		removeCapture,
+		resetScreenshots,
+		retakeCapture,
+		screenshots,
+		selectScreenshot: setActiveId,
+		setAnnotations,
+		setSelectionComment,
+		storeScreenshot,
+		takeCapture
 	};
 }
-/**
-* Pins the note card to the element: below it, flipped above when the visible
-* viewport — what is left of the screen once a mobile keyboard is up — has no
-* room there. Measures against the part of the element actually on screen, so
-* picking a full-height section still leaves the card in view.
-*/
-function noteStyle(rect, view) {
-	const left = Math.min(Math.max(view.left + EDGE_GAP, rect.left), Math.max(view.left + EDGE_GAP, view.left + view.width - NOTE_WIDTH - EDGE_GAP));
-	const visibleTop = Math.max(rect.top, view.top + EDGE_GAP);
-	const visibleBottom = Math.min(rect.bottom, view.top + view.height - EDGE_GAP);
-	if (view.top + view.height - visibleBottom > visibleTop - view.top) return {
-		left,
-		top: visibleBottom + NOTE_GAP
-	};
+//#endregion
+//#region src/feedback/ui/state/use-widget-config.ts
+function dismissalDuration(days) {
+	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
+}
+function useWidgetConfig(props) {
+	const context = useContext(RefletContext);
+	const publicKey = props.publicKey ?? context?.publicKey;
+	const baseUrl = props.baseUrl ?? context?.baseUrl;
+	const user = props.user ?? context?.user;
+	const userToken = props.userToken ?? context?.userToken;
 	return {
-		bottom: window.innerHeight - visibleTop + NOTE_GAP,
-		left
+		client: useMemo(() => publicKey ? new Reflet({
+			baseUrl,
+			publicKey,
+			user,
+			userToken
+		}) : null, [
+			baseUrl,
+			publicKey,
+			user,
+			userToken
+		]),
+		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
+		dismissForDays: dismissalDuration(props.dismissForDays),
+		isAnonymous: !(user || userToken)
 	};
 }
+//#endregion
+//#region src/feedback/ui/use-capture-sync.ts
+const RESIZE_DEBOUNCE = 400;
 /**
-* Points at any element in the page the way a coding agent needs it: the React
-* component that owns it plus the page region it lives in. Picking never
-* commits on its own — it pins a note card to the element, so the reporter
-* writes about that element right there and confirms. Aiming stays live until
-* then, which is what makes the flow usable without hover, on touch.
+* Calls `refresh` whenever the page the reporter is looking at changes shape:
+* SPA routes (which never fire popstate on push/replace — history methods must
+* be patched) and window resizes, debounced. Keeps the frozen screenshot and
+* page context describing what the reporter currently sees.
 */
-function ElementPicker({ labels, onCancel, onPick }) {
-	const [target, setTarget] = useState(null);
-	const [pinned, setPinned] = useState(null);
-	const [note, setNote] = useState("");
-	const noteRef = useRef(null);
-	const pinnedRef = useRef(false);
-	const [view, setView] = useState(visibleViewport);
-	const aimRef = useRef(null);
-	useEffect(() => onViewportChange(() => setView(visibleViewport())), []);
-	useEffect(() => {
-		pinnedRef.current = pinned !== null;
-		if (pinned) noteRef.current?.focus({ preventScroll: true });
-	}, [pinned]);
-	useEffect(() => {
-		aimRef.current = target?.element ?? null;
-	}, [target]);
+function useCaptureSync(enabled, refresh) {
 	useEffect(() => {
-		const swallow = (event) => {
-			if (targetsWidget(event)) return;
-			event.preventDefault();
-			event.stopPropagation();
-		};
-		const aimAt = (x, y) => {
-			const element = elementUnder(x, y);
-			if (!element) return;
-			setTarget((current) => current?.element === element ? {
-				...current,
-				rect: element.getBoundingClientRect()
-			} : describeTarget(element));
-		};
-		const onMove = (event) => {
-			if (pinnedRef.current || targetsWidget(event)) return;
-			aimAt(event.clientX, event.clientY);
-		};
-		const onPointerDown = (event) => {
-			if (targetsWidget(event)) return;
-			swallow(event);
-			if (!pinnedRef.current) aimAt(event.clientX, event.clientY);
-		};
-		const onPointerUp = (event) => {
-			if (targetsWidget(event)) return;
-			swallow(event);
-			if (pinnedRef.current) return;
-			const element = elementUnder(event.clientX, event.clientY);
-			if (element) setPinned(describeTarget(element));
-		};
-		const moveAim = (key, backwards) => {
-			const next = stepAim(aimRef.current, key, backwards);
-			if (!next) return;
-			next.scrollIntoView({
-				block: "nearest",
-				inline: "nearest"
-			});
-			aimRef.current = next;
-			setTarget(describeTarget(next));
-		};
-		const onEscape = () => {
-			if (pinnedRef.current) {
-				setPinned(null);
-				setNote("");
-				return;
-			}
-			onCancel();
+		if (!enabled) return;
+		const history = window.history;
+		const originalPush = history.pushState;
+		const originalReplace = history.replaceState;
+		const hadOwnPush = Object.hasOwn(history, "pushState");
+		const hadOwnReplace = Object.hasOwn(history, "replaceState");
+		history.pushState = function pushState(data, unused, url) {
+			const result = originalPush.call(history, data, unused, url);
+			refresh();
+			return result;
 		};
-		const onKeyDown = (event) => {
-			if (event.key === "Escape") {
-				swallow(event);
-				onEscape();
-				return;
-			}
-			if (pinnedRef.current || targetsWidget(event)) return;
-			if (event.key === "Enter") {
-				swallow(event);
-				if (aimRef.current) setPinned(describeTarget(aimRef.current));
-				return;
-			}
-			if (!AIM_KEYS.includes(event.key)) return;
-			swallow(event);
-			moveAim(event.key, event.shiftKey);
+		history.replaceState = function replaceState(data, unused, url) {
+			const result = originalReplace.call(history, data, unused, url);
+			refresh();
+			return result;
 		};
-		const onScroll = () => {
-			setTarget((current) => current ? {
-				...current,
-				rect: current.element.getBoundingClientRect()
-			} : current);
-			setPinned((current) => current ? {
-				...current,
-				rect: current.element.getBoundingClientRect()
-			} : current);
+		window.addEventListener("popstate", refresh);
+		let resizeTimer;
+		const onResize = () => {
+			window.clearTimeout(resizeTimer);
+			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
 		};
-		document.addEventListener("pointermove", onMove, true);
-		document.addEventListener("pointerdown", onPointerDown, true);
-		document.addEventListener("pointerup", onPointerUp, true);
-		document.addEventListener("mousedown", swallow, true);
-		document.addEventListener("mouseup", swallow, true);
-		document.addEventListener("click", swallow, true);
-		document.addEventListener("keydown", onKeyDown, true);
-		window.addEventListener("scroll", onScroll, {
-			capture: true,
-			passive: true
-		});
-		const previousCursor = document.body.style.cursor;
-		document.body.style.cursor = "crosshair";
+		window.addEventListener("resize", onResize);
 		return () => {
-			document.removeEventListener("pointermove", onMove, true);
-			document.removeEventListener("pointerdown", onPointerDown, true);
-			document.removeEventListener("pointerup", onPointerUp, true);
-			document.removeEventListener("mousedown", swallow, true);
-			document.removeEventListener("mouseup", swallow, true);
-			document.removeEventListener("click", swallow, true);
-			document.removeEventListener("keydown", onKeyDown, true);
-			window.removeEventListener("scroll", onScroll, true);
-			document.body.style.cursor = previousCursor;
+			if (hadOwnPush) history.pushState = originalPush;
+			else Reflect.deleteProperty(history, "pushState");
+			if (hadOwnReplace) history.replaceState = originalReplace;
+			else Reflect.deleteProperty(history, "replaceState");
+			window.removeEventListener("popstate", refresh);
+			window.clearTimeout(resizeTimer);
+			window.removeEventListener("resize", onResize);
 		};
-	}, [onCancel]);
-	const rect = (pinned ?? target)?.rect;
-	const labelAbove = rect ? rect.top > 30 : true;
-	return /* @__PURE__ */ jsxs("div", { children: [
-		rect && /* @__PURE__ */ jsx("div", {
-			className: "picker-box",
-			"data-pinned": pinned !== null,
-			style: {
-				height: rect.height,
-				translate: `${rect.left}px ${rect.top}px`,
-				width: rect.width
-			}
-		}),
-		rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
-			className: "picker-label",
-			style: { translate: `${Math.max(4, rect.left)}px ${labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP}px` },
-			children: [/* @__PURE__ */ jsx("strong", { children: target.componentName ? `<${target.componentName}>` : target.label }), target.region && /* @__PURE__ */ jsx("span", { children: target.region })]
-		}),
-		pinned ? /* @__PURE__ */ jsxs("form", {
-			className: "picker-note glass",
-			onSubmit: (event) => {
-				event.preventDefault();
-				onPick(pinned.element, note.trim());
-			},
-			style: noteStyle(pinned.rect, view),
-			children: [
-				/* @__PURE__ */ jsxs("p", {
-					className: "picker-note-target",
-					children: [/* @__PURE__ */ jsx("strong", { children: pinned.componentName ? `<${pinned.componentName}>` : pinned.label }), pinned.region && /* @__PURE__ */ jsx("span", { children: pinned.region })]
-				}),
-				/* @__PURE__ */ jsx("textarea", {
-					"aria-label": labels.elementNote,
-					maxLength: MAX_SELECTION_COMMENT_LENGTH,
-					onChange: (event) => setNote(event.target.value),
-					onKeyDown: (event) => {
-						if (event.key === "Enter" && !event.shiftKey) {
-							event.preventDefault();
-							onPick(pinned.element, note.trim());
-						}
-					},
-					placeholder: labels.elementNotePlaceholder,
-					ref: noteRef,
-					rows: 2,
-					value: note
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "picker-note-actions",
-					children: [/* @__PURE__ */ jsx("button", {
-						className: "picker-cancel",
-						onClick: () => {
-							setPinned(null);
-							setNote("");
-						},
-						type: "button",
-						children: labels.pickAnother
-					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": labels.attachElement,
-						className: "submit",
-						title: labels.attachElement,
-						type: "submit",
-						children: /* @__PURE__ */ jsx(ArrowIcon, {})
-					})]
-				})
-			]
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "picker-hint",
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "picker-instruction",
-				children: [
-					labels.pickElementHint,
-					" ",
-					/* @__PURE__ */ jsx("kbd", { children: "Tab" }),
-					/* @__PURE__ */ jsx("kbd", { children: "Enter" }),
-					/* @__PURE__ */ jsx("kbd", { children: "Esc" })
-				]
-			}), /* @__PURE__ */ jsx("button", {
-				className: "picker-cancel",
-				onClick: onCancel,
-				type: "button",
-				children: labels.cancel
-			})]
-		})
-	] });
-}
-//#endregion
-//#region src/feedback/ui/annotation/styles.ts
-const ANNOTATOR_STYLES = `
-.overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; display: flex; flex-direction: column; background: transparent; color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
-.overlay::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--rf-bg) 94%, transparent); animation: rf-editor-in 260ms var(--rf-ease); transition: opacity 260ms var(--rf-ease); }
-.overlay::backdrop { background: transparent; }
-@keyframes rf-editor-in { from { opacity: 0; } }
-.editor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; container-type: size; }
-.editor-image { width: min(100cqw, calc(100cqh * var(--rf-capture-ratio))); aspect-ratio: var(--rf-capture-ratio); flex: none; position: relative; }
-.editor-visual { position: absolute; inset: 0; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); transform-origin: top left; overflow: hidden; }
-.editor-visual img, .editor-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: top center; outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
-.editor-visual canvas { cursor: crosshair; touch-action: none; }
-.overlay[data-opening="true"] .editor { pointer-events: none; }
-.overlay[data-closing="true"] { pointer-events: none; }
-.overlay[data-closing="true"]::before { opacity: 0; }
-.overlay[data-closing="true"] .toolbar, .overlay[data-closing="true"] .element-note { opacity: 0; transform: translateY(8px); }
-
-.element-note { order: 1; display: flex; align-items: flex-start; gap: 10px; width: min(560px, calc(100vw - 32px)); margin: 0 auto 10px; padding: 10px 14px; border-radius: var(--rf-radius); transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); }
-.element-note svg { flex: none; margin-top: 4px; opacity: 0.7; }
-.element-note textarea { flex: 1; min-width: 0; height: 42px; max-height: 96px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; resize: none; }
-.element-note textarea:focus { outline: none; }
-.element-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
-
-.toolbar { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); padding: 4px 12px max(16px, env(safe-area-inset-bottom)); }
-.toolbar .group { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--rf-pill); }
-.tool[aria-pressed="true"], .tool[data-selected="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
-.color-picker { position: relative; }
-.color-picker summary { display: flex; justify-content: center; align-items: center; }
-.color-preview { width: 18px; height: 18px; border-radius: 50%; background: var(--annotation-color); box-shadow: inset 0 0 0 1px var(--rf-border); }
-.color-popover { --rf-color-width: 200px; position: absolute; bottom: calc(100% + 14px); left: clamp(calc(12px - var(--rf-color-anchor)), 0px, calc(100vw - var(--rf-color-anchor) - var(--rf-color-width) - 12px)); display: flex; align-items: center; gap: 6px; width: var(--rf-color-width); padding: 4px 4px 4px 14px; border-radius: var(--rf-pill); animation: rf-in 180ms var(--rf-ease); }
-.color-picker[data-placement="below"] .color-popover { top: calc(100% + 14px); bottom: auto; }
-.color-slider { flex: 1; min-width: 0; }
-.color-slider-control { display: flex; align-items: center; height: 40px; width: 100%; touch-action: none; user-select: none; cursor: pointer; }
-.color-slider-track { height: 12px; width: 100%; border-radius: var(--rf-pill); background: linear-gradient(to right, var(--rf-swatch-base), var(--annotation-base-color)); box-shadow: inset 0 0 0 1px var(--rf-border); }
-.color-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--rf-swatch-base); border-radius: 50%; background: var(--annotation-color); box-shadow: var(--rf-shadow-low); transition: scale 160ms var(--rf-ease); }
-.color-slider-thumb[data-dragging] { scale: 1.12; }
-.color-slider-thumb:has(:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
-.color-spectrum { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
-.color-spectrum::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--rf-spectrum); box-shadow: inset 0 0 0 1px var(--rf-glass-highlight); }
-.color-spectrum:hover { background: var(--rf-bg-hover); }
-.color-spectrum button { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
-.color-spectrum button:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
-.color-spectrum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
-.done-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--rf-pill); color: var(--rf-primary-text); background: var(--rf-primary); }
-.drawing-menu { position: relative; }
-.drawing-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: 200px; max-height: calc(50dvh - 68px); overflow-y: auto; padding: 6px; border-radius: var(--rf-radius); }
-.drawing-menu[data-placement="below"] .drawing-popover { top: calc(100% + 12px); bottom: auto; }
-.drawing-option { display: flex; align-items: center; width: 100%; min-height: 40px; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; }
-.drawing-option:hover, .drawing-option[aria-pressed="true"] { background: var(--rf-bg-hover); }
-.drawing-divider { height: 1px; margin: 5px; background: var(--rf-border); }
-.editor canvas[data-tool="text"] { cursor: text; }
-.text-annotation-editor { position: fixed; z-index: 3; width: 240px; padding: 8px; border-radius: var(--rf-radius); }
-.text-annotation-editor:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
-.text-annotation-editor textarea { display: block; width: 100%; min-height: 64px; max-height: 112px; padding: 6px; border: 0; background: transparent; resize: vertical; font-size: 16px; line-height: 24px; }
-.text-annotation-editor textarea:focus { outline: none; }
-.text-annotation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
-@media (pointer: coarse) {
-  .drawing-option { min-height: 44px; }
-  .done-btn { width: 44px; height: 44px; }
-  .color-popover { --rf-color-width: 232px; padding-left: 16px; }
-  .color-slider-control, .color-spectrum { height: 44px; }
-  .color-spectrum { width: 44px; }
-  .color-slider-thumb, .color-spectrum::before { width: 18px; height: 18px; }
-  .editor { padding: 8px; }
-  .toolbar { gap: 6px; }
-  .toolbar .group { padding: 3px; gap: 0; }
-}
-@media (pointer: coarse) and (max-width: 360px) {
-  .toolbar { gap: 4px; padding-inline: 2px; }
-  .toolbar .group { padding: 0; }
-}
-`;
-//#endregion
-//#region src/feedback/ui/composer/styles.ts
-const COMPOSER_STYLES = `
-.panel { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; outline: none; animation: rf-in 240ms var(--rf-ease); }
-.success-panel { border-radius: var(--rf-radius); }
-.composer { position: relative; display: flex; flex-direction: column; gap: 8px; }
-.message-row { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 26px; }
-.message-row textarea {
-  width: 100%; height: 76px; max-height: min(140px, 30dvh);
-  margin: 0; padding: 6px 6px 0 8px; border: 0; resize: none;
-  background: transparent; line-height: 20px;
-}
-.message-actions { display: flex; align-items: center; gap: 2px; }
-.message-row textarea::placeholder { color: var(--rf-text-muted); }
-.message-row textarea:focus { outline: none; }
-.message-row:has(textarea:focus-visible) { border-color: color-mix(in srgb, var(--rf-accent) 40%, var(--rf-glass-stroke)); }
-.submit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease); }
-.submit svg { transform: rotate(-45deg); }
-.submit:hover:enabled { transform: scale(1.05); }
-.submit:disabled { background: var(--rf-bg-hover); color: var(--rf-text-muted); opacity: .65; }
-.composer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
-.composer-options { position: relative; }
-summary { cursor: pointer; list-style: none; }
-summary::-webkit-details-marker { display: none; }
-.options-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 40px)); max-height: calc(50dvh - 68px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rf-radius); animation: rf-in 160ms var(--rf-ease); }
-.composer-options[data-placement="below"] .options-popover { top: calc(100% + 12px); bottom: auto; }
-.email-field { display: flex; flex-direction: column; gap: 6px; color: var(--rf-text-muted); font-size: 12px; }
-.email-field [role="alert"] { color: var(--rf-danger); }
-.email-field input { width: 100%; padding: 9px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-sm); background: var(--rf-bg-subtle); color: var(--rf-text); }
-.dismiss-btn { min-height: 40px; text-align: left; padding: 0 8px; border-radius: var(--rf-radius-sm); color: var(--rf-text-muted); }
-.dismiss-btn:hover { background: var(--rf-bg-hover); }
-.version-info { font-size: 10px; color: var(--rf-text-muted); padding: 4px 8px 0; border-top: 1px solid var(--rf-border); text-decoration: none; }
-.version-info:hover { color: var(--rf-text); }
-.email-scrim { display: none; }
-.email-prompt { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; animation: rf-in 240ms var(--rf-ease); }
-.email-prompt h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
-.email-prompt p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--rf-text-muted); }
-.email-prompt .email-field input { min-height: 40px; border-radius: 14px; padding: 0 12px; }
-.email-prompt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
-.email-prompt-actions .ghost-btn { padding: 0 12px; color: var(--rf-text-muted); }
-.primary-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); font-weight: 500; }
-.primary-btn:hover { opacity: .9; }
-.attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
-.attachment-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
-.screenshot-scroll-area { position: relative; min-width: 0; margin: -14px -10px -20px; }
-.screenshot-strip { width: 100%; padding: 14px 10px 20px; overscroll-behavior-x: contain; --rf-fade-start: 0px; --rf-fade-end: 0px; mask-image: linear-gradient(to right, transparent, black var(--rf-fade-start), black calc(100% - var(--rf-fade-end)), transparent); mask-repeat: no-repeat; }
-.screenshot-strip[data-overflow-x-start] { --rf-fade-start: calc(10px + min(24px, var(--scroll-area-overflow-x-start))); }
-.screenshot-strip[data-overflow-x-end] { --rf-fade-end: calc(10px + min(24px, var(--scroll-area-overflow-x-end))); }
-.screenshot-strip-content { display: flex; align-items: flex-end; gap: 8px; }
-.screenshot-scroll-area:has(.screenshot-strip-content:empty) { display: none; }
-.capture-slot { display: flex; flex-direction: column; gap: 2px; flex: none; width: 56px; height: var(--rf-attachment-height); padding: 3px; border: 1px dashed var(--rf-border); border-radius: var(--rf-radius); box-shadow: none; }
-.capture-action { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; border-radius: 5px; color: var(--rf-text-muted); transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease); }
-.capture-action:first-child { border-radius: 16px 16px 5px 5px; }
-.capture-action:last-child { border-radius: 5px 5px 16px 16px; }
-.capture-action:hover:enabled { background: var(--rf-bg-hover); color: var(--rf-text); }
-.screenshot-scrollbar { height: 4px; margin: 0 8px 2px; opacity: 0; transition: opacity 150ms var(--rf-ease); }
-.screenshot-scrollbar[data-hovering], .screenshot-scrollbar[data-scrolling] { opacity: 1; }
-.screenshot-scroll-thumb { border-radius: var(--rf-pill); background: var(--rf-border); }
-.capture-progress { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: inherit; color: var(--rf-text-muted); font-size: 10px; }
-.attachments:empty { display: none; }
-.screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: var(--rf-attachment-height); padding: 0; border-radius: 16px; animation: rf-in 260ms var(--rf-ease); }
-.screenshot-attachment { border: 0; }
-.screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; border-radius: inherit; overflow: hidden; }
-.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
-.screenshot-preview canvas { position: absolute; inset: 0; pointer-events: none; }
-.annotation-count { position: absolute; left: 5px; bottom: 5px; min-width: 20px; padding: 2px 6px; border-radius: var(--rf-pill); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; color: var(--rf-text); }
-.attachment-actions { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); }
-.attachment-actions .icon-btn { width: 28px; height: 28px; }
-.attachment-actions svg { width: 14px; height: 14px; }
-.attachment-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--rf-text-muted); font-size: 11px; }
-.attachment-skeleton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rf-bg-subtle); animation: rf-fade 800ms alternate infinite; }
-.selection-badge { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--rf-pill); color: var(--rf-accent); }
-.selection-badge svg { width: 12px; height: 12px; }
-@media (pointer: coarse) {
-  .message-row { border-radius: 28px; }
-  .capture-slot { width: 64px; }
-  .message-row textarea { font-size: 16px; }
-  .submit { width: 44px; height: 44px; }
-  :host { --rf-attachment-height: 96px; }
-  .attachment-actions { right: 5px; bottom: 5px; }
-  .attachment-actions .icon-btn { width: 34px; height: 34px; }
-  .selection-badge { width: 24px; height: 24px; }
-  .email-field input { font-size: 16px; }
-  .dismiss-btn { min-height: 44px; }
-}
-@media (max-width: 480px) {
-  .email-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); animation: rf-fade 200ms var(--rf-ease); }
-  .email-prompt { position: fixed; left: 0; right: 0; bottom: 0; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: rf-drawer-in 280ms var(--rf-ease); }
-  .email-prompt h2 { font-size: 17px; }
-  .email-prompt p { font-size: 13px; }
-  .email-prompt-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
-  .email-prompt-actions .ghost-btn, .email-prompt-actions .primary-btn { justify-content: center; min-height: 48px; }
+	}, [enabled, refresh]);
 }
-@keyframes rf-drawer-in { from { transform: translateY(100%); } }
-`;
 //#endregion
-//#region src/feedback/ui/floating/picker-styles.ts
-const PICKER_STYLES = `
-.picker-box {
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--rf-accent) 10%, transparent);
-  box-shadow: 0 0 0 2px var(--rf-accent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 18%, transparent);
-  will-change: translate;
-  transition: translate 130ms var(--rf-ease);
+//#region src/feedback/ui/use-widget-state.ts
+const SUCCESS_CLOSE_DELAY = 2400;
+const IS_APPLE = /Mac|iPhone|iPad/;
+const MILLISECONDS_PER_DAY = 864e5;
+function readDismissedUntil(key) {
+	if (typeof window === "undefined") return 0;
+	try {
+		const value = Number.parseInt(window.localStorage.getItem(key) ?? "", 10);
+		if (Number.isFinite(value) && value > Date.now()) return value;
+		window.localStorage.removeItem(key);
+	} catch {
+		return 0;
+	}
+	return 0;
 }
-.picker-box[data-pinned="true"] { transition: none; }
-.picker-label {
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: min(420px, 90vw);
-  height: 24px;
-  padding: 0 8px;
-  font-size: 11.5px;
-  font-weight: 500;
-  color: var(--rf-accent-text);
-  background: var(--rf-accent);
-  border-radius: 6px;
-  box-shadow: var(--rf-shadow-float);
-  white-space: nowrap;
-  overflow: hidden;
-  will-change: translate;
-  transition: translate 130ms var(--rf-ease);
+function writeDismissedUntil(key, until) {
+	try {
+		window.localStorage.setItem(key, String(until));
+	} catch {}
 }
-.picker-label strong { flex: none; font-weight: 600; }
-.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
-.selection-outline {
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--rf-accent) 7%, transparent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-accent) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 14%, transparent);
-  transition: opacity 160ms var(--rf-ease);
+function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
+	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const key = parts.at(-1);
+	if (!key || event.key.toLowerCase() !== key) return false;
+	const isApple = IS_APPLE.test(platform);
+	const wantsMod = parts.includes("mod");
+	const expected = {
+		alt: parts.includes("alt") || parts.includes("option"),
+		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
+		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
+		shift: parts.includes("shift")
+	};
+	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
 }
-.picker-hint {
-  position: fixed;
-  left: 50%;
-  bottom: calc(24px + env(safe-area-inset-bottom));
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  max-width: calc(100vw - 24px);
-  padding: 5px 6px 5px 12px;
-  font-size: 12.5px;
-  color: var(--rf-text);
-  background: var(--rf-bg);
-  border-radius: var(--rf-pill);
-  box-shadow: var(--rf-ring), var(--rf-shadow);
-  animation: rf-fade 240ms var(--rf-ease);
-}
-.picker-instruction { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.picker-hint kbd {
-  padding: 1px 5px;
-  font: inherit;
-  font-size: 11px;
-  color: var(--rf-text-muted);
-  border-radius: 4px;
-  background: var(--rf-bg-subtle);
-  box-shadow: var(--rf-shadow-inset);
-}
-.picker-cancel {
-  display: inline-flex;
-  align-items: center;
-  height: 40px;
-  padding: 0 14px;
-  border-radius: var(--rf-pill);
-  font-size: 12.5px;
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--rf-text-muted);
-}
-.picker-cancel:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
-.picker-note {
-  position: fixed;
-  z-index: ${REFLET_Z_INDEX.annotatorOverlay};
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 300px;
-  max-width: calc(100vw - 24px);
-  padding: 6px 6px 6px 8px;
-  border-radius: 18px;
-  animation: rf-in 180ms var(--rf-ease);
-}
-.picker-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
-.picker-note-target {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 2px 4px 0;
-  font-size: 11px;
-  color: var(--rf-text-muted);
-  white-space: nowrap;
-}
-.picker-note-target strong { flex: none; font-weight: 600; color: var(--rf-accent); }
-.picker-note-target span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-.picker-note textarea {
-  width: 100%;
-  min-height: 46px;
-  max-height: min(160px, 30dvh);
-  margin: 0;
-  padding: 7px 6px 0;
-  border: 0;
-  resize: none;
-  background: transparent;
-  color: var(--rf-text);
-  font-size: 13px;
-  line-height: 19px;
-}
-.picker-note textarea:focus { outline: none; }
-.picker-note textarea::placeholder { color: var(--rf-text-muted); }
-.picker-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-@media (pointer: coarse) {
-  .picker-hint { padding: 6px 8px 6px 14px; }
-  .picker-hint kbd { display: none; }
-  .picker-cancel { height: 44px; padding: 0 18px; font-size: 14px; }
-  .picker-note textarea { font-size: 16px; min-height: 56px; }
-}
-
-`;
-//#endregion
-//#region src/feedback/ui/styles.ts
-const WIDGET_STYLES = `
-:host {
-  --rf-offset: 20px;
-  --rf-bg: #ffffff;
-  --rf-bg-subtle: rgb(55 53 47 / 4%);
-  --rf-bg-hover: rgb(55 53 47 / 7%);
-  --rf-border: rgb(55 53 47 / 9%);
-  --rf-hairline: rgb(15 15 15 / 10%);
-  --rf-text: #37352f;
-  --rf-text-muted: rgb(55 53 47 / 68%);
-  --rf-primary: #37352f;
-  --rf-primary-text: #ffffff;
-  --rf-accent: #2383e2;
-  --rf-accent-text: #ffffff;
-  --rf-danger: #d44c47;
-  --rf-success: #448361;
-  --rf-swatch-base: #ffffff;
-  --rf-spectrum: conic-gradient(#ff5757, #ffde59, #6bdb78, #4ac9fa, #8b5cf6, #ef73dc, #ff5757);
-  --rf-radius: 20px;
-  --rf-pill: 999px;
-  --rf-attachment-height: 78px;
-  --rf-width: 360px;
-  --rf-glass: rgb(255 255 255 / 72%);
-  --rf-glass-highlight: rgb(255 255 255 / 90%);
-  --rf-glass-stroke: rgb(255 255 255 / 70%);
-  --rf-radius-sm: 8px;
-  --rf-shadow-inset: inset 0 0 0 1px var(--rf-border);
-  --rf-ring: 0 0 0 1px rgb(15 15 15 / 4%);
-  --rf-shadow-low: 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
-  --rf-shadow: 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
-  --rf-shadow-float: 0 4px 12px -3px rgb(15 15 15 / 35%);
-  --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
-  color-scheme: light;
-  all: initial;
-  font-family: var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
-}
-
-:host([data-theme="dark"]) {
-  --rf-bg: #202020;
-  --rf-bg-subtle: rgb(255 255 255 / 5%);
-  --rf-bg-hover: rgb(255 255 255 / 9%);
-  --rf-border: rgb(255 255 255 / 9%);
-  --rf-hairline: rgb(255 255 255 / 12%);
-  --rf-text: #ebeae8;
-  --rf-text-muted: rgb(255 255 255 / 68%);
-  --rf-glass: rgb(32 32 32 / 78%);
-  --rf-glass-highlight: rgb(255 255 255 / 14%);
-  --rf-glass-stroke: rgb(255 255 255 / 12%);
-  --rf-primary: #f1efec;
-  --rf-primary-text: #1c1c1b;
-  --rf-accent: #529cca;
-  --rf-danger: #eb5757;
-  --rf-success: #4dab74;
-  --rf-ring: 0 0 0 1px rgb(255 255 255 / 7%);
-  --rf-shadow-low: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
-  --rf-shadow: 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
-  --rf-shadow-float: 0 4px 14px -3px rgb(0 0 0 / 55%);
-  color-scheme: dark;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-
-.root {
-  position: fixed;
-  z-index: ${REFLET_Z_INDEX.widgetRoot};
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  font: 13px/1.45 var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
-  color: var(--rf-text);
-}
-.root:has(.panel) { width: min(var(--rf-width), calc(var(--rf-viewport-width, 100vw) - 24px)); }
-.root[data-position$="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
-.root[data-position$="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
-.root[data-position^="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + max(var(--rf-offset), env(safe-area-inset-bottom))); }
-.root[data-position^="top"] { top: calc(var(--rf-viewport-top, 0px) + max(var(--rf-offset), env(safe-area-inset-top))); align-items: flex-start; }
-.root[data-position="bottom-right"] .panel { transform-origin: bottom right; }
-.root[data-position="bottom-left"] .panel { transform-origin: bottom left; }
-.root[data-position^="top"] .panel { transform-origin: top center; }
-.root[data-editing="true"] { visibility: hidden; pointer-events: none; }
-button, select, input, textarea { font: inherit; color: inherit; }
-button { margin: 0; cursor: pointer; border: 0; background: none; transition: scale 120ms var(--rf-ease); }
-button:disabled { cursor: not-allowed; opacity: .4; }
-button:active:not(:disabled) { scale: .97; }
-svg { flex-shrink: 0; }
-:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
-.icon-btn, .tool {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); color: var(--rf-text-muted);
-  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease), scale 120ms var(--rf-ease);
-}
-.icon-btn:hover, .tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
-.launcher {
-  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
-  border-radius: var(--rf-pill); color: var(--rf-text);
-  font-weight: 500;
-  transition: transform 200ms var(--rf-ease), box-shadow 200ms var(--rf-ease), scale 120ms var(--rf-ease);
-}
-.launcher:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow); }
-.launcher-icon { display: flex; width: 15px; height: 15px; }
-.launcher-icon .on-close { display: none; }
-.floating-controls {
-  display: flex; align-items: center; flex: none;
-  margin-right: auto; padding-left: 3px;
-  animation: rf-in 220ms var(--rf-ease);
-}
-.drag-handle { touch-action: none; cursor: grab; }
-.drag-handle:active { cursor: grabbing; }
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ghost-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: var(--rf-radius-sm); }
-.ghost-btn:hover { background: var(--rf-bg-hover); }
-.error { margin: 0; padding: 10px 14px; border-radius: var(--rf-radius); font-size: 12px; color: var(--rf-danger); }
-.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; }
-.done svg { color: var(--rf-success); }
-.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
-.done p { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
-.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rf-spin 700ms linear infinite; }
-.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-@keyframes rf-spin { to { transform: rotate(360deg); } }
-@keyframes rf-in { from { opacity: 0; transform: translateY(5px) scale(.98); } }
-@keyframes rf-fade { from { opacity: 0; } }
-@media (pointer: coarse) {
-  .icon-btn, .tool { width: 44px; height: 44px; }
-  .launcher, .ghost-btn { min-height: 44px; }
-}
-.glass {
-  position: relative;
-  isolation: isolate;
-  border: 1px solid var(--rf-glass-stroke);
-  box-shadow: inset 0 1px 0 var(--rf-glass-highlight), var(--rf-shadow);
-}
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--rf-bg);
-  pointer-events: none;
-}
-@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
-  .glass::before {
-    background: var(--rf-glass);
-    -webkit-backdrop-filter: blur(20px) saturate(1.6);
-    backdrop-filter: blur(20px) saturate(1.6);
-  }
-}
-@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
-}
-.capture-halo { position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.captureHalo}; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
-.capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
-.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
-.capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
-${COMPOSER_STYLES}
-${ANNOTATOR_STYLES}
-${PICKER_STYLES}
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-  button:active:not(:disabled) { scale: 1; }
+function useWidgetState(props) {
+	const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
+	const [isOpen, setIsOpen] = useState(false);
+	const [annotationTrigger, setAnnotationTrigger] = useState(null);
+	const [step, setStep] = useState("compose");
+	const [message, setMessage] = useState("");
+	const [email, setEmail] = useState("");
+	const [honeypot, setHoneypot] = useState("");
+	const [isElementCapturing, setIsElementCapturing] = useState(false);
+	const successTimer = useRef(null);
+	const [error, setError] = useState(null);
+	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
+	const pickRef = useRef(0);
+	useEffect(() => () => {
+		pickRef.current++;
+		if (successTimer.current) clearTimeout(successTimer.current);
+	}, []);
+	const consoleRef = useRef(null);
+	useEffect(() => {
+		setDismissedUntil(readDismissedUntil(dismissalKey));
+	}, [dismissalKey]);
+	useEffect(() => {
+		if (props.captureConsole === false) return;
+		const recorder = startConsoleRecorder();
+		consoleRef.current = recorder;
+		return () => {
+			consoleRef.current = null;
+			recorder.stop();
+		};
+	}, [props.captureConsole]);
+	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
+	const gallery = useScreenshotDrafts(captureFailed, setError);
+	const { activeScreenshot, cancelPendingCapture, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
+	const capture = activeScreenshot?.image ?? null;
+	const annotations = activeScreenshot?.annotations ?? [];
+	const isCapturing = gallery.pendingCapture !== null || isElementCapturing;
+	const submission = useFeedbackSubmission({
+		client,
+		onError: setError,
+		onSubmitted: (feedbackId) => {
+			setStep("success");
+			props.onSubmit?.({ feedbackId });
+			successTimer.current = setTimeout(close, SUCCESS_CLOSE_DELAY);
+		},
+		partialUploadMessage: props.labels?.attachmentUploadFailed ?? DEFAULT_WIDGET_LABELS.attachmentUploadFailed
+	});
+	const { resetSubmission } = submission;
+	const firstCapture = gallery.pendingCapture ?? gallery.screenshots[0];
+	const canRefreshAutomatically = gallery.screenshots.length <= 1 && firstCapture?.source === "automatic";
+	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && canRefreshAutomatically && annotations.length === 0 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
+	const reset = useCallback(() => {
+		if (successTimer.current) clearTimeout(successTimer.current);
+		setAnnotationTrigger(null);
+		resetSubmission();
+		pickRef.current++;
+		setIsElementCapturing(false);
+		resetScreenshots();
+		setMessage("");
+		setEmail("");
+		setHoneypot("");
+		setError(null);
+		setStep("compose");
+	}, [resetSubmission, resetScreenshots]);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		reset();
+		props.onClose?.();
+	}, [reset, props.onClose]);
+	const dismiss = useCallback(() => {
+		if (dismissForDays === null) return;
+		const until = Date.now() + dismissForDays * MILLISECONDS_PER_DAY;
+		writeDismissedUntil(dismissalKey, until);
+		setIsOpen(false);
+		reset();
+		setDismissedUntil(until);
+		props.onDismiss?.({ until });
+	}, [
+		dismissForDays,
+		dismissalKey,
+		props.onDismiss,
+		reset
+	]);
+	const open = useCallback(() => {
+		setIsOpen(true);
+		setStep("compose");
+		props.onOpen?.();
+		if (props.captureOnOpen !== false) refreshAutomatic();
+	}, [
+		props.captureOnOpen,
+		props.onOpen,
+		refreshAutomatic
+	]);
+	const selectElement = useCallback(async (element, note = "") => {
+		cancelPendingCapture();
+		setIsElementCapturing(true);
+		const picked = note ? {
+			...buildElementSelection(element),
+			comment: note.slice(0, MAX_SELECTION_COMMENT_LENGTH)
+		} : buildElementSelection(element);
+		setStep("compose");
+		const pick = ++pickRef.current;
+		const context = collectPageContext({ sdkVersion: SDK_VERSION });
+		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
+		if (pickRef.current !== pick) {
+			releaseCapture(fresh);
+			releaseCapture(closeUp);
+			return;
+		}
+		setIsElementCapturing(false);
+		if (!fresh) {
+			releaseCapture(closeUp);
+			setError(captureFailed);
+			return;
+		}
+		storeScreenshot({
+			annotations: [highlightFor(picked, fresh)],
+			closeUp,
+			context,
+			id: crypto.randomUUID(),
+			image: fresh,
+			selectedNode: element,
+			selection: picked,
+			source: "manual"
+		});
+	}, [
+		cancelPendingCapture,
+		captureFailed,
+		storeScreenshot
+	]);
+	const selections = gallery.screenshots.flatMap(({ selection }) => selection ? [selection] : []);
+	const firstElementNote = selections.find(({ comment }) => comment)?.comment;
+	const reportedMessage = message.trim() || firstElementNote || "";
+	const submit = () => {
+		if (honeypot) {
+			setStep("success");
+			return;
+		}
+		setStep("compose");
+		return submission.submit({
+			context: {
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.5.0" }),
+				consoleEvents: consoleRef.current?.events(),
+				metadata: props.metadata,
+				selections
+			},
+			email,
+			isAnonymous,
+			message: reportedMessage,
+			screenshots: gallery.screenshots
+		});
+	};
+	const requestSubmit = () => {
+		if (isAnonymous && email.length === 0 && !submission.hasPendingAttachments && !honeypot) {
+			setStep("email");
+			return;
+		}
+		return submit();
+	};
+	return {
+		activeScreenshot,
+		annotateScreenshot: (id, trigger) => {
+			setAnnotationTrigger(trigger);
+			gallery.selectScreenshot(id);
+			setStep("annotate");
+		},
+		annotations,
+		annotationTrigger,
+		canDismiss: dismissForDays !== null,
+		canSubmit: reportedMessage.length > 0,
+		capture,
+		close,
+		dismiss,
+		dismissForDays,
+		email,
+		error,
+		hasPendingAttachments: submission.hasPendingAttachments,
+		honeypot,
+		isAnonymous,
+		isCapturing,
+		isDismissed: dismissedUntil > Date.now(),
+		isEditingDisabled: submission.isEditingDisabled,
+		isOpen,
+		isSubmitting: submission.isSubmitting,
+		message,
+		open,
+		pendingCapture: gallery.pendingCapture,
+		removeCapture: gallery.removeCapture,
+		requestSubmit,
+		retakeCapture: gallery.retakeCapture,
+		screenshots: gallery.screenshots,
+		selectElement,
+		selections,
+		setAnnotations: gallery.setAnnotations,
+		setEmail,
+		setHoneypot,
+		setMessage,
+		setSelectionComment: gallery.setSelectionComment,
+		setStep,
+		step,
+		submit,
+		takeCapture: gallery.takeCapture
+	};
 }
-`;
 //#endregion
-//#region src/feedback/ui/shadow-portal.tsx
-const DARK_QUERY = "(prefers-color-scheme: dark)";
-const KEY_EVENTS = [
-	"keydown",
-	"keyup",
-	"keypress"
-];
-function useResolvedTheme(theme) {
-	const [systemDark, setSystemDark] = useState(false);
+//#region src/feedback/ui/floating/floating-widget.tsx
+function FloatingWidget({ hotkey, labels, position, state }) {
+	const [minimized, setMinimized] = useState(false);
+	const launcherRef = useRef(null);
+	const showPanel = state.isOpen && !minimized;
+	const floating = useFloatingPosition(position, showPanel);
+	const minimize = () => {
+		setMinimized(true);
+		requestAnimationFrame(() => launcherRef.current?.focus());
+	};
 	useEffect(() => {
-		if (theme !== "auto" || typeof window.matchMedia !== "function") return;
-		const query = window.matchMedia(DARK_QUERY);
-		setSystemDark(query.matches);
-		const onChange = (event) => setSystemDark(event.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, [theme]);
-	if (theme === "auto") return systemDark ? "dark" : "light";
-	return theme;
-}
-/**
-* Hosts the widget in a shadow root: the app's CSS cannot reach the panel and
-* the panel's CSS cannot reach the app. Direct DOM work is unavoidable here —
-* React has no declarative way to create a shadow root.
-*/
-function ShadowPortal({ children, offset, primaryColor, theme }) {
-	const [shadowRoot, setShadowRoot] = useState(null);
-	const resolvedTheme = useResolvedTheme(theme);
+		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
+	}, [state.step, state.annotationTrigger]);
 	useEffect(() => {
-		const host = document.createElement("div");
-		host.setAttribute(WIDGET_MARKER, "");
-		const root = host.attachShadow({ mode: "open" });
-		for (const type of KEY_EVENTS) root.addEventListener(type, (event) => event.stopPropagation());
-		const style = document.createElement("style");
-		style.textContent = WIDGET_STYLES;
-		root.append(style);
-		document.body.append(host);
-		setShadowRoot(root);
-		return () => host.remove();
-	}, []);
+		if (!showPanel || state.step !== "compose") return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) {
+				setMinimized(true);
+				requestAnimationFrame(() => launcherRef.current?.focus());
+			}
+		};
+		return listenToKeydown(floating.rootRef.current, onKeyDown);
+	}, [
+		floating.rootRef,
+		showPanel,
+		state.step
+	]);
+	const { close, isOpen, open } = state;
 	useEffect(() => {
-		const host = shadowRoot?.host;
-		if (!(host instanceof HTMLElement)) return;
-		host.setAttribute("data-theme", resolvedTheme);
-		host.style.setProperty("--rf-offset", `${offset}px`);
-		if (primaryColor) host.style.setProperty("--rf-primary", primaryColor);
+		if (!hotkey) return;
+		const toggleOnHotkey = (event) => {
+			if (matchesHotkey(event, hotkey)) {
+				event.preventDefault();
+				if (isOpen) close();
+				else open();
+			}
+		};
+		return listenToKeydown(floating.rootRef.current, toggleOnHotkey, true);
 	}, [
-		shadowRoot,
-		resolvedTheme,
-		primaryColor,
-		offset
+		close,
+		floating.rootRef,
+		hotkey,
+		isOpen,
+		open
 	]);
-	if (!shadowRoot) return null;
-	return createPortal(children, shadowRoot);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "root",
+		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
+		"data-moved": Boolean(floating.position),
+		"data-position": position,
+		ref: floating.rootRef,
+		children: [
+			/* @__PURE__ */ jsx("style", { children: floating.styles }),
+			showPanel && state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null),
+			showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
+				floatingControls: /* @__PURE__ */ jsxs("div", {
+					className: "floating-controls",
+					children: [/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.moveFeedback,
+						className: "icon-btn drag-handle",
+						title: labels.moveFeedback,
+						type: "button",
+						...floating.handleProps,
+						children: /* @__PURE__ */ jsx(GripIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": labels.minimize,
+						className: "icon-btn",
+						onClick: minimize,
+						title: labels.minimize,
+						type: "button",
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				labels,
+				state
+			}) : /* @__PURE__ */ jsx(Launcher, {
+				buttonRef: launcherRef,
+				isOpen: false,
+				label: state.isOpen ? labels.resume : labels.trigger,
+				onClick: () => {
+					setMinimized(false);
+					if (!state.isOpen) state.open();
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/feedback/ui/annotation/styles.ts
+const ANNOTATOR_STYLES = `
+.overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; display: flex; flex-direction: column; background: transparent; color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
+.overlay::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--rf-bg) 94%, transparent); animation: rf-editor-in 260ms var(--rf-ease); transition: opacity 260ms var(--rf-ease); }
+.overlay::backdrop { background: transparent; }
+@keyframes rf-editor-in { from { opacity: 0; } }
+.editor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; container-type: size; }
+.editor-image { width: min(100cqw, calc(100cqh * var(--rf-capture-ratio))); aspect-ratio: var(--rf-capture-ratio); flex: none; position: relative; }
+.editor-visual { position: absolute; inset: 0; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); transform-origin: top left; overflow: hidden; }
+.editor-visual img, .editor-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: top center; outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
+.editor-visual canvas { cursor: crosshair; touch-action: none; }
+.overlay[data-opening="true"] .editor { pointer-events: none; }
+.overlay[data-closing="true"] { pointer-events: none; }
+.overlay[data-closing="true"]::before { opacity: 0; }
+.overlay[data-closing="true"] .toolbar, .overlay[data-closing="true"] .element-note { opacity: 0; transform: translateY(8px); }
+
+.element-note { order: 1; display: flex; align-items: flex-start; gap: 10px; width: min(560px, calc(100vw - 32px)); margin: 0 auto 10px; padding: 10px 14px; border-radius: var(--rf-radius); transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); }
+.element-note svg { flex: none; margin-top: 4px; opacity: 0.7; }
+.element-note textarea { flex: 1; min-width: 0; height: 42px; max-height: 96px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; resize: none; }
+.element-note textarea:focus { outline: none; }
+.element-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
+
+.toolbar { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); padding: 4px 12px max(16px, env(safe-area-inset-bottom)); }
+.toolbar .group { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--rf-pill); }
+.tool[aria-pressed="true"], .tool[data-selected="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
+.color-picker { position: relative; }
+.color-picker summary { display: flex; justify-content: center; align-items: center; }
+.color-preview { width: 18px; height: 18px; border-radius: 50%; background: var(--annotation-color); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-popover { --rf-color-width: 200px; position: absolute; bottom: calc(100% + 14px); left: clamp(calc(12px - var(--rf-color-anchor)), 0px, calc(100vw - var(--rf-color-anchor) - var(--rf-color-width) - 12px)); display: flex; align-items: center; gap: 6px; width: var(--rf-color-width); padding: 4px 4px 4px 14px; border-radius: var(--rf-pill); animation: rf-in 180ms var(--rf-ease); }
+.color-picker[data-placement="below"] .color-popover { top: calc(100% + 14px); bottom: auto; }
+.color-slider { flex: 1; min-width: 0; }
+.color-slider-control { display: flex; align-items: center; height: 40px; width: 100%; touch-action: none; user-select: none; cursor: pointer; }
+.color-slider-track { height: 12px; width: 100%; border-radius: var(--rf-pill); background: linear-gradient(to right, var(--rf-swatch-base), var(--annotation-base-color)); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--rf-swatch-base); border-radius: 50%; background: var(--annotation-color); box-shadow: var(--rf-shadow-low); transition: scale 160ms var(--rf-ease); }
+.color-slider-thumb[data-dragging] { scale: 1.12; }
+.color-slider-thumb:has(:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.color-spectrum { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
+.color-spectrum::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--rf-spectrum); box-shadow: inset 0 0 0 1px var(--rf-glass-highlight); }
+.color-spectrum:hover { background: var(--rf-bg-hover); }
+.color-spectrum button { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+.color-spectrum button:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.color-spectrum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
+.done-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--rf-pill); color: var(--rf-primary-text); background: var(--rf-primary); }
+.drawing-menu { position: relative; }
+.drawing-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: 200px; max-height: calc(50dvh - 68px); overflow-y: auto; padding: 6px; border-radius: var(--rf-radius); }
+.drawing-menu[data-placement="below"] .drawing-popover { top: calc(100% + 12px); bottom: auto; }
+.drawing-option { display: flex; align-items: center; width: 100%; min-height: 40px; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; }
+.drawing-option:hover, .drawing-option[aria-pressed="true"] { background: var(--rf-bg-hover); }
+.drawing-divider { height: 1px; margin: 5px; background: var(--rf-border); }
+.editor canvas[data-tool="text"] { cursor: text; }
+.text-annotation-editor { position: fixed; z-index: 3; width: 240px; padding: 8px; border-radius: var(--rf-radius); }
+.text-annotation-editor:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
+.text-annotation-editor textarea { display: block; width: 100%; min-height: 64px; max-height: 112px; padding: 6px; border: 0; background: transparent; resize: vertical; font-size: 16px; line-height: 24px; }
+.text-annotation-editor textarea:focus { outline: none; }
+.text-annotation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+@media (pointer: coarse) {
+  .drawing-option { min-height: 44px; }
+  .done-btn { width: 44px; height: 44px; }
+  .color-popover { --rf-color-width: 232px; padding-left: 16px; }
+  .color-slider-control, .color-spectrum { height: 44px; }
+  .color-spectrum { width: 44px; }
+  .color-slider-thumb, .color-spectrum::before { width: 18px; height: 18px; }
+  .editor { padding: 8px; }
+  .toolbar { gap: 6px; }
+  .toolbar .group { padding: 3px; gap: 0; }
+}
+@media (pointer: coarse) and (max-width: 360px) {
+  .toolbar { gap: 4px; padding-inline: 2px; }
+  .toolbar .group { padding: 0; }
 }
+`;
 //#endregion
-//#region src/feedback/core/console-recorder.ts
-const DEFAULT_LIMIT = 30;
-const MAX_MESSAGE_LENGTH = 1e3;
-const RECORDED_METHODS = ["error", "warn"];
-function serializeArgument(value) {
-	if (typeof value === "string") return value;
-	if (value instanceof Error) return `${value.name}: ${value.message}`;
-	if (value === null || value === void 0) return String(value);
-	if (typeof value === "object") try {
-		return JSON.stringify(value) ?? "[unserializable]";
-	} catch {
-		return "[unserializable]";
-	}
-	if (typeof value === "function") return "[function]";
-	return String(value);
+//#region src/feedback/ui/composer/styles.ts
+const COMPOSER_STYLES = `
+.panel { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; outline: none; animation: rf-in 240ms var(--rf-ease); }
+.success-panel { border-radius: var(--rf-radius); }
+.composer { position: relative; display: flex; flex-direction: column; gap: 8px; }
+.message-row { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 26px; }
+.message-row textarea {
+  width: 100%; height: 76px; max-height: min(140px, 30dvh);
+  margin: 0; padding: 6px 6px 0 8px; border: 0; resize: none;
+  background: transparent; line-height: 20px;
 }
-function formatMessage(args) {
-	const message = args.map(serializeArgument).join(" ");
-	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
+.message-actions { display: flex; align-items: center; gap: 2px; }
+.message-row textarea::placeholder { color: var(--rf-text-muted); }
+.message-row textarea:focus { outline: none; }
+.message-row:has(textarea:focus-visible) { border-color: color-mix(in srgb, var(--rf-accent) 40%, var(--rf-glass-stroke)); }
+.submit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease); }
+.submit svg { transform: rotate(-45deg); }
+.submit:hover:enabled { transform: scale(1.05); }
+.submit:disabled { background: var(--rf-bg-hover); color: var(--rf-text-muted); opacity: .65; }
+.composer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.composer-options { position: relative; }
+summary { cursor: pointer; list-style: none; }
+summary::-webkit-details-marker { display: none; }
+.options-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 40px)); max-height: calc(50dvh - 68px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rf-radius); animation: rf-in 160ms var(--rf-ease); }
+.composer-options[data-placement="below"] .options-popover { top: calc(100% + 12px); bottom: auto; }
+.email-field { display: flex; flex-direction: column; gap: 6px; color: var(--rf-text-muted); font-size: 12px; }
+.email-field [role="alert"] { color: var(--rf-danger); }
+.email-field input { width: 100%; padding: 9px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-sm); background: var(--rf-bg-subtle); color: var(--rf-text); }
+.dismiss-btn { min-height: 40px; text-align: left; padding: 0 8px; border-radius: var(--rf-radius-sm); color: var(--rf-text-muted); }
+.dismiss-btn:hover { background: var(--rf-bg-hover); }
+.version-info { font-size: 10px; color: var(--rf-text-muted); padding: 4px 8px 0; border-top: 1px solid var(--rf-border); text-decoration: none; }
+.version-info:hover { color: var(--rf-text); }
+.email-scrim { display: none; }
+.email-prompt { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; animation: rf-in 240ms var(--rf-ease); }
+.email-prompt h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
+.email-prompt p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--rf-text-muted); }
+.email-prompt .email-field input { min-height: 40px; border-radius: 14px; padding: 0 12px; }
+.email-prompt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+.email-prompt-actions .ghost-btn { padding: 0 12px; color: var(--rf-text-muted); }
+.primary-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); font-weight: 500; }
+.primary-btn:hover { opacity: .9; }
+.attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.attachment-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
+.screenshot-scroll-area { position: relative; min-width: 0; margin: -14px -10px -20px; }
+.screenshot-strip { width: 100%; padding: 14px 10px 20px; overscroll-behavior-x: contain; --rf-fade-start: 0px; --rf-fade-end: 0px; mask-image: linear-gradient(to right, transparent, black var(--rf-fade-start), black calc(100% - var(--rf-fade-end)), transparent); mask-repeat: no-repeat; }
+.screenshot-strip[data-overflow-x-start] { --rf-fade-start: calc(10px + min(24px, var(--scroll-area-overflow-x-start))); }
+.screenshot-strip[data-overflow-x-end] { --rf-fade-end: calc(10px + min(24px, var(--scroll-area-overflow-x-end))); }
+.screenshot-strip-content { display: flex; align-items: flex-end; gap: 8px; }
+.screenshot-scroll-area:has(.screenshot-strip-content:empty) { display: none; }
+.capture-slot { display: flex; flex-direction: column; gap: 2px; flex: none; width: 56px; height: var(--rf-attachment-height); padding: 3px; border: 1px dashed var(--rf-border); border-radius: var(--rf-radius); box-shadow: none; }
+.capture-action { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; border-radius: 5px; color: var(--rf-text-muted); transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease); }
+.capture-action:first-child { border-radius: 16px 16px 5px 5px; }
+.capture-action:last-child { border-radius: 5px 5px 16px 16px; }
+.capture-action:hover:enabled { background: var(--rf-bg-hover); color: var(--rf-text); }
+.screenshot-scrollbar { height: 4px; margin: 0 8px 2px; opacity: 0; transition: opacity 150ms var(--rf-ease); }
+.screenshot-scrollbar[data-hovering], .screenshot-scrollbar[data-scrolling] { opacity: 1; }
+.screenshot-scroll-thumb { border-radius: var(--rf-pill); background: var(--rf-border); }
+.capture-progress { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: inherit; color: var(--rf-text-muted); font-size: 10px; }
+.attachments:empty { display: none; }
+.screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: var(--rf-attachment-height); padding: 0; border-radius: 16px; animation: rf-in 260ms var(--rf-ease); }
+.screenshot-attachment { border: 0; }
+.screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; border-radius: inherit; overflow: hidden; }
+.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
+.screenshot-preview canvas { position: absolute; inset: 0; pointer-events: none; }
+.annotation-count { position: absolute; left: 5px; bottom: 5px; min-width: 20px; padding: 2px 6px; border-radius: var(--rf-pill); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; color: var(--rf-text); }
+.attachment-actions { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); }
+.attachment-actions .icon-btn { width: 28px; height: 28px; }
+.attachment-actions svg { width: 14px; height: 14px; }
+.attachment-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--rf-text-muted); font-size: 11px; }
+.attachment-skeleton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rf-bg-subtle); animation: rf-fade 800ms alternate infinite; }
+.selection-badge { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--rf-pill); color: var(--rf-accent); }
+.selection-badge svg { width: 12px; height: 12px; }
+@media (pointer: coarse) {
+  .message-row { border-radius: 28px; }
+  .capture-slot { width: 64px; }
+  .message-row textarea { font-size: 16px; }
+  .submit { width: 44px; height: 44px; }
+  :host { --rf-attachment-height: 96px; }
+  .attachment-actions { right: 5px; bottom: 5px; }
+  .attachment-actions .icon-btn { width: 34px; height: 34px; }
+  .selection-badge { width: 24px; height: 24px; }
+  .email-field input { font-size: 16px; }
+  .dismiss-btn { min-height: 44px; }
 }
-/**
-* Buffers the console noise a user saw right before reporting a bug.
-* Wrappers delegate to the previous implementation, so nothing is swallowed.
-*/
-function startConsoleRecorder(options) {
-	const limit = options?.limit ?? DEFAULT_LIMIT;
-	const buffer = [];
-	let active = true;
-	const push = (level, message) => {
-		if (!(active && message)) return;
-		buffer.push({
-			level,
-			message,
-			timestamp: Date.now()
-		});
-		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
-	};
-	const originals = /* @__PURE__ */ new Map();
-	const wrappers = /* @__PURE__ */ new Map();
-	for (const method of RECORDED_METHODS) {
-		const original = console[method];
-		const wrapper = (...args) => {
-			push(method, formatMessage(args));
-			Reflect.apply(original, console, args);
-		};
-		originals.set(method, original);
-		wrappers.set(method, wrapper);
-		console[method] = wrapper;
-	}
-	const onError = (event) => {
-		const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
-		push("error", `${event.message}${where}`);
-	};
-	const onRejection = (event) => {
-		push("error", `Unhandled rejection: ${serializeArgument(event.reason)}`);
-	};
-	window.addEventListener("error", onError);
-	window.addEventListener("unhandledrejection", onRejection);
-	return {
-		events: () => buffer.slice(),
-		stop: () => {
-			if (!active) return;
-			active = false;
-			buffer.length = 0;
-			for (const method of RECORDED_METHODS) {
-				const original = originals.get(method);
-				if (original && console[method] === wrappers.get(method)) console[method] = original;
-			}
-			window.removeEventListener("error", onError);
-			window.removeEventListener("unhandledrejection", onRejection);
-		}
-	};
+@media (max-width: 480px) {
+  .email-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); animation: rf-fade 200ms var(--rf-ease); }
+  .email-prompt { position: fixed; left: 0; right: 0; bottom: 0; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: rf-drawer-in 280ms var(--rf-ease); }
+  .email-prompt h2 { font-size: 17px; }
+  .email-prompt p { font-size: 13px; }
+  .email-prompt-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
+  .email-prompt-actions .ghost-btn, .email-prompt-actions .primary-btn { justify-content: center; min-height: 48px; }
 }
+@keyframes rf-drawer-in { from { transform: translateY(100%); } }
+`;
 //#endregion
-//#region src/feedback/core/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 { closeUp, image, annotations, context } = screenshot;
-	const annotated = annotations.length > 0 ? await renderAnnotatedImage(image, annotations) : null;
-	if (annotations.length > 0 && !annotated) throw new Error("Could not render your annotations. Please try again.");
-	try {
-		const storageId = await uploadImage(transport, image);
-		const prepared = [{
-			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
-			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
-			captureSource: "widget",
-			filename: `screenshot-${index + 1}.png`,
-			height: image.height,
-			mimeType: image.mimeType,
-			pageUrl: context.url,
-			size: image.blob.size,
-			storageId,
-			width: image.width
-		}];
-		if (closeUp) prepared.push({
-			captureSource: "element",
-			filename: `element-${index + 1}.png`,
-			height: closeUp.height,
-			mimeType: closeUp.mimeType,
-			pageUrl: context.url,
-			size: closeUp.blob.size,
-			storageId: await uploadImage(transport, closeUp),
-			width: closeUp.width
-		});
-		return prepared;
-	} finally {
-		releaseCapture(annotated);
-	}
+//#region src/feedback/ui/floating/picker-styles.ts
+const PICKER_STYLES = `
+.picker-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--rf-accent) 10%, transparent);
+  box-shadow: 0 0 0 2px var(--rf-accent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 18%, transparent);
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
 }
-async function uploadScreenshots(transport, submission) {
-	return (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).flatMap((result) => {
-		if (result.status === "rejected") throw result.reason;
-		return result.value;
-	});
+.picker-box[data-pinned="true"] { transition: none; }
+.picker-label {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(420px, 90vw);
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--rf-accent-text);
+  background: var(--rf-accent);
+  border-radius: 6px;
+  box-shadow: var(--rf-shadow-float);
+  white-space: nowrap;
+  overflow: hidden;
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
 }
-//#endregion
-//#region src/feedback/core/submit.ts
-const MAX_TITLE_LENGTH = 100;
-const NEWLINE = /\r?\n/;
-function deriveTitle(message) {
-	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
-	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
-	const clipped = firstLine.slice(0, 99);
-	const lastSpace = clipped.lastIndexOf(" ");
-	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
+.picker-label strong { flex: none; font-weight: 600; }
+.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
+.selection-outline {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--rf-accent) 7%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-accent) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 14%, transparent);
+  transition: opacity 160ms var(--rf-ease);
 }
-function buildDescription(params) {
-	const { email, isAnonymous, message } = params;
-	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
-	return `${message.trim()}${contact}`;
+.picker-hint {
+  position: fixed;
+  left: 50%;
+  bottom: calc(24px + env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: calc(100vw - 24px);
+  padding: 5px 6px 5px 12px;
+  font-size: 12.5px;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border-radius: var(--rf-pill);
+  box-shadow: var(--rf-ring), var(--rf-shadow);
+  animation: rf-fade 240ms var(--rf-ease);
 }
-async function attachPreparedScreenshots(transport, result) {
-	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
-		...screenshot,
-		feedbackId: result.feedbackId
-	})));
-	const pendingScreenshots = result.pendingScreenshots.filter((_, index) => results[index]?.status === "rejected");
-	return {
-		feedbackId: result.feedbackId,
-		pendingScreenshots
-	};
+.picker-instruction { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.picker-hint kbd {
+  padding: 1px 5px;
+  font: inherit;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+  border-radius: 4px;
+  background: var(--rf-bg-subtle);
+  box-shadow: var(--rf-shadow-inset);
 }
-async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
-	const { feedbackId } = await transport.create({
-		context: submission.context,
-		description: buildDescription(submission),
-		title: deriveTitle(submission.message)
-	});
-	return attachPreparedScreenshots(transport, {
-		feedbackId,
-		pendingScreenshots
-	});
+.picker-cancel {
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 14px;
+  border-radius: var(--rf-pill);
+  font-size: 12.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--rf-text-muted);
 }
-async function submitWidgetFeedback(transport, submission) {
-	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
-	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
+.picker-cancel:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.picker-note {
+  position: fixed;
+  z-index: ${REFLET_Z_INDEX.annotatorOverlay};
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 300px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 6px 6px 8px;
+  border-radius: 18px;
+  animation: rf-in 180ms var(--rf-ease);
 }
-function isStorageResponse(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
+.picker-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
+.picker-note-target {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 2px 4px 0;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+  white-space: nowrap;
 }
-function createFeedbackTransport(client) {
-	return {
-		create: (params) => client.create(params),
-		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
-		saveScreenshot: (params) => client.saveScreenshot(params),
-		uploadImage: async (uploadUrl, image) => {
-			const response = await fetch(uploadUrl, {
-				body: image.blob,
-				headers: { "Content-Type": image.mimeType },
-				method: "POST"
-			});
-			if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
-			const payload = await response.json();
-			if (!isStorageResponse(payload)) throw new Error("Screenshot upload returned no storage id");
-			return payload.storageId;
-		}
-	};
+.picker-note-target strong { flex: none; font-weight: 600; color: var(--rf-accent); }
+.picker-note-target span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.picker-note textarea {
+  width: 100%;
+  min-height: 46px;
+  max-height: min(160px, 30dvh);
+  margin: 0;
+  padding: 7px 6px 0;
+  border: 0;
+  resize: none;
+  background: transparent;
+  color: var(--rf-text);
+  font-size: 13px;
+  line-height: 19px;
 }
-//#endregion
-//#region src/feedback/ui/state/use-feedback-submission.ts
-function useFeedbackSubmission(options) {
-	const [activeRequest, setActiveRequest] = useState(null);
-	const [pendingReport, setPendingReport] = useState(null);
-	const requestRef = useRef(null);
-	useEffect(() => () => {
-		requestRef.current = null;
-	}, []);
-	const resetSubmission = useCallback(() => {
-		requestRef.current = null;
-		setPendingReport(null);
-		setActiveRequest(null);
-	}, []);
-	const finishSubmission = (result) => {
-		if (result.pendingScreenshots.length > 0) {
-			setPendingReport(result);
-			options.onError(options.partialUploadMessage);
-			return;
-		}
-		setPendingReport(null);
-		options.onSubmitted(result.feedbackId);
-	};
-	const submit = async (draft) => {
-		if (requestRef.current) return;
-		if (!options.client) {
-			options.onError("Reflet is missing a publicKey. Pass one to RefletFeedback or RefletProvider.");
-			return;
-		}
-		const request = {};
-		requestRef.current = request;
-		setActiveRequest(request);
-		options.onError(null);
-		try {
-			const transport = createFeedbackTransport(options.client);
-			const result = pendingReport ? await attachPreparedScreenshots(transport, pendingReport) : await submitWidgetFeedback(transport, draft);
-			if (requestRef.current === request) finishSubmission(result);
-		} catch (error) {
-			if (requestRef.current === request) options.onError(error instanceof Error ? error.message : "Something went wrong. Please try again.");
-		} finally {
-			if (requestRef.current === request) {
-				requestRef.current = null;
-				setActiveRequest(null);
-			}
-		}
-	};
-	return {
-		hasPendingAttachments: pendingReport !== null,
-		isEditingDisabled: activeRequest !== null || pendingReport !== null,
-		isSubmitting: activeRequest !== null,
-		resetSubmission,
-		submit
-	};
+.picker-note textarea:focus { outline: none; }
+.picker-note textarea::placeholder { color: var(--rf-text-muted); }
+.picker-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+@media (pointer: coarse) {
+  .picker-hint { padding: 6px 8px 6px 14px; }
+  .picker-hint kbd { display: none; }
+  .picker-cancel { height: 44px; padding: 0 18px; font-size: 14px; }
+  .picker-note textarea { font-size: 16px; min-height: 56px; }
 }
+
+`;
 //#endregion
-//#region src/feedback/ui/state/use-screenshot-drafts.ts
-function releaseDraft(draft) {
-	releaseCapture(draft?.image);
-	releaseCapture(draft?.closeUp);
-}
-function useScreenshotDrafts(captureFailed, onError) {
-	const [screenshots, setScreenshots] = useState([]);
-	const [activeId, setActiveId] = useState(null);
-	const [pendingCapture, setPendingCapture] = useState(null);
-	const ownedDrafts = useRef(/* @__PURE__ */ new Map());
-	const captureRequest = useRef(null);
-	useEffect(() => {
-		const drafts = ownedDrafts.current;
-		return () => {
-			captureRequest.current = null;
-			for (const draft of drafts.values()) releaseDraft(draft);
-			drafts.clear();
-		};
-	}, []);
-	const storeScreenshot = useCallback((screenshot) => {
-		releaseDraft(ownedDrafts.current.get(screenshot.id));
-		ownedDrafts.current.set(screenshot.id, screenshot);
-		setScreenshots((previous) => {
-			return previous.some(({ id }) => id === screenshot.id) ? previous.map((item) => item.id === screenshot.id ? screenshot : item) : [...previous, screenshot];
-		});
-		setActiveId(screenshot.id);
-	}, []);
-	const cancelPendingCapture = useCallback(() => {
-		captureRequest.current = null;
-		setPendingCapture(null);
-	}, []);
-	const takeScreenshot = useCallback(async (request) => {
-		captureRequest.current = request;
-		setPendingCapture(request);
-		onError(null);
-		const context = collectPageContext({ sdkVersion: SDK_VERSION });
-		const image = await captureViewport().catch(() => null);
-		if (captureRequest.current !== request) {
-			releaseCapture(image);
-			return;
-		}
-		cancelPendingCapture();
-		if (!image) {
-			onError(captureFailed);
-			return;
-		}
-		storeScreenshot({
-			...request,
-			annotations: [],
-			context,
-			image
-		});
-	}, [
-		cancelPendingCapture,
-		captureFailed,
-		onError,
-		storeScreenshot
-	]);
-	const takeCapture = useCallback(() => {
-		if (!captureRequest.current) takeScreenshot({
-			id: crypto.randomUUID(),
-			source: "manual"
-		});
-	}, [takeScreenshot]);
-	const refreshAutomatic = useCallback(() => {
-		takeScreenshot({
-			id: ownedDrafts.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
-			source: "automatic"
-		});
-	}, [takeScreenshot]);
-	const retakeCapture = useCallback((id) => {
-		if (!captureRequest.current && ownedDrafts.current.has(id)) takeScreenshot({
-			id,
-			source: "manual"
-		});
-	}, [takeScreenshot]);
-	const removeCapture = useCallback((id) => {
-		if (captureRequest.current?.id === id) cancelPendingCapture();
-		releaseDraft(ownedDrafts.current.get(id));
-		ownedDrafts.current.delete(id);
-		setScreenshots((previous) => previous.filter((item) => item.id !== id));
-		setActiveId((current) => current === id ? null : current);
-	}, [cancelPendingCapture]);
-	const resetScreenshots = useCallback(() => {
-		cancelPendingCapture();
-		for (const draft of ownedDrafts.current.values()) releaseDraft(draft);
-		ownedDrafts.current.clear();
-		setScreenshots([]);
-		setActiveId(null);
-	}, [cancelPendingCapture]);
-	const setAnnotations = useCallback((annotations) => {
-		setScreenshots((previous) => previous.map((item) => item.id === activeId ? {
-			...item,
-			annotations
-		} : item));
-	}, [activeId]);
-	const setSelectionComment = useCallback((id, comment) => {
-		setScreenshots((previous) => previous.map((item) => item.id === id && item.selection ? {
-			...item,
-			selection: {
-				...item.selection,
-				comment
-			}
-		} : item));
-	}, []);
-	return {
-		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
-		cancelPendingCapture,
-		pendingCapture,
-		refreshAutomatic,
-		removeCapture,
-		resetScreenshots,
-		retakeCapture,
-		screenshots,
-		selectScreenshot: setActiveId,
-		setAnnotations,
-		setSelectionComment,
-		storeScreenshot,
-		takeCapture
-	};
+//#region src/feedback/ui/styles.ts
+const WIDGET_STYLES = `
+:host {
+  --rf-offset: 20px;
+  --rf-bg: #ffffff;
+  --rf-bg-subtle: rgb(55 53 47 / 4%);
+  --rf-bg-hover: rgb(55 53 47 / 7%);
+  --rf-border: rgb(55 53 47 / 9%);
+  --rf-hairline: rgb(15 15 15 / 10%);
+  --rf-text: #37352f;
+  --rf-text-muted: rgb(55 53 47 / 68%);
+  --rf-primary: #37352f;
+  --rf-primary-text: #ffffff;
+  --rf-accent: #2383e2;
+  --rf-accent-text: #ffffff;
+  --rf-danger: #d44c47;
+  --rf-success: #448361;
+  --rf-swatch-base: #ffffff;
+  --rf-spectrum: conic-gradient(#ff5757, #ffde59, #6bdb78, #4ac9fa, #8b5cf6, #ef73dc, #ff5757);
+  --rf-radius: 20px;
+  --rf-pill: 999px;
+  --rf-attachment-height: 78px;
+  --rf-width: 360px;
+  --rf-glass: rgb(255 255 255 / 72%);
+  --rf-glass-highlight: rgb(255 255 255 / 90%);
+  --rf-glass-stroke: rgb(255 255 255 / 70%);
+  --rf-radius-sm: 8px;
+  --rf-shadow-inset: inset 0 0 0 1px var(--rf-border);
+  --rf-ring: 0 0 0 1px rgb(15 15 15 / 4%);
+  --rf-shadow-low: 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
+  --rf-shadow: 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
+  --rf-shadow-float: 0 4px 12px -3px rgb(15 15 15 / 35%);
+  --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  color-scheme: light;
+  all: initial;
+  font-family: var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
 }
-//#endregion
-//#region src/feedback/ui/state/use-widget-config.ts
-function dismissalDuration(days) {
-	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
+
+:host([data-theme="dark"]) {
+  --rf-bg: #202020;
+  --rf-bg-subtle: rgb(255 255 255 / 5%);
+  --rf-bg-hover: rgb(255 255 255 / 9%);
+  --rf-border: rgb(255 255 255 / 9%);
+  --rf-hairline: rgb(255 255 255 / 12%);
+  --rf-text: #ebeae8;
+  --rf-text-muted: rgb(255 255 255 / 68%);
+  --rf-glass: rgb(32 32 32 / 78%);
+  --rf-glass-highlight: rgb(255 255 255 / 14%);
+  --rf-glass-stroke: rgb(255 255 255 / 12%);
+  --rf-primary: #f1efec;
+  --rf-primary-text: #1c1c1b;
+  --rf-accent: #529cca;
+  --rf-danger: #eb5757;
+  --rf-success: #4dab74;
+  --rf-ring: 0 0 0 1px rgb(255 255 255 / 7%);
+  --rf-shadow-low: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
+  --rf-shadow-float: 0 4px 14px -3px rgb(0 0 0 / 55%);
+  color-scheme: dark;
 }
-function useWidgetConfig(props) {
-	const context = useContext(RefletContext);
-	const publicKey = props.publicKey ?? context?.publicKey;
-	const baseUrl = props.baseUrl ?? context?.baseUrl;
-	const user = props.user ?? context?.user;
-	const userToken = props.userToken ?? context?.userToken;
-	return {
-		client: useMemo(() => publicKey ? new Reflet({
-			baseUrl,
-			publicKey,
-			user,
-			userToken
-		}) : null, [
-			baseUrl,
-			publicKey,
-			user,
-			userToken
-		]),
-		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
-		dismissForDays: dismissalDuration(props.dismissForDays),
-		isAnonymous: !(user || userToken)
-	};
+
+*, *::before, *::after { box-sizing: border-box; }
+
+
+.root {
+  position: fixed;
+  z-index: ${REFLET_Z_INDEX.widgetRoot};
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  font: 13px/1.45 var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
+  color: var(--rf-text);
 }
-//#endregion
-//#region src/feedback/ui/use-capture-sync.ts
-const RESIZE_DEBOUNCE = 400;
-/**
-* Calls `refresh` whenever the page the reporter is looking at changes shape:
-* SPA routes (which never fire popstate on push/replace — history methods must
-* be patched) and window resizes, debounced. Keeps the frozen screenshot and
-* page context describing what the reporter currently sees.
-*/
-function useCaptureSync(enabled, refresh) {
-	useEffect(() => {
-		if (!enabled) return;
-		const history = window.history;
-		const originalPush = history.pushState;
-		const originalReplace = history.replaceState;
-		const hadOwnPush = Object.hasOwn(history, "pushState");
-		const hadOwnReplace = Object.hasOwn(history, "replaceState");
-		history.pushState = function pushState(data, unused, url) {
-			const result = originalPush.call(history, data, unused, url);
-			refresh();
-			return result;
-		};
-		history.replaceState = function replaceState(data, unused, url) {
-			const result = originalReplace.call(history, data, unused, url);
-			refresh();
-			return result;
-		};
-		window.addEventListener("popstate", refresh);
-		let resizeTimer;
-		const onResize = () => {
-			window.clearTimeout(resizeTimer);
-			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
-		};
-		window.addEventListener("resize", onResize);
-		return () => {
-			if (hadOwnPush) history.pushState = originalPush;
-			else Reflect.deleteProperty(history, "pushState");
-			if (hadOwnReplace) history.replaceState = originalReplace;
-			else Reflect.deleteProperty(history, "replaceState");
-			window.removeEventListener("popstate", refresh);
-			window.clearTimeout(resizeTimer);
-			window.removeEventListener("resize", onResize);
-		};
-	}, [enabled, refresh]);
+.root:has(.panel) { width: min(var(--rf-width), calc(var(--rf-viewport-width, 100vw) - 24px)); }
+.root[data-position$="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position$="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position^="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + max(var(--rf-offset), env(safe-area-inset-bottom))); }
+.root[data-position^="top"] { top: calc(var(--rf-viewport-top, 0px) + max(var(--rf-offset), env(safe-area-inset-top))); align-items: flex-start; }
+.root[data-position="bottom-right"] .panel { transform-origin: bottom right; }
+.root[data-position="bottom-left"] .panel { transform-origin: bottom left; }
+.root[data-position^="top"] .panel { transform-origin: top center; }
+.root[data-editing="true"] { visibility: hidden; pointer-events: none; }
+button, select, input, textarea { font: inherit; color: inherit; }
+button { margin: 0; cursor: pointer; border: 0; background: none; transition: scale 120ms var(--rf-ease); }
+button:disabled { cursor: not-allowed; opacity: .4; }
+button:active:not(:disabled) { scale: .97; }
+svg { flex-shrink: 0; }
+:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.icon-btn, .tool {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); color: var(--rf-text-muted);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease), scale 120ms var(--rf-ease);
 }
-//#endregion
-//#region src/feedback/ui/use-widget-state.ts
-const SUCCESS_CLOSE_DELAY = 2400;
-const IS_APPLE = /Mac|iPhone|iPad/;
-const MILLISECONDS_PER_DAY = 864e5;
-function readDismissedUntil(key) {
-	if (typeof window === "undefined") return 0;
-	try {
-		const value = Number.parseInt(window.localStorage.getItem(key) ?? "", 10);
-		if (Number.isFinite(value) && value > Date.now()) return value;
-		window.localStorage.removeItem(key);
-	} catch {
-		return 0;
-	}
-	return 0;
+.icon-btn:hover, .tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.launcher {
+  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
+  border-radius: var(--rf-pill); color: var(--rf-text);
+  font-weight: 500;
+  transition: transform 200ms var(--rf-ease), box-shadow 200ms var(--rf-ease), scale 120ms var(--rf-ease);
 }
-function writeDismissedUntil(key, until) {
-	try {
-		window.localStorage.setItem(key, String(until));
-	} catch {}
+.launcher:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow); }
+.launcher-icon { display: flex; width: 15px; height: 15px; }
+.launcher-icon .on-close { display: none; }
+.floating-controls {
+  display: flex; align-items: center; flex: none;
+  margin-right: auto; padding-left: 3px;
+  animation: rf-in 220ms var(--rf-ease);
 }
-function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
-	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
-	const key = parts.at(-1);
-	if (!key || event.key.toLowerCase() !== key) return false;
-	const isApple = IS_APPLE.test(platform);
-	const wantsMod = parts.includes("mod");
-	const expected = {
-		alt: parts.includes("alt") || parts.includes("option"),
-		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
-		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
-		shift: parts.includes("shift")
-	};
-	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
+.drag-handle { touch-action: none; cursor: grab; }
+.drag-handle:active { cursor: grabbing; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ghost-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: var(--rf-radius-sm); }
+.ghost-btn:hover { background: var(--rf-bg-hover); }
+.error { margin: 0; padding: 10px 14px; border-radius: var(--rf-radius); font-size: 12px; color: var(--rf-danger); }
+.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; }
+.done svg { color: var(--rf-success); }
+.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
+.done p { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
+.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rf-spin 700ms linear infinite; }
+.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+@keyframes rf-spin { to { transform: rotate(360deg); } }
+@keyframes rf-in { from { opacity: 0; transform: translateY(5px) scale(.98); } }
+@keyframes rf-fade { from { opacity: 0; } }
+@media (pointer: coarse) {
+  .icon-btn, .tool { width: 44px; height: 44px; }
+  .launcher, .ghost-btn { min-height: 44px; }
+}
+.glass {
+  position: relative;
+  isolation: isolate;
+  border: 1px solid var(--rf-glass-stroke);
+  box-shadow: inset 0 1px 0 var(--rf-glass-highlight), var(--rf-shadow);
+}
+.glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--rf-bg);
+  pointer-events: none;
+}
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .glass::before {
+    background: var(--rf-glass);
+    -webkit-backdrop-filter: blur(20px) saturate(1.6);
+    backdrop-filter: blur(20px) saturate(1.6);
+  }
+}
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+.capture-halo { position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.captureHalo}; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
+.capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
+.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
+.capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
+${COMPOSER_STYLES}
+${ANNOTATOR_STYLES}
+${PICKER_STYLES}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+  button:active:not(:disabled) { scale: 1; }
+}
+`;
+//#endregion
+//#region src/feedback/ui/shadow-portal.tsx
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function useResolvedTheme(theme) {
+	const [systemDark, setSystemDark] = useState(false);
+	useEffect(() => {
+		if (theme !== "auto" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(DARK_QUERY);
+		setSystemDark(query.matches);
+		const onChange = (event) => setSystemDark(event.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, [theme]);
+	if (theme === "auto") return systemDark ? "dark" : "light";
+	return theme;
 }
-function useWidgetState(props) {
-	const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
-	const [isOpen, setIsOpen] = useState(false);
-	const [annotationTrigger, setAnnotationTrigger] = useState(null);
-	const [step, setStep] = useState("compose");
-	const [message, setMessage] = useState("");
-	const [email, setEmail] = useState("");
-	const [honeypot, setHoneypot] = useState("");
-	const [isElementCapturing, setIsElementCapturing] = useState(false);
-	const successTimer = useRef(null);
-	const [error, setError] = useState(null);
-	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
-	const pickRef = useRef(0);
-	useEffect(() => () => {
-		pickRef.current++;
-		if (successTimer.current) clearTimeout(successTimer.current);
-	}, []);
-	const consoleRef = useRef(null);
+/**
+* Hosts the widget in a shadow root: the app's CSS cannot reach the panel and
+* the panel's CSS cannot reach the app. Direct DOM work is unavoidable here —
+* React has no declarative way to create a shadow root.
+*/
+function ShadowPortal({ children, offset, primaryColor, theme }) {
+	const [shadowRoot, setShadowRoot] = useState(null);
+	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => {
-		setDismissedUntil(readDismissedUntil(dismissalKey));
-	}, [dismissalKey]);
+		const host = document.createElement("div");
+		host.setAttribute(WIDGET_MARKER, "");
+		const root = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = WIDGET_STYLES;
+		root.append(style);
+		document.body.append(host);
+		setShadowRoot(root);
+		return () => host.remove();
+	}, []);
 	useEffect(() => {
-		if (props.captureConsole === false) return;
-		const recorder = startConsoleRecorder();
-		consoleRef.current = recorder;
-		return () => {
-			consoleRef.current = null;
-			recorder.stop();
-		};
-	}, [props.captureConsole]);
-	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
-	const gallery = useScreenshotDrafts(captureFailed, setError);
-	const { activeScreenshot, cancelPendingCapture, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
-	const capture = activeScreenshot?.image ?? null;
-	const annotations = activeScreenshot?.annotations ?? [];
-	const isCapturing = gallery.pendingCapture !== null || isElementCapturing;
-	const submission = useFeedbackSubmission({
-		client,
-		onError: setError,
-		onSubmitted: (feedbackId) => {
-			setStep("success");
-			props.onSubmit?.({ feedbackId });
-			successTimer.current = setTimeout(close, SUCCESS_CLOSE_DELAY);
-		},
-		partialUploadMessage: props.labels?.attachmentUploadFailed ?? DEFAULT_WIDGET_LABELS.attachmentUploadFailed
-	});
-	const { resetSubmission } = submission;
-	const firstCapture = gallery.pendingCapture ?? gallery.screenshots[0];
-	const canRefreshAutomatically = gallery.screenshots.length <= 1 && firstCapture?.source === "automatic";
-	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && canRefreshAutomatically && annotations.length === 0 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
-	const reset = useCallback(() => {
-		if (successTimer.current) clearTimeout(successTimer.current);
-		setAnnotationTrigger(null);
-		resetSubmission();
-		pickRef.current++;
-		setIsElementCapturing(false);
-		resetScreenshots();
-		setMessage("");
-		setEmail("");
-		setHoneypot("");
-		setError(null);
-		setStep("compose");
-	}, [resetSubmission, resetScreenshots]);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		reset();
-		props.onClose?.();
-	}, [reset, props.onClose]);
-	const dismiss = useCallback(() => {
-		if (dismissForDays === null) return;
-		const until = Date.now() + dismissForDays * MILLISECONDS_PER_DAY;
-		writeDismissedUntil(dismissalKey, until);
-		setIsOpen(false);
-		reset();
-		setDismissedUntil(until);
-		props.onDismiss?.({ until });
-	}, [
-		dismissForDays,
-		dismissalKey,
-		props.onDismiss,
-		reset
-	]);
-	const open = useCallback(() => {
-		setIsOpen(true);
-		setStep("compose");
-		props.onOpen?.();
-		if (props.captureOnOpen !== false) refreshAutomatic();
-	}, [
-		props.captureOnOpen,
-		props.onOpen,
-		refreshAutomatic
-	]);
-	const selectElement = useCallback(async (element, note = "") => {
-		cancelPendingCapture();
-		setIsElementCapturing(true);
-		const picked = note ? {
-			...buildElementSelection(element),
-			comment: note.slice(0, MAX_SELECTION_COMMENT_LENGTH)
-		} : buildElementSelection(element);
-		setStep("compose");
-		const pick = ++pickRef.current;
-		const context = collectPageContext({ sdkVersion: SDK_VERSION });
-		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
-		if (pickRef.current !== pick) {
-			releaseCapture(fresh);
-			releaseCapture(closeUp);
-			return;
-		}
-		setIsElementCapturing(false);
-		if (!fresh) {
-			releaseCapture(closeUp);
-			setError(captureFailed);
-			return;
-		}
-		storeScreenshot({
-			annotations: [highlightFor(picked, fresh)],
-			closeUp,
-			context,
-			id: crypto.randomUUID(),
-			image: fresh,
-			selectedNode: element,
-			selection: picked,
-			source: "manual"
-		});
+		const host = shadowRoot?.host;
+		if (!(host instanceof HTMLElement)) return;
+		host.setAttribute("data-theme", resolvedTheme);
+		host.style.setProperty("--rf-offset", `${offset}px`);
+		if (primaryColor) host.style.setProperty("--rf-primary", primaryColor);
 	}, [
-		cancelPendingCapture,
-		captureFailed,
-		storeScreenshot
+		shadowRoot,
+		resolvedTheme,
+		primaryColor,
+		offset
 	]);
-	const selections = gallery.screenshots.flatMap(({ selection }) => selection ? [selection] : []);
-	const firstElementNote = selections.find(({ comment }) => comment)?.comment;
-	const reportedMessage = message.trim() || firstElementNote || "";
-	const submit = () => {
-		if (honeypot) {
-			setStep("success");
-			return;
-		}
-		setStep("compose");
-		return submission.submit({
-			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.2" }),
-				consoleEvents: consoleRef.current?.events(),
-				metadata: props.metadata,
-				selections
-			},
-			email,
-			isAnonymous,
-			message: reportedMessage,
-			screenshots: gallery.screenshots
-		});
-	};
-	const requestSubmit = () => {
-		if (isAnonymous && email.length === 0 && !submission.hasPendingAttachments && !honeypot) {
-			setStep("email");
-			return;
-		}
-		return submit();
-	};
-	return {
-		activeScreenshot,
-		annotateScreenshot: (id, trigger) => {
-			setAnnotationTrigger(trigger);
-			gallery.selectScreenshot(id);
-			setStep("annotate");
-		},
-		annotations,
-		annotationTrigger,
-		canDismiss: dismissForDays !== null,
-		canSubmit: reportedMessage.length > 0,
-		capture,
-		close,
-		dismiss,
-		dismissForDays,
-		email,
-		error,
-		hasPendingAttachments: submission.hasPendingAttachments,
-		honeypot,
-		isAnonymous,
-		isCapturing,
-		isDismissed: dismissedUntil > Date.now(),
-		isEditingDisabled: submission.isEditingDisabled,
-		isOpen,
-		isSubmitting: submission.isSubmitting,
-		message,
-		open,
-		pendingCapture: gallery.pendingCapture,
-		removeCapture: gallery.removeCapture,
-		requestSubmit,
-		retakeCapture: gallery.retakeCapture,
-		screenshots: gallery.screenshots,
-		selectElement,
-		selections,
-		setAnnotations: gallery.setAnnotations,
-		setEmail,
-		setHoneypot,
-		setMessage,
-		setSelectionComment: gallery.setSelectionComment,
-		setStep,
-		step,
-		submit,
-		takeCapture: gallery.takeCapture
-	};
+	if (!shadowRoot) return null;
+	return createPortal(children, shadowRoot);
 }
 //#endregion
 //#region src/feedback/widget.tsx
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-BYGuFmhg.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
 function RefletFeedback(props) {
-	const { enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
+	const { devtools = true, enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
 	const labels = {
 		...DEFAULT_WIDGET_LABELS,
 		...props.labels
 	};
 	const state = useWidgetState(props);
-	const { close, isOpen, open } = state;
-	useEffect(() => {
-		if (!(hotkey && enabled)) return;
-		const onKeyDown = (event) => {
-			if (matchesHotkey(event, hotkey)) {
-				event.preventDefault();
-				if (isOpen) close();
-				else open();
-			}
-		};
-		document.addEventListener("keydown", onKeyDown, true);
-		return () => document.removeEventListener("keydown", onKeyDown, true);
-	}, [
-		close,
-		enabled,
-		hotkey,
-		isOpen,
-		open
-	]);
-	if (!enabled || state.isDismissed) return null;
+	const { isOpen } = state;
+	const showsWidget = enabled && !state.isDismissed;
+	const showsDevtools = useOwnsDevtools(devtools && DevtoolsLayer !== null, showsWidget) && DevtoolsLayer !== null;
+	if (!(showsWidget || showsDevtools)) return null;
 	return /* @__PURE__ */ jsxs(ShadowPortal, {
 		offset,
 		primaryColor: props.primaryColor,
 		theme,
-		children: [
+		children: [showsWidget && /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
 				className: "capture-halo",
 				"data-active": state.isCapturing
 			}),
 			/* @__PURE__ */ jsx(FloatingWidget, {
+				hotkey,
 				labels,
 				position,
 				state
@@ -4246,7 +2463,13 @@ function RefletFeedback(props) {
 				onCancel: () => state.setStep("compose"),
 				onPick: state.selectElement
 			})
-		]
+		] }), showsDevtools && /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(DevtoolsLayer, {
+				isWidgetOpen: showsWidget && isOpen,
+				position
+			})
+		})]
 	});
 }
 //#endregion