@saywright/vite 0.1.1 → 0.2.1

package/dist/bridge.js

@@ -1,9 +1,326 @@
-//#region src/protocol.ts
+//#region src/redact.ts
+/**
+* What is never recorded: passwords, one-time codes, keys and tokens, card and bank numbers. The bridge's two
+* recorders (test sessions, and Write test), the studio (for what an older plugin still sends), the tests it writes
+* and what it sends an AI all go by these rules, so a secret is caught the same way wherever it would show.
+*
+* A field is secret by what it is (a password field, a field someone marked private) or by what it is called (its
+* name, id, autocomplete, label or placeholder: “Password”, “cc-number”, “API key”, “رمز التحقق”). A value is secret
+* by its look alone (a card number, a key or a token), whatever its field is called. A test types a secret from the
+* environment (SAYWRIGHT_SECRET_PASSWORD), never from its own file.
+*/
+/** Shown in place of a secret. */
+var MASK = "•••";
+/** A value as it may be shown: a dot for each character, at most twelve, so its length is a hint and nothing more. */
+function dots(value) {
+	return "•".repeat(Math.min(value.length, 12));
+}
+/** A name, id or label as plain words: “cardNumber”, “card_number”, “cc-number” → “card number”, “cc number”. */
+function words$1(text) {
+	return text.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[^\p{L}\p{N}]+/gu, " ").trim().toLowerCase();
+}
+/** Words that make a field secret, whatever else it is called. */
+var SECRET_WORDS = new RegExp("\\b(?:" + [
+	"pass(?:word|wd|code|phrase|key)s?",
+	"pwd",
+	"pw",
+	"secrets?",
+	"tokens?",
+	"api ?keys?",
+	"access ?keys?",
+	"secret ?keys?",
+	"private ?keys?",
+	"client ?secrets?",
+	"licen[cs]e ?keys?",
+	"product ?keys?",
+	"activation ?(?:keys?|codes?)",
+	"recovery ?(?:keys?|codes?)",
+	"backup ?codes?",
+	"auth(?:entication|orization)? ?codes?",
+	"otp",
+	"totp",
+	"one ?time ?(?:codes?|passwords?|passcodes?|pins?)",
+	"(?:verification|security|confirmation|sms|2fa|mfa) ?codes?",
+	"2fa",
+	"mfa",
+	"cvv2?",
+	"cvc2?",
+	"csc",
+	"card ?(?:numbers?|num|no|codes?|verification|holder|security|expiry|expiration|exp|cvc|cvv)",
+	"name ?on ?card",
+	"credit ?cards?",
+	"debit ?cards?",
+	"cc ?(?:number|num|no|exp|expiry|csc|cvc|cvv|name|given|family|type)",
+	"iban",
+	"account ?(?:numbers?|num|no)",
+	"routing ?(?:numbers?|num|no)",
+	"sort ?codes?",
+	"ssn",
+	"social ?security",
+	"tax ?id",
+	"national ?id",
+	"passports?",
+	"pins?(?: ?codes?)?",
+	"(?:recovery|seed|secret|backup|mnemonic) ?(?:phrases?|words?)",
+	"mnemonics?",
+	"(?:security|secret) ?(?:questions?|answers?)",
+	"memorable ?(?:words?|information|info)",
+	"mother s maiden name"
+].join("|") + ")\\b");
+/** The same in Arabic (password, secret code, verification code, card number, account number). */
+var SECRET_WORDS_AR = /كلمة (?:ال)?(?:مرور|سر)|(?:ال)?رمز (?:ال)?(?:سري|تحقق|التحقق|أمان|الأمان|المرور)|رقم (?:ال)?(?:بطاقة|حساب|سري)|آيبان/;
+/** Whether a field described so (its type, name, id, autocomplete, label and placeholder, in one text) holds a secret. */
+function isSecretHint(hint) {
+	return SECRET_WORDS.test(words$1(hint)) || SECRET_WORDS_AR.test(hint);
+}
+/** Words a field's label adds that don't tell one secret from another. */
+var FILLER = /* @__PURE__ */ new Set([
+	"enter",
+	"your",
+	"the",
+	"a",
+	"an",
+	"please",
+	"type",
+	"confirm",
+	"confirmation",
+	"repeat",
+	"again",
+	"re",
+	"retype",
+	"field",
+	"here",
+	"of",
+	"required",
+	"optional"
+]);
+/** A word before a secret that does tell it from another: a new password isn't the current one. */
+var QUALIFIER = /* @__PURE__ */ new Set([
+	"new",
+	"old",
+	"current",
+	"previous",
+	"admin",
+	"master",
+	"root"
+]);
+/**
+* What a secret is called in a test, from its field's label (or name): “Enter your password” → PASSWORD, “Card
+* number” → CARD_NUMBER, “New password” → NEW_PASSWORD, “Password (8 characters or more)” → PASSWORD; “Confirm
+* password” is PASSWORD too, so one value fills both.
+*/
+function secretName(label) {
+	const w = words$1(label);
+	const m = SECRET_WORDS.exec(w);
+	let name;
+	if (m) {
+		const before = w.slice(0, m.index).trim().split(" ").pop() ?? "";
+		name = [...QUALIFIER.has(before) ? [before] : [], ...m[0].split(" ")];
+	} else name = w.split(" ").filter((x) => x && !FILLER.has(x) && /^[a-z0-9]+$/.test(x)).slice(0, 3);
+	if (name.length) return name.join("_").toUpperCase().slice(0, 40);
+	if (/كلمة (?:ال)?(?:مرور|سر)/.test(label)) return "PASSWORD";
+	if (/تحقق|التحقق/.test(label)) return "VERIFICATION_CODE";
+	if (/بطاقة/.test(label)) return "CARD_NUMBER";
+	return "SECRET";
+}
+/** What may be a card number: digits with spaces or dashes between them (isCard decides). */
+var CARD = /\b\d(?:[ -]?\d){12,22}\b/g;
+/** Keys and tokens by their shape. */
+var TOKENS = [
+	/\beyJ[\w-]{6,}\.eyJ[\w-]{6,}\.[\w-]{6,}/g,
+	/\b(?:sk|rk)-[\w-]{16,}/g,
+	/\b(?:sk|rk)_(?:live|test)_[A-Za-z0-9]{10,}/g,
+	/\bgh[pousr]_[A-Za-z0-9]{20,}/g,
+	/\bgithub_pat_[A-Za-z0-9_]{20,}/g,
+	/\bglpat-[\w-]{16,}/g,
+	/\bxox[abprs]-[A-Za-z0-9-]{10,}/g,
+	/\bnpm_[A-Za-z0-9]{30,}/g,
+	/\bAKIA[0-9A-Z]{16}\b/g,
+	/\bAIza[0-9A-Za-z_-]{35}/g,
+	/\bwhsec_[A-Za-z0-9]{16,}/g,
+	/\bSG\.[\w-]{16,}\.[\w-]{16,}/g,
+	/(?<=\b(?:aws_?secret_?access_?key|secret_?access_?key|client_?secret|api_?secret|private_?key|access_?token|refresh_?token|auth_?token|password|passwd)["']?\s*[:=]\s*["']?)[^\s"',;}{]{8,}/gi,
+	/\b[a-z]{2,8}_(?:(?:live|test)_)?(?=[A-Za-z0-9]{20,}\b)(?=[A-Za-z0-9]*\d)(?=[A-Za-z0-9]*[a-z])(?=[A-Za-z0-9]*[A-Z])[A-Za-z0-9]{20,}\b/g,
+	/\bBearer\s+[A-Za-z0-9._~+/-]{12,}=*/g,
+	/-----BEGIN [A-Z ]*PRIVATE KEY-----[\s\S]*?(?:-----END [A-Z ]*PRIVATE KEY-----|$)/g
+];
+function luhn(digits) {
+	let sum = 0;
+	for (let i = 0; i < digits.length; i++) {
+		let d = Number(digits[digits.length - 1 - i]);
+		if (i % 2) d = d * 2 > 9 ? d * 2 - 9 : d * 2;
+		sum += d;
+	}
+	return sum % 10 === 0;
+}
+/**
+* Whether digits are written as a card number is: 13 to 19 of them, starting with 2 to 6 (as cards of every network
+* do), passing the Luhn check, and either unbroken or in groups of 4 to 6 (the last one shorter) with one kind of
+* separator. Not a date with a number either side of it, an order row or a timestamp.
+*/
+function isCard(text) {
+	const d = text.replace(/\D/g, "");
+	if (d.length < 13 || d.length > 19 || !/^[2-6]/.test(d) || !luhn(d)) return false;
+	if (/^\d+$/.test(text)) return true;
+	if (text.includes(" ") && text.includes("-")) return false;
+	const groups = text.split(/[ -]/);
+	return groups.every((g) => /^\d+$/.test(g)) && groups.slice(0, -1).every((g) => g.length >= 4 && g.length <= 6) && groups[groups.length - 1].length <= 6;
+}
+/** A card number in `run` (digits with spaces or dashes), with what follows it kept: the longest first part that is one. */
+function maskCard(run) {
+	const parts = run.split(/(?<=\d)(?=[ -])/);
+	for (let k = parts.length; k > 0; k--) {
+		const head = parts.slice(0, k).join("");
+		if (isCard(head)) return `•••• ${head.replace(/\D/g, "").slice(-4)}${parts.slice(k).join("")}`;
+	}
+	return run;
+}
+/** Text with every card number (kept: its last four digits) and every key- or token-shaped string in it masked. */
+function maskSecrets(text) {
+	if (!text) return text;
+	let out = text.replace(CARD, maskCard);
+	out = out.replace(/\b([a-z][a-z0-9+.-]*:\/\/[^\s:@/]+:)([^\s@/]+)@/gi, (_m, head) => `${head}${MASK}@`);
+	for (const re of TOKENS) out = out.replace(re, (m) => m.startsWith("Bearer") ? `Bearer ${MASK}` : MASK);
+	return out;
+}
+/**
+* Whether a typed value is a secret by its look alone: a card number, a key or a token, or a long random string (of
+* letters in both cases and digits, as keys are; or 32 hexadecimal digits or more). A slug, a sentence, an email
+* address or a coupon code is not.
+*/
+function looksSecret(value) {
+	const v = value.trim();
+	if (v.length < 12) return false;
+	if (maskSecrets(v) !== v) return true;
+	if (/^[a-f0-9]{32,}$/i.test(v) && /\d/.test(v) && /[a-f]/i.test(v)) return true;
+	return /^[A-Za-z0-9+/_=-]{24,}$/.test(v) && /\d/.test(v) && /[a-z]/.test(v) && /[A-Z]/.test(v);
+}
+/** Query and hash parameters whose value is a secret by their name alone. */
+var SECRET_PARAM = /^(?:access_?token|refresh_?token|id_?token|auth_?token|token|auth|authorization|api_?key|apikey|key|secret|client_?secret|password|passwd|pwd|pass|otp|code_?verifier|jwt|session|session_?id|sessionid|sid|signature|sig|x-amz-signature|x-amz-credential|x-amz-security-token|x-goog-signature|x-goog-credential)$/i;
+/** Addresses of sign-in steps, where `code`, `state` and `nonce` carry what lets someone in. */
+var AUTH_PATH = /(?:^|\/)(?:callback|oauth2?|auth|authorize|sso|login|signin|sign-in|verify|magic|reset|confirm)(?:[/?#.]|$)/i;
+/** Whether a page's path is a sign-in step's (/login, /verify, /auth/callback…): a code asked for there lets someone in. */
+function isAuthPath(pathname) {
+	return AUTH_PATH.test(pathname);
+}
+/** Codes that are not secrets: a test needs them as typed (SAVE20, a postal code, a colour). */
+var PLAIN_CODE = /\b(?:coupon|promo|promotion|discount|voucher|gift|referral|invite|invitation|postal|post|zip|area|country|dialling|dialing|product|sku|item|colou?r|tracking|order|booking|reference|ref|course|class|group|room|seat|ticket|event|campaign|source|language|currency|qr|bar|barcode|html|css|snippet|embed|promotional)\b/;
+/**
+* Whether a field described so asks for a code that lets someone in, by its look: called a code or a PIN (“Code”,
+* “Enter the 6-digit code we emailed you”), not a coupon or a postal code, and short and numeric (its input mode,
+* type, pattern or length), or asked for on a sign-in step's page.
+*/
+function isCodeField(hint, field, pathname = "") {
+	const w = words$1(hint);
+	if (!/\b(?:code|codes|pin|passcode)\b/.test(w) || PLAIN_CODE.test(w)) return false;
+	return field.numeric || field.shortMax || isAuthPath(pathname);
+}
+function decoded(s) {
+	try {
+		return decodeURIComponent(s.replace(/\+/g, " "));
+	} catch {
+		return s;
+	}
+}
+/** `a=1&b=2` with the values of secret parameters masked, and key- or token-shaped values too. */
+function maskParams(params, authPath) {
+	return params.split("&").map((pair) => {
+		const eq = pair.indexOf("=");
+		if (eq < 0) return maskSecrets(pair);
+		const name = decoded(pair.slice(0, eq));
+		const value = pair.slice(eq + 1);
+		if (!value) return pair;
+		const secret = SECRET_PARAM.test(name) || isSecretHint(name) || authPath && /^(?:code|state|nonce)$/i.test(name) || looksSecret(decoded(value));
+		return `${pair.slice(0, eq)}=${secret ? MASK : maskSecrets(value)}`;
+	}).join("&");
+}
+/**
+* An address with the secrets in it masked: the values of parameters named like a token, key, password or session
+* (in its query, and in its hash: `#access_token=…`), sign-in codes, and key- or token-shaped parts of its path.
+* Works on whole and relative addresses, and never throws.
+*/
+function redactUrl(url) {
+	if (!url) return url;
+	const hashAt = url.indexOf("#");
+	const base = hashAt < 0 ? url : url.slice(0, hashAt);
+	const hash = hashAt < 0 ? null : url.slice(hashAt + 1);
+	const q = base.indexOf("?");
+	const path = q < 0 ? base : base.slice(0, q);
+	const authPath = AUTH_PATH.test(path);
+	let out = maskSecrets(path).replace(/(?<=\/)[A-Za-z0-9_-]{24,}(?=\/|$)/g, (part) => /\d/.test(part) && /[a-z]/.test(part) && /[A-Z]/.test(part) ? MASK : part);
+	if (q >= 0) out += `?${maskParams(base.slice(q + 1), authPath)}`;
+	if (hash !== null) {
+		const hq = hash.indexOf("?");
+		if (hq >= 0) out += `#${maskSecrets(hash.slice(0, hq))}?${maskParams(hash.slice(hq + 1), authPath || AUTH_PATH.test(hash.slice(0, hq)))}`;
+		else out += `#${hash.includes("=") ? maskParams(hash, authPath) : maskSecrets(hash)}`;
+	}
+	return out;
+}
+/** A recorded element's words, masked: text it showed may hold a card number or a key. */
+function scrubTarget(el) {
+	if (!el || typeof el !== "object") return;
+	const t = el;
+	if (typeof t.label === "string") t.label = maskSecrets(t.label);
+	if (typeof t.text === "string") t.text = maskSecrets(t.text);
+	if (typeof t.description === "string") t.description = maskSecrets(t.description);
+}
 /**
-* Message protocol between the Saywright studio (parent window) and the
-* bridge running inside the target app (iframe). Both sides check `ns` and the
-* message source before trusting anything.
+* A session event as it may be kept: addresses with their secrets masked (see redactUrl), card numbers and keys
+* masked in every text it carries (errors, console lines, response bodies, what the screen said), and a typed value
+* that is a secret (by its field's name, or its look) as dots. The bridge records events so; the studio scrubs
+* what arrives again, for events an older plugin recorded. Changes the event in place, and returns it.
 */
+function scrubEvent(event) {
+	const e = event;
+	const url = (k) => {
+		if (typeof e[k] === "string") e[k] = redactUrl(e[k]);
+	};
+	const text = (k) => {
+		if (typeof e[k] === "string") e[k] = maskSecrets(e[k]);
+	};
+	scrubTarget(e.el);
+	switch (e.type) {
+		case "page":
+			url("url");
+			url("referrer");
+			break;
+		case "nav":
+			url("url");
+			break;
+		case "net":
+			url("url");
+			text("body");
+			text("error");
+			break;
+		case "error":
+		case "console":
+			text("message");
+			text("text");
+			text("stack");
+			break;
+		case "dom":
+			url("url");
+			text("text");
+			if (Array.isArray(e.headings)) e.headings = e.headings.map((h) => typeof h === "string" ? maskSecrets(h) : h);
+			break;
+		case "input": {
+			const target = e.el ?? {};
+			const value = typeof e.value === "string" ? e.value : "";
+			if (!e.masked && (isSecretHint(`${target.label ?? ""} ${target.name ?? ""}`) || looksSecret(value))) {
+				e.value = dots(value);
+				e.masked = true;
+				e.secret ??= secretName(target.label || target.name || "");
+			} else if (!e.masked) text("value");
+			break;
+		}
+		case "change":
+			text("value");
+			if (Array.isArray(e.options)) e.options = e.options.map((o) => typeof o === "string" ? maskSecrets(o) : o);
+	}
+	return event;
+}
+//#endregion
+//#region src/protocol.ts
 var NS = "saywright";
 /** Which side has to be updated for a studio and an app's bridge to work together: the app's plugin, the studio, or neither. */
 function outdated(studio, bridge) {
@@ -11,7 +328,14 @@ function outdated(studio, bridge) {
 	if (studio.v < (bridge.oldest ?? bridge.v)) return "studio";
 	return null;
 }
-var STUDIO_URL = `http://localhost:7357`;
+/** Where the studio runs unless told otherwise. Not 5173: that is Vite's own default, where your app likely runs. */
+var STUDIO_PORT = 7357;
+/**
+* Through the studio's proxy, a page's XMLHttpRequest to another port of this computer says with this header that it
+* was sent with its credentials (withCredentials, set after open): the proxy then sends the site's cookies with it.
+*/
+var PROXY_CREDENTIALS_HEADER = "x-saywright-credentials";
+var STUDIO_URL = `http://localhost:${STUDIO_PORT}`;
 /** Attribute names injected by the Vite plugin at compile time. */
 var SRC_ATTR = "data-ds-src";
 function isStudioMessage(data) {
@@ -451,13 +775,13 @@ function collapse(s, max = 80) {
 }
 /**
 * Text as a person reads it on screen, line by line: blank lines dropped, spaces collapsed, long lines cut, whole
-* lines up to `max` characters, and card numbers masked to their last four digits.
+* lines up to `max` characters, card numbers masked to their last four digits, and keys and tokens masked.
 */
 function screenLines(text, max, line = 200) {
 	const out = [];
 	let size = 0;
 	for (const raw of text.split("\n")) {
-		const l = collapse(maskCards(raw), line);
+		const l = collapse(maskSecrets(raw), line);
 		if (!l) continue;
 		if (size + l.length + 1 > max) break;
 		out.push(l);
@@ -465,22 +789,6 @@ function screenLines(text, max, line = 200) {
 	}
 	return out.join("\n");
 }
-/** A card number (13 to 19 digits that pass the Luhn check, spaces or dashes allowed) shown as •••• and its last four. */
-function maskCards(text) {
-	return text.replace(/\b\d(?:[ -]?\d){12,18}\b/g, (m) => {
-		const digits = m.replace(/\D/g, "");
-		return luhn(digits) ? `•••• ${digits.slice(-4)}` : m;
-	});
-}
-function luhn(digits) {
-	let sum = 0;
-	for (let i = 0; i < digits.length; i++) {
-		let d = Number(digits[digits.length - 1 - i]);
-		if (i % 2) d = d * 2 > 9 ? d * 2 - 9 : d * 2;
-		sum += d;
-	}
-	return sum % 10 === 0;
-}
 /**
 * What an element is made of, in a few characters: its tag and classes, and a hash of what is inside it
 * (without Saywright's attributes or ids that change from one load to the next). Two icon buttons written one
@@ -511,11 +819,11 @@ function roleOf(el) {
 		case "a": return el.hasAttribute("href") ? "link" : null;
 		case "input": {
 			const type = (el.type || "text").toLowerCase();
-			if (type === "hidden") return null;
+			if (type === "hidden" || type === "password") return null;
 			return INPUT_ROLES[type] ?? "textbox";
 		}
 		case "textarea": return "textbox";
-		case "select": return "combobox";
+		case "select": return el.multiple || el.size > 1 ? "listbox" : "combobox";
 		case "img": return el.getAttribute("alt") ? "img" : null;
 		case "nav": return "navigation";
 		case "main": return "main";
@@ -538,42 +846,205 @@ function textOfIds(ids) {
 function isField(el) {
 	return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
 }
+/** What people already mark so that session-replay tools never record it (Saywright's own mark first). */
+var PRIVATE = "[data-saywright-secret], [data-private], [data-sensitive], [data-mask], [data-sentry-mask], [data-hj-suppress], [data-ph-no-capture], .rr-mask, .rr-block, .sentry-mask, .fs-mask, .fs-exclude, .hj-suppress, .ph-no-capture";
+/** Password fields seen as such: one that “show password” turned into a text field still holds a password. */
+var passwords = /* @__PURE__ */ new WeakSet();
+/** Words that describe a field: its type, name, id, autocomplete, label, placeholder and test id. */
+function fieldHint(el) {
+	return [
+		el.type,
+		el.getAttribute("name"),
+		el.id,
+		el.getAttribute("autocomplete"),
+		el.getAttribute("aria-label"),
+		el.getAttribute("placeholder"),
+		el.getAttribute("data-testid"),
+		labelText(el)
+	].filter(Boolean).join(" ");
+}
+/**
+* Whether what is typed into this field is a secret, never to be recorded or shown: a password field (also once
+* “show password” has made it a text field), a field marked private (data-saywright-secret, or the marks other
+* replay tools use), one called like a secret (see isSecretHint), or one holding a value that looks like one.
+*/
+function isSecretField(el) {
+	if (!isField(el) || el instanceof HTMLSelectElement) return false;
+	if (el instanceof HTMLInputElement && el.type === "password") {
+		passwords.add(el);
+		return true;
+	}
+	if (passwords.has(el) || el.closest("[data-saywright-secret], [data-private], [data-sensitive], [data-mask], [data-sentry-mask], [data-hj-suppress], [data-ph-no-capture], .rr-mask, .rr-block, .sentry-mask, .fs-mask, .fs-exclude, .hj-suppress, .ph-no-capture")) return true;
+	if (el instanceof HTMLInputElement && [
+		"checkbox",
+		"radio",
+		"file",
+		"range",
+		"color",
+		"submit",
+		"button",
+		"reset",
+		"image",
+		"hidden"
+	].includes(el.type)) return false;
+	const hint = fieldHint(el);
+	return isSecretHint(hint) || looksSecret(el.value) || codeField(el, hint);
+}
+/** A short numeric code asked for to sign in (“Code”, “Enter the 6-digit code we emailed you”), though nothing says one-time. */
+function codeField(el, hint) {
+	if (!(el instanceof HTMLInputElement)) return false;
+	const mode = (el.getAttribute("inputmode") ?? "").toLowerCase();
+	return isCodeField(hint, {
+		numeric: mode === "numeric" || mode === "decimal" || el.type === "tel" || el.type === "number" || /\\d|\[0-9/.test(el.pattern),
+		shortMax: el.maxLength >= 4 && el.maxLength <= 8
+	}, location.pathname);
+}
+/** What a test calls a secret field's value: PASSWORD, CARD_NUMBER… (from its label, else its name). */
+function secretNameOf(el) {
+	const name = ownSecretName(el);
+	if (name === "PASSWORD" && /\b(?:confirm|repeat|retype|re-?enter|again|verify)\b/i.test(fieldHint(el))) {
+		const form = el.closest("form") ?? el.parentElement?.closest("section, fieldset, div");
+		for (const other of Array.from(form?.querySelectorAll("input") ?? [])) {
+			if (other === el || !isSecretField(other)) continue;
+			const theirs = ownSecretName(other);
+			if (theirs !== "PASSWORD" && /PASSWORD$/.test(theirs)) return theirs;
+		}
+	}
+	return name;
+}
+function ownSecretName(el) {
+	if (el instanceof HTMLInputElement && el.type === "password" && !isSecretHint(labelText(el) || el.getAttribute("placeholder") || el.getAttribute("name") || "")) return "PASSWORD";
+	if (isField(el) && !(el instanceof HTMLSelectElement) && !isSecretHint(fieldHint(el)) && codeField(el, fieldHint(el))) return "ONE_TIME_CODE";
+	return secretName(labelText(el) || el.getAttribute("aria-label") || el.getAttribute("placeholder") || el.getAttribute("autocomplete") || el.getAttribute("name") || el.id || "");
+}
+/** What a field holds, as it may be shown or sent anywhere: a secret's value as dots, other values with any card number or key in them masked. */
+function fieldValue(el) {
+	return isSecretField(el) ? dots(el.value) : maskSecrets(el.value);
+}
+/**
+* A label's own words, as Playwright and screen readers name a field by it: without the fields inside it (a list's
+* options, a text area's text), so `<label>Plan <select>…</select></label>` is “Plan”, not “Plan BasicPlus”.
+*/
+function labelWords(label) {
+	let out = "";
+	const walk = (n) => {
+		if (n.nodeType === Node.TEXT_NODE) out += n.textContent ?? "";
+		else if (n instanceof Element && !isField(n) && !(n instanceof HTMLButtonElement)) for (const c of Array.from(n.childNodes)) walk(c);
+		else if (n instanceof HTMLButtonElement) out += n.textContent ?? "";
+	};
+	walk(label);
+	return out;
+}
+/** Roles of a control that is checked or not, as Playwright's toBeChecked reads it. */
+var TOGGLE_ROLES = /* @__PURE__ */ new Set([
+	"checkbox",
+	"radio",
+	"switch",
+	"menuitemcheckbox",
+	"menuitemradio"
+]);
+var isToggle$1 = (el) => el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio") || TOGGLE_ROLES.has(el.getAttribute("role") ?? "");
+/**
+* The control whose state something pointed at stands for: an option's list, a label's checkbox, the checkbox or
+* switch it is part of; else itself.
+*/
+function controlOf(el) {
+	if (el instanceof HTMLOptionElement || el instanceof HTMLOptGroupElement) return el.closest("select") ?? el;
+	if (isToggle$1(el) || el instanceof HTMLSelectElement) return el;
+	const label = el.closest("label");
+	const labelled = label?.control ?? label?.querySelector("input, select");
+	if (labelled && (isToggle$1(labelled) || labelled instanceof HTMLSelectElement)) return labelled;
+	return el.closest("[role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]") ?? el;
+}
+/** A state check's facts: whether the control is checked; for an option of a list, what it says and what is chosen now. */
+function stateOf(pointed, control) {
+	if (control instanceof HTMLSelectElement) {
+		const option = pointed instanceof HTMLOptionElement ? collapse(pointed.label || pointed.text, 80) : void 0;
+		return {
+			...option ? { option } : {},
+			chosen: Array.from(control.selectedOptions, (o) => collapse(o.label || o.text, 80))
+		};
+	}
+	if (control instanceof HTMLInputElement && isToggle$1(control)) return { checked: control.checked };
+	if (isToggle$1(control)) return { checked: control.getAttribute("aria-checked") === "true" };
+	return {};
+}
 /** Associated <label> text for a form field. */
 function labelText(el) {
 	if (!isField(el)) return "";
 	const parts = [];
-	if (el.id) for (const l of Array.from(document.querySelectorAll(`label[for="${CSS.escape(el.id)}"]`))) parts.push(l.textContent ?? "");
+	if (el.id) for (const l of Array.from(document.querySelectorAll(`label[for="${CSS.escape(el.id)}"]`))) parts.push(labelWords(l));
 	const wrapping = el.closest("label");
-	if (wrapping) parts.push(wrapping.textContent ?? "");
+	if (wrapping) parts.push(labelWords(wrapping));
 	return collapse(parts.join(" "), 60);
 }
-/** A practical approximation of the accessible name (enough for stable test locators). */
+var NAME_MAX = 200;
+/**
+* A practical approximation of the accessible name (enough for stable test locators). Whole up to 200 characters:
+* a locator is never written from a cut one (it would find nothing).
+*/
 function accessibleName(el) {
 	const aria = el.getAttribute("aria-label");
-	if (aria) return collapse(aria, 60);
+	if (aria) return collapse(aria, NAME_MAX);
 	const labelledBy = el.getAttribute("aria-labelledby");
-	if (labelledBy) return collapse(textOfIds(labelledBy), 60);
-	if (isField(el)) return labelText(el) || collapse(el.getAttribute("title"), 60);
-	if (el instanceof HTMLImageElement) return collapse(el.alt, 60);
+	if (labelledBy) return collapse(textOfIds(labelledBy), NAME_MAX);
+	if (isField(el)) return labelText(el) || collapse(el.getAttribute("title"), NAME_MAX);
+	if (el instanceof HTMLImageElement) return collapse(el.alt, NAME_MAX);
 	const title = el.getAttribute("title");
-	return collapse(el.innerText ?? el.textContent, 60) || collapse(title, 60);
+	return collapse(el.querySelector("img[alt], [aria-label]") ? contentName(el) : el.innerText ?? el.textContent, NAME_MAX) || collapse(title, NAME_MAX);
+}
+/**
+* An element's name from what is inside it, as Playwright and screen readers read it: text, an image's alt, a part's
+* own label; hidden parts left out, a block on its own words. A link that is only a picture is named by the picture.
+*/
+function contentName(el) {
+	let out = "";
+	const walk = (n) => {
+		if (n.nodeType === Node.TEXT_NODE) {
+			out += n.textContent ?? "";
+			return;
+		}
+		if (!(n instanceof Element) || n.getAttribute("aria-hidden") === "true" || n.hasAttribute("hidden")) return;
+		const display = getComputedStyle(n).display;
+		if (display === "none") return;
+		const pad = display !== "inline" ? " " : "";
+		const own = n.getAttribute("aria-label") || (n instanceof HTMLImageElement ? n.alt : null);
+		if (own !== null && own !== "") out += `${pad}${own}${pad}`;
+		else if (!(n instanceof HTMLImageElement)) {
+			out += pad;
+			for (const c of Array.from(n.childNodes)) walk(c);
+			out += pad;
+		}
+	};
+	for (const c of Array.from(el.childNodes)) walk(c);
+	return out;
 }
 function visibleText(el) {
-	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return collapse(el.value || el.placeholder, 80);
+	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return collapse(isSecretField(el) ? el.placeholder : el.value || el.placeholder, 80);
+	if (el instanceof HTMLSelectElement) return collapse(Array.from(el.selectedOptions, (o) => o.label || o.text).join(", "), 80);
 	return collapse(el.innerText ?? el.textContent, 80);
 }
 function shortLabel(el) {
 	const aria = el.getAttribute("aria-label");
 	if (aria) return collapse(aria, 28);
-	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return collapse(labelText(el) || el.placeholder || el.value, 28);
+	if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return collapse(labelText(el) || el.placeholder || (isSecretField(el) ? "" : el.value), 28);
 	return collapse(el.innerText ?? el.textContent, 28);
 }
-/** Index of `el` among nodes rendered by the same JSX site (same data-ds-src). */
+/** Index of `el` among nodes rendered by the same JSX site (same data-ds-src), and how many there are. */
 function srcIndex(el, src) {
-	if (!src) return 0;
+	if (!src) return {
+		index: 0,
+		same: 1
+	};
 	const all = document.querySelectorAll(`[${SRC_ATTR}="${CSS.escape(src)}"]`);
-	for (let i = 0; i < all.length; i++) if (all[i] === el) return i;
-	return 0;
+	for (let i = 0; i < all.length; i++) if (all[i] === el) return {
+		index: i,
+		same: all.length
+	};
+	return {
+		index: 0,
+		same: all.length
+	};
 }
 function describe(el) {
 	const annotated = el.getAttribute(SRC_ATTR);
@@ -595,8 +1066,11 @@ function describe(el) {
 		text: visibleText(el),
 		role: roleOf(el),
 		rect: rectOf(el),
-		index: srcIndex(el, src)
+		index: 0
 	};
+	const at = srcIndex(el, annotated);
+	info.index = at.index;
+	if (at.same > 1) info.same = at.same;
 	if (frames.length) info.frames = frames;
 	if (!src) info.hint = sourceHint(el);
 	return info;
@@ -723,6 +1197,48 @@ function plainElement(el) {
 	return cur;
 }
 //#endregion
+//#region src/bridge/own.ts
+/**
+* Saywright's own work on the app's page (reading the screen, building
+* locators, answering the studio): timed, so a slow moment it caused is never
+* reported as the app's.
+*/
+var spans = [];
+/** Run some of our own work, remembering when it ran if it took long enough to matter. */
+function own(fn) {
+	const start = performance.now();
+	try {
+		return fn();
+	} finally {
+		const end = performance.now();
+		if (end - start >= 8) {
+			spans.push([start, end]);
+			if (spans.length > 64) spans.splice(0, spans.length - 64);
+		}
+	}
+}
+/** How much of [start, end] (performance.now() times) was our own work. */
+function ownTime(start, end) {
+	let ms = 0;
+	for (const [a, b] of spans) ms += Math.max(0, Math.min(b, end) - Math.max(a, start));
+	return ms;
+}
+/** When a replay or Autopilot last acted on the page (a click, typing, a key): the times of the last few. */
+var acted = [];
+/** A step a replay or Autopilot did, now. */
+function scriptedInput() {
+	acted.push(performance.now());
+	if (acted.length > 16) acted.shift();
+}
+/**
+* Whether a replay or Autopilot acted in the half second before `at` (a performance.now() time): as the browser
+* leaves out what moves right after a person's input (a menu opening where it was clicked), what moves right after a
+* scripted step is that step's doing, not the page shifting under the reader.
+*/
+function scriptedBefore(at, ms = 500) {
+	return acted.some((t) => t <= at && at - t <= ms);
+}
+//#endregion
 //#region src/bridge/actions.ts
 var CLICKABLE$2 = "button, a[href], [role=\"button\"], [role=\"link\"], [role=\"tab\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"radio\"], input, select, textarea, label, summary, [tabindex]";
 /** The element a click at (x, y) should activate. */
@@ -735,6 +1251,7 @@ var lastField = null;
 function clickAt(x, y) {
 	const el = clickTargetAt(x, y);
 	if (!el) return null;
+	scriptedInput();
 	if (el instanceof HTMLElement) {
 		if (isField(el) && !(el instanceof HTMLSelectElement) && ![
 			"checkbox",
@@ -762,6 +1279,7 @@ function setNativeValue(el, value) {
 	el.dispatchEvent(new Event("change", { bubbles: true }));
 }
 function typeText(text, submit) {
+	scriptedInput();
 	const active = document.activeElement;
 	const target = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement ? active : lastField && lastField.isConnected ? lastField : null;
 	if (!target) return null;
@@ -810,14 +1328,47 @@ function scrollAt(x, y, dx, dy) {
 function looksVolatile(s) {
 	return /^[\s$€£¥+\-−–.,:%0-9()]*$/.test(s) || /\d/.test(s) && s.length <= 12;
 }
+var squash = (s) => (s ?? "").replace(/\s+/g, "").toLowerCase();
+/** A number as a page shows it: 12, 1,234.50, 3.5. */
+var NUMBER = /\d[\d.,]*/g;
+var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&");
+/**
+* A name or a text with numbers in it ("Pay $91.57 and subscribe", "Like this portfolio (1)") as a pattern with the
+* numbers left open, so a fix that changes a price or a count still finds it. Null without numbers, or when only
+* its numbers say what it is.
+*/
+function numbersOpen(s) {
+	if (!/\d/.test(s) || s.length > 60 || s.endsWith("…")) return null;
+	const parts = s.split(NUMBER);
+	if (parts.join("").replace(/[^\p{L}]+/gu, "").length < 3) return null;
+	const source = `^${parts.map(escapeRe).join("\\d[\\d.,]*")}$`;
+	const hint = parts.map(squash).sort((a, b) => b.length - a.length)[0] ?? "";
+	return {
+		re: new RegExp(source),
+		code: `/${source}/`,
+		hint
+	};
+}
+var always = () => true;
+/** What the element will show: the expected value in place of the part of its text shaped like it, else that value alone. */
+function keeper(el, expected) {
+	const now = visibleText(el);
+	const shape = expected.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\d+/g, "\\d+");
+	const part = /\d/.test(expected) && shape !== expected ? new RegExp(shape).exec(now)?.[0] : void 0;
+	const then = now.toLowerCase().includes(expected.toLowerCase()) ? now : part ? now.replace(part, () => expected) : expected;
+	return (w) => typeof w === "string" ? then.toLowerCase().includes(w.toLowerCase()) : w.re.test(then);
+}
+/** Whether its name is its own text (a button's words), not given apart from it (a label, aria-label). */
+var namedByText = (el) => !el.hasAttribute("aria-label") && !el.hasAttribute("aria-labelledby") && !isField(el) && !(el instanceof HTMLImageElement);
 var ROLE_SELECTORS = {
 	button: "button, [role=\"button\"], input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]",
 	link: "a[href], [role=\"link\"]",
 	heading: "h1, h2, h3, h4, h5, h6, [role=\"heading\"]",
-	textbox: "input:not([type]), input[type=\"text\"], input[type=\"email\"], input[type=\"url\"], input[type=\"tel\"], input[type=\"password\"], textarea, [role=\"textbox\"]",
+	textbox: "input:not([type]), input[type=\"text\"], input[type=\"email\"], input[type=\"url\"], input[type=\"tel\"], textarea, [role=\"textbox\"]",
 	checkbox: "input[type=\"checkbox\"], [role=\"checkbox\"]",
 	radio: "input[type=\"radio\"], [role=\"radio\"]",
 	combobox: "select, [role=\"combobox\"]",
+	listbox: "select, [role=\"listbox\"]",
 	tab: "[role=\"tab\"]",
 	menuitem: "[role=\"menuitem\"]",
 	article: "article, [role=\"article\"]",
@@ -850,20 +1401,25 @@ function roleFor(el) {
 		default: return null;
 	}
 }
-var squash = (s) => (s ?? "").replace(/\s+/g, "").toLowerCase();
+/** Playwright's text matching: case-insensitive and partial (spaces collapsed), or exact. */
+function sameWords(actual, wanted, exact) {
+	const a = actual.replace(/\s+/g, " ").trim();
+	const w = wanted.replace(/\s+/g, " ").trim();
+	return exact ? a === w : a.toLowerCase().includes(w.toLowerCase());
+}
 /** The elements of this role (with this name, when given) in `scope`, as getByRole matches them. */
 function byRole(scope, role, name, exact, limit = Infinity) {
 	const sel = ROLE_SELECTORS[role] ?? `[role="${role}"]`;
-	const needle = squash(name);
+	const needle = name === null ? "" : typeof name === "string" ? squash(name) : name.hint;
 	const out = [];
 	const all = scope.querySelectorAll(sel);
 	for (let i = 0; i < all.length && out.length < limit; i++) {
 		const el = all[i];
-		if (name !== null && !isField(el) && !(el instanceof HTMLImageElement) && !el.hasAttribute("aria-labelledby") && !squash(el.textContent).includes(needle) && !squash(el.getAttribute("aria-label")).includes(needle) && !squash(el.getAttribute("title")).includes(needle)) continue;
+		if (name !== null && !isField(el) && !(el instanceof HTMLImageElement) && !el.hasAttribute("aria-labelledby") && !squash(el.textContent).includes(needle) && !squash(el.getAttribute("aria-label")).includes(needle) && !squash(el.getAttribute("title")).includes(needle) && !el.querySelector("img[alt], [aria-label]")) continue;
 		if (roleFor(el) !== role) continue;
 		if (name !== null) {
 			const an = accessibleName(el);
-			if (!(exact ? an === name : an.toLowerCase().includes(name.toLowerCase()))) continue;
+			if (!(typeof name !== "string" ? name.re.test(an) : exact ? an === name : an.toLowerCase().includes(name.toLowerCase()))) continue;
 		}
 		out.push(el);
 	}
@@ -875,7 +1431,7 @@ function byRole(scope, role, name, exact, limit = Infinity) {
 */
 var counted = /* @__PURE__ */ new Map();
 function countByRoleAndName(role, name, exact) {
-	const key = `${role}\n${exact ? 1 : 0}\n${name}`;
+	const key = `${role}\n${exact ? 1 : 0}\n${typeof name === "string" ? name : name.code}`;
 	const now = performance.now();
 	const hit = counted.get(key);
 	if (hit && now - hit.at < 1e3) return hit.n;
@@ -887,13 +1443,15 @@ function countByRoleAndName(role, name, exact) {
 	});
 	return n;
 }
-/** Innermost elements in `scope` whose own text is exactly `text`. */
+/** Innermost elements in `scope` whose own text is exactly `text` (or matches the pattern). */
 function byText$1(scope, text) {
 	const out = [];
+	const is = typeof text === "string" ? (t) => t === text : (t) => text.re.test(t);
 	const all = scope.querySelectorAll("*");
 	for (let i = 0; i < all.length; i++) {
 		const el = all[i];
-		if (collapse(el.innerText ?? "", 200) === text && !Array.from(el.children).some((c) => collapse(c.innerText ?? "", 200) === text)) out.push(el);
+		if (typeof text !== "string" && !squash(el.textContent).includes(text.hint)) continue;
+		if (is(collapse(el.innerText ?? "", 200)) && !Array.from(el.children).some((c) => is(collapse(c.innerText ?? "", 200)))) out.push(el);
 	}
 	return out;
 }
@@ -906,6 +1464,7 @@ function describeRole(role, name) {
 		checkbox: "checkbox",
 		radio: "option",
 		combobox: "menu",
+		listbox: "list",
 		tab: "tab"
 	}[role] ?? role}`;
 }
@@ -914,7 +1473,22 @@ function namingClass(el) {
 	for (const c of Array.from(el.classList)) if (/^[a-z][a-z-]{2,30}$/i.test(c) && !/--|^(?:flex|grid|block|inline|hidden|relative|absolute|fixed|sticky|static|container|row|col|clearfix|active|selected|open|disabled|dark|light|sr-only)$|^(?:p|m|w|h|text|bg|border|rounded|shadow|gap|space|items|justify|self|place|overflow|opacity|font|leading|tracking|min|max|ring|transition|duration|ease|cursor|select|pointer|z|top|left|right|bottom|inset|truncate|whitespace|break|shrink|grow|basis|order)-/.test(c)) return c;
 	return null;
 }
-function inners(el) {
+/** A tag as a person names what it holds. */
+var TAG_WORDS = {
+	td: "cell",
+	th: "heading",
+	dd: "value",
+	li: "item",
+	span: "text",
+	p: "text",
+	strong: "text",
+	b: "text",
+	div: "text",
+	output: "value",
+	time: "time",
+	img: "image"
+};
+function inners(el, keep) {
 	const out = [];
 	const testId = el.getAttribute("data-testid");
 	if (testId) out.push({
@@ -924,17 +1498,26 @@ function inners(el) {
 	});
 	const role = roleFor(el);
 	const name = named(role) ? accessibleName(el) : "";
-	if (role && name && !looksVolatile(name) && name.length <= 60) {
-		out.push({
-			code: `getByRole(${jsString(role)}, { name: ${jsString(name)} })`,
-			words: `“${name}”`,
-			count: (s) => byRole(s, role, name, false, 2).length
-		});
-		out.push({
-			code: `getByRole(${jsString(role)}, { name: ${jsString(name)}, exact: true })`,
+	const byName = !namedByText(el) || keep === always;
+	if (role && name && name.length <= 60) {
+		const open = numbersOpen(name);
+		if (open && (byName || keep(open))) out.push({
+			code: `getByRole(${jsString(role)}, { name: ${open.code} })`,
 			words: `“${name}”`,
-			count: (s) => byRole(s, role, name, true, 2).length
+			count: (s) => byRole(s, role, open, false, 2).length
 		});
+		if (!looksVolatile(name) && (byName || keep(name))) {
+			out.push({
+				code: `getByRole(${jsString(role)}, { name: ${jsString(name)} })`,
+				words: `“${name}”`,
+				count: (s) => byRole(s, role, name, false, 2).length
+			});
+			out.push({
+				code: `getByRole(${jsString(role)}, { name: ${jsString(name)}, exact: true })`,
+				words: `“${name}”`,
+				count: (s) => byRole(s, role, name, true, 2).length
+			});
+		}
 	}
 	if (isField(el)) {
 		const label = labelText(el);
@@ -951,11 +1534,19 @@ function inners(el) {
 		});
 	}
 	const text = visibleText(el);
-	if (!isField(el) && text && !looksVolatile(text) && text.length <= 40) out.push({
-		code: `getByText(${jsString(text)}, { exact: true })`,
-		words: `“${text}”`,
-		count: (s) => byText$1(s, text).length
-	});
+	if (!isField(el) && text && text.length <= 40) {
+		const open = numbersOpen(text);
+		if (open && keep(open)) out.push({
+			code: `getByText(${open.code})`,
+			words: `“${text}”`,
+			count: (s) => byText$1(s, open).length
+		});
+		if (!looksVolatile(text) && keep(text)) out.push({
+			code: `getByText(${jsString(text)}, { exact: true })`,
+			words: `“${text}”`,
+			count: (s) => byText$1(s, text).length
+		});
+	}
 	const tag = el.tagName.toLowerCase();
 	const cls = namingClass(el);
 	if (cls) out.push({
@@ -963,6 +1554,11 @@ function inners(el) {
 		words: `the ${cls.replace(/[-_]/g, " ")}`,
 		count: (s) => s.querySelectorAll(`${tag}.${CSS.escape(cls)}`).length
 	});
+	out.push({
+		code: `locator(${jsString(tag)})`,
+		words: `the ${TAG_WORDS[tag] ?? tag}`,
+		count: (s) => s.querySelectorAll(tag).length
+	});
 	return out;
 }
 /** A container, as a locator, and the elements that locator finds on the page. */
@@ -1010,12 +1606,12 @@ var SCOPE_LEVELS = 6;
 * holds only it and that its title tells apart from the others ("Celadon mug, 12 oz"). A card or a row is found by
 * its own title the same way.
 */
-function scoped(el) {
-	const ways = inners(el);
+function scoped(el, keep) {
+	const ways = inners(el, keep);
 	const text = visibleText(el);
 	const own = named(roleFor(el)) ? null : boxOf(el);
 	const ownTitle = own && titleOf(el, null);
-	if (own && ownTitle && own.all().filter((c) => matchesText(c, ownTitle)).length === 1) return {
+	if (own && ownTitle && keep(ownTitle) && own.all().filter((c) => matchesText(c, ownTitle)).length === 1) return {
 		code: `${own.code}.filter({ hasText: ${jsString(ownTitle)} })`,
 		description: `“${ownTitle}”`,
 		text,
@@ -1050,10 +1646,10 @@ var ordinal = (n) => `${n}${n % 100 >= 11 && n % 100 <= 13 ? "th" : [
 	"rd"
 ][n % 10] ?? "th"}`;
 /** The last resort: which of the same it is, counting from the top of the page. */
-function nth(el) {
+function nth(el, keep) {
 	const text = visibleText(el);
 	const role = roleFor(el);
-	const name = named(role) ? accessibleName(el) : "";
+	const name = named(role) && (!namedByText(el) || keep(accessibleName(el))) ? accessibleName(el) : "";
 	const tag = el.tagName.toLowerCase();
 	const cls = namingClass(el);
 	const pick = (code, all, words) => {
@@ -1101,6 +1697,8 @@ function locatorFromInfo(role, label, text, tag) {
 */
 function buildLocator(el, opts = {}) {
 	const text = visibleText(el);
+	const keep = opts.check !== void 0 ? keeper(el, opts.check) : always;
+	const byName = !namedByText(el) || keep === always;
 	const testId = el.getAttribute("data-testid");
 	if (testId && document.querySelectorAll(`[data-testid="${CSS.escape(testId)}"]`).length === 1) {
 		const name = collapse((accessibleName(el) || text).replace(/[-−–+]?\s?[$€£¥]?\s?\d[\d.,]*%?/g, " "), 30);
@@ -1113,39 +1711,79 @@ function buildLocator(el, opts = {}) {
 	const role = roleFor(el);
 	if (named(role)) {
 		const name = accessibleName(el);
-		if (name && !looksVolatile(name) && name.length <= 60) {
-			if (countByRoleAndName(role, name, false) === 1) return {
-				code: `page.getByRole(${jsString(role)}, { name: ${jsString(name)} })`,
+		if (name && name.length <= 60) {
+			const open = numbersOpen(name);
+			if (open && (byName || keep(open)) && countByRoleAndName(role, open, true) === 1) return {
+				code: `page.getByRole(${jsString(role)}, { name: ${open.code} })`,
 				description: describeRole(role, name),
 				text
 			};
-			if (countByRoleAndName(role, name, true) === 1) return {
-				code: `page.getByRole(${jsString(role)}, { name: ${jsString(name)}, exact: true })`,
-				description: describeRole(role, name),
+			if (!looksVolatile(name) && (byName || keep(name))) {
+				if (countByRoleAndName(role, name, false) === 1) return {
+					code: `page.getByRole(${jsString(role)}, { name: ${jsString(name)} })`,
+					description: describeRole(role, name),
+					text
+				};
+				if (countByRoleAndName(role, name, true) === 1) return {
+					code: `page.getByRole(${jsString(role)}, { name: ${jsString(name)}, exact: true })`,
+					description: describeRole(role, name),
+					text
+				};
+			}
+		} else if (name && byName) {
+			const start = name.slice(0, 50).replace(/\s+\S*$/, "");
+			if (start.length >= 12 && !looksVolatile(start) && countByRoleAndName(role, start, false) === 1) return {
+				code: `page.getByRole(${jsString(role)}, { name: ${jsString(start)} })`,
+				description: describeRole(role, `${start}…`),
 				text
 			};
 		}
 	}
 	if (isField(el)) {
-		const label = labelText(el);
-		if (label && Array.from(document.querySelectorAll("input, textarea, select")).filter((f) => labelText(f) === label).length === 1) return {
-			code: `page.getByLabel(${jsString(label)})`,
-			description: `the “${label}” field`,
+		const full = labelText(el);
+		const label = full.replace(/…$/, "");
+		if (label) {
+			const by = (exact) => Array.from(document.querySelectorAll("input, textarea, select, [aria-label]")).filter((f) => sameWords(labelText(f) || f.getAttribute("aria-label") || "", label, exact)).length;
+			if (by(false) === 1) return {
+				code: `page.getByLabel(${jsString(label)})`,
+				description: `the “${label}” field`,
+				text
+			};
+			if (label === full && by(true) === 1) return {
+				code: `page.getByLabel(${jsString(label)}, { exact: true })`,
+				description: `the “${label}” field`,
+				text
+			};
+		}
+		const ph = el.getAttribute("placeholder");
+		if (ph) {
+			const by = (exact) => Array.from(document.querySelectorAll("[placeholder]")).filter((f) => sameWords(f.getAttribute("placeholder") ?? "", ph, exact)).length;
+			if (by(false) === 1) return {
+				code: `page.getByPlaceholder(${jsString(ph)})`,
+				description: `the “${ph}” field`,
+				text
+			};
+			if (by(true) === 1) return {
+				code: `page.getByPlaceholder(${jsString(ph)}, { exact: true })`,
+				description: `the “${ph}” field`,
+				text
+			};
+		}
+	}
+	if ((!opts.cheap || document.getElementsByTagName("*").length < 2500) && text && text.length <= 40 && !isField(el)) {
+		const open = numbersOpen(text);
+		if (open && keep(open) && byText$1(document.body, open).length === 1) return {
+			code: `page.getByText(${open.code})`,
+			description: `“${text}”`,
 			text
 		};
-		const ph = el.getAttribute("placeholder");
-		if (ph && document.querySelectorAll(`[placeholder="${CSS.escape(ph)}"]`).length === 1) return {
-			code: `page.getByPlaceholder(${jsString(ph)})`,
-			description: `the “${ph}” field`,
+		if (!looksVolatile(text) && keep(text) && byText$1(document.body, text).length === 1) return {
+			code: `page.getByText(${jsString(text)}, { exact: true })`,
+			description: `“${text}”`,
 			text
 		};
 	}
-	if ((!opts.cheap || document.getElementsByTagName("*").length < 2500) && text && !looksVolatile(text) && text.length <= 40 && byText$1(document.body, text).length === 1) return {
-		code: `page.getByText(${jsString(text)}, { exact: true })`,
-		description: `“${text}”`,
-		text
-	};
-	return scoped(el) ?? nth(el);
+	return scoped(el, keep) ?? nth(el, keep);
 }
 //#endregion
 //#region src/bridge/explore.ts
@@ -1175,20 +1813,39 @@ function fieldOf(el) {
 	};
 	return {
 		type,
-		value: type === "password" ? el.value ? "••••" : "" : collapse(el.value, 60),
-		required: el.required
+		value: collapse(fieldValue(el), 60),
+		required: el.required,
+		...isSecretField(el) ? { secret: true } : {}
 	};
 }
+/** What pressing Enter in a field sends its form with: the form's default button (its first submit button), else the form's own name. */
+function submitsOf(el) {
+	if (!(el instanceof HTMLInputElement) || [
+		"checkbox",
+		"radio",
+		"file",
+		"submit",
+		"button",
+		"reset",
+		"image"
+	].includes(el.type)) return void 0;
+	const form = el.form;
+	if (!form) return void 0;
+	const button = form.querySelector("button:not([type]), button[type=\"submit\"], input[type=\"submit\"], input[type=\"image\"]");
+	return collapse(button ? accessibleName(button) || visibleText(button) || button.value : accessibleName(form), 60) || void 0;
+}
 function control(el, offscreen) {
 	const role = roleOf(el) ?? el.tagName.toLowerCase();
 	const name = collapse(accessibleName(el) || visibleText(el) || el.getAttribute("placeholder") || el.getAttribute("title"), 60);
 	const src = el.getAttribute("data-ds-src") ?? annotatedAncestor(el)?.getAttribute("data-ds-src") ?? null;
 	const disabled = el.disabled === true || el.getAttribute("aria-disabled") === "true";
+	const submits = submitsOf(el);
 	return {
 		locator: buildLocator(el, { cheap: true }).code,
 		role,
 		name,
 		...isField(el) ? { field: fieldOf(el) } : {},
+		...submits ? { submits } : {},
 		disabled,
 		offscreen,
 		src
@@ -1212,10 +1869,10 @@ function snapshot() {
 	const listed = placed.slice(0, MAX_CONTROLS);
 	const focused = listed.findIndex((p) => p.el === document.activeElement);
 	return {
-		url: location.href,
+		url: redactUrl(location.href),
 		title: document.title,
 		headings: Array.from(document.querySelectorAll("h1, h2, h3")).filter(isVisible).slice(0, 12).map((h) => collapse(h.textContent, 100)),
-		text: collapse(main.innerText, MAX_TEXT),
+		text: collapse(maskSecrets(main.innerText), MAX_TEXT),
 		controls: listed.map((p) => control(p.el, p.offscreen)),
 		more: Math.max(0, placed.length - MAX_CONTROLS),
 		dialog: dialog ? collapse(accessibleName(dialog) || dialog.querySelector("h1, h2, h3")?.textContent, 80) || "a dialog" : null,
@@ -1341,10 +1998,10 @@ function probe(x, y, radius, deep = false) {
 }
 var held = null;
 /**
-* For a hand: the highlight stays on what it is on until the point clearly
-* leaves it (a few pixels past its edge) or moves onto something inside it.
-* A fingertip wobbles; without this the highlight flickers between
-* neighbours, and a pinch selects whichever one it happened to be on.
+* For an unsteady pointer (an older studio's hand control asks for it): the
+* highlight stays on what it is on until the point clearly leaves it (a few
+* pixels past its edge) or moves onto something inside it. Without this the
+* highlight flickers between neighbours.
 */
 function probeSticky(x, y, radius, deep = false) {
 	const hit = probe(x, y, radius, deep);
@@ -1457,6 +2114,7 @@ var KINDS = {
 		"textbox",
 		"searchbox",
 		"combobox",
+		"listbox",
 		"field"
 	],
 	list: [
@@ -1615,9 +2273,22 @@ function parseLocator(code) {
 		i++;
 		return out;
 	};
+	/** A regular expression literal, as the recorder writes one for a name with its numbers left open: `/^Pay \$\d[\d.,]*$/`. */
+	const regex = () => {
+		const m = /^\/((?:[^/\\[\r\n]|\\.|\[(?:[^\]\\\r\n]|\\.)*\])+)\/([dgimsuy]*)/.exec(s.slice(i));
+		if (!m) return null;
+		try {
+			const re = new RegExp(m[1], m[2].replace(/[gy]/g, ""));
+			i += m[0].length;
+			return re;
+		} catch {
+			return null;
+		}
+	};
 	const value = () => {
 		ws();
 		if (s[i] === "'" || s[i] === "\"") return str();
+		if (s[i] === "/") return regex();
 		const num = /^-?\d+(?:\.\d+)?/.exec(s.slice(i));
 		if (num) {
 			i += num[0].length;
@@ -1641,7 +2312,7 @@ function parseLocator(code) {
 				if (!key || s[i] !== ":") return null;
 				i++;
 				const v = value();
-				if (v === null || typeof v === "object") return null;
+				if (v === null || typeof v === "object" && !(v instanceof RegExp)) return null;
 				obj[key] = v;
 				ws();
 				if (s[i] === ",") i++;
@@ -1683,21 +2354,25 @@ function parseLocator(code) {
 	return calls.length ? calls : null;
 }
 var norm = (s) => s.replace(/\s+/g, " ").trim();
-/** Playwright's matching: case-insensitive and partial by default, exact (case and all) when asked. */
+/** Playwright's matching: case-insensitive and partial by default, exact (case and all) when asked; a pattern as it is. */
 function matches(actual, wanted, exact) {
 	const a = norm(actual);
+	if (wanted instanceof RegExp) return wanted.test(a);
 	const w = norm(wanted);
 	return exact ? a === w : a.toLowerCase().includes(w.toLowerCase());
 }
+/** A pattern loosened to find what holds a match somewhere in its text (`^…$` let go). */
+var loose = (re) => new RegExp(re.source.replace(/^\^/, "").replace(/(?<!\\)\$$/, ""), re.flags);
 /** Innermost elements whose text is (or, not exact, contains) `text`. */
 function byText(scope, text, exact) {
-	const needle = norm(text).toLowerCase();
+	const needle = typeof text === "string" ? norm(text).toLowerCase() : "";
+	const somewhere = text instanceof RegExp ? loose(text) : null;
 	const hits = [];
 	const all = scope.querySelectorAll("body *");
 	for (let i = 0; i < all.length; i++) {
 		const el = all[i];
 		if (el instanceof HTMLScriptElement || el instanceof HTMLStyleElement) continue;
-		if (!norm(el.textContent ?? "").toLowerCase().includes(needle)) continue;
+		if (somewhere ? !somewhere.test(norm(el.textContent ?? "")) : !norm(el.textContent ?? "").toLowerCase().includes(needle)) continue;
 		if (!matches(isField(el) ? "" : visibleText(el), text, exact)) continue;
 		hits.push(el);
 	}
@@ -1749,29 +2424,30 @@ function elementsFor(calls, like) {
 	};
 	for (const c of calls) {
 		const [a, b] = c.args;
-		const opt = typeof b === "object" ? b : {};
+		const opt = typeof b === "object" && !(b instanceof RegExp) ? b : {};
+		const text = (v) => v instanceof RegExp ? v : String(v);
 		switch (c.name) {
 			case "getByTestId":
 				set = within((sc) => Array.from(sc.querySelectorAll(`[data-testid="${CSS.escape(String(a))}"]`)));
 				break;
 			case "getByRole": {
 				const role = String(a);
-				set = within((sc) => Array.from(sc.querySelectorAll(ROLE_SELECTORS[role] ?? `[role="${CSS.escape(role)}"]`)).filter((el) => roleFor(el) === role && (opt.name == null || matches(accessibleName(el), String(opt.name), !!opt.exact))));
+				set = within((sc) => Array.from(sc.querySelectorAll(ROLE_SELECTORS[role] ?? `[role="${CSS.escape(role)}"]`)).filter((el) => roleFor(el) === role && (opt.name == null || matches(accessibleName(el), text(opt.name), !!opt.exact))));
 				break;
 			}
 			case "filter": {
-				const f = typeof a === "object" ? a : {};
-				set = (set ?? []).filter((el) => (f.hasText == null || matches(el.textContent ?? "", String(f.hasText), false)) && (f.hasNotText == null || !matches(el.textContent ?? "", String(f.hasNotText), false)));
+				const f = typeof a === "object" && !(a instanceof RegExp) ? a : {};
+				set = (set ?? []).filter((el) => (f.hasText == null || matches(el.textContent ?? "", text(f.hasText), false)) && (f.hasNotText == null || !matches(el.textContent ?? "", text(f.hasNotText), false)));
 				break;
 			}
 			case "getByLabel":
-				set = within((sc) => Array.from(sc.querySelectorAll("input, textarea, select, [aria-label]")).filter((el) => matches(labelText(el) || el.getAttribute("aria-label") || "", String(a), !!opt.exact)));
+				set = within((sc) => Array.from(sc.querySelectorAll("input, textarea, select, [aria-label]")).filter((el) => matches(labelText(el) || el.getAttribute("aria-label") || "", text(a), !!opt.exact)));
 				break;
 			case "getByPlaceholder":
-				set = within((sc) => Array.from(sc.querySelectorAll("[placeholder]")).filter((el) => matches(el.getAttribute("placeholder") ?? "", String(a), !!opt.exact)));
+				set = within((sc) => Array.from(sc.querySelectorAll("[placeholder]")).filter((el) => matches(el.getAttribute("placeholder") ?? "", text(a), !!opt.exact)));
 				break;
 			case "getByText":
-				set = within((sc) => byText(sc, String(a), !!opt.exact));
+				set = within((sc) => byText(sc, text(a), !!opt.exact));
 				break;
 			case "locator":
 				try {
@@ -1812,14 +2488,34 @@ function find(code, like) {
 		reason: all.length ? "hidden" : "missing"
 	};
 }
+/** The option a recorded choice names: by its value, else by what it says (as it was recorded, "Express"). */
+function optionFor(el, wanted) {
+	const opts = Array.from(el.options);
+	const said = (o) => norm(o.label || o.text);
+	return opts.find((x) => x.value === wanted) ?? opts.find((x) => said(x) === norm(wanted)) ?? opts.find((x) => said(x).toLowerCase() === norm(wanted).toLowerCase());
+}
+/** Choose these options (all of them, in a list that takes several), as a person would: then input and change. */
+function choose(el, wanted) {
+	const picked = wanted.map((w) => optionFor(el, w));
+	if (!picked.length || picked.some((o) => !o)) throw new Error("no-option");
+	if (el.multiple) for (const o of Array.from(el.options)) o.selected = picked.includes(o);
+	else {
+		const setter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set;
+		if (setter) setter.call(el, picked[0].value);
+		else el.value = picked[0].value;
+	}
+	el.dispatchEvent(new Event("input", { bubbles: true }));
+	el.dispatchEvent(new Event("change", { bubbles: true }));
+}
+/** A control a person couldn't use now: disabled (itself or its fieldset), marked so, or in an inert part of the page. */
+function unusable(el) {
+	if (el.matches(":disabled")) return true;
+	if (el.closest("[inert]")) return true;
+	return el.closest("[aria-disabled]")?.getAttribute("aria-disabled") === "true";
+}
 /** Set a field's value the way React expects (native setter, then input and change). */
 function setValue(el, value) {
-	if (el instanceof HTMLSelectElement) {
-		const opts = Array.from(el.options);
-		const o = opts.find((x) => x.value === value) ?? opts.find((x) => norm(x.text) === norm(value)) ?? opts.find((x) => norm(x.text).toLowerCase() === norm(value).toLowerCase());
-		if (!o) throw new Error("no-option");
-		value = o.value;
-	}
+	if (el instanceof HTMLSelectElement) return choose(el, [value]);
 	if (el instanceof HTMLInputElement && el.type === "file") throw new Error("file");
 	const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : HTMLInputElement.prototype;
 	const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
@@ -1850,8 +2546,14 @@ var mouse = (type, x, y) => new MouseEvent(type, {
 	buttons: type === "mousedown" ? 1 : 0,
 	detail: 1
 });
-/** Do one step on an element: as a person would, so the app (and its recorder) sees the same events. */
+/**
+* Do one step on an element: as a person would, so the app (and its recorder) sees the same events. A control a
+* person couldn't use now (disabled, inert) is refused: clicking it would do nothing, and the replay would go on as
+* if it had worked.
+*/
 function act(el, step) {
+	if (unusable(el)) throw new Error("disabled");
+	scriptedInput();
 	const r = el.getBoundingClientRect();
 	const x = r.left + r.width / 2;
 	const y = r.top + r.height / 2;
@@ -1873,6 +2575,7 @@ function act(el, step) {
 			if (el.checked !== (step.checked ?? !el.checked)) el.click();
 			return;
 		}
+		if (el instanceof HTMLSelectElement && step.select?.length) return choose(el, step.select);
 		setValue(el, step.value ?? "");
 		return;
 	}
@@ -1903,9 +2606,10 @@ function act(el, step) {
 		if (down && key === "Enter" && el instanceof HTMLInputElement) el.form?.requestSubmit();
 	}
 }
-/** What an element shows now, for checking what the tester said it should show. */
+/** What an element shows now, for checking what the tester said it should show (a secret as dots). */
 function textOf$1(el) {
-	return isField(el) ? el.value : collapse(el.innerText ?? el.textContent ?? "", 400);
+	if (el instanceof HTMLSelectElement) return Array.from(el.selectedOptions, (o) => norm(o.label || o.text)).join(", ");
+	return isField(el) ? fieldValue(el) : collapse(el.innerText ?? el.textContent ?? "", 400);
 }
 //#endregion
 //#region src/bridge/forms.ts
@@ -1961,13 +2665,37 @@ var TEXTUAL = /* @__PURE__ */ new Set([
 	"number",
 	""
 ]);
+/** Inputs whose value is picked rather than typed: a test sets it (fill does, as the input keeps it: 2026-11-20). */
+var PICKED = /* @__PURE__ */ new Set([
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week",
+	"color",
+	"range"
+]);
+var KEY_NAME = {
+	ArrowDown: "↓",
+	ArrowUp: "↑",
+	Escape: "Escape"
+};
 function isTextField(el) {
 	if (el instanceof HTMLTextAreaElement) return true;
 	return el instanceof HTMLInputElement && TEXTUAL.has((el.type || "").toLowerCase());
 }
+var isPicked = (el) => el instanceof HTMLInputElement && PICKED.has((el.type || "").toLowerCase());
+var isToggle = (el) => el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio");
+/** A field that offers a list to choose from as you type (a WAI-ARIA combobox, or an input with a datalist). */
+var isCombobox = (el) => el.getAttribute("role") === "combobox" || el.hasAttribute("aria-autocomplete") || el instanceof HTMLInputElement && !!el.list;
+/** What an option is called: its label, else its text. */
+var optionName = (o) => collapse(o.label || o.text, 80);
 /**
 * Records what the user does in the app as Playwright steps: clicks, text
-* entry (one `fill` per field, flushed on change, blur or Enter) and Enter.
+* entry (one `fill` per field, flushed on change, blur or Enter), choices in
+* lists (every option chosen, in a list that takes several) and Enter. A
+* secret (a password, a card number…) is recorded by its name alone: what was
+* typed never leaves the page.
 */
 var Recorder = class {
 	emit;
@@ -1976,24 +2704,41 @@ var Recorder = class {
 	submits = new EnterSubmits();
 	constructor(emit) {
 		this.emit = emit;
+		document.addEventListener("pointerdown", this.onPointerDown, true);
 		document.addEventListener("click", this.onClick, true);
 		document.addEventListener("input", this.onInput, true);
 		document.addEventListener("change", this.onChange, true);
 		document.addEventListener("keydown", this.onKeyDown, true);
 		document.addEventListener("blur", this.onBlur, true);
+		document.addEventListener("focusin", this.onFocus, true);
 	}
 	setOn(on) {
 		if (!on) this.flushAll();
 		this.on = on;
 	}
+	/** Send the text still being typed now: what comes next (a check said about the page) comes after it. */
+	flushAll() {
+		for (const el of Array.from(this.pendingFill.keys())) this.flush(el);
+	}
+	onFocus = (e) => {
+		if (this.on && e.target instanceof Element && isField(e.target)) isSecretField(e.target);
+	};
+	/** What was being typed comes before what is clicked now: a combobox's suggestion keeps the focus in its field. */
+	onPointerDown = (e) => {
+		if (!this.on) return;
+		const t = e.target instanceof Node ? e.target : null;
+		for (const el of Array.from(this.pendingFill.keys())) if (!t || !el.contains(t)) this.flush(el);
+	};
 	onClick = (e) => {
 		if (!this.on) return;
 		const t = e.target instanceof Element ? e.target : null;
 		if (!t) return;
 		const el = t.closest(INTERACTIVE$1) ?? t;
-		if (isTextField(el)) return;
+		if (isTextField(el) || isPicked(el)) return;
+		if (isToggle(el)) return;
+		if (el instanceof HTMLSelectElement || el instanceof HTMLOptionElement) return;
 		if (this.submits.isSubmitClick(e, el)) return;
-		if (el instanceof HTMLLabelElement && el.control && isTextField(el.control)) return;
+		if (el instanceof HTMLLabelElement && el.control && (isTextField(el.control) || el.control instanceof HTMLSelectElement || isPicked(el.control) || isToggle(el.control))) return;
 		const loc = buildLocator(el);
 		this.emit({
 			kind: "click",
@@ -2014,13 +2759,32 @@ var Recorder = class {
 		const el = e.target;
 		if (!(el instanceof Element)) return;
 		if (isTextField(el)) this.flush(el);
-		else if (el instanceof HTMLSelectElement) {
+		else if (isPicked(el)) {
+			const prev = this.pendingFill.get(el);
+			if (prev) clearTimeout(prev);
+			this.pendingFill.set(el, setTimeout(() => this.flush(el), 600));
+		} else if (isToggle(el)) {
 			const loc = buildLocator(el);
+			const did = el.type === "radio" ? "Choose" : el.checked ? "Check" : "Uncheck";
 			this.emit({
 				kind: "fill",
 				locator: loc.code,
-				value: el.value,
-				description: `Choose “${el.value}” in ${loc.description}`
+				value: "",
+				checked: el.checked,
+				description: `${did} ${loc.description}`
+			});
+		} else if (el instanceof HTMLSelectElement) {
+			const loc = buildLocator(el);
+			const chosen = Array.from(el.selectedOptions);
+			const names = chosen.map(optionName);
+			const said = names.length ? names.map((n) => `“${n}”`).join(", ") : "nothing";
+			this.emit({
+				kind: "fill",
+				locator: loc.code,
+				value: chosen[0]?.value ?? "",
+				select: names,
+				values: chosen.map((o) => o.value),
+				description: `Choose ${said} in ${loc.description}`
 			});
 		}
 	};
@@ -2030,7 +2794,21 @@ var Recorder = class {
 		if (el instanceof Element && this.pendingFill.has(el)) this.flush(el);
 	};
 	onKeyDown = (e) => {
-		if (!this.on || e.key !== "Enter") return;
+		if (!this.on) return;
+		if (KEY_NAME[e.key]) {
+			const el = e.target;
+			if (!(el instanceof Element) || !isCombobox(el)) return;
+			if (this.pendingFill.has(el)) this.flush(el);
+			const loc = buildLocator(el);
+			this.emit({
+				kind: "press",
+				locator: loc.code,
+				key: e.key,
+				description: `Press ${KEY_NAME[e.key]} in ${loc.description}`
+			});
+			return;
+		}
+		if (e.key !== "Enter") return;
 		this.submits.keydown(e);
 		const el = e.target;
 		if (!(el instanceof Element) || !isField(el)) return;
@@ -2047,48 +2825,52 @@ var Recorder = class {
 		const t = this.pendingFill.get(el);
 		if (t) clearTimeout(t);
 		if (!this.pendingFill.delete(el)) return;
+		if (isPicked(el)) {
+			const loc = buildLocator(el);
+			this.emit({
+				kind: "fill",
+				locator: loc.code,
+				value: el.value,
+				description: `Set ${loc.description} to “${collapse(el.value, 60)}”`
+			});
+			return;
+		}
 		if (!isTextField(el)) return;
 		const loc = buildLocator(el);
+		if (isSecretField(el)) {
+			this.emit({
+				kind: "fill",
+				locator: loc.code,
+				value: "",
+				secret: secretNameOf(el),
+				description: `Type ${MASK} into ${loc.description}`
+			});
+			return;
+		}
+		const value = maskSecrets(el.value);
 		this.emit({
 			kind: "fill",
 			locator: loc.code,
-			value: el.value,
-			description: `Type “${el.value}” into ${loc.description}`
+			value,
+			description: `Type “${collapse(value, 60)}” into ${loc.description}`
 		});
 	}
-	flushAll() {
-		for (const el of Array.from(this.pendingFill.keys())) this.flush(el);
-	}
 };
 //#endregion
-//#region src/bridge/own.ts
+//#region src/bridge/proxy.ts
 /**
-* Saywright's own work on the app's page (reading the screen, building
-* locators, answering the studio): timed, so a slow moment it caused is never
-* reported as the app's.
+* When the studio shows a site through its proxy, the site's own absolute
+* addresses (https://example.com/...) would leave the proxy: requests,
+* sockets, workers, links, forms and navigations are pointed back into it
+* before the site's scripts run. A site on this computer that calls another
+* port of it (its API at http://localhost:5010) has those requests go through
+* the proxy too: from the proxy's address they would meet the API's CORS
+* rules as a stranger. The proxy applies those rules as the browser would
+* (each request says whether it carries the page's credentials). Cookies are kept under the site's own prefix in the
+* browser (cookies ignore ports, and other apps share localhost): the site's
+* scripts see their own names. Service workers are kept off, so an old cached
+* page never hides the studio.
 */
-var spans = [];
-/** Run some of our own work, remembering when it ran if it took long enough to matter. */
-function own(fn) {
-	const start = performance.now();
-	try {
-		return fn();
-	} finally {
-		const end = performance.now();
-		if (end - start >= 8) {
-			spans.push([start, end]);
-			if (spans.length > 64) spans.splice(0, spans.length - 64);
-		}
-	}
-}
-/** How much of [start, end] (performance.now() times) was our own work. */
-function ownTime(start, end) {
-	let ms = 0;
-	for (const [a, b] of spans) ms += Math.max(0, Math.min(b, end) - Math.max(a, start));
-	return ms;
-}
-//#endregion
-//#region src/bridge/proxy.ts
 /** This computer's own names. */
 var LOOPBACK$1 = /^(localhost|127\.0\.0\.1|\[::1\])$/;
 var portOf = (u) => u.port || (u.protocol === "https:" || u.protocol === "wss:" ? "443" : "80");
@@ -2098,7 +2880,7 @@ var portOf = (u) => u.port || (u.protocol === "https:" || u.protocol === "wss:"
 * site is on this computer: another port of it → the proxy's path for that port, /__saywright/<http|https>/<host:port>/…,
 * so the request leaves from the site's own address, as it does outside the studio. Anything else stays as it is.
 */
-function viaProxy(input, base, c, requests) {
+function viaProxy(input, base, c, requests, credentials = false) {
 	try {
 		const u = new URL(input, base);
 		const up = new URL(c.upstream);
@@ -2111,7 +2893,7 @@ function viaProxy(input, base, c, requests) {
 		if (!requests || !/^(https?|wss?):$/.test(u.protocol) || !LOOPBACK$1.test(up.hostname) || !LOOPBACK$1.test(u.hostname)) return input;
 		if (portOf(u) === portOf(proxy)) return input;
 		if (c.studio && portOf(u) === portOf(new URL(c.studio))) return input;
-		const scheme = u.protocol === "https:" || u.protocol === "wss:" ? "https" : "http";
+		const scheme = (u.protocol === "https:" || u.protocol === "wss:" ? "https" : "http") + (credentials ? "+cred" : "");
 		return `${u.protocol.startsWith("ws") ? "ws:" : proxy.protocol}//${proxy.host}/__saywright/${scheme}/${u.hostname}:${portOf(u)}` + u.pathname + u.search + u.hash;
 	} catch {
 		return input;
@@ -2124,22 +2906,35 @@ function proxyConfig() {
 function installProxyRewrites(c) {
 	/** Navigations, workers, history: the site's own address only. */
 	const to = (input) => viaProxy(input, location.href, c, false);
-	/** Requests: its API on another port of this computer too. */
-	const toRequest = (input) => viaProxy(input, location.href, c, true);
+	/** Requests: its API on another port of this computer too, saying whether they carry the page's credentials. */
+	const toRequest = (input, credentials = false) => viaProxy(input, location.href, c, true, credentials);
 	const mapped = (fn) => (url) => typeof url === "string" ? fn(url) : url instanceof URL ? new URL(fn(url.href)) : url;
 	const toAny = mapped(to);
-	const requestAny = mapped(toRequest);
+	const requestAny = mapped((u) => toRequest(u));
+	/** Sockets and beacons always carry the site's cookies. */
+	const requestWithCredentials = mapped((u) => toRequest(u, true));
 	const nativeFetch = window.fetch.bind(window);
 	window.fetch = (input, init) => {
+		const credentials = (init?.credentials ?? (input instanceof Request ? input.credentials : "same-origin")) === "include";
 		if (input instanceof Request) {
-			const next = toRequest(input.url);
+			const next = toRequest(input.url, credentials);
 			return nativeFetch(next === input.url ? input : new Request(next, input), init);
 		}
-		return nativeFetch(requestAny(input), init);
+		const url = typeof input === "string" ? toRequest(input, credentials) : new URL(toRequest(input.href, credentials));
+		return nativeFetch(url, init);
 	};
+	const proxied = /* @__PURE__ */ new WeakSet();
 	const open = XMLHttpRequest.prototype.open;
 	XMLHttpRequest.prototype.open = function(method, url, ...rest) {
-		return open.call(this, method, requestAny(url), ...rest);
+		const next = requestAny(url);
+		if (String(next).includes("/__saywright/")) proxied.add(this);
+		else proxied.delete(this);
+		return open.call(this, method, next, ...rest);
+	};
+	const send = XMLHttpRequest.prototype.send;
+	XMLHttpRequest.prototype.send = function(body) {
+		if (proxied.has(this) && this.withCredentials) this.setRequestHeader(PROXY_CREDENTIALS_HEADER, "include");
+		return send.call(this, body);
 	};
 	const wrap = (Native, map) => new Proxy(Native, { construct(target, args) {
 		if (args.length) args[0] = map(args[0]);
@@ -2147,17 +2942,20 @@ function installProxyRewrites(c) {
 	} });
 	const w = window;
 	for (const [name, map] of [
-		["WebSocket", requestAny],
-		["EventSource", requestAny],
+		["WebSocket", requestWithCredentials],
 		["Worker", toAny],
 		["SharedWorker", toAny]
 	]) {
 		const Native = w[name];
 		if (Native) w[name] = wrap(Native, map);
 	}
+	if (w.EventSource) w.EventSource = new Proxy(w.EventSource, { construct(target, args) {
+		if (args.length) args[0] = args[1]?.withCredentials ? requestWithCredentials(args[0]) : requestAny(args[0]);
+		return Reflect.construct(target, args);
+	} });
 	if (navigator.sendBeacon) {
 		const beacon = navigator.sendBeacon.bind(navigator);
-		navigator.sendBeacon = (url, data) => beacon(requestAny(url), data);
+		navigator.sendBeacon = (url, data) => beacon(requestWithCredentials(url), data);
 	}
 	for (const name of ["pushState", "replaceState"]) {
 		const native = History.prototype[name];
@@ -2248,6 +3046,73 @@ function installCookieNamespace(prefix) {
 	};
 	store.delete = (arg) => del(named(arg));
 }
+//#endregion
+//#region src/bridge/mask.ts
+/**
+* While a session records, the screen it shares shows every secret field as dots and blurs what is marked private:
+* its screenshots and video are pictures of the screen, so this is what keeps a card number, a one-time code or a
+* key out of them, as the recorded text keeps it out of the events. The same rules decide what is secret (see dom.ts).
+*/
+var ATTR = "data-saywright-masked";
+var STYLE_ID = "saywright-mask";
+var observer = null;
+function mark(el) {
+	if (isField(el) && !(el instanceof HTMLSelectElement) && isSecretField(el)) el.setAttribute(ATTR, "");
+}
+function scan(root) {
+	for (const el of Array.from(root.querySelectorAll("input, textarea"))) mark(el);
+}
+/** A field can become secret as it is used: a card number typed into one, a password shown as text. */
+var onUse = (e) => {
+	if (e.target instanceof Element) mark(e.target);
+};
+function maskScreen(on) {
+	if (typeof document === "undefined") return;
+	if (!on) {
+		observer?.disconnect();
+		observer = null;
+		removeEventListener("input", onUse, true);
+		removeEventListener("focusin", onUse, true);
+		document.getElementById(STYLE_ID)?.remove();
+		for (const el of Array.from(document.querySelectorAll(`[${ATTR}]`))) el.removeAttribute(ATTR);
+		return;
+	}
+	if (observer) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = `[${ATTR}]{-webkit-text-security:disc!important}${PRIVATE.split(",").map((s) => `${s.trim()}:not(input):not(textarea)`).join(",")}{filter:blur(6px)!important}`;
+	document.documentElement.appendChild(style);
+	scan(document);
+	observer = new MutationObserver((records) => {
+		for (const r of records) {
+			if (r.type === "attributes") {
+				if (r.target instanceof Element) mark(r.target);
+				continue;
+			}
+			for (const n of Array.from(r.addedNodes)) {
+				if (!(n instanceof Element)) continue;
+				mark(n);
+				scan(n);
+			}
+		}
+	});
+	observer.observe(document.documentElement, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: [
+			"type",
+			"name",
+			"id",
+			"autocomplete",
+			"aria-label",
+			"placeholder",
+			"inputmode"
+		]
+	});
+	addEventListener("input", onUse, true);
+	addEventListener("focusin", onUse, true);
+}
 /** What a request that may outlive the page can carry: browsers allow 64 KB for all of them together. */
 var KEEPALIVE_BYTES = 6e4;
 /** How soon a send follows an event that matters now (an error, a page change), and any other. */
@@ -2576,9 +3441,9 @@ var RequestTally = class {
 */
 var ACTIVE_KEY = "saywright.session";
 var PENDING_KEY = "saywright.session.pending";
+/** What counts as another target near a small one, as the Experts count it (a box's own label is part of it). */
+var TARGETS = "a[href], button, input:not([type=hidden]), select, textarea, summary, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"tab\"], [role=\"menuitem\"], [tabindex]:not([tabindex=\"-1\"])";
 var INTERACTIVE = "button, a[href], input, select, textarea, summary, label, [role=\"button\"], [role=\"link\"], [role=\"tab\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"radio\"], [role=\"switch\"], [role=\"option\"], [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])";
-/** Fields whose value is never recorded (by name, id or autocomplete: "password", "cc-number", "card_cvc"…). */
-var SECRET = /pass|secret|token|otp|cvv|cvc|csc|card|credit|\bcc-|cc-?num|cc-?exp|iban|ssn|pin\b/i;
 /** Requests that are the dev server or the studio talking, not the app. */
 var PLUMBING_URL = /\/@vite\/|\/@fs\/|\/@id\/|\/@react-refresh|\/node_modules\/|__saywright|\.hot-update\.|\/_next\/webpack-hmr|\/__nextjs|sockjs-node|\/api\/sessions\/|\/api\/speech\//;
 /** Where a session's events go. */
@@ -2687,6 +3552,20 @@ function shortUrl(url) {
 		return url;
 	}
 }
+/**
+* Whether something else to click is within 12 px of a small target's centre, where a 24 px circle on it would reach
+* (WCAG 2.5.8): looked for around it, so it costs the same on a page of any size.
+*/
+function crowded(el, r) {
+	const cx = r.left + r.width / 2;
+	const cy = r.top + r.height / 2;
+	for (const radius of [6, 11.5]) for (let k = 0; k < 16; k++) {
+		const a = k / 16 * 2 * Math.PI;
+		const other = document.elementFromPoint(cx + radius * Math.cos(a), cy + radius * Math.sin(a))?.closest(TARGETS);
+		if (other && other !== el && !el.contains(other) && !other.contains(el)) return true;
+	}
+	return false;
+}
 var SessionRecorder = class {
 	onStats;
 	onMoment;
@@ -2757,6 +3636,7 @@ var SessionRecorder = class {
 		writeJson(ACTIVE_KEY, null);
 		this.active = null;
 		this.outbox = null;
+		maskScreen(false);
 		outbox?.retire();
 		this.report();
 	}
@@ -2766,6 +3646,7 @@ var SessionRecorder = class {
 		writeJson(ACTIVE_KEY, null);
 		this.active = null;
 		this.outbox = null;
+		maskScreen(false);
 		this.report();
 	}
 	/** Record what is still being put together: a burst's count, a hover, the pointer's trail, typing, counted requests. */
@@ -2789,6 +3670,7 @@ var SessionRecorder = class {
 	}
 	begin(info, resumed) {
 		this.active = info;
+		maskScreen(true);
 		this.outbox = new Outbox(this.page, {
 			post: (body, keepalive) => deliver(eventsUrl(info), body, keepalive),
 			ended: () => this.endedElsewhere(info.id),
@@ -2829,11 +3711,11 @@ var SessionRecorder = class {
 	}
 	record(body, t, urgent = false) {
 		if (!this.active || !this.outbox) return;
-		this.outbox.push({
+		this.outbox.push(scrubEvent({
 			...body,
 			seq: ++this.seq,
 			t: Math.round(t)
-		}, urgent);
+		}), urgent);
 		this.stats.events++;
 		if ([
 			"error",
@@ -2922,6 +3804,7 @@ var SessionRecorder = class {
 			this.fibers.set(t, fiber);
 		}
 		if (tag === "a" && getComputedStyle(el).display === "inline") t.inline = true;
+		if ((r.width < 24 || r.height < 24) && r.width > 0 && r.height > 0 && !crowded(el, r)) t.spaced = true;
 		return t;
 	}
 	interactive(el) {
@@ -3083,7 +3966,7 @@ var SessionRecorder = class {
 	onInput = (e) => {
 		if (!this.active || !(e.target instanceof Element) || !isField(e.target) || ours(e.target)) return;
 		const el = e.target;
-		if (el instanceof HTMLInputElement && [
+		if (el instanceof HTMLSelectElement || el instanceof HTMLInputElement && [
 			"checkbox",
 			"radio",
 			"file",
@@ -3102,13 +3985,14 @@ var SessionRecorder = class {
 		this.fieldTimes.delete(el);
 		if (!this.fieldTimers.delete(el) || !isField(el)) return;
 		const value = "value" in el ? String(el.value) : "";
-		const secret = el instanceof HTMLInputElement && el.type === "password" || SECRET.test(`${el.getAttribute("name") ?? ""} ${el.id} ${el.getAttribute("autocomplete") ?? ""}`);
+		const secret = isSecretField(el);
 		const target = this.target(el);
 		this.recordLater({
 			type: "input",
 			el: target,
-			value: secret ? "•".repeat(Math.min(value.length, 12)) : collapse(value, 500),
-			masked: secret
+			value: secret ? dots(value) : collapse(value, 500),
+			masked: secret,
+			...secret ? { secret: secretNameOf(el) } : {}
 		}, typed, [[target, el]]);
 	}
 	flushFields() {
@@ -3128,12 +4012,14 @@ var SessionRecorder = class {
 			"time"
 		].includes(el.type)) {
 			const target = this.target(el);
-			const value = el instanceof HTMLSelectElement ? el.selectedOptions[0]?.text ?? el.value : el.type === "file" ? Array.from(el.files ?? []).map((f) => f.name).join(", ") : el.value;
+			const options = el instanceof HTMLSelectElement ? Array.from(el.selectedOptions, (o) => collapse(o.label || o.text, 80)) : void 0;
+			const value = el instanceof HTMLSelectElement ? options[0] ?? el.value : el.type === "file" ? Array.from(el.files ?? []).map((f) => f.name).join(", ") : el.value;
 			this.recordLater({
 				type: "change",
 				el: target,
 				value: collapse(value, 200),
-				checked: el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio") ? el.checked : void 0
+				checked: el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio") ? el.checked : void 0,
+				...options && options.length > 1 ? { options } : {}
 			}, eventTime(e), [[target, el]]);
 		}
 	};
@@ -3178,6 +4064,7 @@ var SessionRecorder = class {
 	};
 	onFocus = (e) => {
 		if (!this.active || !(e.target instanceof Element) || !isField(e.target) || ours(e.target)) return;
+		isSecretField(e.target);
 		const target = this.target(e.target);
 		this.recordLater({
 			type: "focus",
@@ -3257,12 +4144,14 @@ var SessionRecorder = class {
 		if (!this.active || location.href === this.lastNavUrl) return;
 		this.lastNavUrl = location.href;
 		this.flushFields();
-		this.record({
+		const at = now();
+		const url = location.href;
+		setTimeout(() => this.active && this.record({
 			type: "nav",
-			url: location.href,
+			url,
 			title: document.title,
 			how
-		}, now(), true);
+		}, at, true), 120);
 		setTimeout(() => this.snapshot("navigation"), 700);
 	}
 	onError = (e) => {
@@ -3511,7 +4400,7 @@ var SessionRecorder = class {
 		});
 		observe("layout-shift", (es) => {
 			for (const e of es) {
-				if (e.hadRecentInput || e.startTime < this.since) continue;
+				if (e.hadRecentInput || scriptedBefore(e.startTime) || e.startTime < this.since) continue;
 				this.cls += e.value;
 				if (e.value < .02) continue;
 				const node = e.sources?.find((s) => s.node instanceof Element)?.node;
@@ -3880,6 +4769,8 @@ var MicStream = class {
 };
 //#endregion
 //#region src/client/screen.ts
+/** How long starting waits for the shared picture's first frame. */
+var FIRST_FRAME_WAIT_MS = 1500;
 function videoMime() {
 	for (const m of [
 		"video/webm;codecs=vp9",
@@ -3941,8 +4832,8 @@ var ScreenCapture = class {
 		video.muted = true;
 		video.playsInline = true;
 		video.srcObject = stream;
-		await video.play().catch(() => void 0);
 		this.video = video;
+		await Promise.race([video.play().catch(() => void 0), new Promise((resolve) => setTimeout(resolve, FIRST_FRAME_WAIT_MS))]);
 	}
 	/** Start the video (when `video`): the session has begun. */
 	record(video) {
@@ -3966,7 +4857,11 @@ var ScreenCapture = class {
 	/** Take a screenshot now (at most one every 2.5 s, and 150 per session, unless forced). */
 	shoot(reason, force = false) {
 		const video = this.video;
-		if (!video || !this.active || !video.videoWidth) return;
+		if (!video || !this.active) return;
+		if (!video.videoWidth) {
+			if (force) video.addEventListener("loadeddata", () => this.video === video && this.shoot(reason, true), { once: true });
+			return;
+		}
 		const now = Date.now();
 		if (!force && (now - this.lastShot < 2500 || this.shotCount >= 150)) return;
 		this.lastShot = now;
@@ -4009,7 +4904,17 @@ var ScreenCapture = class {
 * the studio and by the recorder inside the app's own tab.
 */
 var PENDING_AUDIO = "saywright.session.audio";
-/** How long starting waits for the browser's “share this tab” question to be answered. */
+/** After `ms`, once the page has drawn again (a page not drawing, in the background, doesn't hold it up). */
+function painted(ms) {
+	return new Promise((resolve) => setTimeout(() => {
+		if (typeof requestAnimationFrame !== "function") return resolve();
+		const done = setTimeout(resolve, 100);
+		requestAnimationFrame(() => requestAnimationFrame(() => {
+			clearTimeout(done);
+			resolve();
+		}));
+	}, ms));
+}
 var SCREEN_WAIT_MS = 3e4;
 function toBase64(buf) {
 	const bytes = new Uint8Array(buf);
@@ -4465,7 +5370,7 @@ var SessionClient = class {
 				status: "failed",
 				countdown: null,
 				mic: "off",
-				error: "The studio isn’t reachable. Is `npm run dev` running?"
+				error: "The studio isn’t reachable. Is it still running? Start it again with `npx @saywright/studio`."
 			});
 			throw new Error(this.state.error);
 		}
@@ -4497,6 +5402,7 @@ var SessionClient = class {
 			id,
 			countdown: null
 		});
+		if (this.screen && opts.countdown) await painted(220);
 		this.screen?.record(opts.video);
 		try {
 			await opts.onCreated?.(id, this.key);
@@ -4758,6 +5664,8 @@ var SessionClient = class {
 *   Alt+Shift+R  start / stop      Alt+Shift+M  mark this moment      Alt+Shift+D  show / hide
 */
 var HIDE_KEY = "saywright.widget.hidden";
+/** Which side of the page it sits on: moved out of the way of the page's own controls. */
+var SIDE_KEY = "saywright.widget.side";
 var PREFS_KEY = "saywright.widget.prefs";
 var CSS$1 = `
 :host{all:initial}
@@ -4795,6 +5703,10 @@ input[type=text]:focus{border-color:#0090ff}
 .voice[data-tone=warn] .bars i{background:#ffc53d}.voice[data-tone=warn] .voice-text{color:#ffc53d}
 .voice[data-tone=bad] .voice-text{color:#ff9592}
 .count{font-size:11.5px;color:#a0a0ab;display:flex;gap:8px}.count b{color:#ededef}.count .bad b{color:#ff9592}
+.root[data-side=left]{right:auto;left:16px}
+.root[data-side=left] .caption{margin:0 auto 8px 0}
+.mini{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(22,22,26,.85);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;padding:0}
+.mini .dot{width:8px;height:8px;box-shadow:0 0 0 2px rgba(229,72,77,.25)}
 .caption{max-width:340px;margin:0 0 8px auto;padding:8px 12px;border-radius:12px;background:rgba(22,22,26,.9);border:1px solid rgba(255,255,255,.1);font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
 .caption .issue{color:#ff9592}
 .err{color:#ff9592;font-size:12px;margin-top:8px}
@@ -4820,7 +5732,9 @@ var ICON = {
 	stop: "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"2\"/></svg>",
 	pause: "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/></svg>",
 	play: "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7 4v16l13-8z\"/></svg>",
-	close: "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"/></svg>"
+	close: "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"/></svg>",
+	side: "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 7h12l-3-3M17 17H5l3 3\"/></svg>",
+	hide: "<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"><path d=\"M6 12h12\"/></svg>"
 };
 function esc(s) {
 	return s.replace(/[&<>"]/g, (c) => ({
@@ -4865,10 +5779,12 @@ var Widget = class {
 	reachable = null;
 	tick = null;
 	hidden;
+	side;
 	constructor(endpoint, recorder) {
 		this.recorder = recorder;
 		this.endpoint = endpoint.replace(/\/$/, "");
 		this.hidden = localStorage.getItem(HIDE_KEY) === "1";
+		this.side = localStorage.getItem(SIDE_KEY) === "left" ? "left" : "right";
 		this.host = document.createElement("saywright-recorder");
 		this.shadow = this.host.attachShadow({ mode: "open" });
 		const style = document.createElement("style");
@@ -4914,12 +5830,10 @@ var Widget = class {
 			else this.start();
 		} else if (e.code === "KeyM") {
 			e.preventDefault();
-			this.mark();
+			this.mark("shortcut");
 		} else if (e.code === "KeyD") {
 			e.preventDefault();
-			this.hidden = !this.hidden;
-			localStorage.setItem(HIDE_KEY, this.hidden ? "1" : "0");
-			this.render();
+			this.setHidden(!this.hidden);
 		}
 	};
 	onState(s) {
@@ -4930,6 +5844,13 @@ var Widget = class {
 		}
 		this.render();
 	}
+	/** Hidden: out of the page's way. While recording, a small dot stays, so it is never recording unseen. */
+	setHidden(on) {
+		this.hidden = on;
+		localStorage.setItem(HIDE_KEY, on ? "1" : "0");
+		this.shown = "";
+		this.render();
+	}
 	savePrefs() {
 		localStorage.setItem(PREFS_KEY, JSON.stringify(this.prefs));
 	}
@@ -4942,7 +5863,7 @@ var Widget = class {
 				endpoint: this.endpoint,
 				name: this.name || void 0,
 				lang: this.prefs.lang,
-				appUrl: location.href,
+				appUrl: redactUrl(location.href),
 				source: "app",
 				mic: this.prefs.mic,
 				screen: this.prefs.screen,
@@ -4966,15 +5887,27 @@ var Widget = class {
 		this.recorder.stop();
 		await this.client.stop();
 	}
-	mark() {
+	/** One mark: the app's recorder logs it, the recording client adds the picture (it was logged twice, once by each). */
+	mark(via = "button") {
 		if (this.client.state.status !== "recording") return;
-		this.recorder.mark("", "shortcut");
-		this.client.mark("", "app");
+		this.recorder.mark("", via);
+		this.client.moment("mark", true);
 	}
 	render() {
 		const s = this.client.state;
-		this.root.style.display = this.hidden && s.status !== "recording" && s.status !== "starting" ? "none" : "";
+		const live = s.status === "recording" || s.status === "starting" || s.status === "stopping";
+		this.root.style.display = this.hidden && !live ? "none" : "";
+		this.root.dataset.side = this.side;
 		if (s.status === "starting" && s.countdown && !s.id) return this.renderCountdown(s.countdown);
+		if (live && this.hidden) {
+			this.issueUntil = 0;
+			const html = `<button class="mini" data-act="show" title="Recording: show the controls (Alt+Shift+D)" aria-label="Recording: show the controls"><span class="dot ${s.paused ? "" : "rec"}"></span></button>`;
+			if (html === this.shown) return;
+			this.shown = html;
+			this.root.innerHTML = html;
+			this.bind();
+			return;
+		}
 		if (s.status === "recording" || s.status === "starting" || s.status === "stopping") return this.renderRecording(s);
 		this.shown = "";
 		if (s.status === "processing" || s.status === "ready" || s.status === "failed" && s.id) return this.renderDone(s);
@@ -4998,7 +5931,7 @@ var Widget = class {
         <div class="check"><span>Record the screen</span><button class="switch" role="switch" data-toggle="screen" aria-checked="${p.screen}"></button></div>
         <div class="check"><span>Count down 3 s first</span><button class="switch" role="switch" data-toggle="countdown" aria-checked="${p.countdown}"></button></div>
       </div>
-      ${this.reachable === false ? `<div class="err">The studio isn’t running at ${esc(this.endpoint)}. Start it with <b>npm run dev</b>.</div>` : ""}
+      ${this.reachable === false ? `<div class="err">The studio isn’t running at ${esc(this.endpoint)}. Start it with <b>npx @saywright/studio</b>.</div>` : ""}
       ${s.error ? `<div class="err">${esc(s.error)}${s.busy ? ` <button class="btn" style="height:24px;margin-top:6px" data-act="replace">Stop it and start mine</button>` : ""}</div>` : ""}
       <div class="row" style="margin-top:12px"><button class="btn primary" style="flex:1" data-act="start"><span class="dot" style="background:#fff;box-shadow:none;width:8px;height:8px"></span>Start recording</button></div>
       <div class="muted" style="margin-top:8px;font-size:11.5px">Use the app as usual and talk about what you notice. <span class="kbd">Alt⇧M</span> marks a moment, <span class="kbd">Alt⇧R</span> stops.</div>
@@ -5024,6 +5957,8 @@ var Widget = class {
         <button class="btn icon" data-act="mark" title="Mark this moment (Alt+Shift+M)">${ICON.flag}</button>
         <button class="btn icon" data-act="pause" title="${s.paused ? "Resume narration" : "Pause narration"}">${s.paused ? ICON.play : ICON.pause}</button>
         <button class="btn" data-act="stop" ${s.status !== "recording" ? "disabled" : ""}>${ICON.stop}${s.status === "stopping" ? "Saving…" : "Stop"}</button>
+        <button class="btn icon" data-act="side" title="Move to the other side of the page" aria-label="Move to the other side of the page">${ICON.side}</button>
+        <button class="btn icon" data-act="hide" title="Hide the controls; it goes on recording (Alt+Shift+D)" aria-label="Hide the controls">${ICON.hide}</button>
       </div>`;
 		this.issueUntil = issue ? issue.t + 6e3 : 0;
 		if (html === this.shown) return;
@@ -5095,7 +6030,7 @@ var Widget = class {
 	renderLive() {
 		const s = this.client.state;
 		if (s.status !== "recording") return;
-		if (this.issueUntil && Date.now() > this.issueUntil) return this.renderRecording(s);
+		if (this.issueUntil && Date.now() > this.issueUntil) return this.render();
 		const t = clock(Date.now() - s.startedAt);
 		if (t !== this.shownTime) {
 			const time = this.shadow.querySelector("[data-time]");
@@ -5159,7 +6094,13 @@ var Widget = class {
 			else if (act === "mark") this.mark();
 			else if (act === "pause") this.client.setPaused(!this.client.state.paused);
 			else if (act === "screen") this.client.resumeScreen({ video: true });
-			else if (act === "dismiss" || act === "opened") {
+			else if (act === "hide") this.setHidden(true);
+			else if (act === "show") this.setHidden(false);
+			else if (act === "side") {
+				this.side = this.side === "right" ? "left" : "right";
+				localStorage.setItem(SIDE_KEY, this.side);
+				this.render();
+			} else if (act === "dismiss" || act === "opened") {
 				this.client.reset();
 				this.view = "button";
 				this.render();
@@ -5187,6 +6128,18 @@ var Widget = class {
 };
 //#endregion
 //#region src/bridge/experts.ts
+/**
+* Checks a page against the rules the studio's experts stand on: Google
+* Search Central for SEO, WCAG 2.2 (through axe-core) for accessibility,
+* GOV.UK, web.dev and W3C guidance for content, forms and right-to-left text.
+* Only what a rule backs is reported, with the elements it is about; judging
+* quality (is this title good?) is left to the AI review.
+*
+* Runs only when asked, inside the page, in short steps with a pause between
+* them: the page and the studio (same thread) stay responsive, and the studio
+* shows how far it has got. Long runs of like items (rows, cards) are checked
+* by their first few.
+*/
 var G = "https://developers.google.com/search/docs";
 /** Lighthouse's link-text list (English), and the Arabic equivalents. */
 var VAGUE_LINKS = /* @__PURE__ */ new Set([
@@ -5314,7 +6267,7 @@ function watchVitals() {
 	} catch {}
 }
 function facts() {
-	const text = ((document.querySelector("main, [role=\"main\"]") ?? document.body).innerText ?? "").replace(/\n{3,}/g, "\n\n").trim();
+	const text = maskSecrets(((document.querySelector("main, [role=\"main\"]") ?? document.body).innerText ?? "").replace(/\n{3,}/g, "\n\n").trim());
 	const here = location.origin;
 	let internal = 0;
 	let external = 0;
@@ -5336,7 +6289,7 @@ function facts() {
 	}
 	const fields = Array.from(document.querySelectorAll("input:not([type=hidden]):not([type=submit]):not([type=button]), select, textarea")).filter(shown);
 	return {
-		url: location.href,
+		url: redactUrl(location.href),
 		title: document.title,
 		description: meta("description"),
 		canonical: document.querySelector("link[rel=\"canonical\"]")?.getAttribute("href") ?? null,
@@ -5361,9 +6314,10 @@ function facts() {
 			label: fieldLabel(f),
 			type: f.type || f.tagName.toLowerCase(),
 			autocomplete: f.getAttribute("autocomplete"),
-			required: f.required
+			required: f.required,
+			...f.getAttribute("inputmode") ? { inputmode: f.getAttribute("inputmode") } : {}
 		})),
-		buttons: Array.from(document.querySelectorAll("button, [role=\"button\"], input[type=submit]")).filter(shown).map((b) => collapse(b.innerText || b.getAttribute("aria-label") || b.value || "", 40)).filter(Boolean).slice(0, 30),
+		buttons: Array.from(document.querySelectorAll("button, [role=\"button\"], input[type=submit]")).filter(shown).map((b) => collapse(accessibleName(b) || b.value || "", 40) || "(no name)").slice(0, 30),
 		lcp,
 		cls: watching ? Math.round(cls * 1e3) / 1e3 : null,
 		readability: readability(text),
@@ -5405,8 +6359,8 @@ function linkTargets() {
 	const out = [];
 	for (const a of Array.from(document.querySelectorAll("a[href]")).filter(shown)) {
 		const link = {
-			text: collapse(a.innerText || a.getAttribute("aria-label") || "", 40),
-			href: (a.getAttribute("href") ?? "").slice(0, 120)
+			text: collapse(accessibleName(a), 40) || "(no name)",
+			href: redactUrl(a.getAttribute("href") ?? "").slice(0, 120)
 		};
 		if (!out.some((l) => l.text === link.text && l.href === link.href)) out.push(link);
 		if (out.length >= 25) break;
@@ -6352,10 +7306,17 @@ function start() {
 				return;
 			case "locator": {
 				const el = elOf(m.id);
-				return el ? reply(m.reqId, {
+				if (!el) return fail(m.reqId, "gone");
+				if (!m.check) return reply(m.reqId, {
 					locator: buildLocator(el),
 					info: describe(el)
-				}) : fail(m.reqId, "gone");
+				});
+				const target = m.check.state ? controlOf(el) : el;
+				return reply(m.reqId, {
+					locator: buildLocator(target, m.check.state ? {} : { check: m.check.expected }),
+					info: describe(target),
+					...m.check.state ? stateOf(el, target) : {}
+				});
 			}
 			case "step": {
 				const el = elOf(m.id);
@@ -6416,6 +7377,9 @@ function start() {
 			case "record":
 				recorder.setOn(m.on);
 				return;
+			case "flush":
+				recorder.flushAll();
+				return reply(m.reqId, {});
 			case "mouse":
 				mouseOn = m.on;
 				return;
@@ -6487,21 +7451,35 @@ function start() {
 	});
 	let mouseOn = false;
 	let lastMouse = 0;
-	window.addEventListener("pointermove", (e) => {
-		if (!mouseOn) return;
-		const now = performance.now();
-		if (now - lastMouse < 16) return;
-		lastMouse = now;
+	let pending = null;
+	let later = null;
+	const sendMouse = () => {
+		later = null;
+		if (!pending || !mouseOn) return;
+		lastMouse = performance.now();
 		post({
 			type: "mouse",
+			...pending
+		});
+		pending = null;
+	};
+	window.addEventListener("pointermove", (e) => {
+		if (!mouseOn) return;
+		pending = {
 			x: e.clientX,
 			y: e.clientY
-		});
+		};
+		const wait = 16 - (performance.now() - lastMouse);
+		if (wait <= 0) sendMouse();
+		else later ??= setTimeout(sendMouse, wait);
 	}, {
 		passive: true,
 		capture: true
 	});
 	document.documentElement.addEventListener("pointerleave", () => {
+		pending = null;
+		if (later) clearTimeout(later);
+		later = null;
 		if (mouseOn) post({
 			type: "mouse",
 			x: null,