visual-feedback 0.1.0 → 0.2.0

package/docs/recipes/supabase.md

@@ -1,10 +1,11 @@
 # Recipe: Supabase
 
-Each report becomes one row in a table and, when it has one, one image in the private Storage
-bucket `feedback`, named `<id>/image.png` or `<id>/image.webp`. The row has the Postgres recipe's columns
-(docs/recipes/postgres.md), except that `user_id` is the Supabase user's uuid and the image is in
-Storage instead of `bytea`. Row-level security lets
-only your app's admins read either, and nobody but your server can write.
+Each report becomes one row in a table and one image per screenshot in the private Storage bucket
+`feedback`, named `<id>/screenshot-<n>.png` or `.webp`, numbered from 0. The row has the columns of
+the Postgres recipe's `feedback_reports` (docs/recipes/postgres.md), except that `user_id` is the
+Supabase user's uuid. The images are in Storage instead of a second table, and each screenshot's
+`image` in `report` is its file name. Row-level security lets only your app's admins read either,
+and nobody but your server can write.
 
 `user_id` is the proof of who sent a report; `report.context` is not (docs/API.md). The images show
 the screen as the user saw it, with nothing masked (SPEC §7).
@@ -26,8 +27,7 @@ create table feedback_reports (
   id uuid primary key,
   user_id uuid not null references auth.users (id) on delete cascade,
   created_at timestamptz not null,
-  report jsonb not null,
-  image_type text
+  report jsonb not null
 );
 alter table feedback_reports enable row level security;
 grant select on feedback_reports to authenticated;
@@ -49,9 +49,9 @@ error, never a row, and a download from `feedback` is refused.
 
 An admin screen reads with the admin's own session, never the service role key:
 `from("feedback_reports").select()` for the rows, filtered and paged as the screen needs, and
-`storage.from("feedback").createSignedUrl("<id>/image.png", 60)` for an image, `image.webp` when
-`image_type` is `image/webp`. A signed URL works for anyone who holds it for those 60 seconds: show
-it, never share it.
+`storage.from("feedback").createSignedUrl("<id>/<image>", 60)` for a screenshot, where `<image>` is
+its `image` in `report`, such as `screenshot-0.png`. A signed URL works for anyone who holds it for
+those 60 seconds: show it, never share it.
 
 Set `SUPABASE_URL` and `SUPABASE_SERVICE_ROLE_KEY` on the server. The service role key bypasses
 row-level security: never send it to the browser.
@@ -87,28 +87,28 @@ export async function POST(request: Request): Promise<Response> {
   const user = await currentUser(request);
   if (!user) return new Response(null, { status: 401 });
   try {
-    const { report, image } = await parseFeedbackRequest(request);
+    const { report } = await parseFeedbackRequest(request);
     const db = supabase();
-    // The image first, so a row never lacks its image.
-    if (image) {
-      const name = `${report.id}/image.${image.type === "image/png" ? "png" : "webp"}`;
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
+    // The images first, so a row never lacks its images.
+    for (const [i, { image }] of report.screenshots.entries()) {
       const upload = await db.storage
         .from("feedback")
-        .upload(name, image, { contentType: image.type, upsert: false });
+        .upload(`${report.id}/${name(image, i)}`, image, { contentType: image.type, upsert: false });
       // A resend finds its image there (409); the id comes from the browser, so never replace it.
       const error = upload.error;
       const stored = error && "statusCode" in error && error.statusCode === "409";
       if (error && !stored) throw error;
     }
-    const { image: _, ...stored } = report;
     // A "Try again" sends the same id, so the row it already wrote stays as it is.
     const insert = await db.from("feedback_reports").upsert(
       {
         id: report.id,
         user_id: user,
         created_at: report.createdAt,
-        report: stored,
-        image_type: image?.type ?? null,
+        report: { ...report, screenshots },
       },
       { onConflict: "id", ignoreDuplicates: true },
     );

package/docs/recipes/vercel-blob.md

@@ -1,7 +1,8 @@
 # Recipe: Vercel Blob
 
 Each report becomes private blobs, named and shaped as in the S3 recipe (docs/recipes/s3.md):
-`feedback/<id>/report.json` and `feedback/<id>/image.png` or `image.webp`. People read them only
+`feedback/<id>/report.json` and `feedback/<id>/screenshot-<n>.png` or `.webp` for each screenshot.
+People read them only
 through your own route, behind your own admin check. `report.context` comes from the browser
 (docs/API.md), so an admin view must not show it as proof of who sent a report. The images show the
 screen as the user saw it, with nothing masked (SPEC §7).
@@ -16,9 +17,9 @@ on the server. Never send it to the browser. Check it: open
 `https://<store id>.private.blob.vercel-storage.com/feedback/<id>/report.json` without the token,
 where the store id is the part after `vercel_blob_rw_` in the token, and Vercel refuses it.
 
-The route takes images up to 3 MB, so the whole request stays under Vercel's 4.5 MB body limit. A
-larger one is refused with 413 and the widget shows its send error; a smaller `capture.maxWidth`
-(docs/API.md) keeps screenshots under it.
+Vercel refuses a request body over 4.5 MB, all screenshots of a report together, with 413, and the
+widget then shows its send error. The route takes images up to 3 MB each; a smaller
+`capture.maxWidth` (docs/API.md) keeps several screenshots under the limit.
 
 ## 2. The route
 
@@ -72,8 +73,8 @@ function blob() {
 
 export async function POST(request: Request): Promise<Response> {
   try {
-    // Vercel refuses a function request body over 4.5 MB; 3 MB plus the report stays under it.
-    const { report, image } = await parseFeedbackRequest(request, { maxImageBytes: 3_000_000 });
+    // Vercel refuses a request body over 4.5 MB, all screenshots together; this caps each image.
+    const { report } = await parseFeedbackRequest(request, { maxImageBytes: 3_000_000 });
     const store = blob();
     // The id comes from the browser: once a report is stored, a later request does not replace it.
     // Two requests with one id at the same moment still can; the check and the write are separate.
@@ -84,10 +85,14 @@ export async function POST(request: Request): Promise<Response> {
     if (stored.status !== 404) {
       throw new Error(`Vercel Blob answered ${stored.status} for report.json.`);
     }
-    const name = image ? `image.${image.type === "image/png" ? "png" : "webp"}` : null;
-    // The image first: a report.json then always has its image beside it.
-    if (image && name) await store.put(report.id, name, image, image.type);
-    const json = JSON.stringify({ ...report, image: name });
+    const name = (image: Blob, i: number) =>
+      `screenshot-${i}.${image.type === "image/png" ? "png" : "webp"}`;
+    const screenshots = report.screenshots.map((shot, i) => ({ ...shot, image: name(shot.image, i) }));
+    // The images first: a report.json then always has its images beside it.
+    for (const [i, { image }] of report.screenshots.entries()) {
+      await store.put(report.id, name(image, i), image, image.type);
+    }
+    const json = JSON.stringify({ ...report, screenshots });
     await store.put(report.id, "report.json", json, "application/json");
     return new Response(null, { status: 204 });
   } catch (error) {
@@ -98,14 +103,15 @@ export async function POST(request: Request): Promise<Response> {
   }
 }
 
-// GET /api/feedback?id=<report id>&file=report.json | image.png | image.webp
+// GET /api/feedback?id=<report id>&file=report.json | screenshot-<n>.png | screenshot-<n>.webp
 export async function GET(request: Request): Promise<Response> {
   if (!(await canRead(request))) return new Response(null, { status: 403 });
   const query = new URL(request.url).searchParams;
   const id = query.get("id") ?? "";
   const file = query.get("file") ?? "";
   // Only a report id and a known file name, so the read cannot leave feedback/<id>/.
-  if (!/^[0-9a-f-]{36}$/.test(id) || !["report.json", "image.png", "image.webp"].includes(file)) {
+  const known = file === "report.json" || /^screenshot-\d\.(png|webp)$/.test(file);
+  if (!/^[0-9a-f-]{36}$/.test(id) || !known) {
     return new Response(null, { status: 400 });
   }
   const object = await blob().read(id, file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A small button lets your users screenshot the page, mark it up and write a note. You receive one report and store it where you want.",
   "keywords": [
     "feedback",
@@ -60,10 +60,13 @@
     "test:pack": "playwright test -c tests/pack-smoke/playwright.config.ts",
     "size": "size-limit",
     "publint": "publint --strict",
-    "check": "npm run lint && npm run typecheck && npm run build && npm run test && npm run test:edge && npm run test:e2e && npm run test:react && npm run test:pack && npm run size && npm run publint",
+    "check": "npm run check:static && npm run check:browser",
+    "check:static": "npm run lint && npm run typecheck && npm run build && npm run test && npm run test:edge && npm run size && npm run publint",
+    "check:browser": "npm run test:e2e && npm run test:react && npm run test:pack",
     "prepack": "npm run --silent build -- --logLevel warn",
     "dev": "node tests/dev.mjs",
-    "demo": "node tests/demo.mjs"
+    "demo": "node tests/demo.mjs",
+    "release": "node tests/release.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.13.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 };