@nuniapp/widget 0.1.7 → 0.1.8

package/dist/index.d.ts

@@ -30,6 +30,8 @@ declare const EN: {
   noOpenKey: string;
   noResolved: string;
   notFoundHere: string;
+  searchComments: string;
+  noMatches: string;
   otherPages: string;
   openOnPage: string;
   replyCount: {
@@ -105,7 +107,7 @@ type MessageKey = keyof typeof EN;
 type Messages = { [K in MessageKey]: string | Plural; };
 //#endregion
 //#region src/config.d.ts
-type Position = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type Position = "bottom-right" | "bottom-center" | "bottom-left" | "top-right" | "top-center" | "top-left";
 type Theme = "auto" | "light" | "dark";
 /** Built-in page keys, for when `getPageKey` is not set. */
 type PageKey = "path" | "path+search" | "path+hash";
@@ -125,7 +127,10 @@ interface NuniOptions {
    * the path (default), the path and query string, or the path and hash.
    */
   pageKey?: PageKey;
-  /** Corner for the toolbar. Default "bottom-right". */
+  /**
+   * Where the toolbar starts. Default "bottom-right". Visitors can drag it to
+   * another corner or edge middle, and their choice is remembered.
+   */
   position?: Position;
   /** Brand color for buttons, pins and highlights (any CSS color). */
   accentColor?: string;

package/dist/index.js

@@ -165,7 +165,7 @@ function buildCommentPrompt(comment, options = {}) {
 }
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.7";
+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: {
@@ -5690,6 +5694,7 @@ const ICONS = {
 	smile: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01\"/>"),
 	user: s("<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/>"),
 	arrowUp: s("<path d=\"M12 19V5M5 12l7-7 7 7\"/>"),
+	search: s("<circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.3-4.3\"/>"),
 	target: s("<circle cx=\"12\" cy=\"12\" r=\"9\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
 	github: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.9 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5z"/></svg>`,
 	link: s("<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>")
@@ -5945,7 +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
@@ -6022,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;
@@ -6179,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 {
@@ -6454,6 +6473,10 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
 .btn-ghost { border-color: transparent; background: transparent; }
 .btn-icon { width: 32px; padding: 0; justify-content: center; }
 .btn-danger { color: var(--n-danger); }
+/* After .btn, which would otherwise paint over the red with the card's background. */
+.btn-danger-solid,
+.btn-danger-solid:hover { background: var(--n-danger); border-color: var(--n-danger); color: #fff; }
+.btn-danger-solid:hover { filter: brightness(1.08); }
 .error { color: var(--n-danger); font-size: 12px; }
 .divider { height: 1px; background: var(--n-border); }
 
@@ -6559,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;
@@ -6582,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); }
@@ -6625,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; }
@@ -6738,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);
@@ -6775,6 +6807,10 @@ var NuniWidget = class {
 		_defineProperty(this, "resolveTimer", 0);
 		_defineProperty(this, "shownPlacements", "");
 		_defineProperty(this, "i18n", void 0);
+		_defineProperty(this, "position", void 0);
+		_defineProperty(this, "toolbarDrag", null);
+		_defineProperty(this, "endToolbarDrag", null);
+		_defineProperty(this, "toolbarDropped", false);
 		_defineProperty(this, "isIgnored", (el) => el === this.host || this.host.contains(el));
 		_defineProperty(this, "onFrameKey", (e) => this.onKeyDown(e));
 		_defineProperty(this, "swallow", (e) => {
@@ -6854,6 +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", "");
@@ -6884,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) {
@@ -6896,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;
@@ -6944,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;
@@ -6991,6 +7035,7 @@ var NuniWidget = class {
 	}
 	destroy() {
 		this.setPicking(false);
+		this.endToolbarDrag?.();
 		this.pageUnsub?.();
 		this.sessionUnsub?.();
 		this.ownerDetailUnsub?.();
@@ -7515,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;
@@ -7922,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;
@@ -7937,6 +7997,8 @@ var NuniWidget = class {
 	openThread(id) {
 		this.keepFocus();
 		this.activeId = id;
+		this.lastViewedId = id;
+		write(KEYS.lastViewed(this.config.project), id);
 		this.card = {
 			kind: "thread",
 			id
@@ -8035,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",
@@ -8057,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", {
@@ -8078,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));
@@ -8105,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"),
@@ -8543,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));
@@ -8558,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. */