visual-feedback 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
 
-import { a as FeedbackWidget, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as CaptureOptions, t as FeedbackEvent } from "./widget-Ca1heF8n.mjs";
-import { n as Mark, t as FeedbackReport } from "./report-CIgy7uzP.mjs";
-export { type CaptureOptions, type FeedbackEvent, type FeedbackEvents, type FeedbackOptions, type FeedbackReport, type FeedbackStrings, type FeedbackWidget, type Mark, createFeedback };
+import { a as FeedbackWidget, c as CaptureOptions, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as discardDraft, t as FeedbackEvent } from "./widget-Z1KOUKjx.mjs";
+import { n as Mark, r as Screenshot, t as FeedbackReport } from "./report-CaJegYyg.mjs";
+export { type CaptureOptions, type FeedbackEvent, type FeedbackEvents, type FeedbackOptions, type FeedbackReport, type FeedbackStrings, type FeedbackWidget, type Mark, type Screenshot, createFeedback, discardDraft };

package/dist/index.mjs

@@ -1,2 +1,2 @@
 
-export { t as createFeedback } from "./widget-CVnusNlY.mjs";
+export { t as createFeedback, n as discardDraft } from "./widget-B1JDOVI1.mjs";

package/dist/keep-BG5WxZPU.mjs

@@ -0,0 +1,74 @@
+
+//#region src/keep.ts
+/** A draft older than this is gone: the tab that kept it was most likely closed. */
+const KEPT_FOR = 864e5;
+function database() {
+	return new Promise((resolve, reject) => {
+		const request = indexedDB.open("visual-feedback", 1);
+		request.onupgradeneeded = () => request.result.createObjectStore("drafts");
+		request.onsuccess = () => resolve(request.result);
+		request.onerror = () => reject(request.error);
+	});
+}
+async function run(mode, work) {
+	const db = await database();
+	try {
+		return await new Promise((resolve, reject) => {
+			const transaction = db.transaction("drafts", mode);
+			const request = work(transaction.objectStore("drafts"));
+			transaction.oncomplete = () => resolve(request?.result);
+			transaction.onerror = () => reject(transaction.error);
+			transaction.onabort = () => reject(transaction.error);
+		});
+	} finally {
+		db.close();
+	}
+}
+function sweepIn(store) {
+	const cursors = store.openCursor();
+	cursors.onsuccess = () => {
+		const cursor = cursors.result;
+		if (!cursor) return;
+		if (cursor.value.saved < Date.now() - 864e5) cursor.delete();
+		cursor.continue();
+	};
+}
+function sweep() {
+	return run("readwrite", (store) => {
+		sweepIn(store);
+	});
+}
+/** Stores the draft under `id`, and lets go of old ones. */
+async function keep(id, draft) {
+	const shots = [];
+	for (const { image, ...shot } of draft.shots) shots.push({
+		...shot,
+		image: await image.arrayBuffer(),
+		type: image.type
+	});
+	const stored = {
+		...draft,
+		shots
+	};
+	return run("readwrite", (store) => {
+		store.put(stored, id);
+		sweepIn(store);
+	});
+}
+async function read(id) {
+	const stored = await run("readonly", (store) => store.get(id));
+	if (!stored) return void 0;
+	const shots = stored.shots.map(({ image, type, ...shot }) => ({
+		...shot,
+		image: new Blob([image], { type })
+	}));
+	return {
+		...stored,
+		shots
+	};
+}
+function forget(id) {
+	return run("readwrite", (store) => store.delete(id));
+}
+//#endregion
+export { KEPT_FOR, forget, keep, read, sweep };

package/dist/pdf-Gj-ZO9W5.mjs

@@ -0,0 +1,85 @@
+
+//#region src/pdf.ts
+const WIDTH = 595.28;
+/** A PDF 1.4 of JPEG pages, one per canvas, made in the browser with no library. */
+async function pdf(pages, encode) {
+	const text = new TextEncoder();
+	const parts = [];
+	const offsets = [];
+	let size = 0;
+	const add = (part) => {
+		const bytes = typeof part === "string" ? text.encode(part) : part;
+		parts.push(bytes);
+		size += bytes.length;
+	};
+	const begin = (n, head) => {
+		offsets[n] = size;
+		add(`${n} 0 obj\n${head}\n`);
+	};
+	add("%PDF-1.4\n%âãÏÓ\n");
+	begin(1, "<< /Type /Catalog /Pages 2 0 R >>\nendobj");
+	begin(2, `<< /Type /Pages /Kids [${pages.map((_, i) => `${3 + 3 * i} 0 R`).join(" ")}] /Count ${pages.length} >>\nendobj`);
+	for (const [i, page] of pages.entries()) {
+		const { width, height: tall } = page;
+		const jpeg = new Uint8Array(await (await encode(page, {
+			type: "image/jpeg",
+			quality: .9
+		})).arrayBuffer());
+		const height = (tall * WIDTH / width).toFixed(2);
+		const n = 3 + 3 * i;
+		begin(n, `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${WIDTH} ${height}] /Resources << /XObject << /I ${n + 2} 0 R >> >> /Contents ${n + 1} 0 R >>\nendobj`);
+		const draw = `q ${WIDTH} 0 0 ${height} 0 0 cm /I Do Q`;
+		begin(n + 1, `<< /Length ${draw.length} >>\nstream\n${draw}\nendstream\nendobj`);
+		begin(n + 2, `<< /Type /XObject /Subtype /Image /Width ${width} /Height ${tall} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${jpeg.length} >>\nstream`);
+		add(jpeg);
+		add("\nendstream\nendobj\n");
+	}
+	const xref = size;
+	const count = offsets.length;
+	add(`xref\n0 ${count}\n0000000000 65535 f \n${offsets.slice(1).map((offset) => `${String(offset).padStart(10, "0")} 00000 n \n`).join("")}`);
+	add(`trailer\n<< /Size ${count} /Root 1 0 R >>\nstartxref\n${xref}\n%%EOF\n`);
+	return new Blob(parts, { type: "application/pdf" });
+}
+/** The first page: the category and the note, then the first screenshot under them, if any. */
+function cover(note, category, image, font) {
+	const width = image?.width ?? 1200;
+	const scale = width / 1200;
+	const size = Math.round(22 * scale);
+	const line = Math.round(size * 1.4);
+	const margin = Math.round(40 * scale);
+	const page = document.createElement("canvas");
+	const context = page.getContext("2d");
+	if (!context) throw new Error("no 2d context");
+	const lines = [];
+	const wrap = (paragraph, weight) => {
+		context.font = `${weight} ${size}px ${font}`;
+		let row = "";
+		for (const char of paragraph) {
+			if (row && context.measureText(row + char).width > width - 2 * margin) {
+				const space = row.lastIndexOf(" ");
+				const cut = char !== " " && space > 0 ? space : row.length;
+				lines.push([weight, row.slice(0, cut)]);
+				row = row.slice(cut).trimStart();
+			}
+			row += char;
+		}
+		lines.push([weight, row]);
+	};
+	if (category) wrap(category, "600");
+	for (const paragraph of (note || " ").split("\n")) wrap(paragraph, "400");
+	const top = margin * 2 + lines.length * line;
+	page.width = width;
+	page.height = top + (image?.height ?? 0);
+	context.fillStyle = "#fff";
+	context.fillRect(0, 0, page.width, page.height);
+	context.fillStyle = "#111";
+	context.textBaseline = "top";
+	for (const [i, [weight, row]] of lines.entries()) {
+		context.font = `${weight} ${size}px ${font}`;
+		context.fillText(row, margin, margin + i * line);
+	}
+	if (image) context.drawImage(image, 0, top);
+	return page;
+}
+//#endregion
+export { cover, pdf };

package/dist/react.d.mts

@@ -1,5 +1,5 @@
 
-import { r as FeedbackOptions } from "./widget-Ca1heF8n.mjs";
+import { r as FeedbackOptions } from "./widget-Z1KOUKjx.mjs";
 //#region src/react/index.d.ts
 export type FeedbackProps = FeedbackOptions;
 export declare function Feedback(props: FeedbackProps): null;

package/dist/react.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { t as createFeedback } from "./widget-CVnusNlY.mjs";
+import { t as createFeedback } from "./widget-B1JDOVI1.mjs";
 import { useEffect, useRef } from "react";
 //#region src/react/index.ts
 function Feedback(props) {

package/dist/{report-BxonlIdW.mjs → report-BwLr1sYt.mjs}

@@ -1,5 +1,4 @@
 
-//#region src/shared/report.ts
 const UUID_V4 = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
 function fail(path) {
 	throw new TypeError(`report.${path} has the wrong shape`);
@@ -51,10 +50,50 @@ function mark(value, path) {
 		from: point(fields.from, `${path}.from`),
 		to: point(fields.to, `${path}.to`)
 	};
+	if (fields.tool === "text") {
+		const text = string(fields.text, `${path}.text`);
+		if ([...text].length > 280) fail(`${path}.text`);
+		return {
+			tool: "text",
+			x: number(fields.x, `${path}.x`),
+			y: number(fields.y, `${path}.y`),
+			text
+		};
+	}
 	return fail(`${path}.tool`);
 }
+function facts(fields, path) {
+	const at = path ? `${path}.` : "";
+	const page = object(fields.page, `${at}page`);
+	const viewport = object(fields.viewport, `${at}viewport`);
+	const scroll = object(fields.scroll, `${at}scroll`);
+	return {
+		page: {
+			url: string(page.url, `${at}page.url`),
+			title: string(page.title, `${at}page.title`)
+		},
+		viewport: {
+			width: number(viewport.width, `${at}viewport.width`),
+			height: number(viewport.height, `${at}viewport.height`),
+			devicePixelRatio: number(viewport.devicePixelRatio, `${at}viewport.devicePixelRatio`)
+		},
+		scroll: {
+			x: number(scroll.x, `${at}scroll.x`),
+			y: number(scroll.y, `${at}scroll.y`)
+		}
+	};
+}
+function screenshot(value, path) {
+	const fields = object(value, path);
+	if (fields.image !== void 0 && fields.image !== null) fail(`${path}.image`);
+	if (!Array.isArray(fields.marks)) fail(`${path}.marks`);
+	return {
+		marks: fields.marks.map((item, i) => mark(item, `${path}.marks[${i}]`)),
+		...facts(fields, path)
+	};
+}
 /**
-* The one shape check for a report without its image, as JSON carries it. Returns a copy that
+* The one shape check for a report without its images, as JSON carries it. Returns a copy that
 * holds only the known fields, or throws a TypeError that names the first wrong field.
 */
 function checkReport(value) {
@@ -63,30 +102,15 @@ function checkReport(value) {
 	const createdAt = string(fields.createdAt, "createdAt");
 	const time = Date.parse(createdAt);
 	if (!(time >= 0 && time < Date.UTC(1e4, 0, 1)) || new Date(time).toISOString() !== createdAt) fail("createdAt");
-	if (fields.image !== void 0 && fields.image !== null) fail("image");
-	if (!Array.isArray(fields.marks)) fail("marks");
-	const page = object(fields.page, "page");
-	const viewport = object(fields.viewport, "viewport");
-	const scroll = object(fields.scroll, "scroll");
+	const shots = fields.screenshots;
+	if (!Array.isArray(shots) || shots.length > 10) fail("screenshots");
 	return {
 		id: fields.id,
 		createdAt,
 		note: string(fields.note, "note"),
 		...fields.category === void 0 ? {} : { category: string(fields.category, "category") },
-		marks: fields.marks.map((item, i) => mark(item, `marks[${i}]`)),
-		page: {
-			url: string(page.url, "page.url"),
-			title: string(page.title, "page.title")
-		},
-		viewport: {
-			width: number(viewport.width, "viewport.width"),
-			height: number(viewport.height, "viewport.height"),
-			devicePixelRatio: number(viewport.devicePixelRatio, "viewport.devicePixelRatio")
-		},
-		scroll: {
-			x: number(scroll.x, "scroll.x"),
-			y: number(scroll.y, "scroll.y")
-		},
+		screenshots: shots.map((item, i) => screenshot(item, `screenshots[${i}]`)),
+		...facts(fields, ""),
 		userAgent: string(fields.userAgent, "userAgent"),
 		language: string(fields.language, "language"),
 		timeZone: string(fields.timeZone, "timeZone"),

package/dist/{report-CIgy7uzP.d.mts → report-CaJegYyg.d.mts}

@@ -13,31 +13,45 @@ type Mark = {
   tool: "arrow";
   from: [number, number];
   to: [number, number];
+} | {
+  tool: "text";
+  x: number;
+  y: number;
+  text: string;
+};
+type Page = {
+  url: string;
+  title: string;
+};
+type Viewport = {
+  width: number;
+  height: number;
+  devicePixelRatio: number;
+};
+type Scroll = {
+  x: number;
+  y: number;
+};
+type Screenshot = {
+  image: Blob;
+  marks: Mark[];
+  page: Page;
+  viewport: Viewport;
+  scroll: Scroll;
 };
 type FeedbackReport = {
   id: string;
   createdAt: string;
   note: string;
   category?: string;
-  image: Blob | null;
-  marks: Mark[];
-  page: {
-    url: string;
-    title: string;
-  };
-  viewport: {
-    width: number;
-    height: number;
-    devicePixelRatio: number;
-  };
-  scroll: {
-    x: number;
-    y: number;
-  };
+  screenshots: Screenshot[];
+  page: Page;
+  viewport: Viewport;
+  scroll: Scroll;
   userAgent: string;
   language: string;
   timeZone: string;
   context: Record<string, unknown>;
 };
 //#endregion
-export { Mark as n, FeedbackReport as t };
+export { Mark as n, Screenshot as r, FeedbackReport as t };

package/dist/{report-BRZX6sWL.mjs → report-CnspEsHf.mjs}

@@ -1,5 +1,5 @@
 
-import { t as checkReport } from "./report-BxonlIdW.mjs";
+import { t as checkReport } from "./report-BwLr1sYt.mjs";
 //#region src/report.ts
 function uuid() {
 	const bytes = crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(16));
@@ -31,28 +31,39 @@ function shown(error) {
 	return typeof message === "string" && message ? message : void 0;
 }
 /** Builds the report and checks it with the same shape check the server uses. */
-async function build(draft, image, seen, settings) {
+async function build(draft, shots, seen, settings) {
 	const context = await host(() => settings.context?.()) ?? {};
+	const facts = ({ url, title, viewport, scroll }) => ({
+		page: {
+			url: pageUrl(url, Boolean(settings.redactUrl)),
+			title
+		},
+		viewport,
+		scroll
+	});
 	const report = {
 		id: uuid(),
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		note: draft.note,
 		...draft.category === void 0 ? {} : { category: draft.category },
-		marks: image ? draft.marks : [],
-		page: {
-			url: pageUrl(seen.url, Boolean(settings.redactUrl)),
-			title: seen.title
-		},
-		viewport: seen.viewport,
-		scroll: seen.scroll,
+		screenshots: shots.map((shot) => ({
+			marks: shot.marks,
+			...facts(shot.seen)
+		})),
+		...facts(seen),
 		userAgent: navigator.userAgent,
 		language: navigator.language,
 		timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 		context
 	};
+	const checked = checkReport(report);
+	const screenshots = checked.screenshots.map((shot, i) => ({
+		...shot,
+		image: shots[i].image
+	}));
 	return {
-		...checkReport(report),
-		image
+		...checked,
+		screenshots
 	};
 }
 /** Sends with onSubmit, or else POSTs what parseFeedbackRequest reads to the endpoint. */
@@ -61,13 +72,14 @@ async function deliver(report, settings) {
 	if (onSubmit) return host(() => onSubmit(report));
 	if (!endpoint) throw new Error("Neither onSubmit nor endpoint is set.");
 	const body = new FormData();
+	const screenshots = report.screenshots.map(({ image: _, ...shot }) => shot);
 	body.append("report", JSON.stringify({
 		...report,
-		image: void 0
+		screenshots
 	}));
-	if (report.image) {
-		const extension = report.image.type === "image/png" ? "png" : "webp";
-		body.append("image", report.image, `${report.id}.${extension}`);
+	for (const [i, { image }] of report.screenshots.entries()) {
+		const extension = image.type === "image/png" ? "png" : "webp";
+		body.append(`image${i}`, image, `${report.id}-${i}.${extension}`);
 	}
 	const { headers: given } = settings;
 	const headers = typeof given === "function" ? await host(given) : given ?? {};

package/dist/server.d.mts

@@ -1,5 +1,5 @@
 
-import { n as Mark, t as FeedbackReport } from "./report-CIgy7uzP.mjs";
+import { n as Mark, r as Screenshot, t as FeedbackReport } from "./report-CaJegYyg.mjs";
 //#region src/server/index.d.ts
 export declare class FeedbackRequestError extends Error {
   readonly status: 400 | 413;
@@ -9,7 +9,6 @@ export declare function parseFeedbackRequest(request: Request, limits?: {
   maxImageBytes?: number;
 }): Promise<{
   report: FeedbackReport;
-  image: Blob | null;
 }>;
 //#endregion
-export type { FeedbackReport, Mark };
+export type { FeedbackReport, Mark, Screenshot };

package/dist/server.mjs

@@ -1,9 +1,10 @@
 
-import { t as checkReport } from "./report-BxonlIdW.mjs";
+import { t as checkReport } from "./report-BwLr1sYt.mjs";
 //#region src/server/index.ts
 const DEFAULT_MAX_IMAGE_BYTES = 1e7;
 const REPORT_BYTES = 1048576;
 const FRAMING_BYTES = 65536;
+const IMAGE_PART = /^image\d+$/;
 const PNG = [
 	137,
 	80,
@@ -62,7 +63,7 @@ async function parseFeedbackRequest(request, limits = {}) {
 	if (!(maxImageBytes >= 0)) throw new RangeError("maxImageBytes must be a number of bytes.");
 	const contentType = request.headers.get("content-type") ?? "";
 	if (!/^multipart\/form-data\s*;/i.test(contentType)) throw new FeedbackRequestError(400, "The request is not multipart/form-data.");
-	const body = await read(request, maxImageBytes + REPORT_BYTES + FRAMING_BYTES);
+	const body = await read(request, 10 * maxImageBytes + REPORT_BYTES + FRAMING_BYTES);
 	let form;
 	try {
 		form = await new Response(body, { headers: { "content-type": contentType } }).formData();
@@ -70,11 +71,9 @@ async function parseFeedbackRequest(request, limits = {}) {
 		throw new FeedbackRequestError(400, "The multipart body cannot be read.");
 	}
 	const reports = form.getAll("report");
-	const images = form.getAll("image");
 	const [json] = reports;
-	const [part] = images;
 	if (reports.length !== 1 || typeof json !== "string") throw new FeedbackRequestError(400, "The request needs one report part, as text.");
-	if (images.length > 1 || typeof part === "string") throw new FeedbackRequestError(400, "The request has more than one image, or an image as text.");
+	if (form.has("image")) throw new FeedbackRequestError(400, "The request has an image part named image; visual-feedback 0.2 sends image0, image1 and on.");
 	if (new Blob([json]).size > REPORT_BYTES) throw new FeedbackRequestError(413, "The report is too large.");
 	let fields;
 	try {
@@ -82,14 +81,24 @@ async function parseFeedbackRequest(request, limits = {}) {
 	} catch (error) {
 		throw new FeedbackRequestError(400, error instanceof Error ? error.message : "Bad report.");
 	}
-	const image = part ? await checkImage(part, maxImageBytes) : null;
-	return {
-		report: {
-			...fields,
-			image
-		},
-		image
-	};
+	const count = fields.screenshots.length;
+	const expected = new Set(Array.from({ length: count }, (_, i) => `image${i}`));
+	for (const name of form.keys()) if (IMAGE_PART.test(name) && !expected.has(name)) throw new FeedbackRequestError(400, `The request has an image part, ${name}, with no screenshot.`);
+	const images = [];
+	for (let i = 0; i < count; i++) {
+		const parts = form.getAll(`image${i}`);
+		const [part] = parts;
+		if (parts.length !== 1 || typeof part === "string" || !part) throw new FeedbackRequestError(400, `The request needs one image${i} part, as a file.`);
+		images.push(await checkImage(part, maxImageBytes));
+	}
+	const screenshots = fields.screenshots.map((shot, i) => ({
+		...shot,
+		image: images[i]
+	}));
+	return { report: {
+		...fields,
+		screenshots
+	} };
 }
 //#endregion
 export { FeedbackRequestError, parseFeedbackRequest };