reflet-sdk 0.1.5 → 0.2.0

package/dist/feedback.js

@@ -0,0 +1,2276 @@
+"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 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;
+}
+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);
+	if (!name || name.length < 2) return null;
+	return name[0] === name[0]?.toUpperCase() || name.includes("/") ? 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/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_DEPTH = 12;
+const MAX_SELECTOR_LENGTH = 600;
+const MAX_SOURCE_LOCATION_LENGTH = 400;
+function isUnique(selector) {
+	try {
+		return document.querySelectorAll(selector).length === 1;
+	} catch {
+		return false;
+	}
+}
+function escapeAttributeValue(value) {
+	return value.replace(/["\\]/g, "\\$&");
+}
+function uniqueHandle(element) {
+	const id = element.getAttribute("id");
+	if (id && SAFE_ID.test(id) && isUnique(`#${id}`)) return `#${id}`;
+	const testId = element.getAttribute("data-testid");
+	if (testId) {
+		const selector = `[data-testid="${escapeAttributeValue(testId)}"]`;
+		if (isUnique(selector)) return selector;
+	}
+	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.
+*/
+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;
+	let depth = 0;
+	while (current && depth < MAX_DEPTH) {
+		if (current === document.body) {
+			segments.unshift("body");
+			break;
+		}
+		if (current === document.documentElement) {
+			segments.unshift("html");
+			break;
+		}
+		const ancestorHandle = current === element ? null : uniqueHandle(current);
+		if (ancestorHandle) {
+			segments.unshift(ancestorHandle);
+			break;
+		}
+		segments.unshift(positionalSegment(current));
+		current = current.parentElement;
+		depth++;
+	}
+	return segments.join(" > ");
+}
+function truncate(value, max) {
+	return value.length <= max ? value : `${value.slice(0, max - 1)}…`;
+}
+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 (element.textContent ?? "").replace(WHITESPACE, " ").trim();
+}
+/** Short human label such as `button "Sign in"` or `div.card`. */
+function describeElement(element) {
+	const tag = element.localName;
+	const label = 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 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: truncate(element.outerHTML, MAX_HTML_LENGTH),
+		label: describeElement(element),
+		rect: getElementRect(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. Keep in sync with package.json on release. */
+const SDK_VERSION = "0.2.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, size = 16 }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		height: size,
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.8",
+		viewBox: "0 0 24 24",
+		width: size,
+		children
+	});
+}
+function ChatIcon() {
+	return /* @__PURE__ */ jsx(Svg, {
+		size: 18,
+		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() {
+	return /* @__PURE__ */ jsx(Svg, { 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
+function Launcher({ compact, isOpen, label, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-expanded": isOpen,
+		"aria-label": label,
+		className: "launcher",
+		"data-compact": compact || isOpen ? "true" : "false",
+		onClick,
+		type: "button",
+		children: [isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}), !(compact || isOpen) && 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: "attachment",
+		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: "attachment",
+		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", { children: labels.retakeHint }), /* @__PURE__ */ jsxs("span", { 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, {})
+					})
+				]
+			})
+		]
+	});
+}
+function SelectionChip({ labels, state }) {
+	const { 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("span", {
+		className: "chip",
+		children: [
+			/* @__PURE__ */ jsx(TargetIcon, {}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "truncate",
+				children: [
+					component ? /* @__PURE__ */ jsx("strong", { children: `<${component}>` }) : selection.label,
+					" ",
+					/* @__PURE__ */ jsx("code", { children: selection.sourceLocation ?? selection.selector })
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": labels.cancel,
+				className: "icon-btn",
+				onClick: state.clearSelection,
+				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__ */ jsx(Attachment, {
+						labels,
+						state
+					}),
+					/* @__PURE__ */ jsx(SelectionChip, {
+						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 = 28;
+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],
+		label: describeElement(element),
+		rect: element.getBoundingClientRect(),
+		selector: buildSelector(element)
+	};
+}
+/**
+* Points at any element in the page the way a coding agent needs it: the React
+* component that owns it plus a selector that resolves back to it.
+*/
+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);
+			setTarget(element ? describeTarget(element) : null);
+		};
+		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 > 34 : 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: [target.componentName ? /* @__PURE__ */ jsx("strong", { children: `<${target.componentName}>` }) : /* @__PURE__ */ jsx("strong", { children: target.label }), /* @__PURE__ */ jsx("code", { children: target.selector })]
+		}),
+		/* @__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: #f6f7f9;
+  --rf-border: #e4e6eb;
+  --rf-text: #16181d;
+  --rf-text-muted: #6b7280;
+  --rf-primary: #4f46e5;
+  --rf-primary-text: #ffffff;
+  --rf-danger: #dc2626;
+  --rf-success: #16a34a;
+  --rf-radius: 14px;
+  --rf-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 12px 32px -8px rgb(16 24 40 / 18%);
+  --rf-ring: 0 0 0 3px color-mix(in srgb, var(--rf-primary) 28%, transparent);
+  --rf-ease: cubic-bezier(0.32, 0.72, 0, 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: #17181c;
+  --rf-bg-subtle: #212228;
+  --rf-border: #2e3038;
+  --rf-text: #f3f4f6;
+  --rf-text-muted: #9aa1ad;
+  --rf-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px -12px rgb(0 0 0 / 60%);
+  color-scheme: dark;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.root {
+  position: fixed;
+  z-index: 2147483000;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--rf-text);
+}
+
+.root[data-position="bottom-right"] { bottom: var(--rf-offset); right: var(--rf-offset); align-items: flex-end; }
+.root[data-position="bottom-left"] { bottom: var(--rf-offset); left: var(--rf-offset); align-items: flex-start; }
+.root[data-position="top-right"] { top: var(--rf-offset); right: var(--rf-offset); align-items: flex-end; }
+.root[data-position="top-left"] { top: var(--rf-offset); left: var(--rf-offset); align-items: flex-start; }
+
+.stack { display: flex; flex-direction: column; gap: 12px; }
+.root[data-position^="top"] .stack { 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: 8px;
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  background: var(--rf-primary);
+  color: var(--rf-primary-text);
+  font-weight: 550;
+  box-shadow: var(--rf-shadow);
+  transition: transform 160ms var(--rf-ease), filter 160ms var(--rf-ease);
+}
+.launcher:hover { transform: translateY(-1px); filter: brightness(1.06); }
+.launcher:active { transform: translateY(0) scale(0.97); }
+.launcher[data-compact="true"] { width: 44px; padding: 0; justify-content: center; }
+
+.panel {
+  width: min(384px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 96px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--rf-bg);
+  border: 1px solid var(--rf-border);
+  border-radius: var(--rf-radius);
+  box-shadow: var(--rf-shadow);
+  animation: rf-in 220ms var(--rf-ease);
+}
+
+@keyframes rf-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel, .launcher { animation: none; transition: none; }
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 14px 10px;
+}
+.head h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.head .spacer { flex: 1; }
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  color: var(--rf-text-muted);
+  transition: background 120ms var(--rf-ease), color 120ms var(--rf-ease);
+}
+.icon-btn:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
+
+.body { display: flex; flex-direction: column; gap: 12px; padding: 0 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: 4px;
+  padding: 4px;
+  background: var(--rf-bg-subtle);
+  border-radius: 10px;
+}
+.segmented button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rf-text-muted);
+  transition: background 140ms var(--rf-ease), color 140ms var(--rf-ease);
+}
+.segmented button[aria-pressed="true"] {
+  background: var(--rf-bg);
+  color: var(--rf-text);
+  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
+}
+
+textarea, input[type="email"] {
+  width: 100%;
+  padding: 10px 12px;
+  font: inherit;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border: 1px solid var(--rf-border);
+  border-radius: 10px;
+  transition: border-color 140ms var(--rf-ease), box-shadow 140ms var(--rf-ease);
+}
+textarea { min-height: 92px; max-height: 220px; resize: none; }
+textarea::placeholder, input::placeholder { color: var(--rf-text-muted); }
+textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); box-shadow: var(--rf-ring); }
+
+.attachment {
+  display: flex;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--rf-border);
+  border-radius: 10px;
+  background: var(--rf-bg-subtle);
+}
+.thumb {
+  position: relative;
+  flex: 0 0 84px;
+  height: 56px;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--rf-border);
+  background: var(--rf-bg);
+}
+.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
+.attachment .meta { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
+.attachment .meta strong { font-size: 12.5px; font-weight: 550; }
+.attachment .meta span { font-size: 12px; color: var(--rf-text-muted); }
+.attachment .actions { display: flex; gap: 4px; margin-left: auto; align-items: center; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 5px 8px;
+  font-size: 12px;
+  border: 1px solid var(--rf-border);
+  border-radius: 8px;
+  background: var(--rf-bg-subtle);
+  color: var(--rf-text-muted);
+}
+.chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--rf-text); }
+.chip .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.row { display: flex; gap: 8px; align-items: center; }
+.ghost-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rf-text-muted);
+  border: 1px solid var(--rf-border);
+  border-radius: 9px;
+  transition: background 140ms var(--rf-ease), color 140ms 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: 38px;
+  font-weight: 550;
+  color: var(--rf-primary-text);
+  background: var(--rf-primary);
+  border-radius: 10px;
+  transition: filter 140ms var(--rf-ease);
+}
+.submit:hover:not(:disabled) { filter: brightness(1.06); }
+.submit:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.error { margin: 0; font-size: 12.5px; color: var(--rf-danger); }
+.hint { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
+
+.footer {
+  min-height: 44px;
+  padding: 0 14px;
+  border-top: 1px solid var(--rf-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 11.5px;
+  color: var(--rf-text-muted);
+}
+.footer[data-dismissible="true"] { justify-content: space-between; }
+.footer a { color: inherit; text-decoration: none; font-weight: 550; }
+.footer a:hover { color: var(--rf-text); }
+.dismiss-btn {
+  align-self: stretch;
+  color: inherit;
+  font-size: 11.5px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.dismiss-btn:hover { color: var(--rf-text); }
+
+.done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px 36px; text-align: center; }
+.done svg { color: var(--rf-success); }
+.done h2 { margin: 0; font-size: 15px; }
+.done p { margin: 0; font-size: 13px; color: var(--rf-text-muted); }
+
+.spinner {
+  width: 15px;
+  height: 15px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  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(9 10 13 / 78%);
+  backdrop-filter: blur(2px);
+}
+
+.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: 8px;
+  box-shadow: 0 24px 60px -12px rgb(0 0 0 / 60%);
+  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: 4px;
+  padding: 5px;
+  background: var(--rf-bg);
+  border: 1px solid var(--rf-border);
+  border-radius: 12px;
+  box-shadow: var(--rf-shadow);
+}
+.tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  color: var(--rf-text-muted);
+  transition: background 140ms var(--rf-ease), color 140ms var(--rf-ease);
+}
+.tool:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
+.tool[aria-pressed="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
+.swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: transform 140ms var(--rf-ease);
+}
+.swatch[aria-pressed="true"] { border-color: var(--rf-text); transform: scale(1.12); }
+.toolbar .done-btn {
+  height: 34px;
+  padding: 0 14px;
+  font-weight: 550;
+  border-radius: 8px;
+  color: var(--rf-primary-text);
+  background: var(--rf-primary);
+}
+
+.picker { position: fixed; inset: 0; z-index: 2147483002; cursor: crosshair; }
+.picker-box {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid var(--rf-primary);
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--rf-primary) 12%, transparent);
+  transition: all 90ms var(--rf-ease);
+}
+.picker-label {
+  position: fixed;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(420px, 90vw);
+  padding: 5px 9px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rf-primary-text);
+  background: var(--rf-primary);
+  border-radius: 7px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.picker-label code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.82; }
+.picker-hint {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  padding: 9px 14px;
+  font-size: 13px;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border: 1px solid var(--rf-border);
+  border-radius: 10px;
+  box-shadow: var(--rf-shadow);
+}
+.picker-hint kbd {
+  padding: 1px 5px;
+  font: inherit;
+  font-size: 11.5px;
+  border: 1px solid var(--rf-border);
+  border-radius: 4px;
+  background: var(--rf-bg-subtle);
+}
+@media (pointer: coarse) {
+  .icon-btn, .tool, .swatch {
+    width: 44px;
+    height: 44px;
+  }
+
+  .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 attachScreenshot(transport, feedbackId, submission) {
+	const { annotated, annotations, context, screenshot } = submission;
+	if (!screenshot) return false;
+	const original = await transport.getScreenshotUploadUrl();
+	const storageId = await transport.uploadImage(original.uploadUrl, screenshot);
+	let annotatedStorageId;
+	if (annotated) {
+		const target = await transport.getScreenshotUploadUrl();
+		annotatedStorageId = await transport.uploadImage(target.uploadUrl, annotated);
+	}
+	const wireAnnotations = toWireAnnotations(annotations);
+	await transport.saveScreenshot({
+		annotatedStorageId,
+		annotations: wireAnnotations.length > 0 ? wireAnnotations : void 0,
+		feedbackId,
+		filename: "screenshot.png",
+		height: screenshot.height,
+		mimeType: screenshot.mimeType,
+		pageUrl: context.url,
+		size: screenshot.blob.size,
+		storageId,
+		width: screenshot.width
+	});
+	return true;
+}
+/**
+* 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
+	});
+	let screenshotSaved = false;
+	try {
+		screenshotSaved = await attachScreenshot(transport, feedbackId, submission);
+	} catch {
+		screenshotSaved = false;
+	}
+	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 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"
+	};
+}
+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, setCapture] = useState(null);
+	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 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]);
+	useEffect(() => () => {
+		releaseCapture(captureRef.current);
+	}, []);
+	const replaceCapture = useCallback((next) => {
+		releaseCapture(captureRef.current);
+		setCapture(next);
+	}, []);
+	const takeCapture = useCallback((element) => {
+		setIsCapturing(true);
+		captureViewport({ element }).catch(() => null).then((image) => {
+			setIsCapturing(false);
+			replaceCapture(image);
+		});
+	}, [replaceCapture]);
+	const reset = useCallback(() => {
+		releaseCapture(captureRef.current);
+		setCapture(null);
+		setAnnotations([]);
+		setSelection(null);
+		setMessage("");
+		setEmail("");
+		setHoneypot("");
+		setError(null);
+		setStep("compose");
+		setCategory(props.defaultCategory ?? "bug");
+	}, [props.defaultCategory]);
+	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 clearSelection = useCallback(() => {
+		setSelection(null);
+		setAnnotations((previous) => previous.filter((item) => !item.id.startsWith("selection-")));
+	}, []);
+	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
+				},
+				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,
+		email,
+		honeypot,
+		isAnonymous,
+		message,
+		props.metadata,
+		props.onSubmit,
+		selection
+	]);
+	return {
+		annotations,
+		canDismiss: dismissForDays !== null,
+		capture,
+		category,
+		clearSelection,
+		close,
+		dismiss,
+		dismissForDays,
+		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__ */ jsx("div", {
+				className: "root",
+				"data-position": position,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "stack",
+					children: [showPanel && /* @__PURE__ */ jsx(FeedbackPanel, {
+						categories,
+						labels,
+						state
+					}), /* @__PURE__ */ jsx(Launcher, {
+						compact: isOpen,
+						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