@nuniapp/widget 0.1.6 → 0.1.8

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.8";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -191,8 +191,10 @@ function resolveConfig(options) {
 }
 const POSITIONS = [
 	"bottom-right",
+	"bottom-center",
 	"bottom-left",
 	"top-right",
+	"top-center",
 	"top-left"
 ];
 const THEMES = [
@@ -5555,6 +5557,8 @@ const EN = {
 	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: {
@@ -5567,14 +5571,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 +5692,9 @@ 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\"/>"),
+	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\"/>"),
 	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\"/>")
@@ -5942,7 +5950,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
@@ -6019,7 +6031,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;
@@ -6176,7 +6199,6 @@ button { cursor: pointer; }
   gap: 12px;
 }
 .confirm p { margin: 0; }
-.btn-danger-solid { background: var(--n-danger); color: #fff; border-color: transparent; }
 
 /* Pins */
 .pin {
@@ -6226,59 +6248,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 +6285,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 +6301,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;
+}
+.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;
 }
-.shot-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-fg-muted); }
+.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 +6473,94 @@ 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; }
+/* 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); }
-.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 {
@@ -6383,7 +6582,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;
@@ -6406,6 +6605,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); }
@@ -6449,8 +6653,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; }
@@ -6509,13 +6715,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();
@@ -6564,6 +6768,8 @@ var NuniWidget = class {
 		_defineProperty(this, "picking", false);
 		_defineProperty(this, "panelOpen", false);
 		_defineProperty(this, "tab", "open");
+		_defineProperty(this, "search", "");
+		_defineProperty(this, "lastViewedId", void 0);
 		_defineProperty(this, "card", null);
 		_defineProperty(this, "activeId", null);
 		_defineProperty(this, "hoverEl", null);
@@ -6599,7 +6805,12 @@ 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, "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) => {
@@ -6679,6 +6890,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", "");
@@ -6709,6 +6922,11 @@ var NuniWidget = class {
 		});
 		this.root.append(style, this.markLayer, this.pinLayer, this.overlayLayer, this.uiLayer, this.selectButton, this.live);
 		this.uiLayer.addEventListener("keydown", (e) => this.trapFocus(e));
+		this.root.addEventListener("click", (e) => {
+			if (!this.toolbarDropped) return;
+			e.preventDefault();
+			e.stopPropagation();
+		}, true);
 		this.api = new NuniApi(config);
 	}
 	t(key, vars) {
@@ -6721,8 +6939,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;
@@ -6769,6 +6987,7 @@ var NuniWidget = class {
 			if (e.composedPath().includes(this.host)) return;
 			this.pointerDown = true;
 			this.scheduleSelection();
+			this.closeCardFromOutside(e);
 		};
 		const onUp = () => {
 			this.pointerDown = false;
@@ -6816,6 +7035,7 @@ var NuniWidget = class {
 	}
 	destroy() {
 		this.setPicking(false);
+		this.endToolbarDrag?.();
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
 		this.ownerDetailUnsub?.();
@@ -6960,10 +7180,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 +7473,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 +7493,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 +7512,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) {
@@ -7340,7 +7560,10 @@ var NuniWidget = class {
 			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;
@@ -7595,7 +7818,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",
@@ -7747,10 +7970,22 @@ var NuniWidget = class {
 			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 (onScrollbar(e)) return;
+		if ([...this.uiLayer.querySelector("[data-card]")?.querySelectorAll("textarea") ?? []].some((t) => t.value.trim())) return;
+		if (!this.panelOpen) this.returnFocus = null;
+		this.closeCard();
+	}
 	closeCard() {
 		const had = this.card !== null;
 		this.card = null;
@@ -7762,11 +7997,13 @@ 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
 		};
-		this.focusNext = "[data-card=\"thread\"] .card-head button";
+		this.focusNext = "[data-card=\"thread\"] .card-close";
 	}
 	render() {
 		this.syncOwnerDetail();
@@ -7829,6 +8066,7 @@ var NuniWidget = class {
 		}
 	}
 	renderUi() {
+		this.shownPlacements = this.placementSummary();
 		const nodes = [this.renderToolbar()];
 		if (this.panelOpen) nodes.push(this.renderPanel());
 		const card = this.renderCard();
@@ -7859,10 +8097,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",
@@ -7881,16 +8123,94 @@ 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 list = (this.tab === "open" ? open : resolved).filter((c) => matches(c.body, c.authorName, c.anchor.quote?.exact));
 		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 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", {
@@ -7902,6 +8222,7 @@ var NuniWidget = class {
 		}, new URL(c.page.origin).host) : null), c.anchor.quote ? h("div", { class: "item-quote" }, c.anchor.quote.exact) : null, h("div", { class: "item-text" }, c.body));
 		const children = [];
 		if (!this.loaded) children.push(h("div", { class: "empty" }, 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));
@@ -7929,7 +8250,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 ? 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"),
@@ -7973,80 +8306,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 +8439,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 +8495,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 +8534,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 +8549,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 +8597,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 +8609,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 +8631,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 +8676,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]");
@@ -8321,8 +8700,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));
@@ -8336,6 +8715,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. */