@nuniapp/widget 0.1.7 → 0.1.9

package/dist/index.js

@@ -1,4 +1,4 @@
-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";
+import { _ as isProjectId, a as initials, c as IMAGE_TYPES, d as CAPTURE_MARK, f as MASK_ATTRIBUTE, g as generateSecret, h as REACTIONS, i as icon, m as LIMITS, n as copyText, o as parseColor, p as MASK_SELECTOR, r as h, s as readableOn, t as colorFor, u as imageFromFile } from "./dom-BWcT-q7S.js";
 //#region ../shared/src/path.ts
 /**
 * Normalize a URL to the key comments are matched by. Query and hash are
@@ -120,7 +120,16 @@ 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)" : ""));
+	out.push("Fix this piece of feedback that was left on the live site with Nuni.", "", "## Comment", "", ...comment.body ? [quote(comment.body), ""] : [], ...comment.suggestion ? [
+		"Suggested text change. Replace:",
+		"",
+		quote(comment.suggestion.before),
+		"",
+		"With:",
+		"",
+		quote(comment.suggestion.after),
+		""
+	] : [], `From ${comment.authorName} on ${new Date(comment.createdAt).toISOString().slice(0, 10)}` + (comment.status === "resolved" ? comment.resolution === "outdated" ? " (closed as outdated)" : " (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), "");
@@ -132,6 +141,7 @@ function buildCommentPrompt(comment, options = {}) {
 	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", "");
+	if (comment.pinLostAt) out.push(`- Not found on the page since ${new Date(comment.pinLostAt).toISOString().slice(0, 10)}: it may have changed or been removed. Check whether the feedback still applies.`);
 	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)}`);
@@ -159,13 +169,14 @@ function buildCommentPrompt(comment, options = {}) {
 		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 (comment.imageUrls?.length) out.push("", `## Images from ${comment.authorName} (${comment.imageUrls.length})`, "", ...comment.imageUrls.map((url) => `- ${url}`));
 	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.`);
+	out.push("", "## Steps", "", "1. Find the code that renders this element. Search for the text, the component name, the test ID or the selector.", comment.suggestion ? "2. Replace the text exactly as suggested (wherever it comes from: markup, a component, a translation or content file), and keep the fix focused on it." : "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.7";
+const VERSION = "0.1.9";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -181,6 +192,7 @@ function resolveConfig(options) {
 		zIndex: typeof options.zIndex === "number" && Number.isFinite(options.zIndex) ? Math.round(options.zIndex) : null,
 		locale: options.locale?.trim() || void 0,
 		messages: options.messages ?? {},
+		images: options.images ?? true,
 		capture: {
 			console: options.capture?.console ?? true,
 			network: options.capture?.network ?? true,
@@ -191,8 +203,10 @@ function resolveConfig(options) {
 }
 const POSITIONS = [
 	"bottom-right",
+	"bottom-center",
 	"bottom-left",
 	"top-right",
+	"top-center",
 	"top-left"
 ];
 const THEMES = [
@@ -5270,6 +5284,13 @@ var NuniApi = class {
 			path
 		}, (comments) => cb(comments), onError);
 	}
+	/** The visitor's own comments on every page, live. */
+	onMine(authorSecret, cb) {
+		return this.client.onUpdate(api.comments.listMine, {
+			publicId: this.config.project,
+			authorSecret
+		}, (comments) => cb(comments), () => {});
+	}
 	onPages(cb) {
 		return this.client.onUpdate(api.comments.pagesWithComments, { publicId: this.config.project }, cb, () => {});
 	}
@@ -5338,9 +5359,16 @@ var NuniApi = class {
 		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`, {
+	/** Attach the element's screenshot (for the owner) to a just-posted comment. */
+	uploadScreenshot(id, authorSecret, image) {
+		return this.upload("screenshot", id, authorSecret, image);
+	}
+	/** An image for everyone: picked, pasted or a marked-up screenshot. */
+	uploadImage(id, authorSecret, image) {
+		return this.upload("image", id, authorSecret, image);
+	}
+	async upload(kind, id, authorSecret, image) {
+		const response = await fetch(`${this.config.convexSiteUrl}/widget/${kind}`, {
 			method: "POST",
 			headers: {
 				"Content-Type": image.type,
@@ -5352,7 +5380,7 @@ var NuniApi = class {
 		});
 		if (!response.ok) {
 			const data = await response.json().catch(() => ({}));
-			throw new NuniApiError(data.message ?? "Couldn't attach the screenshot", data.code ?? "error");
+			throw new NuniApiError(data.message ?? "Couldn't attach the image", data.code ?? "error");
 		}
 	}
 	async run(promise) {
@@ -5362,11 +5390,12 @@ var NuniApi = class {
 			throw new NuniApiError(errorMessage(error), "error");
 		}
 	}
-	editOwn(id, authorSecret, body) {
+	editOwn(id, authorSecret, body, suggestion) {
 		return this.run(this.client.mutation(api.comments.editOwn, {
 			id,
 			authorSecret,
-			body
+			body,
+			suggestion
 		}));
 	}
 	deleteOwn(id, authorSecret) {
@@ -5375,12 +5404,40 @@ var NuniApi = class {
 			authorSecret
 		}));
 	}
-	resolve(id, sessionToken) {
+	resolve(id, sessionToken, resolution) {
 		return this.run(this.client.mutation(api.comments.resolve, {
 			id,
+			resolution,
+			sessionToken
+		}));
+	}
+	/** The owner points a comment at another element on its page. */
+	repin(id, anchor, sessionToken) {
+		return this.run(this.client.mutation(api.comments.repin, {
+			id,
+			anchor,
 			sessionToken
 		}));
 	}
+	/**
+	* Tell the backend which pins on this page couldn't be found, or were
+	* found again, so the owner can see them. Best effort.
+	*/
+	async reportPins(path, lost, found) {
+		try {
+			await fetch(`${this.config.convexSiteUrl}/widget/pins`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					publicId: this.config.project,
+					path,
+					lost,
+					found
+				}),
+				keepalive: true
+			});
+		} catch {}
+	}
 	reopen(id, sessionToken) {
 		return this.run(this.client.mutation(api.comments.reopen, {
 			id,
@@ -5423,106 +5480,6 @@ var NuniApi = class {
 	}
 };
 //#endregion
-//#region src/dom.ts
-/** Tiny element factory. Strings become text nodes (never HTML). */
-function h(tag, attrs = {}, ...children) {
-	const el = document.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) {
-		if (value == null || value === false) continue;
-		if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2).toLowerCase(), value);
-		else if (key === "class") el.className = String(value);
-		else if (value === true) el.setAttribute(key, "");
-		else el.setAttribute(key, String(value));
-	}
-	for (const child of children.flat()) {
-		if (child == null || child === false) continue;
-		el.append(typeof child === "string" ? document.createTextNode(child) : child);
-	}
-	return el;
-}
-/** Renders one of the constant SVG strings in icons.ts (never user input). */
-function icon(svg) {
-	const span = document.createElement("span");
-	span.className = "icon";
-	span.setAttribute("aria-hidden", "true");
-	const parsed = new DOMParser().parseFromString(svg, "image/svg+xml");
-	span.append(document.importNode(parsed.documentElement, true));
-	return span;
-}
-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();
-}
-/** Stable pleasant color per author name. */
-function colorFor(name) {
-	let hash = 0;
-	for (const ch of name) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
-	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`
@@ -5550,11 +5507,18 @@ const EN = {
 	close: "Close",
 	tabOpen: "Open ({count})",
 	tabResolved: "Resolved ({count})",
+	tabYours: "Yours ({count})",
+	yours: "Yours",
+	noYours: "Comments you leave on any page of this site show here.",
+	thisPage: "This page",
+	statusOpen: "Open",
 	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",
+	searchComments: "Search comments",
+	noMatches: "No comments match “{query}”.",
 	otherPages: "Other pages",
 	openOnPage: "{count} open",
 	replyCount: {
@@ -5576,6 +5540,25 @@ const EN = {
 		one: "{count} character left",
 		other: "{count} characters left"
 	},
+	suggestEdit: "Suggest an edit",
+	suggestedEdit: "Suggested edit",
+	removeSuggestion: "Remove",
+	newText: "New text",
+	addNote: "Add a note (optional)",
+	addImage: "Add an image",
+	markUpScreenshot: "Mark up a screenshot",
+	preparingScreenshot: "Taking the screenshot…",
+	markUpTitle: "Mark up the screenshot",
+	markUpBox: "Box",
+	markUpArrow: "Arrow",
+	markUpPen: "Pen",
+	markUpUndo: "Undo",
+	markUpDone: "Attach",
+	markUpFailed: "Couldn't save the drawing as an image. Try again.",
+	imagesPublic: "Images are shown to everyone who can see this comment.",
+	imageN: "Image {n}",
+	removeImage: "Remove image {n}",
+	openImage: "Open the image",
 	pinLabel: "Comment by {name}: {body}",
 	commentBy: "Comment by {name}",
 	openScreenshot: "Open the screenshot",
@@ -5589,6 +5572,15 @@ const EN = {
 	resolve: "Resolve",
 	reopen: "Reopen",
 	copyForAgent: "Copy for agent",
+	copyNewText: "Copy new text",
+	movePin: "Move pin",
+	movePinHint: "Click the element this comment is about",
+	pinMoved: "Pin moved",
+	closeOutdated: "Close as outdated",
+	closedOutdated: "Closed as outdated",
+	outdated: "Outdated",
+	lostHint: "This element isn't on the page any more. Move the pin to where it is now, or close the comment if it no longer applies.",
+	newTextCopied: "New text copied",
 	copyForAgentHint: "Copy for your coding agent",
 	loadingContext: "Loading page context…",
 	edit: "Edit",
@@ -5615,6 +5607,12 @@ const EN = {
 	linkGone: "That comment was deleted or is on another page",
 	enterName: "Enter your name",
 	writeFirst: "Write a comment first",
+	changeTextFirst: "Change the text to suggest an edit",
+	tooManyImages: "Add up to {count} images",
+	imageUnreadable: "Attach a PNG, JPEG or WebP image",
+	imageFailed: "Couldn't attach an image",
+	noScreenshot: "Couldn't take a screenshot of this element",
+	suggestionTooLong: "Suggestions are limited to {count} characters",
 	commentTooLong: "Comments are limited to {count} characters",
 	replyTooLong: "Replies are limited to {count} characters",
 	postFailed: "Couldn't post the comment",
@@ -5690,7 +5688,10 @@ const ICONS = {
 	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\"/>"),
 	user: s("<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/>"),
 	arrowUp: s("<path d=\"M12 19V5M5 12l7-7 7 7\"/>"),
+	search: s("<circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.3-4.3\"/>"),
 	target: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
+	image: s("<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/>"),
+	pen: s("<path d=\"m12 19 7-7 3 3-7 7z\"/><path d=\"m18 13-1.5-7.5L2 2l3.5 14.5L13 18z\"/><path d=\"m2 2 7.6 7.6\"/><circle cx=\"11\" cy=\"11\" r=\"2\"/>"),
 	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\"/>")
 };
@@ -5945,7 +5946,11 @@ function write(key, value) {
 const KEYS = {
 	name: "nuni:name",
 	secret: "nuni:author-secret",
-	session: (project) => `nuni:session:${project}`
+	session: (project) => `nuni:session:${project}`,
+	/** Where this visitor dragged the toolbar. */
+	position: (project) => `nuni:position:${project}`,
+	/** The comment this visitor opened last, marked in the panel. */
+	lastViewed: (project) => `nuni:last-viewed:${project}`
 };
 //#endregion
 //#region src/styles.ts
@@ -6022,7 +6027,18 @@ button { cursor: pointer; }
   border: 1px solid var(--n-border);
   box-shadow: var(--n-shadow);
   pointer-events: auto;
-}
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.toolbar[data-dragging] {
+  cursor: grabbing;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.2);
+}
+/* While dragging, the host covers the page so no move is lost to it. */
+:host([data-dragging]) { pointer-events: auto; cursor: grabbing; }
+:host([data-dragging]) .tb-btn { pointer-events: none; }
 .tb-btn {
   display: inline-flex;
   align-items: center;
@@ -6179,7 +6195,6 @@ button { cursor: pointer; }
   gap: 12px;
 }
 .confirm p { margin: 0; }
-.btn-danger-solid { background: var(--n-danger); color: #fff; border-color: transparent; }
 
 /* Pins */
 .pin {
@@ -6454,6 +6469,10 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
 .btn-ghost { border-color: transparent; background: transparent; }
 .btn-icon { width: 32px; padding: 0; justify-content: center; }
 .btn-danger { color: var(--n-danger); }
+/* After .btn, which would otherwise paint over the red with the card's background. */
+.btn-danger-solid,
+.btn-danger-solid:hover { background: var(--n-danger); border-color: var(--n-danger); color: #fff; }
+.btn-danger-solid:hover { filter: brightness(1.08); }
 .error { color: var(--n-danger); font-size: 12px; }
 .divider { height: 1px; background: var(--n-border); }
 
@@ -6490,7 +6509,90 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
   white-space: nowrap;
 }
 .cmp-link:hover { color: var(--n-fg); }
-.composer .quote { margin: 6px 14px 0; }
+.composer .quote, .composer .suggest { margin: 6px 14px 0; }
+.suggest {
+  display: grid;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--n-bg-subtle);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.suggest-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+  color: var(--n-fg-muted);
+  font-size: 12px;
+  font-weight: 550;
+}
+.suggest .cmp-link { margin-left: auto; padding: 0 4px; }
+.suggest del, .item-suggest del { color: var(--n-fg-muted); text-decoration-color: var(--n-danger); }
+.suggest ins, .item-suggest ins {
+  color: var(--n-fg);
+  text-decoration: none;
+  background: var(--n-accent-soft);
+  border-radius: 4px;
+}
+.suggest ins { padding: 1px 3px; justify-self: start; }
+.cmp-suggest {
+  display: block;
+  width: 100%;
+  max-height: 160px;
+  padding: 4px 6px;
+  border: 1px solid var(--n-border);
+  border-radius: 6px;
+  background: var(--n-bg);
+  outline: none;
+  resize: none;
+  line-height: 1.4;
+}
+.cmp-suggest:focus { border-color: var(--n-accent); }
+.cmp-suggest-btn { display: inline-flex; align-items: center; gap: 4px; }
+.lost {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px dashed var(--n-border);
+  border-radius: 8px;
+  color: var(--n-fg-muted);
+  font-size: 13px;
+}
+.lost p { margin: 0; }
+.cmp-images { display: grid; gap: 4px; padding: 6px 14px 0; }
+.cmp-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
+.cmp-thumb { position: relative; }
+.cmp-thumb img, .images img {
+  display: block;
+  width: 64px;
+  height: 48px;
+  object-fit: cover;
+  border: 1px solid var(--n-border);
+  border-radius: 6px;
+  background: var(--n-bg-subtle);
+}
+.cmp-thumb-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--n-border);
+  border-radius: 999px;
+  background: var(--n-bg);
+  color: var(--n-fg-muted);
+}
+.cmp-thumb-remove .icon { width: 12px; height: 12px; }
+.cmp-images-note { margin: 0; color: var(--n-fg-muted); font-size: 12px; }
+.images { display: flex; flex-wrap: wrap; gap: 6px; }
+.images img { width: 88px; height: 64px; }
+.lost .row { gap: 6px; flex-wrap: wrap; }
+.cmp-suggest-btn .icon { width: 13px; height: 13px; }
 .cmp-text {
   display: block;
   width: 100%;
@@ -6559,7 +6661,7 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
 }
 .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--n-border); }
 .panel-title { font-weight: 650; flex: 1; }
-.tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
+.tabs { display: flex; gap: 4px; padding: 0 12px; margin-top: 8px; }
 .tab {
   border: 0;
   background: transparent;
@@ -6582,6 +6684,11 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
   border-radius: 10px;
 }
 .item:hover { background: var(--n-bg-subtle); }
+/* The comment opened last, so it's easy to find your place again. */
+.item[aria-current="true"] { background: var(--n-accent-soft); box-shadow: inset 3px 0 0 var(--n-accent); }
+.panel-search { position: relative; padding: 0 12px; margin-top: 8px; }
+.panel-search .icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--n-fg-muted); pointer-events: none; }
+.panel-search .field { padding-left: 32px; }
 .item-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
 .section-label { padding: 12px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-fg-muted); }
 .empty { padding: 32px 16px; text-align: center; color: var(--n-fg-muted); }
@@ -6625,8 +6732,10 @@ a.item { color: inherit; text-decoration: none; }
   * { transition: none !important; animation: none !important; }
 }
 
-/* The toolbar's corner (the position option) */
+/* The toolbar's spot (the position option, or where it was dragged) */
 :host([data-position$="left"]) .toolbar { right: auto; left: 16px; }
+:host([data-position$="center"]) .toolbar { left: 0; right: 0; width: max-content; margin-inline: auto; }
+:host([data-position="top-center"]) .pick-hint { top: auto; bottom: 12px; }
 :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; }
@@ -6637,7 +6746,35 @@ a.item { color: inherit; text-decoration: none; }
 }
 `;
 //#endregion
+//#region src/suggestion.ts
+/**
+* The text a comment can suggest new words for: the selected words, or the
+* whole text of a small element (a button, a link, a heading) with no other
+* text inside it. Null for areas, form fields and larger blocks.
+*/
+function suggestableText(anchor, element) {
+	if (anchor.quote) return anchor.quote.exact;
+	if (anchor.region || !anchor.text) return null;
+	if (/^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName)) return null;
+	if (anchor.text.length >= LIMITS.anchorTextMaxLength) return null;
+	for (const child of element.querySelectorAll("*")) if (elementText(child)) return null;
+	return anchor.text;
+}
+/** The old words struck through and the new ones, under a small label. */
+function renderSuggestion(suggestion, label, action) {
+	return h("div", { class: "suggest" }, h("div", { class: "suggest-label" }, label, action), h("del", {}, suggestion.before), h("ins", {}, suggestion.after));
+}
+/** One line for the panel: old → new. */
+function renderSuggestionLine(suggestion) {
+	return h("div", { class: "item-quote item-suggest" }, h("del", {}, suggestion.before), " → ", h("ins", {}, suggestion.after));
+}
+//#endregion
 //#region src/widget.ts
+const PANEL_TABS = [
+	"open",
+	"resolved",
+	"mine"
+];
 const PICKING_CLASS = "nuni-picking";
 const PICK_EVENTS = [
 	"pointerdown",
@@ -6680,6 +6817,14 @@ function frameDocuments(doc, depth = 0) {
 	return out;
 }
 const MOBILE_QUERY = "(max-width: 640px)";
+/** How long pins have to stay settled before lost ones are reported. */
+const PIN_REPORT_DELAY_MS = 3e3;
+/** Drawn on screenshots: stands out on most pages, whatever the accent. */
+const MARKUP_COLOR = "#e5484d";
+/** The previews of a comment box's images are no longer shown. */
+function revokeImages(draft) {
+	for (const image of draft.images ?? []) URL.revokeObjectURL(image.url);
+}
 function isTypingTarget(target) {
 	if (!target || target.nodeType !== 1) return false;
 	const el = target;
@@ -6699,6 +6844,17 @@ function describeElement(el) {
 	return `${tag}${id}${cls}${text ? ` "${text}"` : ""}`;
 }
 /**
+* A link to one comment on another page of this site: the page, opened
+* with that comment focused. Null when the page can't be linked to.
+*/
+function commentHref(c, loc) {
+	const page = otherPageHref(c.page.path, loc);
+	if (page === null) return null;
+	const url = new URL(page);
+	url.searchParams.set("nuni", c._id);
+	return url.toString();
+}
+/**
 * Build an "Other pages" link target, or null when it would leave the
 * current origin. The stored path comes from anonymous comment submissions;
 * one that does not start with "/" (".evil.com/x", "@evil.com/") would
@@ -6724,6 +6880,8 @@ var NuniWidget = class {
 		_defineProperty(this, "overlayLayer", void 0);
 		_defineProperty(this, "selectButton", void 0);
 		_defineProperty(this, "uiLayer", void 0);
+		_defineProperty(this, "modalLayer", void 0);
+		_defineProperty(this, "markingUp", false);
 		_defineProperty(this, "api", void 0);
 		_defineProperty(this, "cleanups", []);
 		_defineProperty(this, "pageUnsub", null);
@@ -6738,6 +6896,13 @@ var NuniWidget = class {
 		_defineProperty(this, "picking", false);
 		_defineProperty(this, "panelOpen", false);
 		_defineProperty(this, "tab", "open");
+		_defineProperty(this, "mine", null);
+		_defineProperty(this, "mineUnsub", null);
+		_defineProperty(this, "repinId", null);
+		_defineProperty(this, "pinReported", /* @__PURE__ */ new Map());
+		_defineProperty(this, "pinReportTimer", 0);
+		_defineProperty(this, "search", "");
+		_defineProperty(this, "lastViewedId", void 0);
 		_defineProperty(this, "card", null);
 		_defineProperty(this, "activeId", null);
 		_defineProperty(this, "hoverEl", null);
@@ -6775,6 +6940,10 @@ var NuniWidget = class {
 		_defineProperty(this, "resolveTimer", 0);
 		_defineProperty(this, "shownPlacements", "");
 		_defineProperty(this, "i18n", void 0);
+		_defineProperty(this, "position", void 0);
+		_defineProperty(this, "toolbarDrag", null);
+		_defineProperty(this, "endToolbarDrag", null);
+		_defineProperty(this, "toolbarDropped", false);
 		_defineProperty(this, "isIgnored", (el) => el === this.host || this.host.contains(el));
 		_defineProperty(this, "onFrameKey", (e) => this.onKeyDown(e));
 		_defineProperty(this, "swallow", (e) => {
@@ -6854,6 +7023,8 @@ var NuniWidget = class {
 		}
 		this.secret = secret;
 		this.ownerToken = read(KEYS.session(config.project));
+		this.lastViewedId = read(KEYS.lastViewed(config.project));
+		this.position = oneOf(read(KEYS.position(config.project)) ?? void 0, POSITIONS, config.position);
 		this.host = document.createElement("div");
 		this.host.id = "nuni-root";
 		this.host.setAttribute("data-nuni", "");
@@ -6868,6 +7039,7 @@ var NuniWidget = class {
 		this.pinLayer = h("div", { class: "pins" });
 		this.overlayLayer = h("div", { class: "overlay" });
 		this.uiLayer = h("div", { class: "ui" });
+		this.modalLayer = h("div", { class: "modal" });
 		this.selectButton = h("button", {
 			class: "select-btn",
 			type: "button",
@@ -6882,8 +7054,13 @@ var NuniWidget = class {
 			role: "status",
 			"aria-live": "polite"
 		});
-		this.root.append(style, this.markLayer, this.pinLayer, this.overlayLayer, this.uiLayer, this.selectButton, this.live);
+		this.root.append(style, this.markLayer, this.pinLayer, this.overlayLayer, this.uiLayer, this.modalLayer, this.selectButton, this.live);
 		this.uiLayer.addEventListener("keydown", (e) => this.trapFocus(e));
+		this.root.addEventListener("click", (e) => {
+			if (!this.toolbarDropped) return;
+			e.preventDefault();
+			e.stopPropagation();
+		}, true);
 		this.api = new NuniApi(config);
 	}
 	t(key, vars) {
@@ -6896,8 +7073,8 @@ var NuniWidget = class {
 	}
 	/** Position, theme, brand color and stacking order from the options. */
 	applyAppearance() {
-		const { position, theme, accentColor, zIndex } = this.config;
-		this.host.dataset.position = position;
+		const { theme, accentColor, zIndex } = this.config;
+		this.host.dataset.position = this.position;
 		this.host.dataset.theme = theme;
 		if (zIndex !== null) this.host.style.zIndex = String(zIndex);
 		const rgb = accentColor ? parseColor(accentColor) : null;
@@ -6944,6 +7121,7 @@ var NuniWidget = class {
 			if (e.composedPath().includes(this.host)) return;
 			this.pointerDown = true;
 			this.scheduleSelection();
+			this.closeCardFromOutside(e);
 		};
 		const onUp = () => {
 			this.pointerDown = false;
@@ -6991,10 +7169,13 @@ var NuniWidget = class {
 	}
 	destroy() {
 		this.setPicking(false);
+		this.endToolbarDrag?.();
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
 		this.ownerDetailUnsub?.();
 		this.threadUnsub?.();
+		this.mineUnsub?.();
+		clearTimeout(this.pinReportTimer);
 		this.resolveRun++;
 		for (const stop of this.scopeWatchers.values()) stop();
 		this.scopeWatchers.clear();
@@ -7018,6 +7199,8 @@ var NuniWidget = class {
 		this.extraComment = null;
 		this.loaded = false;
 		this.placements.clear();
+		this.pinReported.clear();
+		clearTimeout(this.pinReportTimer);
 		this.card = null;
 		this.activeId = null;
 		this.pageUnsub = this.api.onPage(key, (comments) => {
@@ -7134,11 +7317,39 @@ var NuniWidget = class {
 			this.watchScopes();
 			this.renderPins();
 			this.layout();
-			if (queue.length) whenIdle(slice);
-			else if ((onlyStale || run > 1) && this.panelOpen && this.placementSummary() !== this.shownPlacements) this.render();
+			if (queue.length) {
+				whenIdle(slice);
+				return;
+			}
+			this.schedulePinReport();
+			if ((onlyStale || run > 1) && this.panelOpen && this.placementSummary() !== this.shownPlacements) this.render();
 		};
 		slice();
 	}
+	/**
+	* Once the pins have settled for a few seconds, report the ones that
+	* couldn't be found (or were found again), so the owner sees them in the
+	* dashboard. Only changes are sent.
+	*/
+	schedulePinReport() {
+		clearTimeout(this.pinReportTimer);
+		this.pinReportTimer = window.setTimeout(() => {
+			if (!this.loaded || document.visibilityState !== "visible") return;
+			const lost = [];
+			const found = [];
+			for (const c of this.comments) {
+				if (c.status !== "open" || c.page.path !== this.pageKey) continue;
+				const placement = this.placements.get(c._id);
+				if (!placement) continue;
+				const isLost = !placement.element;
+				if (isLost === (this.pinReported.get(c._id) ?? Boolean(c.pinLost))) continue;
+				if (lost.length + found.length >= LIMITS.pinReportMax) break;
+				this.pinReported.set(c._id, isLost);
+				(isLost ? lost : found).push(c._id);
+			}
+			if (lost.length || found.length) this.api.reportPins(this.pageKey, lost, found);
+		}, PIN_REPORT_DELAY_MS);
+	}
 	/** What the panel and cards show from the placements: found, approximate or lost. */
 	placementSummary() {
 		return this.comments.map((c) => {
@@ -7296,6 +7507,7 @@ var NuniWidget = class {
 		this.placeSelectButton();
 	}
 	setPicking(on) {
+		if (!on) this.repinId = null;
 		if (this.picking === on) return;
 		this.picking = on;
 		const html = document.documentElement;
@@ -7417,10 +7629,16 @@ var NuniWidget = class {
 	}
 	openComposer(draft) {
 		const { element } = draft;
+		const repinId = this.repinId;
 		this.setPicking(false);
+		if (repinId) {
+			this.movePin(repinId, draft);
+			return;
+		}
 		if (this.config.capture.dom) try {
 			draft.dom = domContext(element);
 		} catch {}
+		draft.suggestFrom = suggestableText(draft.anchor, element);
 		this.card = {
 			kind: "composer",
 			draft
@@ -7430,14 +7648,18 @@ var NuniWidget = class {
 		this.focusComposer();
 		draft.screenshot = this.takeScreenshot(draft);
 	}
+	/** An iframe's document can't be rendered from the page. */
+	canScreenshot(draft) {
+		return Boolean(this.runtime.loadScreenshot) && draft.element.ownerDocument === document;
+	}
 	/** Capture while the person types, so posting stays instant. */
 	async takeScreenshot(draft) {
 		const load = this.runtime.loadScreenshot;
-		if (!load || draft.element.ownerDocument !== document) return null;
+		if (!load || !this.canScreenshot(draft)) return null;
 		const accent = getComputedStyle(this.host).getPropertyValue("--n-accent").trim() || "#d6246e";
 		try {
 			await new Promise((resolve) => setTimeout(resolve, 60));
-			const capture = await load();
+			const tools = await load();
 			const { range, anchor, element } = draft;
 			const focus = range ? () => range.getBoundingClientRect() : anchor.region ? () => {
 				const box = regionBox(anchor, element);
@@ -7448,7 +7670,7 @@ var NuniWidget = class {
 					bottom: box.top + box.height
 				};
 			} : void 0;
-			return capture ? await capture(element, {
+			return tools ? await tools.capture(element, {
 				exclude: this.host,
 				accent,
 				focus
@@ -7473,19 +7695,93 @@ var NuniWidget = class {
 			if (image) await this.api.uploadScreenshot(id, this.secret, image);
 		} catch {}
 	}
+	/** One after another, so they keep their order. */
+	async attachImages(id, draft) {
+		const images = draft.images ?? [];
+		revokeImages(draft);
+		try {
+			for (const image of images) await this.api.uploadImage(id, this.secret, image.blob);
+		} catch (error) {
+			this.showToast(error instanceof NuniApiError ? error.message : this.t("imageFailed"));
+		}
+	}
+	/** Whether this comment box can take images (claimed sites only). */
+	canAttach(draft) {
+		return this.config.images && Boolean(this.status?.claimed) && (draft.images?.length ?? 0) < LIMITS.imagesPerComment;
+	}
+	async addImages(draft, files) {
+		draft.error = void 0;
+		for (const file of files) {
+			if ((draft.images?.length ?? 0) >= LIMITS.imagesPerComment) {
+				draft.error = this.t("tooManyImages", { count: LIMITS.imagesPerComment });
+				break;
+			}
+			const blob = await imageFromFile(file);
+			if (!blob) {
+				draft.error = this.t("imageUnreadable");
+				continue;
+			}
+			(draft.images ?? (draft.images = [])).push({
+				blob,
+				url: URL.createObjectURL(blob)
+			});
+		}
+		this.render();
+		this.positionCard();
+	}
+	/** Draw on the screenshot, then attach the result for everyone to see. */
+	async markUpScreenshot(draft) {
+		const load = this.runtime.loadScreenshot;
+		if (!load || !draft.screenshot || draft.preparingMarkup) return;
+		draft.preparingMarkup = true;
+		draft.error = void 0;
+		this.render();
+		const [tools, shot] = await Promise.all([load(), draft.screenshot]);
+		draft.preparingMarkup = false;
+		if (!tools || !shot) {
+			this.setDraftError(draft, this.t("noScreenshot"));
+			return;
+		}
+		this.markingUp = true;
+		try {
+			const marked = await tools.markUp(shot, {
+				container: this.modalLayer,
+				color: MARKUP_COLOR,
+				labels: {
+					title: this.t("markUpTitle"),
+					box: this.t("markUpBox"),
+					arrow: this.t("markUpArrow"),
+					pen: this.t("markUpPen"),
+					undo: this.t("markUpUndo"),
+					cancel: this.t("cancel"),
+					done: this.t("markUpDone"),
+					failed: this.t("markUpFailed")
+				}
+			});
+			if (marked) (draft.images ?? (draft.images = [])).push({
+				blob: marked,
+				url: URL.createObjectURL(marked)
+			});
+		} finally {
+			this.markingUp = false;
+		}
+		this.render();
+		this.positionCard();
+	}
 	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 ?? {
+		const prompt = buildCommentPrompt(detail ?? {
 			...comment,
 			replies
-		}, { includeContext: Boolean(detail) })).then((ok) => this.showToast(ok ? this.t("copied") : this.t("copyFailed")));
+		}, { includeContext: Boolean(detail) });
+		copyText(prompt).then((ok) => this.showToast(ok ? this.t("copied") : this.t("copyFailed")));
 	}
 	renderHighlight() {
 		this.overlayLayer.replaceChildren();
 		if (!this.picking) return;
 		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"))]));
+		this.overlayLayer.append(h("div", { class: "pick-hint" }, this.repinId ? this.t("movePinHint") : 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, {
@@ -7510,12 +7806,16 @@ var NuniWidget = class {
 		this.overlayLayer.append(box);
 	}
 	onKeyDown(e) {
+		if (this.markingUp) return;
 		const inWidget = e.composedPath().includes(this.host);
 		if (e.key === "Escape") {
 			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 if (this.panelOpen && this.search) {
+				this.search = "";
+				this.render();
+			} else if (this.panelOpen) this.togglePanel(false);
 			else return;
 			e.stopPropagation();
 			return;
@@ -7743,7 +8043,15 @@ var NuniWidget = class {
 		const cleanName = name.trim().slice(0, LIMITS.nameMaxLength);
 		const cleanBody = body.trim();
 		if (!cleanName) return this.setDraftError(draft, this.t("enterName"));
-		if (!cleanBody) return this.setDraftError(draft, this.t("writeFirst"));
+		const before = draft.suggesting ? draft.suggestFrom : null;
+		const after = (draft.suggestion ?? before ?? "").trim();
+		if (before != null && (!after || after === before)) return this.setDraftError(draft, this.t("changeTextFirst"));
+		if (after.length > LIMITS.quoteMaxLength) return this.setDraftError(draft, this.t("suggestionTooLong", { count: LIMITS.quoteMaxLength }));
+		const suggestion = before != null ? {
+			before,
+			after
+		} : void 0;
+		if (!cleanBody && !suggestion) 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);
@@ -7755,6 +8063,7 @@ var NuniWidget = class {
 		try {
 			const id = await this.api.createComment({
 				body: cleanBody,
+				suggestion,
 				authorName: cleanName,
 				authorSecret: this.secret,
 				page: {
@@ -7771,6 +8080,7 @@ var NuniWidget = class {
 				context: this.collectContext(draft)
 			});
 			if (shot) this.attachScreenshot(id, shot);
+			if (draft.images?.length) this.attachImages(id, draft);
 			this.placements.set(id, {
 				element: draft.element,
 				confidence: "exact",
@@ -7826,6 +8136,41 @@ var NuniWidget = class {
 		if (!token) return;
 		this.act(c._id, () => this.api.reopen(c._id, token), this.t("reopened"));
 	}
+	/** Closed because what it was about is gone, not because it was fixed. */
+	closeAsOutdated(c) {
+		const token = this.ownerToken;
+		if (!token) return;
+		this.act(c._id, () => this.api.resolve(c._id, token, "outdated"), this.t("closedOutdated")).then((ok) => {
+			if (ok && this.card?.kind === "thread" && this.card.id === c._id) this.closeCard();
+		});
+	}
+	/** Pick the element the comment is about now; the pin moves there. */
+	startMovePin(c) {
+		if (!this.ownerToken) return;
+		this.setPicking(true);
+		this.repinId = c._id;
+		this.render();
+	}
+	async movePin(id, draft) {
+		const token = this.ownerToken;
+		if (!token) return;
+		const previous = this.placements.get(id);
+		this.placements.set(id, {
+			element: draft.element,
+			confidence: "exact",
+			range: draft.range
+		});
+		this.pinReported.set(id, false);
+		try {
+			await this.api.repin(id, draft.anchor, token);
+			this.showToast(this.t("pinMoved"));
+		} catch (error) {
+			if (previous) this.placements.set(id, previous);
+			else this.placements.delete(id);
+			this.showToast(error instanceof NuniApiError ? error.message : this.t("failed"));
+		}
+		this.focusComment(id);
+	}
 	async deleteComment(c) {
 		if (!await this.ask(this.t("confirmDeleteComment"), this.t("delete"))) return;
 		const token = this.ownerToken;
@@ -7903,8 +8248,16 @@ var NuniWidget = class {
 			}
 		});
 	}
-	saveEdit(c, body) {
-		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body), this.t("saved"));
+	saveEdit(c, body, suggestion) {
+		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body, suggestion), this.t("saved"));
+	}
+	/** For the owner: the suggested words, ready to paste into the code. */
+	copyNewTextButton(text) {
+		return h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => void copyText(text).then((ok) => this.showToast(this.t(ok ? "newTextCopied" : "copyFailed")))
+		}, this.t("copyNewText"));
 	}
 	showToast(message) {
 		this.toast = message;
@@ -7918,15 +8271,33 @@ var NuniWidget = class {
 	togglePanel(open = !this.panelOpen) {
 		if (open === this.panelOpen) return;
 		this.panelOpen = open;
+		if (open && !this.mineUnsub) this.mineUnsub = this.api.onMine(this.secret, (mine) => {
+			this.mine = mine;
+			this.render();
+		});
 		if (open) {
 			this.keepFocus();
 			this.focusNext = ".panel [role=\"tab\"][aria-selected=\"true\"]";
 			if (window.matchMedia(MOBILE_QUERY).matches) this.card = null;
-		}
+		} else this.search = "";
 		this.render();
+		if (open) this.uiLayer.querySelector(".panel .item[aria-current=\"true\"]")?.scrollIntoView({ block: "nearest" });
 		if (!open && !this.card) this.restoreFocus();
 	}
+	/**
+	* A press on the page closes the open card, like Figma, unless the card
+	* holds words that haven't been sent yet.
+	*/
+	closeCardFromOutside(e) {
+		if (!this.card || this.picking || this.confirming || !e.isPrimary) return;
+		if (this.markingUp) return;
+		if (onScrollbar(e)) return;
+		if ([...this.uiLayer.querySelector("[data-card]")?.querySelectorAll("textarea") ?? []].some((t) => t.value.trim()) || this.card.kind === "composer" && Boolean(this.card.draft.images?.length)) return;
+		if (!this.panelOpen) this.returnFocus = null;
+		this.closeCard();
+	}
 	closeCard() {
+		if (this.card?.kind === "composer") revokeImages(this.card.draft);
 		const had = this.card !== null;
 		this.card = null;
 		this.activeId = null;
@@ -7937,6 +8308,8 @@ var NuniWidget = class {
 	openThread(id) {
 		this.keepFocus();
 		this.activeId = id;
+		this.lastViewedId = id;
+		write(KEYS.lastViewed(this.config.project), id);
 		this.card = {
 			kind: "thread",
 			id
@@ -7982,7 +8355,7 @@ var NuniWidget = class {
 			pin.style.background = colorFor(comment.authorName);
 			pin.setAttribute("aria-label", this.t("pinLabel", {
 				name: comment.authorName,
-				body: comment.body.slice(0, 80)
+				body: (comment.body || comment.suggestion?.after || "").slice(0, 80)
 			}));
 			if (comment.replyCount) pin.dataset.replies = String(comment.replyCount);
 			else delete pin.dataset.replies;
@@ -8035,10 +8408,14 @@ var NuniWidget = class {
 	}
 	renderToolbar() {
 		const open = this.comments.filter((c) => c.status === "open").length;
+		const drag = this.toolbarDrag?.moving ? this.toolbarDrag : null;
 		return h("div", {
 			class: "toolbar",
 			role: "toolbar",
-			"aria-label": this.t("toolbar")
+			"aria-label": this.t("toolbar"),
+			"data-dragging": !!drag,
+			style: drag && `transform: translate(${drag.dx}px, ${drag.dy}px)`,
+			onpointerdown: (e) => this.startToolbarDrag(e)
 		}, h("button", {
 			class: "tb-btn",
 			type: "button",
@@ -8057,16 +8434,113 @@ var NuniWidget = class {
 			onclick: () => this.togglePanel()
 		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))));
 	}
+	/**
+	* Drag the toolbar anywhere; on release it glides to the nearest corner or
+	* edge middle, which is remembered for this visitor.
+	*/
+	startToolbarDrag(e) {
+		if (e.button !== 0 || !e.isPrimary) return;
+		this.endToolbarDrag?.();
+		const drag = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			dx: 0,
+			dy: 0,
+			moving: false
+		};
+		this.toolbarDrag = drag;
+		const toolbar = () => this.uiLayer.querySelector(".toolbar");
+		const onMove = (ev) => {
+			if (ev.pointerId !== drag.id) return;
+			drag.dx = ev.clientX - drag.x;
+			drag.dy = ev.clientY - drag.y;
+			if (!drag.moving && Math.hypot(drag.dx, drag.dy) < 5) return;
+			if (!drag.moving) {
+				drag.moving = true;
+				this.host.dataset.dragging = "";
+				toolbar()?.setAttribute("data-dragging", "");
+			}
+			ev.preventDefault();
+			toolbar()?.style.setProperty("transform", `translate(${drag.dx}px, ${drag.dy}px)`);
+		};
+		const onUp = (ev) => {
+			if (ev.pointerId !== drag.id) return;
+			this.endToolbarDrag?.();
+			if (drag.moving) this.dropToolbar(toolbar(), true);
+		};
+		const onCancel = (ev) => {
+			if (ev instanceof PointerEvent && ev.pointerId !== drag.id) return;
+			this.endToolbarDrag?.();
+			if (drag.moving) this.dropToolbar(toolbar(), false);
+		};
+		window.addEventListener("pointermove", onMove, true);
+		window.addEventListener("pointerup", onUp, true);
+		window.addEventListener("pointercancel", onCancel, true);
+		window.addEventListener("blur", onCancel);
+		this.endToolbarDrag = () => {
+			window.removeEventListener("pointermove", onMove, true);
+			window.removeEventListener("pointerup", onUp, true);
+			window.removeEventListener("pointercancel", onCancel, true);
+			window.removeEventListener("blur", onCancel);
+			delete this.host.dataset.dragging;
+			this.toolbarDrag = null;
+			this.endToolbarDrag = null;
+		};
+	}
+	/** Glide the toolbar to the spot nearest where it was let go, or back. */
+	dropToolbar(el, snap) {
+		this.toolbarDropped = true;
+		setTimeout(() => this.toolbarDropped = false);
+		if (!el) return;
+		const from = el.getBoundingClientRect();
+		if (snap) {
+			const position = nearestPosition(from.left + from.width / 2, from.top + from.height / 2);
+			this.position = position;
+			this.host.dataset.position = position;
+			write(KEYS.position(this.config.project), position === this.config.position ? null : position);
+		}
+		el.removeAttribute("data-dragging");
+		el.style.removeProperty("transform");
+		const to = el.getBoundingClientRect();
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		el.animate([{ transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)` }, { transform: "none" }], {
+			duration: 320,
+			easing: "cubic-bezier(0.2, 0.9, 0.3, 1.15)"
+		});
+	}
 	renderPanel() {
 		const open = this.comments.filter((c) => c.status === "open");
 		const resolved = this.comments.filter((c) => c.status === "resolved");
-		const list = this.tab === "open" ? open : resolved;
+		const query = this.search.trim().toLocaleLowerCase();
+		const matches = (...texts) => !query || texts.some((t) => t?.toLocaleLowerCase().includes(query));
+		const mine = this.mine ?? [];
+		const list = (this.tab === "open" ? open : this.tab === "resolved" ? resolved : mine).filter((c) => matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, this.tab === "mine" ? c.page.path : void 0));
 		const placed = list.filter((c) => this.placements.get(c._id)?.element);
 		const lost = list.filter((c) => !this.placements.get(c._id)?.element);
-		const otherPages = this.pages.filter((p) => p.path !== this.pageKey);
+		const otherPages = this.pages.filter((p) => p.path !== this.pageKey && matches(p.path));
+		const content = (c) => [c.suggestion ? renderSuggestionLine(c.suggestion) : c.anchor.quote ? h("div", { class: "item-quote" }, c.anchor.quote.exact) : null, c.body ? h("div", { class: "item-text" }, c.body) : null];
+		const mineItem = (c) => {
+			const here = c.page.path === this.pageKey;
+			const href = here ? null : commentHref(c, location);
+			const resolvedBadge = c.status === "resolved";
+			return h(here ? "button" : href === null ? "div" : "a", here ? {
+				class: "item",
+				type: "button",
+				"data-focus-key": `item-${c._id}`,
+				onclick: () => {
+					this.deepLinkId = c._id;
+					this.openDeepLink();
+				}
+			} : {
+				class: "item",
+				href
+			}, h("div", { class: "row" }, h("span", { class: "author" }, here ? this.t("thisPage") : c.page.path), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt)), h("span", { class: "spacer" }), h("span", { class: resolvedBadge ? "badge badge-ok" : "badge" }, resolvedBadge ? icon(ICONS.check) : null, this.t(!resolvedBadge ? "statusOpen" : c.resolution === "outdated" ? "outdated" : "resolved"))), ...content(c));
+		};
 		const item = (c) => h("button", {
 			class: "item",
 			type: "button",
+			"aria-current": c._id === this.lastViewedId ? "true" : null,
 			"data-focus-key": `item-${c._id}`,
 			onclick: () => this.focusComment(c._id)
 		}, h("div", { class: "row" }, h("span", {
@@ -8075,9 +8549,14 @@ var NuniWidget = class {
 		}, 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), c.anchor.quote ? h("div", { class: "item-quote" }, c.anchor.quote.exact) : null, h("div", { class: "item-text" }, c.body));
+		}, new URL(c.page.origin).host) : null, c.resolution === "outdated" ? h("span", { class: "badge" }, this.t("outdated")) : null), ...content(c));
 		const children = [];
-		if (!this.loaded) children.push(h("div", { class: "empty" }, this.t("loading")));
+		if (this.tab === "mine") {
+			if (!this.mine) children.push(h("div", { class: "empty" }, this.t("loading")));
+			else if (!list.length) children.push(h("div", { class: "empty" }, query ? this.t("noMatches", { query: this.search.trim() }) : this.t("noYours")));
+			else children.push(...list.map(mineItem));
+		} else if (!this.loaded) children.push(h("div", { class: "empty" }, this.t("loading")));
+		else if (!list.length && query) children.push(h("div", { class: "empty" }, this.t("noMatches", { query: this.search.trim() })));
 		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));
@@ -8086,7 +8565,7 @@ var NuniWidget = class {
 				children.push(...lost.map(item));
 			}
 		}
-		if (otherPages.length) {
+		if (otherPages.length && this.tab !== "mine") {
 			children.push(h("div", { class: "section-label" }, this.t("otherPages")));
 			for (const p of otherPages.slice(0, 20)) {
 				const href = otherPageHref(p.path, location);
@@ -8105,7 +8584,19 @@ var NuniWidget = class {
 			type: "button",
 			"aria-label": this.t("close"),
 			onclick: () => this.togglePanel(false)
-		}, icon(ICONS.close))), h("div", {
+		}, icon(ICONS.close))), this.comments.length || this.mine?.length ? h("div", { class: "panel-search" }, icon(ICONS.search), h("input", {
+			class: "field",
+			type: "search",
+			value: this.search,
+			placeholder: this.t("searchComments"),
+			"aria-label": this.t("searchComments"),
+			"aria-controls": "nuni-panel-list",
+			"data-focus-key": "panel-search",
+			oninput: (e) => {
+				this.search = e.target.value;
+				this.render();
+			}
+		})) : null, h("div", {
 			class: "tabs",
 			role: "tablist",
 			"aria-label": this.t("comments"),
@@ -8118,11 +8609,13 @@ var NuniWidget = class {
 					"End"
 				].includes(key)) return;
 				e.preventDefault();
-				this.tab = key === "Home" ? "open" : key === "End" ? "resolved" : this.tab === "open" ? "resolved" : "open";
+				const at = PANEL_TABS.indexOf(this.tab);
+				const last = PANEL_TABS.length - 1;
+				this.tab = PANEL_TABS[key === "Home" ? 0 : key === "End" ? last : key === "ArrowRight" ? (at + 1) % PANEL_TABS.length : (at + last) % PANEL_TABS.length];
 				this.focusNext = `[data-focus-key="tab-${this.tab}"]`;
 				this.render();
 			}
-		}, ["open", "resolved"].map((tab) => h("button", {
+		}, PANEL_TABS.map((tab) => h("button", {
 			class: "tab",
 			role: "tab",
 			type: "button",
@@ -8135,7 +8628,7 @@ var NuniWidget = class {
 				this.tab = tab;
 				this.render();
 			}
-		}, tab === "open" ? this.t("tabOpen", { count: open.length }) : this.t("tabResolved", { count: resolved.length })))), h("div", {
+		}, tab === "open" ? this.t("tabOpen", { count: open.length }) : tab === "resolved" ? this.t("tabResolved", { count: resolved.length }) : this.mine ? this.t("tabYours", { count: this.mine.length }) : this.t("yours")))), h("div", {
 			class: "panel-list",
 			id: "nuni-panel-list",
 			role: "tabpanel",
@@ -8175,14 +8668,25 @@ var NuniWidget = class {
 			"data-focus-key": "name",
 			"aria-label": this.t("yourName")
 		});
+		const before = draft.suggestFrom ?? null;
+		const suggesting = Boolean(draft.suggesting) && before !== null;
 		const textarea = h("textarea", {
 			class: "cmp-text",
-			placeholder: this.t("leaveComment"),
+			placeholder: this.t(suggesting ? "addNote" : "leaveComment"),
 			maxlength: LIMITS.bodyMaxLength,
 			rows: 3,
 			"data-focus-key": "body",
 			"aria-label": this.t("comment")
 		});
+		const suggestInput = suggesting ? h("textarea", {
+			class: "cmp-suggest",
+			maxlength: LIMITS.quoteMaxLength,
+			rows: 1,
+			"data-focus-key": "suggestion",
+			"aria-label": this.t("newText")
+		}) : null;
+		if (suggestInput) suggestInput.value = draft.suggestion ?? before ?? "";
+		const canPost = () => Boolean(textarea.value.trim()) || Boolean(suggestInput && suggestInput.value.trim() && suggestInput.value.trim() !== before);
 		const prev = this.uiLayer.querySelector("[data-focus-key=\"body\"]");
 		if (prev) textarea.value = prev.value;
 		const prevName = this.uiLayer.querySelector("[data-focus-key=\"name\"]");
@@ -8196,31 +8700,68 @@ var NuniWidget = class {
 		const post = h("button", {
 			class: "cmp-post",
 			type: "submit",
-			disabled: Boolean(draft.sending) || !textarea.value.trim()
+			disabled: Boolean(draft.sending) || !canPost()
 		}, draft.sending ? this.t("posting") : this.t("post"), icon(ICONS.arrowUp));
 		const update = () => {
-			post.disabled = Boolean(draft.sending) || !textarea.value.trim();
+			post.disabled = Boolean(draft.sending) || !canPost();
 			const left = LIMITS.bodyMaxLength - textarea.value.length;
 			counter.textContent = left <= LIMITS.bodyMaxLength * .1 ? this.t("charsLeft", { count: left }) : "";
-			textarea.style.height = "auto";
-			textarea.style.height = `${textarea.scrollHeight + 2}px`;
+			for (const field of [textarea, suggestInput]) {
+				if (!field) continue;
+				field.style.height = "auto";
+				field.style.height = `${field.scrollHeight + 2}px`;
+			}
 		};
 		textarea.addEventListener("input", () => {
 			update();
 			this.positionCard();
 		});
+		suggestInput?.addEventListener("input", () => {
+			draft.suggestion = suggestInput.value;
+			update();
+			this.positionCard();
+		});
 		requestAnimationFrame(() => {
 			if (!textarea.isConnected) return;
 			update();
 			this.positionCard();
 		});
 		const submit = () => void this.submitDraft(draft, textarea.value, needsName ? nameInput.value : this.name);
-		textarea.addEventListener("keydown", (e) => {
+		for (const field of [textarea, suggestInput]) field?.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
 				e.preventDefault();
 				submit();
 			}
 		});
+		const attach = this.canAttach(draft);
+		const fileInput = attach ? h("input", {
+			type: "file",
+			accept: IMAGE_TYPES.join(","),
+			multiple: true,
+			hidden: true,
+			tabindex: -1,
+			"aria-hidden": "true",
+			onchange: (e) => {
+				const input = e.target;
+				const files = [...input.files ?? []];
+				input.value = "";
+				this.addImages(draft, files);
+			}
+		}) : null;
+		if (attach) textarea.addEventListener("paste", (e) => {
+			const files = [...e.clipboardData?.files ?? []].filter((f) => IMAGE_TYPES.includes(f.type));
+			if (!files.length) return;
+			e.preventDefault();
+			this.addImages(draft, files);
+		});
+		const setSuggesting = (on) => {
+			draft.suggesting = on;
+			draft.error = void 0;
+			this.render();
+			const field = this.uiLayer.querySelector(`[data-focus-key="${on ? "suggestion" : "body"}"]`);
+			field?.focus();
+			if (on) field?.select();
+		};
 		return h("form", {
 			class: `${cls} composer`,
 			"data-card": "composer",
@@ -8236,13 +8777,48 @@ var NuniWidget = class {
 				this.render();
 				this.focusComposer();
 			}
-		}, this.t("notYou"))), draft.anchor.quote ? h("blockquote", { class: "quote" }, draft.anchor.quote.exact) : null, textarea, draft.error ? h("div", {
+		}, this.t("notYou"))), suggesting ? h("div", { class: "suggest" }, h("div", { class: "suggest-label" }, this.t("suggestedEdit"), h("span", { class: "spacer" }), h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => setSuggesting(false)
+		}, this.t("removeSuggestion"))), h("del", {}, before), suggestInput) : draft.anchor.quote ? h("blockquote", { class: "quote" }, draft.anchor.quote.exact) : null, textarea, draft.images?.length ? h("div", { class: "cmp-images" }, h("div", { class: "cmp-thumbs" }, ...draft.images.map((image, i) => h("div", { class: "cmp-thumb" }, h("img", {
+			src: image.url,
+			alt: this.t("imageN", { n: i + 1 })
+		}), h("button", {
+			class: "cmp-thumb-remove",
+			type: "button",
+			"aria-label": this.t("removeImage", { n: i + 1 }),
+			title: this.t("removeImage", { n: i + 1 }),
+			onclick: () => {
+				URL.revokeObjectURL(image.url);
+				draft.images?.splice(i, 1);
+				this.render();
+				this.positionCard();
+			}
+		}, icon(ICONS.close))))), h("p", { class: "cmp-images-note" }, this.t("imagesPublic"))) : null, draft.error ? h("div", {
 			class: "error cmp-error",
 			role: "alert"
 		}, draft.error) : null, h("div", { class: "cmp-foot" }, h("span", {
 			class: "cmp-keys",
 			title: this.t("send", { key: this.i18n.mod })
-		}, h("kbd", {}, this.i18n.mod), h("kbd", {}, "↵")), counter, h("span", { class: "spacer" }), post), h("button", {
+		}, h("kbd", {}, this.i18n.mod), h("kbd", {}, "↵")), before !== null && !suggesting ? h("button", {
+			class: "cmp-link cmp-suggest-btn",
+			type: "button",
+			onclick: () => setSuggesting(true)
+		}, icon(ICONS.edit), this.t("suggestEdit")) : null, attach ? h("button", {
+			class: "icon-btn",
+			type: "button",
+			"aria-label": this.t("addImage"),
+			title: this.t("addImage"),
+			onclick: () => fileInput?.click()
+		}, icon(ICONS.image)) : null, attach && this.canScreenshot(draft) ? h("button", {
+			class: "icon-btn",
+			type: "button",
+			"aria-label": this.t("markUpScreenshot"),
+			title: this.t(draft.preparingMarkup ? "preparingScreenshot" : "markUpScreenshot"),
+			disabled: Boolean(draft.preparingMarkup),
+			onclick: () => void this.markUpScreenshot(draft)
+		}, icon(ICONS.pen)) : null, fileInput, counter, h("span", { class: "spacer" }), post), h("button", {
 			class: "icon-btn cmp-close",
 			type: "button",
 			"aria-label": this.t("cancel"),
@@ -8265,11 +8841,24 @@ var NuniWidget = class {
 			const textarea = h("textarea", {
 				class: "field",
 				maxlength: LIMITS.bodyMaxLength,
-				"data-focus-key": "edit"
+				placeholder: comment.suggestion ? this.t("addNote") : null,
+				"data-focus-key": "edit",
+				"aria-label": this.t("comment")
 			});
 			const prev = this.uiLayer.querySelector("[data-focus-key=\"edit\"]");
 			textarea.value = prev ? prev.value : comment.body;
-			body = h("div", { class: "card-body" }, textarea, h("div", { class: "row" }, h("span", { class: "spacer" }), h("button", {
+			const suggestField = comment.suggestion ? h("textarea", {
+				class: "field",
+				rows: 2,
+				maxlength: LIMITS.quoteMaxLength,
+				"data-focus-key": "edit-suggestion",
+				"aria-label": this.t("newText")
+			}) : null;
+			if (suggestField && comment.suggestion) {
+				const prevSuggestion = this.uiLayer.querySelector("[data-focus-key=\"edit-suggestion\"]");
+				suggestField.value = prevSuggestion ? prevSuggestion.value : comment.suggestion.after;
+			}
+			body = h("div", { class: "card-body" }, comment.suggestion && suggestField ? h("div", { class: "suggest" }, h("div", { class: "suggest-label" }, this.t("suggestedEdit")), h("del", {}, comment.suggestion.before), suggestField) : null, textarea, h("div", { class: "row" }, h("span", { class: "spacer" }), h("button", {
 				class: "btn btn-ghost",
 				type: "button",
 				onclick: () => {
@@ -8280,11 +8869,11 @@ var NuniWidget = class {
 				class: "btn btn-primary",
 				type: "button",
 				disabled: Boolean(card.busy),
-				onclick: () => this.saveEdit(comment, textarea.value)
+				onclick: () => this.saveEdit(comment, textarea.value, suggestField?.value)
 			}, this.t("save"))));
 		} else {
 			const badges = [
-				comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), this.t("resolved")) : null,
+				comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), this.t(comment.resolution === "outdated" ? "outdated" : "resolved")) : null,
 				comment.page.origin !== location.origin ? h("span", {
 					class: "badge",
 					title: this.t("leftOn", { origin: comment.page.origin })
@@ -8313,7 +8902,16 @@ var NuniWidget = class {
 				"aria-label": this.t("close"),
 				title: this.t("close"),
 				onclick: () => this.closeCard()
-			}, icon(ICONS.close))), h("div", { class: "msg-main" }, 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", {
+			}, icon(ICONS.close))), h("div", { class: "msg-main" }, comment.suggestion ? renderSuggestion(comment.suggestion, this.t("suggestedEdit"), owner ? this.copyNewTextButton(comment.suggestion.after) : null) : comment.anchor.quote ? h("blockquote", { class: "quote" }, comment.anchor.quote.exact) : null, comment.body ? h("div", { class: "comment-body" }, comment.body) : null, this.threadId === comment._id && this.thread?.images?.length ? h("div", { class: "images" }, ...this.thread.images.map((url, i) => h("a", {
+				href: url,
+				target: "_blank",
+				rel: "noreferrer",
+				title: this.t("openImage")
+			}, h("img", {
+				src: url,
+				alt: this.t("imageN", { n: i + 1 }),
+				loading: "lazy"
+			})))) : null, this.ownerDetail?._id === comment._id && this.ownerDetail.screenshotUrl ? h("a", {
 				class: "shot",
 				href: this.ownerDetail.screenshotUrl,
 				target: "_blank",
@@ -8322,14 +8920,29 @@ var NuniWidget = class {
 			}, h("img", {
 				src: this.ownerDetail.screenshotUrl,
 				alt: this.t("screenshotTaken")
-			})) : null, badges.length ? h("div", { class: "badges" }, ...badges) : null, h("div", { class: "msg-foot" }, this.renderReactions(comment, comment._id), h("span", { class: "spacer" }), h("button", {
+			})) : null, badges.length ? h("div", { class: "badges" }, ...badges) : null, owner && !resolved && !placement?.element ? h("div", { class: "lost" }, h("p", {}, this.t("lostHint")), h("div", { class: "row" }, h("button", {
+				class: "btn",
+				type: "button",
+				onclick: () => this.startMovePin(comment)
+			}, icon(ICONS.target), this.t("movePin")), h("button", {
+				class: "btn btn-ghost",
+				type: "button",
+				disabled: Boolean(card.busy),
+				onclick: () => this.closeAsOutdated(comment)
+			}, this.t("closeOutdated")))) : null, h("div", { class: "msg-foot" }, this.renderReactions(comment, comment._id), h("span", { class: "spacer" }), h("button", {
 				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("copyForAgent"),
 				title: contextPending ? this.t("loadingContext") : this.t("copyForAgentHint"),
 				disabled: contextPending,
 				onclick: () => this.copyForAgent(comment)
-			}, icon(ICONS.bot)), mine ? h("button", {
+			}, icon(ICONS.bot)), owner && placement?.element ? h("button", {
+				class: "icon-btn",
+				type: "button",
+				"aria-label": this.t("movePin"),
+				title: this.t("movePin"),
+				onclick: () => this.startMovePin(comment)
+			}, icon(ICONS.target)) : null, mine ? h("button", {
 				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("edit"),
@@ -8543,8 +9156,8 @@ var NuniWidget = class {
 			top = point.y - 28;
 			if (left + width > vw - 12) left = point.x - width - 12;
 		} else {
-			const { position } = this.config;
-			left = position.endsWith("left") ? 16 : vw - width - 16;
+			const { position } = this;
+			left = position.endsWith("left") ? 16 : position.endsWith("center") ? (vw - width) / 2 : vw - width - 16;
 			top = position.startsWith("top") ? 72 : vh - height - 72;
 		}
 		left = Math.max(12, Math.min(left, vw - width - 12));
@@ -8558,6 +9171,22 @@ var NuniWidget = class {
 		});
 	}
 };
+/** The toolbar spot nearest a point: thirds across the screen, halves down. */
+function nearestPosition(x, y) {
+	const width = window.innerWidth;
+	const across = x < width / 3 ? "left" : x > width * 2 / 3 ? "right" : "center";
+	return `${y < window.innerHeight / 2 ? "top" : "bottom"}-${across}`;
+}
+/** A press on a scrollbar, which scrolls rather than points at the page. */
+function onScrollbar(e) {
+	const el = e.composedPath()[0];
+	if (!(el instanceof Element)) return false;
+	const root = document.documentElement;
+	if (el === root) return e.clientX >= root.clientWidth || e.clientY >= root.clientHeight;
+	if (!(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)) return false;
+	const box = el.getBoundingClientRect();
+	return e.clientX - box.left - el.clientLeft >= el.clientWidth || e.clientY - box.top - el.clientTop >= el.clientHeight;
+}
 //#endregion
 //#region src/mount.ts
 /** Nuni's own requests are not the page's problem. */
@@ -8640,7 +9269,7 @@ function unmount(state) {
 * down the widget it was created for.
 */
 function init(options) {
-	return mount(options, { loadScreenshot: () => import("./screenshot-DcJ_SzKF.js").then((m) => m.captureScreenshot) });
+	return mount(options, { loadScreenshot: () => import("./tools-gIAPu66h.js").then((m) => m.screenshotTools) });
 }
 //#endregion
 export { VERSION, init, EN as messages };