visual-feedback 0.3.3 → 0.4.1

package/AGENTS.md

@@ -36,7 +36,10 @@ comes before the first report in step 6.
    recipe adds. In a React or Next.js app, render `<Feedback endpoint="/api/feedback" />` from
    `visual-feedback/react` instead, once, in the root layout; its props are the same options, and
    a function prop such as `onSubmit` needs a `"use client"` file (`docs/API.md`). Every option is in `docs/API.md`; the look is in
-   `docs/THEMING.md`.
+   `docs/THEMING.md`. Fit the button to the app's own design: read its layout and pick
+   `trigger` and `position`, and `--vf-offset` where the default spot would cover something the app shows, and the
+   `--vf-*` colours and corners where the widget does not take them from the page already. Tell the
+   developer where it sits and why.
 3. On the server: copy the recipe's route as it is written. Its test runs that code, with only the
    marked parts below filled in, so do not change how it stores a report. If the app is not a Next.js App Router app, keep the logic and
    change only how the route is mounted.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # 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
+  has no border: the text colour fills it, and on hover the colours swap. `--vf-offset` lifts the
+  tab along its side edge, and no longer moves it off that edge. `trigger: "button"` keeps the
+  round button, 16px from both edges, filled the same way (SPEC §3).
+- Breaking: the trigger has no `title`. Its tooltip is the widget's own: it shows at once on hover
+  or keyboard focus, beside the trigger with an arrow pointing at it, and has its own part,
+  `trigger-tooltip`. Screen readers still hear it as the description.
+- The README starts with a prompt to give a coding agent, naming the package by its npm page, and AGENTS.md asks the agent to fit the
+  button to the app's design.
+- The demo styles the tooltip as its "Click here" hint, and fades that hint while the tooltip
+  shows.
+
 ## 0.3.3 (2026-10-13)
 
 - The trigger stands out more: a swirl icon that fills it, in place of the speech bubble, ringed

package/README.md

@@ -8,6 +8,14 @@ any design.
 
 ![The feedback dialog over a video site, with a box and an arrow drawn around the topic buttons, seven of which read Undefined](docs/demo.png)
 
+Ask your coding agent:
+
+```text
+Install the visual-feedback npm package (https://www.npmjs.com/package/visual-feedback) and add it to this app by following its AGENTS.md. Place its button where it covers nothing, and match its position, colours and corners to our design.
+```
+
+Or the old-school way, by hand:
+
 ```sh
 npm install visual-feedback
 ```

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-Z1KOUKjx.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-IwlLFJCu.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-Z1KOUKjx.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-IwlLFJCu.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-Z1KOUKjx.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;
@@ -37,7 +37,7 @@ type FeedbackOptions = {
   requireNote?: boolean;
   redactUrl?: boolean;
   context?: () => Record<string, unknown> | Promise<Record<string, unknown>>;
-  trigger?: "button" | "none";
+  trigger?: "tab" | "button" | "none";
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   shortcut?: string | false;
   strings?: Partial<FeedbackStrings>;

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

@@ -162,23 +162,24 @@ function sheet(text) {
 	return result;
 }
 function variables() {
-	return `.vf{--_r:var(--vf-radius,var(--_pr,16px));--_s:var(--vf-surface,var(--_ps,Canvas));--_t:var(--vf-text,var(--_pt,CanvasText));--_m:var(--vf-muted,var(--_pm,color-mix(in srgb,var(--_t) 60%,transparent)));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,var(--_pa,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"}));--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 12px 32px -12px rgb(0 0 0/35%));--_size:var(--vf-trigger-size,2.5em);--_off:var(--vf-offset,16px);--_z:var(--vf-z,2147483000)}`;
+	return `.vf{--_r:var(--vf-radius,var(--_pr,16px));--_s:var(--vf-surface,var(--_ps,Canvas));--_t:var(--vf-text,var(--_pt,CanvasText));--_m:var(--vf-muted,var(--_pm,color-mix(in srgb,var(--_t) 60%,transparent)));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,var(--_pa,${CSS.supports("color", "AccentColor") ? "AccentColor" : "#0b57d0"}));--_at:var(--vf-accent-text,#fff);--_f:var(--vf-focus,var(--_a));--_mark:var(--vf-mark,#e5243b);--_bd:var(--vf-backdrop,rgb(0 0 0/45%));--_sh:var(--vf-shadow,0 12px 32px -12px rgb(0 0 0/35%));--_size:var(--vf-trigger-size,2.5em);--_off:var(--vf-offset,16px);--_toff:var(--vf-offset,0px);--_z:var(--vf-z,2147483000)}`;
 }
-const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{font:inherit;position:fixed;z-index:var(--_z);box-sizing:border-box;height:var(--_size);margin:0;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.trigger[data-icon]{width:var(--_size);padding:0;justify-content:center}.trigger[data-icon] svg{width:100%;height:100%}[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger svg{width:1.15em;height:1.15em}.capturing,.capturing .backdrop{visibility:hidden}.still .trigger{transition:none!important}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
-const THEME = `.trigger{font-weight:600;border:1px solid var(--_t);border-radius:999px;background:var(--_s);color:var(--_t);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s}.trigger:hover{background:color-mix(in srgb,var(--_s) 90%,var(--_t))}`;
-function icon() {
+const LAYOUT = `.vf{display:contents;font-family:var(--vf-font,inherit);color-scheme:light dark}.trigger{font:inherit;position:fixed;z-index:var(--_z);box-sizing:border-box;height:var(--_size);margin:0;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;white-space:nowrap}.trigger[data-icon]{width:var(--_size);padding:0;justify-content:center}.trigger[data-icon]>svg{width:62.5%;height:62.5%}[data-y=bottom]{bottom:calc(var(--_off) + env(safe-area-inset-bottom,0px))}[data-y=top]{top:calc(var(--_off) + env(safe-area-inset-top,0px))}[data-x=right]{right:calc(var(--_off) + env(safe-area-inset-right,0px))}[data-x=left]{left:calc(var(--_off) + env(safe-area-inset-left,0px))}.trigger:where([data-tab][data-y=bottom]){bottom:calc(var(--_toff) + env(safe-area-inset-bottom,0px))}.trigger:where([data-tab][data-y=top]){top:calc(var(--_toff) + env(safe-area-inset-top,0px))}.trigger:where([data-tab][data-x=right]){right:env(safe-area-inset-right,0px)}.trigger:where([data-tab][data-x=left]){left:env(safe-area-inset-left,0px)}.trigger>svg{width:1.15em;height:1.15em}.tip{position:absolute;top:50%;translate:0 -50%;direction:ltr;box-sizing:border-box;width:max-content;max-width:calc(100vw - 100% - 2 * var(--_off) - 10px);white-space:normal;display:flex;align-items:center;gap:4px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s}[data-x=right]>.tip{right:calc(100% + 10px)}[data-x=left]>.tip{left:calc(100% + 10px);flex-direction:row-reverse}[data-x=left]>.tip svg{rotate:180deg}.tip svg{width:1.15em;height:1.15em;flex:none}.trigger:focus-visible>.tip{visibility:inherit;opacity:1}@media (hover:hover){.trigger:hover>.tip{visibility:inherit;opacity:1}}.capturing,.capturing .backdrop{visibility:hidden}.capturing .tip{transition:none}.still .trigger{transition:none!important}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
+const THEME = `.trigger{font-weight:600;border:0;border-radius:999px;background:var(--_t);color:var(--_s);box-shadow:var(--_sh);cursor:pointer;transition:background-color .15s,color .15s}@media (hover:hover){.trigger:hover{background:var(--_s);color:var(--_t)}}.tip{padding:6px 8px 6px 14px;border-radius:999px;background:var(--_t);color:var(--_s);font-weight:700;box-shadow:var(--_sh)}[data-x=left]>.tip{padding:6px 14px 6px 8px}.trigger:where([data-tab]){--_tr:clamp(0px,var(--_toff) * 1000,var(--_r));border-radius:var(--_r)}.trigger:where([data-tab][data-y=bottom]){border-bottom-left-radius:var(--_tr);border-bottom-right-radius:var(--_tr)}.trigger:where([data-tab][data-y=top]){border-top-left-radius:var(--_tr);border-top-right-radius:var(--_tr)}.trigger:where([data-tab][data-x=right]){border-top-right-radius:0;border-bottom-right-radius:0}.trigger:where([data-tab][data-x=left]){border-top-left-radius:0;border-bottom-left-radius:0}`;
+function icon(d, attributes) {
 	const svg = document.createElementNS(SVG, "svg");
 	const path = document.createElementNS(SVG, "path");
 	for (const [name, value] of Object.entries({
 		viewBox: "0 0 24 24",
 		"aria-hidden": "true",
-		fill: "currentColor",
-		part: "trigger-icon"
+		...attributes
 	})) svg.setAttribute(name, value);
-	path.setAttribute("d", "M12 12Q17.2 7.9 24 12L22.6 17.6Q16.2 11.6 12 12zM12 12Q18.1 14.5 18 22.4L12.4 24Q14.5 15.4 12 12zM12 12Q12.9 18.5 6 22.4L1.8 18.4Q10.3 15.8 12 12zM12 12Q6.8 16.1 0 12L1.4 6.4Q7.8 12.4 12 12zM12 12Q5.9 9.5 6 1.6L11.6 0Q9.5 8.6 12 12zM12 12Q11.1 5.5 18 1.6L22.2 5.6Q13.7 8.2 12 12z");
+	path.setAttribute("d", d);
 	svg.append(path);
 	return svg;
 }
+const FLAG = "M4 3a1 1 0 0 1 2 0v18a1 1 0 0 1-2 0zM7 4c2.5-1.5 5-1.5 7 0s4 1.5 6 0v10c-2 1.5-4 1.5-6 0s-4.5-1.5-7 0z";
+const ARROW = "M5 12h14m-6-6 6 6-6 6";
 function field(element) {
 	return element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName);
 }
@@ -289,6 +290,9 @@ function createFeedback(options = {}) {
 	let pending;
 	let trigger;
 	let label;
+	const tip = document.createElement("span");
+	tip.dir = "auto";
+	tip.setAttribute("part", "trigger-tooltip-text");
 	let unlisten;
 	function listen(shortcut) {
 		const parsed = parse(shortcut);
@@ -340,18 +344,35 @@ function createFeedback(options = {}) {
 				trigger.setAttribute("part", "trigger");
 				label = document.createElement("span");
 				label.setAttribute("part", "trigger-text");
-				trigger.append(icon(), label);
+				const tooltip = document.createElement("span");
+				tooltip.className = "tip";
+				tooltip.id = "vf-tip";
+				tooltip.setAttribute("part", "trigger-tooltip");
+				tooltip.setAttribute("aria-hidden", "true");
+				tooltip.append(tip, icon(ARROW, {
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2.4",
+					"stroke-linecap": "round",
+					part: "icon"
+				}));
+				trigger.setAttribute("aria-describedby", tooltip.id);
+				trigger.append(icon(FLAG, {
+					fill: "currentColor",
+					part: "trigger-icon"
+				}), label, tooltip);
 				trigger.addEventListener("click", start);
 				wrapper.prepend(trigger);
 			}
 			const [y, x] = (options.position ?? "bottom-right").split("-");
 			trigger.dataset.y = y;
 			trigger.dataset.x = x;
+			trigger.toggleAttribute("data-tab", options.trigger !== "button");
 			const { trigger: name, triggerText } = options.strings ?? {};
 			const accessible = name || triggerText || "Send feedback";
 			trigger.setAttribute("aria-label", accessible);
 			const keys = options.shortcut ? spoken(options.shortcut) : void 0;
-			trigger.title = keys ? `${accessible} (${keys})` : accessible;
+			tip.textContent = keys ? `${accessible} (${keys})` : accessible;
 			trigger.toggleAttribute("data-icon", !triggerText);
 			if (label) {
 				label.textContent = triggerText ?? "";
@@ -469,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,10 +34,10 @@ 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` | `"button" \| "none"` | `"button"` | `"none"` draws no trigger; the host calls `open()`. A kept draft's bar still shows. |
+| `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. |
 | `shortcut` | `string \| false` | `false` | For example `"Alt+Shift+F"`: any of `Alt`, `Shift`, `Control` and `Meta`, then one key, a letter, a digit or a key name such as `F2`, joined by `+`. The modifiers must match exactly, AltGr never matches, and any other modifier name, or no key, makes it match nothing. Without `Control` or `Meta` it does not fire while focus is in a form field (`input`, `textarea`, `select`) or editable content. It does nothing while the dialog is open or a draft is kept in the draft bar. The trigger's tooltip names it (SPEC §3). Opt-in; it is the widget's only listener on `window` or `document`, one `keydown` on `window` (SPEC §9 names what else the widget watches, and what the capture library keeps). |
 | `tools` | `("pen" \| "box" \| "arrow" \| "text" \| "select")[]` | all five | Order is the toolbar order, and the first drawing tool is the one selected at open. Repeats and unknown names are ignored; an empty list, or Select alone, shows no toolbar. The Delete button is there only with Select. |

package/docs/SPEC.md

@@ -8,15 +8,15 @@ 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)
                                               +--Esc / Keep as draft / Add screenshot--> draft
 annotating, draft --Cancel (it may ask first, below) / Discard--> idle
 ```
-- **idle:** the trigger button shows (`trigger: "button"`), or nothing shows (`trigger: "none"`,
-  where the host calls `open()`).
+- **idle:** the trigger shows, a tab (`trigger: "tab"`) or a round button (`trigger: "button"`), or
+  nothing shows (`trigger: "none"`, where the host calls `open()`).
 - **capturing:** the trigger and any open panel are hidden, so they are not in the image. The
   screen is captured (SPEC §5), and a screen reader is told the `capturing` text.
 - **capture error:** the `captureError` text, with "Try again" (back to capturing), "Send without
@@ -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,26 +47,35 @@ 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.
 
 ## 3. The trigger
-- It is a small round button, 2.5em across by default (40 px on a 16 px site), in a corner
-  (`position`), filled by a swirl icon edged by a ring in the same colour, with the `trigger`
-  accessible name. A host that gives `triggerText` gets that short label beside a small icon, as a pill; with
-  only `triggerText` given, that text is the name too. A host that sets both keeps `triggerText`
-  inside `trigger`, so speech control can say what it sees. It has no badge, and it does not move
-  or pulse.
-- Its tooltip (`title`) is its name, as for the dialog's icon buttons. With a `shortcut` that can
-  match, it is the name and the keys, each modifier once, joined by ` + `, as the platform's
-  keyboards name them: Option, Command, Control and Shift on a Mac, iPhone or iPad
-  (`navigator.platform`), as in `Send feedback (Option + Shift + F)`; Alt, Win, Ctrl and Shift on
-  Windows; Alt, Super, Ctrl and Shift elsewhere. A screen reader then reads the keys as the
-  description.
-- It sits 16 px from the edges by default, and it respects `env(safe-area-inset-*)`.
+- By default it is a small tab, 2.5em square (40 px on a 16 px site), in the corner `position`
+  names, square on both edges there, with a flag icon and the `trigger` accessible name.
+  `--vf-offset` lifts it along its side edge, and then its end side is rounded too.
+  `trigger: "button"` makes it a round button in that corner instead, 16 px from both edges.
+  Either has no border: the text colour fills it, and the icon and label take the background
+  colour. On hover, on a device that can hover, the two swap back.
+  A host that gives `triggerText` gets that short label beside a small icon, in a wider tab, or a
+  pill as a button; with only `triggerText` given, that text is the name too. A host that sets
+  both keeps `triggerText` inside `trigger`, so speech control can say what it sees. It has no
+  badge, and it does not move or pulse.
+- Its tooltip is its own, not the browser's `title`: a pill beside it, on the page's side, with an
+  arrow pointing at it. It fades in at once on keyboard focus, or on hover where the device can
+  hover, and out at the same speed.
+  It reads the name. With a `shortcut` that can match, it is the name and the keys, each modifier
+  once, joined by ` + `, as the platform's keyboards name them: Option, Command, Control and Shift
+  on a Mac, iPhone or iPad (`navigator.platform`), as in `Send feedback (Option + Shift + F)`;
+  Alt, Win, Ctrl and Shift on Windows; Alt, Super, Ctrl and Shift elsewhere. A screen reader reads
+  the tooltip as the description.
+- It respects `env(safe-area-inset-*)`.
 - It is hidden while there is a draft, whether the dialog is open or kept in the draft bar.
 - It does not move to keep clear of the page's content. The host moves it off its own content
   with `position` or `--vf-offset`.
@@ -71,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
@@ -147,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`
@@ -209,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

@@ -39,8 +39,8 @@ Set these on `visual-feedback` (or on any ancestor). Custom properties cross the
 |---|---|---|
 | `--vf-font` | `inherit` | font family of all text, such as `Inter, sans-serif` |
 | `--vf-radius` | from the page's button corners, so the widget's buttons match them up to 15px (this is 1.6 times theirs, up to `24px`), else `16px` | panel and composer, and a share of it for buttons and the image |
-| `--vf-surface` | with `theme: "auto"` the page's background, else `Canvas` | panel, tool rail and composer background |
-| `--vf-text` | with `theme: "auto"` the page's text colour, else `CanvasText` | text, and the trigger's icon and border |
+| `--vf-surface` | with `theme: "auto"` the page's background, else `Canvas` | panel, tool rail and composer background, the trigger's icon and label, its fill on hover, and the text of its tooltip |
+| `--vf-text` | with `theme: "auto"` the page's text colour, else `CanvasText` | text, the trigger's fill, its icon and label on hover, and its tooltip's background |
 | `--vf-muted` | text at 60%, more on a page whose text would make that too faint | hints, counters |
 | `--vf-border` | text at 15% | hairlines |
 | `--vf-accent` | the page's accent, else `AccentColor`, or `#0b57d0` where the browser has no `AccentColor` | Send button and its menu button, "Capture this view", active tool, chosen screenshot |
@@ -48,9 +48,9 @@ Set these on `visual-feedback` (or on any ancestor). Custom properties cross the
 | `--vf-focus` | `--vf-accent` | focus ring |
 | `--vf-mark` | `#e5243b` | marks on the screenshot |
 | `--vf-backdrop` | `rgb(0 0 0 / 45%)` | overlay behind the image |
-| `--vf-shadow` | `0 12px 32px -12px rgb(0 0 0 / 35%)` | trigger, panel and draft bar |
+| `--vf-shadow` | `0 12px 32px -12px rgb(0 0 0 / 35%)` | trigger, its tooltip, panel and draft bar |
 | `--vf-trigger-size` | `2.5em`, 40px on a 16px site | trigger height, and its width when it shows the icon alone |
-| `--vf-offset` | `16px` | trigger and draft bar distance from the edges |
+| `--vf-offset` | `16px`, and `0px` for the tab; a length, not a percentage | draft bar and round trigger distance from the edges; the tab keeps to its side edge, and this lifts it along it |
 | `--vf-z` | `2147483000` | stacking |
 
 ```css
@@ -62,14 +62,14 @@ visual-feedback {
 ```
 
 ## 3. `::part()`
-Every visible element has a part name: `trigger`, `trigger-icon`, `trigger-text`, `backdrop`,
-`dialog`, `header`, `title`, `minimise`, `body`, `stage`, `image`, `toolbar`, `tool`, `tool-active`,
+Every visible element has a part name: `trigger`, `trigger-icon`, `trigger-text`, `trigger-tooltip`,
+`trigger-tooltip-text`, `backdrop`, `dialog`, `header`, `title`, `minimise`, `body`, `stage`, `image`, `toolbar`, `tool`, `tool-active`,
 `divider`, `undo`, `clear`, `remove`, `icon`, `text-input`, `selection`, `strip`, `thumb`,
 `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.3.3",
+  "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",