@nuniapp/widget 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,43 +1,4 @@
-//#region ../shared/src/id.ts
-const ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
-const PROJECT_ID_PATTERN = new RegExp(`^nuni_[${ALPHABET}]{22}$`);
-/** Random base58 string using the platform CSPRNG (browser, Node, Convex). */
-function randomBase58(length) {
-	const bytes = new Uint8Array(length);
-	crypto.getRandomValues(bytes);
-	let out = "";
-	for (const byte of bytes) {
-		let b = byte;
-		while (b >= 232) {
-			const retry = /* @__PURE__ */ new Uint8Array(1);
-			crypto.getRandomValues(retry);
-			b = retry[0];
-		}
-		out += ALPHABET[b % 58];
-	}
-	return out;
-}
-function isProjectId(value) {
-	return typeof value === "string" && PROJECT_ID_PATTERN.test(value);
-}
-/** Secret used by anonymous commenters to edit/delete their own comments. */
-function generateSecret() {
-	return randomBase58(32);
-}
-//#endregion
-//#region ../shared/src/limits.ts
-const LIMITS = {
-	bodyMaxLength: 2e3,
-	nameMaxLength: 50,
-	unclaimedCommentCap: 500,
-	maxOriginsPerProject: 20,
-	sessionTtlMs: 2592e6,
-	anchorTextMaxLength: 120,
-	/** Per page, the widget loads this many newest open and resolved comments. */
-	pageOpenLimit: 1e3,
-	pageResolvedLimit: 200
-};
-//#endregion
+import { a as REACTIONS, i as LIMITS, n as MASK_ATTRIBUTE, o as generateSecret, r as MASK_SELECTOR, s as isProjectId, t as CAPTURE_MARK } from "./mark-B8wojiFu.js";
 //#region ../shared/src/path.ts
 /**
 * Normalize a URL to the key comments are matched by. Query and hash are
@@ -71,16 +32,472 @@ function describeLocation(input) {
 		url: url.href
 	};
 }
+/** URL that opens the page with the comment focused by the widget. */
+function commentUrl(page, id) {
+	const [pathname, hashRoute] = page.path.split("#");
+	const origin = new URL(page.origin).origin;
+	let url = new URL(pathname ?? "/", origin);
+	if (url.origin !== origin) url = new URL("/", origin);
+	const params = new URLSearchParams(page.search ?? "");
+	params.set("nuni", id);
+	url.search = params.toString();
+	if (hashRoute) url.hash = hashRoute;
+	return url.toString();
+}
+/** Origin + path only: query strings and hashes often carry tokens. */
+function withoutQuery(input, base) {
+	try {
+		const url = new URL(input, base);
+		return `${url.origin}${url.pathname}`;
+	} catch {
+		return input.split(/[?#]/)[0] ?? "";
+	}
+}
+/**
+* Cut a word of free text at the query or hash of the URL in it: after a
+* path ("/reset?token=1", "https://a.com/x#t") or before a key=value pair
+* ("?token=1", "#access_token=1"). One pass, so long words stay cheap.
+*/
+function stripWord(word) {
+	const slash = word.indexOf("/");
+	const equals = word.lastIndexOf("=");
+	for (let i = 0; i < word.length - 1; i++) {
+		const c = word[i];
+		if ((c === "?" || c === "#") && (slash >= 0 && slash < i || equals > i)) return word.slice(0, i);
+	}
+	return word;
+}
+/**
+* Remove query strings and hashes from every URL inside free text (log
+* lines, markup, CSS values), absolute or relative.
+*/
+function stripUrlQueries(text) {
+	return text.replace(/[^\s"'<>`]+/g, stripWord);
+}
+const ATTRIBUTE = /(\s([^\s"'<>/=]+)\s*=\s*)("[^"]*"|'[^']*')/g;
+/** Attributes that hold URLs, including lazy-loading ones like data-src. */
+const URL_ATTRIBUTE = /^(?:action|formaction|poster|cite|ping|data|background|(?:[\w-]*[-:])?(?:href|src|srcset|url|uri))$/i;
+/**
+* Remove query strings and hashes from serialized HTML: URL attributes
+* (links, images, srcset lists, data-src) always, relative or absolute,
+* and URLs anywhere else (inline styles, other attributes, text).
+*/
+function stripHtmlUrlQueries(html) {
+	return stripUrlQueries(html.replace(ATTRIBUTE, (all, prefix, name, quoted) => {
+		if (!URL_ATTRIBUTE.test(name)) return all;
+		const quote = quoted[0];
+		const value = quoted.slice(1, -1);
+		return `${prefix}${quote}${/srcset$/i.test(name) ? value.replace(/[?#][^\s,]*/g, "") : value.replace(/[?#][\s\S]*$/, "")}${quote}`;
+	}));
+}
+//#endregion
+//#region ../shared/src/prompt.ts
+const PACKAGES = {
+	widget: "@nuniapp/widget",
+	react: "@nuniapp/react",
+	cli: "@nuniapp/cli"
+};
+//#endregion
+//#region ../shared/src/comment-prompt.ts
+/** A code fence longer than any backtick run inside `content`. */
+function fence(content, lang = "") {
+	const longest = Math.max(0, ...Array.from(content.matchAll(/`+/g), (m) => m[0].length));
+	const ticks = "`".repeat(Math.max(3, longest + 1));
+	return `${ticks}${lang}\n${content}\n${ticks}`;
+}
+function quote(text) {
+	return text.split("\n").map((line) => line ? `> ${line}` : ">").join("\n");
+}
+function inline(text) {
+	const clean = text.replace(/\s+/g, " ").trim();
+	return clean.includes("`") ? `"${clean}"` : `\`${clean}\``;
+}
+/**
+* One comment as a ready-to-paste task for a coding agent. Single source of
+* truth for the widget, dashboard, CLI and MCP server.
+*/
+function buildCommentPrompt(comment, options = {}) {
+	const includeContext = options.includeContext ?? true;
+	const { anchor, page } = comment;
+	const out = [];
+	out.push("Fix this piece of feedback that was left on the live site with Nuni.", "", "## Comment", "", quote(comment.body), "", `From ${comment.authorName} on ${new Date(comment.createdAt).toISOString().slice(0, 10)}` + (comment.status === "resolved" ? " (already resolved)" : ""));
+	if (comment.replies?.length) {
+		out.push("", `## Replies (${comment.replies.length})`, "");
+		for (const reply of comment.replies) out.push(`${reply.authorName}${reply.isOwner ? " (owner)" : ""}:`, quote(reply.body), "");
+		out.pop();
+	}
+	out.push("", "## Where", "");
+	out.push(`- Page: ${page.title ? `${page.title} ` : ""}(${page.path})`);
+	out.push(`- Open it: ${commentUrl(page, comment._id)}`);
+	out.push(`- Viewport: ${comment.viewport.w}×${comment.viewport.h} at ${comment.viewport.dpr}x`);
+	if (includeContext && comment.userAgent) out.push(`- Browser: ${comment.userAgent}`);
+	out.push("", "## Element", "");
+	out.push(`- Tag: <${anchor.tag}>`);
+	if (anchor.text) out.push(`- Text: ${inline(anchor.text)}`);
+	if (anchor.quote) out.push(`- Selected text: ${inline(anchor.quote.exact)}`);
+	if (anchor.region) {
+		const pct = (n) => `${Math.round(n * 100)}%`;
+		const r = anchor.region;
+		out.push(`- Area: ${pct(r.w)} × ${pct(r.h)} of the element, from ${pct(r.x)} left and ${pct(r.y)} top`);
+	}
+	if (anchor.componentName) out.push(`- React component: ${anchor.componentName}`);
+	if (anchor.selectors.testId) out.push(`- Test ID: ${inline(anchor.selectors.testId)}`);
+	if (anchor.selectors.id) out.push(`- ID: ${inline(anchor.selectors.id)}`);
+	if (anchor.selectors.css) out.push(`- CSS selector: ${inline(anchor.selectors.css)}`);
+	out.push(`- DOM path: ${inline(anchor.selectors.path)}`);
+	const labels = Object.entries(anchor.attrs).filter(([name]) => name !== "class" && name !== "style").map(([name, value]) => `${name}="${value}"`);
+	if (labels.length) out.push(`- Attributes: ${inline(labels.join(" "))}`);
+	const context = includeContext ? comment.context : void 0;
+	if (context?.dom?.html) out.push("", fence(context.dom.html, "html"));
+	const styles = Object.entries(context?.dom?.styles ?? {});
+	if (styles.length) out.push("", "Computed styles:", "", fence(styles.map(([k, v]) => `${k}: ${v};`).join("\n"), "css"));
+	if (context?.console?.length) {
+		out.push("", `## Console (${context.console.length})`, "");
+		out.push(fence(context.console.map((e) => `[${e.level}] ${e.message}`).join("\n"), "text"));
+	}
+	if (context?.network?.length) {
+		out.push("", `## Failed requests (${context.network.length})`, "");
+		for (const r of context.network) out.push(`- ${r.method} ${r.url} → ${r.status === 0 ? "network error" : r.status}`);
+	}
+	if (includeContext && comment.screenshotUrl) out.push("", "## Screenshot", "", comment.screenshotUrl);
+	out.push("", "## Steps", "", "1. Find the code that renders this element. Search for the text, the component name, the test ID or the selector.", "2. Make the change the comment asks for, and keep the fix focused on it.", "3. Tell me what you changed, so the comment can be resolved in Nuni.", `   If the Nuni CLI is signed in to this project (\`npx ${PACKAGES.cli}@latest login\`), resolve it with \`npx ${PACKAGES.cli}@latest resolve ${comment._id}\` or the \`resolve_comment\` MCP tool.`);
+	return out.join("\n");
+}
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.3";
+const VERSION = "0.1.5";
 function resolveConfig(options) {
 	return {
 		project: options.project,
 		convexUrl: options.convexUrl ?? "https://greedy-giraffe-33.convex.cloud",
 		convexSiteUrl: options.convexSiteUrl ?? "https://greedy-giraffe-33.convex.site",
 		appUrl: (options.appUrl ?? "https://nuni.praveenjuge.com").replace(/\/$/, ""),
-		getPageKey: options.getPageKey
+		getPageKey: options.getPageKey ?? pageKeyFor(options.pageKey),
+		position: oneOf(options.position, POSITIONS, "bottom-right"),
+		accentColor: options.accentColor?.trim() || null,
+		theme: oneOf(options.theme, THEMES, "auto"),
+		label: options.label?.trim() || null,
+		hotkey: options.hotkey === false ? null : options.hotkey?.trim().slice(0, 1).toLowerCase() || "c",
+		zIndex: typeof options.zIndex === "number" && Number.isFinite(options.zIndex) ? Math.round(options.zIndex) : null,
+		locale: options.locale?.trim() || void 0,
+		messages: options.messages ?? {},
+		capture: {
+			console: options.capture?.console ?? true,
+			network: options.capture?.network ?? true,
+			dom: options.capture?.dom ?? true,
+			screenshot: options.capture?.screenshot ?? true
+		}
+	};
+}
+const POSITIONS = [
+	"bottom-right",
+	"bottom-left",
+	"top-right",
+	"top-left"
+];
+const THEMES = [
+	"auto",
+	"light",
+	"dark"
+];
+function oneOf(value, allowed, fallback) {
+	return allowed.includes(value) ? value : fallback;
+}
+/** Query parameters that never tell pages apart. */
+const IGNORED_PARAMS = /^(nuni|utm_.*|fbclid|gclid|msclkid|ref)$/i;
+function pageKeyFor(preset = "path") {
+	return (url) => {
+		const path = normalizePath(url);
+		if (preset === "path+search") {
+			const params = [...url.searchParams].filter(([name]) => !IGNORED_PARAMS.test(name)).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
+			return params.length ? `${path}?${new URLSearchParams(params).toString()}` : path;
+		}
+		if (preset === "path+hash" && url.hash.length > 1 && !path.includes("#")) {
+			if (!/^#!?\//.test(url.hash)) return `${path}${url.hash}`;
+		}
+		return path;
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.151.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region src/context.ts
+const MESSAGE_MAX = LIMITS.contextMessageMaxLength;
+function describeValue(value) {
+	if (typeof value === "string") return value;
+	if (value instanceof Error) {
+		const frame = value.stack?.split("\n").find((line) => line.trim().startsWith("at "));
+		return `${value.name}: ${value.message}${frame ? ` (${frame.trim()})` : ""}`;
+	}
+	try {
+		let budget = 200;
+		return JSON.stringify(value, (_key, v) => budget-- > 0 ? v : void 0) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+function clip(text) {
+	return text.length > MESSAGE_MAX ? `${text.slice(0, MESSAGE_MAX - 1)}…` : text;
+}
+/** Origin + path only: query strings and hashes often carry tokens. */
+function safeUrl(input) {
+	return clip(withoutQuery(input, location.href));
+}
+var Ring = class {
+	constructor() {
+		_defineProperty(this, "items", []);
+	}
+	push(item) {
+		this.items.push(item);
+		if (this.items.length > LIMITS.contextEntryMax) this.items.shift();
+	}
+};
+/**
+* Keep the latest console errors and failed requests, so a comment can carry
+* what went wrong on the page. Installed once per mount, removed on destroy.
+* `ignore` skips Nuni's own traffic.
+*/
+function startCollectors(options, ignore) {
+	const logs = new Ring();
+	const requests = new Ring();
+	const undo = [];
+	const log = (level, args) => {
+		logs.push({
+			level,
+			message: clip(stripUrlQueries(args.map(describeValue).join(" "))),
+			at: Date.now()
+		});
+	};
+	const failed = (method, url, status) => {
+		if (ignore(url)) return;
+		requests.push({
+			method: method.toUpperCase(),
+			url: safeUrl(url),
+			status,
+			at: Date.now()
+		});
+	};
+	if (options.console) {
+		for (const level of ["error", "warn"]) {
+			const original = console[level];
+			const wrapped = (...args) => {
+				log(level, args);
+				original.apply(console, args);
+			};
+			console[level] = wrapped;
+			undo.push(() => {
+				if (console[level] === wrapped) console[level] = original;
+			});
+		}
+		const onError = (e) => {
+			if (e.error) log("error", [e.error]);
+			else log("error", [`${e.message}${e.filename ? ` (${safeUrl(e.filename)}:${e.lineno})` : ""}`]);
+		};
+		const onRejection = (e) => log("error", ["Unhandled rejection:", e.reason]);
+		window.addEventListener("error", onError);
+		window.addEventListener("unhandledrejection", onRejection);
+		undo.push(() => {
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		});
+	}
+	if (options.network) {
+		const originalFetch = window.fetch;
+		if (typeof originalFetch === "function") {
+			const wrappedFetch = async (input, init) => {
+				if (init && init[CAPTURE_MARK]) return originalFetch.call(window, input, init);
+				const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+				const method = init?.method ?? (typeof input === "object" && "method" in input ? input.method : "GET");
+				try {
+					const response = await originalFetch.call(window, input, init);
+					if (!response.ok && response.type !== "opaque") failed(method, url, response.status);
+					return response;
+				} catch (error) {
+					if (!(error instanceof DOMException && error.name === "AbortError")) failed(method, url, 0);
+					throw error;
+				}
+			};
+			window.fetch = wrappedFetch;
+			undo.push(() => {
+				if (window.fetch === wrappedFetch) window.fetch = originalFetch;
+			});
+		}
+		const proto = window.XMLHttpRequest?.prototype;
+		if (proto) {
+			const open = proto.open;
+			const send = proto.send;
+			const info = /* @__PURE__ */ new WeakMap();
+			const wrappedOpen = function(method, url, ...rest) {
+				info.set(this, {
+					method,
+					url: String(url)
+				});
+				return open.call(this, method, url, ...rest);
+			};
+			proto.open = wrappedOpen;
+			const wrappedSend = function(body) {
+				const request = info.get(this);
+				if (request) {
+					let aborted = false;
+					const onAbort = () => aborted = true;
+					const onEnd = () => {
+						this.removeEventListener("abort", onAbort);
+						this.removeEventListener("loadend", onEnd);
+						if (!aborted && (this.status === 0 || this.status >= 400)) failed(request.method, request.url, this.status);
+					};
+					this.addEventListener("abort", onAbort);
+					this.addEventListener("loadend", onEnd);
+				}
+				return send.call(this, body);
+			};
+			proto.send = wrappedSend;
+			undo.push(() => {
+				if (proto.open === wrappedOpen) proto.open = open;
+				if (proto.send === wrappedSend) proto.send = send;
+			});
+		}
+	}
+	return {
+		console: () => [...logs.items],
+		network: () => [...requests.items],
+		stop() {
+			for (const fn of undo.splice(0)) fn();
+		}
+	};
+}
+const STYLE_PROPS = [
+	"display",
+	"position",
+	"width",
+	"height",
+	"margin",
+	"padding",
+	"gap",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"line-height",
+	"letter-spacing",
+	"text-align",
+	"color",
+	"background-color",
+	"border",
+	"border-radius",
+	"box-shadow",
+	"opacity"
+];
+const ATTR_MAX = 200;
+const TEXT_MAX = 200;
+/** Replace an element's contents with a short note. */
+function redact(el, note) {
+	el.replaceChildren(el.ownerDocument.createComment(` ${note} `));
+}
+/**
+* Remove what should never leave the page (form values, option lists and
+* masked areas) and trim the rest.
+*/
+function scrub(root) {
+	const walker = root.ownerDocument.createTreeWalker(root, 5);
+	const drop = [];
+	for (let node = root; node; node = walker.nextNode()) {
+		if (node.nodeType === 3) {
+			const text = node.textContent ?? "";
+			if (text.length > TEXT_MAX) node.textContent = `${text.slice(0, TEXT_MAX)}…`;
+			continue;
+		}
+		const el = node;
+		const tag = el.tagName;
+		if (tag === "SCRIPT" || tag === "STYLE" || tag === "NOSCRIPT") {
+			drop.push(el);
+			continue;
+		}
+		if (el.hasAttribute("data-nuni-mask")) {
+			for (const attr of Array.from(el.attributes)) if (attr.name !== "id" && attr.name !== "class" && attr.name !== "data-nuni-mask") el.removeAttribute(attr.name);
+			redact(el, "masked");
+			continue;
+		}
+		if (tag === "INPUT" || tag === "TEXTAREA") {
+			el.removeAttribute("value");
+			if (tag === "TEXTAREA") el.textContent = "";
+		}
+		if (tag === "SELECT" || tag === "DATALIST") {
+			const count = el.getElementsByTagName("option").length;
+			redact(el, `${count} options`);
+		}
+		for (const attr of Array.from(el.attributes)) if (attr.value.length > ATTR_MAX) el.setAttribute(attr.name, `${attr.value.slice(0, ATTR_MAX)}…`);
+	}
+	for (const node of drop) node.parentNode?.removeChild(node);
+}
+/** Clone at most `depth` levels of children. */
+function shallowClone(el, depth) {
+	const copy = el.cloneNode(false);
+	if (depth > 0) for (const child of Array.from(el.childNodes)) copy.appendChild(child.nodeType === 1 ? shallowClone(child, depth - 1) : child.cloneNode(false));
+	else if (el.childElementCount) copy.appendChild(el.ownerDocument.createComment(` ${el.childElementCount} more `));
+	return copy;
+}
+/** The element's markup and key computed styles, for design feedback. */
+function domContext(el) {
+	const max = LIMITS.domSnippetMaxLength;
+	let html = "";
+	const inMasked = Boolean(el.parentElement?.closest(`[${MASK_ATTRIBUTE}]`));
+	for (const depth of inMasked ? [-1] : [
+		Infinity,
+		3,
+		1,
+		0
+	]) {
+		const copy = depth === Infinity ? el.cloneNode(true) : shallowClone(el, Math.max(0, depth));
+		if (depth < 0) copy.setAttribute(MASK_ATTRIBUTE, "");
+		scrub(copy);
+		html = stripHtmlUrlQueries(copy.outerHTML);
+		if (html.length <= max) break;
+	}
+	if (html.length > max) html = `${html.slice(0, max - 1)}…`;
+	const styles = {};
+	const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
+	for (const prop of STYLE_PROPS) {
+		const value = computed?.getPropertyValue(prop).trim();
+		if (value) styles[prop] = value;
+	}
+	return {
+		html,
+		styles
 	};
 }
 //#endregion
@@ -151,6 +568,463 @@ function attributeAllowed(name, options) {
 	return !prefixes || !prefixes.some((p) => name.startsWith(p));
 }
 //#endregion
+//#region ../anchor/src/text.ts
+const SKIP_TEXT_TAGS = /* @__PURE__ */ new Set([
+	"SCRIPT",
+	"STYLE",
+	"NOSCRIPT",
+	"TEMPLATE",
+	"SVG"
+]);
+function normalizeText(value) {
+	return value.replace(/\s+/g, " ").trim();
+}
+/**
+* Visible-ish text of an element, whitespace-normalized and truncated.
+* Areas marked data-nuni-mask count as empty, both when capturing and when
+* resolving, so their (private) text is never stored and matching stays
+* consistent.
+*/
+function elementText(el, max = 120) {
+	if (el.closest(MASK_SELECTOR)) return "";
+	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") return normalizeText(el.placeholder || el.getAttribute("aria-label") || "").slice(0, max);
+	let out = "";
+	const walk = (node) => {
+		if (out.length > max * 2) return;
+		if (node.nodeType === 3) {
+			out += node.nodeValue ?? "";
+			return;
+		}
+		if (node.nodeType !== 1) return;
+		const tag = node.tagName.toUpperCase();
+		if (SKIP_TEXT_TAGS.has(tag)) return;
+		if (node.hasAttribute("data-nuni-mask")) return;
+		if (node.hasAttribute("data-nuni")) return;
+		if (tag === "IMG") {
+			out += " " + (node.getAttribute("alt") ?? "") + " ";
+			return;
+		}
+		const shadow = node.shadowRoot;
+		if (shadow) {
+			for (const child of Array.from(shadow.childNodes)) walk(child);
+			return;
+		}
+		if (tag === "SLOT") {
+			const assigned = node.assignedNodes?.({ flatten: true });
+			if (assigned?.length) {
+				for (const child of assigned) walk(child);
+				return;
+			}
+		}
+		for (const child of Array.from(node.childNodes)) walk(child);
+		if (tag === "BR" || tag === "P" || tag === "DIV" || tag === "LI") out += " ";
+	};
+	walk(el);
+	return normalizeText(out).slice(0, max);
+}
+function bigrams(value) {
+	const s = value.toLowerCase();
+	const map = /* @__PURE__ */ new Map();
+	for (let i = 0; i < s.length - 1; i++) {
+		const gram = s.slice(i, i + 2);
+		map.set(gram, (map.get(gram) ?? 0) + 1);
+	}
+	return map;
+}
+/** Sørensen-Dice coefficient on character bigrams, 0..1. */
+function textSimilarity(a, b) {
+	if (a === b) return 1;
+	const na = a.toLowerCase();
+	const nb = b.toLowerCase();
+	if (na === nb) return 1;
+	if (na.length < 2 || nb.length < 2) return 0;
+	const ga = bigrams(na);
+	const gb = bigrams(nb);
+	let overlap = 0;
+	for (const [gram, count] of ga) {
+		const other = gb.get(gram);
+		if (other) overlap += Math.min(count, other);
+	}
+	return 2 * overlap / (na.length - 1 + (nb.length - 1));
+}
+//#endregion
+//#region ../anchor/src/quote.ts
+const SKIP_TAGS = /* @__PURE__ */ new Set([
+	"SCRIPT",
+	"STYLE",
+	"NOSCRIPT",
+	"TEMPLATE",
+	"SVG"
+]);
+/** Elements whose edges read as a space between words. */
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+	"ADDRESS",
+	"ARTICLE",
+	"ASIDE",
+	"BLOCKQUOTE",
+	"BR",
+	"DD",
+	"DIV",
+	"DL",
+	"DT",
+	"FIGCAPTION",
+	"FIGURE",
+	"FOOTER",
+	"FORM",
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6",
+	"HEADER",
+	"HR",
+	"LI",
+	"MAIN",
+	"NAV",
+	"OL",
+	"P",
+	"PRE",
+	"SECTION",
+	"TABLE",
+	"TD",
+	"TH",
+	"TR",
+	"UL"
+]);
+/** Formatting inside a paragraph: a quote climbs out of these. */
+const INLINE_TAGS = /* @__PURE__ */ new Set([
+	"A",
+	"ABBR",
+	"B",
+	"BDI",
+	"BDO",
+	"CITE",
+	"CODE",
+	"DATA",
+	"DEL",
+	"DFN",
+	"EM",
+	"I",
+	"INS",
+	"KBD",
+	"LABEL",
+	"MARK",
+	"Q",
+	"S",
+	"SAMP",
+	"SMALL",
+	"SPAN",
+	"STRONG",
+	"SUB",
+	"SUP",
+	"TIME",
+	"U",
+	"VAR"
+]);
+/** Longest text searched for a quote inside one element. */
+const MAX_TEXT = 2e4;
+/** Longest text searched for an edited quote, word by word. */
+const MAX_FUZZY_TEXT = 6e3;
+const FUZZY_MIN = .75;
+const WORD = /[\p{L}\p{N}]/u;
+function textMap(el) {
+	const map = {
+		text: "",
+		nodes: [],
+		node: [],
+		offset: []
+	};
+	if (el.closest(MASK_SELECTOR)) return map;
+	const chars = [];
+	let space = true;
+	const push = (c, node, offset) => {
+		chars.push(c);
+		map.node.push(node);
+		map.offset.push(offset);
+	};
+	const gap = () => {
+		if (space || !map.nodes.length) return;
+		const last = map.nodes.length - 1;
+		push(" ", last, map.nodes[last].length);
+		space = true;
+	};
+	const walk = (node) => {
+		if (chars.length >= MAX_TEXT) return;
+		if (node.nodeType === 3) {
+			const value = node.nodeValue ?? "";
+			if (!value) return;
+			const index = map.nodes.push(node) - 1;
+			for (let i = 0; i < value.length && chars.length < MAX_TEXT; i++) {
+				const c = value[i];
+				if (c === " " || c === "\n" || c === "	" || c === "\r" || c === "\f") {
+					if (!space) push(" ", index, i);
+					space = true;
+				} else {
+					push(c, index, i);
+					space = false;
+				}
+			}
+			return;
+		}
+		if (node.nodeType !== 1) return;
+		const el = node;
+		const tag = el.tagName.toUpperCase();
+		if (SKIP_TAGS.has(tag)) return;
+		if (el.hasAttribute("data-nuni-mask") || el.hasAttribute("data-nuni")) return;
+		const block = BLOCK_TAGS.has(tag);
+		if (block) gap();
+		for (const child of Array.from(el.childNodes)) walk(child);
+		if (block) gap();
+	};
+	walk(el);
+	while (chars.length && chars[chars.length - 1] === " ") {
+		chars.pop();
+		map.node.pop();
+		map.offset.pop();
+	}
+	map.text = chars.join("");
+	return map;
+}
+/**
+* Where a DOM boundary point falls in the element's text: the index of the
+* first character at or after it.
+*/
+function textOffset(map, container, offset) {
+	if (!map.text.length) return 0;
+	const point = (container.ownerDocument ?? container).createRange();
+	point.setStart(container, offset);
+	point.collapse(true);
+	let lo = 0;
+	let hi = map.text.length;
+	try {
+		while (lo < hi) {
+			const mid = lo + hi >> 1;
+			const node = map.nodes[map.node[mid]];
+			if (point.comparePoint(node, map.offset[mid]) < 0) lo = mid + 1;
+			else hi = mid;
+		}
+	} catch {
+		return -1;
+	}
+	return lo;
+}
+/** A Range over characters [start, end) of the element's text. */
+function rangeFor(map, start, end) {
+	const first = map.nodes[map.node[start]];
+	const last = map.nodes[map.node[end - 1]];
+	const range = first.ownerDocument.createRange();
+	range.setStart(first, map.offset[start]);
+	range.setEnd(last, Math.min(last.length, map.offset[end - 1] + 1));
+	return range;
+}
+/**
+* The element a text selection is anchored to: the closest element holding
+* all of it, out of inline formatting (a <strong>, a link) so it is the
+* paragraph or heading, which is easier to find again.
+*/
+function quoteContainer(range) {
+	let node = range.commonAncestorContainer;
+	if (node.nodeType !== 1) node = node.parentNode;
+	if (!node || node.nodeType !== 1) return null;
+	let el = node;
+	const body = el.ownerDocument.body;
+	while (INLINE_TAGS.has(el.tagName.toUpperCase()) && el.parentElement && el.parentElement !== body) el = el.parentElement;
+	return el;
+}
+/** The quoted words of a selection inside `el`, with context around them. */
+function captureQuote(range, el) {
+	const map = textMap(el);
+	let start = textOffset(map, range.startContainer, range.startOffset);
+	let end = textOffset(map, range.endContainer, range.endOffset);
+	if (start < 0 || end < 0) return null;
+	const { text } = map;
+	while (start < end && text[start] === " ") start++;
+	while (end > start && text[end - 1] === " ") end--;
+	if (end <= start) return null;
+	const exact = text.slice(start, Math.min(end, start + LIMITS.quoteMaxLength));
+	const after = start + exact.length;
+	return {
+		exact,
+		prefix: text.slice(Math.max(0, start - LIMITS.quoteContextLength), start),
+		suffix: text.slice(after, after + LIMITS.quoteContextLength)
+	};
+}
+/**
+* Find a quote again inside `el`. When it is not there (the sentence moved
+* to the next paragraph), look in the parent and grandparent, but only take
+* a match there whose surrounding text still agrees.
+*/
+function findQuote(el, quote) {
+	const own = findIn(el, quote, 0);
+	if (own) return own;
+	let node = el.parentElement;
+	const body = el.ownerDocument.body;
+	for (let i = 0; node && node !== body && i < 2; i++) {
+		const hit = findIn(node, quote, .6);
+		if (hit) return hit;
+		node = node.parentElement;
+	}
+	return null;
+}
+function affixSimilarity(actual, expected) {
+	if (!expected) return actual ? .8 : 1;
+	return textSimilarity(actual, expected);
+}
+/** How well the text around a match agrees with the quote's context. */
+function contextScore(text, start, end, quote) {
+	const before = text.slice(Math.max(0, start - quote.prefix.length), start);
+	const after = text.slice(end, end + quote.suffix.length);
+	return (affixSimilarity(before.trimStart(), quote.prefix.trimStart()) + affixSimilarity(after.trimEnd(), quote.suffix.trimEnd())) / 2;
+}
+function findIn(el, quote, minContext) {
+	const { exact } = quote;
+	if (!exact) return null;
+	const map = textMap(el);
+	const { text } = map;
+	if (!text) return null;
+	let best = -1;
+	let bestScore = -1;
+	for (let i = text.indexOf(exact); i >= 0; i = text.indexOf(exact, i + 1)) {
+		const score = contextScore(text, i, i + exact.length, quote);
+		if (score > bestScore) {
+			best = i;
+			bestScore = score;
+		}
+	}
+	if (best >= 0 && bestScore >= minContext) return {
+		range: rangeFor(map, best, best + exact.length),
+		exact: true
+	};
+	if (exact.length < 8 || text.length > MAX_FUZZY_TEXT) return null;
+	const fuzzy = closestSpan(text, quote);
+	if (!fuzzy) return null;
+	const context = contextScore(text, fuzzy.start, fuzzy.end, quote);
+	if (fuzzy.score < FUZZY_MIN || context < Math.max(minContext, .3)) return null;
+	return {
+		range: rangeFor(map, fuzzy.start, fuzzy.end),
+		exact: false
+	};
+}
+/** Word-aligned spans of `text` scored by similarity to the quote. */
+function closestSpan(text, quote) {
+	const word = (c) => c !== void 0 && WORD.test(c);
+	const starts = [];
+	const ends = [];
+	for (let i = 0; i < text.length; i++) {
+		const c = text[i];
+		if (c === " ") continue;
+		const prev = text[i - 1];
+		const next = text[i + 1];
+		if (prev === void 0 || prev === " " || word(c) && !word(prev)) starts.push(i);
+		if (next === void 0 || next === " " || word(c) && !word(next)) ends.push(i + 1);
+	}
+	const length = quote.exact.length;
+	let best = null;
+	let e = 0;
+	for (const start of starts) {
+		while (e < ends.length && ends[e] <= start) e++;
+		for (let j = e; j < ends.length; j++) {
+			const span = ends[j] - start;
+			if (span < length * .7) continue;
+			if (span > length * 1.3) break;
+			const score = textSimilarity(text.slice(start, ends[j]), quote.exact);
+			if (!best || score > best.score) best = {
+				start,
+				end: ends[j],
+				score
+			};
+		}
+	}
+	return best;
+}
+//#endregion
+//#region ../anchor/src/scope.ts
+function isShadowRoot(node) {
+	return Boolean(node && node.nodeType === 11 && "host" in node);
+}
+/** The shadow root or document the element lives in. */
+function scopeRootOf(el) {
+	const root = el.getRootNode();
+	return isShadowRoot(root) ? root : el.ownerDocument;
+}
+function scopeDocument(root) {
+	return isShadowRoot(root) ? root.ownerDocument : root;
+}
+/** The <iframe> showing this document, when the parent is same-origin. */
+function frameElementOf(doc) {
+	try {
+		return doc.defaultView?.frameElement ?? null;
+	} catch {
+		return null;
+	}
+}
+/** A same-origin iframe's document, or null (cross-origin, not loaded). */
+function frameDocument(el) {
+	if (el.tagName !== "IFRAME" && el.tagName !== "FRAME") return null;
+	try {
+		return el.contentDocument;
+	} catch {
+		return null;
+	}
+}
+/**
+* Shadow hosts and iframes between the page's document and the element,
+* outermost first.
+*/
+function scopeChain(el, top) {
+	const chain = [];
+	let node = el;
+	for (let depth = 0; depth < 8; depth++) {
+		const root = node.getRootNode();
+		if (isShadowRoot(root)) {
+			chain.unshift({
+				kind: "shadow",
+				host: root.host
+			});
+			node = root.host;
+			continue;
+		}
+		if (node.ownerDocument === top) break;
+		const frame = frameElementOf(node.ownerDocument);
+		if (!frame) break;
+		chain.unshift({
+			kind: "frame",
+			host: frame
+		});
+		node = frame;
+	}
+	return chain;
+}
+/**
+* The element's box in the page's viewport: getBoundingClientRect plus the
+* offset of every iframe it is inside.
+*/
+function viewportRect(el, top) {
+	const r = el.getBoundingClientRect();
+	let left = r.left;
+	let topPx = r.top;
+	let clipped = false;
+	let doc = el.ownerDocument;
+	for (let depth = 0; depth < 8 && doc !== top; depth++) {
+		const frame = frameElementOf(doc);
+		if (!frame) break;
+		const view = doc.defaultView;
+		if (view && (left + r.width < 0 || topPx + r.height < 0 || left > view.innerWidth || topPx > view.innerHeight)) clipped = true;
+		const f = frame.getBoundingClientRect();
+		left += f.left + frame.clientLeft;
+		topPx += f.top + frame.clientTop;
+		doc = frame.ownerDocument;
+	}
+	return {
+		left,
+		top: topPx,
+		width: r.width,
+		height: r.height,
+		clipped
+	};
+}
+//#endregion
 //#region ../anchor/src/stable.ts
 /**
 * Heuristics that decide whether an id, class or attribute is a stable,
@@ -304,7 +1178,7 @@ function nthOfType(el) {
 	return index;
 }
 function countOfType(el) {
-	const parent = el.parentElement;
+	const parent = el.parentNode;
 	if (!parent) return 1;
 	let count = 0;
 	for (const child of Array.from(parent.children)) if (child.tagName === el.tagName) count++;
@@ -317,21 +1191,23 @@ function queryCount(root, selector) {
 		return Infinity;
 	}
 }
-function isUniqueId(doc, id) {
-	return queryCount(doc, `#${cssEscape(id)}`) === 1;
+function isUniqueId(root, id) {
+	return queryCount(root, `#${cssEscape(id)}`) === 1;
 }
 /**
 * Structural path: nth-of-type chain from the nearest ancestor with a
 * stable unique id (or from <html>). Always resolvable when the DOM is
-* unchanged; the last-resort selector.
+* unchanged; the last-resort selector. Inside a shadow root it starts at
+* the root's top-level element instead of <html>.
 */
 function buildPath(el) {
+	const root = scopeRootOf(el);
 	const doc = el.ownerDocument;
 	const parts = [];
 	let node = el;
 	while (node && node !== doc.documentElement) {
 		const id = stableIdOf(node);
-		if (id && node !== el && isUniqueId(doc, id)) {
+		if (id && node !== el && isUniqueId(root, id)) {
 			parts.unshift(`#${cssEscape(id)}`);
 			return parts.join(" > ");
 		}
@@ -339,8 +1215,28 @@ function buildPath(el) {
 		parts.unshift(countOfType(node) > 1 ? `${tag}:nth-of-type(${nthOfType(node)})` : tag);
 		node = node.parentElement;
 	}
+	if (isShadowRoot(root)) return parts.join(" > ");
 	return parts.length ? `html > ${parts.join(" > ")}` : "html";
 }
+/**
+* The element a path points to in a scope. Shadow paths are matched from
+* the root's top-level elements, like document paths are from <html>.
+*/
+function queryPath(root, path) {
+	let matches;
+	try {
+		matches = Array.from(root.querySelectorAll(path)).slice(0, 50);
+	} catch {
+		return null;
+	}
+	if (!isShadowRoot(root) || path.startsWith("#")) return matches[0] ?? null;
+	const depth = path.split(" > ").length;
+	return matches.find((el) => {
+		let node = el;
+		for (let i = 1; i < depth && node; i++) node = node.parentElement;
+		return node?.parentNode === root;
+	}) ?? null;
+}
 function describeSegment(el, options) {
 	const tag = tagOf(el);
 	const testId = testIdOf(el, options);
@@ -359,7 +1255,7 @@ function describeSegment(el, options) {
 		}
 	}
 	const label = el.getAttribute("aria-label");
-	if (label && label.length <= 60) segment += attrSelector("aria-label", label);
+	if (label && label.length <= 60 && !el.closest(MASK_SELECTOR)) segment += attrSelector("aria-label", label);
 	return segment;
 }
 /**
@@ -369,8 +1265,9 @@ function describeSegment(el, options) {
 */
 function buildCssSelector(el, options = {}) {
 	const doc = el.ownerDocument;
+	const root = scopeRootOf(el);
 	const id = stableIdOf(el);
-	if (id && isUniqueId(doc, id)) return `#${cssEscape(id)}`;
+	if (id && isUniqueId(root, id)) return `#${cssEscape(id)}`;
 	const segments = [];
 	let node = el;
 	for (let depth = 0; node && depth < 6; depth++) {
@@ -379,93 +1276,34 @@ function buildCssSelector(el, options = {}) {
 			break;
 		}
 		const nodeId = stableIdOf(node);
-		if (depth > 0 && nodeId && isUniqueId(doc, nodeId)) {
+		if (depth > 0 && nodeId && isUniqueId(root, nodeId)) {
 			segments.unshift(`#${cssEscape(nodeId)}`);
 			const selector = segments.join(" > ");
-			if (queryCount(doc, selector) === 1) return selector;
+			if (queryCount(root, selector) === 1) return selector;
 			break;
 		}
 		segments.unshift(describeSegment(node, options));
 		let selector = segments.join(" > ");
-		if (queryCount(doc, selector) === 1) return selector;
+		if (queryCount(root, selector) === 1) return selector;
 		const parent = node.parentElement;
 		if (parent && queryCount(parent, `:scope > ${segments[0]}`) > 1) {
 			segments[0] = `${segments[0]}:nth-of-type(${nthOfType(node)})`;
 			selector = segments.join(" > ");
-			if (queryCount(doc, selector) === 1) return selector;
+			if (queryCount(root, selector) === 1) return selector;
 		}
 		node = node.parentElement;
 	}
 	const selector = segments.join(" > ");
-	return queryCount(doc, selector) === 1 ? selector : void 0;
-}
-//#endregion
-//#region ../anchor/src/text.ts
-const SKIP_TEXT_TAGS = /* @__PURE__ */ new Set([
-	"SCRIPT",
-	"STYLE",
-	"NOSCRIPT",
-	"TEMPLATE",
-	"SVG"
-]);
-function normalizeText(value) {
-	return value.replace(/\s+/g, " ").trim();
-}
-/** Visible-ish text of an element, whitespace-normalized and truncated. */
-function elementText(el, max = 120) {
-	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return normalizeText(el.placeholder || el.getAttribute("aria-label") || "").slice(0, max);
-	let out = "";
-	const walk = (node) => {
-		if (out.length > max * 2) return;
-		if (node.nodeType === 3) {
-			out += node.nodeValue ?? "";
-			return;
-		}
-		if (node.nodeType !== 1) return;
-		const tag = node.tagName.toUpperCase();
-		if (SKIP_TEXT_TAGS.has(tag)) return;
-		if (tag === "IMG") {
-			out += " " + (node.getAttribute("alt") ?? "") + " ";
-			return;
-		}
-		for (const child of Array.from(node.childNodes)) walk(child);
-		if (tag === "BR" || tag === "P" || tag === "DIV" || tag === "LI") out += " ";
-	};
-	walk(el);
-	return normalizeText(out).slice(0, max);
-}
-function bigrams(value) {
-	const s = value.toLowerCase();
-	const map = /* @__PURE__ */ new Map();
-	for (let i = 0; i < s.length - 1; i++) {
-		const gram = s.slice(i, i + 2);
-		map.set(gram, (map.get(gram) ?? 0) + 1);
-	}
-	return map;
-}
-/** Sørensen-Dice coefficient on character bigrams, 0..1. */
-function textSimilarity(a, b) {
-	if (a === b) return 1;
-	const na = a.toLowerCase();
-	const nb = b.toLowerCase();
-	if (na === nb) return 1;
-	if (na.length < 2 || nb.length < 2) return 0;
-	const ga = bigrams(na);
-	const gb = bigrams(nb);
-	let overlap = 0;
-	for (const [gram, count] of ga) {
-		const other = gb.get(gram);
-		if (other) overlap += Math.min(count, other);
-	}
-	return 2 * overlap / (na.length - 1 + (nb.length - 1));
+	return queryCount(root, selector) === 1 ? selector : void 0;
 }
 //#endregion
 //#region ../anchor/src/capture.ts
 function capturedAttributes(el, options) {
 	const attrs = {};
+	if (el.closest(MASK_SELECTOR)) return attrs;
 	for (const name of CAPTURED_ATTRIBUTES) {
 		if (!attributeAllowed(name, options)) continue;
-		if (name === "value" && !(el instanceof HTMLButtonElement || el.getAttribute("type") === "submit")) continue;
+		if (name === "value" && !(el.tagName === "BUTTON" || el.getAttribute("type") === "submit")) continue;
 		const value = el.getAttribute(name);
 		if (value) attrs[name] = value.slice(0, 200);
 	}
@@ -493,8 +1331,22 @@ function ancestorsOf(el) {
 /**
 * Record everything needed to find `el` again later.
 * `point` is the click position in viewport (client) coordinates.
+*
+* An element inside open shadow roots or same-origin iframes also records
+* each host and iframe on the way (`scope`), captured the same way, so it
+* can be found again level by level.
 */
 function captureAnchor(el, point, options = {}) {
+	const anchor = captureLocal(el, point, options);
+	const chain = scopeChain(el, options.document ?? (typeof document === "undefined" ? el.ownerDocument : document));
+	if (chain.length) anchor.scope = chain.map(({ kind, host }) => ({
+		kind,
+		host: captureLocal(host, void 0, options)
+	}));
+	return anchor;
+}
+/** The anchor of `el` within its own scope (document or shadow root). */
+function captureLocal(el, point, options) {
 	const doc = el.ownerDocument;
 	const rect = documentRect(el);
 	const viewport = viewportInfo(doc);
@@ -510,7 +1362,7 @@ function captureAnchor(el, point, options = {}) {
 	const testId = testIdOf(el, options);
 	const css = buildCssSelector(el, options);
 	const role = el.getAttribute("role") ?? void 0;
-	const parent = el.parentElement;
+	const parent = el.parentNode;
 	const siblings = parent ? Array.from(parent.children) : [el];
 	const anchor = {
 		v: 1,
@@ -532,13 +1384,140 @@ function captureAnchor(el, point, options = {}) {
 		viewport,
 		docSize: documentSize(doc)
 	};
-	if (role) anchor.role = role;
-	const componentName = reactComponentName(el);
-	if (componentName) anchor.componentName = componentName;
+	if (role) anchor.role = role;
+	const componentName = reactComponentName(el);
+	if (componentName) anchor.componentName = componentName;
+	return anchor;
+}
+/**
+* A text comment: the anchor of the paragraph (or heading, cell...) holding
+* the selected text, plus the words themselves and the text around them.
+* Null when the selection holds no text.
+*/
+function captureSelection(range, options = {}) {
+	const element = quoteContainer(range);
+	if (!element) return null;
+	const quote = captureQuote(range, element);
+	if (!quote) return null;
+	const first = range.getClientRects()[0] ?? range.getBoundingClientRect();
+	const anchor = captureAnchor(element, {
+		x: first.left,
+		y: first.top + first.height / 2
+	}, options);
+	anchor.quote = quote;
+	return {
+		element,
+		anchor
+	};
+}
+/**
+* The element an area comment belongs to: the smallest one that covers the
+* whole box (in viewport coordinates).
+*/
+function areaContainer(doc, box, isIgnored = () => false) {
+	const right = box.left + box.width;
+	const bottom = box.top + box.height;
+	const corners = [
+		[box.left + 1, box.top + 1],
+		[right - 1, box.top + 1],
+		[box.left + 1, bottom - 1],
+		[right - 1, bottom - 1]
+	];
+	const ignored = (el) => isIgnored(el) || el.closest("[data-nuni]") !== null;
+	let common = null;
+	for (const [x, y] of corners) {
+		const hit = doc.elementsFromPoint(x, y).find((el) => !ignored(el));
+		if (hit) common = common ? commonAncestor(common, hit) : hit;
+	}
+	let el = common ?? doc.body;
+	while (el.parentElement && el !== doc.body) {
+		const r = el.getBoundingClientRect();
+		if (r.left <= box.left + 1 && r.top <= box.top + 1 && r.right >= right - 1 && r.bottom >= bottom - 1) break;
+		el = el.parentElement;
+	}
+	return el;
+}
+function commonAncestor(a, b) {
+	const seen = /* @__PURE__ */ new Set();
+	for (let n = a; n; n = n.parentElement) seen.add(n);
+	for (let n = b; n; n = n.parentElement) if (seen.has(n)) return n;
+	return a.ownerDocument.body;
+}
+/**
+* An area comment: the covering element's anchor plus the box as fractions
+* of that element's size, so it scales with the layout.
+*/
+function captureArea(el, box, options = {}) {
+	const anchor = captureAnchor(el, {
+		x: box.left + box.width,
+		y: box.top
+	}, options);
+	const r = el.getBoundingClientRect();
+	const x = r.width ? clamp01((box.left - r.left) / r.width) : 0;
+	const y = r.height ? clamp01((box.top - r.top) / r.height) : 0;
+	anchor.region = {
+		x,
+		y,
+		w: r.width ? Math.min(1 - x, box.width / r.width) : 1,
+		h: r.height ? Math.min(1 - y, box.height / r.height) : 1
+	};
 	return anchor;
 }
 //#endregion
 //#region ../anchor/src/resolve.ts
+function createResolveCache() {
+	return {
+		byTag: /* @__PURE__ */ new Map(),
+		elements: /* @__PURE__ */ new Map(),
+		text: /* @__PURE__ */ new WeakMap(),
+		content: /* @__PURE__ */ new WeakMap(),
+		words: /* @__PURE__ */ new WeakMap()
+	};
+}
+function textOf(el, max, cache) {
+	if (!cache) return elementText(el, max);
+	let byMax = cache.text.get(el);
+	if (!byMax) cache.text.set(el, byMax = /* @__PURE__ */ new Map());
+	let text = byMax.get(max);
+	if (text === void 0) byMax.set(max, text = elementText(el, max));
+	return text;
+}
+function contentOf(el, cache) {
+	if (!cache) return el.textContent ?? "";
+	let content = cache.content.get(el);
+	if (content === void 0) cache.content.set(el, content = el.textContent ?? "");
+	return content;
+}
+/** All of an element's text with whitespace collapsed, for quote checks. */
+function wordsOf(el, cache) {
+	let words = cache?.words.get(el);
+	if (words === void 0) {
+		words = normalizeText(contentOf(el, cache));
+		cache?.words.set(el, words);
+	}
+	return words;
+}
+function elementsByTag(root, tag, cache) {
+	const find = () => isShadowRoot(root) ? root.querySelectorAll(tag) : root.getElementsByTagName(tag);
+	if (!cache) return find();
+	let tags = cache.byTag.get(root);
+	if (!tags) cache.byTag.set(root, tags = /* @__PURE__ */ new Map());
+	let list = tags.get(tag);
+	if (!list) tags.set(tag, list = Array.from(find()));
+	return list;
+}
+/** Every element in the scope, in document order, up to `limit`. */
+function allElements(root, limit, cache) {
+	const cached = cache?.elements.get(root);
+	if (cached) return cached;
+	const doc = scopeDocument(root);
+	const start = isShadowRoot(root) ? root : doc.body ?? doc.documentElement;
+	const walker = doc.createTreeWalker(start, 1);
+	const out = [];
+	for (let n = walker.nextNode(); n && out.length < limit; n = walker.nextNode()) out.push(n);
+	cache?.elements.set(root, out);
+	return out;
+}
 const THRESHOLD = {
 	exact: .9,
 	high: .72,
@@ -606,7 +1585,7 @@ const IDENTIFYING_ATTRS = /* @__PURE__ */ new Set([
 	"alt",
 	"title"
 ]);
-function scoreCandidate(anchor, el, doc, ctx, options) {
+function scoreCandidate(anchor, el, doc, ctx, options, cache) {
 	let total = 0;
 	let weights = 0;
 	const add = (weight, value) => {
@@ -653,9 +1632,11 @@ function scoreCandidate(anchor, el, doc, ctx, options) {
 	}
 	if (anchor.role) add(.5, el.getAttribute("role") === anchor.role ? 1 : 0);
 	if (anchor.componentName) add(.5, reactComponentName(el) === anchor.componentName ? 1 : 0);
-	const text = elementText(el);
+	const text = textOf(el, 120, cache);
 	const textSim = anchor.text ? textSimilarity(text, anchor.text) : text ? .3 : 1;
 	add(anchor.text ? 3 : 1, textSim);
+	const quoteHit = anchor.quote ? wordsOf(el, cache).includes(anchor.quote.exact) : null;
+	if (quoteHit !== null) add(3, quoteHit ? 1 : 0);
 	let ancTotal = 0;
 	let ancWeights = 0;
 	let context = null;
@@ -670,18 +1651,19 @@ function scoreCandidate(anchor, el, doc, ctx, options) {
 		else s += .35 * (nodeId ? .5 : 1);
 		s += .25 * jaccard(stableClasses(node), expected.classes);
 		ancTotal += weight * s;
-		if (context === null && expected.text && expected.text !== anchor.text) context = textSimilarity(elementText(node, 80), expected.text);
+		if (context === null && expected.text && expected.text !== anchor.text) context = textSimilarity(textOf(node, 80, cache), expected.text);
 		node = node.parentElement;
 	});
 	if (ancWeights) add(1.5, ancTotal / ancWeights);
 	if (context !== null) add(2, context);
-	const parent = el.parentElement;
+	const parent = el.parentNode;
 	const index = parent ? Array.prototype.indexOf.call(parent.children, el) : 0;
 	add(.5, Math.max(0, 1 - Math.abs(index - anchor.siblingIndex) / 3));
 	const geoWeight = Math.max(0, 1 - Math.abs(ctx.viewportRatio - 1) * 2);
+	const r = el.getBoundingClientRect();
+	const rendered = r.width + r.height > 0;
 	if (geoWeight > 0 && anchor.rect.w + anchor.rect.h > 0) {
-		const r = el.getBoundingClientRect();
-		if (r.width + r.height > 0) {
+		if (rendered) {
 			const view = doc.defaultView;
 			const cx = r.left + (view?.scrollX ?? 0) + r.width / 2;
 			const cy = r.top + (view?.scrollY ?? 0) + r.height / 2;
@@ -696,34 +1678,38 @@ function scoreCandidate(anchor, el, doc, ctx, options) {
 	}
 	let score = weights ? total / weights : 0;
 	const structural = (cssHit || !anchor.selectors.css) && pathHit && identifyingAttrsMatch;
-	if (anchor.text.length >= 2 && textSim < .999) {
-		const factor = peerCount(el) > 0 ? .2 + .8 * textSim * textSim : .7 + .3 * textSim;
+	const identity = ctx.quoteOnly === el ? Math.max(textSim, .9) : textSim;
+	if (anchor.text.length >= 2 && identity < .999) {
+		const factor = peerCount(el) > 0 ? .2 + .8 * identity * identity : .7 + .3 * identity;
 		score *= strong || structural ? Math.max(factor, .92) : factor;
 	}
+	if (quoteHit === false) score *= .85;
 	return {
 		el,
 		score,
 		text: textSim,
 		context,
-		strong: strong || structural
+		strong: strong || structural,
+		rendered
 	};
 }
-function collectCandidates(anchor, doc, options) {
+function collectCandidates(anchor, root, options, cache) {
+	const doc = scopeDocument(root);
 	const candidates = /* @__PURE__ */ new Set();
 	const ignored = (el) => el === doc.documentElement || (options.isIgnored?.(el) ?? false);
 	const add = (el) => {
 		if (el && !ignored(el)) candidates.add(el);
 	};
-	if (anchor.selectors.id) add(doc.getElementById(anchor.selectors.id));
+	if (anchor.selectors.id) add(isShadowRoot(root) ? safeQueryAll(root, `#${cssEscape(anchor.selectors.id)}`, 1)[0] : root.getElementById(anchor.selectors.id));
 	if (anchor.selectors.testId) {
 		const parts = splitTestId(anchor.selectors.testId);
-		if (parts) safeQueryAll(doc, attrQuery(parts[0], parts[1])).forEach(add);
+		if (parts) safeQueryAll(root, attrQuery(parts[0], parts[1])).forEach(add);
 	}
-	safeQueryAll(doc, anchor.selectors.css).forEach(add);
-	const pathMatch = safeQueryAll(doc, anchor.selectors.path, 1)[0] ?? null;
+	safeQueryAll(root, anchor.selectors.css).forEach(add);
+	const pathMatch = queryPath(root, anchor.selectors.path);
 	add(pathMatch);
 	const needle = anchor.text.slice(0, 24).toLowerCase();
-	const sameTag = doc.getElementsByTagName(anchor.tag);
+	const sameTag = elementsByTag(root, anchor.tag, cache);
 	const scanAll = sameTag.length <= MAX_SCAN;
 	for (let i = 0; i < sameTag.length && i < MAX_SCAN * 2; i++) {
 		const el = sameTag[i];
@@ -731,20 +1717,16 @@ function collectCandidates(anchor, doc, options) {
 			add(el);
 			continue;
 		}
-		const content = el.textContent?.toLowerCase() ?? "";
+		const content = contentOf(el, cache).toLowerCase();
 		if (needle && content.includes(needle)) add(el);
 	}
 	if (anchor.text.length >= 3) {
 		const exact = anchor.text.toLowerCase();
-		const walker = doc.createTreeWalker(doc.body ?? doc.documentElement, 1);
-		let count = 0;
-		for (let n = walker.nextNode(); n && count < MAX_SCAN * 3; n = walker.nextNode()) {
-			count++;
-			const el = n;
+		for (const el of allElements(root, MAX_SCAN * 3, cache)) {
 			if (el.tagName.toLowerCase() === anchor.tag) continue;
-			const content = el.textContent;
+			const content = contentOf(el, cache);
 			if (!content || content.length > exact.length * 3 + 20) continue;
-			if (elementText(el).toLowerCase() === exact) add(el);
+			if (textOf(el, 120, cache).toLowerCase() === exact) add(el);
 		}
 	}
 	return {
@@ -752,44 +1734,104 @@ function collectCandidates(anchor, doc, options) {
 		pathMatch
 	};
 }
-/** Find the element an anchor was captured on, in the current document. */
-function resolveAnchor(anchor, doc = document, options = {}) {
-	if (anchor.tag === "body" || anchor.tag === "html") return {
+const RANK = {
+	lost: 0,
+	low: 1,
+	high: 2,
+	exact: 3
+};
+/**
+* Find the element an anchor was captured on, in the current document.
+* Elements in shadow roots and iframes are found host by host first.
+* Pass one `cache` when resolving many anchors over the same DOM.
+*/
+function resolveAnchor(anchor, doc = document, options = {}, cache) {
+	let root = doc;
+	let floor = "exact";
+	const lost = {
+		element: null,
+		confidence: "lost",
+		score: 0
+	};
+	for (const step of anchor.scope ?? []) {
+		const host = resolveIn(step.host, root, options, cache);
+		if (!host.element) return lost;
+		let confidence = host.confidence;
+		if (step.host.text) {
+			if (host.text < .9 && RANK[confidence] < RANK.high) return lost;
+			if (host.text >= .999 && host.margin >= .1 && confidence === "low") confidence = "high";
+		}
+		const next = step.kind === "shadow" ? host.element.shadowRoot : frameDocument(host.element);
+		if (!next) return lost;
+		if (RANK[confidence] < RANK[floor]) floor = confidence;
+		root = next;
+	}
+	const { text: _text, margin: _margin, ...result } = resolveIn(anchor, root, options, cache);
+	if (result.element && RANK[floor] < RANK[result.confidence]) result.confidence = floor;
+	if (result.element && anchor.quote) {
+		const quote = findQuote(result.element, anchor.quote);
+		if (quote) result.range = quote.range;
+		if ((!quote || !quote.exact) && RANK[result.confidence] > RANK.low) result.confidence = "low";
+	}
+	return result;
+}
+function resolveIn(anchor, root, options, cache) {
+	const doc = scopeDocument(root);
+	if (!isShadowRoot(root) && (anchor.tag === "body" || anchor.tag === "html")) return {
 		element: doc.body,
 		confidence: "exact",
-		score: 1
+		score: 1,
+		text: 1,
+		margin: 1
 	};
-	const { candidates, pathMatch } = collectCandidates(anchor, doc, options);
+	const { candidates, pathMatch } = collectCandidates(anchor, root, options, cache);
 	if (!candidates.size) return {
 		element: null,
 		confidence: "lost",
-		score: 0
+		score: 0,
+		text: 0,
+		margin: 0
 	};
 	const view = doc.defaultView;
 	const viewportRatio = anchor.viewport.w && view?.innerWidth ? view.innerWidth / anchor.viewport.w : 1;
+	let quoteOnly = null;
+	if (anchor.quote) {
+		const exact = anchor.quote.exact;
+		const hits = [...candidates].filter((el) => wordsOf(el, cache).includes(exact));
+		const innermost = hits.filter((el) => !hits.some((other) => other !== el && el.contains(other)));
+		if (innermost.length === 1) quoteOnly = innermost[0];
+	}
 	const scored = [];
 	for (const el of candidates) scored.push(scoreCandidate(anchor, el, doc, {
 		pathMatch,
-		viewportRatio
-	}, options));
-	if (scored.filter((s) => s.text >= .999 && s.el.tagName.toLowerCase() === anchor.tag).length > 1) for (const s of scored) {
+		viewportRatio,
+		quoteOnly
+	}, options, cache));
+	const visibleOnly = anchor.rect.w + anchor.rect.h > 0 && scored.some((s) => s.rendered);
+	const rival = (s) => !visibleOnly || s.rendered;
+	if (scored.filter((s) => s.text >= .999 && s.el.tagName.toLowerCase() === anchor.tag && rival(s)).length > 1) for (const s of scored) {
 		if (s.context === null || s.strong) continue;
 		s.score *= .2 + .8 * s.context * s.context;
 	}
 	scored.sort((a, b) => b.score - a.score);
 	const best = scored[0];
-	const second = scored.find((s) => s.el !== best.el && !best.el.contains(s.el) && !s.el.contains(best.el));
+	const second = scored.find((s) => s.el !== best.el && !best.el.contains(s.el) && !s.el.contains(best.el) && (!best.rendered || rival(s)));
 	if (best.score < THRESHOLD.low) return {
 		element: null,
 		confidence: "lost",
-		score: best.score
+		score: best.score,
+		text: best.text,
+		margin: 0
 	};
 	let confidence = best.score >= THRESHOLD.exact && best.text >= .999 ? "exact" : best.score >= THRESHOLD.high ? "high" : "low";
-	if (second && best.score - second.score < AMBIGUITY_MARGIN) confidence = "low";
+	const margin = second ? best.score - second.score : 1;
+	if (margin < AMBIGUITY_MARGIN) confidence = "low";
 	return {
 		element: best.el,
 		confidence,
-		score: best.score
+		score: best.score,
+		text: best.text,
+		margin
 	};
 }
 //#endregion
@@ -4188,44 +5230,6 @@ var ConvexClient = class {
 	}
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/toPropertyKey.js
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == _typeof(i) ? i : i + "";
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-//#endregion
 //#region src/api.ts
 var NuniApiError = class extends Error {
 	constructor(message, code) {
@@ -4275,6 +5279,21 @@ var NuniApi = class {
 			sessionToken
 		}, cb, () => {});
 	}
+	/** A comment with the owner-only context (screenshot, console, DOM). */
+	onOwnerComment(id, sessionToken, cb) {
+		return this.client.onUpdate(api.comments.getForOwner, {
+			publicId: this.config.project,
+			id,
+			sessionToken
+		}, (comment) => cb(comment), () => {});
+	}
+	/** Replies and reactions of one thread, live while its card is open. */
+	onThread(commentId, cb) {
+		return this.client.onUpdate(api.replies.listForComment, {
+			publicId: this.config.project,
+			commentId
+		}, (thread) => cb(thread), () => {});
+	}
 	/** One comment by id, for deep links outside the page listing window. */
 	getComment(id) {
 		return this.client.query(api.comments.getById, {
@@ -4300,6 +5319,42 @@ var NuniApi = class {
 		if (!response.ok || !data.id) throw new NuniApiError(data.message ?? "Couldn't post the comment", data.code ?? "error");
 		return data.id;
 	}
+	/** Through the HTTP action, so replies are rate limited per IP. */
+	async createReply(reply) {
+		let response;
+		try {
+			response = await fetch(`${this.config.convexSiteUrl}/widget/replies`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					publicId: this.config.project,
+					...reply
+				})
+			});
+		} catch {
+			throw new NuniApiError("Couldn't reach Nuni. Check your connection.", "network");
+		}
+		const data = await response.json().catch(() => ({}));
+		if (!response.ok || !data.id) throw new NuniApiError(data.message ?? "Couldn't post the reply", data.code ?? "error");
+		return data.id;
+	}
+	/** Attach a screenshot to the author's own, just-posted comment. */
+	async uploadScreenshot(id, authorSecret, image) {
+		const response = await fetch(`${this.config.convexSiteUrl}/widget/screenshot`, {
+			method: "POST",
+			headers: {
+				"Content-Type": image.type,
+				"X-Nuni-Project": this.config.project,
+				"X-Nuni-Comment": id,
+				"X-Nuni-Author": authorSecret
+			},
+			body: image
+		});
+		if (!response.ok) {
+			const data = await response.json().catch(() => ({}));
+			throw new NuniApiError(data.message ?? "Couldn't attach the screenshot", data.code ?? "error");
+		}
+	}
 	async run(promise) {
 		try {
 			return await promise;
@@ -4332,6 +5387,34 @@ var NuniApi = class {
 			sessionToken
 		}));
 	}
+	editReply(id, authorSecret, body) {
+		return this.run(this.client.mutation(api.replies.editOwn, {
+			id,
+			authorSecret,
+			body
+		}));
+	}
+	deleteReply(id, authorSecret) {
+		return this.run(this.client.mutation(api.replies.deleteOwn, {
+			id,
+			authorSecret
+		}));
+	}
+	removeReply(id, sessionToken) {
+		return this.run(this.client.mutation(api.replies.remove, {
+			id,
+			sessionToken
+		}));
+	}
+	toggleReaction(commentId, targetId, emoji, authorSecret) {
+		return this.run(this.client.mutation(api.reactions.toggle, {
+			publicId: this.config.project,
+			commentId,
+			targetId,
+			emoji,
+			authorSecret
+		}));
+	}
 	remove(id, sessionToken) {
 		return this.run(this.client.mutation(api.comments.remove, {
 			id,
@@ -4366,17 +5449,6 @@ function icon(svg) {
 	span.append(document.importNode(parsed.documentElement, true));
 	return span;
 }
-function timeAgo(ts, now = Date.now()) {
-	const s = Math.max(0, Math.round((now - ts) / 1e3));
-	if (s < 45) return "just now";
-	const m = Math.round(s / 60);
-	if (m < 60) return `${m}m ago`;
-	const hr = Math.round(m / 60);
-	if (hr < 24) return `${hr}h ago`;
-	const d = Math.round(hr / 24);
-	if (d < 30) return `${d}d ago`;
-	return new Date(ts).toLocaleDateString();
-}
 function initials(name) {
 	const parts = name.trim().split(/\s+/).filter(Boolean);
 	return (parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : (parts[0] ?? "?").slice(0, 2)).toUpperCase();
@@ -4385,7 +5457,221 @@ function initials(name) {
 function colorFor(name) {
 	let hash = 0;
 	for (const ch of name) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
-	return `oklch(0.62 0.17 ${hash % 360})`;
+	return `oklch(0.5 0.17 ${hash % 360})`;
+}
+/** Copy text, falling back to execCommand where the async clipboard is off (plain http previews). */
+async function copyText(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	const area = document.createElement("textarea");
+	area.value = text;
+	area.setAttribute("readonly", "");
+	area.style.cssText = "position:fixed;top:0;left:0;opacity:0";
+	document.body.appendChild(area);
+	area.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		area.remove();
+	}
+}
+/** Any CSS color as RGB, using the browser's own parser. */
+function parseColor(color) {
+	const probe = document.createElement("span");
+	probe.style.color = color;
+	if (!probe.style.color) return null;
+	probe.style.display = "none";
+	document.documentElement.appendChild(probe);
+	const computed = getComputedStyle(probe).color;
+	probe.remove();
+	if (/^rgba?\(/.test(computed)) {
+		const parts = computed.match(/[\d.]+/g)?.map(Number);
+		if (parts && parts.length >= 3) return [
+			parts[0],
+			parts[1],
+			parts[2]
+		];
+	}
+	try {
+		const canvas = document.createElement("canvas");
+		canvas.width = canvas.height = 1;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return null;
+		ctx.fillStyle = color;
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+		return [
+			r,
+			g,
+			b
+		];
+	} catch {
+		return null;
+	}
+}
+/** Black or white text, whichever reads better on the color (WCAG). */
+function readableOn([r, g, b]) {
+	const channel = (c) => {
+		const v = c / 255;
+		return v <= .03928 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	};
+	const l = .2126 * channel(r) + .7152 * channel(g) + .0722 * channel(b);
+	return 1.05 / (l + .05) >= (l + .05) / .05 ? "#ffffff" : "#111111";
+}
+//#endregion
+//#region src/i18n.ts
+/**
+* Every word the widget shows. Override any of them with the `messages`
+* option; `locale` sets how times and counts are written.
+*
+* `{name}` is filled in. A message with forms (`one`, `other`, and `zero`,
+* `two`, `few`, `many` where a language has them) is picked by `{count}`.
+*/
+const EN = {
+	toolbar: "Nuni comments",
+	comment: "Comment",
+	addComment: "Add a comment",
+	addCommentKey: "Add a comment ({key})",
+	cancelAdding: "Cancel adding a comment",
+	pickElement: "Pick an element",
+	allComments: "All comments",
+	openCount: "Comments on this page: {count} open",
+	commentSelection: "Comment on the selected text",
+	commentSelectionKey: "Comment on the selected text ({key})",
+	pickHint: "Click anything to comment, or drag to mark an area",
+	pickHintMobile: "Tap anything to comment",
+	pickHintKeys: "Arrow keys move, Enter comments, Esc cancels",
+	picked: "Selected {element}",
+	comments: "Comments",
+	close: "Close",
+	tabOpen: "Open ({count})",
+	tabResolved: "Resolved ({count})",
+	loading: "Loading…",
+	noOpen: "No open comments on this page.",
+	noOpenKey: "No open comments on this page. Press {key} to add one.",
+	noResolved: "Nothing resolved yet.",
+	notFoundHere: "Couldn't find on this page",
+	otherPages: "Other pages",
+	openOnPage: "{count} open",
+	replyCount: {
+		one: "{count} reply",
+		other: "{count} replies"
+	},
+	edited: "edited",
+	ownSite: "Own this website?",
+	claim: "Claim Nuni",
+	yourName: "Your name",
+	leaveComment: "Leave a comment",
+	notYou: "Not you?",
+	screenshotAlt: "Screenshot that will be attached",
+	screenshotNote: "Screenshot attached. Only the site owner sees it.",
+	remove: "Remove",
+	cancel: "Cancel",
+	post: "Post",
+	posting: "Posting…",
+	save: "Save",
+	send: "{key} + Enter",
+	pinLabel: "Comment by {name}: {body}",
+	commentBy: "Comment by {name}",
+	openScreenshot: "Open the screenshot",
+	screenshotTaken: "Screenshot taken when the comment was left",
+	resolved: "Resolved",
+	leftOn: "Left on {origin}",
+	approximate: "Approximate",
+	approximateHint: "The page changed; this pin is a best guess",
+	notFound: "Element not found",
+	originallyOn: "Originally on: {text}",
+	resolve: "Resolve",
+	reopen: "Reopen",
+	copyForAgent: "Copy for agent",
+	copyForAgentHint: "Copy for your coding agent",
+	loadingContext: "Loading page context…",
+	edit: "Edit",
+	delete: "Delete",
+	owner: "Owner",
+	addReaction: "Add a reaction",
+	reactions: "Reactions",
+	reactWith: "React with {emoji}",
+	reply: "Reply",
+	replyFirst: "Reply to start a thread",
+	sendReply: "Send reply",
+	editReply: "Edit reply",
+	deleteReply: "Delete reply",
+	confirmDeleteComment: "Delete this comment? This can't be undone.",
+	confirmDeleteReply: "Delete this reply?",
+	added: "Comment added",
+	saved: "Saved",
+	deleted: "Deleted",
+	replyDeleted: "Reply deleted",
+	reopened: "Reopened",
+	copied: "Copied for your coding agent",
+	copyFailed: "Couldn't copy",
+	signedIn: "You're signed in as the owner",
+	linkGone: "That comment was deleted or is on another page",
+	enterName: "Enter your name",
+	writeFirst: "Write a comment first",
+	commentTooLong: "Comments are limited to {count} characters",
+	replyTooLong: "Replies are limited to {count} characters",
+	postFailed: "Couldn't post the comment",
+	replyFailed: "Couldn't post the reply",
+	reactFailed: "Couldn't react",
+	failed: "Something went wrong",
+	justNow: "just now"
+};
+function isApple() {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
+	return /mac|iphone|ipad|ipod/i.test(platform || navigator.userAgent);
+}
+function createI18n(locale, overrides = {}) {
+	const messages = {
+		...EN,
+		...overrides
+	};
+	let plural = null;
+	let relative = null;
+	try {
+		plural = new Intl.PluralRules(locale);
+		relative = new Intl.RelativeTimeFormat(locale, {
+			numeric: "auto",
+			style: "narrow"
+		});
+	} catch {
+		plural = new Intl.PluralRules();
+		relative = new Intl.RelativeTimeFormat(void 0, {
+			numeric: "auto",
+			style: "narrow"
+		});
+	}
+	const t = (key, vars = {}) => {
+		const message = messages[key] ?? EN[key];
+		return (typeof message === "string" ? message : message[plural.select(Number(vars.count ?? 0))] ?? message.other).replace(/\{(\w+)\}/g, (match, name) => name in vars ? String(vars[name]) : match);
+	};
+	const timeAgo = (ts, now = Date.now()) => {
+		const s = Math.max(0, Math.round((now - ts) / 1e3));
+		if (s < 45) return t("justNow");
+		const m = Math.round(s / 60);
+		if (m < 60) return relative.format(-m, "minute");
+		const hr = Math.round(m / 60);
+		if (hr < 24) return relative.format(-hr, "hour");
+		const d = Math.round(hr / 24);
+		if (d < 30) return relative.format(-d, "day");
+		try {
+			return new Date(ts).toLocaleDateString(locale);
+		} catch {
+			return new Date(ts).toLocaleDateString();
+		}
+	};
+	return {
+		locale,
+		t,
+		timeAgo,
+		mod: isApple() ? "⌘" : "Ctrl"
+	};
 }
 //#endregion
 //#region src/icons.ts
@@ -4399,6 +5685,8 @@ const ICONS = {
 	trash: s("<path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"/>"),
 	edit: s("<path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"/>"),
 	send: s("<path d=\"m22 2-7 20-4-9-9-4z\"/><path d=\"M22 2 11 13\"/>"),
+	bot: s("<path d=\"M12 8V4H8\"/><rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/><path d=\"M2 14h2M20 14h2M15 13v2M9 13v2\"/>"),
+	smile: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01\"/>"),
 	target: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
 	github: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5z"/></svg>`,
 	link: s("<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>")
@@ -4635,7 +5923,7 @@ const STYLES = `
   -moz-osx-font-smoothing: grayscale;
 }
 @media (prefers-color-scheme: dark) {
-  :host {
+  :host(:not([data-theme="light"])) {
     --n-bg: #1d1b20;
     --n-bg-subtle: #2a272e;
     --n-fg: #f4f2f6;
@@ -4646,6 +5934,18 @@ const STYLES = `
     --n-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5);
   }
 }
+:host([data-theme="dark"]) {
+  --n-bg: #1d1b20;
+  --n-bg-subtle: #2a272e;
+  --n-fg: #f4f2f6;
+  --n-fg-muted: #a8a2ae;
+  --n-border: rgba(255, 255, 255, 0.12);
+  --n-accent: #ff4d94;
+  --n-accent-soft: rgba(255, 77, 148, 0.18);
+  --n-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5);
+}
+:host([data-theme="light"]) { color-scheme: light; }
+:host([data-theme="dark"]) { color-scheme: dark; }
 *, *::before, *::after { box-sizing: border-box; }
 button, input, textarea { font: inherit; color: inherit; }
 button { cursor: pointer; }
@@ -4699,6 +5999,10 @@ button { cursor: pointer; }
 
 /* Picking */
 .pick-hint {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  max-width: calc(100vw - 24px);
   position: fixed;
   top: 12px;
   left: 50%;
@@ -4735,6 +6039,94 @@ button { cursor: pointer; }
   text-overflow: ellipsis;
 }
 
+.drag-box { transition: none; border-style: dashed; }
+
+/* Text and area comments */
+.marks { position: fixed; inset: 0; pointer-events: none; }
+.mark {
+  position: fixed;
+  border-bottom: 2px solid var(--n-accent);
+  background: var(--n-accent-soft);
+  opacity: 0.7;
+  pointer-events: none;
+}
+.mark-active { opacity: 1; background: color-mix(in srgb, var(--n-accent) 26%, transparent); }
+.area {
+  position: fixed;
+  border: 2px dashed var(--n-accent);
+  border-radius: 4px;
+  background: var(--n-accent-soft);
+  pointer-events: none;
+}
+.select-btn {
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--n-fg);
+  color: var(--n-bg);
+  font-weight: 550;
+  font-size: 13px;
+  box-shadow: var(--n-shadow);
+  pointer-events: auto;
+}
+.select-btn[hidden] { display: none; }
+.quote {
+  margin: 0;
+  padding: 2px 0 2px 10px;
+  border-left: 3px solid var(--n-accent);
+  color: var(--n-fg-muted);
+  font-style: italic;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 4.5em;
+  overflow: hidden;
+}
+.item-quote {
+  margin-top: 4px;
+  padding-left: 8px;
+  border-left: 2px solid var(--n-accent);
+  color: var(--n-fg-muted);
+  font-size: 12px;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pick-keys { opacity: 0.7; }
+.pick-keys::before { content: "·"; margin-right: 8px; }
+@media (max-width: 900px) { .pick-keys { display: none; } }
+
+/* Confirm dialog */
+.confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.32);
+  pointer-events: auto;
+}
+.confirm {
+  width: min(360px, calc(100vw - 32px));
+  padding: 16px;
+  border-radius: var(--n-radius);
+  background: var(--n-bg);
+  color: var(--n-fg);
+  border: 1px solid var(--n-border);
+  box-shadow: var(--n-shadow);
+  display: grid;
+  gap: 12px;
+}
+.confirm p { margin: 0; }
+.btn-danger-solid { background: var(--n-danger); color: #fff; border-color: transparent; }
+
 /* Pins */
 .pin {
   position: fixed;
@@ -4760,6 +6152,22 @@ button { cursor: pointer; }
 .pin:hover, .pin[data-active="true"] { z-index: 2; }
 .pin[data-active="true"] { box-shadow: 0 0 0 3px var(--n-accent), 0 2px 8px rgba(0,0,0,0.25); }
 .pin[data-status="resolved"] { opacity: 0.55; filter: grayscale(0.6); }
+.pin[data-replies]::after {
+  content: attr(data-replies);
+  position: absolute;
+  top: -6px;
+  right: -8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--n-bg);
+  color: var(--n-fg);
+  border: 1px solid var(--n-border);
+  font-size: 10px;
+  line-height: 14px;
+  text-align: center;
+}
 .pin[data-confidence="low"] { border-style: dashed; }
 .pin[hidden] { display: none; }
 .pin-pending { opacity: 0.7; }
@@ -4778,6 +6186,43 @@ button { cursor: pointer; }
   overflow: hidden;
 }
 .card-body { padding: 12px; display: grid; gap: 10px; }
+.card[data-card="thread"] { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
+.thread { border-top: 1px solid var(--n-border); display: grid; min-height: 0; }
+.replies { display: grid; gap: 12px; padding: 12px; overflow-y: auto; max-height: 45vh; }
+.reply { display: grid; gap: 6px; }
+.avatar-sm { width: 20px; height: 20px; font-size: 9px; }
+.badge-owner { background: var(--n-accent-soft); color: var(--n-accent); }
+.reply-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 12px; flex-wrap: wrap; }
+.reply-form .field { flex: 1 1 100%; }
+/* A fixed size: growing on focus would move the Send button mid-click. */
+.reply-form .field-reply { flex: 1 1 0; min-height: 56px; height: 56px; resize: none; }
+.reactions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; }
+.reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--n-border);
+  border-radius: 999px;
+  background: var(--n-bg);
+  color: var(--n-fg);
+  font-size: 12px;
+}
+.reaction:hover { background: var(--n-bg-subtle); }
+.reaction[aria-pressed="true"] { border-color: var(--n-accent); background: var(--n-accent-soft); }
+.reaction-add { color: var(--n-fg-muted); padding: 0 6px; }
+.reaction-picker {
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--n-border);
+  border-radius: 999px;
+  background: var(--n-bg);
+  box-shadow: var(--n-shadow);
+}
+.reaction-picker .reaction { border-color: transparent; font-size: 14px; }
+.btn-xs { width: 24px; height: 24px; }
 .card-head { display: flex; align-items: center; gap: 8px; }
 .card-head .spacer { flex: 1; }
 .avatar {
@@ -4810,6 +6255,26 @@ button { cursor: pointer; }
 }
 .badge-ok { background: rgba(31,157,85,0.14); color: var(--n-ok); }
 .comment-body { white-space: pre-wrap; word-break: break-word; }
+.shot {
+  display: block;
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--n-bg-subtle);
+}
+.shot img { display: block; width: 100%; max-height: 160px; object-fit: cover; object-position: top; }
+.shot-preview { display: grid; gap: 4px; }
+.shot-preview img {
+  display: block;
+  width: 100%;
+  max-height: 200px;
+  /* The whole image, so the commenter sees everything that is attached. */
+  object-fit: contain;
+  border: 1px solid var(--n-border);
+  border-radius: 8px;
+  background: var(--n-bg-subtle);
+}
+.shot-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-fg-muted); }
 .field {
   width: 100%;
   padding: 8px 10px;
@@ -4932,14 +6397,74 @@ a.item { color: inherit; text-decoration: none; }
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
 }
+
+/* The toolbar's corner (the position option) */
+:host([data-position$="left"]) .toolbar { right: auto; left: 16px; }
+:host([data-position^="top"]) .toolbar { bottom: auto; top: 16px; }
+:host([data-position$="left"]) .panel { right: auto; left: 12px; }
+:host([data-position^="top"]) .panel { top: 72px; bottom: 12px; }
+:host([data-position^="top"]) .toast { bottom: auto; top: 72px; }
+@media (max-width: 640px) {
+  :host([data-position$="left"]) .toolbar { left: 12px; }
+  :host([data-position^="top"]) .toolbar { top: 12px; }
+}
 `;
 //#endregion
 //#region src/widget.ts
 const PICKING_CLASS = "nuni-picking";
+const PICK_EVENTS = [
+	"pointerdown",
+	"mousedown",
+	"pointerup",
+	"mouseup"
+];
+/** How far the pointer moves before a press becomes an area drag. */
+const DRAG_THRESHOLD = 6;
+/** The rectangles of a range that have a size (lines of text). */
+function lineRects(range) {
+	return Array.from(range.getClientRects()).filter((r) => r.width > 0 && r.height > 0);
+}
+/** An area comment's box on screen, from its element's box. */
+function regionBox(anchor, el) {
+	const region = anchor.region;
+	if (!region) return null;
+	const r = viewportRect(el, document);
+	return {
+		left: r.left + region.x * r.width,
+		top: r.top + region.y * r.height,
+		width: region.w * r.width,
+		height: region.h * r.height
+	};
+}
+const collapse = (text) => text.replace(/\s+/g, " ").trim();
+/** Run when the browser is idle, or soon. */
+function whenIdle(fn) {
+	if (typeof requestIdleCallback === "function") requestIdleCallback(fn, { timeout: 100 });
+	else setTimeout(fn, 0);
+}
+/** Same-origin iframe documents on the page, nested ones too. */
+function frameDocuments(doc, depth = 0) {
+	if (depth > 3) return [];
+	const out = [];
+	for (const frame of Array.from(doc.querySelectorAll("iframe"))) {
+		const inner = frameDocument(frame);
+		if (inner?.documentElement) out.push(inner, ...frameDocuments(inner, depth + 1));
+	}
+	return out;
+}
 const MOBILE_QUERY = "(max-width: 640px)";
 function isTypingTarget(target) {
-	if (!(target instanceof HTMLElement)) return false;
-	return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+	if (!target || target.nodeType !== 1) return false;
+	const el = target;
+	return el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
+}
+function dataUrl(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(blob);
+	});
 }
 function describeElement(el) {
 	const tag = el.tagName.toLowerCase();
@@ -4949,12 +6474,15 @@ function describeElement(el) {
 	return `${tag}${id}${cls}${text ? ` "${text}"` : ""}`;
 }
 var NuniWidget = class {
-	constructor(config) {
+	constructor(config, runtime) {
 		this.config = config;
+		this.runtime = runtime;
 		_defineProperty(this, "host", void 0);
 		_defineProperty(this, "root", void 0);
+		_defineProperty(this, "markLayer", void 0);
 		_defineProperty(this, "pinLayer", void 0);
 		_defineProperty(this, "overlayLayer", void 0);
+		_defineProperty(this, "selectButton", void 0);
 		_defineProperty(this, "uiLayer", void 0);
 		_defineProperty(this, "api", void 0);
 		_defineProperty(this, "cleanups", []);
@@ -4982,10 +6510,32 @@ var NuniWidget = class {
 		_defineProperty(this, "ownerName", null);
 		_defineProperty(this, "deepLinkId", null);
 		_defineProperty(this, "extraComment", null);
+		_defineProperty(this, "ownerDetail", null);
+		_defineProperty(this, "ownerDetailId", null);
+		_defineProperty(this, "ownerDetailLoaded", false);
+		_defineProperty(this, "ownerDetailUnsub", null);
+		_defineProperty(this, "thread", null);
+		_defineProperty(this, "threadId", null);
+		_defineProperty(this, "threadUnsub", null);
+		_defineProperty(this, "resolveRun", 0);
+		_defineProperty(this, "scopeWatchers", /* @__PURE__ */ new Map());
+		_defineProperty(this, "pickDocs", []);
+		_defineProperty(this, "dragStart", null);
+		_defineProperty(this, "dragBox", null);
+		_defineProperty(this, "dragEnded", false);
+		_defineProperty(this, "selection", null);
+		_defineProperty(this, "pointerDown", false);
+		_defineProperty(this, "selectionFrame", 0);
+		_defineProperty(this, "returnFocus", null);
+		_defineProperty(this, "focusNext", null);
+		_defineProperty(this, "confirming", null);
+		_defineProperty(this, "live", void 0);
 		_defineProperty(this, "layoutFrame", 0);
 		_defineProperty(this, "pinPositions", /* @__PURE__ */ new Map());
 		_defineProperty(this, "resolveTimer", 0);
+		_defineProperty(this, "i18n", void 0);
 		_defineProperty(this, "isIgnored", (el) => el === this.host || this.host.contains(el));
+		_defineProperty(this, "onFrameKey", (e) => this.onKeyDown(e));
 		_defineProperty(this, "swallow", (e) => {
 			if (!this.fromPage(e)) return;
 			if (e.type === "pointerdown" && e instanceof PointerEvent) {
@@ -4994,11 +6544,41 @@ var NuniWidget = class {
 					this.hoverEl = pickTarget(target);
 					this.renderHighlight();
 				}
+				this.dragEnded = false;
+				this.dragStart = e.pointerType !== "touch" && e.button === 0 && (target?.ownerDocument ?? null) === document ? {
+					x: e.clientX,
+					y: e.clientY
+				} : null;
 			}
+			if (e.type === "pointerup" && this.dragBox) {
+				const box = this.dragBox;
+				this.dragStart = null;
+				this.dragBox = null;
+				this.dragEnded = true;
+				setTimeout(() => {
+					this.dragEnded = false;
+					if (this.picking) this.commentOnArea(box);
+				}, 0);
+			} else if (e.type === "pointerup") this.dragStart = null;
 			e.preventDefault();
 			e.stopPropagation();
 		});
 		_defineProperty(this, "onPickMove", (e) => {
+			const start = this.dragStart;
+			if (start) {
+				const dx = e.clientX - start.x;
+				const dy = e.clientY - start.y;
+				if (this.dragBox || Math.hypot(dx, dy) > DRAG_THRESHOLD) {
+					this.dragBox = {
+						left: Math.min(start.x, e.clientX),
+						top: Math.min(start.y, e.clientY),
+						width: Math.abs(dx),
+						height: Math.abs(dy)
+					};
+					this.renderHighlight();
+					return;
+				}
+			}
 			const target = this.fromPage(e);
 			const next = target ? pickTarget(target) : null;
 			if (next === this.hoverEl) return;
@@ -5011,22 +6591,21 @@ var NuniWidget = class {
 			e.preventDefault();
 			e.stopPropagation();
 			e.stopImmediatePropagation();
+			if (this.dragEnded) return;
 			const element = pickTarget(target);
 			const anchor = captureAnchor(element, {
-				x: e.clientX,
-				y: e.clientY
-			}, { ignoreAttributePrefixes: [] });
-			this.setPicking(false);
-			this.card = {
-				kind: "composer",
-				draft: {
-					anchor,
-					element
-				}
-			};
-			this.render();
-			this.focusComposer();
+				x: e.clientX,
+				y: e.clientY
+			}, {
+				ignoreAttributePrefixes: [],
+				document
+			});
+			this.openComposer({
+				anchor,
+				element
+			});
 		});
+		this.i18n = createI18n(config.locale, config.messages);
 		let secret = read(KEYS.secret);
 		if (!secret) {
 			secret = generateSecret();
@@ -5037,15 +6616,56 @@ var NuniWidget = class {
 		this.host = document.createElement("div");
 		this.host.id = "nuni-root";
 		this.host.setAttribute("data-nuni", "");
+		this.applyAppearance();
 		this.root = this.host.attachShadow({ mode: "open" });
 		const style = document.createElement("style");
 		style.textContent = STYLES;
+		this.markLayer = h("div", {
+			class: "marks",
+			"aria-hidden": "true"
+		});
 		this.pinLayer = h("div", { class: "pins" });
 		this.overlayLayer = h("div", { class: "overlay" });
 		this.uiLayer = h("div", { class: "ui" });
-		this.root.append(style, this.pinLayer, this.overlayLayer, this.uiLayer);
+		this.selectButton = h("button", {
+			class: "select-btn",
+			type: "button",
+			hidden: true,
+			title: this.withKey("commentSelection", "commentSelectionKey"),
+			onmousedown: (e) => e.preventDefault(),
+			onpointerdown: (e) => e.preventDefault(),
+			onclick: () => this.commentOnSelection()
+		}, icon(ICONS.comment), this.t("comment"));
+		this.live = h("div", {
+			class: "sr",
+			role: "status",
+			"aria-live": "polite"
+		});
+		this.root.append(style, this.markLayer, this.pinLayer, this.overlayLayer, this.uiLayer, this.selectButton, this.live);
+		this.uiLayer.addEventListener("keydown", (e) => this.trapFocus(e));
 		this.api = new NuniApi(config);
 	}
+	t(key, vars) {
+		return this.i18n.t(key, vars);
+	}
+	/** A message that names the hotkey, or the plain one when it is off. */
+	withKey(plain, keyed) {
+		const key = this.config.hotkey;
+		return key ? this.t(keyed, { key: key.toUpperCase() }) : this.t(plain);
+	}
+	/** Position, theme, brand color and stacking order from the options. */
+	applyAppearance() {
+		const { position, theme, accentColor, zIndex } = this.config;
+		this.host.dataset.position = position;
+		this.host.dataset.theme = theme;
+		if (zIndex !== null) this.host.style.zIndex = String(zIndex);
+		const rgb = accentColor ? parseColor(accentColor) : null;
+		if (!rgb) return;
+		const [r, g, b] = rgb;
+		this.host.style.setProperty("--n-accent", `rgb(${r}, ${g}, ${b})`);
+		this.host.style.setProperty("--n-accent-soft", `rgba(${r}, ${g}, ${b}, 0.14)`);
+		this.host.style.setProperty("--n-accent-fg", readableOn(rgb));
+	}
 	start() {
 		document.body.appendChild(this.host);
 		sha256Hex(this.secret).then((hash) => {
@@ -5078,6 +6698,25 @@ var NuniWidget = class {
 		});
 		window.addEventListener("resize", onScroll, { passive: true });
 		window.addEventListener("message", onMessage);
+		const onSelection = () => this.scheduleSelection();
+		const onDown = (e) => {
+			if (e.composedPath().includes(this.host)) return;
+			this.pointerDown = true;
+			this.scheduleSelection();
+		};
+		const onUp = () => {
+			this.pointerDown = false;
+			this.scheduleSelection();
+		};
+		document.addEventListener("selectionchange", onSelection);
+		document.addEventListener("pointerdown", onDown, true);
+		document.addEventListener("pointerup", onUp, true);
+		this.cleanups.push(() => {
+			document.removeEventListener("selectionchange", onSelection);
+			document.removeEventListener("pointerdown", onDown, true);
+			document.removeEventListener("pointerup", onUp, true);
+			cancelAnimationFrame(this.selectionFrame);
+		});
 		this.cleanups.push(() => {
 			window.removeEventListener("keydown", onKey, true);
 			window.removeEventListener("scroll", onScroll, true);
@@ -5113,6 +6752,11 @@ var NuniWidget = class {
 		this.setPicking(false);
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
+		this.ownerDetailUnsub?.();
+		this.threadUnsub?.();
+		this.resolveRun++;
+		for (const stop of this.scopeWatchers.values()) stop();
+		this.scopeWatchers.clear();
 		for (const cleanup of this.cleanups) cleanup();
 		cancelAnimationFrame(this.layoutFrame);
 		clearTimeout(this.resolveTimer);
@@ -5122,7 +6766,7 @@ var NuniWidget = class {
 	}
 	currentPageKey() {
 		const url = new URL(location.href);
-		return this.config.getPageKey?.(url) ?? normalizePath(url);
+		return this.config.getPageKey(url);
 	}
 	subscribePage() {
 		const key = this.currentPageKey();
@@ -5140,7 +6784,7 @@ var NuniWidget = class {
 			const merged = extra && !comments.some((c) => c._id === extra._id) ? [...comments, extra] : comments;
 			this.comments = merged.sort((a, b) => a.createdAt - b.createdAt);
 			this.loaded = true;
-			this.resolvePlacements(false);
+			this.resolvePlacements(this.placements.size > 0, this.deepLinkId ?? void 0);
 			this.openDeepLink();
 			this.render();
 		}, () => {});
@@ -5149,7 +6793,7 @@ var NuniWidget = class {
 	watchSession(token) {
 		this.sessionUnsub?.();
 		this.sessionUnsub = this.api.onSession(token, (result) => {
-			if (result.valid) this.ownerName = result.ownerName ?? "Owner";
+			if (result.valid) this.ownerName = result.ownerName ?? this.t("owner");
 			else {
 				this.ownerName = null;
 				this.ownerToken = null;
@@ -5160,6 +6804,39 @@ var NuniWidget = class {
 			this.render();
 		});
 	}
+	/** Keep the owner-only details of the open thread subscribed. */
+	syncOwnerDetail() {
+		const token = this.ownerToken;
+		const id = this.card?.kind === "thread" && this.isOwner && token ? this.card.id : null;
+		if (id === this.ownerDetailId) return;
+		this.ownerDetailUnsub?.();
+		this.ownerDetailUnsub = null;
+		this.ownerDetail = null;
+		this.ownerDetailLoaded = false;
+		this.ownerDetailId = id;
+		if (!id || !token) return;
+		this.ownerDetailUnsub = this.api.onOwnerComment(id, token, (comment) => {
+			if (this.ownerDetailId !== id) return;
+			this.ownerDetail = comment;
+			this.ownerDetailLoaded = true;
+			this.render();
+		});
+	}
+	/** Keep the open thread's replies and reactions subscribed. */
+	syncThread() {
+		const id = this.card?.kind === "thread" ? this.card.id : null;
+		if (id === this.threadId) return;
+		this.threadUnsub?.();
+		this.threadUnsub = null;
+		this.thread = null;
+		this.threadId = id;
+		if (!id) return;
+		this.threadUnsub = this.api.onThread(id, (thread) => {
+			if (this.threadId !== id) return;
+			this.thread = thread;
+			this.render();
+		});
+	}
 	get isOwner() {
 		return Boolean(this.ownerToken && this.ownerName);
 	}
@@ -5173,38 +6850,165 @@ var NuniWidget = class {
 		clearTimeout(this.resolveTimer);
 		this.resolveTimer = window.setTimeout(() => this.resolvePlacements(true), 200);
 	}
+	stillPlaced(comment) {
+		const current = this.placements.get(comment._id);
+		if (!current?.element?.isConnected) return false;
+		const quote = comment.anchor.quote;
+		if (quote) return current.range !== void 0 && collapse(current.range.toString()) === quote.exact;
+		const text = elementText(current.element);
+		const expected = comment.anchor.text;
+		return !expected || text === expected || textSimilarity(text, expected) > .8;
+	}
 	/**
 	* Find each comment's element. With `onlyStale`, keep placements whose
 	* element is still attached and still looks like what was captured.
+	* Works in slices of about 8 ms, so a page with many pins stays
+	* responsive; `first` (a deep-linked comment) is found right away.
 	*/
-	resolvePlacements(onlyStale) {
+	resolvePlacements(onlyStale, first) {
+		const run = ++this.resolveRun;
 		const ids = new Set(this.comments.map((c) => c._id));
 		for (const id of this.placements.keys()) if (!ids.has(id)) this.placements.delete(id);
-		for (const comment of this.comments) {
-			const current = this.placements.get(comment._id);
-			if (onlyStale && current?.element && current.element.isConnected) {
-				const text = elementText(current.element);
-				const expected = comment.anchor.text;
-				if (!expected || text === expected || textSimilarity(text, expected) > .8) continue;
+		const queue = this.comments.filter((c) => !(onlyStale && this.stillPlaced(c)));
+		const index = first ? queue.findIndex((c) => c._id === first) : -1;
+		if (index > 0) queue.unshift(...queue.splice(index, 1));
+		const cache = createResolveCache();
+		const options = {
+			isIgnored: this.isIgnored,
+			document
+		};
+		const slice = () => {
+			if (run !== this.resolveRun) return;
+			const started = performance.now();
+			while (queue.length) {
+				const comment = queue.shift();
+				const result = resolveAnchor(comment.anchor, document, options, cache);
+				this.placements.set(comment._id, {
+					element: result.element,
+					confidence: result.confidence,
+					range: result.range
+				});
+				if (performance.now() - started > 8) break;
+			}
+			this.watchScopes();
+			this.renderPins();
+			this.layout();
+			if (queue.length) whenIdle(slice);
+			else if ((onlyStale || run > 1) && this.panelOpen) this.render();
+		};
+		slice();
+	}
+	/**
+	* Pins inside shadow roots and iframes: the page's observers don't see
+	* changes or scrolling in there, so watch each of those scopes too.
+	*/
+	watchScopes() {
+		const roots = /* @__PURE__ */ new Set();
+		for (const { element } of this.placements.values()) {
+			let node = element;
+			for (let depth = 0; node && depth < 8; depth++) {
+				const root = scopeRootOf(node);
+				if (root === document) break;
+				roots.add(root);
+				node = isShadowRoot(root) ? root.host : frameElementOf(root);
 			}
-			const result = resolveAnchor(comment.anchor, document, { isIgnored: this.isIgnored });
-			this.placements.set(comment._id, {
-				element: result.element,
-				confidence: result.confidence
-			});
 		}
-		this.renderPins();
-		this.layout();
-		if (onlyStale && this.panelOpen) this.render();
+		for (const [root, stop] of this.scopeWatchers) if (!roots.has(root)) {
+			stop();
+			this.scopeWatchers.delete(root);
+		}
+		for (const root of roots) if (!this.scopeWatchers.has(root)) this.scopeWatchers.set(root, this.watchScope(root));
+	}
+	watchScope(root) {
+		const observer = new MutationObserver(() => this.scheduleResolve());
+		const doc = isShadowRoot(root) ? null : root;
+		observer.observe(doc ? doc.body ?? doc.documentElement : root, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"hidden",
+				"open",
+				"id"
+			]
+		});
+		const onScroll = () => this.scheduleLayout();
+		const target = doc?.defaultView ?? root;
+		target.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
+		doc?.defaultView?.addEventListener("resize", onScroll, { passive: true });
+		return () => {
+			observer.disconnect();
+			target.removeEventListener("scroll", onScroll, true);
+			doc?.defaultView?.removeEventListener("resize", onScroll);
+		};
 	}
 	pinPoint(comment) {
-		const el = this.placements.get(comment._id)?.element;
+		const placement = this.placements.get(comment._id);
+		const el = placement?.element;
 		if (!el || !isRendered(el)) return null;
-		const r = el.getBoundingClientRect();
+		if (viewportRect(el, document).clipped) return null;
+		return this.anchorPoint(comment.anchor, el, placement.range);
+	}
+	/**
+	* Where a pin goes: after the last selected word for a text comment, the
+	* top-right corner of an area, or where the element was clicked.
+	*/
+	anchorPoint(anchor, el, range) {
+		if (range && range.startContainer.ownerDocument === document) {
+			const last = lineRects(range).at(-1);
+			if (last) return {
+				x: last.right,
+				y: last.top + last.height / 2
+			};
+		}
+		const r = viewportRect(el, document);
 		return {
-			x: r.left + comment.anchor.offset.x * r.width,
-			y: r.top + comment.anchor.offset.y * r.height
+			x: r.left + anchor.offset.x * r.width,
+			y: r.top + anchor.offset.y * r.height
+		};
+	}
+	/**
+	* Text comments underline their words, and the open comment (or the one
+	* being written) also shows its words or its area strongly.
+	*/
+	renderMarks() {
+		const marks = [];
+		const add = (box, cls) => {
+			const mark = h("div", { class: cls });
+			Object.assign(mark.style, {
+				left: `${box.left}px`,
+				top: `${box.top}px`,
+				width: `${box.width}px`,
+				height: `${box.height}px`
+			});
+			marks.push(mark);
 		};
+		const show = (anchor, el, range, active) => {
+			if (!el) return;
+			if (range && range.startContainer.ownerDocument === document) for (const r of lineRects(range)) add(r, active ? "mark mark-active" : "mark");
+			if (active) {
+				const box = regionBox(anchor, el);
+				if (box) add(box, "area");
+			}
+		};
+		if (this.card?.kind === "composer") {
+			const { draft } = this.card;
+			show(draft.anchor, draft.element, draft.range, true);
+		}
+		for (const comment of this.visibleComments()) {
+			const placement = this.placements.get(comment._id);
+			const active = this.activeId === comment._id;
+			if (!active && (comment.status !== "open" || !comment.anchor.quote)) continue;
+			if (this.pins.get(comment._id)?.hidden) continue;
+			show(comment.anchor, placement?.element, placement?.range, active);
+		}
+		this.markLayer.replaceChildren(...marks);
 	}
 	scheduleLayout() {
 		if (this.layoutFrame) return;
@@ -5237,63 +7041,224 @@ var NuniWidget = class {
 			});
 			pin.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
 		}
+		this.renderMarks();
 		this.positionCard();
-		if (this.picking && this.hoverEl) this.renderHighlight();
+		if (this.picking && (this.hoverEl || this.dragBox)) this.renderHighlight();
+		this.placeSelectButton();
 	}
 	setPicking(on) {
 		if (this.picking === on) return;
 		this.picking = on;
 		const html = document.documentElement;
+		this.dragStart = null;
+		this.dragBox = null;
 		if (on) {
 			this.card = null;
 			if (window.matchMedia(MOBILE_QUERY).matches) this.panelOpen = false;
-			html.classList.add(PICKING_CLASS);
-			this.injectCursorStyle();
-			document.addEventListener("pointermove", this.onPickMove, true);
-			document.addEventListener("click", this.onPickClick, true);
-			for (const type of [
-				"pointerdown",
-				"mousedown",
-				"pointerup",
-				"mouseup"
-			]) document.addEventListener(type, this.swallow, {
-				capture: true,
-				passive: false
-			});
+			this.pickDocs = [document, ...frameDocuments(document)];
+			for (const doc of this.pickDocs) {
+				doc.documentElement.classList.add(PICKING_CLASS);
+				this.injectCursorStyle(doc);
+				doc.addEventListener("pointermove", this.onPickMove, true);
+				doc.addEventListener("click", this.onPickClick, true);
+				for (const type of PICK_EVENTS) doc.addEventListener(type, this.swallow, {
+					capture: true,
+					passive: false
+				});
+				if (doc !== document) doc.addEventListener("keydown", this.onFrameKey, true);
+			}
 		} else {
 			html.classList.remove(PICKING_CLASS);
 			this.hoverEl = null;
-			document.removeEventListener("pointermove", this.onPickMove, true);
-			document.removeEventListener("click", this.onPickClick, true);
-			for (const type of [
-				"pointerdown",
-				"mousedown",
-				"pointerup",
-				"mouseup"
-			]) document.removeEventListener(type, this.swallow, true);
+			for (const doc of this.pickDocs) {
+				doc.documentElement?.classList.remove(PICKING_CLASS);
+				doc.removeEventListener("pointermove", this.onPickMove, true);
+				doc.removeEventListener("click", this.onPickClick, true);
+				for (const type of PICK_EVENTS) doc.removeEventListener(type, this.swallow, true);
+				doc.removeEventListener("keydown", this.onFrameKey, true);
+			}
+			this.pickDocs = [];
 		}
 		this.render();
 	}
-	injectCursorStyle() {
-		if (document.getElementById("nuni-cursor-style")) return;
-		const style = document.createElement("style");
+	injectCursorStyle(doc) {
+		if (doc.getElementById("nuni-cursor-style")) return;
+		const style = doc.createElement("style");
 		style.id = "nuni-cursor-style";
 		style.textContent = `html.${PICKING_CLASS}, html.${PICKING_CLASS} * { cursor: crosshair !important; }`;
-		document.head.appendChild(style);
+		(doc.head ?? doc.documentElement).appendChild(style);
 		this.cleanups.push(() => style.remove());
 	}
+	/**
+	* The element the event happened on, inside open shadow roots too
+	* (composedPath), and never Nuni's own UI.
+	*/
 	fromPage(e) {
-		if (e.composedPath().includes(this.host)) return null;
-		const target = e.target;
-		return target instanceof Element ? target : null;
+		const path = e.composedPath();
+		if (path.includes(this.host)) return null;
+		const target = path[0] ?? e.target;
+		return target && target.nodeType === 1 ? target : null;
+	}
+	/** An area drawn while picking: anchored to the element that covers it. */
+	commentOnArea(box) {
+		const element = areaContainer(document, box, this.isIgnored);
+		const anchor = captureArea(element, box, {
+			ignoreAttributePrefixes: [],
+			document
+		});
+		this.openComposer({
+			anchor,
+			element
+		});
+	}
+	/** The page's selected text, if it can take a text comment. */
+	pageSelection() {
+		const selection = document.getSelection();
+		if (!selection || selection.isCollapsed || !selection.rangeCount) return null;
+		const range = selection.getRangeAt(0);
+		const node = range.commonAncestorContainer;
+		const el = node.nodeType === 1 ? node : node.parentElement;
+		if (!el || el === this.host || this.host.contains(el)) return null;
+		if (el.closest("input, textarea, select, [contenteditable]")) return null;
+		if (el.closest("[data-nuni]")) return null;
+		return collapse(range.toString()) ? range : null;
+	}
+	commentOnSelection() {
+		const range = this.pageSelection();
+		if (!range) return;
+		const captured = captureSelection(range, {
+			ignoreAttributePrefixes: [],
+			document
+		});
+		if (!captured) return;
+		const kept = range.cloneRange();
+		document.getSelection()?.removeAllRanges();
+		this.selection = null;
+		this.openComposer({
+			...captured,
+			range: kept
+		});
+	}
+	scheduleSelection() {
+		if (this.selectionFrame) return;
+		this.selectionFrame = requestAnimationFrame(() => {
+			this.selectionFrame = 0;
+			this.selection = this.picking || this.pointerDown ? null : this.pageSelection();
+			this.placeSelectButton();
+		});
+	}
+	/** A small "Comment" button under the selected text. */
+	placeSelectButton() {
+		const button = this.selectButton;
+		const range = this.selection;
+		const last = range ? lineRects(range).at(-1) : void 0;
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		if (!range || !last || last.bottom < 0 || last.top > vh) {
+			button.hidden = true;
+			return;
+		}
+		button.hidden = false;
+		const width = button.offsetWidth || 96;
+		const height = button.offsetHeight || 32;
+		let top = last.bottom + 8;
+		if (top + height > vh - 8) top = last.top - height - 8;
+		const left = Math.max(8, Math.min(last.right - width / 2, vw - width - 8));
+		button.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+	}
+	openComposer(draft) {
+		const { element } = draft;
+		this.setPicking(false);
+		if (this.config.capture.dom) try {
+			draft.dom = domContext(element);
+		} catch {}
+		this.card = {
+			kind: "composer",
+			draft
+		};
+		this.activeId = null;
+		this.render();
+		this.focusComposer();
+		this.takeScreenshot(draft);
+	}
+	/** Capture while the person types, so posting stays instant. */
+	async takeScreenshot(draft) {
+		const load = this.runtime.loadScreenshot;
+		if (!load || draft.element.ownerDocument !== document) return;
+		const accent = getComputedStyle(this.host).getPropertyValue("--n-accent").trim() || "#d6246e";
+		try {
+			await new Promise((resolve) => setTimeout(resolve, 60));
+			const capture = await load();
+			const { range, anchor, element } = draft;
+			const focus = range ? () => range.getBoundingClientRect() : anchor.region ? () => {
+				const box = regionBox(anchor, element);
+				return {
+					left: box.left,
+					top: box.top,
+					right: box.left + box.width,
+					bottom: box.top + box.height
+				};
+			} : void 0;
+			const blob = capture ? await capture(element, {
+				exclude: this.host,
+				accent,
+				focus
+			}) : null;
+			if (!blob || !this.isComposing(draft) || draft.sending) return;
+			const preview = await dataUrl(blob);
+			if (!this.isComposing(draft) || draft.sending) return;
+			draft.screenshot = {
+				blob,
+				preview
+			};
+			this.render();
+		} catch {}
+	}
+	isComposing(draft) {
+		return this.card?.kind === "composer" && this.card.draft === draft;
+	}
+	collectContext(draft) {
+		const { collectors } = this.runtime;
+		const context = {};
+		const logs = collectors.console();
+		const failed = collectors.network();
+		if (logs.length) context.console = logs;
+		if (failed.length) context.network = failed;
+		if (draft.dom) context.dom = draft.dom;
+		return Object.keys(context).length ? context : void 0;
+	}
+	async attachScreenshot(id, image) {
+		try {
+			await this.api.uploadScreenshot(id, this.secret, image);
+		} catch {}
+	}
+	copyForAgent(comment) {
+		const detail = this.ownerDetail?._id === comment._id ? this.ownerDetail : null;
+		const replies = this.threadId === comment._id ? this.thread?.replies : void 0;
+		copyText(buildCommentPrompt(detail ?? {
+			...comment,
+			replies
+		}, { includeContext: Boolean(detail) })).then((ok) => this.showToast(ok ? this.t("copied") : this.t("copyFailed")));
 	}
 	renderHighlight() {
 		this.overlayLayer.replaceChildren();
 		if (!this.picking) return;
-		this.overlayLayer.append(h("div", { class: "pick-hint" }, "Click anything to comment · Esc to cancel"));
+		const mobile = window.matchMedia(MOBILE_QUERY).matches;
+		this.overlayLayer.append(h("div", { class: "pick-hint" }, mobile ? this.t("pickHintMobile") : [h("span", {}, this.t("pickHint")), h("span", { class: "pick-keys" }, this.t("pickHintKeys"))]));
+		if (this.dragBox) {
+			const box = h("div", { class: "highlight drag-box" });
+			Object.assign(box.style, {
+				left: `${this.dragBox.left}px`,
+				top: `${this.dragBox.top}px`,
+				width: `${this.dragBox.width}px`,
+				height: `${this.dragBox.height}px`
+			});
+			this.overlayLayer.append(box);
+			return;
+		}
 		const el = this.hoverEl;
-		if (!el || el === document.documentElement) return;
-		const r = el.getBoundingClientRect();
+		if (!el || el === el.ownerDocument.documentElement) return;
+		const r = viewportRect(el, document);
 		const box = h("div", { class: "highlight" }, h("span", { class: "highlight-label" }, describeElement(el)));
 		Object.assign(box.style, {
 			left: `${r.left - 2}px`,
@@ -5306,19 +7271,171 @@ var NuniWidget = class {
 	onKeyDown(e) {
 		const inWidget = e.composedPath().includes(this.host);
 		if (e.key === "Escape") {
-			if (this.picking) this.setPicking(false);
+			if (this.confirming) this.answer(false);
+			else if (this.picking) this.setPicking(false);
 			else if (this.card) this.closeCard();
 			else if (this.panelOpen) this.togglePanel(false);
 			else return;
 			e.stopPropagation();
 			return;
 		}
-		if (inWidget || isTypingTarget(e.target) || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return;
-		if (e.key === "c" || e.key === "C") {
+		if (isTypingTarget(e.composedPath()[0] ?? e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
+		if (this.picking && !inWidget && this.onPickKey(e)) return;
+		if (inWidget && this.confirming) return;
+		if (e.repeat) return;
+		const hotkey = this.config.hotkey;
+		if (hotkey && e.key.toLowerCase() === hotkey) {
+			e.preventDefault();
+			if (!this.picking && this.pageSelection()) this.commentOnSelection();
+			else this.setPicking(!this.picking);
+		}
+	}
+	/**
+	* Picking without a mouse: arrows move to the parent, first child and
+	* siblings; Enter comments on the highlighted element.
+	*/
+	onPickKey(e) {
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight",
+			"Enter"
+		].includes(e.key)) return false;
+		e.preventDefault();
+		e.stopPropagation();
+		let el = this.hoverEl;
+		if (!el || !el.isConnected) {
+			this.movePickTo(this.keyboardStart());
+			return true;
+		}
+		if (e.key === "Enter") {
+			const r = el.getBoundingClientRect();
+			const anchor = captureAnchor(el, {
+				x: r.left + r.width / 2,
+				y: r.top + r.height / 2
+			}, {
+				ignoreAttributePrefixes: [],
+				document
+			});
+			this.openComposer({
+				anchor,
+				element: el
+			});
+			return true;
+		}
+		const visible = (n) => {
+			while (n && (n === this.host || !isRendered(n))) n = e.key === "ArrowLeft" ? n.previousElementSibling : n.nextElementSibling;
+			return n;
+		};
+		const body = el.ownerDocument.body;
+		if (e.key === "ArrowUp") {
+			if (el.parentElement && el !== body) el = el.parentElement;
+		} else if (e.key === "ArrowDown") el = visible(el.firstElementChild) ?? el;
+		else if (e.key === "ArrowLeft") el = visible(el.previousElementSibling) ?? el;
+		else el = visible(el.nextElementSibling) ?? el;
+		this.movePickTo(el);
+		return true;
+	}
+	/** Keyboard picking starts at the focused element, or mid-screen. */
+	keyboardStart() {
+		const focused = document.activeElement;
+		if (focused && focused !== document.body && focused !== this.host) return focused;
+		const middle = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2).find((el) => !this.isIgnored(el));
+		return middle ? pickTarget(middle) : document.body;
+	}
+	movePickTo(el) {
+		this.hoverEl = el;
+		el.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		this.live.textContent = this.t("picked", { element: describeElement(el) });
+		this.renderHighlight();
+	}
+	/** Tab stays inside an open card, the panel or a dialog. */
+	trapFocus(e) {
+		if (e.key !== "Tab") return;
+		const box = e.composedPath()[0]?.closest?.(".confirm, [data-card], .panel");
+		if (!box) return;
+		const items = Array.from(box.querySelectorAll("button:not([disabled]), input, textarea, a[href], [tabindex=\"0\"]")).filter((el) => !el.closest("[hidden]"));
+		if (!items.length) return;
+		const first = items[0];
+		const last = items[items.length - 1];
+		const active = this.root.activeElement;
+		if (e.shiftKey && active === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && active === last) {
 			e.preventDefault();
-			this.setPicking(!this.picking);
+			first.focus();
 		}
 	}
+	/** Remember where focus was, before moving it into the widget. */
+	keepFocus() {
+		if (this.returnFocus) return;
+		const inside = this.root.activeElement;
+		if (inside) {
+			this.returnFocus = inside.dataset.focusKey ?? inside;
+			return;
+		}
+		const active = document.activeElement;
+		this.returnFocus = active && active !== document.body && active !== this.host ? active : null;
+	}
+	/** Back to where focus was before (when that is still there). */
+	restoreFocus() {
+		const back = this.returnFocus;
+		this.returnFocus = null;
+		const target = typeof back === "string" ? this.uiLayer.querySelector(`[data-focus-key="${back}"]`) : back;
+		if (target?.isConnected) target.focus({ preventScroll: true });
+	}
+	/** An "are you sure?" dialog inside the widget. */
+	ask(message, action) {
+		this.confirming?.done(false);
+		const from = this.root.activeElement?.dataset.focusKey ?? null;
+		return new Promise((resolve) => {
+			this.confirming = {
+				message,
+				action,
+				done: resolve,
+				from
+			};
+			this.focusNext = "[data-focus-key=\"confirm-cancel\"]";
+			this.render();
+		});
+	}
+	answer(ok) {
+		const confirming = this.confirming;
+		if (!confirming) return;
+		this.confirming = null;
+		if (!ok && confirming.from) this.focusNext = `[data-focus-key="${confirming.from}"]`;
+		this.render();
+		confirming.done(ok);
+	}
+	renderConfirm() {
+		const c = this.confirming;
+		if (!c) return null;
+		return h("div", {
+			class: "confirm-backdrop",
+			onclick: () => this.answer(false)
+		}, h("div", {
+			class: "confirm",
+			role: "alertdialog",
+			"aria-modal": "true",
+			"aria-labelledby": "nuni-confirm-text",
+			onclick: (e) => e.stopPropagation()
+		}, h("p", { id: "nuni-confirm-text" }, c.message), h("div", { class: "row" }, h("span", { class: "spacer" }), h("button", {
+			class: "btn btn-ghost",
+			type: "button",
+			"data-focus-key": "confirm-cancel",
+			onclick: () => this.answer(false)
+		}, this.t("cancel")), h("button", {
+			class: "btn btn-danger-solid",
+			type: "button",
+			"data-focus-key": "confirm-ok",
+			onclick: () => this.answer(true)
+		}, c.action))));
+	}
 	openClaim() {
 		const url = new URL(`${this.config.appUrl}/dashboard/claim`);
 		url.searchParams.set("project", this.config.project);
@@ -5339,7 +7456,7 @@ var NuniWidget = class {
 		this.ownerToken = data.token;
 		write(KEYS.session(this.config.project), data.token);
 		this.watchSession(data.token);
-		this.showToast("You're signed in as the owner");
+		this.showToast(this.t("signedIn"));
 	}
 	readDeepLink() {
 		const url = new URL(location.href);
@@ -5360,12 +7477,12 @@ var NuniWidget = class {
 		}
 		this.api.getComment(id).then((found) => {
 			if (!found || found.page.path !== this.pageKey) {
-				this.showToast("That comment was deleted or is on another page");
+				this.showToast(this.t("linkGone"));
 				return;
 			}
 			this.extraComment = found;
 			this.comments = [...this.comments.filter((c) => c._id !== found._id), found];
-			this.resolvePlacements(false);
+			this.resolvePlacements(false, found._id);
 			this.focusDeepLinked(found);
 		});
 	}
@@ -5377,11 +7494,7 @@ var NuniWidget = class {
 			block: "center",
 			behavior: "smooth"
 		});
-		this.activeId = id;
-		this.card = {
-			kind: "thread",
-			id
-		};
+		this.openThread(id);
 		if (window.matchMedia(MOBILE_QUERY).matches) this.panelOpen = false;
 		this.render();
 		setTimeout(() => this.scheduleLayout(), 400);
@@ -5389,15 +7502,16 @@ var NuniWidget = class {
 	async submitDraft(draft, body, name) {
 		const cleanName = name.trim().slice(0, LIMITS.nameMaxLength);
 		const cleanBody = body.trim();
-		if (!cleanName) return this.setDraftError(draft, "Enter your name");
-		if (!cleanBody) return this.setDraftError(draft, "Write a comment first");
-		if (cleanBody.length > LIMITS.bodyMaxLength) return this.setDraftError(draft, `Comments are limited to ${LIMITS.bodyMaxLength} characters`);
+		if (!cleanName) return this.setDraftError(draft, this.t("enterName"));
+		if (!cleanBody) return this.setDraftError(draft, this.t("writeFirst"));
+		if (cleanBody.length > LIMITS.bodyMaxLength) return this.setDraftError(draft, this.t("commentTooLong", { count: LIMITS.bodyMaxLength }));
 		this.name = cleanName;
 		write(KEYS.name, cleanName);
 		draft.sending = true;
 		draft.error = void 0;
 		this.render();
 		const loc = describeLocation(location.href);
+		const shot = draft.screenshot;
 		try {
 			const id = await this.api.createComment({
 				body: cleanBody,
@@ -5413,17 +7527,20 @@ var NuniWidget = class {
 					w: window.innerWidth,
 					h: window.innerHeight,
 					dpr: window.devicePixelRatio || 1
-				}
+				},
+				context: this.collectContext(draft)
 			});
+			if (shot) this.attachScreenshot(id, shot.blob);
 			this.placements.set(id, {
 				element: draft.element,
-				confidence: "exact"
+				confidence: "exact",
+				range: draft.range
 			});
 			if (this.card?.kind === "composer" && this.card.draft === draft) this.card = null;
-			this.showToast("Comment added");
+			this.showToast(this.t("added"));
 		} catch (error) {
 			draft.sending = false;
-			draft.error = error instanceof NuniApiError ? error.message : "Couldn't post the comment";
+			draft.error = error instanceof NuniApiError ? error.message : this.t("postFailed");
 		}
 		this.render();
 	}
@@ -5451,7 +7568,7 @@ var NuniWidget = class {
 		} catch (error) {
 			if (this.card?.kind === "thread" && this.card.id === id) {
 				this.card.busy = false;
-				this.card.error = error instanceof Error ? error.message : "Something went wrong";
+				this.card.error = error instanceof Error ? error.message : this.t("failed");
 			}
 			this.render();
 			return false;
@@ -5460,21 +7577,21 @@ var NuniWidget = class {
 	resolveComment(c) {
 		const token = this.ownerToken;
 		if (!token) return;
-		this.act(c._id, () => this.api.resolve(c._id, token), "Resolved").then((ok) => {
+		this.act(c._id, () => this.api.resolve(c._id, token), this.t("resolved")).then((ok) => {
 			if (ok && !(this.panelOpen && this.tab === "resolved") && this.card?.kind === "thread" && this.card.id === c._id) this.closeCard();
 		});
 	}
 	reopenComment(c) {
 		const token = this.ownerToken;
 		if (!token) return;
-		this.act(c._id, () => this.api.reopen(c._id, token), "Reopened");
+		this.act(c._id, () => this.api.reopen(c._id, token), this.t("reopened"));
 	}
-	deleteComment(c) {
-		if (!window.confirm("Delete this comment? This can't be undone.")) return;
+	async deleteComment(c) {
+		if (!await this.ask(this.t("confirmDeleteComment"), this.t("delete"))) return;
 		const token = this.ownerToken;
 		const action = this.isMine(c) ? () => this.api.deleteOwn(c._id, this.secret) : token ? () => this.api.remove(c._id, token) : null;
 		if (!action) return;
-		this.act(c._id, action, "Deleted").then((ok) => {
+		this.act(c._id, action, this.t("deleted")).then((ok) => {
 			if (!ok) return;
 			if (this.extraComment?._id === c._id) this.extraComment = null;
 			this.comments = this.comments.filter((x) => x._id !== c._id);
@@ -5482,8 +7599,72 @@ var NuniWidget = class {
 			this.closeCard();
 		});
 	}
+	isMyReply(reply) {
+		return Boolean(this.secretHash) && reply.authorKeyHash === this.secretHash;
+	}
+	async sendReply(comment, body, name) {
+		const card = this.card;
+		if (card?.kind !== "thread" || card.id !== comment._id) return;
+		const authorName = (this.isOwner ? this.ownerName : name)?.trim().slice(0, LIMITS.nameMaxLength);
+		const clean = body.trim();
+		if (!clean) return;
+		if (!authorName) {
+			card.error = this.t("enterName");
+			this.render();
+			return;
+		}
+		if (clean.length > LIMITS.bodyMaxLength) {
+			card.error = this.t("replyTooLong", { count: LIMITS.bodyMaxLength });
+			this.render();
+			return;
+		}
+		if (!this.isOwner) {
+			this.name = authorName;
+			write(KEYS.name, authorName);
+		}
+		card.sendingReply = true;
+		card.error = void 0;
+		this.render();
+		try {
+			await this.api.createReply({
+				commentId: comment._id,
+				body: clean,
+				authorName,
+				authorSecret: this.secret,
+				sessionToken: this.ownerToken ?? void 0
+			});
+			const box = this.uiLayer.querySelector("[data-focus-key=\"reply\"]");
+			if (box) box.value = "";
+		} catch (error) {
+			card.error = error instanceof NuniApiError ? error.message : this.t("replyFailed");
+		}
+		card.sendingReply = false;
+		this.render();
+	}
+	toggleReaction(comment, targetId, emoji) {
+		this.api.toggleReaction(comment._id, targetId, emoji, this.secret).catch((error) => {
+			if (this.card?.kind === "thread" && this.card.id === comment._id) {
+				this.card.error = error instanceof Error ? error.message : this.t("reactFailed");
+				this.render();
+			}
+		});
+	}
+	async deleteReply(comment, reply) {
+		if (!await this.ask(this.t("confirmDeleteReply"), this.t("delete"))) return;
+		const token = this.ownerToken;
+		const action = this.isMyReply(reply) ? () => this.api.deleteReply(reply._id, this.secret) : token ? () => this.api.removeReply(reply._id, token) : null;
+		if (action) this.act(comment._id, action, this.t("replyDeleted"));
+	}
+	saveReplyEdit(comment, reply, body) {
+		this.act(comment._id, () => this.api.editReply(reply._id, this.secret, body), this.t("saved")).then((ok) => {
+			if (ok && this.card?.kind === "thread") {
+				this.card.replyEditing = void 0;
+				this.render();
+			}
+		});
+	}
 	saveEdit(c, body) {
-		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body), "Saved");
+		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body), this.t("saved"));
 	}
 	showToast(message) {
 		this.toast = message;
@@ -5495,16 +7676,36 @@ var NuniWidget = class {
 		this.render();
 	}
 	togglePanel(open = !this.panelOpen) {
+		if (open === this.panelOpen) return;
 		this.panelOpen = open;
-		if (open && window.matchMedia(MOBILE_QUERY).matches) this.card = null;
+		if (open) {
+			this.keepFocus();
+			this.focusNext = ".panel [role=\"tab\"][aria-selected=\"true\"]";
+			if (window.matchMedia(MOBILE_QUERY).matches) this.card = null;
+		}
 		this.render();
+		if (!open && !this.card) this.restoreFocus();
 	}
 	closeCard() {
+		const had = this.card !== null;
 		this.card = null;
 		this.activeId = null;
 		this.render();
+		if (had && !this.panelOpen) this.restoreFocus();
+	}
+	/** Open a comment's thread and move focus into it. */
+	openThread(id) {
+		this.keepFocus();
+		this.activeId = id;
+		this.card = {
+			kind: "thread",
+			id
+		};
+		this.focusNext = "[data-card=\"thread\"] .card-head button";
 	}
 	render() {
+		this.syncOwnerDetail();
+		this.syncThread();
 		this.renderPins();
 		this.renderUi();
 		this.renderHighlight();
@@ -5530,11 +7731,7 @@ var NuniWidget = class {
 					e.stopPropagation();
 					if (this.card?.kind === "thread" && this.card.id === id) this.closeCard();
 					else {
-						this.activeId = id;
-						this.card = {
-							kind: "thread",
-							id
-						};
+						this.openThread(id);
 						this.render();
 					}
 				});
@@ -5543,7 +7740,12 @@ var NuniWidget = class {
 			}
 			pin.textContent = initials(comment.authorName);
 			pin.style.background = colorFor(comment.authorName);
-			pin.setAttribute("aria-label", `Comment by ${comment.authorName}: ${comment.body.slice(0, 80)}`);
+			pin.setAttribute("aria-label", this.t("pinLabel", {
+				name: comment.authorName,
+				body: comment.body.slice(0, 80)
+			}));
+			if (comment.replyCount) pin.dataset.replies = String(comment.replyCount);
+			else delete pin.dataset.replies;
 			pin.dataset.status = comment.status;
 			pin.dataset.active = String(this.activeId === comment._id);
 			pin.dataset.confidence = this.placements.get(comment._id)?.confidence ?? "lost";
@@ -5551,9 +7753,7 @@ var NuniWidget = class {
 		this.pinLayer.querySelector(".pin-draft")?.remove();
 		if (this.card?.kind === "composer") {
 			const { draft } = this.card;
-			const r = draft.element.getBoundingClientRect();
-			const x = r.left + draft.anchor.offset.x * r.width;
-			const y = r.top + draft.anchor.offset.y * r.height;
+			const { x, y } = this.anchorPoint(draft.anchor, draft.element, draft.range);
 			const pin = h("div", {
 				class: "pin pin-draft pin-pending",
 				"aria-hidden": "true"
@@ -5572,6 +7772,8 @@ var NuniWidget = class {
 			class: "toast",
 			role: "status"
 		}, this.toast));
+		const confirm = this.renderConfirm();
+		if (confirm) nodes.push(confirm);
 		const focused = this.root.activeElement;
 		const focusKey = focused?.dataset.focusKey;
 		const selection = focused instanceof HTMLTextAreaElement || focused instanceof HTMLInputElement ? {
@@ -5579,7 +7781,11 @@ var NuniWidget = class {
 			end: focused.selectionEnd
 		} : null;
 		this.uiLayer.replaceChildren(...nodes);
-		if (focusKey) {
+		const next = this.focusNext;
+		this.focusNext = null;
+		const wanted = next ? this.uiLayer.querySelector(next) : null;
+		if (wanted) wanted.focus();
+		else if (focusKey) {
 			const next = this.uiLayer.querySelector(`[data-focus-key="${focusKey}"]`);
 			next?.focus();
 			if (selection && (next instanceof HTMLTextAreaElement || next instanceof HTMLInputElement)) next.setSelectionRange(selection.start, selection.end);
@@ -5591,20 +7797,22 @@ var NuniWidget = class {
 		return h("div", {
 			class: "toolbar",
 			role: "toolbar",
-			"aria-label": "Nuni comments"
+			"aria-label": this.t("toolbar")
 		}, h("button", {
 			class: "tb-btn",
 			type: "button",
 			"aria-pressed": String(this.picking),
-			"aria-label": this.picking ? "Cancel adding a comment" : "Add a comment",
-			title: "Add a comment (C)",
+			"data-focus-key": "tb-comment",
+			"aria-label": this.picking ? this.t("cancelAdding") : this.t("addComment"),
+			title: this.withKey("addComment", "addCommentKey"),
 			onclick: () => this.setPicking(!this.picking)
-		}, icon(ICONS.comment), h("span", { class: "tb-label" }, this.picking ? "Pick an element" : "Comment")), h("button", {
+		}, icon(ICONS.comment), h("span", { class: "tb-label" }, this.picking ? this.t("pickElement") : this.config.label ?? this.t("comment"))), h("button", {
 			class: "tb-btn",
 			type: "button",
 			"aria-pressed": String(this.panelOpen),
-			"aria-label": `Comments on this page: ${open} open`,
-			title: "All comments",
+			"data-focus-key": "tb-panel",
+			"aria-label": this.t("openCount", { count: open }),
+			title: this.t("allComments"),
 			onclick: () => this.togglePanel()
 		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))));
 	}
@@ -5618,72 +7826,87 @@ var NuniWidget = class {
 		const item = (c) => h("button", {
 			class: "item",
 			type: "button",
+			"data-focus-key": `item-${c._id}`,
 			onclick: () => this.focusComment(c._id)
 		}, h("div", { class: "row" }, h("span", {
 			class: "avatar",
 			style: `background:${colorFor(c.authorName)}`
-		}, initials(c.authorName)), h("span", { class: "author" }, c.authorName), h("span", { class: "meta" }, timeAgo(c.createdAt)), c.page.origin !== location.origin ? h("span", {
+		}, initials(c.authorName)), h("span", { class: "author" }, c.authorName), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt) + (c.replyCount ? ` · ${this.t("replyCount", { count: c.replyCount })}` : "")), c.page.origin !== location.origin ? h("span", {
 			class: "badge",
 			title: c.page.origin
-		}, new URL(c.page.origin).host) : null), h("div", { class: "item-text" }, c.body));
+		}, new URL(c.page.origin).host) : null), c.anchor.quote ? h("div", { class: "item-quote" }, c.anchor.quote.exact) : null, h("div", { class: "item-text" }, c.body));
 		const children = [];
-		if (!this.loaded) children.push(h("div", { class: "empty" }, "Loading…"));
-		else if (!list.length) children.push(h("div", { class: "empty" }, this.tab === "open" ? "No open comments on this page. Press C to add one." : "Nothing resolved yet."));
+		if (!this.loaded) children.push(h("div", { class: "empty" }, this.t("loading")));
+		else if (!list.length) children.push(h("div", { class: "empty" }, this.tab === "open" ? this.withKey("noOpen", "noOpenKey") : this.t("noResolved")));
 		else {
 			children.push(...placed.map(item));
 			if (lost.length) {
-				children.push(h("div", { class: "section-label" }, "Couldn't find on this page"));
+				children.push(h("div", { class: "section-label" }, this.t("notFoundHere")));
 				children.push(...lost.map(item));
 			}
 		}
 		if (otherPages.length) {
-			children.push(h("div", { class: "section-label" }, "Other pages"));
+			children.push(h("div", { class: "section-label" }, this.t("otherPages")));
 			for (const p of otherPages.slice(0, 20)) {
-				const href = p.path.includes("#") ? location.origin + p.path : location.origin + p.path + location.search;
+				const href = /[?#]/.test(p.path) ? location.origin + p.path : location.origin + p.path + location.search;
 				children.push(h("a", {
 					class: "item",
 					href
-				}, h("div", { class: "row" }, h("span", { class: "author" }, p.path), h("span", { class: "spacer" }), h("span", { class: "badge" }, `${p.count} open`))));
+				}, h("div", { class: "row" }, h("span", { class: "author" }, p.path), h("span", { class: "spacer" }), h("span", { class: "badge" }, this.t("openOnPage", { count: p.count })))));
 			}
 		}
 		return h("div", {
 			class: "panel",
 			role: "dialog",
-			"aria-label": "Comments"
-		}, h("div", { class: "panel-head" }, h("div", { class: "panel-title" }, "Comments"), h("button", {
+			"aria-label": this.t("comments")
+		}, h("div", { class: "panel-head" }, h("div", { class: "panel-title" }, this.t("comments")), h("button", {
 			class: "btn btn-ghost btn-icon",
 			type: "button",
-			"aria-label": "Close",
+			"aria-label": this.t("close"),
 			onclick: () => this.togglePanel(false)
 		}, icon(ICONS.close))), h("div", {
 			class: "tabs",
-			role: "tablist"
-		}, h("button", {
-			class: "tab",
-			role: "tab",
-			type: "button",
-			"aria-selected": String(this.tab === "open"),
-			onclick: () => {
-				this.tab = "open";
+			role: "tablist",
+			"aria-label": this.t("comments"),
+			onkeydown: (e) => {
+				const key = e.key;
+				if (![
+					"ArrowLeft",
+					"ArrowRight",
+					"Home",
+					"End"
+				].includes(key)) return;
+				e.preventDefault();
+				this.tab = key === "Home" ? "open" : key === "End" ? "resolved" : this.tab === "open" ? "resolved" : "open";
+				this.focusNext = `[data-focus-key="tab-${this.tab}"]`;
 				this.render();
 			}
-		}, `Open (${open.length})`), h("button", {
+		}, ["open", "resolved"].map((tab) => h("button", {
 			class: "tab",
 			role: "tab",
 			type: "button",
-			"aria-selected": String(this.tab === "resolved"),
+			id: `nuni-tab-${tab}`,
+			"data-focus-key": `tab-${tab}`,
+			"aria-selected": String(this.tab === tab),
+			"aria-controls": "nuni-panel-list",
+			tabindex: this.tab === tab ? 0 : -1,
 			onclick: () => {
-				this.tab = "resolved";
+				this.tab = tab;
 				this.render();
 			}
-		}, `Resolved (${resolved.length})`)), h("div", { class: "panel-list" }, ...children), this.status && !this.status.claimed && !this.isOwner ? this.renderPanelFooter() : null);
+		}, tab === "open" ? this.t("tabOpen", { count: open.length }) : this.t("tabResolved", { count: resolved.length })))), h("div", {
+			class: "panel-list",
+			id: "nuni-panel-list",
+			role: "tabpanel",
+			"aria-labelledby": `nuni-tab-${this.tab}`
+		}, ...children), this.status && !this.status.claimed && !this.isOwner ? this.renderPanelFooter() : null);
 	}
 	renderPanelFooter() {
-		return h("div", { class: "panel-foot" }, h("div", { class: "row" }, h("span", { class: "meta" }, "Own this website?"), h("span", { class: "spacer" }), h("button", {
+		return h("div", { class: "panel-foot" }, h("div", { class: "row" }, h("span", { class: "meta" }, this.t("ownSite")), h("span", { class: "spacer" }), h("button", {
 			class: "btn",
 			type: "button",
 			onclick: () => this.openClaim()
-		}, icon(ICONS.github), "Claim Nuni")));
+		}, icon(ICONS.github), this.t("claim"))));
 	}
 	renderCard() {
 		const card = this.card;
@@ -5694,19 +7917,19 @@ var NuniWidget = class {
 			const needsName = !this.name;
 			const nameInput = h("input", {
 				class: "field",
-				placeholder: "Your name",
+				placeholder: this.t("yourName"),
 				value: this.name,
 				maxlength: LIMITS.nameMaxLength,
 				autocomplete: "name",
 				"data-focus-key": "name",
-				"aria-label": "Your name"
+				"aria-label": this.t("yourName")
 			});
 			const textarea = h("textarea", {
 				class: "field",
-				placeholder: "Leave a comment",
+				placeholder: this.t("leaveComment"),
 				maxlength: LIMITS.bodyMaxLength,
 				"data-focus-key": "body",
-				"aria-label": "Comment"
+				"aria-label": this.t("comment")
 			});
 			const prev = this.uiLayer.querySelector("[data-focus-key=\"body\"]");
 			if (prev) textarea.value = prev.value;
@@ -5736,18 +7959,28 @@ var NuniWidget = class {
 					this.name = "";
 					this.render();
 				}
-			}, "Not you?")), textarea, draft.error ? h("div", {
+			}, this.t("notYou"))), draft.anchor.quote ? h("blockquote", { class: "quote" }, draft.anchor.quote.exact) : null, textarea, draft.screenshot ? h("div", { class: "shot-preview" }, h("img", {
+				src: draft.screenshot.preview,
+				alt: this.t("screenshotAlt")
+			}), h("div", { class: "shot-note" }, h("span", {}, this.t("screenshotNote")), h("span", { class: "spacer" }), h("button", {
+				class: "link",
+				type: "button",
+				onclick: () => {
+					draft.screenshot = void 0;
+					this.render();
+				}
+			}, this.t("remove")))) : null, draft.error ? h("div", {
 				class: "error",
 				role: "alert"
-			}, draft.error) : null, h("div", { class: "row" }, h("span", { class: "kbd" }, "⌘ + Enter"), h("span", { class: "spacer" }), h("button", {
+			}, draft.error) : null, h("div", { class: "row" }, h("span", { class: "kbd" }, this.t("send", { key: this.i18n.mod })), h("span", { class: "spacer" }), h("button", {
 				class: "btn btn-ghost",
 				type: "button",
 				onclick: () => this.closeCard()
-			}, "Cancel"), h("button", {
+			}, this.t("cancel")), h("button", {
 				class: "btn btn-primary",
 				type: "submit",
 				disabled: Boolean(draft.sending)
-			}, icon(ICONS.send), draft.sending ? "Posting…" : "Post"))));
+			}, icon(ICONS.send), draft.sending ? this.t("posting") : this.t("post")))));
 		}
 		const comment = this.comments.find((c) => c._id === card.id);
 		if (!comment) return null;
@@ -5770,30 +8003,39 @@ var NuniWidget = class {
 					card.editing = false;
 					this.render();
 				}
-			}, "Cancel"), h("button", {
+			}, this.t("cancel")), h("button", {
 				class: "btn btn-primary",
 				type: "button",
 				disabled: Boolean(card.busy),
 				onclick: () => this.saveEdit(comment, textarea.value)
-			}, "Save")));
+			}, this.t("save"))));
 		} else body = h("div", { class: "card-body" }, h("div", { class: "card-head" }, h("span", {
 			class: "avatar",
 			style: `background:${colorFor(comment.authorName)}`
-		}, initials(comment.authorName)), h("span", { class: "author" }, comment.authorName), h("span", { class: "meta" }, timeAgo(comment.createdAt) + (comment.editedAt ? " · edited" : "")), h("span", { class: "spacer" }), h("button", {
+		}, initials(comment.authorName)), h("span", { class: "author" }, comment.authorName), h("span", { class: "meta" }, this.i18n.timeAgo(comment.createdAt) + (comment.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), h("button", {
 			class: "btn btn-ghost btn-icon",
 			type: "button",
-			"aria-label": "Close",
+			"aria-label": this.t("close"),
 			onclick: () => this.closeCard()
-		}, icon(ICONS.close))), h("div", { class: "comment-body" }, comment.body), h("div", { class: "row" }, comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), "Resolved") : null, comment.page.origin !== location.origin ? h("span", {
+		}, icon(ICONS.close))), comment.anchor.quote ? h("blockquote", { class: "quote" }, comment.anchor.quote.exact) : null, h("div", { class: "comment-body" }, comment.body), this.ownerDetail?._id === comment._id && this.ownerDetail.screenshotUrl ? h("a", {
+			class: "shot",
+			href: this.ownerDetail.screenshotUrl,
+			target: "_blank",
+			rel: "noreferrer",
+			title: this.t("openScreenshot")
+		}, h("img", {
+			src: this.ownerDetail.screenshotUrl,
+			alt: this.t("screenshotTaken")
+		})) : null, h("div", { class: "row" }, comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), this.t("resolved")) : null, comment.page.origin !== location.origin ? h("span", {
 			class: "badge",
-			title: `Left on ${comment.page.origin}`
+			title: this.t("leftOn", { origin: comment.page.origin })
 		}, new URL(comment.page.origin).host) : null, placement?.confidence === "low" ? h("span", {
 			class: "badge",
-			title: "The page changed; this pin is a best guess"
-		}, "Approximate") : null, !placement?.element ? h("span", {
+			title: this.t("approximateHint")
+		}, this.t("approximate")) : null, !placement?.element ? h("span", {
 			class: "badge",
-			title: `Originally on: ${comment.anchor.text || comment.anchor.tag}`
-		}, "Element not found") : null), card.error ? h("div", {
+			title: this.t("originallyOn", { text: comment.anchor.text || comment.anchor.tag })
+		}, this.t("notFound")) : null), this.renderReactions(comment, comment._id), card.error ? h("div", {
 			class: "error",
 			role: "alert"
 		}, card.error) : null);
@@ -5804,18 +8046,27 @@ var NuniWidget = class {
 				type: "button",
 				disabled: Boolean(card.busy),
 				onclick: () => this.resolveComment(comment)
-			}, icon(ICONS.check), "Resolve") : h("button", {
+			}, icon(ICONS.check), this.t("resolve")) : h("button", {
 				class: "btn",
 				type: "button",
 				disabled: Boolean(card.busy),
 				onclick: () => this.reopenComment(comment)
-			}, icon(ICONS.undo), "Reopen"));
+			}, icon(ICONS.undo), this.t("reopen")));
 			actions.push(h("span", { class: "spacer" }));
+			const contextPending = owner && !(this.ownerDetailLoaded && this.ownerDetailId === comment._id);
+			actions.push(h("button", {
+				class: "btn btn-ghost btn-icon",
+				type: "button",
+				"aria-label": this.t("copyForAgent"),
+				title: contextPending ? this.t("loadingContext") : this.t("copyForAgentHint"),
+				disabled: contextPending,
+				onclick: () => this.copyForAgent(comment)
+			}, icon(ICONS.bot)));
 			if (mine) actions.push(h("button", {
 				class: "btn btn-ghost btn-icon",
 				type: "button",
-				"aria-label": "Edit",
-				title: "Edit",
+				"aria-label": this.t("edit"),
+				title: this.t("edit"),
 				onclick: () => {
 					card.editing = true;
 					this.render();
@@ -5824,18 +8075,164 @@ var NuniWidget = class {
 			if (mine || owner) actions.push(h("button", {
 				class: "btn btn-ghost btn-icon btn-danger",
 				type: "button",
-				"aria-label": "Delete",
-				title: "Delete",
+				"aria-label": this.t("delete"),
+				title: this.t("delete"),
+				"data-focus-key": "delete",
 				disabled: Boolean(card.busy),
-				onclick: () => this.deleteComment(comment)
+				onclick: () => void this.deleteComment(comment)
 			}, icon(ICONS.trash)));
 		}
 		return h("div", {
 			class: cls,
 			"data-card": "thread",
 			role: "dialog",
-			"aria-label": `Comment by ${comment.authorName}`
-		}, body, actions.length > 1 || owner ? h("div", { class: "actions" }, ...actions) : null);
+			"aria-label": this.t("commentBy", { name: comment.authorName })
+		}, body, actions.length ? h("div", { class: "actions" }, ...actions) : null, card.editing ? null : this.renderThread(comment));
+	}
+	/** Emoji chips for one message, plus a picker to add one. */
+	renderReactions(comment, targetId) {
+		const card = this.card;
+		if (card?.kind !== "thread") return null;
+		const summaries = this.threadId === comment._id && this.thread ? this.thread.reactions.filter((r) => r.targetId === targetId) : [];
+		const open = card.picker === targetId;
+		return h("div", { class: "reactions" }, ...summaries.map((r) => {
+			const mine = r.authorKeyHashes.includes(this.secretHash);
+			return h("button", {
+				class: "reaction",
+				type: "button",
+				"aria-pressed": String(mine),
+				"aria-label": `${r.emoji} ${r.count}${mine ? ", including you" : ""}`,
+				onclick: () => this.toggleReaction(comment, targetId, r.emoji)
+			}, `${r.emoji} ${r.count}`);
+		}), h("button", {
+			class: "reaction reaction-add",
+			type: "button",
+			"aria-label": this.t("addReaction"),
+			"aria-expanded": String(open),
+			title: this.t("addReaction"),
+			onclick: () => {
+				card.picker = open ? null : targetId;
+				this.render();
+			}
+		}, icon(ICONS.smile)), open ? h("div", {
+			class: "reaction-picker",
+			role: "group",
+			"aria-label": this.t("reactions")
+		}, ...REACTIONS.map((emoji) => h("button", {
+			class: "reaction",
+			type: "button",
+			"aria-label": this.t("reactWith", { emoji }),
+			onclick: () => {
+				card.picker = null;
+				this.toggleReaction(comment, targetId, emoji);
+				this.render();
+			}
+		}, emoji))) : null);
+	}
+	/** The replies under a comment and the box to add one. */
+	renderThread(comment) {
+		const card = this.card;
+		if (card?.kind !== "thread") return null;
+		const replies = this.threadId === comment._id ? this.thread?.replies ?? [] : [];
+		const owner = this.isOwner;
+		const items = replies.map((reply) => {
+			const mine = this.isMyReply(reply);
+			if (card.replyEditing === reply._id) {
+				const box = h("textarea", {
+					class: "field",
+					maxlength: LIMITS.bodyMaxLength,
+					"data-focus-key": `reply-edit-${reply._id}`,
+					"aria-label": this.t("editReply")
+				});
+				const prev = this.uiLayer.querySelector(`[data-focus-key="reply-edit-${reply._id}"]`);
+				box.value = prev ? prev.value : reply.body;
+				return h("div", { class: "reply" }, box, h("div", { class: "row" }, h("span", { class: "spacer" }), h("button", {
+					class: "btn btn-ghost",
+					type: "button",
+					onclick: () => {
+						card.replyEditing = void 0;
+						this.render();
+					}
+				}, this.t("cancel")), h("button", {
+					class: "btn btn-primary",
+					type: "button",
+					disabled: Boolean(card.busy),
+					onclick: () => this.saveReplyEdit(comment, reply, box.value)
+				}, this.t("save"))));
+			}
+			return h("div", {
+				class: "reply",
+				"data-reply": reply._id
+			}, h("div", { class: "card-head" }, h("span", {
+				class: "avatar avatar-sm",
+				style: `background:${colorFor(reply.authorName)}`
+			}, initials(reply.authorName)), h("span", { class: "author" }, reply.authorName), reply.isOwner ? h("span", { class: "badge badge-owner" }, this.t("owner")) : null, h("span", { class: "meta" }, this.i18n.timeAgo(reply.createdAt) + (reply.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), mine ? h("button", {
+				class: "btn btn-ghost btn-icon btn-xs",
+				type: "button",
+				"aria-label": this.t("editReply"),
+				title: this.t("edit"),
+				onclick: () => {
+					card.replyEditing = reply._id;
+					this.render();
+				}
+			}, icon(ICONS.edit)) : null, mine || owner ? h("button", {
+				class: "btn btn-ghost btn-icon btn-xs btn-danger",
+				type: "button",
+				"aria-label": this.t("deleteReply"),
+				title: this.t("delete"),
+				"data-focus-key": `delete-${reply._id}`,
+				disabled: Boolean(card.busy),
+				onclick: () => void this.deleteReply(comment, reply)
+			}, icon(ICONS.trash)) : null), h("div", { class: "comment-body" }, reply.body), this.renderReactions(comment, reply._id));
+		});
+		const needsName = !owner && !this.name;
+		const nameInput = h("input", {
+			class: "field",
+			placeholder: this.t("yourName"),
+			value: this.name,
+			maxlength: LIMITS.nameMaxLength,
+			autocomplete: "name",
+			"data-focus-key": "reply-name",
+			"aria-label": this.t("yourName")
+		});
+		const prevName = this.uiLayer.querySelector("[data-focus-key=\"reply-name\"]");
+		if (prevName) nameInput.value = prevName.value;
+		const box = h("textarea", {
+			class: "field field-reply",
+			placeholder: replies.length ? this.t("reply") : this.t("replyFirst"),
+			maxlength: LIMITS.bodyMaxLength,
+			"data-focus-key": "reply",
+			"aria-label": this.t("reply")
+		});
+		const prev = this.uiLayer.querySelector("[data-focus-key=\"reply\"]");
+		if (prev) box.value = prev.value;
+		const send = () => void this.sendReply(comment, box.value, needsName ? nameInput.value : this.name);
+		box.addEventListener("keydown", (e) => {
+			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				send();
+			}
+		});
+		return h("div", { class: "thread" }, items.length ? h("div", {
+			class: "replies",
+			role: "list",
+			"aria-label": this.t("replyCount", { count: items.length })
+		}, ...items.map((item) => {
+			item.setAttribute("role", "listitem");
+			return item;
+		})) : null, h("form", {
+			class: "reply-form",
+			onsubmit: (e) => {
+				e.preventDefault();
+				send();
+			}
+		}, needsName ? nameInput : null, box, h("button", {
+			class: "btn btn-primary btn-icon",
+			type: "submit",
+			"aria-label": this.t("sendReply"),
+			title: this.t("sendReply"),
+			disabled: Boolean(card.sendingReply)
+		}, icon(ICONS.send))));
 	}
 	positionCard() {
 		const el = this.uiLayer.querySelector("[data-card]");
@@ -5843,11 +8240,7 @@ var NuniWidget = class {
 		let point = null;
 		if (this.card?.kind === "composer") {
 			const { draft } = this.card;
-			const r = draft.element.getBoundingClientRect();
-			point = {
-				x: r.left + draft.anchor.offset.x * r.width,
-				y: r.top + draft.anchor.offset.y * r.height
-			};
+			point = this.anchorPoint(draft.anchor, draft.element, draft.range);
 		} else if (this.card?.kind === "thread") {
 			const comment = this.comments.find((c) => this.card?.kind === "thread" && c._id === this.card.id);
 			point = comment ? this.pinPositions.get(comment._id) ?? this.pinPoint(comment) : null;
@@ -5863,8 +8256,9 @@ var NuniWidget = class {
 			top = point.y - 28;
 			if (left + width > vw - 12) left = point.x - width - 12;
 		} else {
-			left = vw - width - 16;
-			top = vh - height - 72;
+			const { position } = this.config;
+			left = position.endsWith("left") ? 16 : vw - width - 16;
+			top = position.startsWith("top") ? 72 : vh - height - 72;
 		}
 		left = Math.max(12, Math.min(left, vw - width - 12));
 		top = Math.max(12, Math.min(top, vh - height - 12));
@@ -5878,15 +8272,27 @@ var NuniWidget = class {
 	}
 };
 //#endregion
-//#region src/index.ts
+//#region src/mount.ts
+/** Nuni's own requests are not the page's problem. */
+function isNuniUrl(config) {
+	const origins = [config.convexUrl, config.convexSiteUrl].flatMap((url) => {
+		try {
+			return [new URL(url).origin];
+		} catch {
+			return [];
+		}
+	});
+	return (url) => {
+		try {
+			return origins.includes(new URL(url, location.href).origin);
+		} catch {
+			return false;
+		}
+	};
+}
 let active = null;
-/**
-* Mount Nuni on the page. Call once on the client. Calling it again with the
-* same project shares the mounted widget; it is removed when every handle is
-* destroyed. A different project replaces it. Each handle only ever tears
-* down the widget it was created for.
-*/
-function init(options) {
+/** The shared implementation of `init` for both builds (see index.ts). */
+function mount(options, runtime) {
 	const noop = { destroy() {} };
 	if (typeof window === "undefined" || typeof document === "undefined") return noop;
 	if (!isProjectId(options.project)) {
@@ -5899,22 +8305,26 @@ function init(options) {
 	const state = {
 		project: options.project,
 		widget: null,
+		collectors: startCollectors(config.capture, isNuniUrl(config)),
 		timer: 0,
 		handles: 0
 	};
 	active = state;
-	const mount = () => {
+	const start = () => {
 		if (active !== state) return;
 		if (!document.body) {
-			state.timer = window.setTimeout(mount, 50);
+			state.timer = window.setTimeout(start, 50);
 			return;
 		}
-		state.widget = new NuniWidget(config);
+		state.widget = new NuniWidget(config, {
+			collectors: state.collectors,
+			loadScreenshot: config.capture.screenshot ? runtime.loadScreenshot : null
+		});
 		state.widget.start();
 	};
 	const idle = window.requestIdleCallback;
-	if (idle) idle(mount, { timeout: 1500 });
-	else state.timer = window.setTimeout(mount, 1);
+	if (idle) idle(start, { timeout: 1500 });
+	else state.timer = window.setTimeout(start, 1);
 	return handleFor(state);
 }
 function handleFor(state) {
@@ -5931,7 +8341,19 @@ function unmount(state) {
 	clearTimeout(state.timer);
 	state.widget?.destroy();
 	state.widget = null;
+	state.collectors.stop();
 	if (active === state) active = null;
 }
 //#endregion
-export { VERSION, init };
+//#region src/index.ts
+/**
+* Mount Nuni on the page. Call once on the client. Calling it again with the
+* same project shares the mounted widget; it is removed when every handle is
+* destroyed. A different project replaces it. Each handle only ever tears
+* down the widget it was created for.
+*/
+function init(options) {
+	return mount(options, { loadScreenshot: () => import("./screenshot-DcJ_SzKF.js").then((m) => m.captureScreenshot) });
+}
+//#endregion
+export { VERSION, init, EN as messages };