@saywright/studio 0.2.0 → 0.2.1

package/dist/bridge.js

@@ -1021,6 +1021,7 @@ function contentName(el) {
 }
 function visibleText(el) {
 	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) {
@@ -1196,6 +1197,48 @@ function plainElement(el) {
 	return cur;
 }
 //#endregion
+//#region ../../packages/vite/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 ../../packages/vite/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. */
@@ -1208,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",
@@ -1235,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;
@@ -2508,6 +2553,7 @@ var mouse = (type, x, y) => new MouseEvent(type, {
 */
 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;
@@ -2811,33 +2857,6 @@ var Recorder = class {
 	}
 };
 //#endregion
-//#region ../../packages/vite/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;
-}
-//#endregion
 //#region ../../packages/vite/src/bridge/proxy.ts
 /**
 * When the studio shows a site through its proxy, the site's own absolute
@@ -3422,6 +3441,8 @@ 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\"])";
 /** 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\//;
@@ -3531,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;
@@ -3769,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) {
@@ -4364,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;
@@ -4868,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);
@@ -5356,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);
@@ -6267,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),
@@ -6311,7 +6359,7 @@ 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),
+			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);