@nuniapp/widget 0.1.11 → 0.1.12

package/README.md

@@ -78,6 +78,8 @@ Using React? Use [`@nuniapp/react`](https://www.npmjs.com/package/@nuniapp/react
 
 - Press **C** (or the Comment button), click any element and write your comment. Select text to comment on the words, or drag a box to comment on an area.
 - Everything works from the keyboard: while adding, the arrow keys move between elements and Enter comments.
+- Press **Shift+C** (Shift and the `hotkey`; or the eye button) to hide the pins and see the page clean. Adding a comment or opening one shows them again.
+- The comments list shows this page first, then every other page's comments grouped under its path. Search looks through all of them, and a comment on another page opens there.
 - Pins follow their element through layout changes, responsive breakpoints and content edits. If an element is removed, its comment is listed as "Couldn't find on this page" instead of pinned to the wrong thing.
 - Your name is remembered in this browser. You can edit and delete your own comments.
 - The site owner claims the project from the widget ("Claim Nuni", GitHub sign-in) and can then resolve, reopen and delete comments.

package/dist/{dom-BWcT-q7S.js → dom-YEIbiA4X.js}

@@ -51,6 +51,9 @@ const LIMITS = {
 	/** Per page, the widget loads this many newest open and resolved comments. */
 	pageOpenLimit: 1e3,
 	pageResolvedLimit: 200,
+	/** The widget's panel lists this many newest comments from every page. */
+	siteOpenLimit: 300,
+	siteResolvedLimit: 100,
 	/** The newest of a commenter's own comments, across pages. */
 	yoursLimit: 100,
 	/** Most console or network entries kept with one comment. */

package/dist/index.d.ts

@@ -15,6 +15,8 @@ declare const EN: {
   pickElement: string;
   allComments: string;
   openCount: string;
+  hideComments: string;
+  hideCommentsKey: string;
   commentSelection: string;
   commentSelectionKey: string;
   pickHint: string;
@@ -130,6 +132,9 @@ declare const EN: {
   commenterSignedIn: string;
   signedOut: string;
   linkGone: string;
+  commentsHidden: string;
+  commentsHiddenKey: string;
+  commentsShown: string;
   enterName: string;
   writeFirst: string;
   changeTextFirst: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as isProjectId, a as initials, c as IMAGE_TYPES, d as CAPTURE_MARK, f as MASK_ATTRIBUTE, g as generateSecret, h as REACTIONS, i as icon, m as LIMITS, n as copyText, o as parseColor, p as MASK_SELECTOR, r as h, s as readableOn, t as colorFor, u as imageFromFile } from "./dom-BWcT-q7S.js";
+import { _ as isProjectId, a as initials, c as IMAGE_TYPES, d as CAPTURE_MARK, f as MASK_ATTRIBUTE, g as generateSecret, h as REACTIONS, i as icon, m as LIMITS, n as copyText, o as parseColor, p as MASK_SELECTOR, r as h, s as readableOn, t as colorFor, u as imageFromFile } from "./dom-YEIbiA4X.js";
 //#region ../shared/src/path.ts
 /**
 * Normalize a URL to the key comments are matched by. Query and hash are
@@ -176,7 +176,7 @@ function buildCommentPrompt(comment, options = {}) {
 }
 //#endregion
 //#region src/config.ts
-const VERSION = "0.1.11";
+const VERSION = "0.1.12";
 function resolveConfig(options) {
 	return {
 		project: options.project,
@@ -5291,6 +5291,10 @@ var NuniApi = class {
 			...author
 		}, (comments) => cb(comments), () => {});
 	}
+	/** Comments on every page, newest first, live. */
+	onSite(cb) {
+		return this.client.onUpdate(api.comments.listForSite, { publicId: this.config.project }, (comments) => cb(comments), () => {});
+	}
 	onPages(cb) {
 		return this.client.onUpdate(api.comments.pagesWithComments, { publicId: this.config.project }, cb, () => {});
 	}
@@ -5516,6 +5520,8 @@ const EN = {
 	pickElement: "Pick an element",
 	allComments: "All comments",
 	openCount: "Comments on this page: {count} open",
+	hideComments: "Hide comments",
+	hideCommentsKey: "Hide comments (Shift+{key})",
 	commentSelection: "Comment on the selected text",
 	commentSelectionKey: "Comment on the selected text ({key})",
 	pickHint: "Click anything to comment, or drag to mark an area",
@@ -5631,6 +5637,9 @@ const EN = {
 	commenterSignedIn: "You're signed in",
 	signedOut: "Signed out",
 	linkGone: "That comment was deleted or is on another page",
+	commentsHidden: "Comments hidden",
+	commentsHiddenKey: "Comments hidden. Press Shift+{key} to show them",
+	commentsShown: "Comments shown",
 	enterName: "Enter your name",
 	writeFirst: "Write a comment first",
 	changeTextFirst: "Change the text to suggest an edit",
@@ -5704,6 +5713,8 @@ const s = (d) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" wi
 const ICONS = {
 	comment: s("<path d=\"M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z\"/>"),
 	list: s("<path d=\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"/>"),
+	eye: s("<path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
+	eyeOff: s("<path d=\"M10.7 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20\"/>"),
 	close: s("<path d=\"M18 6 6 18M6 6l12 12\"/>"),
 	check: s("<path d=\"M20 6 9 17l-5-5\"/>"),
 	undo: s("<path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-15-6.7L3 13\"/>"),
@@ -5978,7 +5989,9 @@ const KEYS = {
 	/** Where this visitor dragged the toolbar. */
 	position: (project) => `nuni:position:${project}`,
 	/** The comment this visitor opened last, marked in the panel. */
-	lastViewed: (project) => `nuni:last-viewed:${project}`
+	lastViewed: (project) => `nuni:last-viewed:${project}`,
+	/** This visitor hid the pins (Shift+C). */
+	hidden: (project) => `nuni:hidden:${project}`
 };
 //#endregion
 //#region src/styles.ts
@@ -6094,6 +6107,9 @@ button { cursor: pointer; }
   justify-content: center;
 }
 .tb-btn[aria-pressed="true"] .tb-count { background: rgba(255,255,255,0.25); color: inherit; }
+.tb-icon { width: 36px; padding: 0; justify-content: center; }
+/* Pins hidden: the count stays, dimmed, so the comments aren't lost. */
+.toolbar[data-pins-hidden] .tb-count { opacity: 0.55; }
 
 /* Picking */
 .pick-hint {
@@ -6727,6 +6743,8 @@ textarea.field { resize: vertical; min-height: 72px; max-height: 240px; }
 .panel-search .field { padding-left: 32px; }
 .item-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
 .section-label { padding: 12px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-fg-muted); }
+/* A page's path, as written: paths are case-sensitive. */
+.section-path { text-transform: none; letter-spacing: 0; font-size: 12px; overflow-wrap: anywhere; }
 .empty { padding: 32px 16px; text-align: center; color: var(--n-fg-muted); }
 .panel-foot { padding: 12px; border-top: 1px solid var(--n-border); display: grid; gap: 8px; font-size: 13px; }
 .link { border: 0; background: none; padding: 0; color: var(--n-accent); font-weight: 600; text-decoration: none; }
@@ -6942,10 +6960,13 @@ var NuniWidget = class {
 		_defineProperty(this, "status", null);
 		_defineProperty(this, "pages", []);
 		_defineProperty(this, "picking", false);
+		_defineProperty(this, "pinsHidden", void 0);
 		_defineProperty(this, "panelOpen", false);
 		_defineProperty(this, "tab", "open");
 		_defineProperty(this, "mine", null);
 		_defineProperty(this, "mineUnsub", null);
+		_defineProperty(this, "site", null);
+		_defineProperty(this, "siteUnsub", null);
 		_defineProperty(this, "repinId", null);
 		_defineProperty(this, "pinReported", /* @__PURE__ */ new Map());
 		_defineProperty(this, "pinReportTimer", 0);
@@ -7077,6 +7098,7 @@ var NuniWidget = class {
 		this.ownerToken = read(KEYS.session(config.project));
 		this.commenterToken = read(KEYS.commenter(config.project));
 		this.lastViewedId = read(KEYS.lastViewed(config.project));
+		this.pinsHidden = read(KEYS.hidden(config.project)) === "1";
 		this.position = oneOf(read(KEYS.position(config.project)) ?? void 0, POSITIONS, config.position);
 		this.host = document.createElement("div");
 		this.host.id = "nuni-root";
@@ -7230,6 +7252,7 @@ var NuniWidget = class {
 		this.ownerDetailUnsub?.();
 		this.threadUnsub?.();
 		this.mineUnsub?.();
+		this.siteUnsub?.();
 		clearTimeout(this.pinReportTimer);
 		this.resolveRun++;
 		for (const stop of this.scopeWatchers.values()) stop();
@@ -7378,8 +7401,17 @@ var NuniWidget = class {
 	isMine(comment) {
 		return this.ownsKey(comment.authorKeyHash);
 	}
+	/** The open thread keeps its pin while the rest are hidden. */
 	visibleComments() {
-		return this.comments.filter((c) => c.status === (this.panelOpen && this.tab === "resolved" ? "resolved" : "open") || this.card?.kind === "thread" && this.card.id === c._id);
+		return this.comments.filter((c) => !this.pinsHidden && c.status === (this.panelOpen && this.tab === "resolved" ? "resolved" : "open") || this.card?.kind === "thread" && this.card.id === c._id);
+	}
+	/** Hide or show the pins, like Figma's Shift+C. */
+	setPinsHidden(hidden, quiet = false) {
+		if (this.pinsHidden === hidden) return;
+		this.pinsHidden = hidden;
+		write(KEYS.hidden(this.config.project), hidden ? "1" : null);
+		if (quiet) return;
+		this.showToast(hidden ? this.withKey("commentsHidden", "commentsHiddenKey") : this.t("commentsShown"));
 	}
 	scheduleResolve() {
 		clearTimeout(this.resolveTimer);
@@ -7626,6 +7658,7 @@ var NuniWidget = class {
 		this.dragBox = null;
 		if (on) {
 			this.card = null;
+			this.setPinsHidden(false, true);
 			if (window.matchMedia(MOBILE_QUERY).matches) this.panelOpen = false;
 			this.pickDocs = [document, ...frameDocuments(document)];
 			for (const doc of this.pickDocs) {
@@ -7746,6 +7779,7 @@ var NuniWidget = class {
 			this.movePin(repinId, draft);
 			return;
 		}
+		this.setPinsHidden(false, true);
 		if (this.config.capture.dom) try {
 			draft.dom = domContext(element);
 		} catch {}
@@ -7938,7 +7972,8 @@ var NuniWidget = class {
 		const hotkey = this.config.hotkey;
 		if (hotkey && e.key.toLowerCase() === hotkey) {
 			e.preventDefault();
-			if (!this.picking && this.pageSelection()) this.commentOnSelection();
+			if (e.shiftKey && hotkey !== hotkey.toUpperCase()) this.setPinsHidden(!this.pinsHidden);
+			else if (!this.picking && this.pageSelection()) this.commentOnSelection();
 			else this.setPicking(!this.picking);
 		}
 	}
@@ -8426,6 +8461,10 @@ var NuniWidget = class {
 		if (open === this.panelOpen) return;
 		this.panelOpen = open;
 		if (open) this.syncMine();
+		if (open && !this.siteUnsub) this.siteUnsub = this.api.onSite((site) => {
+			this.site = site;
+			this.render();
+		});
 		if (open) {
 			this.keepFocus();
 			this.focusNext = ".panel [role=\"tab\"][aria-selected=\"true\"]";
@@ -8565,6 +8604,7 @@ var NuniWidget = class {
 			role: "toolbar",
 			"aria-label": this.t("toolbar"),
 			"data-dragging": !!drag,
+			"data-pins-hidden": this.pinsHidden,
 			style: drag && `transform: translate(${drag.dx}px, ${drag.dy}px)`,
 			onpointerdown: (e) => this.startToolbarDrag(e)
 		}, h("button", {
@@ -8583,7 +8623,15 @@ var NuniWidget = class {
 			"aria-label": this.t("openCount", { count: open }),
 			title: this.t("allComments"),
 			onclick: () => this.togglePanel()
-		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))));
+		}, icon(ICONS.list), h("span", { class: "tb-count" }, String(open))), h("button", {
+			class: "tb-btn tb-icon",
+			type: "button",
+			"aria-pressed": String(this.pinsHidden),
+			"data-focus-key": "tb-hide",
+			"aria-label": this.t("hideComments"),
+			title: this.withKey("hideComments", "hideCommentsKey"),
+			onclick: () => this.setPinsHidden(!this.pinsHidden)
+		}, icon(this.pinsHidden ? ICONS.eyeOff : ICONS.eye)));
 	}
 	/**
 	* Drag the toolbar anywhere; on release it glides to the nearest corner or
@@ -8666,10 +8714,18 @@ var NuniWidget = class {
 		const query = this.search.trim().toLocaleLowerCase();
 		const matches = (...texts) => !query || texts.some((t) => t?.toLocaleLowerCase().includes(query));
 		const mine = this.mine ?? [];
-		const list = (this.tab === "open" ? open : this.tab === "resolved" ? resolved : mine).filter((c) => matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, this.tab === "mine" ? c.page.path : void 0));
+		const list = (this.tab === "open" ? open : this.tab === "resolved" ? resolved : mine).filter((c) => matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, c.page.path));
 		const placed = list.filter((c) => this.placements.get(c._id)?.element);
 		const lost = list.filter((c) => !this.placements.get(c._id)?.element);
-		const otherPages = this.pages.filter((p) => p.path !== this.pageKey && matches(p.path));
+		const elsewhere = (this.site ?? []).filter((c) => c.page.path !== this.pageKey);
+		const elsewhereOf = (status) => elsewhere.filter((c) => c.status === status);
+		const groups = /* @__PURE__ */ new Map();
+		for (const c of elsewhereOf(this.tab === "resolved" ? "resolved" : "open")) {
+			if (!matches(c.body, c.authorName, c.anchor.quote?.exact, c.suggestion?.after, c.page.path)) continue;
+			groups.set(c.page.path, [...groups.get(c.page.path) ?? [], c]);
+		}
+		const listed = new Set(elsewhereOf(this.tab === "resolved" ? "resolved" : "open").map((c) => c.page.path));
+		const otherPages = this.pages.filter((p) => p.path !== this.pageKey && !listed.has(p.path) && matches(p.path));
 		const content = (c) => [c.suggestion ? renderSuggestionLine(c.suggestion) : c.anchor.quote ? h("div", { class: "item-quote" }, c.anchor.quote.exact) : null, c.body ? h("div", { class: "item-text" }, c.body) : null];
 		const mineItem = (c) => {
 			const here = c.page.path === this.pageKey;
@@ -8688,12 +8744,14 @@ var NuniWidget = class {
 				href
 			}, h("div", { class: "row" }, h("span", { class: "author" }, here ? this.t("thisPage") : c.page.path), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt)), h("span", { class: "spacer" }), h("span", { class: resolvedBadge ? "badge badge-ok" : "badge" }, resolvedBadge ? icon(ICONS.check) : null, this.t(!resolvedBadge ? "statusOpen" : c.resolution === "outdated" ? "outdated" : "resolved"))), ...content(c));
 		};
-		const item = (c) => h("button", {
+		const item = (c, href) => h(href === void 0 ? "button" : href === null ? "div" : "a", {
 			class: "item",
-			type: "button",
 			"aria-current": c._id === this.lastViewedId ? "true" : null,
 			"data-focus-key": `item-${c._id}`,
-			onclick: () => this.focusComment(c._id)
+			...href === void 0 ? {
+				type: "button",
+				onclick: () => this.focusComment(c._id)
+			} : { href }
 		}, h("div", { class: "row" }, ...this.authorLine(c), h("span", { class: "meta" }, this.i18n.timeAgo(c.createdAt) + (c.replyCount ? ` · ${this.t("replyCount", { count: c.replyCount })}` : "")), c.page.origin !== location.origin ? h("span", {
 			class: "badge",
 			title: c.page.origin
@@ -8704,14 +8762,20 @@ var NuniWidget = class {
 			else if (!list.length) children.push(h("div", { class: "empty" }, query ? this.t("noMatches", { query: this.search.trim() }) : this.t("noYours")));
 			else children.push(...list.map(mineItem));
 		} else if (!this.loaded) children.push(h("div", { class: "empty" }, this.t("loading")));
-		else if (!list.length && query) children.push(h("div", { class: "empty" }, this.t("noMatches", { query: this.search.trim() })));
-		else if (!list.length) children.push(h("div", { class: "empty" }, this.tab === "open" ? this.withKey("noOpen", "noOpenKey") : this.t("noResolved")));
 		else {
-			children.push(...placed.map(item));
-			if (lost.length) {
-				children.push(h("div", { class: "section-label" }, this.t("notFoundHere")));
-				children.push(...lost.map(item));
+			if ((groups.size > 0 || otherPages.length > 0) && (list.length || !query)) children.push(h("div", { class: "section-label" }, this.t("thisPage")));
+			if (list.length) {
+				children.push(...placed.map((c) => item(c)));
+				if (lost.length) {
+					children.push(h("div", { class: "section-label" }, this.t("notFoundHere")));
+					children.push(...lost.map((c) => item(c)));
+				}
+			} else if (!query) children.push(h("div", { class: "empty" }, this.tab === "open" ? this.withKey("noOpen", "noOpenKey") : this.t("noResolved")));
+			for (const [path, comments] of groups) {
+				children.push(h("div", { class: "section-label section-path" }, path));
+				children.push(...comments.map((c) => item(c, commentHref(c, location))));
 			}
+			if (!children.length && !otherPages.length) children.push(h("div", { class: "empty" }, this.t("noMatches", { query: this.search.trim() })));
 		}
 		if (otherPages.length && this.tab !== "mine") {
 			children.push(h("div", { class: "section-label" }, this.t("otherPages")));
@@ -8732,7 +8796,7 @@ var NuniWidget = class {
 			type: "button",
 			"aria-label": this.t("close"),
 			onclick: () => this.togglePanel(false)
-		}, icon(ICONS.close))), this.comments.length || this.mine?.length ? h("div", { class: "panel-search" }, icon(ICONS.search), h("input", {
+		}, icon(ICONS.close))), this.comments.length || this.mine?.length || this.site?.length ? h("div", { class: "panel-search" }, icon(ICONS.search), h("input", {
 			class: "field",
 			type: "search",
 			value: this.search,
@@ -8776,7 +8840,7 @@ var NuniWidget = class {
 				this.tab = tab;
 				this.render();
 			}
-		}, tab === "open" ? this.t("tabOpen", { count: open.length }) : tab === "resolved" ? this.t("tabResolved", { count: resolved.length }) : this.mine ? this.t("tabYours", { count: this.mine.length }) : this.t("yours")))), h("div", {
+		}, tab === "open" ? this.t("tabOpen", { count: open.length + elsewhereOf("open").length }) : tab === "resolved" ? this.t("tabResolved", { count: resolved.length + elsewhereOf("resolved").length }) : this.mine ? this.t("tabYours", { count: this.mine.length }) : this.t("yours")))), h("div", {
 			class: "panel-list",
 			id: "nuni-panel-list",
 			role: "tabpanel",
@@ -9438,7 +9502,7 @@ function unmount(state) {
 * down the widget it was created for.
 */
 function init(options) {
-	return mount(options, { loadScreenshot: () => import("./screenshot-tools-Dk-xNV0c.js").then((m) => m.screenshotTools) });
+	return mount(options, { loadScreenshot: () => import("./screenshot-tools-BFj-93o4.js").then((m) => m.screenshotTools) });
 }
 //#endregion
 export { VERSION, init, EN as messages };

package/dist/nuni-screenshot.global.js

@@ -1,4 +1,4 @@
-(function(){let e={bodyMaxLength:2e3,nameMaxLength:50,unclaimedCommentCap:500,maxOriginsPerProject:20,sessionTtlMs:2592e6,cliSessionTtlMs:7776e6,transferTtlMs:6048e5,bulkMax:100,pinReportMax:200,lostCountMax:99,cliLoginTtlMs:6e5,anchorTextMaxLength:120,quoteMaxLength:500,quoteContextLength:32,pageOpenLimit:1e3,pageResolvedLimit:200,yoursLimit:100,contextEntryMax:20,contextMessageMaxLength:500,domSnippetMaxLength:4e3,screenshotMaxBytes:6e5,imagesPerComment:3,imageMaxBytes:6e5,imageMaxSide:1600,repliesPerComment:200,reactionsPerComment:2e3,screenshotUploadWindowMs:3e5},t=`data-nuni-mask`;function n(e,t={},...n){let r=document.createElement(e);for(let[e,n]of Object.entries(t))n!=null&&n!==!1&&(e.startsWith(`on`)&&typeof n==`function`?r.addEventListener(e.slice(2).toLowerCase(),n):e===`class`?r.className=String(n):n===!0?r.setAttribute(e,``):r.setAttribute(e,String(n)));for(let e of n.flat())e!=null&&e!==!1&&r.append(typeof e==`string`?document.createTextNode(e):e);return r}function r(e,t,n){return new Promise(r=>e.toBlob(r,t,n))}async function i(e,t){for(let[n,i]of[[`image/webp`,.82],[`image/jpeg`,.8],[`image/jpeg`,.55]]){let a=await r(e,n,i);if(a&&a.type===n&&a.size<=t)return a}return null}function a(e){return Math.max(3,Math.round(Math.max(e.width,e.height)/250))}function o(e,t,n){let[r,i]=t.points;if(r){if(e.beginPath(),t.tool===`pen`){e.moveTo(r.x,r.y);for(let n of t.points.slice(1))e.lineTo(n.x,n.y)}else if(i&&t.tool===`box`)e.rect(r.x,r.y,i.x-r.x,i.y-r.y);else if(i){let t=Math.atan2(i.y-r.y,i.x-r.x),a=n*4;e.moveTo(r.x,r.y),e.lineTo(i.x,i.y);for(let n of[-1,1])e.moveTo(i.x,i.y),e.lineTo(i.x-a*Math.cos(t+n*Math.PI/7),i.y-a*Math.sin(t+n*Math.PI/7))}e.stroke()}}function s(e){let[t,n]=e.points;return!t||!n?!1:e.tool===`pen`?e.points.length>2:Math.hypot(n.x-t.x,n.y-t.y)>6}let c=async(t,{container:r,labels:c,color:l})=>{let u;try{u=await createImageBitmap(t)}catch{return null}let d=r.getRootNode();if(!d.querySelector(`style[data-nuni-markup]`)){let e=n(`style`,{"data-nuni-markup":``},`
+(function(){let e={bodyMaxLength:2e3,nameMaxLength:50,unclaimedCommentCap:500,maxOriginsPerProject:20,sessionTtlMs:2592e6,cliSessionTtlMs:7776e6,transferTtlMs:6048e5,bulkMax:100,pinReportMax:200,lostCountMax:99,cliLoginTtlMs:6e5,anchorTextMaxLength:120,quoteMaxLength:500,quoteContextLength:32,pageOpenLimit:1e3,pageResolvedLimit:200,siteOpenLimit:300,siteResolvedLimit:100,yoursLimit:100,contextEntryMax:20,contextMessageMaxLength:500,domSnippetMaxLength:4e3,screenshotMaxBytes:6e5,imagesPerComment:3,imageMaxBytes:6e5,imageMaxSide:1600,repliesPerComment:200,reactionsPerComment:2e3,screenshotUploadWindowMs:3e5},t=`data-nuni-mask`;function n(e,t={},...n){let r=document.createElement(e);for(let[e,n]of Object.entries(t))n!=null&&n!==!1&&(e.startsWith(`on`)&&typeof n==`function`?r.addEventListener(e.slice(2).toLowerCase(),n):e===`class`?r.className=String(n):n===!0?r.setAttribute(e,``):r.setAttribute(e,String(n)));for(let e of n.flat())e!=null&&e!==!1&&r.append(typeof e==`string`?document.createTextNode(e):e);return r}function r(e,t,n){return new Promise(r=>e.toBlob(r,t,n))}async function i(e,t){for(let[n,i]of[[`image/webp`,.82],[`image/jpeg`,.8],[`image/jpeg`,.55]]){let a=await r(e,n,i);if(a&&a.type===n&&a.size<=t)return a}return null}function a(e){return Math.max(3,Math.round(Math.max(e.width,e.height)/250))}function o(e,t,n){let[r,i]=t.points;if(r){if(e.beginPath(),t.tool===`pen`){e.moveTo(r.x,r.y);for(let n of t.points.slice(1))e.lineTo(n.x,n.y)}else if(i&&t.tool===`box`)e.rect(r.x,r.y,i.x-r.x,i.y-r.y);else if(i){let t=Math.atan2(i.y-r.y,i.x-r.x),a=n*4;e.moveTo(r.x,r.y),e.lineTo(i.x,i.y);for(let n of[-1,1])e.moveTo(i.x,i.y),e.lineTo(i.x-a*Math.cos(t+n*Math.PI/7),i.y-a*Math.sin(t+n*Math.PI/7))}e.stroke()}}function s(e){let[t,n]=e.points;return!t||!n?!1:e.tool===`pen`?e.points.length>2:Math.hypot(n.x-t.x,n.y-t.y)>6}let c=async(t,{container:r,labels:c,color:l})=>{let u;try{u=await createImageBitmap(t)}catch{return null}let d=r.getRootNode();if(!d.querySelector(`style[data-nuni-markup]`)){let e=n(`style`,{"data-nuni-markup":``},`
 .mk {
   position: fixed;
   inset: 0;