@nuniapp/widget 0.1.10 → 0.1.12

package/dist/index.js

@@ -1,4 +1,4 @@
-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";
+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-YEIbiA4X.js";
 //#region ../shared/src/path.ts
 /**
 * Normalize a URL to the key comments are matched by. Query and hash are
@@ -176,7 +176,7 @@ function buildCommentPrompt(comment, options = {}) {
 }
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.10";
+const VERSION = "0.1.12";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -5285,12 +5285,16 @@ var NuniApi = class {
 		}, (comments) => cb(comments), onError);
 	}
 	/** The visitor's own comments on every page, live. */
-	onMine(authorSecret, cb) {
+	onMine(author, cb) {
 		return this.client.onUpdate(api.comments.listMine, {
 			publicId: this.config.project,
-			authorSecret
+			...author
 		}, (comments) => cb(comments), () => {});
 	}
+	/** Comments on every page, newest first, live. */
+	onSite(cb) {
+		return this.client.onUpdate(api.comments.listForSite, { publicId: this.config.project }, (comments) => cb(comments), () => {});
+	}
 	onPages(cb) {
 		return this.client.onUpdate(api.comments.pagesWithComments, { publicId: this.config.project }, cb, () => {});
 	}
@@ -5300,6 +5304,24 @@ var NuniApi = class {
 			sessionToken
 		}, cb, () => {});
 	}
+	/** Who a stored commenter sign-in belongs to, live (invalid once revoked). */
+	onCommenter(commenterToken, cb) {
+		return this.client.onUpdate(api.commenters.validate, {
+			publicId: this.config.project,
+			commenterToken
+		}, cb, () => {});
+	}
+	/** Right after signing in: this browser's guest comments become the account's. */
+	linkBrowser(authorSecret, commenterToken) {
+		return this.run(this.client.mutation(api.commenters.linkBrowser, {
+			publicId: this.config.project,
+			authorSecret,
+			commenterToken
+		}));
+	}
+	signOutCommenter(commenterToken) {
+		return this.client.mutation(api.commenters.signOut, { commenterToken }).catch(() => null);
+	}
 	/** A comment with the owner-only context (screenshot, console, DOM). */
 	onOwnerComment(id, sessionToken, cb) {
 		return this.client.onUpdate(api.comments.getForOwner, {
@@ -5360,21 +5382,22 @@ var NuniApi = class {
 		return data.id;
 	}
 	/** Attach the element's screenshot (for the owner) to a just-posted comment. */
-	uploadScreenshot(id, authorSecret, image) {
-		return this.upload("screenshot", id, authorSecret, image);
+	uploadScreenshot(id, author, image) {
+		return this.upload("screenshot", id, author, image);
 	}
 	/** An image for everyone: picked, pasted or a marked-up screenshot. */
-	uploadImage(id, authorSecret, image) {
-		return this.upload("image", id, authorSecret, image);
+	uploadImage(id, author, image) {
+		return this.upload("image", id, author, image);
 	}
-	async upload(kind, id, authorSecret, image) {
+	async upload(kind, id, author, image) {
 		const response = await fetch(`${this.config.convexSiteUrl}/widget/${kind}`, {
 			method: "POST",
 			headers: {
 				"Content-Type": image.type,
 				"X-Nuni-Project": this.config.project,
 				"X-Nuni-Comment": id,
-				"X-Nuni-Author": authorSecret
+				"X-Nuni-Author": author.authorSecret,
+				...author.commenterToken ? { "X-Nuni-Commenter": author.commenterToken } : {}
 			},
 			body: image
 		});
@@ -5390,18 +5413,18 @@ var NuniApi = class {
 			throw new NuniApiError(errorMessage(error), "error");
 		}
 	}
-	editOwn(id, authorSecret, body, suggestion) {
+	editOwn(id, author, body, suggestion) {
 		return this.run(this.client.mutation(api.comments.editOwn, {
 			id,
-			authorSecret,
+			...author,
 			body,
 			suggestion
 		}));
 	}
-	deleteOwn(id, authorSecret) {
+	deleteOwn(id, author) {
 		return this.run(this.client.mutation(api.comments.deleteOwn, {
 			id,
-			authorSecret
+			...author
 		}));
 	}
 	resolve(id, sessionToken, resolution) {
@@ -5444,17 +5467,17 @@ var NuniApi = class {
 			sessionToken
 		}));
 	}
-	editReply(id, authorSecret, body) {
+	editReply(id, author, body) {
 		return this.run(this.client.mutation(api.replies.editOwn, {
 			id,
-			authorSecret,
+			...author,
 			body
 		}));
 	}
-	deleteReply(id, authorSecret) {
+	deleteReply(id, author) {
 		return this.run(this.client.mutation(api.replies.deleteOwn, {
 			id,
-			authorSecret
+			...author
 		}));
 	}
 	removeReply(id, sessionToken) {
@@ -5463,13 +5486,13 @@ var NuniApi = class {
 			sessionToken
 		}));
 	}
-	toggleReaction(commentId, targetId, emoji, authorSecret) {
+	toggleReaction(commentId, targetId, emoji, author) {
 		return this.run(this.client.mutation(api.reactions.toggle, {
 			publicId: this.config.project,
 			commentId,
 			targetId,
 			emoji,
-			authorSecret
+			...author
 		}));
 	}
 	remove(id, sessionToken) {
@@ -5497,6 +5520,8 @@ const EN = {
 	pickElement: "Pick an element",
 	allComments: "All comments",
 	openCount: "Comments on this page: {count} open",
+	hideComments: "Hide comments",
+	hideCommentsKey: "Hide comments (Shift+{key})",
 	commentSelection: "Comment on the selected text",
 	commentSelectionKey: "Comment on the selected text ({key})",
 	pickHint: "Click anything to comment, or drag to mark an area",
@@ -5531,6 +5556,11 @@ const EN = {
 	yourName: "Your name",
 	leaveComment: "Leave a comment",
 	notYou: "Not you?",
+	signIn: "Sign in",
+	signInGithub: "Sign in with GitHub to comment as yourself",
+	signOut: "Sign out",
+	signedInAs: "Signed in as {name}",
+	signedInGithub: "Signed in with GitHub",
 	cancel: "Cancel",
 	post: "Post",
 	posting: "Posting…",
@@ -5604,7 +5634,12 @@ const EN = {
 	copied: "Copied for your coding agent",
 	copyFailed: "Couldn't copy",
 	signedIn: "You're signed in as the owner",
+	commenterSignedIn: "You're signed in",
+	signedOut: "Signed out",
 	linkGone: "That comment was deleted or is on another page",
+	commentsHidden: "Comments hidden",
+	commentsHiddenKey: "Comments hidden. Press Shift+{key} to show them",
+	commentsShown: "Comments shown",
 	enterName: "Enter your name",
 	writeFirst: "Write a comment first",
 	changeTextFirst: "Change the text to suggest an edit",
@@ -5678,6 +5713,8 @@ const s = (d) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" wi
 const ICONS = {
 	comment: s("<path d=\"M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z\"/>"),
 	list: s("<path d=\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"/>"),
+	eye: s("<path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
+	eyeOff: s("<path d=\"M10.7 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20\"/>"),
 	close: s("<path d=\"M18 6 6 18M6 6l12 12\"/>"),
 	check: s("<path d=\"M20 6 9 17l-5-5\"/>"),
 	undo: s("<path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-15-6.7L3 13\"/>"),
@@ -5947,10 +5984,14 @@ const KEYS = {
 	name: "nuni:name",
 	secret: "nuni:author-secret",
 	session: (project) => `nuni:session:${project}`,
+	/** A visitor's sign-in to comment under their account. */
+	commenter: (project) => `nuni:commenter:${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}`
+	lastViewed: (project) => `nuni:last-viewed:${project}`,
+	/** This visitor hid the pins (Shift+C). */
+	hidden: (project) => `nuni:hidden:${project}`
 };
 //#endregion
 //#region src/styles.ts
@@ -6066,6 +6107,9 @@ button { cursor: pointer; }
   justify-content: center;
 }
 .tb-btn[aria-pressed="true"] .tb-count { background: rgba(255,255,255,0.25); color: inherit; }
+.tb-icon { width: 36px; padding: 0; justify-content: center; }
+/* Pins hidden: the count stays, dimmed, so the comments aren't lost. */
+.toolbar[data-pins-hidden] .tb-count { opacity: 0.55; }
 
 /* Picking */
 .pick-hint {
@@ -6281,6 +6325,10 @@ button { cursor: pointer; }
   justify-content: center;
   flex: none;
 }
+.avatar { position: relative; overflow: hidden; }
+.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.signed-in { display: inline-flex; flex: none; color: var(--n-fg-muted); }
+.signed-in .icon { width: 13px; height: 13px; }
 .author { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .meta { color: var(--n-fg-muted); font-size: 12px; white-space: nowrap; }
 .badge {
@@ -6509,6 +6557,10 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
   white-space: nowrap;
 }
 .cmp-link:hover { color: var(--n-fg); }
+.cmp-head-guest { padding-right: 116px; }
+.cmp-sign-in { position: absolute; top: 13px; right: 44px; height: 32px; display: inline-flex; align-items: center; gap: 4px; }
+.cmp-sign-in .icon { width: 13px; height: 13px; }
+.signed-in-as { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .composer .quote, .composer .suggest { margin: 6px 14px 0; }
 .suggest {
   display: grid;
@@ -6691,6 +6743,8 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
 .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); }
+/* A page's path, as written: paths are case-sensitive. */
+.section-path { text-transform: none; letter-spacing: 0; font-size: 12px; overflow-wrap: anywhere; }
 .empty { padding: 32px 16px; text-align: center; color: var(--n-fg-muted); }
 .panel-foot { padding: 12px; border-top: 1px solid var(--n-border); display: grid; gap: 8px; font-size: 13px; }
 .link { border: 0; background: none; padding: 0; color: var(--n-accent); font-weight: 600; text-decoration: none; }
@@ -6830,11 +6884,23 @@ function isTypingTarget(target) {
 	const el = target;
 	return el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
 }
-function avatar(name) {
-	return h("span", {
+/** Initials, under the account photo of an author who signed in. */
+function avatar(name, photo) {
+	const el = h("span", {
 		class: "avatar",
 		style: `background:${colorFor(name)}`
 	}, initials(name));
+	if (photo?.startsWith("https://")) {
+		const img = h("img", {
+			src: photo,
+			alt: "",
+			loading: "lazy",
+			referrerpolicy: "no-referrer",
+			onerror: () => img.remove()
+		});
+		el.append(img);
+	}
+	return el;
 }
 function describeElement(el) {
 	const tag = el.tagName.toLowerCase();
@@ -6894,10 +6960,13 @@ var NuniWidget = class {
 		_defineProperty(this, "status", null);
 		_defineProperty(this, "pages", []);
 		_defineProperty(this, "picking", false);
+		_defineProperty(this, "pinsHidden", void 0);
 		_defineProperty(this, "panelOpen", false);
 		_defineProperty(this, "tab", "open");
 		_defineProperty(this, "mine", null);
 		_defineProperty(this, "mineUnsub", null);
+		_defineProperty(this, "site", null);
+		_defineProperty(this, "siteUnsub", null);
 		_defineProperty(this, "repinId", null);
 		_defineProperty(this, "pinReported", /* @__PURE__ */ new Map());
 		_defineProperty(this, "pinReportTimer", 0);
@@ -6913,6 +6982,10 @@ var NuniWidget = class {
 		_defineProperty(this, "secretHash", "");
 		_defineProperty(this, "ownerToken", void 0);
 		_defineProperty(this, "ownerName", null);
+		_defineProperty(this, "commenterToken", void 0);
+		_defineProperty(this, "commenter", null);
+		_defineProperty(this, "commenterUnsub", null);
+		_defineProperty(this, "mineToken", null);
 		_defineProperty(this, "deepLinkId", null);
 		_defineProperty(this, "extraComment", null);
 		_defineProperty(this, "ownerDetail", null);
@@ -7023,7 +7096,9 @@ var NuniWidget = class {
 		}
 		this.secret = secret;
 		this.ownerToken = read(KEYS.session(config.project));
+		this.commenterToken = read(KEYS.commenter(config.project));
 		this.lastViewedId = read(KEYS.lastViewed(config.project));
+		this.pinsHidden = read(KEYS.hidden(config.project)) === "1";
 		this.position = oneOf(read(KEYS.position(config.project)) ?? void 0, POSITIONS, config.position);
 		this.host = document.createElement("div");
 		this.host.id = "nuni-root";
@@ -7100,6 +7175,7 @@ var NuniWidget = class {
 			this.render();
 		}));
 		if (this.ownerToken) this.watchSession(this.ownerToken);
+		if (this.commenterToken) this.watchCommenter(this.commenterToken);
 		this.readDeepLink();
 		this.subscribePage();
 		this.cleanups.push(onLocationChange(() => {
@@ -7172,9 +7248,11 @@ var NuniWidget = class {
 		this.endToolbarDrag?.();
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
+		this.commenterUnsub?.();
 		this.ownerDetailUnsub?.();
 		this.threadUnsub?.();
 		this.mineUnsub?.();
+		this.siteUnsub?.();
 		clearTimeout(this.pinReportTimer);
 		this.resolveRun++;
 		for (const stop of this.scopeWatchers.values()) stop();
@@ -7228,6 +7306,62 @@ var NuniWidget = class {
 			this.render();
 		});
 	}
+	watchCommenter(token) {
+		this.commenterUnsub?.();
+		this.commenterUnsub = this.api.onCommenter(token, (result) => {
+			if (this.commenterToken !== token) return;
+			if (result.valid) {
+				const { name, avatarUrl, authorKey } = result;
+				this.commenter = {
+					name,
+					avatarUrl,
+					authorKey
+				};
+			} else this.forgetCommenter();
+			this.render();
+		});
+	}
+	/** Back to commenting as a guest in this browser. */
+	forgetCommenter() {
+		this.commenterUnsub?.();
+		this.commenterUnsub = null;
+		this.commenterToken = null;
+		this.commenter = null;
+		write(KEYS.commenter(this.config.project), null);
+		this.syncMine();
+	}
+	/** Who is writing, for every comment, reply, reaction and upload. */
+	get author() {
+		return {
+			authorSecret: this.secret,
+			commenterToken: this.commenterToken ?? void 0
+		};
+	}
+	/** The name new comments go out under. */
+	get displayName() {
+		return this.commenter?.name ?? this.name;
+	}
+	/** The key on what this visitor writes now. */
+	get authorKey() {
+		return this.commenter?.authorKey ?? this.secretHash;
+	}
+	/** Signed in or not, this browser's own guest comments stay editable. */
+	ownsKey(key) {
+		return Boolean(key) && (key === this.secretHash || key === this.commenter?.authorKey);
+	}
+	/** An author's photo and name, marked when they wrote it signed in. */
+	authorLine(row) {
+		return [
+			avatar(row.authorName, row.signedIn ? row.avatarUrl : void 0),
+			h("span", { class: "author" }, row.authorName),
+			row.signedIn ? h("span", {
+				class: "signed-in",
+				role: "img",
+				"aria-label": this.t("signedInGithub"),
+				title: this.t("signedInGithub")
+			}, icon(ICONS.github)) : null
+		];
+	}
 	/** Keep the owner-only details of the open thread subscribed. */
 	syncOwnerDetail() {
 		const token = this.ownerToken;
@@ -7265,10 +7399,19 @@ var NuniWidget = class {
 		return Boolean(this.ownerToken && this.ownerName);
 	}
 	isMine(comment) {
-		return Boolean(this.secretHash) && comment.authorKeyHash === this.secretHash;
+		return this.ownsKey(comment.authorKeyHash);
 	}
+	/** The open thread keeps its pin while the rest are hidden. */
 	visibleComments() {
-		return this.comments.filter((c) => c.status === (this.panelOpen && this.tab === "resolved" ? "resolved" : "open") || this.card?.kind === "thread" && this.card.id === c._id);
+		return this.comments.filter((c) => !this.pinsHidden && c.status === (this.panelOpen && this.tab === "resolved" ? "resolved" : "open") || this.card?.kind === "thread" && this.card.id === c._id);
+	}
+	/** Hide or show the pins, like Figma's Shift+C. */
+	setPinsHidden(hidden, quiet = false) {
+		if (this.pinsHidden === hidden) return;
+		this.pinsHidden = hidden;
+		write(KEYS.hidden(this.config.project), hidden ? "1" : null);
+		if (quiet) return;
+		this.showToast(hidden ? this.withKey("commentsHidden", "commentsHiddenKey") : this.t("commentsShown"));
 	}
 	scheduleResolve() {
 		clearTimeout(this.resolveTimer);
@@ -7515,6 +7658,7 @@ var NuniWidget = class {
 		this.dragBox = null;
 		if (on) {
 			this.card = null;
+			this.setPinsHidden(false, true);
 			if (window.matchMedia(MOBILE_QUERY).matches) this.panelOpen = false;
 			this.pickDocs = [document, ...frameDocuments(document)];
 			for (const doc of this.pickDocs) {
@@ -7635,6 +7779,7 @@ var NuniWidget = class {
 			this.movePin(repinId, draft);
 			return;
 		}
+		this.setPinsHidden(false, true);
 		if (this.config.capture.dom) try {
 			draft.dom = domContext(element);
 		} catch {}
@@ -7692,7 +7837,7 @@ var NuniWidget = class {
 	async attachScreenshot(id, shot) {
 		try {
 			const image = await shot;
-			if (image) await this.api.uploadScreenshot(id, this.secret, image);
+			if (image) await this.api.uploadScreenshot(id, this.author, image);
 		} catch {}
 	}
 	/** One after another, so they keep their order. */
@@ -7700,7 +7845,7 @@ var NuniWidget = class {
 		const images = draft.images ?? [];
 		revokeImages(draft);
 		try {
-			for (const image of images) await this.api.uploadImage(id, this.secret, image.blob);
+			for (const image of images) await this.api.uploadImage(id, this.author, image.blob);
 		} catch (error) {
 			this.showToast(error instanceof NuniApiError ? error.message : this.t("imageFailed"));
 		}
@@ -7827,7 +7972,8 @@ var NuniWidget = class {
 		const hotkey = this.config.hotkey;
 		if (hotkey && e.key.toLowerCase() === hotkey) {
 			e.preventDefault();
-			if (!this.picking && this.pageSelection()) this.commentOnSelection();
+			if (e.shiftKey && hotkey !== hotkey.toUpperCase()) this.setPinsHidden(!this.pinsHidden);
+			else if (!this.picking && this.pageSelection()) this.commentOnSelection();
 			else this.setPicking(!this.picking);
 		}
 	}
@@ -7983,6 +8129,29 @@ var NuniWidget = class {
 		url.searchParams.set("origin", location.origin);
 		if (!window.open(url.toString(), "nuni-claim", "popup,width=480,height=680")) location.href = url.toString();
 	}
+	/** Sign in to comment under an account, in a popup on the dashboard. */
+	openCommenterSignIn() {
+		const url = new URL(`${this.config.appUrl}/dashboard/comment-sign-in`);
+		url.searchParams.set("project", this.config.project);
+		url.searchParams.set("origin", location.origin);
+		if (!window.open(url.toString(), "nuni-comment-sign-in", "popup,width=480,height=680")) location.href = url.toString();
+	}
+	async onCommenterSignedIn(token) {
+		this.commenterToken = token;
+		write(KEYS.commenter(this.config.project), token);
+		await this.api.linkBrowser(this.secret, token).catch(() => null);
+		if (this.commenterToken !== token) return;
+		this.watchCommenter(token);
+		this.syncMine();
+		this.showToast(this.t("commenterSignedIn"));
+	}
+	signOutCommenter() {
+		const token = this.commenterToken;
+		if (!token) return;
+		this.forgetCommenter();
+		this.api.signOutCommenter(token);
+		this.showToast(this.t("signedOut"));
+	}
 	onMessage(e) {
 		let appOrigin;
 		try {
@@ -7992,7 +8161,12 @@ var NuniWidget = class {
 		}
 		if (e.origin !== appOrigin) return;
 		const data = e.data;
-		if (!data || data.type !== "nuni:session" || data.project !== this.config.project) return;
+		if (!data || data.project !== this.config.project) return;
+		if (data.type === "nuni:commenter" && typeof data.token === "string" && data.token.startsWith("nuni_c_")) {
+			this.onCommenterSignedIn(data.token);
+			return;
+		}
+		if (data.type !== "nuni:session") return;
 		if (typeof data.token !== "string" || !data.token.startsWith("nuni_s_")) return;
 		this.ownerToken = data.token;
 		write(KEYS.session(this.config.project), data.token);
@@ -8040,7 +8214,8 @@ var NuniWidget = class {
 		setTimeout(() => this.scheduleLayout(), 400);
 	}
 	async submitDraft(draft, body, name) {
-		const cleanName = name.trim().slice(0, LIMITS.nameMaxLength);
+		const signedIn = Boolean(this.commenter);
+		const cleanName = (this.commenter?.name ?? name).trim().slice(0, LIMITS.nameMaxLength);
 		const cleanBody = body.trim();
 		if (!cleanName) return this.setDraftError(draft, this.t("enterName"));
 		const before = draft.suggesting ? draft.suggestFrom : null;
@@ -8053,8 +8228,10 @@ var NuniWidget = class {
 		} : 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);
+		if (!signedIn) {
+			this.name = cleanName;
+			write(KEYS.name, cleanName);
+		}
 		draft.sending = true;
 		draft.error = void 0;
 		this.render();
@@ -8065,7 +8242,7 @@ var NuniWidget = class {
 				body: cleanBody,
 				suggestion,
 				authorName: cleanName,
-				authorSecret: this.secret,
+				...this.author,
 				page: {
 					...loc,
 					path: this.pageKey,
@@ -8174,7 +8351,7 @@ var NuniWidget = class {
 	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;
+		const action = this.isMine(c) ? () => this.api.deleteOwn(c._id, this.author) : token ? () => this.api.remove(c._id, token) : null;
 		if (!action) return;
 		this.act(c._id, action, this.t("deleted")).then((ok) => {
 			if (!ok) return;
@@ -8185,12 +8362,12 @@ var NuniWidget = class {
 		});
 	}
 	isMyReply(reply) {
-		return Boolean(this.secretHash) && reply.authorKeyHash === this.secretHash;
+		return this.ownsKey(reply.authorKeyHash);
 	}
 	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 authorName = (this.isOwner ? this.ownerName : this.commenter?.name ?? name)?.trim().slice(0, LIMITS.nameMaxLength);
 		const clean = body.trim();
 		if (!clean) return;
 		if (!authorName) {
@@ -8203,7 +8380,7 @@ var NuniWidget = class {
 			this.render();
 			return;
 		}
-		if (!this.isOwner) {
+		if (!this.isOwner && !this.commenter) {
 			this.name = authorName;
 			write(KEYS.name, authorName);
 		}
@@ -8215,7 +8392,7 @@ var NuniWidget = class {
 				commentId: comment._id,
 				body: clean,
 				authorName,
-				authorSecret: this.secret,
+				...this.author,
 				sessionToken: this.ownerToken ?? void 0
 			});
 			const box = this.uiLayer.querySelector("[data-focus-key=\"reply\"]");
@@ -8227,7 +8404,7 @@ var NuniWidget = class {
 		this.render();
 	}
 	toggleReaction(comment, targetId, emoji) {
-		this.api.toggleReaction(comment._id, targetId, emoji, this.secret).catch((error) => {
+		this.api.toggleReaction(comment._id, targetId, emoji, this.author).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();
@@ -8237,11 +8414,11 @@ var NuniWidget = class {
 	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;
+		const action = this.isMyReply(reply) ? () => this.api.deleteReply(reply._id, this.author) : 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) => {
+		this.act(comment._id, () => this.api.editReply(reply._id, this.author, body), this.t("saved")).then((ok) => {
 			if (ok && this.card?.kind === "thread") {
 				this.card.replyEditing = void 0;
 				this.render();
@@ -8249,7 +8426,7 @@ var NuniWidget = class {
 		});
 	}
 	saveEdit(c, body, suggestion) {
-		this.act(c._id, () => this.api.editOwn(c._id, this.secret, body, suggestion), this.t("saved"));
+		this.act(c._id, () => this.api.editOwn(c._id, this.author, body, suggestion), this.t("saved"));
 	}
 	/** For the owner: the suggested words, ready to paste into the code. */
 	copyNewTextButton(text) {
@@ -8268,11 +8445,24 @@ var NuniWidget = class {
 		}, 2400);
 		this.render();
 	}
+	/** Keep Yours subscribed with the current sign-in, once the panel opened. */
+	syncMine() {
+		if (!this.mineUnsub && !this.panelOpen) return;
+		if (this.mineUnsub && this.mineToken === this.commenterToken) return;
+		this.mineUnsub?.();
+		this.mine = null;
+		this.mineToken = this.commenterToken;
+		this.mineUnsub = this.api.onMine(this.author, (mine) => {
+			this.mine = mine;
+			this.render();
+		});
+	}
 	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;
+		if (open) this.syncMine();
+		if (open && !this.siteUnsub) this.siteUnsub = this.api.onSite((site) => {
+			this.site = site;
 			this.render();
 		});
 		if (open) {
@@ -8370,8 +8560,8 @@ var NuniWidget = class {
 			const pin = h("div", {
 				class: "pin pin-draft pin-pending",
 				"aria-hidden": "true"
-			}, this.name ? initials(this.name) : "+");
-			pin.style.background = this.name ? colorFor(this.name) : "var(--n-accent)";
+			}, this.displayName ? initials(this.displayName) : "+");
+			pin.style.background = this.displayName ? colorFor(this.displayName) : "var(--n-accent)";
 			pin.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
 			this.pinLayer.append(pin);
 		}
@@ -8414,6 +8604,7 @@ var NuniWidget = class {
 			role: "toolbar",
 			"aria-label": this.t("toolbar"),
 			"data-dragging": !!drag,
+			"data-pins-hidden": this.pinsHidden,
 			style: drag && `transform: translate(${drag.dx}px, ${drag.dy}px)`,
 			onpointerdown: (e) => this.startToolbarDrag(e)
 		}, h("button", {
@@ -8432,7 +8623,15 @@ var NuniWidget = class {
 			"aria-label": this.t("openCount", { count: open }),
 			title: this.t("allComments"),
 			onclick: () => this.togglePanel()
-		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))));
+		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))), h("button", {
+			class: "tb-btn tb-icon",
+			type: "button",
+			"aria-pressed": String(this.pinsHidden),
+			"data-focus-key": "tb-hide",
+			"aria-label": this.t("hideComments"),
+			title: this.withKey("hideComments", "hideCommentsKey"),
+			onclick: () => this.setPinsHidden(!this.pinsHidden)
+		}, icon(this.pinsHidden ? ICONS.eyeOff : ICONS.eye)));
 	}
 	/**
 	* Drag the toolbar anywhere; on release it glides to the nearest corner or
@@ -8515,10 +8714,18 @@ var NuniWidget = class {
 		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 list = (this.tab === "open" ? open : this.tab === "resolved" ? resolved : mine).filter((c) => matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, c.page.path));
 		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 && matches(p.path));
+		const elsewhere = (this.site ?? []).filter((c) => c.page.path !== this.pageKey);
+		const elsewhereOf = (status) => elsewhere.filter((c) => c.status === status);
+		const groups = /* @__PURE__ */ new Map();
+		for (const c of elsewhereOf(this.tab === "resolved" ? "resolved" : "open")) {
+			if (!matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, c.page.path)) continue;
+			groups.set(c.page.path, [...groups.get(c.page.path) ?? [], c]);
+		}
+		const listed = new Set(elsewhereOf(this.tab === "resolved" ? "resolved" : "open").map((c) => c.page.path));
+		const otherPages = this.pages.filter((p) => p.path !== this.pageKey && !listed.has(p.path) && 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;
@@ -8537,16 +8744,15 @@ var NuniWidget = class {
 				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", {
+		const item = (c, href) => h(href === void 0 ? "button" : href === null ? "div" : "a", {
 			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", {
-			class: "avatar",
-			style: `background:${colorFor(c.authorName)}`
-		}, 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", {
+			...href === void 0 ? {
+				type: "button",
+				onclick: () => this.focusComment(c._id)
+			} : { href }
+		}, h("div", { class: "row" }, ...this.authorLine(c), 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.resolution === "outdated" ? h("span", { class: "badge" }, this.t("outdated")) : null), ...content(c));
@@ -8556,14 +8762,20 @@ var NuniWidget = class {
 			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));
-			if (lost.length) {
-				children.push(h("div", { class: "section-label" }, this.t("notFoundHere")));
-				children.push(...lost.map(item));
+			if ((groups.size > 0 || otherPages.length > 0) && (list.length || !query)) children.push(h("div", { class: "section-label" }, this.t("thisPage")));
+			if (list.length) {
+				children.push(...placed.map((c) => item(c)));
+				if (lost.length) {
+					children.push(h("div", { class: "section-label" }, this.t("notFoundHere")));
+					children.push(...lost.map((c) => item(c)));
+				}
+			} else if (!query) children.push(h("div", { class: "empty" }, this.tab === "open" ? this.withKey("noOpen", "noOpenKey") : this.t("noResolved")));
+			for (const [path, comments] of groups) {
+				children.push(h("div", { class: "section-label section-path" }, path));
+				children.push(...comments.map((c) => item(c, commentHref(c, location))));
 			}
+			if (!children.length && !otherPages.length) children.push(h("div", { class: "empty" }, this.t("noMatches", { query: this.search.trim() })));
 		}
 		if (otherPages.length && this.tab !== "mine") {
 			children.push(h("div", { class: "section-label" }, this.t("otherPages")));
@@ -8584,7 +8796,7 @@ var NuniWidget = class {
 			type: "button",
 			"aria-label": this.t("close"),
 			onclick: () => this.togglePanel(false)
-		}, icon(ICONS.close))), this.comments.length || this.mine?.length ? h("div", { class: "panel-search" }, icon(ICONS.search), h("input", {
+		}, icon(ICONS.close))), this.comments.length || this.mine?.length || this.site?.length ? h("div", { class: "panel-search" }, icon(ICONS.search), h("input", {
 			class: "field",
 			type: "search",
 			value: this.search,
@@ -8628,22 +8840,30 @@ var NuniWidget = class {
 				this.tab = tab;
 				this.render();
 			}
-		}, 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", {
+		}, tab === "open" ? this.t("tabOpen", { count: open.length + elsewhereOf("open").length }) : tab === "resolved" ? this.t("tabResolved", { count: resolved.length + elsewhereOf("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",
 			"aria-labelledby": `nuni-tab-${this.tab}`
-		}, ...children), this.status && !this.status.claimed && !this.isOwner ? this.renderPanelFooter() : null);
+		}, ...children), this.renderPanelFooter());
 	}
 	renderPanelFooter() {
-		return h("div", { class: "panel-foot" }, h("div", { class: "row" }, h("span", { class: "meta" }, this.t("ownSite")), h("span", { class: "spacer" }), h("button", {
+		const claimable = this.status && !this.status.claimed && !this.isOwner;
+		const commenter = this.commenter;
+		if (!claimable && !commenter) return null;
+		return h("div", { class: "panel-foot" }, commenter ? h("div", { class: "row" }, avatar(commenter.name, commenter.avatarUrl), h("span", { class: "meta signed-in-as" }, this.t("signedInAs", { name: commenter.name })), h("span", { class: "spacer" }), h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => this.signOutCommenter()
+		}, this.t("signOut"))) : null, claimable ? 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), this.t("claim"))));
+		}, icon(ICONS.github), this.t("claim"))) : null);
 	}
 	renderComposer(draft, cls) {
-		const needsName = !this.name;
+		const commenter = this.commenter;
+		const needsName = !commenter && !this.name;
 		const avatar = h("span", {
 			class: "avatar cmp-avatar",
 			"aria-hidden": "true"
@@ -8769,7 +8989,15 @@ var NuniWidget = class {
 				e.preventDefault();
 				submit();
 			}
-		}, h("div", { class: "cmp-head" }, avatar, needsName ? nameInput : h("span", { class: "author" }, this.name), h("span", { class: "spacer" }), needsName ? null : h("button", {
+		}, commenter ? h("div", { class: "cmp-head" }, ...this.authorLine({
+			authorName: commenter.name,
+			avatarUrl: commenter.avatarUrl,
+			signedIn: true
+		}), h("span", { class: "spacer" }), h("button", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => this.signOutCommenter()
+		}, this.t("signOut"))) : h("div", { class: "cmp-head cmp-head-guest" }, avatar, needsName ? nameInput : h("span", { class: "author" }, this.name), h("span", { class: "spacer" }), needsName ? null : h("button", {
 			class: "cmp-link",
 			type: "button",
 			onclick: () => {
@@ -8818,7 +9046,12 @@ var NuniWidget = class {
 			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", {
+		}, icon(ICONS.pen)) : null, fileInput, counter, h("span", { class: "spacer" }), post), commenter ? null : h("button", {
+			class: "cmp-link cmp-sign-in",
+			type: "button",
+			title: this.t("signInGithub"),
+			onclick: () => this.openCommenterSignIn()
+		}, icon(ICONS.github), this.t("signIn")), h("button", {
 			class: "icon-btn cmp-close",
 			type: "button",
 			"aria-label": this.t("cancel"),
@@ -8889,7 +9122,7 @@ var NuniWidget = class {
 			].filter((badge) => badge !== null);
 			const contextPending = owner && !(this.ownerDetailLoaded && this.ownerDetailId === comment._id);
 			const resolved = comment.status === "resolved";
-			body = h("div", { class: "card-body msg" }, h("div", { class: "card-head" }, avatar(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" }), owner ? h("button", {
+			body = h("div", { class: "card-body msg" }, h("div", { class: "card-head" }, ...this.authorLine(comment), h("span", { class: "meta" }, this.i18n.timeAgo(comment.createdAt) + (comment.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), owner ? h("button", {
 				class: `icon-btn${resolved ? " is-resolved" : ""}`,
 				type: "button",
 				"aria-label": this.t(resolved ? "reopen" : "resolve"),
@@ -8982,7 +9215,7 @@ var NuniWidget = class {
 		const open = card.picker === targetId;
 		if (!withAdd && !summaries.length && !open) return null;
 		return h("div", { class: "reactions" }, ...summaries.map((r) => {
-			const mine = r.authorKeyHashes.includes(this.secretHash);
+			const mine = r.authorKeyHashes.includes(this.authorKey);
 			return h("button", {
 				class: "reaction",
 				type: "button",
@@ -9055,7 +9288,7 @@ var NuniWidget = class {
 			return h("div", {
 				class: "reply msg",
 				"data-reply": reply._id
-			}, h("div", { class: "card-head" }, avatar(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" }), h("span", { class: "msg-tools" }, this.reactionAdd(reply._id, "icon-btn"), mine ? h("button", {
+			}, h("div", { class: "card-head" }, ...this.authorLine(reply), 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" }), h("span", { class: "msg-tools" }, this.reactionAdd(reply._id, "icon-btn"), mine ? h("button", {
 				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("editReply"),
@@ -9074,7 +9307,7 @@ var NuniWidget = class {
 				onclick: () => void this.deleteReply(comment, reply)
 			}, icon(ICONS.trash)) : null)), h("div", { class: "msg-main" }, h("div", { class: "comment-body" }, reply.body), this.renderReactions(comment, reply._id, false)));
 		});
-		const needsName = !owner && !this.name;
+		const needsName = !owner && !this.displayName;
 		const nameInput = h("input", {
 			class: "reply-name",
 			placeholder: this.t("yourName"),
@@ -9167,7 +9400,7 @@ var NuniWidget = class {
 	}
 	focusComposer() {
 		requestAnimationFrame(() => {
-			this.uiLayer.querySelector(this.name ? "[data-focus-key=\"body\"]" : "[data-focus-key=\"name\"]")?.focus();
+			this.uiLayer.querySelector(this.displayName ? "[data-focus-key=\"body\"]" : "[data-focus-key=\"name\"]")?.focus();
 		});
 	}
 };
@@ -9269,7 +9502,7 @@ function unmount(state) {
 * down the widget it was created for.
 */
 function init(options) {
-	return mount(options, { loadScreenshot: () => import("./screenshot-tools-Dk-xNV0c.js").then((m) => m.screenshotTools) });
+	return mount(options, { loadScreenshot: () => import("./screenshot-tools-BFj-93o4.js").then((m) => m.screenshotTools) });
 }
 //#endregion
 export { VERSION, init, EN as messages };