visual-feedback 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.4.1 (2026-10-14)
+
+- The dialog fits the window, 16px from its edges, with nothing to scroll: on a large screen the
+  image grows to the height left, and the dialog is as wide as the image needs. On a short
+  screen the tool rail has two columns, and a phone in landscape gets the note beside the image
+  (SPEC §2).
+- While a send is under way, Cancel, Keep as draft and Esc do nothing. A send that takes over 30
+  seconds fails with the new `timeout` text, and `error` fires with a `TimeoutError`; an
+  `endpoint` request is aborted.
+- The sent confirmation shows for half a second, or until a click, in place of 3 seconds.
+- Clear asks first (new `clearConfirm` text), and Undo brings the cleared marks back.
+- Delete sits under Select in the tool rail. New parts: `confirm-clear` and `side`.
+
 ## 0.4.0 (2026-10-13)
 
 - Breaking: the trigger is a tab by default, in the corner `position` names, with a flag icon. It

package/dist/{dialog-W6m1knfu.mjs → dialog-BL7k2Jir.mjs}

@@ -450,6 +450,7 @@ function annotate(canvas, onChange, textLabel, kept = []) {
 			const step = history.pop();
 			if (!step) return;
 			if (step.kind === "add") marks.pop();
+			else if (step.kind === "clear") marks.push(...step.marks);
 			else if (step.kind === "move") marks[step.index] = step.mark;
 			else marks.splice(step.index, 0, step.mark);
 			selected = null;
@@ -458,8 +459,10 @@ function annotate(canvas, onChange, textLabel, kept = []) {
 		},
 		clear() {
 			finishDrag();
-			marks.length = 0;
-			history.length = 0;
+			if (marks.length) history.push({
+				kind: "clear",
+				marks: marks.splice(0)
+			});
 			selected = null;
 			paint();
 			onChange();
@@ -504,8 +507,8 @@ function icon(d, part) {
 }
 //#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 - 24.5em);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 LAYOUT = `.backdrop{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));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%);display:grid;gap:12px}.dialog.wide{width:fit-content;min-width:min(560px,100%);max-width:100%}.side{display:contents}.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;width:auto;height:var(--_ih,auto);max-width:100%;max-height:var(--_ih,max(4em,min(60vh,100vh - 24.5em)));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;white-space:nowrap}.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}@media (max-height:760px){.toolbar{display:grid;grid-template-columns:repeat(2,auto);align-content:start}.divider{grid-column:1/-1}}@media (max-height:700px){.dialog{position:relative}.dialog>.confirm{position:absolute;z-index:2;top:0;left:0;right:0}}@media (orientation:landscape) and (max-height:500px){.dialog.wide{width:100%;grid-template-columns:minmax(0,1fr) 12em;grid-template-rows:auto minmax(0,1fr) auto;row-gap:0}.wide>.header{grid-area:1/1/2/-1;margin-bottom:8px}.wide>.body{grid-area:2/1}.wide>.error{grid-area:3/1;margin-top:8px}.wide>.side{grid-area:2/2/4/3;display:flex;flex-direction:column;gap:12px;min-height:0}.wide>.side>.composer{flex:1;grid-template-rows:minmax(0,1fr)}.wide .note{height:100%;resize:none}.wide .footer{flex-wrap:wrap}.wide .hint{flex:1 1 100%}}`;
+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}@media (max-height:700px){.dialog>.confirm{min-height:2.15em;padding:14px;border-bottom:1px solid var(--_b);border-radius:calc(var(--_r) - 1px) calc(var(--_r) - 1px) 0 0;background:var(--_s);box-shadow:var(--_sh)}}`;
 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",
@@ -540,11 +543,13 @@ const ENGLISH = {
 	remove: "Delete",
 	undo: "Undo",
 	clear: "Clear",
+	clearConfirm: "Clear all marks on this screenshot?",
 	cancel: "Cancel",
 	send: "Send",
 	sending: "Sending…",
 	sent: "Thanks, it's sent.",
 	error: "It didn't send. Your note is kept.",
+	timeout: "It didn't send in 30 seconds. Check your internet connection, then try again.",
 	retry: "Try again",
 	escHint: "Esc keeps it as a draft",
 	minimise: "Keep as draft",
@@ -695,7 +700,7 @@ function mount(parent, handlers, settings = {}) {
 	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 cancel = iconButton("cancel", text.cancel, ICONS.cancel, () => lose() ? askDiscard() : handlers.close());
 	const keep = iconButton("minimise", text.minimise, ICONS.minimise, () => minimise());
 	header.append(title, cancel);
 	backdrop.append(panel);
@@ -729,26 +734,25 @@ function mount(parent, handlers, settings = {}) {
 	let reviving = false;
 	let picker;
 	let asking;
+	const busy = () => !over && primary?.getAttribute("aria-disabled") === "true";
 	function lose() {
-		if (over || primary?.getAttribute("aria-disabled") === "true") return false;
+		if (over || busy()) return false;
 		return Boolean(note?.value.trim() || picker?.selectedIndex || taken.length > 1 || taken.some((shot) => shot.annotator?.marks.length));
 	}
-	function ask() {
+	function ask(prompt, choices, from) {
 		asking?.remove();
 		const back = () => {
 			asking?.remove();
-			cancel.focus();
+			from.focus();
 		};
 		const question = element("span", "confirm-text");
-		question.textContent = text.discardConfirm;
+		question.textContent = prompt;
 		const stay = button("keep-editing", text.keepEditing, back);
 		asking = element("div", "actions confirm", {
 			role: "group",
-			"aria-label": text.discardConfirm
+			"aria-label": prompt
 		});
-		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.append(question, ...choices, stay);
 		asking.addEventListener("keydown", (event) => {
 			if (event.key !== "Escape") return;
 			event.preventDefault();
@@ -758,17 +762,25 @@ function mount(parent, handlers, settings = {}) {
 		header.after(asking);
 		stay.focus();
 	}
+	function askDiscard() {
+		const discard = button("discard", text.discard, handlers.close);
+		const fold = taken.length && !draft ? [button("keep-draft", text.minimise, () => minimise())] : [];
+		ask(text.discardConfirm, [discard, ...fold], cancel);
+	}
 	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 clear = iconButton("clear", text.clear, ICONS.clear, () => {
+			const asked = annotator;
+			const yes = button("confirm-clear", text.clear, () => {
+				asking?.remove();
+				asked?.clear();
+				(undo.disabled ? buttons.find((b) => b.getAttribute("aria-pressed") === "true") : undo)?.focus();
+			});
+			ask(text.clearConfirm, [yes], 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],
@@ -789,8 +801,10 @@ function mount(parent, handlers, settings = {}) {
 		};
 		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);
+		const tools = buttons.flatMap((choice, i) => choices[i] === "select" ? [choice, remove] : [choice]);
+		const divider = element("span", "divider", { "aria-hidden": "true" });
+		toolbar.append(...tools, divider, undo, clear);
+		locked.push(...tools, undo, clear);
 		return [toolbar];
 	}
 	let thumb;
@@ -832,6 +846,7 @@ function mount(parent, handlers, settings = {}) {
 		stage?.prepend(shot.image);
 		renderStrip();
 		refresh();
+		measure();
 		if (focused) strip?.querySelector("[aria-current=true]")?.focus();
 	}
 	function drop(index) {
@@ -983,6 +998,7 @@ function mount(parent, handlers, settings = {}) {
 		lockPage(true);
 		renderStrip();
 		reink();
+		measure();
 		note?.focus();
 	}
 	function reink() {
@@ -996,7 +1012,7 @@ function mount(parent, handlers, settings = {}) {
 		const options = handlers.options();
 		let module;
 		try {
-			module = await import("./report-CnspEsHf.mjs");
+			module = await import("./report-BJADH9_W.mjs");
 			if (!report) {
 				const capture = await import("./capture-CufRosj3.mjs");
 				const shots = [];
@@ -1016,7 +1032,7 @@ function mount(parent, handlers, settings = {}) {
 			if (mounted) sent();
 		} catch (error) {
 			handlers.emit("error", error);
-			if (mounted) failed(module?.shown(error));
+			if (mounted) failed(module?.late(error) ? text.timeout : module?.shown(error));
 		}
 	}
 	let saving = false;
@@ -1132,6 +1148,7 @@ function mount(parent, handlers, settings = {}) {
 		body = element("div", "body");
 		if (image) {
 			stage = element("div", "stage");
+			fit.observe(stage);
 			strip = element("div", "strip");
 			stage.append(strip);
 			body.append(...toolbar(), stage);
@@ -1223,7 +1240,9 @@ function mount(parent, handlers, settings = {}) {
 		locked.push(more);
 		footer.append(split);
 		panel.classList.toggle("wide", Boolean(image));
-		panel.replaceChildren(header, ...image ? [body] : [], label, box, footer);
+		const side = element("div", "side");
+		side.append(label, box, footer);
+		panel.replaceChildren(header, ...image ? [body] : [], side);
 		if (image) add(image);
 		ink(send);
 		ink(more);
@@ -1236,6 +1255,7 @@ function mount(parent, handlers, settings = {}) {
 		asking?.remove();
 		for (const control of locked) control.disabled = true;
 		for (const item of inert) item.inert = true;
+		cancel.disabled = true;
 		failure?.remove();
 		primary.setAttribute("aria-disabled", "true");
 		primary.textContent = text.sending;
@@ -1250,25 +1270,33 @@ function mount(parent, handlers, settings = {}) {
 		status.textContent = text.sent;
 		panel.classList.remove("wide");
 		header.replaceChildren(title, cancel);
+		cancel.disabled = false;
 		panel.replaceChildren(header, status);
 		status.focus();
-		done = setTimeout(handlers.close, 3e3);
+		done = setTimeout(handlers.close, 500);
+		const shown = performance.now();
+		backdrop.addEventListener("click", (event) => {
+			if (event.timeStamp >= shown) handlers.close();
+		});
 	}
 	function failed(message = text.error) {
 		if (!primary || !composer) return;
 		failure = element("p", "error", { role: "alert" });
 		failure.textContent = message;
 		composer.after(failure);
+		cancel.disabled = false;
 		primary.removeAttribute("aria-disabled");
 		primary.textContent = text.retry;
 		primary.setAttribute("part", "retry");
 		primary.focus();
 	}
 	const onEscape = () => {
-		if (taken.length && !draft) minimise();
+		if (busy()) {
+			if (!backdrop.open) backdrop.showModal();
+		} else if (taken.length && !draft) minimise();
 		else if (lose()) {
 			if (!backdrop.open) backdrop.showModal();
-			ask();
+			askDiscard();
 		} else handlers.close();
 	};
 	backdrop.addEventListener("cancel", (event) => {
@@ -1294,6 +1322,29 @@ function mount(parent, handlers, settings = {}) {
 	parent.classList.add("drafting");
 	if (keeping()) import("./keep-BG5WxZPU.mjs").then(({ sweep }) => sweep()).catch(() => {});
 	let done;
+	let fitting = 0;
+	const fit = new ResizeObserver(() => {
+		cancelAnimationFrame(fitting);
+		fitting = requestAnimationFrame(measure);
+	});
+	function measure() {
+		const image = stage?.querySelector(":scope > .image");
+		const shown = image?.getBoundingClientRect();
+		const outer = panel.getBoundingClientRect();
+		if (!image || !shown || !outer.width || !stage || !panel.classList.contains("wide")) return;
+		const rail = panel.querySelector(".toolbar")?.getBoundingClientRect().height ?? 0;
+		const column = stage.getBoundingClientRect();
+		const below = Math.max(0, rail - column.height);
+		const room = getComputedStyle(backdrop);
+		const across = backdrop.clientWidth - Number.parseFloat(room.paddingLeft) - Number.parseFloat(room.paddingRight);
+		const high = backdrop.clientHeight - Number.parseFloat(room.paddingTop) - Number.parseFloat(room.paddingBottom) - (outer.height - shown.height - below);
+		const wide = across - (outer.width - column.width);
+		const floor = 4 * Number.parseFloat(getComputedStyle(image).fontSize);
+		const height = Math.min(wide * image.height / image.width, Math.max(floor, high));
+		panel.style.setProperty("--_ih", `${Math.floor(height)}px`);
+	}
+	fit.observe(panel);
+	fit.observe(backdrop);
 	let scrollLocked = false;
 	function lockPage(on) {
 		if (on !== scrollLocked) (on ? lockScroll : unlockScroll)();
@@ -1366,6 +1417,8 @@ function mount(parent, handlers, settings = {}) {
 			const stays = reviving || !!keep && !submitted && store();
 			mounted = false;
 			clearTimeout(done);
+			fit.disconnect();
+			cancelAnimationFrame(fitting);
 			lockPage(false);
 			backdrop.removeEventListener("close", closed);
 			if (backdrop.open) backdrop.close();

package/dist/index.d.mts

@@ -1,4 +1,4 @@
 
-import { a as FeedbackWidget, c as CaptureOptions, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as discardDraft, t as FeedbackEvent } from "./widget-Cxcm3h1Z.mjs";
+import { a as FeedbackWidget, c as CaptureOptions, i as FeedbackStrings, n as FeedbackEvents, o as createFeedback, r as FeedbackOptions, s as discardDraft, t as FeedbackEvent } from "./widget-CMjTbhGw.mjs";
 import { n as Mark, r as Screenshot, t as FeedbackReport } from "./report-CaJegYyg.mjs";
 export { type CaptureOptions, type FeedbackEvent, type FeedbackEvents, type FeedbackOptions, type FeedbackReport, type FeedbackStrings, type FeedbackWidget, type Mark, type Screenshot, createFeedback, discardDraft };

package/dist/index.mjs

@@ -1,2 +1,2 @@
 
-export { t as createFeedback, n as discardDraft } from "./widget-BoohIxqp.mjs";
+export { t as createFeedback, n as discardDraft } from "./widget-JBN1fbyx.mjs";

package/dist/react.d.mts

@@ -1,5 +1,5 @@
 
-import { r as FeedbackOptions } from "./widget-Cxcm3h1Z.mjs";
+import { r as FeedbackOptions } from "./widget-CMjTbhGw.mjs";
 //#region src/react/index.d.ts
 export type FeedbackProps = FeedbackOptions;
 export declare function Feedback(props: FeedbackProps): null;

package/dist/react.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { t as createFeedback } from "./widget-BoohIxqp.mjs";
+import { t as createFeedback } from "./widget-JBN1fbyx.mjs";
 import { useEffect, useRef } from "react";
 //#region src/react/index.ts
 function Feedback(props) {

package/dist/{report-CnspEsHf.mjs → report-BJADH9_W.mjs}

@@ -66,8 +66,29 @@ async function build(draft, shots, seen, settings) {
 		screenshots
 	};
 }
+/** How long a send may take before it fails as a TimeoutError. */
+const SEND_TIMEOUT = 3e4;
+const limits = /* @__PURE__ */ new WeakSet();
+/** Whether the send failed on the widget's own 30 second limit. */
+function late(error) {
+	return typeof error === "object" && error !== null && limits.has(error);
+}
 /** Sends with onSubmit, or else POSTs what parseFeedbackRequest reads to the endpoint. */
 async function deliver(report, settings) {
+	const stop = new AbortController();
+	const timer = setTimeout(() => {
+		const error = new DOMException("The send took over 30 seconds.", "TimeoutError");
+		limits.add(error);
+		stop.abort(error);
+	}, SEND_TIMEOUT);
+	const late = new Promise((_, reject) => stop.signal.addEventListener("abort", () => reject(stop.signal.reason), { once: true }));
+	try {
+		return await Promise.race([send(report, settings, stop.signal), late]);
+	} finally {
+		clearTimeout(timer);
+	}
+}
+async function send(report, settings, signal) {
 	const { onSubmit, endpoint } = settings;
 	if (onSubmit) return host(() => onSubmit(report));
 	if (!endpoint) throw new Error("Neither onSubmit nor endpoint is set.");
@@ -87,9 +108,10 @@ async function deliver(report, settings) {
 		method: "POST",
 		body,
 		headers,
-		redirect: "manual"
+		redirect: "manual",
+		signal
 	});
 	if (!response.ok) throw new Error(`The endpoint answered ${response.status}.`);
 }
 //#endregion
-export { build, deliver, shown };
+export { build, deliver, late, shown };

package/dist/{widget-Cxcm3h1Z.d.mts → widget-CMjTbhGw.d.mts}

@@ -23,7 +23,7 @@ type FeedbackEvents = {
 };
 type FeedbackEvent = keyof FeedbackEvents;
 /** The texts the widget shows, by SPEC §12 key. */
-type FeedbackStrings = Record<"trigger" | "title" | "capturing" | "captureError" | "sendWithout" | "noteLabel" | "notePlaceholder" | "noteRequired" | "categoryLabel" | "pen" | "box" | "arrow" | "text" | "select" | "remove" | "undo" | "clear" | "cancel" | "send" | "sending" | "sent" | "error" | "retry" | "triggerText" | "escHint" | "minimise" | "screenshot" | "addScreenshot" | "removeScreenshot" | "draft" | "captureView" | "reopen" | "discard" | "discardConfirm" | "keepEditing" | "moreSend" | "savePdf" | "pdfError", string>;
+type FeedbackStrings = Record<"trigger" | "title" | "capturing" | "captureError" | "sendWithout" | "noteLabel" | "notePlaceholder" | "noteRequired" | "categoryLabel" | "pen" | "box" | "arrow" | "text" | "select" | "remove" | "undo" | "clear" | "clearConfirm" | "cancel" | "send" | "sending" | "sent" | "error" | "timeout" | "retry" | "triggerText" | "escHint" | "minimise" | "screenshot" | "addScreenshot" | "removeScreenshot" | "draft" | "captureView" | "reopen" | "discard" | "discardConfirm" | "keepEditing" | "moreSend" | "savePdf" | "pdfError", string>;
 type FeedbackOptions = {
   onSubmit?: (report: FeedbackReport) => Promise<void>;
   endpoint?: string;

package/dist/{widget-BoohIxqp.mjs → widget-JBN1fbyx.mjs}

@@ -490,7 +490,7 @@ function createFeedback(options = {}) {
 		returnFocus = deepActive();
 		const stream = kept ? void 0 : requestDisplay();
 		try {
-			dialogs ??= import("./dialog-W6m1knfu.mjs").catch((error) => {
+			dialogs ??= import("./dialog-BL7k2Jir.mjs").catch((error) => {
 				dialogs = void 0;
 				throw error;
 			});

package/docs/API.md

@@ -34,8 +34,8 @@ const feedback = createFeedback({
 ### Options
 | option | type | default | meaning |
 |---|---|---|---|
-| `onSubmit` | `(report) => Promise<void>` | – | Sends the report. A throw shows the send error state, using the error's message. Give this or `endpoint`; with both, `onSubmit` is used. |
-| `endpoint` | `string` | – | POSTs `multipart/form-data` with a `report` part (JSON, each screenshot without its image) and one part per screenshot, `image0`, `image1` and on, named `<id>-<n>.webp` or `<id>-<n>.png`. An answer that is not 2xx, a redirect included, shows the send error state with the default `error` text. It is a same-origin `fetch`, so it sends cookies only to the page's own origin; another origin needs CORS on its server and a `connect-src` that allows it. |
+| `onSubmit` | `(report) => Promise<void>` | – | Sends the report. A throw shows the send error state, using the error's message. A promise still pending after 30 seconds shows it with the `timeout` text, and `error` fires with a `TimeoutError`; the widget stops waiting, but cannot stop the host's work. Give this or `endpoint`; with both, `onSubmit` is used. |
+| `endpoint` | `string` | – | POSTs `multipart/form-data` with a `report` part (JSON, each screenshot without its image) and one part per screenshot, `image0`, `image1` and on, named `<id>-<n>.webp` or `<id>-<n>.png`. An answer that is not 2xx, a redirect included, shows the send error state with the default `error` text. A request still under way after 30 seconds is aborted and shows the `timeout` text. It is a same-origin `fetch`, so it sends cookies only to the page's own origin; another origin needs CORS on its server and a `connect-src` that allows it. |
 | `headers` | `Record<string, string>` or `() => Record<string, string>` | – | Extra headers for `endpoint`. A function is called at Send; a throw shows the send error state, using the error's message. |
 | `trigger` | `"tab" \| "button" \| "none"` | `"tab"` | `"tab"` touches the side edge, `"button"` is round, in the corner (SPEC §3). `"none"` draws no trigger; the host calls `open()`. A kept draft's bar still shows. |
 | `position` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` | Corner of the trigger. |

package/docs/SPEC.md

@@ -8,7 +8,7 @@ package sends nothing by itself, and stores nothing but an unsent draft on the u
 
 ## 2. Flow
 ```
-idle --open--> capturing --image ready--> annotating --Send--> sending --ok--> sent --3 s--> idle
+idle --open--> capturing --image ready--> annotating --Send--> sending --ok--> sent --0.5 s or a click--> idle
                    |                          |   ^                |
                    +--fails--> capture error  |   |                +--fails--> send error
                                               |   +--Open, or Capture this view (capturing first)
@@ -24,6 +24,12 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
   (idle). This is the first screenshot only; a later one that fails is the draft's (below).
 - **annotating:** a full-viewport overlay shows the image with a tool rail beside it, a strip of
   the report's screenshots under it, and the note field, with Send in a footer row under that.
+  The dialog fits the window, 16 px from its edges (or the safe area's), with nothing to scroll:
+  the image takes the height the rest leaves, growing past the screenshot's own size on a large
+  screen, and the dialog is as wide as the image needs. Below
+  760 px of height the tool rail has two columns, and below 700 px a question lies over the
+  header in place of adding a row; on a landscape screen under 500 px high, the note and Send go
+  beside the image.
   Esc and the header's Keep as draft fold it into the draft; the header's close button (Cancel)
   discards it. When that would throw away a note, a mark, a second screenshot or a chosen category,
   Cancel first asks `discardConfirm`, with "Discard", `minimise` (before Send, with a screenshot) and
@@ -41,9 +47,12 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
   it.
 - **sending:** the note, the category and the tools are disabled, and the Send button shows
   progress. The Esc hint goes, as it is absent with no screenshot: from Send on, Esc keeps no
-  draft, and Cancel and Esc close the dialog.
-- **sent:** a short confirmation, then idle.
-- **send error:** the message comes from the host's error, or else the `error` text. The note and
+  draft. Until the send ends, Cancel, Keep as draft and Esc do nothing. A send that has not ended
+  after 30 seconds fails, with the `timeout` text.
+- **sent:** the `sent` confirmation for half a second, or until a click anywhere on the overlay,
+  then idle.
+- **send error:** the message is the `timeout` text after 30 seconds, else the host's error, or
+  else the `error` text. The note and
   the marks are kept, and "Try again" sends the same report. Cancel and Esc, after
   the same question when it would throw work away, close the dialog, and the draft goes with it.
 
@@ -77,8 +86,9 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
   is not kept; a label holds up to 280 characters. Labels are one size, in the mark colour with a white outline. Select picks a mark by
   its line or a label by its text, and shows a dashed outline that never reaches the sent image: a
   drag moves it, kept whole inside the image; the arrow keys move it (Shift for ten); Delete,
-  Backspace or the Delete button removes it; Escape lets go of it. Undo takes back the last add,
-  move or removal, one at a time, and Clear removes all.
+  Backspace or the Delete button, under Select in the tool rail, removes it; Escape lets go of
+  it. Clear asks `clearConfirm` first, with Clear and `keepEditing`, then removes every mark on the
+  shown screenshot. Undo takes back the last add, move, removal or Clear, one at a time.
 - **One colour** for the marks, `--vf-mark`, which defaults to a red that contrasts with most pages.
 - Pointer events, so mouse, pen and touch all work. While drawing, touch never scrolls the page.
 - **Note:** a textarea of 2000 characters at most, with a visible label (`noteLabel`). It is
@@ -153,7 +163,7 @@ Defined in `docs/API.md` (`FeedbackReport`). It holds:
   mark (§4), or on Cancel's question (§2),
   keeps an unsent draft that has a screenshot in the draft bar, and moves the focus to it ("Capture
   this view", or "Open" at 10 screenshots). With no screenshot, or after a send error, it cancels,
-  asking first as Cancel does; while sending, and once sent, it closes at once.
+  asking first as Cancel does; while sending it does nothing, and once sent it closes at once.
   While the dialog is open, the page does not scroll. On close, focus goes back to the trigger,
   or to where it was before.
 - Every control has an accessible name and a visible focus ring (`--vf-focus`), `unstyled`
@@ -215,10 +225,12 @@ These are the default texts. Each one can be replaced through `strings` (`docs/A
 | pen / box / arrow / text / select | Draw / Box / Arrow / Text / Select |
 | remove | Delete |
 | undo / clear | Undo / Clear |
+| clearConfirm | Clear all marks on this screenshot? |
 | cancel / send | Cancel / Send |
 | sending | Sending… |
 | sent | Thanks, it's sent. |
 | error | It didn't send. Your note is kept. |
+| timeout | It didn't send in 30 seconds. Check your internet connection, then try again. |
 | retry | Try again |
 | triggerText | none: the icon alone |
 | escHint | Esc keeps it as a draft |

package/docs/THEMING.md

@@ -68,8 +68,8 @@ Every visible element has a part name: `trigger`, `trigger-icon`, `trigger-text`
 `thumb-pick`, `thumb-image`, `thumb-number`, `thumb-remove`, `add`, `label`, `composer`, `note`,
 `composer-bar`, `category`, `footer`, `split`, `send-more`, `menu`, `save-pdf`, `actions`, `cancel`,
 `send`, `hint`, `status`, `error`, `retry`, `send-without`, `draft`, `draft-label`, `draft-thumbs`,
-`capture-view`, `reopen`, `discard`, `confirm`, `confirm-text`, `keep-draft`, `keep-editing`. Cancel's
-question is `confirm`, also an `actions` part, with its own `discard` button. After a send error, the Send button's part is `retry` until it
+`capture-view`, `reopen`, `discard`, `confirm`, `confirm-text`, `confirm-clear`, `keep-draft`, `keep-editing`, `side`. Cancel's
+question is `confirm`, also an `actions` part, with its own `discard` button; Clear's is `confirm` too, with `confirm-clear`. `side` holds the label, the composer and the footer; it lays nothing out except beside the image on a short landscape screen. After a send error, the Send button's part is `retry` until it
 sends again, the same part as the capture error's "Try again".
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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",