visual-feedback 0.0.0-stage → 0.1.0

package/dist/dialog-BTY6FKLo.mjs

@@ -0,0 +1,485 @@
+
+import { n as shots, t as look } from "./seen-BpIWldOP.mjs";
+//#region src/annotate.ts
+function context(canvas) {
+	const result = canvas.getContext("2d");
+	if (!result) throw new Error("no 2d context");
+	return result;
+}
+function arrowHead(target, [x1, y1], [x2, y2]) {
+	const angle = Math.atan2(y2 - y1, x2 - x1);
+	const size = target.lineWidth * 4;
+	for (const side of [-1, 1]) {
+		target.moveTo(x2, y2);
+		target.lineTo(x2 - size * Math.cos(angle + side * Math.PI / 6), y2 - size * Math.sin(angle + side * Math.PI / 6));
+	}
+}
+function stroke(target, mark) {
+	target.beginPath();
+	if (mark.tool === "pen") for (const [i, [x, y]] of mark.points.entries()) if (i === 0) target.moveTo(x, y);
+	else target.lineTo(x, y);
+	else if (mark.tool === "box") target.rect(mark.x, mark.y, mark.width, mark.height);
+	else {
+		target.moveTo(...mark.from);
+		target.lineTo(...mark.to);
+		arrowHead(target, mark.from, mark.to);
+	}
+	target.stroke();
+}
+function drawn(mark) {
+	if (mark.tool === "pen") return mark.points.length > 1;
+	if (mark.tool === "box") return mark.width > 0 || mark.height > 0;
+	return mark.from[0] !== mark.to[0] || mark.from[1] !== mark.to[1];
+}
+/** Draws on `canvas` in image pixels, and repaints it from a clean copy on every change. */
+function annotate(canvas, onChange) {
+	const clean = document.createElement("canvas");
+	clean.width = canvas.width;
+	clean.height = canvas.height;
+	context(clean).drawImage(canvas, 0, 0);
+	const target = context(canvas);
+	const marks = [];
+	let current = null;
+	function paint() {
+		target.setTransform(1, 0, 0, 1, 0, 0);
+		target.drawImage(clean, 0, 0);
+		target.strokeStyle = getComputedStyle(canvas).color;
+		target.lineWidth = Math.max(4, Math.round(canvas.width / 240));
+		target.lineCap = "round";
+		target.lineJoin = "round";
+		for (const mark of current ? [...marks, current.mark] : marks) stroke(target, mark);
+	}
+	function point(event) {
+		const box = canvas.getBoundingClientRect();
+		const x = (event.clientX - box.left - canvas.clientLeft) * canvas.width / canvas.clientWidth;
+		const y = (event.clientY - box.top - canvas.clientTop) * canvas.height / canvas.clientHeight;
+		return [Math.round(Math.min(canvas.width, Math.max(0, x))), Math.round(Math.min(canvas.height, Math.max(0, y)))];
+	}
+	function shape(tool, start, end) {
+		if (tool === "pen") return {
+			tool,
+			points: [start]
+		};
+		if (tool === "arrow") return {
+			tool,
+			from: start,
+			to: end
+		};
+		return {
+			tool,
+			x: Math.min(start[0], end[0]),
+			y: Math.min(start[1], end[1]),
+			width: Math.abs(end[0] - start[0]),
+			height: Math.abs(end[1] - start[1])
+		};
+	}
+	canvas.addEventListener("pointerdown", (event) => {
+		if (current || !event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		canvas.setPointerCapture(event.pointerId);
+		const start = point(event);
+		current = {
+			id: event.pointerId,
+			start,
+			mark: shape(annotator.tool, start, start)
+		};
+	});
+	function extend(event) {
+		if (!current) return;
+		const end = point(event);
+		const last = current.mark.tool === "pen" ? current.mark.points.at(-1) : void 0;
+		if (current.mark.tool === "pen") {
+			if (last?.[0] !== end[0] || last?.[1] !== end[1]) current.mark.points.push(end);
+		} else current.mark = shape(current.mark.tool, current.start, end);
+	}
+	function end() {
+		if (!current) return;
+		if (drawn(current.mark)) marks.push(current.mark);
+		current = null;
+		paint();
+		onChange();
+	}
+	canvas.addEventListener("pointermove", (event) => {
+		if (current?.id !== event.pointerId) return;
+		if (event.buttons === 0) return end();
+		extend(event);
+		paint();
+	});
+	canvas.addEventListener("pointerup", (event) => {
+		if (current?.id !== event.pointerId) return;
+		extend(event);
+		end();
+	});
+	for (const type of ["pointercancel", "lostpointercapture"]) canvas.addEventListener(type, (event) => {
+		if (current?.id !== event.pointerId) return;
+		current = null;
+		paint();
+	});
+	const annotator = {
+		tool: "pen",
+		marks,
+		end,
+		undo() {
+			marks.pop();
+			paint();
+			onChange();
+		},
+		clear() {
+			marks.length = 0;
+			paint();
+			onChange();
+		}
+	};
+	return annotator;
+}
+//#endregion
+//#region src/dialog.ts
+const LAYOUT = `.backdrop{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;box-sizing:border-box;background:none;color:inherit;display:grid;place-items:center;overflow:auto}.backdrop:not([open]){display:none}.backdrop::backdrop{background:none}.dialog{box-sizing:border-box;width:min(560px,100% - 32px);display:grid;gap:8px}.dialog.wide{width:min(1100px,100% - 32px)}.image{display:block;max-width:100%;max-height:60vh;margin:0 auto;color:var(--_mark)}.toolbar+.image{touch-action:none}.toolbar{display:flex;flex-wrap:wrap;gap:8px}.note{box-sizing:border-box;width:100%;min-height:96px;resize:vertical}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.live{position:fixed;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;
+const THEME = `.backdrop{background:var(--_bd)}.dialog{background:var(--_s);color:var(--_t);border-radius:var(--_r);box-shadow:var(--_sh);padding:16px}.title{margin:0 0 4px;font-size:1.15em}.label{font-weight:600}.image{border:1px solid var(--_b);border-radius:calc(var(--_r) / 2)}.error{margin:0}.note,.category,.actions button,.toolbar button{font:inherit;color:inherit;background:var(--_s);border:1px solid var(--_b);border-radius:calc(var(--_r) / 2)}.note,.category{padding:8px}.note::placeholder{color:var(--_m)}.actions button,.toolbar button{padding:6px 14px;cursor:pointer}.toolbar button:disabled{opacity:.5;cursor:default}.toolbar [aria-pressed=true]{border-color:var(--_a);box-shadow:inset 0 0 0 1px var(--_a)}.toolbar+.image{cursor:crosshair}.actions .send{font-weight:600;background:var(--_a);color:var(--_at);border-color:var(--_a)}.actions .send:where([data-ink=dark]){color:#000}.actions [aria-disabled=true]{opacity:.6;cursor:progress}.note:disabled,.category:disabled{opacity:.6}.status{margin:0}`;
+const ENGLISH = {
+	title: "Send feedback",
+	capturing: "Taking a screenshot…",
+	captureError: "Couldn't take a screenshot.",
+	sendWithout: "Send without screenshot",
+	noteLabel: "Your note",
+	notePlaceholder: "What happened, or what would you change?",
+	noteRequired: "Write a few words first.",
+	categoryLabel: "Type",
+	pen: "Draw",
+	box: "Box",
+	arrow: "Arrow",
+	undo: "Undo",
+	clear: "Clear",
+	cancel: "Cancel",
+	send: "Send",
+	sending: "Sending…",
+	sent: "Thanks, it's sent.",
+	error: "It didn't send. Your note is kept.",
+	retry: "Try again"
+};
+const texts = (strings = {}) => Object.assign({}, ENGLISH, ...Object.entries(strings).map(([key, text]) => text === void 0 ? {} : { [key]: text }));
+/** Tells a screen reader the screenshot is being taken; returns what removes it. */
+function announce(root, strings) {
+	const live = element("p", "live", { role: "status" });
+	root.append(live);
+	const frame = requestAnimationFrame(() => {
+		live.textContent = texts(strings).capturing;
+	});
+	return () => {
+		cancelAnimationFrame(frame);
+		live.remove();
+	};
+}
+function css(unstyled) {
+	return unstyled ? [LAYOUT] : [LAYOUT, THEME];
+}
+function element(tag, name, attributes = {}) {
+	const result = document.createElement(tag);
+	result.className = name;
+	result.setAttribute("part", name);
+	for (const [key, value] of Object.entries(attributes)) result.setAttribute(key, value);
+	return result;
+}
+function button(name, text, onClick) {
+	const result = element("button", name, { type: "button" });
+	result.textContent = text;
+	result.addEventListener("click", onClick);
+	return result;
+}
+function ink(button) {
+	const style = getComputedStyle(button);
+	if (style.getPropertyValue("--vf-accent-text").trim()) return;
+	let [r = 0, g = 0, b = 0] = /^rgba?\(([\d.]+), ([\d.]+), ([\d.]+)/.exec(style.backgroundColor)?.slice(1).map(Number) ?? [];
+	if (!/^rgb/.test(style.backgroundColor)) {
+		const pixel = document.createElement("canvas").getContext("2d");
+		if (!pixel) return;
+		pixel.fillStyle = style.backgroundColor;
+		pixel.fillRect(0, 0, 1, 1);
+		[r = 0, g = 0, b = 0] = pixel.getImageData(0, 0, 1, 1).data;
+	}
+	const linear = (c) => c / 255 <= .04045 ? c / 255 / 12.92 : ((c / 255 + .055) / 1.055) ** 2.4;
+	if ((.2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b) + .05) ** 2 > .0525) button.dataset.ink = "dark";
+}
+const LOCK = Symbol.for("visual-feedback.scroll-lock");
+function lock() {
+	const html = document.documentElement;
+	html[LOCK] ??= {
+		count: 0,
+		saved: [],
+		attribute: false
+	};
+	return html[LOCK];
+}
+function lockScroll() {
+	const state = lock();
+	if (state.count++ > 0) return;
+	const style = document.documentElement.style;
+	state.attribute = document.documentElement.hasAttribute("style");
+	state.saved = ["overflow-x", "overflow-y"].map((name) => [
+		name,
+		style.getPropertyValue(name),
+		style.getPropertyPriority(name)
+	]);
+	style.setProperty("overflow", "hidden", "important");
+}
+function unlockScroll() {
+	const state = lock();
+	if (--state.count > 0) return;
+	const style = document.documentElement.style;
+	for (const [name, value, priority] of state.saved) if (value) style.setProperty(name, value, priority);
+	else style.removeProperty(name);
+	state.saved = [];
+	if (!state.attribute && !style.length) document.documentElement.removeAttribute("style");
+}
+const FOCUSABLE = "button,textarea,input,select,a[href],[tabindex]:not([tabindex='-1'])";
+const NOTE_LIMIT = 2e3;
+function mount(parent, handlers, settings = {}) {
+	const tools = settings.tools ?? [
+		"pen",
+		"box",
+		"arrow"
+	];
+	const text = texts(settings.strings);
+	const backdrop = element("dialog", "backdrop", {
+		"aria-modal": "true",
+		"aria-labelledby": "vf-title"
+	});
+	const panel = element("div", "dialog");
+	const title = element("h2", "title", { id: "vf-title" });
+	title.textContent = text.title;
+	backdrop.append(panel);
+	let marks = () => [];
+	let locked = [];
+	let inert = [];
+	let primary;
+	let draft;
+	let actions;
+	let failure;
+	function toolbar(image) {
+		const choices = [...new Set(tools)].filter((tool) => [
+			"pen",
+			"box",
+			"arrow"
+		].includes(tool));
+		if (choices.length === 0) return [];
+		const bar = element("div", "toolbar");
+		const undo = button("undo", text.undo, () => annotator.undo());
+		const clear = button("clear", text.clear, () => annotator.clear());
+		const update = () => {
+			const none = annotator.marks.length === 0;
+			const root = parent.getRootNode();
+			if (none && (root.activeElement === undo || root.activeElement === clear)) buttons.find((choice) => choice.getAttribute("aria-pressed") === "true")?.focus();
+			undo.disabled = clear.disabled = none;
+		};
+		const annotator = annotate(image, update);
+		const pick = (tool) => {
+			annotator.tool = tool;
+			for (const [i, choice] of buttons.entries()) {
+				const active = choices[i] === tool;
+				choice.setAttribute("aria-pressed", String(active));
+				choice.setAttribute("part", active ? "tool tool-active" : "tool");
+			}
+		};
+		const buttons = choices.map((tool) => button("tool", text[tool], () => pick(tool)));
+		pick(choices[0]);
+		update();
+		marks = () => {
+			annotator.end();
+			return [...annotator.marks];
+		};
+		bar.append(...buttons, undo, clear);
+		locked.push(...buttons, undo, clear);
+		return [bar];
+	}
+	let current = null;
+	let seen;
+	let report;
+	let mounted = true;
+	async function deliver(draft) {
+		sending();
+		const options = handlers.options();
+		let module;
+		try {
+			module = await import("./report-BRZX6sWL.mjs");
+			if (!report) {
+				const capture = await import("./capture-CufRosj3.mjs");
+				const image = current ? await capture.encode(current, options.capture) : null;
+				const built = await module.build(draft, image, seen, options);
+				if (mounted) report = built;
+			}
+			if (!mounted || !report) return;
+			handlers.emit("submit", report);
+			await module.deliver(report, options);
+			handlers.emit("sent", report);
+			if (mounted) sent();
+		} catch (error) {
+			handlers.emit("error", error);
+			if (mounted) failed(module?.shown(error));
+		}
+	}
+	function show(view) {
+		current = view.error ? null : view.image;
+		marks = () => [];
+		locked = [];
+		inert = [];
+		primary = void 0;
+		draft = void 0;
+		failure = void 0;
+		actions = element("div", "actions");
+		const cancel = button("cancel", text.cancel, handlers.close);
+		if (view.error) {
+			const message = element("p", "error", { role: "alert" });
+			message.textContent = text.captureError;
+			const retry = button("retry", text.retry, handlers.retry);
+			actions.append(cancel, button("send-without", text.sendWithout, () => show({ image: null })), retry);
+			panel.classList.remove("wide");
+			panel.replaceChildren(title, message, actions);
+			retry.focus();
+			return;
+		}
+		const label = element("label", "label", { for: "vf-note" });
+		label.textContent = text.noteLabel;
+		const note = element("textarea", "note", {
+			id: "vf-note",
+			placeholder: text.notePlaceholder,
+			maxlength: String(NOTE_LIMIT)
+		});
+		const required = element("p", "error", {
+			id: "vf-note-error",
+			role: "alert"
+		});
+		required.textContent = text.noteRequired;
+		note.addEventListener("input", () => {
+			if (!note.value.trim()) return;
+			note.removeAttribute("aria-invalid");
+			note.removeAttribute("aria-describedby");
+			required.remove();
+		});
+		const fields = [label, note];
+		let category;
+		if (settings.categories?.length) {
+			const name = element("label", "label", { for: "vf-category" });
+			name.textContent = text.categoryLabel;
+			category = element("select", "category", { id: "vf-category" });
+			for (const choice of settings.categories) {
+				const option = document.createElement("option");
+				option.value = choice.id;
+				option.textContent = choice.label;
+				category.append(option);
+			}
+			fields.push(name, category);
+		}
+		const image = view.image;
+		if (image) {
+			image.className = "image";
+			image.setAttribute("part", "image");
+			image.removeAttribute("style");
+			inert.push(image);
+		}
+		const drawing = image ? [...toolbar(image), image] : [];
+		const send = button("send", text.send, () => {
+			if (draft) {
+				if (send.getAttribute("aria-disabled") !== "true") deliver(draft);
+				return;
+			}
+			if (settings.requireNote !== false && !note.value.trim()) {
+				note.setAttribute("aria-invalid", "true");
+				note.setAttribute("aria-describedby", required.id);
+				note.after(required);
+				note.focus();
+				return;
+			}
+			draft = {
+				note: note.value,
+				category: category?.value,
+				marks: marks()
+			};
+			deliver(draft);
+		});
+		primary = send;
+		locked.push(note, ...category ? [category] : []);
+		actions.append(cancel, send);
+		panel.classList.toggle("wide", Boolean(image));
+		panel.replaceChildren(title, ...drawing, ...fields, actions);
+		ink(send);
+		note.focus();
+	}
+	function sending() {
+		if (!primary) return;
+		for (const control of locked) control.disabled = true;
+		for (const item of inert) item.inert = true;
+		failure?.remove();
+		primary.setAttribute("aria-disabled", "true");
+		primary.textContent = text.sending;
+		primary.setAttribute("part", "send");
+		primary.focus();
+	}
+	function sent() {
+		const status = element("p", "status", {
+			role: "status",
+			tabindex: "-1"
+		});
+		status.textContent = text.sent;
+		panel.classList.remove("wide");
+		panel.replaceChildren(title, status);
+		status.focus();
+		done = setTimeout(handlers.close, 3e3);
+	}
+	function failed(message = text.error) {
+		if (!primary || !actions) return;
+		failure = element("p", "error", { role: "alert" });
+		failure.textContent = message;
+		actions.before(failure);
+		primary.removeAttribute("aria-disabled");
+		primary.textContent = text.retry;
+		primary.setAttribute("part", "retry");
+		primary.focus();
+	}
+	backdrop.addEventListener("cancel", (event) => {
+		event.preventDefault();
+		handlers.close();
+	});
+	backdrop.addEventListener("close", handlers.close);
+	backdrop.addEventListener("keydown", (event) => {
+		if (event.key !== "Tab") return;
+		event.preventDefault();
+		const items = [...panel.querySelectorAll(FOCUSABLE)].filter((item) => !item.matches(":disabled") && item.getClientRects().length > 0);
+		const active = parent.getRootNode().activeElement;
+		const index = active ? items.indexOf(active) : -1;
+		const step = event.shiftKey ? -1 : 1;
+		const next = index < 0 ? event.shiftKey ? items.length - 1 : 0 : index + step;
+		items.at(next % items.length)?.focus();
+	});
+	parent.append(backdrop);
+	try {
+		backdrop.showModal();
+	} catch (error) {
+		backdrop.remove();
+		throw error;
+	}
+	let done;
+	let scrollLocked = false;
+	const lock = (on) => {
+		if (on !== scrollLocked) (on ? lockScroll : unlockScroll)();
+		scrollLocked = on;
+	};
+	return {
+		show,
+		capture(image) {
+			seen = (image && shots.get(image)) ?? look();
+			show(image ? { image } : { error: true });
+			lock(true);
+		},
+		lock,
+		unmount() {
+			mounted = false;
+			clearTimeout(done);
+			lock(false);
+			backdrop.removeEventListener("close", handlers.close);
+			if (backdrop.open) backdrop.close();
+			backdrop.remove();
+		}
+	};
+}
+//#endregion
+export { announce, css, mount };

package/dist/index.d.mts

@@ -0,0 +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 };

package/dist/index.mjs

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

package/dist/react.d.mts

@@ -0,0 +1,6 @@
+
+import { r as FeedbackOptions } from "./widget-Ca1heF8n.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-CVnusNlY.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-BRZX6sWL.mjs

@@ -0,0 +1,83 @@
+
+import { t as checkReport } from "./report-BxonlIdW.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, image, seen, settings) {
+	const context = await host(() => settings.context?.()) ?? {};
+	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,
+		userAgent: navigator.userAgent,
+		language: navigator.language,
+		timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		context
+	};
+	return {
+		...checkReport(report),
+		image
+	};
+}
+/** 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();
+	body.append("report", JSON.stringify({
+		...report,
+		image: void 0
+	}));
+	if (report.image) {
+		const extension = report.image.type === "image/png" ? "png" : "webp";
+		body.append("image", report.image, `${report.id}.${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 };