webview-preview 1.1.1 → 1.2.0

package/src/page/annotate/react.mjs

@@ -0,0 +1,55 @@
+export function pageReact() {
+	const COMPONENT_TAGS = new Set([0, 1, 11, 14, 15]);
+	const LIBRARY_URL = /\/node_modules\/|\/@vite\/|\/@react-refresh|\/@id\//;
+	const FRAME = /^\s*(?:at\s+)?(?:(.*?)@|(.*?)\s+\()?((?:https?|file):\/\/.+?):(\d+):(\d+)\)?\s*$/;
+
+	const fiberOf = element => {
+		const key = Object.keys(element).find(name => name.startsWith("__reactFiber$"));
+		return key ? element[key] : null;
+	}
+
+	const typeName = type => {
+		if (!type || typeof type === "string") return null;
+		return type.displayName || type.name || typeName(type.render) || typeName(type.type) || null;
+	}
+
+	const appFrame = fiber => {
+		if (fiber?._debugSource?.fileName) {
+			const { fileName, lineNumber, columnNumber } = fiber._debugSource;
+			return { file: fileName, line: lineNumber, column: columnNumber ?? 1 }
+		}
+		for (const line of String(fiber?._debugStack?.stack ?? "").split("\n")) {
+			const match = FRAME.exec(line);
+			if (!match) continue;
+			const url = match[3];
+			const isProject = url.startsWith("file:") || url.startsWith(location.origin);
+			if (!isProject || LIBRARY_URL.test(url)) continue;
+			return { url, line: Number(match[4]), column: Number(match[5]), owner: match[1] || match[2] || null }
+		}
+		return null;
+	}
+
+	const componentOf = element => {
+		const fiber = fiberOf(element);
+		if (!fiber) return null;
+		const chain = [];
+		for (let node = fiber.return; node; node = node.return) {
+			if (!COMPONENT_TAGS.has(node.tag)) continue;
+			const name = typeName(node.type);
+			const usedAt = appFrame(node);
+			if (!name || !usedAt) continue;
+			if (chain[0]?.name === name) continue;
+			chain.unshift({ name, usedAt });
+		}
+		const own = appFrame(fiber);
+		const nearest = chain.at(-1);
+		return {
+			name: nearest?.name ?? null,
+			framework: "react",
+			chain: chain.slice(-8),
+			source: own ? { ...own, confidence: "exact" } : nearest ? { ...nearest.usedAt, confidence: "nearest" } : null
+		}
+	}
+
+	return { componentOf }
+}

package/src/page/annotate/selector.mjs

@@ -0,0 +1,130 @@
+export function pageSelectors(extraPrivate = []) {
+	const PRIVATE = [
+		"input[type=password]", "[autocomplete^=cc-]", "[autocomplete=one-time-code]", "[autocomplete=current-password]",
+		"[autocomplete=new-password]", "[data-private]", "[data-webview-preview-private]", ...extraPrivate
+	].join(", ");
+	const HIDDEN = "•••";
+	const normalize = value => (value ?? "").replace(/\s+/g, " ").trim();
+	const isPrivate = element => {
+		try {
+			return !!element.closest(PRIVATE);
+		} catch {
+			return false;
+		}
+	}
+	const privateElements = () => {
+		try {
+			return [...document.querySelectorAll(PRIVATE)];
+		} catch {
+			return [];
+		}
+	}
+	const textOf = element => {
+		if (isPrivate(element)) return HIDDEN;
+		let inside = [];
+		try {
+			inside = element.querySelectorAll(PRIVATE);
+		} catch {}
+		if (inside.length === 0) return normalize(element.innerText ?? element.textContent);
+		const copy = element.cloneNode(true);
+		for (const node of copy.querySelectorAll(PRIVATE)) node.replaceWith(` ${HIDDEN} `);
+		return normalize(copy.textContent);
+	}
+
+	const stableClass = className => {
+		const module = /^_?([a-zA-Z][\w-]*?)_[a-zA-Z0-9]{5,}(?:_\d+)?$/.exec(className);
+		if (module) return module[1];
+		return /[0-9a-f]{6,}/i.test(className) ? null : className;
+	}
+
+	const describe = element => {
+		const tag = element.tagName.toLowerCase();
+		const label = ((isPrivate(element) ? null : element.getAttribute("aria-label")) || textOf(element)).slice(0, 32);
+		const className = [...element.classList].map(stableClass).find(Boolean);
+		return `${tag}${className ? "." + className : ""}${label ? ` "${label}"` : ""}`;
+	}
+
+	const quote = value => `"${String(value).replace(/["\\]/g, "\\$&")}"`;
+	const isUnique = selector => {
+		try {
+			return document.querySelectorAll(selector).length === 1;
+		} catch {
+			return false;
+		}
+	}
+
+	const ownSelector = element => {
+		const tag = element.tagName.toLowerCase();
+		for (const attribute of ["data-test", "data-testid"]) {
+			if (!element.hasAttribute(attribute)) continue;
+			const selector = `[${attribute}=${quote(element.getAttribute(attribute))}]`;
+			if (isUnique(selector)) return selector;
+		}
+		if (element.id && !/\d{3,}|^[:_-]|^r[0-9a-z]{1,4}$/i.test(element.id)) {
+			const selector = `#${CSS.escape(element.id)}`;
+			if (isUnique(selector)) return selector;
+		}
+		const label = isPrivate(element) ? null : element.getAttribute("aria-label");
+		if (label && label.length <= 60) {
+			const selector = `${tag}[aria-label=${quote(label)}]`;
+			if (isUnique(selector)) return selector;
+		}
+		for (const className of element.classList) {
+			const stable = stableClass(className);
+			if (!stable) continue;
+			const selector = stable === className ? `.${CSS.escape(className)}` : `[class*=${quote(stable)}]`;
+			if (isUnique(selector)) return selector;
+		}
+		return null;
+	}
+
+	const buildSelector = element => {
+		const own = ownSelector(element);
+		if (own) return { selector: own, selectorQuality: "stable" }
+		const parts = [];
+		for (let node = element; node && node.nodeType === 1; node = node.parentElement) {
+			const anchor = node === element ? null : ownSelector(node);
+			if (anchor) {
+				parts.unshift(anchor);
+				break;
+			}
+			if (node === document.body || node === document.documentElement) {
+				parts.unshift(node.tagName.toLowerCase());
+				break;
+			}
+			if (!node.parentElement) {
+				parts.unshift(node.tagName.toLowerCase());
+				break;
+			}
+			const index = [...node.parentElement.children].indexOf(node) + 1;
+			parts.unshift(`${node.tagName.toLowerCase()}:nth-child(${index})`);
+		}
+		return { selector: parts.join(" > "), selectorQuality: "positional" }
+	}
+
+	const shortName = element => {
+		const className = [...element.classList].map(stableClass).find(Boolean);
+		return `${element.tagName.toLowerCase()}${className ? "." + className : ""}`;
+	}
+
+	const lookOf = element => {
+		const style = getComputedStyle(element);
+		const sides = name => {
+			const values = ["top", "right", "bottom", "left"].map(side => style.getPropertyValue(`${name}-${side}${name === "border" ? "-width" : ""}`));
+			return values.every(value => value === values[0]) ? values[0] : values.join(" ");
+		}
+		return {
+			box: { margin: sides("margin"), padding: sides("padding"), border: sides("border"), borderRadius: style.borderRadius },
+			style: {
+				display: style.display,
+				font: `${style.fontSize}/${style.lineHeight} ${style.fontWeight} ${style.fontFamily.split(",")[0].replace(/["']/g, "").trim()}`,
+				color: style.color,
+				background: style.backgroundColor,
+				opacity: style.opacity,
+				gap: style.gap
+			}
+		}
+	}
+
+	return { normalize, textOf, describe, shortName, buildSelector, lookOf, isPrivate, privateElements }
+}

package/src/page/annotate/styles.mjs

@@ -0,0 +1,79 @@
+export const STYLES = `
+	:host { all: initial }
+	* { box-sizing: border-box }
+	.layer, .dock, .tip { font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffffff; user-select: none; -webkit-user-select: none }
+	.layer { position: fixed; inset: 0; pointer-events: none }
+	.outline { position: fixed; border: 2px solid #0a77ff; border-radius: 4px; background: rgba(10, 119, 255, 0.08); display: none }
+	.outline-label { position: absolute; left: -2px; bottom: calc(100% + 4px); white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: #0a77ff; color: #fff; font-size: 12px; font-weight: 600 }
+	.outline-label.below { bottom: auto; top: calc(100% + 4px) }
+	.mask { position: fixed; background: repeating-linear-gradient(45deg, #1b1b1b 0 6px, #262626 6px 12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px }
+	.privacy { margin: 0; color: #939393; font-size: 12px }
+	.picked { position: fixed; border: 1px dashed rgba(10, 119, 255, 0.9); border-radius: 4px }
+	.marker { position: fixed; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #0a77ff; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 2px #0a0a0a, 0 6px 16px rgba(0, 0, 0, 0.4) }
+	.marker.active { background: #e0a43a; color: #0a0a0a }
+	.card { background: #111111; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) }
+	.dock { position: fixed; left: 12px; top: 12px; pointer-events: none }
+	.dock > .card { pointer-events: auto }
+	.dock .sheet { position: absolute; left: calc(100% + 6px); top: 0 }
+	.dock.flip .sheet { left: auto; right: calc(100% + 6px) }
+	.dock.raise .sheet { top: auto; bottom: 0 }
+	.toolbar { display: flex; flex-direction: column; padding: 4px }
+	.grip { height: 14px; display: flex; align-items: center; justify-content: center; color: #4a4a4a; cursor: grab; touch-action: none }
+	.grip svg { width: 16px; height: 16px }
+	.grip:active { cursor: grabbing }
+	.collapse { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out }
+	.collapse > * { overflow: hidden; min-height: 0 }
+	.collapsed .collapse { grid-template-rows: 0fr; opacity: 0 }
+	.tools { display: flex; flex-direction: column }
+	.divider { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, 0.08) }
+	button { font: inherit; color: inherit }
+	.tool { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #939393; background: none; border: none; border-radius: 8px; cursor: pointer; transition: color 0.2s ease-out, background-color 0.2s ease-out }
+	.tool:hover { color: #ffffff }
+	.tool[aria-pressed="true"] { color: #ffffff; background: rgba(255, 255, 255, 0.08) }
+	.tool.accent { color: #0a77ff }
+	.tool.accent:hover { color: #3d95ff }
+	.tool[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed }
+	.tool[aria-disabled="true"]:hover { color: #939393 }
+	.tool:focus-visible, .button:focus-visible, .kbd:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #0a77ff }
+	.tip { position: fixed; z-index: 2; padding: 4px 8px; border-radius: 8px; background: #111111; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); white-space: nowrap; font-size: 12px; pointer-events: none; display: none }
+	.tip kbd { margin-left: 8px; color: #939393; font: 11px ui-monospace, monospace }
+	.sheet { width: 300px; max-width: calc(100vw - 72px); max-height: calc(100vh - 16px); overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: opacity 0.2s ease-out, transform 0.2s ease-out }
+	.collapsed .sheet { opacity: 0; transform: translateX(-6px); pointer-events: none }
+	.flip.collapsed .sheet { transform: translateX(6px) }
+	.flip .toggle svg { transform: scaleX(-1) }
+	.sheet[hidden] { display: none }
+	.sheet-head { display: flex; align-items: baseline; gap: 6px }
+	.sheet-head b { font-size: 14px }
+	.sheet-head span { color: #939393; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+	.badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #0a77ff; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center }
+	.badge:empty { display: none }
+	.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto }
+	.note-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 8px 38px }
+	.notes:empty::before { content: "No notes yet — click an element on the page."; color: #939393 }
+	.note { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease-out }
+	.note:hover, .note.active { background: rgba(255, 255, 255, 0.06) }
+	.note b { min-width: 22px; height: 22px; border-radius: 11px; background: #0a77ff; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center }
+	.note.active b { background: #e0a43a; color: #0a0a0a }
+	.note span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+	.note span.empty { color: #939393 }
+	label { display: flex; flex-direction: column; gap: 6px; color: #939393 }
+	textarea { font: inherit; color: #ffffff; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 44px; user-select: text; -webkit-user-select: text; transition: border-color 0.2s ease-out }
+	textarea:hover { border-color: rgba(255, 255, 255, 0.16) }
+	.hint { margin: 0; color: #939393; font-size: 12px }
+	.hint kbd, .rows kbd { font: 11px ui-monospace, monospace; color: #ffffff }
+	.rows { display: flex; flex-direction: column; gap: 2px }
+	.row { display: flex; align-items: center; gap: 8px; padding: 4px 0 }
+	.row span { flex: 1 }
+	.kbd { min-width: 64px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: #0a0a0a; color: #ffffff; font: 12px ui-monospace, monospace; cursor: pointer }
+	.kbd:hover { border-color: rgba(255, 255, 255, 0.16) }
+	.kbd.listening { border-color: #0a77ff; color: #0a77ff }
+	.actions { display: flex; gap: 6px; justify-content: flex-end }
+	.button { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: border-color 0.2s ease-out, color 0.2s ease-out }
+	.button:hover { border-color: rgba(255, 255, 255, 0.16) }
+	.button.danger:hover { border-color: #d9534f; color: #ff8a86 }
+	.elements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; color: #939393 }
+	.elements li { display: flex; gap: 6px; align-items: center }
+	.elements li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+	.elements .tool { width: 24px; height: 24px }
+	@media (prefers-reduced-motion: reduce) { .collapse, .sheet, .tool, .note, textarea, .button { transition: none } }
+`;

package/src/page/annotate/vue.mjs

@@ -0,0 +1,53 @@
+export function pageVue() {
+	const fileOf = type => (type && typeof type === "object" ? type.__file ?? null : null);
+	const nameOf = type => {
+		if (!type || typeof type !== "object") return null;
+		const file = fileOf(type);
+		return type.name || type.__name || (file ? file.split(/[\\/]/).pop().replace(/\.vue$/, "") : null);
+	}
+
+	const vue3 = element => {
+		for (let node = element; node; node = node.parentElement) {
+			if (node.__vueParentComponent) return node.__vueParentComponent;
+		}
+		return null;
+	}
+
+	const vue2 = element => {
+		for (let node = element; node; node = node.parentElement) {
+			if (node.__vue__) return node.__vue__;
+		}
+		return null;
+	}
+
+	const chainOf = (instance, next, typeOf) => {
+		const chain = [];
+		for (let node = instance; node; node = next(node)) {
+			const type = typeOf(node);
+			const name = nameOf(type);
+			if (!name) continue;
+			const parentFile = fileOf(typeOf(next(node)));
+			chain.unshift({ name, usedAt: parentFile ? { file: parentFile, line: null, column: null, how: "vue-file" } : null });
+		}
+		return chain;
+	}
+
+	const componentOf = element => {
+		const modern = vue3(element);
+		const legacy = modern ? null : vue2(element);
+		if (!modern && !legacy) return null;
+		const typeOf = modern ? node => node?.type : node => node?.$options;
+		const next = modern ? node => node.parent : node => node.$parent;
+		const instance = modern ?? legacy;
+		const chain = chainOf(instance, next, typeOf);
+		const ownFile = fileOf(typeOf(instance));
+		return {
+			name: nameOf(typeOf(instance)),
+			framework: "vue",
+			chain: chain.slice(-8),
+			source: ownFile ? { file: ownFile, line: null, column: null, how: "vue-file", confidence: "file" } : null
+		}
+	}
+
+	return { componentOf }
+}

package/src/snapshots/clean.mjs

@@ -28,9 +28,9 @@ export const cleanSnapshots = async (options = {}) => {
 	const maxAge = options.olderThan ? parseDuration(options.olderThan) : 0;
 	const now = Date.now();
 	const removed = readdirSync(out)
-		.filter(name => name.toLowerCase().endsWith(".png"))
+		.filter(name => name.toLowerCase().endsWith(".png") || name === "report.html" || /annotate-[\w.-]+\.(json|md)$/.test(name))
 		.map(name => path.join(out, name))
-		.filter(file => statSync(file).isFile() && now - statSync(file).mtimeMs >= maxAge);
+		.filter(file => statSync(file).isFile() && (maxAge === 0 || now - statSync(file).mtimeMs >= maxAge));
 	if (!options.dryRun) for (const file of removed) rmSync(file);
 	return { removed, out }
 }