reflet-sdk 0.1.5 → 0.3.0

package/dist/feedback.js

@@ -0,0 +1,2547 @@
+"use client";
+import { t as Reflet } from "./client-BYuSKJw5.js";
+import { t as RefletContext } from "./react-context-DZw_HHjj.js";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { 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;
+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
+	};
+}
+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$1(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;
+}
+/**
+* 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;
+		const canvas = await snapdom.toCanvas(target, buildSnapdomOptions({
+			devicePixelRatio: window.devicePixelRatio,
+			element: options.element,
+			excludeSelectors: options.excludeSelectors
+		}));
+		const fitted = fitWithin({
+			height: canvas.height,
+			width: canvas.width
+		}, options.maxWidth ?? DEFAULT_MAX_WIDTH);
+		const output = fitted.scale === 1 ? canvas : downscale(canvas, fitted);
+		const blob = await toBlob$1(output);
+		if (!blob) return null;
+		return {
+			blob,
+			height: output.height,
+			mimeType: "image/png",
+			objectUrl: URL.createObjectURL(blob),
+			width: output.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 = 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);
+}
+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);
+			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_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 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\"]";
+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) {
+	let closest = null;
+	for (const heading of document.querySelectorAll(HEADING_SELECTOR)) if ((heading.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING) !== 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);
+	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
+	};
+}
+//#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
+		},
+		sdkVersion: options?.sdkVersion,
+		timezone: resolveTimezone(),
+		url: clip(window.location.href, MAX_URL_LENGTH),
+		userAgent: clip(userAgent, MAX_USER_AGENT_LENGTH),
+		viewport: {
+			devicePixelRatio: window.devicePixelRatio,
+			height: window.innerHeight,
+			width: window.innerWidth
+		}
+	};
+}
+//#endregion
+//#region src/feedback/types.ts
+/** Reported with every submission. */
+const SDK_VERSION = "0.3.0";
+const DEFAULT_WIDGET_LABELS = {
+	annotateHint: "Draw on the screenshot to point at the problem.",
+	attachScreenshot: "Attach a screenshot",
+	back: "Back",
+	cancel: "Cancel",
+	categoryBug: "Bug",
+	categoryIdea: "Idea",
+	categoryQuestion: "Question",
+	clearAnnotations: "Clear drawing",
+	descriptionPlaceholder: "What happened? What did you expect?",
+	dismissForDays: "Hide for {days} days",
+	done: "Done",
+	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
+	errorGeneric: "Something went wrong. Please try again.",
+	errorTitleRequired: "Tell us a bit about it first.",
+	pickElement: "Point at an element",
+	pickElementHint: "Click the element you are talking about — cancel with",
+	recapture: "Retake",
+	removeScreenshot: "Remove",
+	retakeHint: "Screenshot of this page",
+	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 ANNOTATION_COLORS = [
+	"#ef4444",
+	"#f59e0b",
+	"#22c55e",
+	"#3b82f6",
+	"#111827"
+];
+const BOX_TOOLS = [
+	"rectangle",
+	"highlight",
+	"blur"
+];
+const MIN_GESTURE_LENGTH = 8;
+const ARROW_HEAD_ANGLE = Math.PI / 7;
+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)
+	};
+}
+/** The two barbs closing the arrow tip, both `size` px away from `end`. */
+function arrowHead(start, end, size) {
+	const angle = Math.atan2(end.y - start.y, end.x - start.x);
+	if (Math.hypot(end.x - start.x, end.y - start.y) === 0) return [end, end];
+	const barb = (offset) => ({
+		x: end.x - size * Math.cos(angle + offset),
+		y: end.y - size * Math.sin(angle + offset)
+	});
+	return [barb(-ARROW_HEAD_ANGLE), barb(ARROW_HEAD_ANGLE)];
+}
+/** Drops points a user cannot perceive, keeping the payload small. */
+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 === "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,
+			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
+	};
+}
+/** Serializes to the shape the Reflet API stores next to the screenshot. */
+function toWireAnnotations(annotations) {
+	return annotations.filter((item) => !isDegenerate(item)).map(toWire);
+}
+//#endregion
+//#region src/feedback/core/annotation-renderer.ts
+const STROKE_WIDTH = 3;
+const ARROW_HEAD_SIZE = 16;
+const HIGHLIGHT_ALPHA = .3;
+const REDACTION_FILL = "#111827";
+const PIXEL_BLOCK = 10;
+function scalePoint(point, scale) {
+	return {
+		x: point.x * scale,
+		y: point.y * scale
+	};
+}
+function scaleRect(rect, scale) {
+	return {
+		height: rect.height * scale,
+		width: rect.width * scale,
+		x: rect.x * scale,
+		y: rect.y * scale
+	};
+}
+function isCanvasElement(value) {
+	return typeof HTMLCanvasElement !== "undefined" && value instanceof HTMLCanvasElement;
+}
+/**
+* Downsamples the region and paints it back enlarged, so redacted pixels are
+* unrecoverable. Falls back to an opaque block wherever 2d canvases are absent.
+*/
+function redact(context, rect) {
+	const source = context.canvas;
+	const width = Math.max(1, Math.round(rect.width / PIXEL_BLOCK));
+	const height = Math.max(1, Math.round(rect.height / PIXEL_BLOCK));
+	if (isCanvasElement(source)) {
+		const offscreen = document.createElement("canvas");
+		offscreen.width = width;
+		offscreen.height = height;
+		const offscreenContext = offscreen.getContext("2d");
+		if (offscreenContext) {
+			offscreenContext.imageSmoothingEnabled = true;
+			offscreenContext.drawImage(source, rect.x, rect.y, rect.width, rect.height, 0, 0, width, height);
+			context.drawImage(offscreen, rect.x, rect.y, rect.width, rect.height);
+			return;
+		}
+	}
+	context.fillStyle = REDACTION_FILL;
+	context.fillRect(rect.x, rect.y, rect.width, rect.height);
+}
+function drawArrow(context, start, end, scale) {
+	context.beginPath();
+	context.moveTo(start.x, start.y);
+	context.lineTo(end.x, end.y);
+	context.stroke();
+	const [left, right] = arrowHead(start, end, ARROW_HEAD_SIZE * scale);
+	context.beginPath();
+	context.moveTo(end.x, end.y);
+	context.lineTo(left.x, left.y);
+	context.lineTo(right.x, right.y);
+	context.closePath();
+	context.fill();
+}
+function drawPen(context, points, scale) {
+	const [first, ...rest] = points;
+	if (!first) return;
+	const head = scalePoint(first, scale);
+	context.beginPath();
+	context.moveTo(head.x, head.y);
+	for (const point of rest) {
+		const scaled = scalePoint(point, scale);
+		context.lineTo(scaled.x, scaled.y);
+	}
+	context.stroke();
+}
+function drawAnnotation(context, annotation, scale) {
+	const { color, tool } = annotation;
+	const rect = scaleRect(normalizeRect(annotation.start, annotation.end), scale);
+	context.save();
+	context.lineWidth = STROKE_WIDTH * scale;
+	context.lineCap = "round";
+	context.lineJoin = "round";
+	context.strokeStyle = color;
+	context.fillStyle = color;
+	switch (tool) {
+		case "pen":
+			drawPen(context, annotation.points ?? [], scale);
+			break;
+		case "arrow":
+			drawArrow(context, scalePoint(annotation.start, scale), scalePoint(annotation.end, scale), scale);
+			break;
+		case "rectangle":
+			context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+			break;
+		case "highlight":
+			context.globalAlpha = HIGHLIGHT_ALPHA;
+			context.fillRect(rect.x, rect.y, rect.width, rect.height);
+			break;
+		default: redact(context, rect);
+	}
+	context.restore();
+}
+function drawAnnotations(context, annotations, options) {
+	const scale = options?.scale ?? 1;
+	for (const annotation of annotations) if (!isDegenerate(annotation)) drawAnnotation(context, annotation, scale);
+}
+function loadImage(url) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => resolve(image);
+		image.onerror = () => reject(/* @__PURE__ */ new Error("Screenshot could not be decoded"));
+		image.src = url;
+	});
+}
+function toBlob(canvas) {
+	return new Promise((resolve) => {
+		canvas.toBlob(resolve, "image/png");
+	});
+}
+/**
+* Burns the annotations into a copy of the capture so reviewers and agents see
+* the drawing without needing to replay the vector data.
+*/
+async function renderAnnotatedImage(source, annotations) {
+	if (annotations.length === 0) return null;
+	const canvas = document.createElement("canvas");
+	canvas.width = source.width;
+	canvas.height = source.height;
+	const context = canvas.getContext("2d");
+	if (!context) return null;
+	const image = await loadImage(source.objectUrl);
+	context.drawImage(image, 0, 0, source.width, source.height);
+	drawAnnotations(context, annotations);
+	const blob = await toBlob(canvas);
+	if (!blob) return null;
+	return {
+		blob,
+		height: source.height,
+		mimeType: "image/png",
+		objectUrl: URL.createObjectURL(blob),
+		width: source.width
+	};
+}
+//#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 BugIcon() {
+	return /* @__PURE__ */ jsx(Svg, {
+		size: 14,
+		children: /* @__PURE__ */ jsx("path", { d: "M8 6a4 4 0 0 1 8 0M6 10h12v4a6 6 0 0 1-12 0zM3 12h3M18 12h3M4.5 6.5 7 8M19.5 6.5 17 8M4.5 17.5 7 16M19.5 17.5 17 16" })
+	});
+}
+function IdeaIcon() {
+	return /* @__PURE__ */ jsx(Svg, {
+		size: 14,
+		children: /* @__PURE__ */ jsx("path", { d: "M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.5.4.8.9.9 1.5l.1.7h5.2l.1-.7c.1-.6.4-1.1.9-1.5A6 6 0 0 0 12 3" })
+	});
+}
+function QuestionIcon() {
+	return /* @__PURE__ */ jsxs(Svg, {
+		size: 14,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.3M12 17h.01" })]
+	});
+}
+function CameraIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2l1.2-2h8.2l1.2 2h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z" }), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		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 SquareIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("rect", {
+		height: "13",
+		rx: "1.5",
+		width: "16",
+		x: "4",
+		y: "5.5"
+	}) });
+}
+function HighlightIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 15h16M6 5h12v7H6z" }) });
+}
+function BlurIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M12 3c3.5 4 5.5 6.6 5.5 9.2A5.5 5.5 0 0 1 6.5 12.2C6.5 9.6 8.5 7 12 3" }), /* @__PURE__ */ jsx("path", { d: "M9 13h.01M12 15h.01M15 12h.01" })] });
+}
+function UndoIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 9h11a5 5 0 0 1 0 10h-5M4 9l4-4M4 9l4 4" }) });
+}
+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" })
+	});
+}
+//#endregion
+//#region src/feedback/ui/annotator.tsx
+const TOOLS = [
+	{
+		icon: PencilIcon,
+		id: "pen",
+		label: "Draw"
+	},
+	{
+		icon: ArrowIcon,
+		id: "arrow",
+		label: "Arrow"
+	},
+	{
+		icon: SquareIcon,
+		id: "rectangle",
+		label: "Box"
+	},
+	{
+		icon: HighlightIcon,
+		id: "highlight",
+		label: "Highlight"
+	},
+	{
+		icon: BlurIcon,
+		id: "blur",
+		label: "Hide"
+	}
+];
+function toImagePoint(canvas, clientX, clientY) {
+	const bounds = canvas.getBoundingClientRect();
+	return {
+		x: (clientX - bounds.left) / bounds.width * canvas.width,
+		y: (clientY - bounds.top) / bounds.height * canvas.height
+	};
+}
+function Annotator({ annotations, capture, labels, onChange, onDone }) {
+	const canvasRef = useRef(null);
+	const nextId = useRef(0);
+	const [tool, setTool] = useState("pen");
+	const [color, setColor] = useState(ANNOTATION_COLORS[0]);
+	const [draft, setDraft] = useState(null);
+	const [base, setBase] = useState(null);
+	useEffect(() => {
+		let active = true;
+		const image = new Image();
+		image.onload = () => {
+			if (active) setBase(image);
+		};
+		image.src = capture.objectUrl;
+		return () => {
+			active = false;
+			setBase(null);
+		};
+	}, [capture.objectUrl]);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const context = canvas?.getContext("2d");
+		if (!(canvas && context)) return;
+		context.clearRect(0, 0, canvas.width, canvas.height);
+		if (base) context.drawImage(base, 0, 0, canvas.width, canvas.height);
+		drawAnnotations(context, draft ? [...annotations, draft] : annotations);
+	}, [
+		annotations,
+		base,
+		draft
+	]);
+	const onPointerDown = (event) => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		canvas.setPointerCapture(event.pointerId);
+		const point = toImagePoint(canvas, event.clientX, event.clientY);
+		nextId.current += 1;
+		setDraft({
+			color,
+			end: point,
+			id: `a${nextId.current}`,
+			points: tool === "pen" ? [point] : void 0,
+			start: point,
+			tool
+		});
+	};
+	const onPointerMove = (event) => {
+		const canvas = canvasRef.current;
+		if (!(canvas && draft)) return;
+		const point = toImagePoint(canvas, event.clientX, event.clientY);
+		setDraft(draft.tool === "pen" ? {
+			...draft,
+			end: point,
+			points: [...draft.points ?? [], point]
+		} : {
+			...draft,
+			end: point
+		});
+	};
+	const onPointerUp = () => {
+		if (!draft) return;
+		if (!isDegenerate(draft)) onChange([...annotations, draft]);
+		setDraft(null);
+	};
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onDone();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [onDone]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "overlay",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "editor",
+			children: /* @__PURE__ */ jsx("canvas", {
+				height: capture.height,
+				onPointerCancel: onPointerUp,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				ref: canvasRef,
+				width: capture.width
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "toolbar",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "group",
+					children: TOOLS.map(({ icon: Icon, id, label }) => /* @__PURE__ */ jsx("button", {
+						"aria-label": label,
+						"aria-pressed": tool === id,
+						className: "tool",
+						onClick: () => setTool(id),
+						title: label,
+						type: "button",
+						children: /* @__PURE__ */ jsx(Icon, {})
+					}, id))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "group",
+					children: ANNOTATION_COLORS.map((value) => /* @__PURE__ */ jsx("button", {
+						"aria-label": `Color ${value}`,
+						"aria-pressed": color === value,
+						className: "swatch",
+						onClick: () => setColor(value),
+						style: { background: value },
+						type: "button"
+					}, value))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "group",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": labels.undo,
+							className: "tool",
+							disabled: annotations.length === 0,
+							onClick: () => onChange(annotations.slice(0, -1)),
+							title: labels.undo,
+							type: "button",
+							children: /* @__PURE__ */ jsx(UndoIcon, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": labels.clearAnnotations,
+							className: "tool",
+							disabled: annotations.length === 0,
+							onClick: () => onChange([]),
+							title: labels.clearAnnotations,
+							type: "button",
+							children: /* @__PURE__ */ jsx(TrashIcon, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "done-btn",
+							onClick: onDone,
+							type: "button",
+							children: labels.done
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/launcher.tsx
+/**
+* Never changes size between states — the panel opening must not move the
+* button out from under the pointer.
+*/
+function Launcher({ isOpen, label, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-expanded": isOpen,
+		className: "launcher",
+		"data-open": isOpen,
+		onClick,
+		type: "button",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "launcher-icon",
+			children: [/* @__PURE__ */ jsx(ChatIcon, { className: "on-open" }), /* @__PURE__ */ jsx(CloseIcon, { className: "on-close" })]
+		}), label]
+	});
+}
+//#endregion
+//#region src/feedback/ui/panel.tsx
+const CATEGORY_META = {
+	bug: {
+		icon: BugIcon,
+		labelKey: "categoryBug"
+	},
+	idea: {
+		icon: IdeaIcon,
+		labelKey: "categoryIdea"
+	},
+	question: {
+		icon: QuestionIcon,
+		labelKey: "categoryQuestion"
+	}
+};
+function Attachment({ labels, state }) {
+	if (state.isCapturing) return /* @__PURE__ */ jsxs("div", {
+		className: "card",
+		children: [/* @__PURE__ */ jsx("div", { className: "thumb" }), /* @__PURE__ */ jsxs("div", {
+			className: "meta",
+			children: [/* @__PURE__ */ jsx("strong", { children: labels.retakeHint }), /* @__PURE__ */ jsx("span", { children: "…" })]
+		})]
+	});
+	if (!state.capture) return /* @__PURE__ */ jsxs("button", {
+		className: "ghost-btn",
+		onClick: () => state.takeCapture(),
+		type: "button",
+		children: [/* @__PURE__ */ jsx(CameraIcon, {}), labels.attachScreenshot]
+	});
+	const annotationCount = state.annotations.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "card",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "thumb",
+				children: /* @__PURE__ */ jsx("img", {
+					alt: "",
+					height: state.capture.height,
+					src: state.capture.objectUrl,
+					width: state.capture.width
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "meta",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "truncate",
+					children: labels.retakeHint
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "truncate",
+					children: [
+						state.capture.width,
+						"×",
+						state.capture.height,
+						annotationCount > 0 ? ` · ${annotationCount} marks` : ""
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "actions",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.annotateHint,
+						className: "icon-btn",
+						onClick: () => state.setStep("annotate"),
+						title: labels.annotateHint,
+						type: "button",
+						children: /* @__PURE__ */ jsx(PencilIcon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.recapture,
+						className: "icon-btn",
+						onClick: () => state.takeCapture(),
+						title: labels.recapture,
+						type: "button",
+						children: /* @__PURE__ */ jsx(CameraIcon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.removeScreenshot,
+						className: "icon-btn",
+						onClick: state.removeCapture,
+						title: labels.removeScreenshot,
+						type: "button",
+						children: /* @__PURE__ */ jsx(TrashIcon, {})
+					})
+				]
+			})
+		]
+	});
+}
+/** Shows the reporter exactly what will be sent about the element they picked. */
+function Selection({ labels, state }) {
+	const { elementCapture, selection } = state;
+	if (!selection) return /* @__PURE__ */ jsxs("button", {
+		className: "ghost-btn",
+		onClick: () => state.setStep("picking"),
+		type: "button",
+		children: [/* @__PURE__ */ jsx(TargetIcon, {}), labels.pickElement]
+	});
+	const component = selection.componentStack[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "card",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "thumb contain",
+				children: elementCapture && /* @__PURE__ */ jsx("img", {
+					alt: "",
+					height: elementCapture.height,
+					src: elementCapture.objectUrl,
+					width: elementCapture.width
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "meta",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "truncate",
+					children: component ? `<${component}>` : selection.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selection.region ?? selection.sourceLocation ?? selection.selector
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.pickElement,
+					className: "icon-btn",
+					onClick: () => state.setStep("picking"),
+					title: labels.pickElement,
+					type: "button",
+					children: /* @__PURE__ */ jsx(TargetIcon, {})
+				}), /* @__PURE__ */ jsx("button", {
+					"aria-label": labels.cancel,
+					className: "icon-btn",
+					onClick: state.clearSelection,
+					title: labels.cancel,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})]
+			})
+		]
+	});
+}
+function FeedbackPanel({ categories, labels, state }) {
+	const messageRef = useRef(null);
+	useEffect(() => {
+		messageRef.current?.focus();
+	}, []);
+	if (state.step === "success") return /* @__PURE__ */ jsx("section", {
+		"aria-live": "polite",
+		className: "panel",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "done",
+			children: [
+				/* @__PURE__ */ jsx(CheckIcon, {}),
+				/* @__PURE__ */ jsx("h2", { children: labels.successTitle }),
+				/* @__PURE__ */ jsx("p", { children: labels.successMessage })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": labels.title,
+		className: "panel",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "head",
+				children: [
+					/* @__PURE__ */ jsx("h2", { children: labels.title }),
+					/* @__PURE__ */ jsx("span", { className: "spacer" }),
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.cancel,
+						className: "icon-btn",
+						onClick: state.close,
+						type: "button",
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "body",
+				onSubmit: (event) => {
+					event.preventDefault();
+					state.submit();
+				},
+				children: [
+					categories.length > 1 && /* @__PURE__ */ jsx("fieldset", {
+						className: "segmented",
+						children: categories.map((value) => {
+							const { icon: Icon, labelKey } = CATEGORY_META[value];
+							return /* @__PURE__ */ jsxs("button", {
+								"aria-pressed": state.category === value,
+								onClick: () => state.setCategory(value),
+								type: "button",
+								children: [/* @__PURE__ */ jsx(Icon, {}), labels[labelKey]]
+							}, value);
+						})
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						"aria-label": labels.descriptionPlaceholder,
+						maxLength: 4e3,
+						onChange: (event) => state.setMessage(event.target.value),
+						placeholder: labels.descriptionPlaceholder,
+						ref: messageRef,
+						value: state.message
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "attachments",
+						children: [/* @__PURE__ */ jsx(Attachment, {
+							labels,
+							state
+						}), /* @__PURE__ */ jsx(Selection, {
+							labels,
+							state
+						})]
+					}),
+					state.isAnonymous && /* @__PURE__ */ jsx("input", {
+						"aria-label": labels.emailLabel,
+						autoComplete: "email",
+						onChange: (event) => state.setEmail(event.target.value),
+						placeholder: labels.emailPlaceholder,
+						type: "email",
+						value: state.email
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "hp",
+						children: /* @__PURE__ */ jsx("input", {
+							autoComplete: "off",
+							name: "company-website",
+							onChange: (event) => state.setHoneypot(event.target.value),
+							tabIndex: -1,
+							value: state.honeypot
+						})
+					}),
+					state.error && /* @__PURE__ */ jsx("p", {
+						className: "error",
+						children: state.error
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "submit",
+						disabled: state.isSubmitting || !state.message.trim(),
+						type: "submit",
+						children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : labels.submit
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "footer",
+				"data-dismissible": state.canDismiss,
+				children: [state.canDismiss && /* @__PURE__ */ jsx("button", {
+					className: "dismiss-btn",
+					onClick: state.dismiss,
+					type: "button",
+					children: labels.dismissForDays.replace("{days}", String(state.dismissForDays))
+				}), /* @__PURE__ */ jsxs("span", { children: [
+					"Powered by",
+					" ",
+					/* @__PURE__ */ jsx("a", {
+						href: "https://reflet.app",
+						rel: "noopener noreferrer",
+						target: "_blank",
+						children: "Reflet"
+					})
+				] })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/feedback/ui/picker.tsx
+const LABEL_HEIGHT = 24;
+const LABEL_GAP = 6;
+function isWidgetOwned(element) {
+	return element.closest(`[${WIDGET_MARKER}]`) !== null;
+}
+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)
+	};
+}
+/**
+* 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.
+*/
+function ElementPicker({ hint, onCancel, onPick }) {
+	const [target, setTarget] = useState(null);
+	useEffect(() => {
+		const swallow = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		const onMove = (event) => {
+			const element = elementUnder(event.clientX, event.clientY);
+			if (!element) {
+				setTarget(null);
+				return;
+			}
+			setTarget((current) => current?.element === element ? {
+				...current,
+				rect: element.getBoundingClientRect()
+			} : describeTarget(element));
+		};
+		const onClick = (event) => {
+			swallow(event);
+			const element = elementUnder(event.clientX, event.clientY);
+			if (element) onPick(element);
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				swallow(event);
+				onCancel();
+			}
+		};
+		document.addEventListener("pointermove", onMove, true);
+		document.addEventListener("pointerdown", swallow, true);
+		document.addEventListener("mousedown", swallow, true);
+		document.addEventListener("mouseup", swallow, true);
+		document.addEventListener("click", onClick, true);
+		document.addEventListener("keydown", onKeyDown, true);
+		const previousCursor = document.body.style.cursor;
+		document.body.style.cursor = "crosshair";
+		return () => {
+			document.removeEventListener("pointermove", onMove, true);
+			document.removeEventListener("pointerdown", swallow, true);
+			document.removeEventListener("mousedown", swallow, true);
+			document.removeEventListener("mouseup", swallow, true);
+			document.removeEventListener("click", onClick, true);
+			document.removeEventListener("keydown", onKeyDown, true);
+			document.body.style.cursor = previousCursor;
+		};
+	}, [onCancel, onPick]);
+	const rect = target?.rect;
+	const labelAbove = rect ? rect.top > 30 : true;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		rect && /* @__PURE__ */ jsx("div", {
+			className: "picker-box",
+			style: {
+				height: rect.height,
+				left: rect.left,
+				top: rect.top,
+				width: rect.width
+			}
+		}),
+		rect && target && /* @__PURE__ */ jsxs("div", {
+			className: "picker-label",
+			style: {
+				left: Math.max(4, rect.left),
+				top: labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP
+			},
+			children: [/* @__PURE__ */ jsx("strong", { children: target.componentName ? `<${target.componentName}>` : target.label }), target.region && /* @__PURE__ */ jsx("span", { children: target.region })]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "picker-hint",
+			children: [
+				hint,
+				" ",
+				/* @__PURE__ */ jsx("kbd", { children: "Esc" })
+			]
+		})
+	] });
+}
+//#endregion
+//#region src/feedback/ui/styles.ts
+/**
+* Styles for the feedback widget. Injected into a shadow root, so nothing here
+* leaks into the host app and nothing from the host app leaks in.
+*/
+const WIDGET_STYLES = `
+:host {
+  --rf-bg: #ffffff;
+  --rf-bg-subtle: rgb(55 53 47 / 4%);
+  --rf-bg-hover: rgb(55 53 47 / 7%);
+  --rf-border: rgb(55 53 47 / 9%);
+  --rf-text: #37352f;
+  --rf-text-muted: rgb(55 53 47 / 55%);
+  --rf-primary: #37352f;
+  --rf-primary-text: #ffffff;
+  --rf-accent: #2383e2;
+  --rf-danger: #d44c47;
+  --rf-success: #448361;
+  --rf-radius: 12px;
+  --rf-radius-sm: 8px;
+  --rf-shadow-inset: inset 0 0 0 1px var(--rf-border);
+  --rf-shadow-low: 0 0 0 1px rgb(15 15 15 / 4%), 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
+  --rf-shadow: 0 0 0 1px rgb(15 15 15 / 4%), 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
+  --rf-ring: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 20%, transparent);
+  --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  color-scheme: light;
+  all: initial;
+  font-family: var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+:host([data-theme="dark"]) {
+  --rf-bg: #202020;
+  --rf-bg-subtle: rgb(255 255 255 / 5%);
+  --rf-bg-hover: rgb(255 255 255 / 9%);
+  --rf-border: rgb(255 255 255 / 9%);
+  --rf-text: #ebeae8;
+  --rf-text-muted: rgb(255 255 255 / 46%);
+  --rf-primary: #f1efec;
+  --rf-primary-text: #1c1c1b;
+  --rf-accent: #529cca;
+  --rf-danger: #eb5757;
+  --rf-success: #4dab74;
+  --rf-shadow-low: 0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
+  color-scheme: dark;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.root {
+  position: fixed;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-family: inherit;
+  font-size: 13.5px;
+  line-height: 1.45;
+  color: var(--rf-text);
+}
+
+.root[data-position$="right"] { right: var(--rf-offset); align-items: flex-end; }
+.root[data-position$="left"] { left: var(--rf-offset); align-items: flex-start; }
+.root[data-position^="bottom"] { bottom: var(--rf-offset); }
+.root[data-position^="top"] { top: var(--rf-offset); flex-direction: column-reverse; }
+
+button {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+  cursor: pointer;
+  border: 0;
+  background: none;
+}
+
+:focus-visible { outline: none; box-shadow: var(--rf-ring); }
+
+.launcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 11px;
+  border-radius: var(--rf-radius-sm);
+  background: var(--rf-primary);
+  color: var(--rf-primary-text);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  box-shadow: var(--rf-shadow-low);
+  transition: transform 240ms var(--rf-ease), box-shadow 240ms var(--rf-ease), opacity 160ms var(--rf-ease);
+}
+.launcher:hover { transform: translateY(-1px); box-shadow: var(--rf-shadow); }
+.launcher:active { transform: translateY(0) scale(0.98); }
+
+.launcher-icon { position: relative; width: 15px; height: 15px; flex: none; }
+.launcher-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 200ms var(--rf-ease), transform 320ms var(--rf-ease); }
+.launcher-icon .on-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
+.launcher[data-open="true"] .on-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
+.launcher[data-open="true"] .on-close { opacity: 1; transform: none; }
+
+.panel {
+  width: min(352px, calc(100vw - 24px));
+  max-height: min(600px, calc(100vh - 96px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--rf-bg);
+  border-radius: var(--rf-radius);
+  box-shadow: var(--rf-shadow);
+  animation: rf-in 220ms var(--rf-ease);
+}
+.root[data-position^="bottom"] .panel { transform-origin: bottom center; }
+.root[data-position^="top"] .panel { transform-origin: top center; animation-name: rf-in-top; }
+
+@keyframes rf-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.985); }
+}
+@keyframes rf-in-top {
+  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
+}
+@keyframes rf-fade { from { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 10px 4px 14px;
+}
+.head h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
+.head .spacer { flex: 1; }
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  border-radius: 6px;
+  color: var(--rf-text-muted);
+  transition: background 120ms var(--rf-ease), color 120ms var(--rf-ease);
+}
+.icon-btn:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+
+.body { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 14px; overflow-y: auto; }
+
+.segmented {
+  border: 0;
+  margin: 0;
+  min-inline-size: 0;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 2px;
+  padding: 2px;
+  background: var(--rf-bg-subtle);
+  border-radius: var(--rf-radius-sm);
+}
+.segmented button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 26px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--rf-text-muted);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
+}
+.segmented button:hover { color: var(--rf-text); }
+.segmented button[aria-pressed="true"] {
+  background: var(--rf-bg);
+  color: var(--rf-text);
+  box-shadow: var(--rf-shadow-low);
+}
+
+textarea, input[type="email"] {
+  width: 100%;
+  padding: 8px 10px;
+  font: inherit;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border: 1px solid var(--rf-border);
+  border-radius: var(--rf-radius-sm);
+  transition: border-color 160ms var(--rf-ease), box-shadow 160ms var(--rf-ease);
+}
+textarea { min-height: 84px; max-height: 220px; resize: none; }
+textarea::placeholder, input::placeholder { color: var(--rf-text-muted); }
+textarea:focus, input:focus { outline: none; border-color: color-mix(in srgb, var(--rf-accent) 55%, transparent); box-shadow: var(--rf-ring); }
+
+.attachments { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.card {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 6px;
+  border-radius: 10px;
+  background: var(--rf-bg-subtle);
+  animation: rf-fade 200ms var(--rf-ease);
+}
+.thumb {
+  position: relative;
+  flex: 0 0 60px;
+  height: 42px;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--rf-bg);
+  box-shadow: var(--rf-shadow-inset);
+}
+.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
+.thumb.contain img { object-fit: contain; object-position: center; }
+.card .meta { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
+.card .meta strong { font-size: 12.5px; font-weight: 550; }
+.card .meta span { font-size: 11.5px; color: var(--rf-text-muted); }
+.card .actions { display: flex; gap: 2px; margin-left: auto; align-items: center; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
+
+.ghost-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--rf-text-muted);
+  border-radius: var(--rf-radius-sm);
+  box-shadow: var(--rf-shadow-inset);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
+}
+.ghost-btn:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
+
+.submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 32px;
+  margin-top: 2px;
+  font-size: 13px;
+  font-weight: 550;
+  color: var(--rf-primary-text);
+  background: var(--rf-primary);
+  border-radius: var(--rf-radius-sm);
+  transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease);
+}
+.submit:hover:not(:disabled) { opacity: 0.88; }
+.submit:active:not(:disabled) { transform: scale(0.99); }
+.submit:disabled { opacity: 0.35; cursor: not-allowed; }
+
+.error { margin: 0; font-size: 12px; color: var(--rf-danger); }
+
+.footer {
+  min-height: 34px;
+  padding: 0 14px;
+  border-top: 1px solid var(--rf-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+}
+.footer[data-dismissible="true"] { justify-content: space-between; }
+.footer a { color: inherit; text-decoration: none; font-weight: 550; transition: color 120ms var(--rf-ease); }
+.footer a:hover { color: var(--rf-text); }
+.dismiss-btn {
+  align-self: stretch;
+  color: inherit;
+  font-size: 11px;
+  transition: color 120ms var(--rf-ease);
+}
+.dismiss-btn:hover { color: var(--rf-text); }
+
+.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px 34px; text-align: center; }
+.done svg { color: var(--rf-success); }
+.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
+.done p { margin: 0; font-size: 12.5px; color: var(--rf-text-muted); }
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.6;
+  animation: rf-spin 700ms linear infinite;
+}
+@keyframes rf-spin { to { transform: rotate(360deg); } }
+
+.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483001;
+  display: flex;
+  flex-direction: column;
+  background: rgb(15 15 15 / 76%);
+  backdrop-filter: blur(3px);
+  animation: rf-fade 180ms var(--rf-ease);
+}
+
+.editor { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 24px 0; min-height: 0; }
+.editor canvas {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
+  box-shadow: 0 20px 60px -16px rgb(0 0 0 / 70%);
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
+}
+.toolbar .group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--rf-bg);
+  border-radius: 10px;
+  box-shadow: var(--rf-shadow);
+}
+.tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  color: var(--rf-text-muted);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
+}
+.tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.tool[aria-pressed="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
+.swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: transform 200ms var(--rf-ease), border-color 160ms var(--rf-ease);
+}
+.swatch[aria-pressed="true"] { border-color: var(--rf-text); transform: scale(1.15); }
+.toolbar .done-btn {
+  height: 30px;
+  padding: 0 13px;
+  font-size: 13px;
+  font-weight: 550;
+  border-radius: 7px;
+  color: var(--rf-primary-text);
+  background: var(--rf-primary);
+  transition: opacity 160ms var(--rf-ease);
+}
+.toolbar .done-btn:hover { opacity: 0.88; }
+
+.picker-box {
+  position: fixed;
+  pointer-events: none;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--rf-accent) 10%, transparent);
+  box-shadow: 0 0 0 2px var(--rf-accent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 18%, transparent);
+  transition: top 130ms var(--rf-ease), left 130ms var(--rf-ease), width 130ms var(--rf-ease), height 130ms var(--rf-ease);
+}
+.picker-label {
+  position: fixed;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(420px, 90vw);
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: #ffffff;
+  background: var(--rf-accent);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px -3px rgb(15 15 15 / 35%);
+  white-space: nowrap;
+  overflow: hidden;
+  transition: top 130ms var(--rf-ease), left 130ms var(--rf-ease);
+}
+.picker-label strong { flex: none; font-weight: 600; }
+.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
+.picker-hint {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  font-size: 12.5px;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border-radius: 10px;
+  box-shadow: var(--rf-shadow);
+  animation: rf-fade 240ms var(--rf-ease);
+}
+.picker-hint kbd {
+  padding: 1px 5px;
+  font: inherit;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+  border-radius: 4px;
+  background: var(--rf-bg-subtle);
+  box-shadow: var(--rf-shadow-inset);
+}
+
+@media (pointer: coarse) {
+  .icon-btn, .tool, .swatch {
+    width: 44px;
+    height: 44px;
+  }
+
+  .launcher, .segmented button, .ghost-btn, .submit, .toolbar .done-btn {
+    min-height: 44px;
+  }
+
+  .dismiss-btn, .footer a {
+    display: inline-flex;
+    min-height: 44px;
+    align-items: center;
+  }
+
+  .footer a {
+    min-width: 44px;
+    justify-content: center;
+  }
+}
+`;
+//#endregion
+//#region src/feedback/ui/shadow-portal.tsx
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function useResolvedTheme(theme) {
+	const [systemDark, setSystemDark] = useState(false);
+	useEffect(() => {
+		if (theme !== "auto" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(DARK_QUERY);
+		setSystemDark(query.matches);
+		const onChange = (event) => setSystemDark(event.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, [theme]);
+	if (theme === "auto") return systemDark ? "dark" : "light";
+	return theme;
+}
+/**
+* Hosts the widget in a shadow root: the app's CSS cannot reach the panel and
+* the panel's CSS cannot reach the app. Direct DOM work is unavoidable here —
+* React has no declarative way to create a shadow root.
+*/
+function ShadowPortal({ children, offset, primaryColor, theme }) {
+	const [shadowRoot, setShadowRoot] = useState(null);
+	const resolvedTheme = useResolvedTheme(theme);
+	useEffect(() => {
+		const host = document.createElement("div");
+		host.setAttribute(WIDGET_MARKER, "");
+		const root = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = WIDGET_STYLES;
+		root.append(style);
+		document.body.append(host);
+		setShadowRoot(root);
+		return () => host.remove();
+	}, []);
+	useEffect(() => {
+		const host = shadowRoot?.host;
+		if (!(host instanceof HTMLElement)) return;
+		host.setAttribute("data-theme", resolvedTheme);
+		host.style.setProperty("--rf-offset", `${offset}px`);
+		if (primaryColor) host.style.setProperty("--rf-primary", primaryColor);
+	}, [
+		shadowRoot,
+		resolvedTheme,
+		primaryColor,
+		offset
+	]);
+	if (!shadowRoot) return null;
+	return createPortal(children, shadowRoot);
+}
+//#endregion
+//#region src/feedback/core/console-recorder.ts
+const DEFAULT_LIMIT = 30;
+const MAX_MESSAGE_LENGTH = 1e3;
+const RECORDED_METHODS = ["error", "warn"];
+function serializeArgument(value) {
+	if (typeof value === "string") return value;
+	if (value instanceof Error) return `${value.name}: ${value.message}`;
+	if (value === null || value === void 0) return String(value);
+	if (typeof value === "object") try {
+		return JSON.stringify(value) ?? "[unserializable]";
+	} catch {
+		return "[unserializable]";
+	}
+	if (typeof value === "function") return "[function]";
+	return String(value);
+}
+function formatMessage(args) {
+	const message = args.map(serializeArgument).join(" ");
+	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
+}
+/**
+* Buffers the console noise a user saw right before reporting a bug.
+* Wrappers delegate to the previous implementation, so nothing is swallowed.
+*/
+function startConsoleRecorder(options) {
+	const limit = options?.limit ?? DEFAULT_LIMIT;
+	const buffer = [];
+	let active = true;
+	const push = (level, message) => {
+		if (!(active && message)) return;
+		buffer.push({
+			level,
+			message,
+			timestamp: Date.now()
+		});
+		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
+	};
+	const originals = /* @__PURE__ */ new Map();
+	const wrappers = /* @__PURE__ */ new Map();
+	for (const method of RECORDED_METHODS) {
+		const original = console[method];
+		const wrapper = (...args) => {
+			push(method, formatMessage(args));
+			Reflect.apply(original, console, args);
+		};
+		originals.set(method, original);
+		wrappers.set(method, wrapper);
+		console[method] = wrapper;
+	}
+	const onError = (event) => {
+		const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
+		push("error", `${event.message}${where}`);
+	};
+	const onRejection = (event) => {
+		push("error", `Unhandled rejection: ${serializeArgument(event.reason)}`);
+	};
+	window.addEventListener("error", onError);
+	window.addEventListener("unhandledrejection", onRejection);
+	return {
+		events: () => buffer.slice(),
+		stop: () => {
+			if (!active) return;
+			active = false;
+			buffer.length = 0;
+			for (const method of RECORDED_METHODS) {
+				const original = originals.get(method);
+				if (original && console[method] === wrappers.get(method)) console[method] = original;
+			}
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		}
+	};
+}
+//#endregion
+//#region src/feedback/core/submit.ts
+const MAX_TITLE_LENGTH = 100;
+const NEWLINE = /\r?\n/;
+/** First line of the message, cut on a word boundary so titles stay readable. */
+function deriveTitle(message) {
+	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
+	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
+	const clipped = firstLine.slice(0, 99);
+	const lastSpace = clipped.lastIndexOf(" ");
+	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
+}
+function buildDescription(params) {
+	const { category, email, isAnonymous, message } = params;
+	const label = category.charAt(0).toUpperCase() + category.slice(1);
+	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
+	return `[${label}] ${message.trim()}${contact}`;
+}
+async function upload(transport, image) {
+	const { uploadUrl } = await transport.getScreenshotUploadUrl();
+	return await transport.uploadImage(uploadUrl, image);
+}
+async function attachScreenshot(transport, feedbackId, submission) {
+	const { annotated, annotations, context, screenshot } = submission;
+	if (!screenshot) return false;
+	const storageId = await upload(transport, screenshot);
+	const annotatedStorageId = annotated ? await upload(transport, annotated) : void 0;
+	const wireAnnotations = toWireAnnotations(annotations);
+	await transport.saveScreenshot({
+		annotatedStorageId,
+		annotations: wireAnnotations.length > 0 ? wireAnnotations : void 0,
+		captureSource: "widget",
+		feedbackId,
+		filename: "screenshot.png",
+		height: screenshot.height,
+		mimeType: screenshot.mimeType,
+		pageUrl: context.url,
+		size: screenshot.blob.size,
+		storageId,
+		width: screenshot.width
+	});
+	return true;
+}
+async function attachElement(transport, feedbackId, submission) {
+	const { context, element } = submission;
+	if (!element) return;
+	await transport.saveScreenshot({
+		captureSource: "element",
+		feedbackId,
+		filename: "element.png",
+		height: element.height,
+		mimeType: element.mimeType,
+		pageUrl: context.url,
+		size: element.blob.size,
+		storageId: await upload(transport, element),
+		width: element.width
+	});
+}
+/**
+* Creates the feedback first, then attaches the capture. A failed upload is
+* reported back but never discards what the user wrote.
+*/
+async function submitWidgetFeedback(transport, submission) {
+	const title = deriveTitle(submission.message);
+	if (!title) throw new Error("Please describe your feedback before sending it.");
+	const { feedbackId } = await transport.create({
+		context: submission.context,
+		description: buildDescription(submission),
+		title
+	});
+	const screenshotSaved = await attachScreenshot(transport, feedbackId, submission).catch(() => false);
+	await attachElement(transport, feedbackId, submission).catch(() => void 0);
+	return {
+		feedbackId,
+		screenshotSaved
+	};
+}
+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/use-widget-state.ts
+const SUCCESS_CLOSE_DELAY = 2400;
+const ELEMENT_CAPTURE_MAX_WIDTH = 1200;
+const IS_APPLE = /Mac|iPhone|iPad/;
+const MILLISECONDS_PER_DAY = 864e5;
+const DISMISSAL_STORAGE_PREFIX = "reflet-feedback-dismissed";
+function readDismissedUntil(key) {
+	if (typeof window === "undefined") return 0;
+	try {
+		const value = Number.parseInt(window.localStorage.getItem(key) ?? "", 10);
+		if (Number.isFinite(value) && value > Date.now()) return value;
+		window.localStorage.removeItem(key);
+	} catch {
+		return 0;
+	}
+	return 0;
+}
+function writeDismissedUntil(key, until) {
+	try {
+		window.localStorage.setItem(key, String(until));
+	} catch {}
+}
+/**
+* Matches shortcuts written as `alt+f` or `mod+shift+k`, where `mod` is the
+* platform's command key.
+*/
+function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
+	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const key = parts.at(-1);
+	if (!key || event.key.toLowerCase() !== key) return false;
+	const isApple = IS_APPLE.test(platform);
+	const wantsMod = parts.includes("mod");
+	const expected = {
+		alt: parts.includes("alt") || parts.includes("option"),
+		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
+		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
+		shift: parts.includes("shift")
+	};
+	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
+}
+function highlightFor(selection, capture) {
+	const scale = capture.width / window.innerWidth;
+	const { rect } = selection;
+	return {
+		color: "#4f46e5",
+		end: {
+			x: (rect.x + rect.width) * scale,
+			y: (rect.y + rect.height) * scale
+		},
+		id: `selection-${rect.x}-${rect.y}`,
+		start: {
+			x: rect.x * scale,
+			y: rect.y * scale
+		},
+		tool: "rectangle"
+	};
+}
+/**
+* A capture whose object URL is revoked the moment it is replaced or dropped —
+* holding one without this leaks the blob for the lifetime of the page.
+*/
+function useOwnedCapture() {
+	const [image, setImage] = useState(null);
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current = image;
+	}, [image]);
+	useEffect(() => () => releaseCapture(ref.current), []);
+	return [image, useCallback((next) => {
+		releaseCapture(ref.current);
+		setImage(next);
+	}, [])];
+}
+function useWidgetState(props) {
+	const context = useContext(RefletContext);
+	const publicKey = props.publicKey ?? context?.publicKey;
+	const baseUrl = props.baseUrl ?? context?.baseUrl;
+	const user = props.user ?? context?.user;
+	const userToken = props.userToken ?? context?.userToken;
+	const isAnonymous = !(user || userToken);
+	const dismissForDays = props.dismissForDays !== void 0 && Number.isFinite(props.dismissForDays) && props.dismissForDays > 0 ? props.dismissForDays : null;
+	const dismissalKey = `${DISMISSAL_STORAGE_PREFIX}:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`;
+	const [isOpen, setIsOpen] = useState(false);
+	const [step, setStep] = useState("compose");
+	const [category, setCategory] = useState(props.defaultCategory ?? "bug");
+	const [message, setMessage] = useState("");
+	const [email, setEmail] = useState("");
+	const [honeypot, setHoneypot] = useState("");
+	const [capture, replaceCapture] = useOwnedCapture();
+	const [elementCapture, replaceElementCapture] = useOwnedCapture();
+	const [annotations, setAnnotations] = useState([]);
+	const [selection, setSelection] = useState(null);
+	const [isCapturing, setIsCapturing] = useState(false);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
+	const captureRef = useRef(null);
+	const pickRef = useRef(0);
+	const consoleRef = useRef(null);
+	useEffect(() => {
+		captureRef.current = capture;
+	}, [capture]);
+	useEffect(() => {
+		setDismissedUntil(readDismissedUntil(dismissalKey));
+	}, [dismissalKey]);
+	useEffect(() => {
+		if (props.captureConsole === false) return;
+		const recorder = startConsoleRecorder();
+		consoleRef.current = recorder;
+		return () => {
+			consoleRef.current = null;
+			recorder.stop();
+		};
+	}, [props.captureConsole]);
+	const takeCapture = useCallback((element) => {
+		setIsCapturing(true);
+		captureViewport({ element }).catch(() => null).then((image) => {
+			setIsCapturing(false);
+			replaceCapture(image);
+		});
+	}, [replaceCapture]);
+	const reset = useCallback(() => {
+		pickRef.current++;
+		replaceCapture(null);
+		replaceElementCapture(null);
+		setAnnotations([]);
+		setSelection(null);
+		setMessage("");
+		setEmail("");
+		setHoneypot("");
+		setError(null);
+		setStep("compose");
+		setCategory(props.defaultCategory ?? "bug");
+	}, [
+		props.defaultCategory,
+		replaceCapture,
+		replaceElementCapture
+	]);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		reset();
+		props.onClose?.();
+	}, [reset, props.onClose]);
+	const dismiss = useCallback(() => {
+		if (dismissForDays === null) return;
+		const until = Date.now() + dismissForDays * MILLISECONDS_PER_DAY;
+		writeDismissedUntil(dismissalKey, until);
+		setIsOpen(false);
+		reset();
+		setDismissedUntil(until);
+		props.onDismiss?.({ until });
+	}, [
+		dismissForDays,
+		dismissalKey,
+		props.onDismiss,
+		reset
+	]);
+	const open = useCallback(() => {
+		setIsOpen(true);
+		setStep("compose");
+		props.onOpen?.();
+		if (props.captureOnOpen !== false) takeCapture();
+	}, [
+		props.captureOnOpen,
+		props.onOpen,
+		takeCapture
+	]);
+	const selectElement = useCallback((element) => {
+		const picked = buildElementSelection(element);
+		setSelection(picked);
+		setStep("compose");
+		const current = captureRef.current;
+		if (current) setAnnotations((previous) => [...previous.filter((item) => !item.id.startsWith("selection-")), highlightFor(picked, current)]);
+		const pick = ++pickRef.current;
+		captureViewport({
+			element,
+			maxWidth: ELEMENT_CAPTURE_MAX_WIDTH
+		}).catch(() => null).then((image) => {
+			if (pickRef.current === pick) replaceElementCapture(image);
+			else releaseCapture(image);
+		});
+	}, [replaceElementCapture]);
+	const clearSelection = useCallback(() => {
+		pickRef.current++;
+		replaceElementCapture(null);
+		setSelection(null);
+		setAnnotations((previous) => previous.filter((item) => !item.id.startsWith("selection-")));
+	}, [replaceElementCapture]);
+	const removeCapture = useCallback(() => {
+		replaceCapture(null);
+		setAnnotations([]);
+	}, [replaceCapture]);
+	const client = useMemo(() => publicKey ? new Reflet({
+		baseUrl,
+		publicKey,
+		user,
+		userToken
+	}) : null, [
+		baseUrl,
+		publicKey,
+		user,
+		userToken
+	]);
+	const submit = useCallback(async () => {
+		if (honeypot) {
+			setStep("success");
+			return;
+		}
+		if (!client) {
+			setError("Reflet is missing a publicKey. Pass one to RefletFeedback or RefletProvider.");
+			return;
+		}
+		setIsSubmitting(true);
+		setError(null);
+		let annotated = null;
+		try {
+			annotated = capture ? await renderAnnotatedImage(capture, annotations) : null;
+			const result = await submitWidgetFeedback(createFeedbackTransport(client), {
+				annotated,
+				annotations,
+				category,
+				context: {
+					...collectPageContext({ sdkVersion: SDK_VERSION }),
+					consoleEvents: consoleRef.current?.events(),
+					metadata: props.metadata,
+					selection: selection ?? void 0
+				},
+				element: elementCapture,
+				email,
+				isAnonymous,
+				message,
+				screenshot: capture
+			});
+			setStep("success");
+			props.onSubmit?.({ feedbackId: result.feedbackId });
+			setTimeout(close, SUCCESS_CLOSE_DELAY);
+		} catch (submitError) {
+			setError(submitError instanceof Error ? submitError.message : "Something went wrong. Please try again.");
+		} finally {
+			releaseCapture(annotated);
+			setIsSubmitting(false);
+		}
+	}, [
+		annotations,
+		capture,
+		category,
+		client,
+		close,
+		elementCapture,
+		email,
+		honeypot,
+		isAnonymous,
+		message,
+		props.metadata,
+		props.onSubmit,
+		selection
+	]);
+	return {
+		annotations,
+		canDismiss: dismissForDays !== null,
+		capture,
+		category,
+		clearSelection,
+		close,
+		dismiss,
+		dismissForDays,
+		elementCapture,
+		email,
+		error,
+		honeypot,
+		isAnonymous,
+		isCapturing,
+		isDismissed: dismissedUntil > Date.now(),
+		isOpen,
+		isSubmitting,
+		message,
+		open,
+		removeCapture,
+		selectElement,
+		selection,
+		setAnnotations,
+		setCategory,
+		setEmail,
+		setHoneypot,
+		setMessage,
+		setStep,
+		step,
+		submit,
+		takeCapture
+	};
+}
+//#endregion
+//#region src/feedback/widget.tsx
+const DEFAULT_CATEGORIES = [
+	"bug",
+	"idea",
+	"question"
+];
+const DEFAULT_OFFSET = 20;
+/**
+* Floating feedback button with a screenshot, annotation and element picker
+* flow. Mount it once, anywhere below `RefletProvider` or with its own
+* `publicKey`.
+*/
+function RefletFeedback(props) {
+	const { categories = DEFAULT_CATEGORIES, enabled = true, hotkey = null, offset = DEFAULT_OFFSET, position = "bottom-right", theme = "auto" } = props;
+	const labels = {
+		...DEFAULT_WIDGET_LABELS,
+		...props.labels
+	};
+	const state = useWidgetState(props);
+	const { close, isOpen, open } = state;
+	useEffect(() => {
+		if (!(hotkey && enabled)) return;
+		const onKeyDown = (event) => {
+			if (matchesHotkey(event, hotkey)) {
+				event.preventDefault();
+				if (isOpen) close();
+				else open();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		close,
+		enabled,
+		hotkey,
+		isOpen,
+		open
+	]);
+	useEffect(() => {
+		if (!isOpen || state.step !== "compose") return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") close();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		close,
+		isOpen,
+		state.step
+	]);
+	if (!enabled || state.isDismissed) return null;
+	const showPanel = isOpen && state.step !== "picking" && state.step !== "annotate";
+	return /* @__PURE__ */ jsxs(ShadowPortal, {
+		offset,
+		primaryColor: props.primaryColor,
+		theme,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "root",
+				"data-position": position,
+				children: [showPanel && /* @__PURE__ */ jsx(FeedbackPanel, {
+					categories,
+					labels,
+					state
+				}), /* @__PURE__ */ jsx(Launcher, {
+					isOpen,
+					label: labels.trigger,
+					onClick: isOpen ? close : open
+				})]
+			}),
+			isOpen && state.step === "annotate" && state.capture && /* @__PURE__ */ jsx(Annotator, {
+				annotations: state.annotations,
+				capture: state.capture,
+				labels,
+				onChange: state.setAnnotations,
+				onDone: () => state.setStep("compose")
+			}),
+			isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
+				hint: labels.pickElementHint,
+				onCancel: () => state.setStep("compose"),
+				onPick: state.selectElement
+			})
+		]
+	});
+}
+//#endregion
+export { RefletFeedback, buildElementSelection, captureViewport, collectPageContext, releaseCapture };
+
+//# sourceMappingURL=feedback.js.map