visual-feedback 0.2.0 → 0.3.0

package/AGENTS.md

@@ -74,8 +74,9 @@ your own words.
   limit. The local folder works only in development: keep its dev server on localhost instead, since
   it checks no user.
 - **If the app has sign-in, call `discardDraft()` from `visual-feedback` at logout, with the same
-  `tagName` if one was set.** Why: a folded or open draft, screenshots included, is kept in the tab
-  across page loads and route changes, and would come back for the next person who signs in there.
+  `tagName` if one was set.** Why: a draft, screenshots included, is kept in the tab across route
+  changes, and across page loads as it was last folded, and would come back for the next person
+  who signs in there.
 - **For GitHub Issues, default to a separate private repo. Offer the code repo only when the
   developer confirms it stays private forever.** Why: images cannot be fully erased from GitHub,
   and if the code repo is made public later, every report in it is exposed.

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.3.0 (2026-10-11)
+
+- Breaking: with no `--vf-*` variables set, the widget now matches the site by itself. It takes
+  the page's accent (`theme-color`, else its coloured buttons, else its links), its button corners
+  (up to 15px) and, with `theme: "auto"`, its background and text colour, light or dark following
+  that background. A guess that does not contrast keeps the old default: the accent needs 3:1
+  against the widget's background and the text 4.5:1; the hints, the text at 60%, take more of it
+  where they would fall under 4.5:1. A site that wants the system colours back sets them, such as
+  `--vf-accent: AccentColor`; any `--vf-*` it sets still wins, and setting only one of
+  `--vf-surface` and `--vf-text` keeps the other at its default.
+- The widget reads the page at load, at each open (a draft opened again from its bar too), when
+  `theme` or `css` changes, and when the page switches its theme: a change to the attributes of
+  `<html>` or `<body>` that changes the page's background, text colour or `color-scheme`, or a
+  change of the system's light or dark. The trigger, the dialog and the draft bar follow a site's
+  dark mode switch at once, or when the site's own colour fade ends. To see a switch it keeps one
+  mutation observer and one media query listener, both removed by `destroy()` (SPEC §9).
+- The note shows 4 rows when the dialog opens, and the screenshot leaves room for them, so Send
+  stays in the window.
+
 ## 0.2.0 (2026-10-10)
 
 - Breaking: a report holds `screenshots`, a list of up to 10, in place of `image` and `marks`.

package/README.md

@@ -4,7 +4,7 @@ A small button lets your users screenshot the page, mark it up and write a note.
 report and store it where you want. It has no service, no tracking and no global CSS, and it fits
 any design.
 
-![The feedback dialog over a video site, with a box and an arrow drawn around a card that shows NaN views](docs/demo.png)
+![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)
 
 ```sh
 npm install visual-feedback

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

@@ -504,7 +504,7 @@ 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 - 23em);margin:0 auto;color:var(--_mark)}.toolbar+.stage>.image{touch-action:none}.selection{position:absolute;pointer-events:none;box-sizing:border-box}.text-input{position:absolute;transform:translateY(-50%);min-width:6em;margin:0;box-sizing:content-box}.toolbar{display:flex;flex-direction:column;gap:4px}.dialog svg,.draft svg{width:1.15em;height:1.15em;flex:none;stroke-linecap:round}.divider{display:block}.strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}.thumb{position:relative;display:flex}.thumb-pick{position:relative;display:block;margin:0;padding:0;line-height:0}.thumb-image{display:block;height:3em;width:auto}.thumb-number{position:absolute;left:4px;top:4px;line-height:1.2}.thumb-remove{position:absolute;top:-.5em;right:-.5em}.add,.capture-view{display:inline-flex;align-items:center;gap:6px}.composer{display:grid;gap:8px}.note{box-sizing:border-box;width:100%;min-height:64px;resize:vertical}.footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.composer-bar,.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.send{display:inline-flex;align-items:center;gap:6px}.split{position:relative;display:flex;margin-left:auto}.send-more{display:inline-flex;align-items:center}.menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:1;display:grid;min-width:max-content}.menu[hidden]{display:none}.save-pdf{display:inline-flex;align-items:center;gap:8px}.draft{position:fixed;z-index:var(--_z);box-sizing:border-box;max-width:calc(100% - 2 * var(--_off));display:flex;flex-wrap:wrap;align-items:center;gap:8px}.draft-thumbs{display:flex;gap:4px}.draft-thumbs .thumb-image{height:1.75em}.drafting>.trigger{display:none}.live{position:fixed;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;
+const 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 ICONS = {
 	pen: "M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4zm9.5-13.5 4 4",
@@ -619,6 +619,7 @@ function thumbnail(image) {
 }
 function ink(button) {
 	const style = getComputedStyle(button);
+	delete button.dataset.ink;
 	if (style.getPropertyValue("--vf-accent-text").trim()) return;
 	let [r = 0, g = 0, b = 0] = /^rgba?\(([\d.]+), ([\d.]+), ([\d.]+)/.exec(style.backgroundColor)?.slice(1).map(Number) ?? [];
 	if (!/^rgb/.test(style.backgroundColor)) {
@@ -974,14 +975,19 @@ function mount(parent, handlers, settings = {}) {
 	function reopen() {
 		if (!minimised) return;
 		minimised = false;
+		handlers.restyle();
 		bar?.remove();
 		bar = void 0;
 		parent.append(backdrop);
 		backdrop.showModal();
 		lockPage(true);
 		renderStrip();
+		reink();
 		note?.focus();
 	}
+	function reink() {
+		for (const accent of parent.querySelectorAll(".send, .send-more, .capture-view")) ink(accent);
+	}
 	let seen;
 	let report;
 	let mounted = true;
@@ -1091,7 +1097,8 @@ function mount(parent, handlers, settings = {}) {
 		const field = element("textarea", "note", {
 			id: "vf-note",
 			placeholder: text.notePlaceholder,
-			maxlength: String(NOTE_LIMIT)
+			maxlength: String(NOTE_LIMIT),
+			rows: "4"
 		});
 		note = field;
 		const required = element("p", "error", {
@@ -1312,6 +1319,7 @@ function mount(parent, handlers, settings = {}) {
 			lockPage(true);
 		},
 		reopen,
+		reink,
 		async revive() {
 			reviving = true;
 			try {

package/dist/index.mjs

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

package/dist/react.mjs

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

package/dist/{widget-B1JDOVI1.mjs → widget-DvGTo0B4.mjs}

@@ -1,4 +1,156 @@
 
+//#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() {
@@ -10,9 +162,9 @@ function sheet(text) {
 	return result;
 }
 function variables() {
-	return `.vf{--_r:var(--vf-radius,16px);--_s:var(--vf-surface,Canvas);--_t:var(--vf-text,CanvasText);--_m:var(--vf-muted,color-mix(in srgb,var(--_t) 60%,transparent));--_b:var(--vf-border,color-mix(in srgb,var(--_t) 15%,transparent));--_a:var(--vf-accent,${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);--_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}:focus-visible{outline:2px solid var(--_f);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`;
+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");
@@ -39,6 +191,7 @@ function deepActive() {
 	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;
@@ -74,6 +227,9 @@ 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]?.();
 		}
@@ -137,11 +293,16 @@ function createFeedback(options = {}) {
 			...extra
 		];
 	}
+	let matched;
 	function apply() {
-		wrapper.style.colorScheme = options.theme?.replace("auto", "") ?? "";
 		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;
@@ -173,6 +334,50 @@ function createFeedback(options = {}) {
 	}
 	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);
@@ -235,7 +440,7 @@ function createFeedback(options = {}) {
 		returnFocus = deepActive();
 		const stream = kept ? void 0 : requestDisplay();
 		try {
-			dialogs ??= import("./dialog-B57CJ4I_.mjs").catch((error) => {
+			dialogs ??= import("./dialog-W6m1knfu.mjs").catch((error) => {
 				dialogs = void 0;
 				throw error;
 			});
@@ -249,6 +454,7 @@ function createFeedback(options = {}) {
 				state = "idle";
 				return;
 			}
+			match(wrapper, options.theme);
 			dialog = view.mount(wrapper, {
 				close: () => widget.close(),
 				retry: () => void retry(capture).catch((error) => {
@@ -257,7 +463,8 @@ function createFeedback(options = {}) {
 				}),
 				emit,
 				options: () => options,
-				keeps
+				keeps,
+				restyle: () => match(wrapper, options.theme)
 			}, options);
 			const mounted = dialog;
 			if (!kept) mounted.capture(image);
@@ -315,6 +522,8 @@ function createFeedback(options = {}) {
 			state = "destroyed";
 			cancel();
 			unlisten?.();
+			observer.disconnect();
+			system.removeEventListener("change", switched);
 			const closers = wasOpen && !teardown(true) ? [...handlers.get("close") ?? []] : [];
 			handlers.clear();
 			host.remove();
@@ -346,6 +555,7 @@ function createFeedback(options = {}) {
 		if (wasOpen && !stays) emit("close");
 	}
 	enders.set(host, () => end());
+	host[CONNECTED] = () => follow();
 	host[DISCONNECTED] = () => queueMicrotask(() => {
 		if (!host.isConnected) end(true);
 	});

package/docs/API.md

@@ -39,7 +39,7 @@ const feedback = createFeedback({
 | `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. |
 | `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 makes it match nothing. Without `Control` or `Meta` it does not fire while focus is in a text field. It does nothing while the dialog is open or a draft is kept in the draft bar. Opt-in; it is the widget's only global listener, one `keydown` on `window` (SPEC §9 names what the capture library keeps). |
+| `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 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. 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. |
 | `categories` | `{ id: string; label: string }[]` | none | Shows a category picker. |
 | `requireNote` | `boolean` | `true` | |
@@ -62,9 +62,9 @@ const feedback = createFeedback({
 |---|---|
 | `open(): Promise<void>` | Starts a capture. When a draft is kept in the draft bar, or this tab still keeps one, it opens the dialog on that draft instead, once it is back; when the dialog is open already, it does nothing. When the dialog cannot load or be shown, it rejects and `error` fires. |
 | `close(): void` | Cancels and discards the draft, also when it is kept in the draft bar, and never asks first as the Cancel button can (SPEC §2); one a page load is still bringing back is only hidden, kept, with no event (SPEC §7). Before `submit` fires, nothing is sent; after it, the delivery is not stopped, and `sent` or `error` still fires when it ends. |
-| `destroy(): void` | Removes the element, its listeners and its stylesheet, but not what the capture library keeps (SPEC §9). A delivery still under way fires neither `sent` nor `error` after it. The draft, open or folded, stays kept, so `close` does not fire: the next widget of the same tag made in this tab brings it back folded, as after a page load, so a route change keeps it. A host that removes the element gets the same. A draft it cannot keep ends, and `close` fires as the last event: with `draft: "memory"`, a Send already handed to the host (`submit` fired), a widget that does not own its tag's draft, no screenshot (the capture error, or after "Send without screenshot"), a screenshot taken while it did not keep drafts, or sessionStorage that refuses it. To end the draft too, as at a logout, call `discardDraft()`. A draft whose IndexedDB write then fails (storage full) is lost, with no `close`: the widget is gone by then. |
+| `destroy(): void` | Removes the element, its listeners, its watch of the page's theme and its stylesheet, but not what the capture library keeps (SPEC §9). A delivery still under way fires neither `sent` nor `error` after it. The draft, open or folded, stays kept, so `close` does not fire: the next widget of the same tag made in this tab brings it back folded, as after a page load, so a route change keeps it. A host that removes the element gets the same for the draft, but its listeners and its watch of the page's theme stay until `destroy()`. A draft it cannot keep ends, and `close` fires as the last event: with `draft: "memory"`, a Send already handed to the host (`submit` fired), a widget that does not own its tag's draft, no screenshot (the capture error, or after "Send without screenshot"), a screenshot taken while it did not keep drafts, or sessionStorage that refuses it. To end the draft too, as at a logout, call `discardDraft()`. A draft whose IndexedDB write then fails (storage full) is lost, with no `close`: the widget is gone by then. |
 | `on(event, fn): () => void` | Events: `open` (when a draft starts, and when a kept draft comes back), `close` (only when the draft ends: sent and closed, Cancel, Discard, `close()`, or a `destroy()` or removed element that does not keep it; folding into the draft bar, opening it again, and a `destroy()` or removal that keeps it fire none), `submit` (with the report, before each attempt), `sent` (with the report), `error` (with the error), `saved` (after Save as PDF downloads the PDF; nothing is sent). The type `FeedbackEvents` maps each event to what it passes. Returns an unsubscribe function. |
-| `update(options): void` | Merges these options into the current ones, key by key: a key given as `undefined` goes back to its default, and `strings` or `capture` replaces the whole object. `tagName` and `container` are ignored. The trigger, `position` (a draft bar already shown moves at its next fold), `theme`, `css`, `unstyled`, `strings.trigger`, `strings.triggerText` and `shortcut` change at once. The dialog's texts, `tools`, `categories` and `requireNote` apply from the next open, and the rest at the next capture or send. |
+| `update(options): void` | Merges these options into the current ones, key by key: a key given as `undefined` goes back to its default, and `strings` or `capture` replaces the whole object. `tagName` and `container` are ignored. The trigger, `position` (a draft bar already shown moves at its next fold), `theme`, `css`, `unstyled`, `strings.trigger`, `strings.triggerText` and `shortcut` change at once, and a new `theme` or `css` reads the page's look again (THEMING.md). The dialog's texts, `tools`, `categories` and `requireNote` apply from the next open, and the rest at the next capture or send. |
 
 ## discardDraft(tagName?: string): Promise<void>
 Deletes the draft this tab keeps for a tag (default `"visual-feedback"`), as at a logout, so no

package/docs/SPEC.md

@@ -55,8 +55,8 @@ annotating, draft --Cancel (it may ask first, below) / Discard--> idle
   speech control can say what it sees. It has no badge, and it does not move or pulse.
 - It sits 16 px from the edges by default, and 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 watch the page. The host moves it off its own content with `position` or
-  `--vf-offset`.
+- 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`.
 
 ## 4. Annotating
 - **Tools:** Pen (freehand), Box (rectangle outline), Arrow and Text. Text places a label where the
@@ -148,13 +148,19 @@ Defined in `docs/API.md` (`FeedbackReport`). It holds:
 - With the keyboard alone, the user can still write the note, choose a category and send without
   marks.
 - `prefers-reduced-motion` turns off every transition.
-- `prefers-color-scheme` sets the default theme (`theme: "auto"`).
+- With `theme: "auto"`, the page's own background sets light or dark, and `prefers-color-scheme`
+  where the page shows none (THEMING.md).
 
 ## 9. Budgets
 - **Loader** (the trigger and the `open()` wiring): 15 KB or less, minified and gzipped.
 - **Annotator and dialog:** 135 KB or less, gzipped. This does not include the capture library.
 - **Idle cost:** no work after the first paint of the trigger, past reading one sessionStorage
-  key at load; only when this tab kept a draft does the dialog load, to bring it back. After the first screenshot, the
+  key and the page's colours and button corners at load, and reading them again when the page
+  switches its theme (THEMING.md section 1). To see a switch, it keeps one mutation observer on
+  the attributes of `<html>` and `<body>` and on the children of `<html>` (to find a new
+  `<body>`), and one `change` listener on `prefers-color-scheme`, both gone at `destroy()`. A
+  change the observer sees that leaves the page's colours alone reads the colours of `<html>` and
+  `<body>` and scans nothing else; a system switch always reads the page. Only when this tab kept a draft does the dialog load, to bring it back. After the first screenshot, the
   capture library (snapdom) keeps 12 listeners on `window` and `document` and up to 5 mutation observers
   until the page unloads, and offers no way to remove them; `destroy()` removes everything else
   but a draft it keeps (§7). The opt-in `shortcut` adds one `keydown` listener on `window`, gone at
@@ -168,7 +174,7 @@ Chrome 111+, Firefox 113+ and Safari 16.4+. Older browsers get no trigger and no
 ## 11. Content Security Policy
 - The widget's own CSS goes in through constructable stylesheets. It uses no `<style>` tags, and
   sets the few inline styles it needs (the selection frame, a label being typed, the theme's
-  `color-scheme`) through the CSSOM, so a strict `style-src` does not block it. While the dialog is
+  `color-scheme` and the colours and corners it found on the page) through the CSSOM, so a strict `style-src` does not block it. While the dialog is
   open, the scroll lock sets `overflow` on `<html>` through the CSSOM, which a CSP allows, and
   puts back what was there on close.
 - Capture (`@zumer/snapdom`) renders through `data:` image URLs, so a site with a CSP needs

package/docs/THEMING.md

@@ -3,11 +3,34 @@
 The widget lives in one shadow root, so the site's CSS cannot break it, and its CSS cannot leak
 out. There are four ways to adapt it, from lightest to heaviest:
 
-## 1. It inherits
-Inside the shadow root, the widget sets `font: inherit` and `color-scheme: light dark`, so a site
-rule such as `* { all: unset }` cannot reset them. The defaults use the system colours `Canvas`,
-`CanvasText` and `AccentColor`. With no theming at all, it takes the site's font and follows light
-and dark mode.
+## 1. It matches the site
+Inside the shadow root, the widget sets `font: inherit`, so a site rule such as
+`* { all: unset }` cannot reset it. With no theming at all, it takes the site's font, and it
+reads the page when it loads, at each open (a draft opened again from its bar too), when
+`theme` or `css` changes, and when the page switches its theme: a change to the attributes of `<html>` or
+`<body>`, such as a `dark` class, that changes the page's background, text colour or
+`color-scheme`, or a change of the system's light or dark. The trigger, the dialog and the draft
+bar then take the new look at once, or, where the site fades its colours, when the fade ends. A
+widget whose element was off the page reads the page again when the element is put back. The rest
+of the page is not watched, so a look changed only by a new stylesheet shows at the next open.
+What it reads:
+
+- **accent:** the page's `<meta name="theme-color">` (one with a `media` attribute counts only
+  where its media matches), else the most common coloured background
+  of its buttons, else the colour of its links. Greys, muted colours, near black, near white and
+  the browser's own unstyled buttons do not count.
+- **corners:** the middle radius of the page's filled buttons, so the widget's buttons get the
+  same, up to 15px. A site where at least half of the filled buttons are pills keeps the
+  default.
+- **background and text**, with `theme: "auto"`: the page's background and text colour, and light
+  or dark from that background.
+
+A guess is used only when it contrasts: the accent 3:1 against the widget's background, the text
+4.5:1 against it. Otherwise the default stays: the system colours `Canvas`, `CanvasText` and
+`AccentColor`, light and dark from the system, and `16px` corners. With the page's text, the
+widget's hints take more of it than 60% where 60% would fall under 4.5:1. Each `--vf-*` variable
+the site sets wins over the guess for that variable; a site that sets only one of `--vf-surface`
+and `--vf-text` gets the other from the defaults.
 
 ## 2. CSS custom properties
 Set these on `visual-feedback` (or on any ancestor). Custom properties cross the shadow boundary.
@@ -15,12 +38,12 @@ Set these on `visual-feedback` (or on any ancestor). Custom properties cross the
 | variable | default | used for |
 |---|---|---|
 | `--vf-font` | `inherit` | font family of all text, such as `Inter, sans-serif` |
-| `--vf-radius` | `16px` | panel and composer, and a share of it for buttons and the image |
-| `--vf-surface` | `Canvas` | panel, tool rail and composer background |
-| `--vf-text` | `CanvasText` | text |
-| `--vf-muted` | text at 60% | hints, counters |
+| `--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 |
+| `--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` | `AccentColor`, or `#0b57d0` where the browser has no `AccentColor` | Send button, active tool |
+| `--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 |
 | `--vf-accent-text` | black or white, whichever contrasts more with the accent | text on the accent |
 | `--vf-focus` | `--vf-accent` | focus ring |
 | `--vf-mark` | `#e5243b` | marks on the screenshot |
@@ -68,5 +91,6 @@ Class names used inside the shadow root are part of the public API from 1.0. Bef
 change.
 
 ## Theme
-`theme: "light" | "dark"` sets `color-scheme` inside the shadow root, which forces that scheme.
-`"auto"` follows the system.
+`theme: "light" | "dark"` sets `color-scheme` inside the shadow root, which forces that scheme
+with the system colours. `"auto"` follows the page's background (section 1), and the system
+where the page shows none.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-feedback",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A small button lets your users screenshot the page, mark it up and write a note. You receive one report and store it where you want.",
   "keywords": [
     "feedback",
@@ -60,7 +60,7 @@
     "test:pack": "playwright test -c tests/pack-smoke/playwright.config.ts",
     "size": "size-limit",
     "publint": "publint --strict",
-    "check": "npm run check:static && npm run check:browser",
+    "check": "node tests/check.mjs",
     "check:static": "npm run lint && npm run typecheck && npm run build && npm run test && npm run test:edge && npm run size && npm run publint",
     "check:browser": "npm run test:e2e && npm run test:react && npm run test:pack",
     "prepack": "npm run --silent build -- --logLevel warn",