visual-feedback 0.1.0 → 0.2.0

package/dist/dialog-B57CJ4I_.mjs

@@ -0,0 +1,1374 @@
+
+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 distance([px, py], [ax, ay], [bx, by]) {
+	const dx = bx - ax;
+	const dy = by - ay;
+	const t = dx || dy ? ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy) : 0;
+	const s = Math.max(0, Math.min(1, t));
+	return Math.hypot(px - (ax + s * dx), py - (ay + s * dy));
+}
+function moved(mark, dx, dy) {
+	const by = ([x, y]) => [x + dx, y + dy];
+	if (mark.tool === "pen") return {
+		...mark,
+		points: mark.points.map(by)
+	};
+	if (mark.tool === "arrow") return {
+		...mark,
+		from: by(mark.from),
+		to: by(mark.to)
+	};
+	return {
+		...mark,
+		x: mark.x + dx,
+		y: mark.y + dy
+	};
+}
+function drawn(mark) {
+	if (mark.tool === "text") return mark.text.trim() !== "";
+	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];
+}
+/**
+* Douglas-Peucker: a slow drag records a point for each pixel moved. A point within a pixel of the
+* line its neighbours draw changes nothing a 4 px stroke shows, and only grows the report.
+*/
+function simplify(points, tolerance = 1) {
+	if (points.length < 3) return points;
+	const keep = new Uint8Array(points.length);
+	keep[0] = 1;
+	keep[points.length - 1] = 1;
+	const spans = [[0, points.length - 1]];
+	for (let span = spans.pop(); span; span = spans.pop()) {
+		const [from, to] = span;
+		const a = points[from];
+		const b = points[to];
+		let far = -1;
+		let most = tolerance;
+		for (let i = from + 1; i < to; i++) {
+			const off = distance(points[i], a, b);
+			if (off > most) {
+				most = off;
+				far = i;
+			}
+		}
+		if (far === -1) continue;
+		keep[far] = 1;
+		spans.push([from, far], [far, to]);
+	}
+	return points.filter((_, i) => keep[i]);
+}
+/** Draws on `canvas` in image pixels, and repaints it from a clean copy on every change. */
+function annotate(canvas, onChange, textLabel, kept = []) {
+	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 = [...kept];
+	const history = [];
+	let tool = "pen";
+	let selected = null;
+	let dragging = null;
+	let hovered = null;
+	let frame = null;
+	let current = null;
+	let editing = null;
+	const size = Math.max(16, Math.round(canvas.width / 60));
+	const outline = Math.max(3, size / 5);
+	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";
+		outlineSelection();
+		hover();
+		for (const mark of current ? [...marks, current.mark] : marks) {
+			if (mark.tool !== "text") {
+				stroke(target, mark);
+				continue;
+			}
+			target.save();
+			target.font = font();
+			target.textBaseline = "middle";
+			target.lineWidth = outline;
+			target.strokeStyle = "#fff";
+			const room = canvas.width - mark.x;
+			target.strokeText(mark.text, mark.x, mark.y, room);
+			target.fillStyle = getComputedStyle(canvas).color;
+			target.fillText(mark.text, mark.x, mark.y, room);
+			target.restore();
+		}
+	}
+	/** The box a mark covers in image pixels, its line and outline included. */
+	function bounds(mark) {
+		if (mark.tool === "box") {
+			const pad = target.lineWidth / 2;
+			return {
+				x: mark.x - pad,
+				y: mark.y - pad,
+				width: mark.width + 2 * pad,
+				height: mark.height + 2 * pad
+			};
+		}
+		if (mark.tool === "text") {
+			target.save();
+			target.font = font();
+			const width = target.measureText(mark.text).width;
+			target.restore();
+			const half = size / 2 + outline;
+			return {
+				x: mark.x - outline,
+				y: mark.y - half,
+				width: width + 2 * outline,
+				height: 2 * half
+			};
+		}
+		const points = mark.tool === "pen" ? mark.points : [mark.from, mark.to];
+		const pad = target.lineWidth * (mark.tool === "arrow" ? 4 : .5);
+		const xs = points.map(([x]) => x);
+		const ys = points.map(([, y]) => y);
+		const x = Math.min(...xs) - pad;
+		const y = Math.min(...ys) - pad;
+		return {
+			x,
+			y,
+			width: Math.max(...xs) + pad - x,
+			height: Math.max(...ys) + pad - y
+		};
+	}
+	/** The newest mark under a point, near its line, or inside a label. */
+	function hit(at) {
+		const near = Math.max(target.lineWidth * 2, 10 * canvas.width / canvas.clientWidth);
+		for (let index = marks.length - 1; index >= 0; index--) {
+			const mark = marks[index];
+			if (mark.tool === "text") {
+				const box = bounds(mark);
+				if (at[0] >= box.x && at[0] <= box.x + box.width && at[1] >= box.y && at[1] <= box.y + box.height) return index;
+				continue;
+			}
+			const corners = mark.tool === "box" ? [
+				[mark.x, mark.y],
+				[mark.x + mark.width, mark.y],
+				[mark.x + mark.width, mark.y + mark.height],
+				[mark.x, mark.y + mark.height],
+				[mark.x, mark.y]
+			] : mark.tool === "arrow" ? [mark.from, mark.to] : mark.points;
+			if ((corners.length > 1 ? corners.slice(1) : corners).some((to, i) => distance(at, corners[i], to) <= near)) return index;
+		}
+		return null;
+	}
+	/** The mark moved by up to dx and dy; it never goes further out, and is never pushed in. */
+	function within(mark, dx, dy) {
+		const box = bounds(mark);
+		const limit = (by, start, size, room) => Math.max(Math.ceil(Math.min(0, -start)), Math.min(Math.round(by), Math.floor(Math.max(0, room - start - size))));
+		const x = limit(dx, box.x, box.width, canvas.width);
+		const y = limit(dy, box.y, box.height, canvas.height);
+		return x || y ? moved(mark, x, y) : mark;
+	}
+	function outlineSelection() {
+		const mark = selected === null ? void 0 : marks[selected];
+		if (!mark) {
+			frame?.remove();
+			frame = null;
+			return;
+		}
+		if (!frame) {
+			frame = document.createElement("div");
+			frame.className = "selection";
+			frame.setAttribute("part", "selection");
+			canvas.after(frame);
+		}
+		const box = bounds(mark);
+		const scale = canvas.clientWidth / canvas.width;
+		const gap = 4;
+		frame.style.left = `${canvas.offsetLeft + canvas.clientLeft + box.x * scale - gap}px`;
+		frame.style.top = `${canvas.offsetTop + canvas.clientTop + box.y * scale - gap}px`;
+		frame.style.width = `${box.width * scale + 8}px`;
+		frame.style.height = `${box.height * scale + 8}px`;
+	}
+	function select(index) {
+		if (index === selected) return;
+		finishDrag();
+		selected = index;
+		paint();
+		onChange();
+	}
+	function hover() {
+		if (tool !== "select" || dragging) return;
+		canvas.style.cursor = hovered !== null && hit(hovered) !== null ? "grab" : "default";
+	}
+	function finishDrag() {
+		const before = dragging?.mark;
+		dragging = null;
+		if (before) hover();
+		if (!before || selected === null) return;
+		if (marks[selected] !== before) history.push({
+			kind: "move",
+			index: selected,
+			mark: before
+		});
+		onChange();
+	}
+	function nudge(dx, dy) {
+		if (selected === null) return;
+		finishDrag();
+		const before = marks[selected];
+		const after = within(before, dx, dy);
+		if (after === before) return;
+		marks[selected] = after;
+		history.push({
+			kind: "move",
+			index: selected,
+			mark: before
+		});
+		paint();
+		onChange();
+	}
+	function font() {
+		return `600 ${size}px ${getComputedStyle(canvas).fontFamily}`;
+	}
+	function write(keep) {
+		if (!editing) return;
+		const { input, at } = editing;
+		editing = null;
+		input.remove();
+		target.font = font();
+		const room = canvas.width - target.measureText(input.value).width - outline;
+		const x = Math.round(Math.max(outline, Math.min(at[0], room)));
+		const half = size / 2 + outline;
+		const mark = {
+			tool: "text",
+			x,
+			y: Math.round(Math.max(half, Math.min(at[1], canvas.height - half))),
+			text: input.value
+		};
+		if (!keep || !drawn(mark)) return;
+		marks.push(mark);
+		history.push({ kind: "add" });
+		paint();
+		onChange();
+	}
+	function place(at) {
+		const input = document.createElement("input");
+		input.className = "text-input";
+		input.setAttribute("part", "text-input");
+		input.setAttribute("aria-label", textLabel);
+		input.maxLength = 280;
+		const scale = canvas.clientWidth / canvas.width;
+		input.style.top = `${canvas.offsetTop + canvas.clientTop + at[1] * scale}px`;
+		input.style.fontSize = `${size * scale}px`;
+		input.addEventListener("keydown", (event) => {
+			if (event.key !== "Enter" && event.key !== "Escape") return;
+			if (event.isComposing || event.keyCode === 229) return;
+			event.preventDefault();
+			event.stopPropagation();
+			write(event.key === "Enter");
+		});
+		input.addEventListener("blur", () => write(true));
+		canvas.after(input);
+		const inset = input.clientLeft + Number.parseFloat(getComputedStyle(input).paddingLeft);
+		input.style.left = `${canvas.offsetLeft + canvas.clientLeft + at[0] * scale - inset}px`;
+		editing = {
+			input,
+			at
+		};
+		input.focus();
+	}
+	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();
+		const start = point(event);
+		if (tool === "select") {
+			canvas.focus({ preventScroll: true });
+			const index = hit(start);
+			select(index);
+			if (index === null) return;
+			canvas.setPointerCapture(event.pointerId);
+			dragging = {
+				id: event.pointerId,
+				start,
+				mark: marks[index]
+			};
+			canvas.style.cursor = "grabbing";
+			return;
+		}
+		if (tool === "text") {
+			write(true);
+			place(start);
+			return;
+		}
+		canvas.setPointerCapture(event.pointerId);
+		current = {
+			id: event.pointerId,
+			start,
+			mark: shape(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() {
+		write(true);
+		finishDrag();
+		select(null);
+		if (!current) return;
+		if (current.mark.tool === "pen") current.mark.points = simplify(current.mark.points);
+		if (drawn(current.mark)) {
+			marks.push(current.mark);
+			history.push({ kind: "add" });
+		}
+		current = null;
+		paint();
+		onChange();
+	}
+	canvas.addEventListener("pointermove", (event) => {
+		hovered = point(event);
+		hover();
+		if (dragging?.id === event.pointerId && selected !== null) {
+			if (event.buttons === 0) return finishDrag();
+			const [x, y] = point(event);
+			marks[selected] = within(dragging.mark, x - dragging.start[0], y - dragging.start[1]);
+			paint();
+			return;
+		}
+		if (current?.id !== event.pointerId) return;
+		if (event.buttons === 0) return end();
+		extend(event);
+		paint();
+	});
+	canvas.addEventListener("pointerup", (event) => {
+		if (dragging?.id === event.pointerId) return finishDrag();
+		if (current?.id !== event.pointerId) return;
+		extend(event);
+		end();
+	});
+	canvas.addEventListener("pointerleave", () => {
+		hovered = null;
+	});
+	for (const type of ["pointercancel", "lostpointercapture"]) canvas.addEventListener(type, (event) => {
+		if (dragging?.id === event.pointerId) finishDrag();
+		else if (current?.id === event.pointerId) end();
+	});
+	canvas.addEventListener("keydown", (event) => {
+		if (selected === null) return;
+		const step = Math.max(1, Math.round(canvas.width / canvas.clientWidth)) * (event.shiftKey ? 10 : 1);
+		const by = {
+			ArrowLeft: [-step, 0],
+			ArrowRight: [step, 0],
+			ArrowUp: [0, -step],
+			ArrowDown: [0, step]
+		}[event.key];
+		if (by) nudge(...by);
+		else if (event.key === "Delete" || event.key === "Backspace") annotator.remove();
+		else if (event.key === "Escape") select(null);
+		else return;
+		event.preventDefault();
+		event.stopPropagation();
+	});
+	const annotator = {
+		clean,
+		get tool() {
+			return tool;
+		},
+		set tool(next) {
+			tool = next;
+			if (next === "select") canvas.tabIndex = 0;
+			else canvas.removeAttribute("tabindex");
+			select(null);
+			if (next === "select") hover();
+			else canvas.style.cursor = "";
+		},
+		marks,
+		get canUndo() {
+			return history.length > 0;
+		},
+		get selected() {
+			return selected !== null;
+		},
+		end,
+		undo() {
+			finishDrag();
+			const step = history.pop();
+			if (!step) return;
+			if (step.kind === "add") marks.pop();
+			else if (step.kind === "move") marks[step.index] = step.mark;
+			else marks.splice(step.index, 0, step.mark);
+			selected = null;
+			paint();
+			onChange();
+		},
+		clear() {
+			finishDrag();
+			marks.length = 0;
+			history.length = 0;
+			selected = null;
+			paint();
+			onChange();
+		},
+		remove() {
+			finishDrag();
+			if (selected === null) return;
+			const [mark] = marks.splice(selected, 1);
+			if (mark) history.push({
+				kind: "remove",
+				index: selected,
+				mark
+			});
+			selected = null;
+			paint();
+			onChange();
+		}
+	};
+	if (marks.length) paint();
+	return annotator;
+}
+//#endregion
+//#region src/icon.ts
+const SVG = "http://www.w3.org/2000/svg";
+/** A line icon in a 24 by 24 box, hidden from screen readers. */
+function icon(d, part) {
+	const svg = document.createElementNS(SVG, "svg");
+	const path = document.createElementNS(SVG, "path");
+	const attributes = {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		"stroke-linejoin": "round",
+		part
+	};
+	for (const [name, value] of Object.entries(attributes)) svg.setAttribute(name, value);
+	path.setAttribute("d", d);
+	svg.append(path);
+	return svg;
+}
+//#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:12px}.dialog.wide{width:min(1100px,100% - 32px)}.header{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{margin:0}.minimise{margin-left:auto}.body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}.body>.stage:only-child{grid-column:1/-1}.stage{position:relative;display:grid;gap:8px;min-width:0}.image{display:block;max-width:100%;max-height:min(60vh,100vh - 23em);margin:0 auto;color:var(--_mark)}.toolbar+.stage>.image{touch-action:none}.selection{position:absolute;pointer-events:none;box-sizing:border-box}.text-input{position:absolute;transform:translateY(-50%);min-width:6em;margin:0;box-sizing:content-box}.toolbar{display:flex;flex-direction:column;gap:4px}.dialog svg,.draft svg{width:1.15em;height:1.15em;flex:none;stroke-linecap:round}.divider{display:block}.strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}.thumb{position:relative;display:flex}.thumb-pick{position:relative;display:block;margin:0;padding:0;line-height:0}.thumb-image{display:block;height:3em;width:auto}.thumb-number{position:absolute;left:4px;top:4px;line-height:1.2}.thumb-remove{position:absolute;top:-.5em;right:-.5em}.add,.capture-view{display:inline-flex;align-items:center;gap:6px}.composer{display:grid;gap:8px}.note{box-sizing:border-box;width:100%;min-height:64px;resize:vertical}.footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.composer-bar,.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.send{display:inline-flex;align-items:center;gap:6px}.split{position:relative;display:flex;margin-left:auto}.send-more{display:inline-flex;align-items:center}.menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:1;display:grid;min-width:max-content}.menu[hidden]{display:none}.save-pdf{display:inline-flex;align-items:center;gap:8px}.draft{position:fixed;z-index:var(--_z);box-sizing:border-box;max-width:calc(100% - 2 * var(--_off));display:flex;flex-wrap:wrap;align-items:center;gap:8px}.draft-thumbs{display:flex;gap:4px}.draft-thumbs .thumb-image{height:1.75em}.drafting>.trigger{display:none}.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,.draft{background:var(--_s);color:var(--_t);border:1px solid var(--_b);border-radius:var(--_r);box-shadow:var(--_sh);padding:14px}.draft{padding:8px}.title{margin-left:4px;font-size:1.1em;font-weight:600}.header button,.toolbar button,.thumb-remove{font:inherit;width:2.15em;height:2.15em;padding:0;display:grid;place-items:center;border:0;border-radius:calc(var(--_r) / 2);background:none;color:var(--_m);cursor:pointer}.header button:hover,.toolbar button:hover:not(:disabled){background:color-mix(in srgb,var(--_t) 8%,transparent);color:var(--_t)}.body{padding:12px;border-radius:calc(var(--_r) * .75);background:color-mix(in srgb,var(--_t) 5%,var(--_s))}.toolbar{padding:4px;border:1px solid var(--_b);border-radius:calc(var(--_r) * .75);background:var(--_s)}.toolbar [aria-pressed=true]{background:color-mix(in srgb,var(--_a) 16%,transparent);color:var(--_a)}.toolbar button:disabled{opacity:.35;cursor:default}.divider{width:20px;margin:4px auto;border-top:1px solid var(--_b)}.image{border-radius:calc(var(--_r) / 2);box-shadow:0 0 0 1px var(--_b),0 2px 8px rgb(0 0 0/10%)}.toolbar+.stage>.image{cursor:crosshair}.selection{border:2px dashed var(--_f);border-radius:4px}.text-input{font-family:inherit;font-weight:600;line-height:1.2;color:var(--_mark);background:color-mix(in srgb,var(--_s) 85%,transparent);border:1px dashed var(--_mark);border-radius:4px;padding:0 4px;outline:none}.thumb-pick{border:2px solid transparent;border-radius:calc(var(--_r) / 2.5);background:none;overflow:hidden;cursor:pointer}.thumb-pick[aria-current=true]{border-color:var(--_a)}.thumb-image{border-radius:calc(var(--_r) / 4);box-shadow:0 0 0 1px var(--_b)}.thumb-number{font-size:.75em;font-weight:600;padding:0 4px;border-radius:4px;background:var(--_s);color:var(--_t)}.thumb-remove{width:1.5em;height:1.5em;border:1px solid var(--_b);border-radius:50%;background:var(--_s)}.label{font-size:.9em;font-weight:600;color:var(--_m)}.composer{padding:8px;border:1px solid var(--_b);border-radius:var(--_r);background:var(--_s);transition:border-color .15s,box-shadow .15s}.composer:focus-within{border-color:var(--_f);box-shadow:0 0 0 3px color-mix(in srgb,var(--_f) 22%,transparent)}.note{font:inherit;color:inherit;background:none;border:0;border-radius:calc(var(--_r) / 2);padding:4px 6px}.note:focus-visible{outline:none}.note::placeholder{color:var(--_m)}.category{font:inherit;color:inherit;background:color-mix(in srgb,var(--_t) 5%,var(--_s));border:1px solid var(--_b);border-radius:calc(var(--_r) / 2);padding:6px 8px}.send,.actions button,.add,.draft button{font:inherit;font-weight:600;height:2.25em;padding:0 .9em;border:1px solid var(--_b);border-radius:calc(var(--_r) / 1.6);background:var(--_s);color:inherit;cursor:pointer}.add{border-style:dashed;color:var(--_m)}.send,.draft .capture-view{background:var(--_a);color:var(--_at);border-color:var(--_a)}.split .send{border-radius:calc(var(--_r) / 1.6) 0 0 calc(var(--_r) / 1.6)}.send-more{font:inherit;height:2.25em;padding:0 .55em;border:1px solid var(--_a);border-left-color:color-mix(in srgb,var(--_at) 40%,var(--_a));border-radius:0 calc(var(--_r) / 1.6) calc(var(--_r) / 1.6) 0;background:var(--_a);color:var(--_at);cursor:pointer}.send-more:disabled{opacity:.6;cursor:progress}.send:where([data-ink=dark]),.send-more:where([data-ink=dark]),.draft .capture-view:where([data-ink=dark]){color:#000}.menu{padding:4px;border:1px solid var(--_b);border-radius:calc(var(--_r) / 1.6);background:var(--_s);color:var(--_t);box-shadow:var(--_sh)}.save-pdf{font:inherit;padding:.5em .8em;border:0;border-radius:calc(var(--_r) / 2.5);background:none;color:inherit;cursor:pointer;white-space:nowrap}.save-pdf:hover,.save-pdf:focus-visible{background:color-mix(in srgb,var(--_t) 8%,transparent)}.draft button:disabled{opacity:.5;cursor:default}.draft-label{margin:0 4px;font-size:.9em;font-weight:600}[aria-disabled=true]{opacity:.6;cursor:progress}.note:disabled,.category:disabled{opacity:.6}.hint{margin:0 4px;font-size:.85em;color:var(--_m)}.error{margin:0 4px;font-weight:500}.status{margin:8px 4px}`;
+const ICONS = {
+	pen: "M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4zm9.5-13.5 4 4",
+	box: "M6.5 5h11A2.5 2.5 0 0 1 20 7.5v9a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5v-9A2.5 2.5 0 0 1 6.5 5z",
+	arrow: "M5 19 19 5M9 5h10v10",
+	text: "M5 7V5h14v2M12 5v14m-3 0h6",
+	select: "M6 3l12 7-5.5 1.5L10 17z",
+	remove: "M5 5h14v14H5zm4 4 6 6m0-6-6 6",
+	undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11",
+	clear: "M4 7h16m-10 4v6m4-6v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3",
+	cancel: "M6 6l12 12M18 6 6 18",
+	send: "M5 12h13m-6-7 7 7-7 7",
+	minimise: "M5 17h14",
+	add: "M12 5v14M5 12h14",
+	camera: "M4 8h3l2-3h6l2 3h3v11H4zm8 8.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z",
+	more: "m7 10 5 5 5-5",
+	pdf: "M7 3h7l5 5v13H7zM14 3v5h5M10 13h6m-6 4h6"
+};
+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",
+	text: "Text",
+	select: "Select",
+	remove: "Delete",
+	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",
+	escHint: "Esc keeps it as a draft",
+	minimise: "Keep as draft",
+	screenshot: "Screenshot",
+	addScreenshot: "Add screenshot",
+	removeScreenshot: "Remove screenshot",
+	draft: "Feedback draft",
+	captureView: "Capture this view",
+	reopen: "Open",
+	discard: "Discard",
+	discardConfirm: "Discard this feedback?",
+	keepEditing: "Keep editing",
+	moreSend: "More send options",
+	savePdf: "Save as PDF",
+	pdfError: "Couldn't save the PDF."
+};
+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;
+}
+/** A button that shows only its icon; the text is its accessible name and its tooltip. */
+function iconButton(name, text, d, onClick) {
+	const result = button(name, "", onClick);
+	result.setAttribute("aria-label", text);
+	result.title = text;
+	result.append(icon(d, "icon"));
+	return result;
+}
+function copy(small, image) {
+	let source = image;
+	while (source.width > small.width * 2) {
+		const half = document.createElement("canvas");
+		half.width = Math.ceil(source.width / 2);
+		half.height = Math.ceil(source.height / 2);
+		half.getContext("2d")?.drawImage(source, 0, 0, half.width, half.height);
+		source = half;
+	}
+	small.getContext("2d")?.drawImage(source, 0, 0, small.width, small.height);
+}
+/** A small copy of a screenshot, its marks included, for the strip and the draft bar. */
+function thumbnail(image) {
+	const small = element("canvas", "thumb-image", { "aria-hidden": "true" });
+	small.height = 96;
+	small.width = Math.max(1, Math.round(96 * image.width / Math.max(1, image.height)));
+	copy(small, image);
+	return small;
+}
+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;
+let writing = Promise.resolve();
+/** Settles once every kept-draft write queued so far has landed or failed. */
+function settled() {
+	return writing;
+}
+function mount(parent, handlers, settings = {}) {
+	const tools = settings.tools ?? [
+		"pen",
+		"box",
+		"arrow",
+		"text",
+		"select"
+	];
+	const choices = [...new Set(tools)].filter((tool) => [
+		"pen",
+		"box",
+		"arrow",
+		"text",
+		"select"
+	].includes(tool));
+	const drawing = choices.some((choice) => choice !== "select");
+	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;
+	const header = element("div", "header");
+	const cancel = iconButton("cancel", text.cancel, ICONS.cancel, () => lose() ? ask() : handlers.close());
+	const keep = iconButton("minimise", text.minimise, ICONS.minimise, () => minimise());
+	header.append(title, cancel);
+	backdrop.append(panel);
+	const taken = [];
+	let at = 0;
+	let tool;
+	let annotator;
+	let refresh = () => {};
+	let body;
+	let stage;
+	let strip;
+	let note;
+	let notice;
+	let bar;
+	let minimised = false;
+	let folding = false;
+	let locked = [];
+	let inert = [];
+	let primary;
+	let draft;
+	let composer;
+	let failure;
+	const root = () => parent.getRootNode();
+	const key = `visual-feedback:${root().host.localName}`;
+	const keeping = handlers.keeps;
+	const restored = /* @__PURE__ */ new WeakMap();
+	let kept;
+	let ended = 0;
+	let over = false;
+	let submitted = false;
+	let reviving = false;
+	let picker;
+	let asking;
+	function lose() {
+		if (over || primary?.getAttribute("aria-disabled") === "true") return false;
+		return Boolean(note?.value.trim() || picker?.selectedIndex || taken.length > 1 || taken.some((shot) => shot.annotator?.marks.length));
+	}
+	function ask() {
+		asking?.remove();
+		const back = () => {
+			asking?.remove();
+			cancel.focus();
+		};
+		const question = element("span", "confirm-text");
+		question.textContent = text.discardConfirm;
+		const stay = button("keep-editing", text.keepEditing, back);
+		asking = element("div", "actions confirm", {
+			role: "group",
+			"aria-label": text.discardConfirm
+		});
+		asking.append(question, button("discard", text.discard, handlers.close));
+		if (taken.length && !draft) asking.append(button("keep-draft", text.minimise, () => minimise()));
+		asking.append(stay);
+		asking.addEventListener("keydown", (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			back();
+		});
+		header.after(asking);
+		stay.focus();
+	}
+	function toolbar() {
+		if (!drawing) return [];
+		const toolbar = element("div", "toolbar");
+		const undo = iconButton("undo", text.undo, ICONS.undo, () => annotator?.undo());
+		const clear = iconButton("clear", text.clear, ICONS.clear, () => annotator?.clear());
+		const remove = iconButton("remove", text.remove, ICONS.remove, () => annotator?.remove());
+		const actions = choices.includes("select") ? [
+			remove,
+			undo,
+			clear
+		] : [undo, clear];
+		refresh = () => {
+			const off = /* @__PURE__ */ new Map([
+				[undo, !annotator?.canUndo],
+				[clear, !annotator?.marks.length],
+				[remove, !annotator?.selected]
+			]);
+			if (off.get(root().activeElement)) buttons.find((choice) => choice.getAttribute("aria-pressed") === "true")?.focus();
+			for (const [control, disabled] of off) control.disabled = disabled;
+		};
+		const pick = (next) => {
+			tool = next;
+			if (annotator) annotator.tool = next;
+			for (const [i, choice] of buttons.entries()) {
+				const active = choices[i] === next;
+				choice.setAttribute("aria-pressed", String(active));
+				choice.setAttribute("part", active ? "tool tool-active" : "tool");
+			}
+		};
+		const buttons = choices.map((choice) => iconButton("tool", text[choice], ICONS[choice], () => pick(choice)));
+		pick(choices.find((choice) => choice !== "select"));
+		toolbar.append(...buttons, element("span", "divider", { "aria-hidden": "true" }), ...actions);
+		locked.push(...buttons, ...actions);
+		return [toolbar];
+	}
+	let thumb;
+	function changed() {
+		refresh();
+		const shown = taken[at]?.image;
+		if (thumb && shown) copy(thumb, shown);
+	}
+	function add(image) {
+		image.className = "image";
+		image.setAttribute("part", "image");
+		image.removeAttribute("style");
+		const shot = {
+			image,
+			annotator: void 0,
+			seen: shots.get(image) ?? look(),
+			blob: void 0
+		};
+		taken.push(shot);
+		showShot(taken.length - 1);
+		if (drawing) {
+			shot.annotator = annotate(image, changed, text.text, restored.get(image));
+			annotator = shot.annotator;
+			if (tool) annotator.tool = tool;
+			changed();
+		}
+		const clean = shot.annotator?.clean ?? image;
+		shot.blob = keeping() ? import("./capture-CufRosj3.mjs").then((capture) => capture.encode(clean, { type: "image/png" })) : void 0;
+		shot.blob?.catch(() => {});
+	}
+	function showShot(index) {
+		const focused = strip?.contains(root().activeElement) ?? false;
+		annotator?.end();
+		stage?.querySelector(":scope > .image")?.remove();
+		at = index;
+		const shot = taken[at];
+		annotator = shot.annotator;
+		if (annotator && tool) annotator.tool = tool;
+		stage?.prepend(shot.image);
+		renderStrip();
+		refresh();
+		if (focused) strip?.querySelector("[aria-current=true]")?.focus();
+	}
+	function drop(index) {
+		if (taken.length < 2) return;
+		const focused = strip?.contains(root().activeElement) ?? false;
+		const [gone] = taken.splice(index, 1);
+		if (index === at) {
+			gone?.annotator?.end();
+			annotator = void 0;
+			showShot(Math.min(index, taken.length - 1));
+		} else {
+			if (index < at) at--;
+			renderStrip();
+		}
+		if (focused) strip?.querySelector("[aria-current=true]")?.focus();
+	}
+	function renderStrip() {
+		if (!strip) return;
+		const items = taken.map((shot, i) => {
+			const item = element("div", "thumb");
+			const name = `${text.screenshot} ${i + 1}`;
+			const pick = element("button", "thumb-pick", {
+				type: "button",
+				"aria-label": name,
+				title: name,
+				"aria-current": String(i === at)
+			});
+			const number = element("span", "thumb-number", { "aria-hidden": "true" });
+			number.textContent = String(i + 1);
+			const small = thumbnail(shot.image);
+			if (i === at) thumb = small;
+			pick.append(small, number);
+			pick.addEventListener("click", () => showShot(i));
+			item.append(pick);
+			if (taken.length > 1) {
+				const label = `${text.removeScreenshot} ${i + 1}`;
+				item.append(iconButton("thumb-remove", label, ICONS.cancel, () => drop(i)));
+			}
+			return item;
+		});
+		const more = button("add", text.addScreenshot, () => minimise());
+		more.prepend(icon(ICONS.add, "icon"));
+		strip.replaceChildren(...items, ...taken.length < 10 ? [more] : []);
+	}
+	function minimise(focus = true) {
+		if (minimised || !taken.length || draft) return;
+		annotator?.end();
+		asking?.remove();
+		minimised = true;
+		if (backdrop.open) {
+			folding = true;
+			backdrop.close();
+		}
+		backdrop.remove();
+		lockPage(false);
+		bar = draftBar();
+		parent.append(bar);
+		for (const accent of bar.querySelectorAll(".capture-view")) ink(accent);
+		if (focus) bar.querySelector(".capture-view:enabled, .reopen")?.focus();
+		store();
+	}
+	function discard() {
+		over = true;
+		ended++;
+		unkeep();
+	}
+	function unkeep() {
+		const id = kept;
+		kept = void 0;
+		try {
+			if (id && id === sessionStorage.getItem(key)) sessionStorage.removeItem(key);
+		} catch {}
+		if (id) writing = writing.then(() => import("./keep-BG5WxZPU.mjs").then(({ forget }) => forget(id).then(() => {}), () => {})).catch(() => {});
+	}
+	function store() {
+		if (!keeping() || over || !taken.length || taken.some((shot) => !shot.blob)) return false;
+		const turn = ended;
+		try {
+			const held = sessionStorage.getItem(key);
+			if (held && held !== kept) return false;
+			kept ??= [...crypto.getRandomValues(/* @__PURE__ */ new Uint32Array(2))].join("-");
+			sessionStorage.setItem(key, kept);
+		} catch {
+			return false;
+		}
+		const id = kept;
+		const shots = taken.map((shot) => ({
+			blob: shot.blob,
+			marks: [...shot.annotator?.marks ?? []],
+			seen: shot.seen
+		}));
+		const draft = {
+			note: note?.value ?? "",
+			category: picker?.value
+		};
+		writing = writing.then(async () => {
+			try {
+				const images = [];
+				for (const { blob, ...shot } of shots) {
+					if (!blob) throw new Error("not kept");
+					images.push({
+						...shot,
+						image: await blob
+					});
+				}
+				const { keep, forget } = await import("./keep-BG5WxZPU.mjs");
+				if (turn !== ended) return;
+				await keep(id, {
+					saved: Date.now(),
+					...draft,
+					shots: images
+				});
+				if (turn !== ended) await forget(id);
+			} catch {
+				if (turn === ended) {
+					ended++;
+					unkeep();
+				}
+			}
+		});
+		return true;
+	}
+	function draftBar() {
+		const result = element("div", "draft", {
+			role: "region",
+			"aria-label": text.draft
+		});
+		const [y, x] = (handlers.options().position ?? "bottom-right").split("-");
+		result.dataset.y = y;
+		result.dataset.x = x;
+		const label = element("span", "draft-label");
+		label.textContent = `${text.draft} · ${taken.length}`;
+		const thumbs = element("span", "draft-thumbs", { "aria-hidden": "true" });
+		thumbs.append(...taken.map((shot) => thumbnail(shot.image)));
+		const again = button("capture-view", text.captureView, handlers.retry);
+		again.prepend(icon(ICONS.camera, "icon"));
+		again.disabled = taken.length >= 10;
+		result.append(label, thumbs, again, button("reopen", text.reopen, reopen), button("discard", text.discard, handlers.close));
+		return result;
+	}
+	function reopen() {
+		if (!minimised) return;
+		minimised = false;
+		bar?.remove();
+		bar = void 0;
+		parent.append(backdrop);
+		backdrop.showModal();
+		lockPage(true);
+		renderStrip();
+		note?.focus();
+	}
+	let seen;
+	let report;
+	let mounted = true;
+	async function deliver(draft) {
+		sending();
+		const options = handlers.options();
+		let module;
+		try {
+			module = await import("./report-CnspEsHf.mjs");
+			if (!report) {
+				const capture = await import("./capture-CufRosj3.mjs");
+				const shots = [];
+				for (const shot of draft.shots) shots.push({
+					...shot,
+					image: await capture.encode(shot.image, options.capture)
+				});
+				const built = await module.build(draft, shots, draft.shots[0]?.seen ?? seen, options);
+				if (mounted) report = built;
+			}
+			if (!mounted || !report) return;
+			submitted = true;
+			handlers.emit("submit", report);
+			await module.deliver(report, options);
+			discard();
+			handlers.emit("sent", report);
+			if (mounted) sent();
+		} catch (error) {
+			handlers.emit("error", error);
+			if (mounted) failed(module?.shown(error));
+		}
+	}
+	let saving = false;
+	let pdfError;
+	async function savePdf(note, category) {
+		if (saving) return;
+		saving = true;
+		pdfError?.remove();
+		annotator?.end();
+		const font = getComputedStyle(panel).fontFamily;
+		try {
+			const pages = taken.map(({ image }) => {
+				const page = document.createElement("canvas");
+				page.width = image.width;
+				page.height = image.height;
+				const context = page.getContext("2d");
+				if (!context) throw new Error("no 2d context");
+				context.drawImage(image, 0, 0);
+				return page;
+			});
+			const capture = await import("./capture-CufRosj3.mjs");
+			const writer = await import("./pdf-Gj-ZO9W5.mjs");
+			const [first, ...rest] = pages;
+			const front = writer.cover(note, category, first, font);
+			if (first) first.width = 0;
+			const file = await writer.pdf([front, ...rest], async (page, options) => {
+				try {
+					return await capture.encode(page, options);
+				} finally {
+					page.width = 0;
+				}
+			});
+			if (!mounted) return;
+			const link = document.createElement("a");
+			link.href = URL.createObjectURL(file);
+			const now = /* @__PURE__ */ new Date();
+			link.download = `feedback-${[
+				now.getFullYear(),
+				now.getMonth() + 1,
+				now.getDate()
+			].map((part) => String(part).padStart(2, "0")).join("-")}.pdf`;
+			link.hidden = true;
+			panel.append(link);
+			link.click();
+			link.remove();
+			setTimeout(() => URL.revokeObjectURL(link.href), 1e4);
+			handlers.emit("saved");
+		} catch {
+			if (!mounted || !composer) return;
+			pdfError = element("p", "error", { role: "alert" });
+			pdfError.textContent = text.pdfError;
+			composer.after(pdfError);
+		} finally {
+			saving = false;
+		}
+	}
+	function show(view) {
+		locked = [];
+		inert = [];
+		primary = void 0;
+		draft = void 0;
+		failure = void 0;
+		composer = void 0;
+		header.replaceChildren(title, cancel);
+		if (view.error) {
+			const message = element("p", "error", { role: "alert" });
+			message.textContent = text.captureError;
+			const retry = button("retry", text.retry, handlers.retry);
+			const actions = element("div", "actions");
+			actions.append(button("send-without", text.sendWithout, () => show({ image: null })), retry);
+			panel.classList.remove("wide");
+			panel.replaceChildren(header, message, actions);
+			retry.focus();
+			return;
+		}
+		const label = element("label", "label", { for: "vf-note" });
+		label.textContent = text.noteLabel;
+		const field = element("textarea", "note", {
+			id: "vf-note",
+			placeholder: text.notePlaceholder,
+			maxlength: String(NOTE_LIMIT)
+		});
+		note = field;
+		const required = element("p", "error", {
+			id: "vf-note-error",
+			role: "alert"
+		});
+		required.textContent = text.noteRequired;
+		field.addEventListener("input", () => {
+			if (!field.value.trim()) return;
+			field.removeAttribute("aria-invalid");
+			field.removeAttribute("aria-describedby");
+			required.remove();
+		});
+		const fields = [];
+		let category;
+		picker = void 0;
+		if (settings.categories?.length) {
+			const name = element("label", "label", { for: "vf-category" });
+			name.textContent = text.categoryLabel;
+			category = element("select", "category", { id: "vf-category" });
+			picker = 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;
+		body = element("div", "body");
+		if (image) {
+			stage = element("div", "stage");
+			strip = element("div", "strip");
+			stage.append(strip);
+			body.append(...toolbar(), stage);
+			header.replaceChildren(title, keep, cancel);
+			locked.push(keep);
+			inert.push(stage);
+		}
+		const send = button("send", text.send, () => {
+			menu(false);
+			if (draft) {
+				if (send.getAttribute("aria-disabled") !== "true") deliver(draft);
+				return;
+			}
+			if (settings.requireNote !== false && !field.value.trim()) {
+				field.setAttribute("aria-invalid", "true");
+				field.setAttribute("aria-describedby", required.id);
+				box.after(required);
+				field.focus();
+				return;
+			}
+			annotator?.end();
+			draft = {
+				note: field.value,
+				category: category?.value,
+				shots: taken.map((shot) => ({
+					image: shot.image,
+					marks: [...shot.annotator?.marks ?? []],
+					seen: shot.seen
+				}))
+			};
+			deliver(draft);
+		});
+		send.append(icon(ICONS.send, "icon"));
+		primary = send;
+		locked.push(field, ...category ? [category] : []);
+		const box = element("div", "composer");
+		box.append(field);
+		if (fields.length) {
+			const bar = element("div", "composer-bar");
+			bar.append(...fields);
+			box.append(bar);
+		}
+		composer = box;
+		const footer = element("div", "footer");
+		if (image) {
+			const hint = element("p", "hint");
+			hint.textContent = text.escHint;
+			footer.append(hint);
+		}
+		const more = iconButton("send-more", text.moreSend, ICONS.more, () => menu(list.hidden === true));
+		more.setAttribute("aria-haspopup", "menu");
+		more.setAttribute("aria-expanded", "false");
+		const list = element("div", "menu", {
+			role: "menu",
+			"aria-label": text.moreSend
+		});
+		list.hidden = true;
+		const save = button("save-pdf", text.savePdf, () => {
+			menu(false);
+			more.focus();
+			savePdf(field.value, category?.selectedOptions[0]?.textContent ?? void 0);
+		});
+		save.setAttribute("role", "menuitem");
+		save.prepend(icon(ICONS.pdf, "icon"));
+		list.append(save);
+		function menu(open) {
+			list.hidden = !open;
+			more.setAttribute("aria-expanded", String(open));
+			if (open) save.focus();
+		}
+		list.addEventListener("keydown", (event) => {
+			if (event.key !== "Tab") return;
+			menu(false);
+			more.focus();
+		});
+		list.addEventListener("mousedown", (event) => event.preventDefault());
+		const split = element("div", "split");
+		split.addEventListener("keydown", (event) => {
+			if (event.key !== "Escape" || list.hidden) return;
+			event.preventDefault();
+			event.stopPropagation();
+			menu(false);
+			more.focus();
+		});
+		split.addEventListener("focusout", (event) => {
+			if (!split.contains(event.relatedTarget)) menu(false);
+		});
+		split.append(send, more, list);
+		locked.push(more);
+		footer.append(split);
+		panel.classList.toggle("wide", Boolean(image));
+		panel.replaceChildren(header, ...image ? [body] : [], label, box, footer);
+		if (image) add(image);
+		ink(send);
+		ink(more);
+		field.focus();
+	}
+	function sending() {
+		if (!primary) return;
+		panel.querySelector(".hint")?.remove();
+		pdfError?.remove();
+		asking?.remove();
+		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");
+		header.replaceChildren(title, cancel);
+		panel.replaceChildren(header, status);
+		status.focus();
+		done = setTimeout(handlers.close, 3e3);
+	}
+	function failed(message = text.error) {
+		if (!primary || !composer) return;
+		failure = element("p", "error", { role: "alert" });
+		failure.textContent = message;
+		composer.after(failure);
+		primary.removeAttribute("aria-disabled");
+		primary.textContent = text.retry;
+		primary.setAttribute("part", "retry");
+		primary.focus();
+	}
+	const onEscape = () => {
+		if (taken.length && !draft) minimise();
+		else if (lose()) {
+			if (!backdrop.open) backdrop.showModal();
+			ask();
+		} else handlers.close();
+	};
+	backdrop.addEventListener("cancel", (event) => {
+		event.preventDefault();
+		onEscape();
+	});
+	const closed = () => {
+		if (folding) folding = false;
+		else onEscape();
+	};
+	backdrop.addEventListener("close", closed);
+	backdrop.addEventListener("keydown", (event) => {
+		if (event.key !== "Tab") return;
+		event.preventDefault();
+		const items = [...panel.querySelectorAll(FOCUSABLE)].filter((item) => !item.matches(":disabled") && !item.closest("[inert]") && item.getClientRects().length > 0);
+		const active = root().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);
+	parent.classList.add("drafting");
+	if (keeping()) import("./keep-BG5WxZPU.mjs").then(({ sweep }) => sweep()).catch(() => {});
+	let done;
+	let scrollLocked = false;
+	function lockPage(on) {
+		if (on !== scrollLocked) (on ? lockScroll : unlockScroll)();
+		scrollLocked = on;
+	}
+	return {
+		show,
+		capture(image) {
+			if (taken.length) {
+				reopen();
+				notice?.remove();
+				if (image) add(image);
+				else {
+					notice = element("p", "error", { role: "alert" });
+					notice.textContent = text.captureError;
+					body?.after(notice);
+				}
+				return;
+			}
+			backdrop.showModal();
+			seen = (image && shots.get(image)) ?? look();
+			show(image ? { image } : { error: true });
+			lockPage(true);
+		},
+		reopen,
+		async revive() {
+			reviving = true;
+			try {
+				await writing;
+				const id = sessionStorage.getItem(key);
+				const { read, forget, KEPT_FOR } = await import("./keep-BG5WxZPU.mjs");
+				const draft = id ? await read(id) : void 0;
+				if (!id || !draft?.shots.length || draft.saved < Date.now() - KEPT_FOR) {
+					sessionStorage.removeItem(key);
+					if (id) await forget(id);
+					return false;
+				}
+				const images = [];
+				for (const shot of draft.shots) {
+					const bitmap = await createImageBitmap(shot.image);
+					const image = document.createElement("canvas");
+					image.width = bitmap.width;
+					image.height = bitmap.height;
+					image.getContext("2d")?.drawImage(bitmap, 0, 0);
+					shots.set(image, shot.seen);
+					restored.set(image, shot.marks);
+					images.push(image);
+				}
+				if (!mounted) return false;
+				kept = id;
+				seen = draft.shots[0]?.seen ?? look();
+				show({ image: images[0] ?? null });
+				for (const image of images.slice(1)) add(image);
+				showShot(0);
+				if (note) note.value = draft.note;
+				if ([...picker?.options ?? []].some((option) => option.value === draft.category)) picker.value = draft.category;
+				minimise(false);
+				return true;
+			} catch {
+				return false;
+			} finally {
+				reviving = false;
+			}
+		},
+		lock: lockPage,
+		unmount(keep) {
+			if (!mounted) return false;
+			if (keep) annotator?.end();
+			const stays = reviving || !!keep && !submitted && store();
+			mounted = false;
+			clearTimeout(done);
+			lockPage(false);
+			backdrop.removeEventListener("close", closed);
+			if (backdrop.open) backdrop.close();
+			backdrop.remove();
+			bar?.remove();
+			parent.classList.remove("drafting");
+			if (reviving) ended++;
+			else if (!stays) discard();
+			return stays;
+		}
+	};
+}
+//#endregion
+export { announce, css, mount, settled };