@nuniapp/widget 0.1.7 → 0.1.9

package/dist/dom-BWcT-q7S.js

@@ -0,0 +1,255 @@
+//#region ../shared/src/id.ts
+const ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+const PROJECT_ID_PATTERN = new RegExp(`^nuni_[${ALPHABET}]{22}$`);
+/** Random base58 string using the platform CSPRNG (browser, Node, Convex). */
+function randomBase58(length) {
+	const bytes = new Uint8Array(length);
+	crypto.getRandomValues(bytes);
+	let out = "";
+	for (const byte of bytes) {
+		let b = byte;
+		while (b >= 232) {
+			const retry = /* @__PURE__ */ new Uint8Array(1);
+			crypto.getRandomValues(retry);
+			b = retry[0];
+		}
+		out += ALPHABET[b % 58];
+	}
+	return out;
+}
+function isProjectId(value) {
+	return typeof value === "string" && PROJECT_ID_PATTERN.test(value);
+}
+/** Secret used by anonymous commenters to edit/delete their own comments. */
+function generateSecret() {
+	return randomBase58(32);
+}
+//#endregion
+//#region ../shared/src/limits.ts
+const LIMITS = {
+	bodyMaxLength: 2e3,
+	nameMaxLength: 50,
+	unclaimedCommentCap: 500,
+	maxOriginsPerProject: 20,
+	sessionTtlMs: 2592e6,
+	/** CLI and MCP sessions, created by `nuni login`. */
+	cliSessionTtlMs: 7776e6,
+	/** How long a project transfer link works. */
+	transferTtlMs: 6048e5,
+	/** Comments changed at once from the dashboard. */
+	bulkMax: 100,
+	/** Pins found or lost in one report from a visitor's widget. */
+	pinReportMax: 200,
+	/** The dashboard's "Not found" count stops here ("99+"). */
+	lostCountMax: 99,
+	/** How long a `nuni login` code waits for approval in the dashboard. */
+	cliLoginTtlMs: 6e5,
+	anchorTextMaxLength: 120,
+	/** Selected text kept with a text comment, and the context around it. */
+	quoteMaxLength: 500,
+	quoteContextLength: 32,
+	/** Per page, the widget loads this many newest open and resolved comments. */
+	pageOpenLimit: 1e3,
+	pageResolvedLimit: 200,
+	/** The newest of a commenter's own comments, across pages. */
+	yoursLimit: 100,
+	/** Most console or network entries kept with one comment. */
+	contextEntryMax: 20,
+	contextMessageMaxLength: 500,
+	/** Trimmed outerHTML of the commented element. */
+	domSnippetMaxLength: 4e3,
+	screenshotMaxBytes: 6e5,
+	/** Images a commenter attaches to one comment (their own or marked up). */
+	imagesPerComment: 3,
+	imageMaxBytes: 6e5,
+	/** Longest side of an attached image, in pixels. */
+	imageMaxSide: 1600,
+	/** Replies kept per comment thread. */
+	repliesPerComment: 200,
+	/** Reactions kept per thread (the comment and its replies). */
+	reactionsPerComment: 2e3,
+	/** How long after posting the author can still attach the screenshot. */
+	screenshotUploadWindowMs: 3e5
+};
+/** The reactions anyone can add to a comment or reply. */
+const REACTIONS = [
+	"👍",
+	"❤️",
+	"🎉",
+	"👀",
+	"✅",
+	"😄"
+];
+//#endregion
+//#region ../shared/src/privacy.ts
+/**
+* Site owners mark private areas with this attribute. Their text never
+* reaches Nuni: not in the pin anchor (which is public), the markup snippet
+* or the screenshot.
+*/
+const MASK_ATTRIBUTE = "data-nuni-mask";
+const MASK_SELECTOR = `[${MASK_ATTRIBUTE}]`;
+//#endregion
+//#region src/mark.ts
+/**
+* Marks Nuni's own screenshot requests (fonts and images it inlines), so the
+* network collector can skip them without muting the page. `Symbol.for` is
+* shared by the widget and the separately loaded screenshot script.
+*/
+const CAPTURE_MARK = Symbol.for("nuni.capture");
+//#endregion
+//#region src/image.ts
+/** The image types the backend accepts. */
+const IMAGE_TYPES = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+];
+function toBlob(canvas, type, quality) {
+	return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+/**
+* WebP, or JPEG where the browser can't encode WebP, at the best quality
+* that fits `maxBytes`. Null when even the smallest doesn't fit.
+*/
+async function encodeCanvas(canvas, maxBytes) {
+	for (const [type, quality] of [
+		["image/webp", .82],
+		["image/jpeg", .8],
+		["image/jpeg", .55]
+	]) {
+		const blob = await toBlob(canvas, type, quality);
+		if (blob && blob.type === type && blob.size <= maxBytes) return blob;
+	}
+	return null;
+}
+/**
+* An image someone picked or pasted, scaled down to the size limit and
+* re-encoded, which also drops its metadata (location, camera). Null when
+* it isn't a readable image.
+*/
+async function imageFromFile(file) {
+	if (!IMAGE_TYPES.includes(file.type)) return null;
+	let bitmap;
+	try {
+		bitmap = await createImageBitmap(file);
+	} catch {
+		return null;
+	}
+	const scale = Math.min(1, LIMITS.imageMaxSide / Math.max(bitmap.width, bitmap.height));
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+	canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+	try {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return null;
+		ctx.fillStyle = "#fff";
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+	} finally {
+		bitmap.close();
+	}
+	return encodeCanvas(canvas, LIMITS.imageMaxBytes);
+}
+//#endregion
+//#region src/dom.ts
+/** Tiny element factory. Strings become text nodes (never HTML). */
+function h(tag, attrs = {}, ...children) {
+	const el = document.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) {
+		if (value == null || value === false) continue;
+		if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2).toLowerCase(), value);
+		else if (key === "class") el.className = String(value);
+		else if (value === true) el.setAttribute(key, "");
+		else el.setAttribute(key, String(value));
+	}
+	for (const child of children.flat()) {
+		if (child == null || child === false) continue;
+		el.append(typeof child === "string" ? document.createTextNode(child) : child);
+	}
+	return el;
+}
+/** Renders one of the constant SVG strings in icons.ts (never user input). */
+function icon(svg) {
+	const span = document.createElement("span");
+	span.className = "icon";
+	span.setAttribute("aria-hidden", "true");
+	const parsed = new DOMParser().parseFromString(svg, "image/svg+xml");
+	span.append(document.importNode(parsed.documentElement, true));
+	return span;
+}
+function initials(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	return (parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : (parts[0] ?? "?").slice(0, 2)).toUpperCase();
+}
+/** Stable pleasant color per author name. */
+function colorFor(name) {
+	let hash = 0;
+	for (const ch of name) hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+	return `oklch(0.5 0.17 ${hash % 360})`;
+}
+/** Copy text, falling back to execCommand where the async clipboard is off (plain http previews). */
+async function copyText(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	const area = document.createElement("textarea");
+	area.value = text;
+	area.setAttribute("readonly", "");
+	area.style.cssText = "position:fixed;top:0;left:0;opacity:0";
+	document.body.appendChild(area);
+	area.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		area.remove();
+	}
+}
+/** Any CSS color as RGB, using the browser's own parser. */
+function parseColor(color) {
+	const probe = document.createElement("span");
+	probe.style.color = color;
+	if (!probe.style.color) return null;
+	probe.style.display = "none";
+	document.documentElement.appendChild(probe);
+	const computed = getComputedStyle(probe).color;
+	probe.remove();
+	if (/^rgba?\(/.test(computed)) {
+		const parts = computed.match(/[\d.]+/g)?.map(Number);
+		if (parts && parts.length >= 3) return [
+			parts[0],
+			parts[1],
+			parts[2]
+		];
+	}
+	try {
+		const canvas = document.createElement("canvas");
+		canvas.width = canvas.height = 1;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return null;
+		ctx.fillStyle = color;
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+		return [
+			r,
+			g,
+			b
+		];
+	} catch {
+		return null;
+	}
+}
+/** Black or white text, whichever reads better on the color (WCAG). */
+function readableOn([r, g, b]) {
+	const channel = (c) => {
+		const v = c / 255;
+		return v <= .03928 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	};
+	const l = .2126 * channel(r) + .7152 * channel(g) + .0722 * channel(b);
+	return 1.05 / (l + .05) >= (l + .05) / .05 ? "#ffffff" : "#111111";
+}
+//#endregion
+export { isProjectId as _, initials as a, IMAGE_TYPES as c, CAPTURE_MARK as d, MASK_ATTRIBUTE as f, generateSecret as g, REACTIONS as h, icon as i, encodeCanvas as l, LIMITS as m, copyText as n, parseColor as o, MASK_SELECTOR as p, h as r, readableOn as s, colorFor as t, imageFromFile as u };

package/dist/index.d.ts

@@ -25,11 +25,18 @@ declare const EN: {
   close: string;
   tabOpen: string;
   tabResolved: string;
+  tabYours: string;
+  yours: string;
+  noYours: string;
+  thisPage: string;
+  statusOpen: string;
   loading: string;
   noOpen: string;
   noOpenKey: string;
   noResolved: string;
   notFoundHere: string;
+  searchComments: string;
+  noMatches: string;
   otherPages: string;
   openOnPage: string;
   replyCount: {
@@ -51,6 +58,25 @@ declare const EN: {
     one: string;
     other: string;
   };
+  suggestEdit: string;
+  suggestedEdit: string;
+  removeSuggestion: string;
+  newText: string;
+  addNote: string;
+  addImage: string;
+  markUpScreenshot: string;
+  preparingScreenshot: string;
+  markUpTitle: string;
+  markUpBox: string;
+  markUpArrow: string;
+  markUpPen: string;
+  markUpUndo: string;
+  markUpDone: string;
+  markUpFailed: string;
+  imagesPublic: string;
+  imageN: string;
+  removeImage: string;
+  openImage: string;
   pinLabel: string;
   commentBy: string;
   openScreenshot: string;
@@ -64,6 +90,15 @@ declare const EN: {
   resolve: string;
   reopen: string;
   copyForAgent: string;
+  copyNewText: string;
+  movePin: string;
+  movePinHint: string;
+  pinMoved: string;
+  closeOutdated: string;
+  closedOutdated: string;
+  outdated: string;
+  lostHint: string;
+  newTextCopied: string;
   copyForAgentHint: string;
   loadingContext: string;
   edit: string;
@@ -90,6 +125,12 @@ declare const EN: {
   linkGone: string;
   enterName: string;
   writeFirst: string;
+  changeTextFirst: string;
+  tooManyImages: string;
+  imageUnreadable: string;
+  imageFailed: string;
+  noScreenshot: string;
+  suggestionTooLong: string;
   commentTooLong: string;
   replyTooLong: string;
   postFailed: string;
@@ -105,7 +146,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 +166,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;
@@ -141,6 +185,11 @@ interface NuniOptions {
   locale?: string;
   /** Replace any of the widget's words. See the `EN` messages. */
   messages?: Partial<Messages>;
+  /**
+   * Let commenters attach images and mark up the screenshot. They are shown
+   * to everyone who can see the comment. Default true; claimed sites only.
+   */
+  images?: boolean;
   /**
    * Extra context attached to each comment for the project owner and their
    * coding agent. Everything is on by default; set a key to `false` to stop
@@ -177,12 +226,6 @@ interface ScreenshotOptions {
   focus?: () => Box;
 }
 type CaptureScreenshot = (el: Element, options: ScreenshotOptions) => Promise<Blob | null>;
-declare global {
-  interface Window {
-    /** Set by nuni-screenshot.global.js (the CDN build). */
-    __nuniScreenshot?: CaptureScreenshot;
-  }
-}
 interface Box {
   left: number;
   top: number;
@@ -190,6 +233,49 @@ interface Box {
   bottom: number;
 }
 //#endregion
+//#region src/markup.d.ts
+/**
+ * A small editor to draw boxes, arrows and freehand lines on a screenshot
+ * before it is attached. Loaded with the screenshot code, on demand.
+ */
+interface MarkUpLabels {
+  title: string;
+  box: string;
+  arrow: string;
+  pen: string;
+  undo: string;
+  cancel: string;
+  done: string;
+  /** Shown when the drawing can't be saved as an image. */
+  failed: string;
+}
+interface MarkUpOptions {
+  /** Where the editor opens: inside the widget's shadow root. */
+  container: HTMLElement;
+  labels: MarkUpLabels;
+  color: string;
+}
+/** Resolves with the marked-up image, or null when cancelled. */
+type MarkUp = (image: Blob, options: MarkUpOptions) => Promise<Blob | null>;
+//#endregion
+//#region src/tools.d.ts
+/**
+ * The code loaded on demand once someone comments (a separate chunk for npm
+ * users, a separate script for the CDN build): taking the screenshot and
+ * marking it up.
+ */
+declare const screenshotTools: {
+  capture: CaptureScreenshot;
+  markUp: MarkUp;
+};
+type ScreenshotTools = typeof screenshotTools;
+declare global {
+  interface Window {
+    /** Set by nuni-screenshot.global.js (the CDN build). */
+    __nuniScreenshot?: ScreenshotTools;
+  }
+}
+//#endregion
 //#region src/mount.d.ts
 interface NuniInstance {
   destroy(): void;