@nuniapp/widget 0.1.8 → 0.1.9

package/dist/{screenshot-DcJ_SzKF.js → tools-gIAPu66h.js}

@@ -1,4 +1,215 @@
-import { i as LIMITS, n as MASK_ATTRIBUTE, t as CAPTURE_MARK } from "./mark-B8wojiFu.js";
+import { d as CAPTURE_MARK, f as MASK_ATTRIBUTE, l as encodeCanvas, m as LIMITS, r as h } from "./dom-BWcT-q7S.js";
+//#region src/markup.ts
+const STYLES = `
+.mk {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  background: rgb(0 0 0 / 0.55);
+  pointer-events: auto;
+  z-index: 10;
+}
+.mk-box {
+  display: grid;
+  gap: 10px;
+  max-width: 100%;
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--n-bg);
+  color: var(--n-fg);
+  box-shadow: var(--n-shadow);
+}
+.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.mk-bar .spacer { flex: 1; }
+.mk-error { margin: 0; color: var(--n-danger); font-size: 13px; }
+.mk-error:empty { display: none; }
+.mk-bar [aria-pressed="true"] { background: var(--n-accent-soft); border-color: var(--n-accent); }
+.mk-canvas {
+  display: block;
+  max-width: min(960px, calc(100vw - 52px));
+  max-height: calc(100vh - 120px);
+  border-radius: 8px;
+  cursor: crosshair;
+  touch-action: none;
+}
+`;
+function lineWidth(canvas) {
+	return Math.max(3, Math.round(Math.max(canvas.width, canvas.height) / 250));
+}
+function drawShape(ctx, shape, width) {
+	const [a, b] = shape.points;
+	if (!a) return;
+	ctx.beginPath();
+	if (shape.tool === "pen") {
+		ctx.moveTo(a.x, a.y);
+		for (const p of shape.points.slice(1)) ctx.lineTo(p.x, p.y);
+	} else if (b && shape.tool === "box") ctx.rect(a.x, a.y, b.x - a.x, b.y - a.y);
+	else if (b) {
+		const angle = Math.atan2(b.y - a.y, b.x - a.x);
+		const head = width * 4;
+		ctx.moveTo(a.x, a.y);
+		ctx.lineTo(b.x, b.y);
+		for (const side of [-1, 1]) {
+			ctx.moveTo(b.x, b.y);
+			ctx.lineTo(b.x - head * Math.cos(angle + side * Math.PI / 7), b.y - head * Math.sin(angle + side * Math.PI / 7));
+		}
+	}
+	ctx.stroke();
+}
+/** Big enough to be meant, not a stray click. */
+function isDrawn(shape) {
+	const [a, b] = shape.points;
+	if (!a || !b) return false;
+	if (shape.tool === "pen") return shape.points.length > 2;
+	return Math.hypot(b.x - a.x, b.y - a.y) > 6;
+}
+const markUp = async (image, { container, labels, color }) => {
+	let bitmap;
+	try {
+		bitmap = await createImageBitmap(image);
+	} catch {
+		return null;
+	}
+	const root = container.getRootNode();
+	if (!root.querySelector("style[data-nuni-markup]")) {
+		const style = h("style", { "data-nuni-markup": "" }, STYLES);
+		(root instanceof Document ? root.head : root).append(style);
+	}
+	const canvas = h("canvas", {
+		class: "mk-canvas",
+		width: bitmap.width,
+		height: bitmap.height,
+		role: "img",
+		"aria-label": labels.title
+	});
+	const ctx = canvas.getContext("2d");
+	if (!ctx) {
+		bitmap.close();
+		return null;
+	}
+	const width = lineWidth(canvas);
+	const shapes = [];
+	let current = null;
+	let tool = "box";
+	const draw = () => {
+		ctx.drawImage(bitmap, 0, 0);
+		ctx.strokeStyle = color;
+		ctx.lineWidth = width;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		for (const shape of current ? [...shapes, current] : shapes) drawShape(ctx, shape, width);
+		undo.disabled = shapes.length === 0;
+	};
+	const point = (e) => {
+		const rect = canvas.getBoundingClientRect();
+		return {
+			x: (e.clientX - rect.left) / rect.width * canvas.width,
+			y: (e.clientY - rect.top) / rect.height * canvas.height
+		};
+	};
+	canvas.addEventListener("pointerdown", (e) => {
+		if (!e.isPrimary) return;
+		e.preventDefault();
+		canvas.setPointerCapture(e.pointerId);
+		const p = point(e);
+		current = {
+			tool,
+			points: tool === "pen" ? [p] : [p, p]
+		};
+		draw();
+	});
+	canvas.addEventListener("pointermove", (e) => {
+		if (!current) return;
+		const p = point(e);
+		if (current.tool === "pen") current.points.push(p);
+		else current.points[1] = p;
+		draw();
+	});
+	const finish = () => {
+		if (current && isDrawn(current)) shapes.push(current);
+		current = null;
+		draw();
+	};
+	canvas.addEventListener("pointerup", finish);
+	canvas.addEventListener("pointercancel", finish);
+	const toolButtons = [
+		"box",
+		"arrow",
+		"pen"
+	].map((name) => h("button", {
+		class: "btn",
+		type: "button",
+		"aria-pressed": String(name === tool),
+		onclick: () => {
+			tool = name;
+			for (const b of toolButtons) b.setAttribute("aria-pressed", String(b.dataset.tool === tool));
+		},
+		"data-tool": name
+	}, labels[name]));
+	const undo = h("button", {
+		class: "btn btn-ghost",
+		type: "button",
+		onclick: () => {
+			shapes.pop();
+			draw();
+		}
+	}, labels.undo);
+	const previous = root.activeElement;
+	return new Promise((resolve) => {
+		let closing = false;
+		const close = async (save) => {
+			if (closing) return;
+			closing = true;
+			const result = save ? await encodeCanvas(canvas, LIMITS.imageMaxBytes) : null;
+			if (save && !result) {
+				closing = false;
+				error.textContent = labels.failed;
+				return;
+			}
+			overlay.remove();
+			bitmap.close();
+			previous?.focus();
+			resolve(result);
+		};
+		const error = h("p", {
+			class: "mk-error",
+			role: "alert"
+		});
+		const done = h("button", {
+			class: "btn btn-primary",
+			type: "button",
+			onclick: () => void close(true)
+		}, labels.done);
+		const overlay = h("div", {
+			class: "mk",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": labels.title,
+			onkeydown: (e) => {
+				const key = e;
+				if (key.key === "Escape") close(false);
+				else if (key.key === "z" && (key.metaKey || key.ctrlKey)) {
+					shapes.pop();
+					draw();
+				} else return;
+				key.preventDefault();
+			}
+		}, h("div", { class: "mk-box" }, h("div", {
+			class: "mk-bar",
+			role: "toolbar",
+			"aria-label": labels.title
+		}, ...toolButtons, undo, h("span", { class: "spacer" }), h("button", {
+			class: "btn btn-ghost",
+			type: "button",
+			onclick: () => void close(false)
+		}, labels.cancel), done), error, canvas));
+		container.append(overlay);
+		draw();
+		done.focus();
+	});
+};
 "p".charCodeAt(0);
 "H".charCodeAt(0);
 "Y".charCodeAt(0);
@@ -1223,9 +1434,6 @@ function maskedBoxes(frame) {
 	}
 	return out;
 }
-function toBlob(canvas, type, quality) {
-	return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
-}
 const captureScreenshot = async (el, options) => {
 	const frame = frameFor(el);
 	const { box, target, masks, crop } = isolatedLayout(frame, el, options.focus);
@@ -1274,15 +1482,18 @@ const captureScreenshot = async (el, options) => {
 	ctx.strokeStyle = options.accent;
 	ctx.lineWidth = line;
 	if (x1 > x0 && y1 > y0) ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
-	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 <= LIMITS.screenshotMaxBytes) return blob;
-	}
-	return null;
+	return encodeCanvas(canvas, LIMITS.screenshotMaxBytes);
+};
+//#endregion
+//#region src/tools.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.
+*/
+const screenshotTools = {
+	capture: captureScreenshot,
+	markUp
 };
 //#endregion
-export { captureScreenshot };
+export { screenshotTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuniapp/widget",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Pin comments to anything on your site. Talk it through with your team.",
   "license": "MIT",
   "type": "module",

package/dist/mark-B8wojiFu.js

@@ -1,90 +0,0 @@
-//#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,
-	/** 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,
-	/** Most console or network entries kept with one comment. */
-	contextEntryMax: 20,
-	contextMessageMaxLength: 500,
-	/** Trimmed outerHTML of the commented element. */
-	domSnippetMaxLength: 4e3,
-	screenshotMaxBytes: 6e5,
-	/** 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
-export { REACTIONS as a, LIMITS as i, MASK_ATTRIBUTE as n, generateSecret as o, MASK_SELECTOR as r, isProjectId as s, CAPTURE_MARK as t };