visual-feedback 0.1.0 → 0.3.0

package/dist/widget-DvGTo0B4.mjs

@@ -0,0 +1,565 @@
+
+//#region src/match.ts
+const BUTTONS = "button,[role=\"button\"],input[type=\"submit\"],input[type=\"button\"]";
+const SAMPLE = 200;
+let pixel;
+/** A colour as sRGB bytes and alpha; syntax other than rgb() (oklch, hex, names) goes through a canvas. */
+function rgb(color) {
+	const match = /^rgba?\(([\d.]+)[ ,]+([\d.]+)[ ,]+([\d.]+)(?:[ ,/]+([\d.]+)(%?))?\)/.exec(color);
+	if (match) {
+		const alpha = match[4] === void 0 ? 1 : Number(match[4]) / (match[5] ? 100 : 1);
+		return [
+			Number(match[1]),
+			Number(match[2]),
+			Number(match[3]),
+			alpha
+		];
+	}
+	if (pixel === void 0) pixel = Object.assign(document.createElement("canvas"), {
+		width: 1,
+		height: 1
+	}).getContext("2d", { willReadFrequently: true });
+	if (!pixel || !color) return void 0;
+	pixel.clearRect(0, 0, 1, 1);
+	pixel.fillStyle = "#0000";
+	pixel.fillStyle = color;
+	pixel.fillRect(0, 0, 1, 1);
+	const [r = 0, g = 0, b = 0, a = 0] = pixel.getImageData(0, 0, 1, 1).data;
+	return [
+		r,
+		g,
+		b,
+		a / 255
+	];
+}
+function luminance([r, g, b]) {
+	const linear = (c) => c / 255 <= .04045 ? c / 255 / 12.92 : ((c / 255 + .055) / 1.055) ** 2.4;
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+}
+function contrast(a, b) {
+	const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return ((light ?? 0) + .05) / ((dark ?? 0) + .05);
+}
+const css = ([r, g, b]) => `rgb(${r} ${g} ${b})`;
+const opaque = (color) => (color?.[3] ?? 0) > .99;
+function vivid(color) {
+	if (!opaque(color)) return false;
+	const max = Math.max(color[0], color[1], color[2]);
+	const min = Math.min(color[0], color[1], color[2]);
+	const light = (max + min) / 510;
+	return (max - min) / 255 >= .2 && light > .1 && light < .9;
+}
+function visible(element) {
+	return element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden";
+}
+function commonest(colors) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const color of colors) {
+		const entry = counts.get(css(color)) ?? [color, 0];
+		counts.set(css(color), [entry[0], entry[1] + 1]);
+	}
+	return [...counts.values()].sort((a, b) => b[1] - a[1])[0]?.[0];
+}
+function themeColor() {
+	for (const meta of document.querySelectorAll("meta[name=\"theme-color\"]")) {
+		const media = meta.getAttribute("media");
+		if (!media || matchMedia(media).matches) return rgb(meta.content.trim());
+	}
+}
+/**
+* Takes the page's own accent, corners and, with `theme: "auto"`, background and text, where the
+* host set no --vf-* for them. Each guess that fails contrast falls back to the defaults.
+*/
+function match(wrapper, theme) {
+	const style = wrapper.style;
+	for (const name of [
+		"--_pa",
+		"--_pm",
+		"--_pr",
+		"--_ps",
+		"--_pt"
+	]) style.setProperty(name, "initial");
+	style.colorScheme = theme?.replace("auto", "") ?? "";
+	if (!document.body || !wrapper.isConnected) return;
+	try {
+		guess(wrapper, theme, document.body);
+	} catch {}
+}
+function guess(wrapper, theme, body) {
+	const style = wrapper.style;
+	const own = getComputedStyle(wrapper);
+	const free = (variable) => !own.getPropertyValue(variable).trim();
+	if ((theme ?? "auto") === "auto" && free("--vf-surface") && free("--vf-text")) {
+		const background = [body, document.documentElement].map((element) => rgb(getComputedStyle(element).backgroundColor)).find(opaque);
+		const text = rgb(getComputedStyle(body).color);
+		if (background && opaque(text) && contrast(background, text) >= 4.5) {
+			style.setProperty("--_ps", css(background));
+			style.setProperty("--_pt", css(text));
+			const mixed = (share) => [
+				share * text[0] + (1 - share) * background[0],
+				share * text[1] + (1 - share) * background[1],
+				share * text[2] + (1 - share) * background[2],
+				1
+			];
+			let share = .6;
+			while (share < 1 && contrast(background, mixed(share)) < 4.5) share += .05;
+			if (share > .6) style.setProperty("--_pm", css(mixed(Math.min(1, share))));
+			style.colorScheme = luminance(background) > .179 ? "light" : "dark";
+		}
+	}
+	const browser = /* @__PURE__ */ new Map();
+	const plain = (scheme) => {
+		if (!browser.has(scheme)) {
+			const native = wrapper.appendChild(document.createElement("button"));
+			native.style.all = "revert";
+			native.style.colorScheme = scheme;
+			const look = getComputedStyle(native);
+			browser.set(scheme, `${look.backgroundColor} ${look.borderTopLeftRadius}`);
+			native.remove();
+		}
+		return browser.get(scheme);
+	};
+	const filled = [...document.querySelectorAll(BUTTONS)].slice(0, SAMPLE).filter(visible).map((button) => [button, getComputedStyle(button)]).filter(([, look]) => {
+		const face = `${look.backgroundColor} ${look.borderTopLeftRadius}`;
+		return face !== plain("light") && face !== plain("dark");
+	});
+	if (free("--vf-radius")) {
+		const shapes = filled.filter(([, look]) => opaque(rgb(look.backgroundColor))).map(([button, look]) => {
+			const radius = Number.parseFloat(look.borderTopLeftRadius) || 0;
+			return {
+				radius,
+				pill: radius * 2 >= button.getBoundingClientRect().height - 1
+			};
+		});
+		const corners = shapes.filter((shape) => !shape.pill).map((shape) => shape.radius);
+		corners.sort((a, b) => a - b);
+		const middle = corners[Math.floor((corners.length - 1) / 2)];
+		if (middle !== void 0 && corners.length * 2 > shapes.length) style.setProperty("--_pr", `${Math.min(24, middle * 1.6)}px`);
+	}
+	if (free("--vf-accent")) {
+		const links = () => [...document.querySelectorAll("a[href]")].slice(0, SAMPLE).filter(visible).map((link) => rgb(getComputedStyle(link).color)).filter(vivid);
+		const accent = [
+			themeColor(),
+			commonest(filled.map(([, look]) => rgb(look.backgroundColor)).filter(vivid)),
+			commonest(links())
+		].find(vivid);
+		const probe = wrapper.appendChild(document.createElement("i"));
+		probe.style.background = "var(--_s)";
+		const surface = rgb(getComputedStyle(probe).backgroundColor);
+		probe.remove();
+		if (accent && opaque(surface) && contrast(accent, surface) >= 3) style.setProperty("--_pa", css(accent));
+	}
+}
+//#endregion
+//#region src/widget.ts
+const SVG = "http://www.w3.org/2000/svg";
+function supported() {
+	return typeof document !== "undefined" && "adoptedStyleSheets" in Document.prototype && "adoptedStyleSheets" in ShadowRoot.prototype && CSS.supports("color", "color-mix(in srgb, red, red)");
+}
+function sheet(text) {
+	const result = new CSSStyleSheet();
+	result.replaceSync(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)}`;
+}
+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}[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(--_b);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 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: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		"stroke-linejoin": "round",
+		part: "trigger-icon"
+	})) svg.setAttribute(name, value);
+	path.setAttribute("d", "M21 12a8 8 0 0 1-11.6 7.1L4 20l1.1-4.4A8 8 0 1 1 21 12z");
+	svg.append(path);
+	return svg;
+}
+function field(element) {
+	return element.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(element.tagName);
+}
+function deepActive() {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+const DISCONNECTED = Symbol.for("visual-feedback.disconnected");
+const CONNECTED = Symbol.for("visual-feedback.connected");
+const owners = /* @__PURE__ */ new Map();
+const enders = /* @__PURE__ */ new WeakMap();
+let dialogs;
+let discarding = Promise.resolve();
+/**
+* Deletes the draft this tab keeps for a tag, as at a logout, so no later widget of the tag brings
+* it back; a widget holding it, open or folded, ends it.
+*/
+async function discardDraft(tagName = "visual-feedback") {
+	const key = `visual-feedback:${tagName}`;
+	let id = null;
+	try {
+		id = sessionStorage.getItem(key);
+		sessionStorage.removeItem(key);
+	} catch {}
+	const owner = owners.get(tagName);
+	if (owner) enders.get(owner)?.();
+	const mine = discarding.then(async () => {
+		await (await dialogs?.catch(() => void 0))?.settled();
+		if (id) await (await import("./keep-BG5WxZPU.mjs")).forget(id);
+	});
+	discarding = mine.catch(() => {});
+	await mine;
+}
+const noop = {
+	open: async () => {},
+	close() {},
+	destroy() {},
+	update() {},
+	on: () => () => {}
+};
+function createFeedback(options = {}) {
+	if (!supported()) return noop;
+	const tag = options.tagName ?? "visual-feedback";
+	if (!customElements.get(tag)) customElements.define(tag, class extends HTMLElement {
+		connectedCallback() {
+			this[CONNECTED]?.();
+		}
+		disconnectedCallback() {
+			this[DISCONNECTED]?.();
+		}
+	});
+	const host = document.createElement(tag);
+	const root = host.attachShadow({ mode: "open" });
+	const wrapper = document.createElement("div");
+	wrapper.className = "vf";
+	root.append(wrapper);
+	let view;
+	const handlers = /* @__PURE__ */ new Map();
+	const call = (fns, args) => {
+		for (const fn of [...fns]) try {
+			fn(...args);
+		} catch (error) {
+			reportError(error);
+		}
+	};
+	const emit = (event, ...args) => call(handlers.get(event) ?? [], args);
+	const start = () => void widget.open().catch(() => {});
+	let state = "idle";
+	let dialog;
+	let session = 0;
+	let returnFocus = null;
+	let pending;
+	let trigger;
+	let label;
+	let unlisten;
+	function listen(shortcut) {
+		const parts = shortcut.toLowerCase().split("+");
+		const key = parts.pop();
+		const names = [
+			"alt",
+			"shift",
+			"control",
+			"meta"
+		];
+		const mods = names.map((name) => parts.includes(name)).join();
+		const typing = !/control|meta/.test(shortcut.toLowerCase());
+		const on = (event) => {
+			if (event instanceof KeyboardEvent && state === "idle" && !event.repeat && !event.isComposing && !event.getModifierState("AltGraph") && parts.every((part) => names.includes(part)) && [
+				event.altKey,
+				event.shiftKey,
+				event.ctrlKey,
+				event.metaKey
+			].join() === mods && [event.code.replace(/^(Key|Digit)/, ""), event.key].some((name) => name.toLowerCase() === key) && !(typing && field(event.composedPath()[0]))) {
+				event.preventDefault();
+				start();
+			}
+		};
+		addEventListener("keydown", on);
+		return () => removeEventListener("keydown", on);
+	}
+	let base = [];
+	let extra = [];
+	function sheets() {
+		const dialogCss = view?.css(Boolean(options.unstyled)).map(sheet) ?? [];
+		root.adoptedStyleSheets = [
+			...base,
+			...dialogCss,
+			...extra
+		];
+	}
+	let matched;
+	function apply() {
+		base = [sheet(variables() + LAYOUT), ...options.unstyled ? [] : [sheet(THEME)]];
+		extra = options.css ? [sheet(options.css)] : [];
+		sheets();
+		if (`${options.theme} ${options.css}` !== matched) {
+			matched = `${options.theme} ${options.css}`;
+			match(wrapper, options.theme);
+			dialog?.reink();
+		}
+		if (options.trigger === "none") {
+			trigger?.remove();
+			trigger = void 0;
+		} else {
+			if (!trigger) {
+				trigger = document.createElement("button");
+				trigger.type = "button";
+				trigger.className = "trigger";
+				trigger.setAttribute("part", "trigger");
+				label = document.createElement("span");
+				label.setAttribute("part", "trigger-text");
+				trigger.append(icon(), label);
+				trigger.addEventListener("click", start);
+				wrapper.prepend(trigger);
+			}
+			const [y, x] = (options.position ?? "bottom-right").split("-");
+			trigger.dataset.y = y;
+			trigger.dataset.x = x;
+			const { trigger: name, triggerText } = options.strings ?? {};
+			trigger.setAttribute("aria-label", name || triggerText || "Send feedback");
+			trigger.toggleAttribute("data-icon", !triggerText);
+			if (label) {
+				label.textContent = triggerText ?? "";
+				label.hidden = !triggerText;
+			}
+		}
+		unlisten?.();
+		unlisten = options.shortcut ? listen(options.shortcut) : void 0;
+	}
+	apply();
+	(options.container ?? document.body ?? document.documentElement).append(host);
+	let seen = "";
+	const look = () => [document.documentElement, document.body].map((element) => {
+		const style = element && getComputedStyle(element);
+		return style ? `${style.backgroundColor} ${style.color} ${style.colorScheme}` : "";
+	}).join();
+	function restyle() {
+		wrapper.classList.add("still");
+		match(wrapper, options.theme);
+		if (trigger) getComputedStyle(trigger).backgroundColor;
+		wrapper.classList.remove("still");
+		dialog?.reink();
+		seen = look();
+	}
+	restyle();
+	let missed = false;
+	function follow(always = false) {
+		missed ||= always;
+		if (!host.isConnected) return;
+		const read = () => {
+			if (!host.isConnected || !(missed || look() !== seen)) return;
+			missed = false;
+			restyle();
+		};
+		const fading = document.getAnimations().filter((animation) => animation instanceof CSSTransition).filter((animation) => /color|background/.test(animation.transitionProperty));
+		if (fading.length) Promise.allSettled(fading.map((fade) => fade.finished)).then(read);
+		else read();
+	}
+	const system = matchMedia("(prefers-color-scheme: dark)");
+	const switched = () => follow(true);
+	system.addEventListener("change", switched);
+	let watched = null;
+	const observer = new MutationObserver(() => {
+		if (document.body !== watched) {
+			watched = document.body;
+			if (watched) observer.observe(watched, { attributes: true });
+		}
+		follow();
+	});
+	observer.observe(document.documentElement, {
+		attributes: true,
+		childList: true
+	});
+	watched = document.body;
+	if (watched) observer.observe(watched, { attributes: true });
+	const keeps = () => {
+		if (options.draft === "memory") return false;
+		if (!owners.get(tag)?.isConnected && host.isConnected) owners.set(tag, host);
+		return owners.get(tag) === host;
+	};
+	restore();
+	function restore() {
+		try {
+			if (!keeps() || !sessionStorage.getItem(`visual-feedback:${tag}`)) return false;
+		} catch {
+			return false;
+		}
+		state = "opening";
+		pending = show(++session, true);
+		pending.catch(() => {});
+		return true;
+	}
+	function hide(on) {
+		wrapper.classList.toggle("capturing", on);
+	}
+	function requestDisplay() {
+		const media = navigator.mediaDevices;
+		if (options.capture?.mode !== "display" || typeof media?.getDisplayMedia !== "function") return;
+		hide(true);
+		const stream = media.getDisplayMedia({ video: true });
+		stream.catch(() => {});
+		return stream;
+	}
+	function stop(stream) {
+		stream?.then((media) => {
+			for (const track of media.getTracks()) track.stop();
+		}, () => {});
+	}
+	async function grab(module, mine, stream) {
+		hide(true);
+		const quiet = view?.announce(root, options.strings);
+		try {
+			return await module.capture(options.capture, stream);
+		} catch {
+			return null;
+		} finally {
+			quiet?.();
+			if (mine === session) hide(false);
+		}
+	}
+	function cancel() {
+		session++;
+		hide(false);
+	}
+	/** Returns whether the draft stays kept; when not, it has ended. */
+	function teardown(keep) {
+		const stays = dialog?.unmount(keep) ?? false;
+		dialog = void 0;
+		const target = returnFocus?.isConnected && returnFocus !== document.body ? returnFocus : trigger;
+		returnFocus = null;
+		target?.focus?.();
+		return stays;
+	}
+	async function show(mine, kept) {
+		returnFocus = deepActive();
+		const stream = kept ? void 0 : requestDisplay();
+		try {
+			dialogs ??= import("./dialog-W6m1knfu.mjs").catch((error) => {
+				dialogs = void 0;
+				throw error;
+			});
+			const [loaded, capture] = await Promise.all([dialogs, import("./capture-CufRosj3.mjs")]);
+			if (mine !== session) return stop(stream);
+			view = loaded;
+			sheets();
+			const image = kept ? null : await grab(capture, mine, stream);
+			if (mine !== session) return;
+			if (!host.isConnected) {
+				state = "idle";
+				return;
+			}
+			match(wrapper, options.theme);
+			dialog = view.mount(wrapper, {
+				close: () => widget.close(),
+				retry: () => void retry(capture).catch((error) => {
+					widget.close();
+					emit("error", error);
+				}),
+				emit,
+				options: () => options,
+				keeps,
+				restyle: () => match(wrapper, options.theme)
+			}, options);
+			const mounted = dialog;
+			if (!kept) mounted.capture(image);
+			else {
+				const back = await mounted.revive();
+				if (mine !== session) {
+					mounted.unmount(true);
+					return;
+				}
+				if (!back) {
+					state = "idle";
+					mounted.unmount();
+					return;
+				}
+			}
+		} catch (error) {
+			stop(stream);
+			if (mine === session) {
+				state = "idle";
+				hide(false);
+				teardown();
+			}
+			emit("error", error);
+			throw error;
+		}
+		state = "open";
+		emit("open");
+	}
+	async function retry(capture) {
+		if (wrapper.classList.contains("capturing")) return;
+		const mine = session;
+		dialog?.lock(false);
+		const image = await grab(capture, mine, requestDisplay());
+		if (mine !== session) return;
+		dialog?.capture(image);
+	}
+	const widget = {
+		open() {
+			if (state === "opening" && pending) {
+				const mine = session;
+				return pending.then(() => mine === session ? widget.open() : void 0);
+			}
+			if (state !== "idle") return dialog?.reopen(), Promise.resolve();
+			if (restore()) return widget.open();
+			state = "opening";
+			pending = show(++session);
+			return pending;
+		},
+		close() {
+			end();
+		},
+		destroy() {
+			if (state === "destroyed") return;
+			const wasOpen = state === "open";
+			state = "destroyed";
+			cancel();
+			unlisten?.();
+			observer.disconnect();
+			system.removeEventListener("change", switched);
+			const closers = wasOpen && !teardown(true) ? [...handlers.get("close") ?? []] : [];
+			handlers.clear();
+			host.remove();
+			call(closers, []);
+		},
+		update(next) {
+			if (state === "destroyed") return;
+			options = {
+				...options,
+				...next
+			};
+			apply();
+		},
+		on(event, fn) {
+			if (state === "destroyed") return () => {};
+			const set = handlers.get(event) ?? /* @__PURE__ */ new Set();
+			handlers.set(event, set);
+			const handler = fn;
+			set.add(handler);
+			return () => set.delete(handler);
+		}
+	};
+	function end(keep) {
+		if (state !== "open" && state !== "opening") return;
+		const wasOpen = state === "open";
+		state = "idle";
+		cancel();
+		const stays = teardown(keep);
+		if (wasOpen && !stays) emit("close");
+	}
+	enders.set(host, () => end());
+	host[CONNECTED] = () => follow();
+	host[DISCONNECTED] = () => queueMicrotask(() => {
+		if (!host.isConnected) end(true);
+	});
+	return widget;
+}
+//#endregion
+export { discardDraft as n, createFeedback as t };

package/dist/{widget-Ca1heF8n.d.mts → widget-Z1KOUKjx.d.mts}

@@ -1,5 +1,5 @@
 
-import { n as Mark, t as FeedbackReport } from "./report-CIgy7uzP.mjs";
+import { n as Mark, t as FeedbackReport } from "./report-CaJegYyg.mjs";
 //#region src/capture.d.ts
 type CaptureOptions = {
   mode?: "dom" | "display";
@@ -8,6 +8,9 @@ type CaptureOptions = {
   quality?: number;
 };
 //#endregion
+//#region src/annotate.d.ts
+type Tool = Mark["tool"] | "select";
+//#endregion
 //#region src/widget.d.ts
 /** What each event passes to its handlers. */
 type FeedbackEvents = {
@@ -16,16 +19,17 @@ type FeedbackEvents = {
   submit: [report: FeedbackReport];
   sent: [report: FeedbackReport];
   error: [error: unknown];
+  saved: [];
 };
 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" | "undo" | "clear" | "cancel" | "send" | "sending" | "sent" | "error" | "retry", string>;
+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 FeedbackOptions = {
   onSubmit?: (report: FeedbackReport) => Promise<void>;
   endpoint?: string;
   headers?: Record<string, string> | (() => Record<string, string>);
   capture?: CaptureOptions;
-  tools?: Mark["tool"][];
+  tools?: Tool[];
   categories?: {
     id: string;
     label: string;
@@ -42,6 +46,7 @@ type FeedbackOptions = {
   unstyled?: boolean;
   container?: HTMLElement;
   tagName?: string;
+  draft?: "session" | "memory";
 };
 type FeedbackWidget = {
   open(): Promise<void>;
@@ -51,6 +56,11 @@ type FeedbackWidget = {
   update(options: { [K in keyof FeedbackOptions]?: FeedbackOptions[K] | undefined; }): void;
   on<E extends FeedbackEvent>(event: E, fn: (...args: FeedbackEvents[E]) => void): () => void;
 };
+/**
+ * Deletes the draft this tab keeps for a tag, as at a logout, so no later widget of the tag brings
+ * it back; a widget holding it, open or folded, ends it.
+ */
+declare function discardDraft(tagName?: string): Promise<void>;
 declare function createFeedback(options?: FeedbackOptions): FeedbackWidget;
 //#endregion
-export { FeedbackWidget as a, FeedbackStrings as i, FeedbackEvents as n, createFeedback as o, FeedbackOptions as r, CaptureOptions as s, FeedbackEvent as t };
+export { FeedbackWidget as a, CaptureOptions as c, FeedbackStrings as i, FeedbackEvents as n, createFeedback as o, FeedbackOptions as r, discardDraft as s, FeedbackEvent as t };