reflet-sdk 0.4.3 → 0.5.0

package/dist/feedback.js

@@ -1,932 +1,12 @@
 "use client";
-import { t as Reflet } from "./client-BYuSKJw5.js";
-import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-_Q9PWbfY.js";
-import { useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { 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.3";
-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 ?? "");
@@ -1169,54 +137,6 @@ function useTextAnnotation(options) {
 	};
 }
 //#endregion
-//#region src/feedback/ui/widget-keys.ts
-const KEY_EVENTS = [
-	"keydown",
-	"keyup",
-	"keypress"
-];
-function isWidgetNode(node) {
-	if (node instanceof ShadowRoot) return node.host.hasAttribute(WIDGET_MARKER);
-	return node instanceof Element && node.hasAttribute("data-reflet-widget");
-}
-function startsInWidget(event) {
-	return event.composedPath().some(isWidgetNode);
-}
-function relayInsideWidget(event) {
-	const target = event.composedPath()[0];
-	if (!(event instanceof KeyboardEvent && target && startsInWidget(event))) return;
-	event.stopImmediatePropagation();
-	const relay = new KeyboardEvent(event.type, {
-		altKey: event.altKey,
-		bubbles: true,
-		cancelable: true,
-		charCode: event.charCode,
-		code: event.code,
-		ctrlKey: event.ctrlKey,
-		isComposing: event.isComposing,
-		key: event.key,
-		keyCode: event.keyCode,
-		location: event.location,
-		metaKey: event.metaKey,
-		repeat: event.repeat,
-		shiftKey: event.shiftKey
-	});
-	target.dispatchEvent(relay);
-	if (relay.defaultPrevented) event.preventDefault();
-}
-if (typeof window !== "undefined") for (const type of KEY_EVENTS) window.addEventListener(type, relayInsideWidget, true);
-function listenToKeydown(anchor, onKeyDown, capture = false) {
-	const widgetRoot = anchor?.getRootNode();
-	const targets = widgetRoot instanceof ShadowRoot ? [document, widgetRoot] : [document];
-	const listener = (event) => {
-		if (event instanceof KeyboardEvent) onKeyDown(event);
-	};
-	for (const target of targets) target.addEventListener("keydown", listener, capture);
-	return () => {
-		for (const target of targets) target.removeEventListener("keydown", listener, capture);
-	};
-}
-//#endregion
 //#region src/feedback/ui/floating/use-details-popover.ts
 function useDetailsPopover() {
 	const [open, setOpen] = useState(false);
@@ -1492,179 +412,6 @@ 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);
@@ -1918,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", {
@@ -2458,52 +1241,6 @@ function FeedbackPanel({ floatingControls, labels, state }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/selection-outline.tsx
-/**
-* Keeps the picked element ringed while the reporter writes about it, so the
-* composer parked next to it is visibly about that element.
-*/
-function SelectionOutline({ node }) {
-	const boxRef = useRef(null);
-	useEffect(() => {
-		const box = boxRef.current;
-		if (!(box && node)) return;
-		let frame = 0;
-		const draw = () => {
-			frame = 0;
-			const rect = node.getBoundingClientRect();
-			const hidden = rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > window.innerHeight;
-			box.style.opacity = hidden ? "0" : "1";
-			box.style.width = `${rect.width}px`;
-			box.style.height = `${rect.height}px`;
-			box.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
-		};
-		const schedule = () => {
-			frame ||= requestAnimationFrame(draw);
-		};
-		draw();
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(draw);
-		observer?.observe(node);
-		window.addEventListener("scroll", schedule, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", schedule);
-		return () => {
-			cancelAnimationFrame(frame);
-			observer?.disconnect();
-			window.removeEventListener("scroll", schedule, true);
-			window.removeEventListener("resize", schedule);
-		};
-	}, [node]);
-	if (!node) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: "selection-outline",
-		ref: boxRef
-	});
-}
-//#endregion
 //#region src/feedback/core/console-recorder.ts
 const DEFAULT_LIMIT = 30;
 const MAX_MESSAGE_LENGTH = 1e3;
@@ -2578,114 +1315,6 @@ function startConsoleRecorder(options) {
 	};
 }
 //#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);
-	}
-}
-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;
-	});
-}
-//#endregion
-//#region src/feedback/core/submit.ts
-const MAX_TITLE_LENGTH = 100;
-const NEWLINE = /\r?\n/;
-function deriveTitle(message) {
-	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
-	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
-	const clipped = firstLine.slice(0, 99);
-	const lastSpace = clipped.lastIndexOf(" ");
-	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
-}
-function buildDescription(params) {
-	const { email, isAnonymous, message } = params;
-	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
-	return `${message.trim()}${contact}`;
-}
-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
-	};
-}
-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
-	});
-}
-async function submitWidgetFeedback(transport, submission) {
-	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
-	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
-}
-function isStorageResponse(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
-}
-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;
-		}
-	};
-}
-//#endregion
 //#region src/feedback/ui/state/use-feedback-submission.ts
 function useFeedbackSubmission(options) {
 	const [activeRequest, setActiveRequest] = useState(null);
@@ -3109,7 +1738,7 @@ function useWidgetState(props) {
 		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.3" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.5.0" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selections
@@ -3173,155 +1802,6 @@ function useWidgetState(props) {
 	};
 }
 //#endregion
-//#region src/feedback/ui/visible-viewport.ts
-/**
-* The part of the page the reporter can actually see, in fixed-position
-* coordinates. On mobile the keyboard shrinks this without touching
-* `window.innerHeight`, so anything that must stay reachable measures here.
-*/
-function visibleViewport() {
-	const viewport = window.visualViewport;
-	const left = viewport?.offsetLeft ?? 0;
-	const top = viewport?.offsetTop ?? 0;
-	const width = viewport?.width ?? window.innerWidth;
-	const height = viewport?.height ?? window.innerHeight;
-	return {
-		bottom: window.innerHeight - top - height,
-		height,
-		left,
-		right: window.innerWidth - left - width,
-		top,
-		width
-	};
-}
-function onViewportChange(update) {
-	window.addEventListener("resize", update);
-	window.visualViewport?.addEventListener("resize", update);
-	window.visualViewport?.addEventListener("scroll", update);
-	return () => {
-		window.removeEventListener("resize", update);
-		window.visualViewport?.removeEventListener("resize", update);
-		window.visualViewport?.removeEventListener("scroll", update);
-	};
-}
-//#endregion
-//#region src/feedback/ui/floating/use-floating-position.ts
-const EDGE_GAP$1 = 12;
-const KEYBOARD_STEP = 24;
-const KEY_DIRECTIONS = {
-	ArrowDown: {
-		x: 0,
-		y: KEYBOARD_STEP
-	},
-	ArrowLeft: {
-		x: -24,
-		y: 0
-	},
-	ArrowRight: {
-		x: KEYBOARD_STEP,
-		y: 0
-	},
-	ArrowUp: {
-		x: 0,
-		y: -24
-	}
-};
-function clampPosition(point, bounds, viewport = visibleViewport()) {
-	return {
-		x: Math.max(viewport.left + EDGE_GAP$1, Math.min(point.x, viewport.left + viewport.width - bounds.width - EDGE_GAP$1)),
-		y: Math.max(viewport.top + EDGE_GAP$1, Math.min(point.y, viewport.top + viewport.height - bounds.height - EDGE_GAP$1))
-	};
-}
-function useFloatingPosition(corner = "bottom-right", isPanelOpen = false) {
-	const rootRef = useRef(null);
-	const gesture = useRef(null);
-	const [position, setPosition] = useState(null);
-	const [positionedPanelOpen, setPositionedPanelOpen] = useState(isPanelOpen);
-	const [viewport, setViewport] = useState(visibleViewport);
-	const horizontalEdge = corner.endsWith("right") ? "right" : "left";
-	const verticalEdge = corner.startsWith("bottom") ? "bottom" : "top";
-	if (positionedPanelOpen !== isPanelOpen) {
-		setPositionedPanelOpen(isPanelOpen);
-		setPosition(null);
-	}
-	const moveTo = useCallback((point, bounds) => {
-		const fitted = clampPosition(point, bounds);
-		const visible = visibleViewport();
-		const anchor = {
-			x: horizontalEdge === "right" ? visible.left + visible.width - fitted.x - bounds.width : fitted.x - visible.left,
-			y: verticalEdge === "bottom" ? visible.top + visible.height - fitted.y - bounds.height : fitted.y - visible.top
-		};
-		setPosition((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
-	}, [horizontalEdge, verticalEdge]);
-	const keepInViewport = useCallback(() => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds) return;
-		const fitted = clampPosition(bounds, bounds, viewport);
-		if (Math.abs(fitted.x - bounds.x) > .5 || Math.abs(fitted.y - bounds.y) > .5) moveTo(fitted, bounds);
-	}, [moveTo, viewport]);
-	useLayoutEffect(() => {
-		keepInViewport();
-	}, [keepInViewport]);
-	useEffect(() => {
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
-		if (rootRef.current) observer?.observe(rootRef.current);
-		const stopListening = onViewportChange(() => setViewport(visibleViewport()));
-		return () => {
-			observer?.disconnect();
-			stopListening();
-		};
-	}, [keepInViewport]);
-	const onPointerDown = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds || event.button !== 0) return;
-		event.currentTarget.setPointerCapture(event.pointerId);
-		gesture.current = {
-			x: event.clientX - bounds.x,
-			y: event.clientY - bounds.y
-		};
-	};
-	const onPointerMove = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		const grab = gesture.current;
-		if (!(bounds && grab && event.currentTarget.hasPointerCapture(event.pointerId))) return;
-		moveTo({
-			x: event.clientX - grab.x,
-			y: event.clientY - grab.y
-		}, bounds);
-	};
-	const onKeyDown = (event) => {
-		const direction = KEY_DIRECTIONS[event.key];
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!(bounds && direction)) return;
-		event.preventDefault();
-		moveTo({
-			x: bounds.x + direction.x,
-			y: bounds.y + direction.y
-		}, bounds);
-	};
-	const viewportStyles = `.root { --rf-viewport-width: ${viewport.width}px; --rf-viewport-top: ${viewport.top}px; --rf-viewport-bottom: ${viewport.bottom}px; --rf-viewport-left: ${viewport.left}px; --rf-viewport-right: ${viewport.right}px; }`;
-	const anchorStyles = position ? `.root[data-moved="true"] { left: auto; right: auto; top: auto; bottom: auto; ${horizontalEdge}: ${position.x + viewport[horizontalEdge]}px; ${verticalEdge}: ${position.y + viewport[verticalEdge]}px; }` : "";
-	return {
-		handleProps: {
-			onKeyDown,
-			onLostPointerCapture: () => {
-				gesture.current = null;
-			},
-			onPointerCancel: () => {
-				gesture.current = null;
-			},
-			onPointerDown,
-			onPointerMove,
-			onPointerUp: () => {
-				gesture.current = null;
-			}
-		},
-		position,
-		rootRef,
-		styles: viewportStyles + anchorStyles
-	};
-}
-//#endregion
 //#region src/feedback/ui/floating/floating-widget.tsx
 function FloatingWidget({ hotkey, labels, position, state }) {
 	const [minimized, setMinimized] = useState(false);
@@ -3410,309 +1890,6 @@ function FloatingWidget({ hotkey, labels, position, state }) {
 	});
 }
 //#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;
-function elementUnder(x, y) {
-	const element = document.elementFromPoint(x, y);
-	if (!element || isWidgetOwned(element)) return null;
-	return element;
-}
-function describeTarget(element) {
-	return {
-		componentName: resolveComponentStack(getFiberFromNode(element))[0],
-		element,
-		label: describeElement(element),
-		rect: element.getBoundingClientRect(),
-		region: describeRegion(element)
-	};
-}
-/**
-* Pins the note card to the element: below it, flipped above when the visible
-* viewport — what is left of the screen once a mobile keyboard is up — has no
-* room there. Measures against the part of the element actually on screen, so
-* picking a full-height section still leaves the card in view.
-*/
-function noteStyle(rect, view) {
-	const left = Math.min(Math.max(view.left + EDGE_GAP, rect.left), Math.max(view.left + EDGE_GAP, view.left + view.width - NOTE_WIDTH - EDGE_GAP));
-	const visibleTop = Math.max(rect.top, view.top + EDGE_GAP);
-	const visibleBottom = Math.min(rect.bottom, view.top + view.height - EDGE_GAP);
-	if (view.top + view.height - visibleBottom > visibleTop - view.top) return {
-		left,
-		top: visibleBottom + NOTE_GAP
-	};
-	return {
-		bottom: window.innerHeight - visibleTop + NOTE_GAP,
-		left
-	};
-}
-/**
-* Points at any element in the page the way a coding agent needs it: the React
-* component that owns it plus the page region it lives in. Picking never
-* commits on its own — it pins a note card to the element, so the reporter
-* writes about that element right there and confirms. Aiming stays live until
-* then, which is what makes the flow usable without hover, on touch.
-*/
-function ElementPicker({ labels, onCancel, onPick }) {
-	const [target, setTarget] = useState(null);
-	const [pinned, setPinned] = useState(null);
-	const [note, setNote] = useState("");
-	const pickerRef = useRef(null);
-	const noteRef = useRef(null);
-	const pinnedRef = useRef(false);
-	const [view, setView] = useState(visibleViewport);
-	const aimRef = useRef(null);
-	useEffect(() => onViewportChange(() => setView(visibleViewport())), []);
-	useEffect(() => {
-		pinnedRef.current = pinned !== null;
-		if (pinned) noteRef.current?.focus({ preventScroll: true });
-	}, [pinned]);
-	useEffect(() => {
-		aimRef.current = target?.element ?? null;
-	}, [target]);
-	useEffect(() => {
-		const swallow = (event) => {
-			if (startsInWidget(event)) return;
-			event.preventDefault();
-			event.stopPropagation();
-		};
-		const aimAt = (x, y) => {
-			const element = elementUnder(x, y);
-			if (!element) return;
-			setTarget((current) => current?.element === element ? {
-				...current,
-				rect: element.getBoundingClientRect()
-			} : describeTarget(element));
-		};
-		const onMove = (event) => {
-			if (pinnedRef.current || startsInWidget(event)) return;
-			aimAt(event.clientX, event.clientY);
-		};
-		const onPointerDown = (event) => {
-			if (startsInWidget(event)) return;
-			swallow(event);
-			if (!pinnedRef.current) aimAt(event.clientX, event.clientY);
-		};
-		const onPointerUp = (event) => {
-			if (startsInWidget(event)) return;
-			swallow(event);
-			if (pinnedRef.current) return;
-			const element = elementUnder(event.clientX, event.clientY);
-			if (element) setPinned(describeTarget(element));
-		};
-		const moveAim = (key, backwards) => {
-			const next = stepAim(aimRef.current, key, backwards);
-			if (!next) return;
-			next.scrollIntoView({
-				block: "nearest",
-				inline: "nearest"
-			});
-			aimRef.current = next;
-			setTarget(describeTarget(next));
-		};
-		const onEscape = () => {
-			if (pinnedRef.current) {
-				setPinned(null);
-				setNote("");
-				return;
-			}
-			onCancel();
-		};
-		const onKeyDown = (event) => {
-			if (event.key === "Escape") {
-				swallow(event);
-				onEscape();
-				return;
-			}
-			if (pinnedRef.current || startsInWidget(event)) return;
-			if (event.key === "Enter") {
-				swallow(event);
-				if (aimRef.current) setPinned(describeTarget(aimRef.current));
-				return;
-			}
-			if (!AIM_KEYS.includes(event.key)) return;
-			swallow(event);
-			moveAim(event.key, event.shiftKey);
-		};
-		const onScroll = () => {
-			setTarget((current) => current ? {
-				...current,
-				rect: current.element.getBoundingClientRect()
-			} : current);
-			setPinned((current) => current ? {
-				...current,
-				rect: current.element.getBoundingClientRect()
-			} : current);
-		};
-		document.addEventListener("pointermove", onMove, true);
-		document.addEventListener("pointerdown", onPointerDown, true);
-		document.addEventListener("pointerup", onPointerUp, true);
-		document.addEventListener("mousedown", swallow, true);
-		document.addEventListener("mouseup", swallow, true);
-		document.addEventListener("click", swallow, true);
-		const stopListeningToKeys = listenToKeydown(pickerRef.current, onKeyDown, true);
-		window.addEventListener("scroll", onScroll, {
-			capture: true,
-			passive: true
-		});
-		const previousCursor = document.body.style.cursor;
-		document.body.style.cursor = "crosshair";
-		return () => {
-			document.removeEventListener("pointermove", onMove, true);
-			document.removeEventListener("pointerdown", onPointerDown, true);
-			document.removeEventListener("pointerup", onPointerUp, true);
-			document.removeEventListener("mousedown", swallow, true);
-			document.removeEventListener("mouseup", swallow, true);
-			document.removeEventListener("click", swallow, true);
-			stopListeningToKeys();
-			window.removeEventListener("scroll", onScroll, true);
-			document.body.style.cursor = previousCursor;
-		};
-	}, [onCancel]);
-	const rect = (pinned ?? target)?.rect;
-	const labelAbove = rect ? rect.top > 30 : true;
-	return /* @__PURE__ */ jsxs("div", {
-		ref: pickerRef,
-		children: [
-			rect && /* @__PURE__ */ jsx("div", {
-				className: "picker-box",
-				"data-pinned": pinned !== null,
-				style: {
-					height: rect.height,
-					translate: `${rect.left}px ${rect.top}px`,
-					width: rect.width
-				}
-			}),
-			rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
-				className: "picker-label",
-				style: { translate: `${Math.max(4, rect.left)}px ${labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP}px` },
-				children: [/* @__PURE__ */ jsx("strong", { children: target.componentName ? `<${target.componentName}>` : target.label }), target.region && /* @__PURE__ */ jsx("span", { children: target.region })]
-			}),
-			pinned ? /* @__PURE__ */ jsxs("form", {
-				className: "picker-note glass",
-				onSubmit: (event) => {
-					event.preventDefault();
-					onPick(pinned.element, note.trim());
-				},
-				style: noteStyle(pinned.rect, view),
-				children: [
-					/* @__PURE__ */ jsxs("p", {
-						className: "picker-note-target",
-						children: [/* @__PURE__ */ jsx("strong", { children: pinned.componentName ? `<${pinned.componentName}>` : pinned.label }), pinned.region && /* @__PURE__ */ jsx("span", { children: pinned.region })]
-					}),
-					/* @__PURE__ */ jsx("textarea", {
-						"aria-label": labels.elementNote,
-						maxLength: MAX_SELECTION_COMMENT_LENGTH,
-						onChange: (event) => setNote(event.target.value),
-						onKeyDown: (event) => {
-							if (event.key === "Enter" && !event.shiftKey) {
-								event.preventDefault();
-								onPick(pinned.element, note.trim());
-							}
-						},
-						placeholder: labels.elementNotePlaceholder,
-						ref: noteRef,
-						rows: 2,
-						value: note
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "picker-note-actions",
-						children: [/* @__PURE__ */ jsx("button", {
-							className: "picker-cancel",
-							onClick: () => {
-								setPinned(null);
-								setNote("");
-							},
-							type: "button",
-							children: labels.pickAnother
-						}), /* @__PURE__ */ jsx("button", {
-							"aria-label": labels.attachElement,
-							className: "submit",
-							title: labels.attachElement,
-							type: "submit",
-							children: /* @__PURE__ */ jsx(ArrowIcon, {})
-						})]
-					})
-				]
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "picker-hint",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "picker-instruction",
-					children: [
-						labels.pickElementHint,
-						" ",
-						/* @__PURE__ */ jsx("kbd", { children: "Tab" }),
-						/* @__PURE__ */ jsx("kbd", { children: "Enter" }),
-						/* @__PURE__ */ jsx("kbd", { children: "Esc" })
-					]
-				}), /* @__PURE__ */ jsx("button", {
-					className: "picker-cancel",
-					onClick: onCancel,
-					type: "button",
-					children: labels.cancel
-				})]
-			})
-		]
-	});
-}
-//#endregion
 //#region src/feedback/ui/annotation/styles.ts
 const ANNOTATOR_STYLES = `
 .overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; display: flex; flex-direction: column; background: transparent; color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
@@ -4233,20 +2410,23 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
 }
 //#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 { isOpen } = state;
-	if (!enabled || state.isDismissed) return null;
+	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",
@@ -4283,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