@nuniapp/widget 0.1.6 → 0.1.7

package/dist/index.js

@@ -165,7 +165,7 @@ function buildCommentPrompt(comment, options = {}) {
 }
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.6";
+const VERSION = "0.1.7";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -5567,14 +5567,15 @@ const EN = {
 	yourName: "Your name",
 	leaveComment: "Leave a comment",
 	notYou: "Not you?",
-	screenshotAlt: "Screenshot that will be attached",
-	screenshotNote: "Screenshot attached. Only the site owner sees it.",
-	remove: "Remove",
 	cancel: "Cancel",
 	post: "Post",
 	posting: "Posting…",
 	save: "Save",
 	send: "{key} + Enter",
+	charsLeft: {
+		one: "{count} character left",
+		other: "{count} characters left"
+	},
 	pinLabel: "Comment by {name}: {body}",
 	commentBy: "Comment by {name}",
 	openScreenshot: "Open the screenshot",
@@ -5687,6 +5688,8 @@ const ICONS = {
 	send: s("<path d=\"m22 2-7 20-4-9-9-4z\"/><path d=\"M22 2 11 13\"/>"),
 	bot: s("<path d=\"M12 8V4H8\"/><rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/><path d=\"M2 14h2M20 14h2M15 13v2M9 13v2\"/>"),
 	smile: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01\"/>"),
+	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\"/>"),
 	target: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
 	github: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5z"/></svg>`,
 	link: s("<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>")
@@ -6226,59 +6229,34 @@ button { cursor: pointer; }
 /* Cards (composer + thread) */
 .card {
   position: fixed;
-  width: 320px;
+  width: 340px;
   max-width: calc(100vw - 24px);
   background: var(--n-bg);
   color: var(--n-fg);
   border: 1px solid var(--n-border);
-  border-radius: var(--n-radius);
+  border-radius: 14px;
   box-shadow: var(--n-shadow);
   pointer-events: auto;
   overflow: hidden;
 }
-.card-body { padding: 12px; display: grid; gap: 10px; }
+.card-body { padding: 12px 14px; display: grid; gap: 10px; }
 .card[data-card="thread"] { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
-.thread { border-top: 1px solid var(--n-border); display: grid; min-height: 0; }
-.replies { display: grid; gap: 12px; padding: 12px; overflow-y: auto; max-height: 45vh; }
-.reply { display: grid; gap: 6px; }
-.avatar-sm { width: 20px; height: 20px; font-size: 9px; }
-.badge-owner { background: var(--n-accent-soft); color: var(--n-accent); }
-.reply-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 12px; flex-wrap: wrap; }
-.reply-form .field { flex: 1 1 100%; }
-/* A fixed size: growing on focus would move the Send button mid-click. */
-.reply-form .field-reply { flex: 1 1 0; min-height: 56px; height: 56px; resize: none; }
-.reactions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; }
-.reaction {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 24px;
-  padding: 0 8px;
-  border: 1px solid var(--n-border);
-  border-radius: 999px;
-  background: var(--n-bg);
+.card .quote {
+  margin: 0;
+  padding: 6px 10px;
+  border-left: 0;
+  border-radius: 8px;
+  background: var(--n-accent-soft);
   color: var(--n-fg);
-  font-size: 12px;
-}
-.reaction:hover { background: var(--n-bg-subtle); }
-.reaction[aria-pressed="true"] { border-color: var(--n-accent); background: var(--n-accent-soft); }
-.reaction-add { color: var(--n-fg-muted); padding: 0 6px; }
-.reaction-picker {
-  display: flex;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid var(--n-border);
-  border-radius: 999px;
-  background: var(--n-bg);
-  box-shadow: var(--n-shadow);
+  font-style: normal;
+  font-size: 13px;
+  box-shadow: inset 2px 0 0 var(--n-accent);
 }
-.reaction-picker .reaction { border-color: transparent; font-size: 14px; }
-.btn-xs { width: 24px; height: 24px; }
-.card-head { display: flex; align-items: center; gap: 8px; }
+.card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .card-head .spacer { flex: 1; }
 .avatar {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   border-radius: 999px;
   color: #fff;
   font-size: 10px;
@@ -6288,8 +6266,8 @@ button { cursor: pointer; }
   justify-content: center;
   flex: none;
 }
-.author { font-weight: 600; }
-.meta { color: var(--n-fg-muted); font-size: 12px; }
+.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 {
   display: inline-flex;
   align-items: center;
@@ -6304,28 +6282,147 @@ button { cursor: pointer; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.badge .icon { width: 12px; height: 12px; }
 .badge-ok { background: rgba(31,157,85,0.14); color: var(--n-ok); }
-.comment-body { white-space: pre-wrap; word-break: break-word; }
+.badge-owner { background: var(--n-accent-soft); color: var(--n-accent); }
+.comment-body { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
 .shot {
   display: block;
   border: 1px solid var(--n-border);
-  border-radius: 8px;
+  border-radius: 10px;
   overflow: hidden;
   background: var(--n-bg-subtle);
 }
 .shot img { display: block; width: 100%; max-height: 160px; object-fit: cover; object-position: top; }
-.shot-preview { display: grid; gap: 4px; }
-.shot-preview img {
-  display: block;
-  width: 100%;
-  max-height: 200px;
-  /* The whole image, so the commenter sees everything that is attached. */
-  object-fit: contain;
-  border: 1px solid var(--n-border);
+.icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
   border-radius: 8px;
-  background: var(--n-bg-subtle);
+  background: none;
+  color: var(--n-fg-muted);
+  flex: none;
+  transition: background 120ms ease, color 120ms ease;
 }
-.shot-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-fg-muted); }
+.icon-btn:hover { background: var(--n-bg-subtle); color: var(--n-fg); }
+.icon-btn:disabled { opacity: 0.4; cursor: default; background: none; }
+.icon-btn-danger:hover { background: color-mix(in srgb, var(--n-danger) 12%, transparent); color: var(--n-danger); }
+.icon-btn.is-resolved, .icon-btn.is-resolved:hover { background: rgba(31,157,85,0.14); color: var(--n-ok); }
+
+/* A message (the comment or a reply): text lines up with the name. */
+.msg { gap: 2px; padding: 12px 8px 8px 14px; }
+.msg-main { display: grid; gap: 8px; padding: 0 6px 0 34px; min-width: 0; }
+.msg .card-head { min-height: 28px; }
+.badges { display: flex; flex-wrap: wrap; gap: 4px; }
+.msg-foot { display: flex; align-items: center; gap: 2px; margin-right: -6px; }
+.msg-foot .spacer { flex: 1; }
+/* A reply's tools float over its header on hover, so names never truncate. */
+.msg-tools:empty { display: none; }
+.msg-tools {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--n-border);
+  border-radius: 10px;
+  background: var(--n-bg);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+.reply:hover .msg-tools, .reply:focus-within .msg-tools { opacity: 1; pointer-events: auto; }
+@media (hover: none) {
+  .msg-tools { position: static; opacity: 1; pointer-events: auto; padding: 0; border: 0; box-shadow: none; background: none; }
+}
+
+/* Replies */
+.thread { border-top: 1px solid var(--n-border); display: grid; min-height: 0; }
+.replies { display: grid; padding: 4px 0; overflow-y: auto; max-height: 45vh; }
+.reply.msg { position: relative; display: grid; padding: 8px 8px 8px 14px; }
+.reply-form {
+  display: grid;
+  margin: 4px 12px 12px;
+  border: 1px solid var(--n-border);
+  border-radius: 12px;
+  background: var(--n-bg);
+  transition: box-shadow 140ms ease, border-color 140ms ease;
+}
+.reply-form:focus-within {
+  border-color: color-mix(in srgb, var(--n-accent) 45%, var(--n-border));
+  box-shadow: 0 0 0 3px var(--n-accent-soft);
+}
+.reply-name {
+  padding: 8px 12px 6px;
+  border: 0;
+  border-bottom: 1px solid var(--n-border);
+  background: none;
+  outline: none;
+  font-weight: 600;
+}
+.reply-row { display: flex; align-items: flex-end; gap: 4px; padding: 4px; }
+.reply-text {
+  flex: 1;
+  min-width: 0;
+  min-height: 32px;
+  max-height: 160px;
+  padding: 6px 8px;
+  border: 0;
+  background: none;
+  outline: none;
+  resize: none;
+  line-height: 1.4;
+}
+.reply-name::placeholder, .reply-text::placeholder { color: var(--n-fg-muted); opacity: 1; font-weight: 400; }
+.reply-send {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--n-accent);
+  color: var(--n-accent-fg);
+  flex: none;
+}
+.reply-send:hover { filter: brightness(1.08); }
+.reply-send:disabled { opacity: 0.4; cursor: default; filter: none; }
+
+/* Reactions */
+.reactions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; }
+.reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--n-border);
+  border-radius: 999px;
+  background: var(--n-bg);
+  color: var(--n-fg);
+  font-size: 12px;
+}
+.reaction:hover { background: var(--n-bg-subtle); }
+.reaction[aria-pressed="true"] { border-color: color-mix(in srgb, var(--n-accent) 50%, transparent); background: var(--n-accent-soft); }
+.reaction-add { color: var(--n-fg-muted); padding: 0 6px; border-color: transparent; }
+.reaction-add:hover, .reaction-add[aria-expanded="true"] { color: var(--n-fg); }
+.reaction-picker {
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--n-border);
+  border-radius: 999px;
+  background: var(--n-bg);
+  box-shadow: var(--n-shadow);
+}
+.reaction-picker .reaction { border-color: transparent; font-size: 14px; }
+
+/* Shared controls */
 .field {
   width: 100%;
   padding: 8px 10px;
@@ -6357,11 +6454,90 @@ 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); }
-.kbd { color: var(--n-fg-muted); font-size: 11px; }
 .error { color: var(--n-danger); font-size: 12px; }
 .divider { height: 1px; background: var(--n-border); }
-.actions { display: flex; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--n-border); background: var(--n-bg-subtle); }
-.actions .spacer { flex: 1; }
+
+/* Composer: one surface, the card itself is the input. */
+.composer {
+  display: grid;
+  transition: box-shadow 140ms ease, border-color 140ms ease;
+}
+.composer:focus-within {
+  border-color: color-mix(in srgb, var(--n-accent) 45%, var(--n-border));
+  box-shadow: 0 0 0 4px var(--n-accent-soft), var(--n-shadow);
+}
+.composer.sheet:focus-within { border-color: var(--n-border); box-shadow: var(--n-shadow); }
+.composer .spacer { flex: 1; }
+.cmp-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 44px 4px 14px; }
+.avatar-empty { background: var(--n-bg-subtle); color: var(--n-fg-muted); }
+.avatar-empty .icon { width: 14px; height: 14px; }
+.cmp-name {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  outline: none;
+  font-weight: 600;
+}
+.cmp-link {
+  border: 0;
+  background: none;
+  padding: 2px 4px;
+  border-radius: 6px;
+  color: var(--n-fg-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.cmp-link:hover { color: var(--n-fg); }
+.composer .quote { margin: 6px 14px 0; }
+.cmp-text {
+  display: block;
+  width: 100%;
+  min-height: 76px;
+  max-height: 240px;
+  padding: 8px 14px;
+  border: 0;
+  background: none;
+  outline: none;
+  resize: none;
+  line-height: 1.5;
+}
+.cmp-name::placeholder, .cmp-text::placeholder { color: var(--n-fg-muted); opacity: 1; }
+.cmp-name::placeholder { font-weight: 500; }
+.cmp-error { padding: 0 14px 4px; }
+.cmp-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 14px; }
+.cmp-keys { display: inline-flex; gap: 3px; }
+.cmp-keys kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 4px;
+  border: 1px solid var(--n-border);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  color: var(--n-fg-muted);
+  font: 500 11px/1 var(--n-font);
+}
+.cmp-count { color: var(--n-fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.cmp-post {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px 0 14px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--n-accent);
+  color: var(--n-accent-fg);
+  font-weight: 600;
+  font-size: 13px;
+}
+.cmp-post:hover { filter: brightness(1.08); }
+.cmp-post:disabled { opacity: 0.4; cursor: default; filter: none; }
+.cmp-close { position: absolute; top: 13px; right: 8px; }
+@media (hover: none) { .cmp-keys { display: none; } }
 
 /* Panel */
 .panel {
@@ -6509,13 +6685,11 @@ function isTypingTarget(target) {
 	const el = target;
 	return el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
 }
-function dataUrl(blob) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onload = () => resolve(String(reader.result));
-		reader.onerror = () => reject(reader.error);
-		reader.readAsDataURL(blob);
-	});
+function avatar(name) {
+	return h("span", {
+		class: "avatar",
+		style: `background:${colorFor(name)}`
+	}, initials(name));
 }
 function describeElement(el) {
 	const tag = el.tagName.toLowerCase();
@@ -6599,6 +6773,7 @@ var NuniWidget = class {
 		_defineProperty(this, "layoutFrame", 0);
 		_defineProperty(this, "pinPositions", /* @__PURE__ */ new Map());
 		_defineProperty(this, "resolveTimer", 0);
+		_defineProperty(this, "shownPlacements", "");
 		_defineProperty(this, "i18n", void 0);
 		_defineProperty(this, "isIgnored", (el) => el === this.host || this.host.contains(el));
 		_defineProperty(this, "onFrameKey", (e) => this.onKeyDown(e));
@@ -6960,10 +7135,18 @@ var NuniWidget = class {
 			this.renderPins();
 			this.layout();
 			if (queue.length) whenIdle(slice);
-			else if ((onlyStale || run > 1) && this.panelOpen) this.render();
+			else if ((onlyStale || run > 1) && this.panelOpen && this.placementSummary() !== this.shownPlacements) this.render();
 		};
 		slice();
 	}
+	/** What the panel and cards show from the placements: found, approximate or lost. */
+	placementSummary() {
+		return this.comments.map((c) => {
+			const placement = this.placements.get(c._id);
+			if (!placement?.element) return "-";
+			return placement.confidence === "low" ? "~" : "+";
+		}).join("");
+	}
 	/**
 	* Pins inside shadow roots and iframes: the page's observers don't see
 	* changes or scrolling in there, so watch each of those scopes too.
@@ -7245,12 +7428,12 @@ var NuniWidget = class {
 		this.activeId = null;
 		this.render();
 		this.focusComposer();
-		this.takeScreenshot(draft);
+		draft.screenshot = this.takeScreenshot(draft);
 	}
 	/** Capture while the person types, so posting stays instant. */
 	async takeScreenshot(draft) {
 		const load = this.runtime.loadScreenshot;
-		if (!load || draft.element.ownerDocument !== document) return;
+		if (!load || draft.element.ownerDocument !== document) return null;
 		const accent = getComputedStyle(this.host).getPropertyValue("--n-accent").trim() || "#d6246e";
 		try {
 			await new Promise((resolve) => setTimeout(resolve, 60));
@@ -7265,23 +7448,14 @@ var NuniWidget = class {
 					bottom: box.top + box.height
 				};
 			} : void 0;
-			const blob = capture ? await capture(element, {
+			return capture ? await capture(element, {
 				exclude: this.host,
 				accent,
 				focus
 			}) : null;
-			if (!blob || !this.isComposing(draft) || draft.sending) return;
-			const preview = await dataUrl(blob);
-			if (!this.isComposing(draft) || draft.sending) return;
-			draft.screenshot = {
-				blob,
-				preview
-			};
-			this.render();
-		} catch {}
-	}
-	isComposing(draft) {
-		return this.card?.kind === "composer" && this.card.draft === draft;
+		} catch {
+			return null;
+		}
 	}
 	collectContext(draft) {
 		const { collectors } = this.runtime;
@@ -7293,9 +7467,10 @@ var NuniWidget = class {
 		if (draft.dom) context.dom = draft.dom;
 		return Object.keys(context).length ? context : void 0;
 	}
-	async attachScreenshot(id, image) {
+	async attachScreenshot(id, shot) {
 		try {
-			await this.api.uploadScreenshot(id, this.secret, image);
+			const image = await shot;
+			if (image) await this.api.uploadScreenshot(id, this.secret, image);
 		} catch {}
 	}
 	copyForAgent(comment) {
@@ -7595,7 +7770,7 @@ var NuniWidget = class {
 				},
 				context: this.collectContext(draft)
 			});
-			if (shot) this.attachScreenshot(id, shot.blob);
+			if (shot) this.attachScreenshot(id, shot);
 			this.placements.set(id, {
 				element: draft.element,
 				confidence: "exact",
@@ -7766,7 +7941,7 @@ var NuniWidget = class {
 			kind: "thread",
 			id
 		};
-		this.focusNext = "[data-card=\"thread\"] .card-head button";
+		this.focusNext = "[data-card=\"thread\"] .card-close";
 	}
 	render() {
 		this.syncOwnerDetail();
@@ -7829,6 +8004,7 @@ var NuniWidget = class {
 		}
 	}
 	renderUi() {
+		this.shownPlacements = this.placementSummary();
 		const nodes = [this.renderToolbar()];
 		if (this.panelOpen) nodes.push(this.renderPanel());
 		const card = this.renderCard();
@@ -7973,80 +8149,112 @@ var NuniWidget = class {
 			onclick: () => this.openClaim()
 		}, icon(ICONS.github), this.t("claim"))));
 	}
+	renderComposer(draft, cls) {
+		const needsName = !this.name;
+		const avatar = h("span", {
+			class: "avatar cmp-avatar",
+			"aria-hidden": "true"
+		});
+		const paintAvatar = (name) => {
+			const clean = name.trim();
+			avatar.classList.toggle("avatar-empty", !clean);
+			if (clean) {
+				avatar.textContent = initials(clean);
+				avatar.style.background = colorFor(clean);
+			} else {
+				avatar.replaceChildren(icon(ICONS.user));
+				avatar.style.background = "";
+			}
+		};
+		const nameInput = h("input", {
+			class: "cmp-name",
+			placeholder: this.t("yourName"),
+			value: this.name,
+			maxlength: LIMITS.nameMaxLength,
+			autocomplete: "name",
+			"data-focus-key": "name",
+			"aria-label": this.t("yourName")
+		});
+		const textarea = h("textarea", {
+			class: "cmp-text",
+			placeholder: this.t("leaveComment"),
+			maxlength: LIMITS.bodyMaxLength,
+			rows: 3,
+			"data-focus-key": "body",
+			"aria-label": this.t("comment")
+		});
+		const prev = this.uiLayer.querySelector("[data-focus-key=\"body\"]");
+		if (prev) textarea.value = prev.value;
+		const prevName = this.uiLayer.querySelector("[data-focus-key=\"name\"]");
+		if (prevName) nameInput.value = prevName.value;
+		paintAvatar(needsName ? nameInput.value : this.name);
+		nameInput.addEventListener("input", () => paintAvatar(nameInput.value));
+		const counter = h("span", {
+			class: "cmp-count",
+			"aria-live": "polite"
+		});
+		const post = h("button", {
+			class: "cmp-post",
+			type: "submit",
+			disabled: Boolean(draft.sending) || !textarea.value.trim()
+		}, draft.sending ? this.t("posting") : this.t("post"), icon(ICONS.arrowUp));
+		const update = () => {
+			post.disabled = Boolean(draft.sending) || !textarea.value.trim();
+			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`;
+		};
+		textarea.addEventListener("input", () => {
+			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) => {
+			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				submit();
+			}
+		});
+		return h("form", {
+			class: `${cls} composer`,
+			"data-card": "composer",
+			onsubmit: (e) => {
+				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", {
+			class: "cmp-link",
+			type: "button",
+			onclick: () => {
+				this.name = "";
+				this.render();
+				this.focusComposer();
+			}
+		}, this.t("notYou"))), draft.anchor.quote ? h("blockquote", { class: "quote" }, draft.anchor.quote.exact) : null, textarea, 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", {
+			class: "icon-btn cmp-close",
+			type: "button",
+			"aria-label": this.t("cancel"),
+			title: this.t("cancel"),
+			onclick: () => this.closeCard()
+		}, icon(ICONS.close)));
+	}
 	renderCard() {
 		const card = this.card;
 		if (!card) return null;
 		const cls = `card${window.matchMedia(MOBILE_QUERY).matches ? " sheet" : ""}`;
-		if (card.kind === "composer") {
-			const { draft } = card;
-			const needsName = !this.name;
-			const nameInput = h("input", {
-				class: "field",
-				placeholder: this.t("yourName"),
-				value: this.name,
-				maxlength: LIMITS.nameMaxLength,
-				autocomplete: "name",
-				"data-focus-key": "name",
-				"aria-label": this.t("yourName")
-			});
-			const textarea = h("textarea", {
-				class: "field",
-				placeholder: this.t("leaveComment"),
-				maxlength: LIMITS.bodyMaxLength,
-				"data-focus-key": "body",
-				"aria-label": this.t("comment")
-			});
-			const prev = this.uiLayer.querySelector("[data-focus-key=\"body\"]");
-			if (prev) textarea.value = prev.value;
-			const prevName = this.uiLayer.querySelector("[data-focus-key=\"name\"]");
-			if (prevName) nameInput.value = prevName.value;
-			const submit = () => void this.submitDraft(draft, textarea.value, needsName ? nameInput.value : this.name);
-			textarea.addEventListener("keydown", (e) => {
-				if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-					e.preventDefault();
-					submit();
-				}
-			});
-			return h("form", {
-				class: cls,
-				"data-card": "composer",
-				onsubmit: (e) => {
-					e.preventDefault();
-					submit();
-				}
-			}, h("div", { class: "card-body" }, needsName ? nameInput : h("div", { class: "row" }, h("span", {
-				class: "avatar",
-				style: `background:${colorFor(this.name)}`
-			}, initials(this.name)), h("span", { class: "author" }, this.name), h("span", { class: "spacer" }), h("button", {
-				class: "link",
-				type: "button",
-				onclick: () => {
-					this.name = "";
-					this.render();
-				}
-			}, this.t("notYou"))), draft.anchor.quote ? h("blockquote", { class: "quote" }, draft.anchor.quote.exact) : null, textarea, draft.screenshot ? h("div", { class: "shot-preview" }, h("img", {
-				src: draft.screenshot.preview,
-				alt: this.t("screenshotAlt")
-			}), h("div", { class: "shot-note" }, h("span", {}, this.t("screenshotNote")), h("span", { class: "spacer" }), h("button", {
-				class: "link",
-				type: "button",
-				onclick: () => {
-					draft.screenshot = void 0;
-					this.render();
-				}
-			}, this.t("remove")))) : null, draft.error ? h("div", {
-				class: "error",
-				role: "alert"
-			}, draft.error) : null, h("div", { class: "row" }, h("span", { class: "kbd" }, this.t("send", { key: this.i18n.mod })), h("span", { class: "spacer" }), h("button", {
-				class: "btn btn-ghost",
-				type: "button",
-				onclick: () => this.closeCard()
-			}, this.t("cancel")), h("button", {
-				class: "btn btn-primary",
-				type: "submit",
-				disabled: Boolean(draft.sending)
-			}, icon(ICONS.send), draft.sending ? this.t("posting") : this.t("post")))));
-		}
+		if (card.kind === "composer") return this.renderComposer(card.draft, cls);
 		const comment = this.comments.find((c) => c._id === card.id);
 		if (!comment) return null;
 		const mine = this.isMine(comment);
@@ -8074,61 +8282,55 @@ var NuniWidget = class {
 				disabled: Boolean(card.busy),
 				onclick: () => this.saveEdit(comment, textarea.value)
 			}, this.t("save"))));
-		} else body = h("div", { class: "card-body" }, h("div", { class: "card-head" }, h("span", {
-			class: "avatar",
-			style: `background:${colorFor(comment.authorName)}`
-		}, initials(comment.authorName)), h("span", { class: "author" }, comment.authorName), h("span", { class: "meta" }, this.i18n.timeAgo(comment.createdAt) + (comment.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), h("button", {
-			class: "btn btn-ghost btn-icon",
-			type: "button",
-			"aria-label": this.t("close"),
-			onclick: () => this.closeCard()
-		}, icon(ICONS.close))), comment.anchor.quote ? h("blockquote", { class: "quote" }, comment.anchor.quote.exact) : null, h("div", { class: "comment-body" }, comment.body), this.ownerDetail?._id === comment._id && this.ownerDetail.screenshotUrl ? h("a", {
-			class: "shot",
-			href: this.ownerDetail.screenshotUrl,
-			target: "_blank",
-			rel: "noreferrer",
-			title: this.t("openScreenshot")
-		}, h("img", {
-			src: this.ownerDetail.screenshotUrl,
-			alt: this.t("screenshotTaken")
-		})) : null, h("div", { class: "row" }, comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), this.t("resolved")) : null, comment.page.origin !== location.origin ? h("span", {
-			class: "badge",
-			title: this.t("leftOn", { origin: comment.page.origin })
-		}, new URL(comment.page.origin).host) : null, placement?.confidence === "low" ? h("span", {
-			class: "badge",
-			title: this.t("approximateHint")
-		}, this.t("approximate")) : null, !placement?.element ? h("span", {
-			class: "badge",
-			title: this.t("originallyOn", { text: comment.anchor.text || comment.anchor.tag })
-		}, this.t("notFound")) : null), this.renderReactions(comment, comment._id), card.error ? h("div", {
-			class: "error",
-			role: "alert"
-		}, card.error) : null);
-		const actions = [];
-		if (!card.editing) {
-			if (owner) actions.push(comment.status === "open" ? h("button", {
-				class: "btn",
+		} else {
+			const badges = [
+				comment.status === "resolved" ? h("span", { class: "badge badge-ok" }, icon(ICONS.check), this.t("resolved")) : null,
+				comment.page.origin !== location.origin ? h("span", {
+					class: "badge",
+					title: this.t("leftOn", { origin: comment.page.origin })
+				}, new URL(comment.page.origin).host) : null,
+				placement?.confidence === "low" ? h("span", {
+					class: "badge",
+					title: this.t("approximateHint")
+				}, this.t("approximate")) : null,
+				!placement?.element ? h("span", {
+					class: "badge",
+					title: this.t("originallyOn", { text: comment.anchor.text || comment.anchor.tag })
+				}, this.t("notFound")) : null
+			].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", {
+				class: `icon-btn${resolved ? " is-resolved" : ""}`,
 				type: "button",
+				"aria-label": this.t(resolved ? "reopen" : "resolve"),
+				title: this.t(resolved ? "reopen" : "resolve"),
 				disabled: Boolean(card.busy),
-				onclick: () => this.resolveComment(comment)
-			}, icon(ICONS.check), this.t("resolve")) : h("button", {
-				class: "btn",
+				onclick: () => resolved ? this.reopenComment(comment) : this.resolveComment(comment)
+			}, icon(ICONS.check)) : null, h("button", {
+				class: "icon-btn card-close",
 				type: "button",
-				disabled: Boolean(card.busy),
-				onclick: () => this.reopenComment(comment)
-			}, icon(ICONS.undo), this.t("reopen")));
-			actions.push(h("span", { class: "spacer" }));
-			const contextPending = owner && !(this.ownerDetailLoaded && this.ownerDetailId === comment._id);
-			actions.push(h("button", {
-				class: "btn btn-ghost btn-icon",
+				"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", {
+				class: "shot",
+				href: this.ownerDetail.screenshotUrl,
+				target: "_blank",
+				rel: "noreferrer",
+				title: this.t("openScreenshot")
+			}, h("img", {
+				src: this.ownerDetail.screenshotUrl,
+				alt: this.t("screenshotTaken")
+			})) : null, badges.length ? h("div", { class: "badges" }, ...badges) : 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)));
-			if (mine) actions.push(h("button", {
-				class: "btn btn-ghost btn-icon",
+			}, icon(ICONS.bot)), mine ? h("button", {
+				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("edit"),
 				title: this.t("edit"),
@@ -8136,30 +8338,36 @@ var NuniWidget = class {
 					card.editing = true;
 					this.render();
 				}
-			}, icon(ICONS.edit)));
-			if (mine || owner) actions.push(h("button", {
-				class: "btn btn-ghost btn-icon btn-danger",
+			}, icon(ICONS.edit)) : null, mine || owner ? h("button", {
+				class: "icon-btn icon-btn-danger",
 				type: "button",
 				"aria-label": this.t("delete"),
 				title: this.t("delete"),
 				"data-focus-key": "delete",
 				disabled: Boolean(card.busy),
 				onclick: () => void this.deleteComment(comment)
-			}, icon(ICONS.trash)));
+			}, icon(ICONS.trash)) : null), card.error ? h("div", {
+				class: "error",
+				role: "alert"
+			}, card.error) : null));
 		}
 		return h("div", {
 			class: cls,
 			"data-card": "thread",
 			role: "dialog",
 			"aria-label": this.t("commentBy", { name: comment.authorName })
-		}, body, actions.length ? h("div", { class: "actions" }, ...actions) : null, card.editing ? null : this.renderThread(comment));
+		}, body, card.editing ? null : this.renderThread(comment));
 	}
-	/** Emoji chips for one message, plus a picker to add one. */
-	renderReactions(comment, targetId) {
+	/**
+	* Emoji chips for one message and the picker to add one. Replies keep
+	* their add button with their other tools, so `withAdd` is off for them.
+	*/
+	renderReactions(comment, targetId, withAdd = true) {
 		const card = this.card;
 		if (card?.kind !== "thread") return null;
 		const summaries = this.threadId === comment._id && this.thread ? this.thread.reactions.filter((r) => r.targetId === targetId) : [];
 		const open = card.picker === targetId;
+		if (!withAdd && !summaries.length && !open) return null;
 		return h("div", { class: "reactions" }, ...summaries.map((r) => {
 			const mine = r.authorKeyHashes.includes(this.secretHash);
 			return h("button", {
@@ -8169,17 +8377,7 @@ var NuniWidget = class {
 				"aria-label": `${r.emoji} ${r.count}${mine ? ", including you" : ""}`,
 				onclick: () => this.toggleReaction(comment, targetId, r.emoji)
 			}, `${r.emoji} ${r.count}`);
-		}), h("button", {
-			class: "reaction reaction-add",
-			type: "button",
-			"aria-label": this.t("addReaction"),
-			"aria-expanded": String(open),
-			title: this.t("addReaction"),
-			onclick: () => {
-				card.picker = open ? null : targetId;
-				this.render();
-			}
-		}, icon(ICONS.smile)), open ? h("div", {
+		}), withAdd ? this.reactionAdd(targetId, "reaction reaction-add") : null, open ? h("div", {
 			class: "reaction-picker",
 			role: "group",
 			"aria-label": this.t("reactions")
@@ -8194,6 +8392,22 @@ var NuniWidget = class {
 			}
 		}, emoji))) : null);
 	}
+	reactionAdd(targetId, cls) {
+		const card = this.card;
+		if (card?.kind !== "thread") return null;
+		const open = card.picker === targetId;
+		return h("button", {
+			class: cls,
+			type: "button",
+			"aria-label": this.t("addReaction"),
+			"aria-expanded": String(open),
+			title: this.t("addReaction"),
+			onclick: () => {
+				card.picker = open ? null : targetId;
+				this.render();
+			}
+		}, icon(ICONS.smile));
+	}
 	/** The replies under a comment and the box to add one. */
 	renderThread(comment) {
 		const card = this.card;
@@ -8226,13 +8440,10 @@ var NuniWidget = class {
 				}, this.t("save"))));
 			}
 			return h("div", {
-				class: "reply",
+				class: "reply msg",
 				"data-reply": reply._id
-			}, h("div", { class: "card-head" }, h("span", {
-				class: "avatar avatar-sm",
-				style: `background:${colorFor(reply.authorName)}`
-			}, initials(reply.authorName)), h("span", { class: "author" }, reply.authorName), reply.isOwner ? h("span", { class: "badge badge-owner" }, this.t("owner")) : null, h("span", { class: "meta" }, this.i18n.timeAgo(reply.createdAt) + (reply.editedAt ? ` · ${this.t("edited")}` : "")), h("span", { class: "spacer" }), mine ? h("button", {
-				class: "btn btn-ghost btn-icon btn-xs",
+			}, 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", {
+				class: "icon-btn",
 				type: "button",
 				"aria-label": this.t("editReply"),
 				title: this.t("edit"),
@@ -8241,18 +8452,18 @@ var NuniWidget = class {
 					this.render();
 				}
 			}, icon(ICONS.edit)) : null, mine || owner ? h("button", {
-				class: "btn btn-ghost btn-icon btn-xs btn-danger",
+				class: "icon-btn icon-btn-danger",
 				type: "button",
 				"aria-label": this.t("deleteReply"),
 				title: this.t("delete"),
 				"data-focus-key": `delete-${reply._id}`,
 				disabled: Boolean(card.busy),
 				onclick: () => void this.deleteReply(comment, reply)
-			}, icon(ICONS.trash)) : null), h("div", { class: "comment-body" }, reply.body), this.renderReactions(comment, reply._id));
+			}, 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 nameInput = h("input", {
-			class: "field",
+			class: "reply-name",
 			placeholder: this.t("yourName"),
 			value: this.name,
 			maxlength: LIMITS.nameMaxLength,
@@ -8263,14 +8474,31 @@ var NuniWidget = class {
 		const prevName = this.uiLayer.querySelector("[data-focus-key=\"reply-name\"]");
 		if (prevName) nameInput.value = prevName.value;
 		const box = h("textarea", {
-			class: "field field-reply",
+			class: "reply-text",
 			placeholder: replies.length ? this.t("reply") : this.t("replyFirst"),
 			maxlength: LIMITS.bodyMaxLength,
+			rows: 1,
 			"data-focus-key": "reply",
 			"aria-label": this.t("reply")
 		});
 		const prev = this.uiLayer.querySelector("[data-focus-key=\"reply\"]");
 		if (prev) box.value = prev.value;
+		const sendButton = h("button", {
+			class: "reply-send",
+			type: "submit",
+			"aria-label": this.t("sendReply"),
+			title: this.t("sendReply"),
+			disabled: Boolean(card.sendingReply) || !box.value.trim()
+		}, icon(ICONS.arrowUp));
+		const grow = () => {
+			sendButton.disabled = Boolean(card.sendingReply) || !box.value.trim();
+			box.style.height = "auto";
+			box.style.height = `${box.scrollHeight}px`;
+		};
+		box.addEventListener("input", grow);
+		requestAnimationFrame(() => {
+			if (box.isConnected) grow();
+		});
 		const send = () => void this.sendReply(comment, box.value, needsName ? nameInput.value : this.name);
 		box.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -8291,13 +8519,7 @@ var NuniWidget = class {
 				e.preventDefault();
 				send();
 			}
-		}, needsName ? nameInput : null, box, h("button", {
-			class: "btn btn-primary btn-icon",
-			type: "submit",
-			"aria-label": this.t("sendReply"),
-			title: this.t("sendReply"),
-			disabled: Boolean(card.sendingReply)
-		}, icon(ICONS.send))));
+		}, needsName ? nameInput : null, h("div", { class: "reply-row" }, box, sendButton)));
 	}
 	positionCard() {
 		const el = this.uiLayer.querySelector("[data-card]");