visual-feedback 0.0.0-stage → 0.1.0

package/dist/report-BxonlIdW.mjs

@@ -0,0 +1,97 @@
+
+//#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`);
+}
+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`)
+	};
+	return fail(`${path}.tool`);
+}
+/**
+* The one shape check for a report without its image, 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");
+	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");
+	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")
+		},
+		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-CIgy7uzP.d.mts

@@ -0,0 +1,43 @@
+
+//#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];
+};
+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;
+  };
+  userAgent: string;
+  language: string;
+  timeZone: string;
+  context: Record<string, unknown>;
+};
+//#endregion
+export { Mark as n, FeedbackReport as t };

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,15 @@
+
+import { n as Mark, t as FeedbackReport } from "./report-CIgy7uzP.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;
+  image: Blob | null;
+}>;
+//#endregion
+export type { FeedbackReport, Mark };

package/dist/server.mjs

@@ -0,0 +1,95 @@
+
+import { t as checkReport } from "./report-BxonlIdW.mjs";
+//#region src/server/index.ts
+const DEFAULT_MAX_IMAGE_BYTES = 1e7;
+const REPORT_BYTES = 1048576;
+const FRAMING_BYTES = 65536;
+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, 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 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 (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 image = part ? await checkImage(part, maxImageBytes) : null;
+	return {
+		report: {
+			...fields,
+			image
+		},
+		image
+	};
+}
+//#endregion
+export { FeedbackRequestError, parseFeedbackRequest };

package/dist/widget-CVnusNlY.mjs

@@ -0,0 +1,278 @@
+
+//#region src/widget.ts
+const SVG = "http://www.w3.org/2000/svg";
+function supported() {
+	return typeof document !== "undefined" && "adoptedStyleSheets" in Document.prototype && "adoptedStyleSheets" in ShadowRoot.prototype && CSS.supports("color", "color-mix(in srgb, red, red)");
+}
+function sheet(text) {
+	const result = new CSSStyleSheet();
+	result.replaceSync(text);
+	return result;
+}
+function variables() {
+	return `.vf{--_r:var(--vf-radius,12px);--_s:var(--vf-surface,Canvas);--_t:var(--vf-text,CanvasText);--_m:var(--vf-muted,color-mix(in srgb,var(--_t) 60%,transparent));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"});--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 4px 16px rgb(0 0 0/12%));--_size:var(--vf-trigger-size,36px);--_off:var(--vf-offset,16px);--_z:var(--vf-z,2147483000)}`;
+}
+const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{position:fixed;z-index:var(--_z);box-sizing:border-box;width:var(--_size);height:var(--_size);margin:0;padding:0;display:grid;place-items:center}.trigger[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}.trigger[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}.trigger[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}.trigger[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger svg{width:55%;height:55%}.capturing,.capturing .backdrop{visibility:hidden}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
+const THEME = `.trigger{border:1px solid var(--_b);border-radius:50%;background:var(--_s);color:var(--_t);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s}.trigger:hover{background:color-mix(in srgb,var(--_s) 90%,var(--_t))}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}`;
+function icon() {
+	const svg = document.createElementNS(SVG, "svg");
+	const path = document.createElementNS(SVG, "path");
+	for (const [name, value] of Object.entries({
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		"stroke-linejoin": "round",
+		part: "trigger-icon"
+	})) svg.setAttribute(name, value);
+	path.setAttribute("d", "M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z");
+	svg.append(path);
+	return svg;
+}
+function field(element) {
+	return element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName);
+}
+function deepActive() {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+const DISCONNECTED = Symbol.for("visual-feedback.disconnected");
+const noop = {
+	open: async () => {},
+	close() {},
+	destroy() {},
+	update() {},
+	on: () => () => {}
+};
+function createFeedback(options = {}) {
+	if (!supported()) return noop;
+	const tag = options.tagName ?? "visual-feedback";
+	if (!customElements.get(tag)) customElements.define(tag, class extends HTMLElement {
+		disconnectedCallback() {
+			this[DISCONNECTED]?.();
+		}
+	});
+	const host = document.createElement(tag);
+	const root = host.attachShadow({ mode: "open" });
+	const wrapper = document.createElement("div");
+	wrapper.className = "vf";
+	root.append(wrapper);
+	let view;
+	const handlers = /* @__PURE__ */ new Map();
+	const call = (fns, args) => {
+		for (const fn of [...fns]) try {
+			fn(...args);
+		} catch (error) {
+			reportError(error);
+		}
+	};
+	const emit = (event, ...args) => call(handlers.get(event) ?? [], args);
+	const start = () => void widget.open().catch(() => {});
+	let state = "idle";
+	let dialog;
+	let session = 0;
+	let returnFocus = null;
+	let pending;
+	let trigger;
+	let unlisten;
+	function listen(shortcut) {
+		const parts = shortcut.toLowerCase().split("+");
+		const key = parts.pop();
+		const names = [
+			"alt",
+			"shift",
+			"control",
+			"meta"
+		];
+		const mods = names.map((name) => parts.includes(name)).join();
+		const typing = !/control|meta/.test(shortcut.toLowerCase());
+		const on = (event) => {
+			if (event instanceof KeyboardEvent && state === "idle" && !event.repeat && !event.isComposing && !event.getModifierState("AltGraph") && parts.every((part) => names.includes(part)) && [
+				event.altKey,
+				event.shiftKey,
+				event.ctrlKey,
+				event.metaKey
+			].join() === mods && [event.code.replace(/^(Key|Digit)/, ""), event.key].some((name) => name.toLowerCase() === key) && !(typing && field(event.composedPath()[0]))) {
+				event.preventDefault();
+				start();
+			}
+		};
+		addEventListener("keydown", on);
+		return () => removeEventListener("keydown", on);
+	}
+	let base = [];
+	let extra = [];
+	function sheets() {
+		const dialogCss = view?.css(Boolean(options.unstyled)).map(sheet) ?? [];
+		root.adoptedStyleSheets = [
+			...base,
+			...dialogCss,
+			...extra
+		];
+	}
+	function apply() {
+		wrapper.style.colorScheme = options.theme?.replace("auto", "") ?? "";
+		base = [sheet(variables() + LAYOUT), ...options.unstyled ? [] : [sheet(THEME)]];
+		extra = options.css ? [sheet(options.css)] : [];
+		sheets();
+		if (options.trigger === "none") {
+			trigger?.remove();
+			trigger = void 0;
+		} else {
+			if (!trigger) {
+				trigger = document.createElement("button");
+				trigger.type = "button";
+				trigger.className = "trigger";
+				trigger.setAttribute("part", "trigger");
+				trigger.append(icon());
+				trigger.addEventListener("click", start);
+				wrapper.prepend(trigger);
+			}
+			const [y, x] = (options.position ?? "bottom-right").split("-");
+			trigger.dataset.y = y;
+			trigger.dataset.x = x;
+			trigger.setAttribute("aria-label", options.strings?.trigger ?? "Send feedback");
+		}
+		unlisten?.();
+		unlisten = options.shortcut ? listen(options.shortcut) : void 0;
+	}
+	apply();
+	(options.container ?? document.body ?? document.documentElement).append(host);
+	function hide(on) {
+		wrapper.classList.toggle("capturing", on);
+	}
+	function requestDisplay() {
+		const media = navigator.mediaDevices;
+		if (options.capture?.mode !== "display" || typeof media?.getDisplayMedia !== "function") return;
+		hide(true);
+		const stream = media.getDisplayMedia({ video: true });
+		stream.catch(() => {});
+		return stream;
+	}
+	function stop(stream) {
+		stream?.then((media) => {
+			for (const track of media.getTracks()) track.stop();
+		}, () => {});
+	}
+	async function grab(module, mine, stream) {
+		hide(true);
+		const quiet = view?.announce(root, options.strings);
+		try {
+			return await module.capture(options.capture, stream);
+		} catch {
+			return null;
+		} finally {
+			quiet?.();
+			if (mine === session) hide(false);
+		}
+	}
+	function cancel() {
+		session++;
+		hide(false);
+	}
+	function teardown() {
+		dialog?.unmount();
+		dialog = void 0;
+		const target = returnFocus?.isConnected && returnFocus !== document.body ? returnFocus : trigger;
+		returnFocus = null;
+		target?.focus?.();
+	}
+	async function show(mine) {
+		returnFocus = deepActive();
+		const stream = requestDisplay();
+		try {
+			const [loaded, capture] = await Promise.all([import("./dialog-BTY6FKLo.mjs"), import("./capture-CufRosj3.mjs")]);
+			if (mine !== session) return stop(stream);
+			view = loaded;
+			sheets();
+			const image = await grab(capture, mine, stream);
+			if (mine !== session) return;
+			if (!host.isConnected) {
+				state = "idle";
+				return;
+			}
+			dialog = view.mount(wrapper, {
+				close: () => widget.close(),
+				retry: () => void retry(capture).catch((error) => {
+					widget.close();
+					emit("error", error);
+				}),
+				emit,
+				options: () => options
+			}, options);
+			dialog.capture(image);
+		} catch (error) {
+			stop(stream);
+			if (mine === session) {
+				state = "idle";
+				hide(false);
+				teardown();
+			}
+			emit("error", error);
+			throw error;
+		}
+		state = "open";
+		emit("open");
+	}
+	async function retry(capture) {
+		if (wrapper.classList.contains("capturing")) return;
+		const mine = session;
+		dialog?.lock(false);
+		const image = await grab(capture, mine, requestDisplay());
+		if (mine !== session) return;
+		dialog?.capture(image);
+	}
+	const widget = {
+		open() {
+			if (state === "opening" && pending) return pending;
+			if (state !== "idle") return Promise.resolve();
+			state = "opening";
+			pending = show(++session);
+			return pending;
+		},
+		close() {
+			if (state !== "open" && state !== "opening") return;
+			const wasOpen = state === "open";
+			state = "idle";
+			cancel();
+			teardown();
+			if (wasOpen) emit("close");
+		},
+		destroy() {
+			if (state === "destroyed") return;
+			const wasOpen = state === "open";
+			state = "destroyed";
+			cancel();
+			unlisten?.();
+			if (wasOpen) teardown();
+			const closers = wasOpen ? [...handlers.get("close") ?? []] : [];
+			handlers.clear();
+			host.remove();
+			call(closers, []);
+		},
+		update(next) {
+			if (state === "destroyed") return;
+			options = {
+				...options,
+				...next
+			};
+			apply();
+		},
+		on(event, fn) {
+			if (state === "destroyed") return () => {};
+			const set = handlers.get(event) ?? /* @__PURE__ */ new Set();
+			handlers.set(event, set);
+			const handler = fn;
+			set.add(handler);
+			return () => set.delete(handler);
+		}
+	};
+	host[DISCONNECTED] = () => queueMicrotask(() => {
+		if (!host.isConnected) widget.close();
+	});
+	return widget;
+}
+//#endregion
+export { createFeedback as t };

package/dist/widget-Ca1heF8n.d.mts

@@ -0,0 +1,56 @@
+
+import { n as Mark, t as FeedbackReport } from "./report-CIgy7uzP.mjs";
+//#region src/capture.d.ts
+type CaptureOptions = {
+  mode?: "dom" | "display";
+  maxWidth?: number;
+  type?: "image/webp" | "image/png";
+  quality?: number;
+};
+//#endregion
+//#region src/widget.d.ts
+/** What each event passes to its handlers. */
+type FeedbackEvents = {
+  open: [];
+  close: [];
+  submit: [report: FeedbackReport];
+  sent: [report: FeedbackReport];
+  error: [error: unknown];
+};
+type FeedbackEvent = keyof FeedbackEvents;
+/** The texts the widget shows, by SPEC §12 key. */
+type FeedbackStrings = Record<"trigger" | "title" | "capturing" | "captureError" | "sendWithout" | "noteLabel" | "notePlaceholder" | "noteRequired" | "categoryLabel" | "pen" | "box" | "arrow" | "undo" | "clear" | "cancel" | "send" | "sending" | "sent" | "error" | "retry", string>;
+type FeedbackOptions = {
+  onSubmit?: (report: FeedbackReport) => Promise<void>;
+  endpoint?: string;
+  headers?: Record<string, string> | (() => Record<string, string>);
+  capture?: CaptureOptions;
+  tools?: Mark["tool"][];
+  categories?: {
+    id: string;
+    label: string;
+  }[];
+  requireNote?: boolean;
+  redactUrl?: boolean;
+  context?: () => Record<string, unknown> | Promise<Record<string, unknown>>;
+  trigger?: "button" | "none";
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  shortcut?: string | false;
+  strings?: Partial<FeedbackStrings>;
+  theme?: "auto" | "light" | "dark";
+  css?: string;
+  unstyled?: boolean;
+  container?: HTMLElement;
+  tagName?: string;
+};
+type FeedbackWidget = {
+  open(): Promise<void>;
+  close(): void;
+  destroy(): void;
+  /** A key given as undefined goes back to its default. */
+  update(options: { [K in keyof FeedbackOptions]?: FeedbackOptions[K] | undefined; }): void;
+  on<E extends FeedbackEvent>(event: E, fn: (...args: FeedbackEvents[E]) => void): () => void;
+};
+declare function createFeedback(options?: FeedbackOptions): FeedbackWidget;
+//#endregion
+export { FeedbackWidget as a, FeedbackStrings as i, FeedbackEvents as n, createFeedback as o, FeedbackOptions as r, CaptureOptions as s, FeedbackEvent as t };