visual-feedback 0.1.0 → 0.3.0

package/dist/dialog-BTY6FKLo.mjs

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