reflet-sdk 0.4.3 → 0.5.0

package/dist/picker-DDDpVcfr.js

@@ -0,0 +1,1918 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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;
+/** The widget is excluded from every capture, so its own motion (a pulsing pin) is not worth waiting for. */
+function isWidgetAnimation(animation) {
+	const root = (animation.effect instanceof KeyframeEffect ? animation.effect.target : null)?.getRootNode();
+	return root instanceof ShadowRoot && root.host.hasAttribute("data-reflet-widget");
+}
+/**
+* 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" && !isWidgetAnimation(animation));
+		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.5.0";
+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/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/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/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/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/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";
+}
+async function uploadImageBlob(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;
+}
+function createFeedbackTransport(client) {
+	return {
+		create: (params) => client.create(params),
+		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
+		saveScreenshot: (params) => client.saveScreenshot(params),
+		uploadImage: uploadImageBlob
+	};
+}
+//#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 readStoredPosition(persistKey) {
+	if (!persistKey || typeof localStorage === "undefined") return null;
+	try {
+		const stored = JSON.parse(localStorage.getItem(persistKey) ?? "null");
+		if (typeof stored === "object" && stored !== null && "x" in stored && "y" in stored && typeof stored.x === "number" && typeof stored.y === "number") return {
+			x: stored.x,
+			y: stored.y
+		};
+		return null;
+	} catch {
+		return null;
+	}
+}
+function useFloatingPosition(corner = "bottom-right", isPanelOpen = false, { anchorSelector = ".root", persistKey } = {}) {
+	const rootRef = useRef(null);
+	const gesture = useRef(null);
+	const [placement, setPlacement] = useState(() => readStoredPosition(persistKey));
+	const [fittedAnchor, setFittedAnchor] = 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";
+	const position = fittedAnchor ?? placement;
+	if (positionedPanelOpen !== isPanelOpen) {
+		setPositionedPanelOpen(isPanelOpen);
+		setPlacement(null);
+		setFittedAnchor(null);
+	}
+	const anchorFor = useCallback((point, bounds) => {
+		const fitted = clampPosition(point, bounds);
+		const visible = visibleViewport();
+		return {
+			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
+		};
+	}, [horizontalEdge, verticalEdge]);
+	const moveTo = (point, bounds) => {
+		const anchor = anchorFor(point, bounds);
+		setFittedAnchor(null);
+		setPlacement((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
+	};
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root || root.offsetWidth === 0) return;
+		const bounds = new DOMRect(root.offsetLeft, root.offsetTop, root.offsetWidth, root.offsetHeight);
+		const fitted = clampPosition(bounds, bounds, viewport);
+		if (Math.abs(fitted.x - bounds.x) > .5 || Math.abs(fitted.y - bounds.y) > .5) {
+			const anchor = anchorFor(fitted, bounds);
+			setFittedAnchor((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
+		}
+	});
+	/** Back to the user's placement first; the layout effect then refits it to the new room. */
+	useEffect(() => {
+		const refit = () => setFittedAnchor(null);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(refit);
+		if (rootRef.current) observer?.observe(rootRef.current);
+		const stopListening = onViewportChange(() => {
+			setViewport(visibleViewport());
+			refit();
+		});
+		return () => {
+			observer?.disconnect();
+			stopListening();
+		};
+	}, []);
+	useEffect(() => {
+		if (!persistKey) return;
+		try {
+			if (placement) localStorage.setItem(persistKey, JSON.stringify(placement));
+			else localStorage.removeItem(persistKey);
+		} catch {}
+	}, [persistKey, placement]);
+	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 = `${anchorSelector} { --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 ? `${anchorSelector}[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;
+			}
+		},
+		/** The user's own placement, independent of any temporary fit. */
+		placement,
+		/** Null while docked by CSS; non-null once moved by the user or fitted into the window. */
+		position,
+		resetPosition: () => {
+			setPlacement(null);
+			setFittedAnchor(null);
+		},
+		rootRef,
+		styles: viewportStyles + anchorStyles
+	};
+}
+//#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
+	};
+}
+function ElementPicker({ inspect, 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 pin = (element, wantsCode) => {
+			if (wantsCode && inspect) inspect.onInspect(element);
+			else setPinned(describeTarget(element));
+		};
+		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) pin(element, event.shiftKey);
+		};
+		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) pin(aimRef.current, event.shiftKey);
+				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;
+		};
+	}, [inspect, 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
+							}),
+							inspect && /* @__PURE__ */ jsx("button", {
+								className: "picker-cancel",
+								onClick: () => inspect.onInspect(pinned.element),
+								type: "button",
+								children: inspect.label
+							}),
+							/* @__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" }),
+						inspect && /* @__PURE__ */ jsx("kbd", { children: "⇧ Click" }),
+						/* @__PURE__ */ jsx("kbd", { children: "Esc" })
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					className: "picker-cancel",
+					onClick: onCancel,
+					type: "button",
+					children: labels.cancel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { TrashIcon as A, getFiberFromNode as B, MoreIcon as C, Svg as D, SquareIcon as E, SDK_VERSION as F, capturedFromCanvas as G, shortenSourcePath as H, collectPageContext as I, releaseCapture as K, MAX_SELECTION_COMMENT_LENGTH as L, isDegenerate as M, normalizeRect as N, TargetIcon as O, DEFAULT_WIDGET_LABELS as P, buildElementSelection as R, HighlightIcon as S, SpotlightIcon as T, WIDGET_MARKER as U, resolveComponentStack as V, captureViewport as W, ChatIcon as _, visibleViewport as a, CloseIcon as b, deriveTitle as c, SelectionOutline as d, drawAnnotations as f, CameraIcon as g, BlurIcon as h, onViewportChange as i, UndoIcon as j, TextIcon as k, submitWidgetFeedback as l, ArrowIcon as m, isWidgetOwned as n, attachPreparedScreenshots as o, listenToKeydown as p, useFloatingPosition as r, createFeedbackTransport as s, ElementPicker as t, uploadImageBlob as u, CheckIcon as v, PencilIcon as w, GripIcon as x, ChevronDownIcon as y, describeElement as z };
+
+//# sourceMappingURL=picker-DDDpVcfr.js.map