visual-feedback 0.0.0-stage → 0.2.0

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+
+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

@@ -0,0 +1,2 @@
+
+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

@@ -0,0 +1,6 @@
+
+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;
+//#endregion

package/dist/react.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { t as createFeedback } from "./widget-B1JDOVI1.mjs";
+import { useEffect, useRef } from "react";
+//#region src/react/index.ts
+function Feedback(props) {
+	const widget = useRef(null);
+	const shown = useRef(props);
+	useEffect(() => {
+		const created = createFeedback(shown.current);
+		widget.current = created;
+		return () => {
+			created.destroy();
+			widget.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const before = shown.current;
+		if (!widget.current || before === props) return;
+		const keys = /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(props)]);
+		if ([...keys].every((key) => Object.is(before[key], props[key]))) return;
+		const next = { ...props };
+		for (const key of keys) if (!(key in props)) next[key] = void 0;
+		widget.current.update(next);
+		shown.current = props;
+	});
+	return null;
+}
+//#endregion
+export { Feedback };

package/dist/report-BwLr1sYt.mjs

@@ -0,0 +1,121 @@
+
+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`);
+}
+function object(value, path) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) fail(path);
+	return value;
+}
+const UNSTORABLE = /\0|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+const storable = (text) => text.replace(UNSTORABLE, (found) => found === "\0" ? "" : "�");
+function string(value, path) {
+	if (typeof value !== "string") fail(path);
+	return storable(value);
+}
+function storableDeep(value) {
+	if (typeof value === "string") return storable(value);
+	if (Array.isArray(value)) return value.map(storableDeep);
+	if (value === null || typeof value !== "object") return value;
+	const proto = Object.getPrototypeOf(value);
+	if (proto !== Object.prototype && proto !== null) return value;
+	return Object.fromEntries(Object.entries(value).map(([key, item]) => [storable(key), storableDeep(item)]).filter(([key]) => key !== "__proto__"));
+}
+function number(value, path) {
+	if (typeof value !== "number" || !Number.isFinite(value)) fail(path);
+	return value;
+}
+function point(value, path) {
+	if (!Array.isArray(value) || value.length !== 2) fail(path);
+	return [number(value[0], path), number(value[1], path)];
+}
+function mark(value, path) {
+	const fields = object(value, path);
+	if (fields.tool === "pen") {
+		if (!Array.isArray(fields.points)) fail(`${path}.points`);
+		return {
+			tool: "pen",
+			points: fields.points.map((item, i) => point(item, `${path}.points[${i}]`))
+		};
+	}
+	if (fields.tool === "box") return {
+		tool: "box",
+		x: number(fields.x, `${path}.x`),
+		y: number(fields.y, `${path}.y`),
+		width: number(fields.width, `${path}.width`),
+		height: number(fields.height, `${path}.height`)
+	};
+	if (fields.tool === "arrow") return {
+		tool: "arrow",
+		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 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) {
+	const fields = object(value, "");
+	if (typeof fields.id !== "string" || !UUID_V4.test(fields.id)) fail("id");
+	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");
+	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") },
+		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"),
+		context: storableDeep(object(fields.context, "context"))
+	};
+}
+//#endregion
+export { checkReport as t };

package/dist/report-CaJegYyg.d.mts

@@ -0,0 +1,57 @@
+
+//#region src/shared/report.d.ts
+type Mark = {
+  tool: "pen";
+  points: [number, number][];
+} | {
+  tool: "box";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+} | {
+  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;
+  screenshots: Screenshot[];
+  page: Page;
+  viewport: Viewport;
+  scroll: Scroll;
+  userAgent: string;
+  language: string;
+  timeZone: string;
+  context: Record<string, unknown>;
+};
+//#endregion
+export { Mark as n, Screenshot as r, FeedbackReport as t };

package/dist/report-CnspEsHf.mjs

@@ -0,0 +1,95 @@
+
+import { t as checkReport } from "./report-BwLr1sYt.mjs";
+//#region src/report.ts
+function uuid() {
+	const bytes = crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(16));
+	bytes[6] = (bytes[6] ?? 0) & 15 | 64;
+	bytes[8] = (bytes[8] ?? 0) & 63 | 128;
+	const hex = [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+	return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function pageUrl(href, redact) {
+	if (!redact) return href;
+	const url = new URL(href);
+	url.search = "";
+	url.hash = "";
+	return url.href;
+}
+let fromHost;
+async function host(call) {
+	try {
+		return await call();
+	} catch (error) {
+		fromHost = error;
+		throw error;
+	}
+}
+/** The host's own error message, the only one the user is shown. */
+function shown(error) {
+	if (error !== fromHost) return void 0;
+	const message = typeof error === "string" ? error : error?.message;
+	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, 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 },
+		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 {
+		...checked,
+		screenshots
+	};
+}
+/** Sends with onSubmit, or else POSTs what parseFeedbackRequest reads to the endpoint. */
+async function deliver(report, settings) {
+	const { onSubmit, endpoint } = 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,
+		screenshots
+	}));
+	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 ?? {};
+	const response = await fetch(endpoint, {
+		method: "POST",
+		body,
+		headers,
+		redirect: "manual"
+	});
+	if (!response.ok) throw new Error(`The endpoint answered ${response.status}.`);
+}
+//#endregion
+export { build, deliver, shown };

package/dist/seen-BpIWldOP.mjs

@@ -0,0 +1,21 @@
+
+//#region src/seen.ts
+/** What the page looked like when each screenshot was taken. */
+const shots = /* @__PURE__ */ new WeakMap();
+function look() {
+	return {
+		url: location.href,
+		title: document.title,
+		viewport: {
+			width: innerWidth,
+			height: innerHeight,
+			devicePixelRatio
+		},
+		scroll: {
+			x: scrollX,
+			y: scrollY
+		}
+	};
+}
+//#endregion
+export { shots as n, look as t };

package/dist/server.d.mts

@@ -0,0 +1,14 @@
+
+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;
+  constructor(status: 400 | 413, message: string);
+}
+export declare function parseFeedbackRequest(request: Request, limits?: {
+  maxImageBytes?: number;
+}): Promise<{
+  report: FeedbackReport;
+}>;
+//#endregion
+export type { FeedbackReport, Mark, Screenshot };

package/dist/server.mjs

@@ -0,0 +1,104 @@
+
+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,
+	78,
+	71,
+	13,
+	10,
+	26,
+	10
+];
+var FeedbackRequestError = class extends Error {
+	status;
+	constructor(status, message) {
+		super(message);
+		this.name = "FeedbackRequestError";
+		this.status = status;
+	}
+};
+async function read(request, limit) {
+	if (Number(request.headers.get("content-length")) > limit) throw new FeedbackRequestError(413, "The request is too large.");
+	if (!request.body) throw new FeedbackRequestError(400, "The request has no body.");
+	const reader = request.body.getReader();
+	const chunks = [];
+	let size = 0;
+	for (;;) {
+		let next;
+		try {
+			next = await reader.read();
+		} catch {
+			throw new FeedbackRequestError(400, "The request body broke off.");
+		}
+		const { done, value } = next;
+		if (done) return new Blob(chunks);
+		size += value.byteLength;
+		if (size > limit) {
+			await reader.cancel().catch(() => {});
+			throw new FeedbackRequestError(413, "The request is too large.");
+		}
+		chunks.push(value);
+	}
+}
+function imageType(bytes) {
+	if (PNG.every((byte, i) => bytes[i] === byte)) return "image/png";
+	const header = String.fromCharCode(...bytes.subarray(0, 12));
+	if (header.startsWith("RIFF") && header.slice(8, 12) === "WEBP") return "image/webp";
+	return null;
+}
+async function checkImage(part, maxImageBytes) {
+	if (part.size > maxImageBytes) throw new FeedbackRequestError(413, "The image is too large.");
+	const type = imageType(new Uint8Array(await part.slice(0, 12).arrayBuffer()));
+	if (!type) throw new FeedbackRequestError(400, "The image is not a PNG or WebP.");
+	return part.slice(0, part.size, type);
+}
+async function parseFeedbackRequest(request, limits = {}) {
+	const maxImageBytes = limits.maxImageBytes ?? DEFAULT_MAX_IMAGE_BYTES;
+	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, 10 * maxImageBytes + REPORT_BYTES + FRAMING_BYTES);
+	let form;
+	try {
+		form = await new Response(body, { headers: { "content-type": contentType } }).formData();
+	} catch {
+		throw new FeedbackRequestError(400, "The multipart body cannot be read.");
+	}
+	const reports = form.getAll("report");
+	const [json] = reports;
+	if (reports.length !== 1 || typeof json !== "string") throw new FeedbackRequestError(400, "The request needs one report part, 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 {
+		fields = checkReport(JSON.parse(json, (key, value) => key === "__proto__" ? void 0 : value));
+	} catch (error) {
+		throw new FeedbackRequestError(400, error instanceof Error ? error.message : "Bad report.");
+	}
+	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 };