snoop-ui 0.0.1

package/packages/runtime/dist/agent.js

@@ -0,0 +1,751 @@
+// ../core/src/styles/selector.ts
+/** Split a selector list on top-level commas, ignoring commas in functions. */
+function splitSelectorList(selector) {
+	const parts = [];
+	let current = "";
+	let quote;
+	let brackets = 0;
+	let parentheses = 0;
+	for (let index = 0; index < selector.length; index += 1) {
+		const character = selector[index];
+		if (quote) {
+			current += character;
+			if (character === "\\") {
+				const next = selector[index + 1];
+				if (next !== void 0) {
+					current += next;
+					index += 1;
+				}
+			} else if (character === quote) quote = void 0;
+			continue;
+		}
+		if (character === "\"" || character === "'") {
+			quote = character;
+			current += character;
+			continue;
+		}
+		if (character === "[") brackets += 1;
+		else if (character === "]") brackets = Math.max(0, brackets - 1);
+		else if (character === "(") parentheses += 1;
+		else if (character === ")") parentheses = Math.max(0, parentheses - 1);
+		if (character === "," && brackets === 0 && parentheses === 0) {
+			parts.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	parts.push(current);
+	return parts;
+}
+// ../core/src/runtime/measure.ts
+/**
+* Computed style properties captured for the selected element. The list is
+* deliberately small: the agent sends full style detail for one element at a
+* time, and the style resolver (M4) adds provenance on top of these values.
+*/
+var STYLE_PROPERTIES = [
+	"display",
+	"position",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"width",
+	"height",
+	"min-width",
+	"min-height",
+	"max-width",
+	"max-height",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-radius",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius",
+	"box-sizing",
+	"overflow",
+	"z-index",
+	"opacity",
+	"color",
+	"background-color",
+	"box-shadow",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"line-height",
+	"letter-spacing",
+	"text-align",
+	"text-transform",
+	"white-space",
+	"flex-direction",
+	"flex-wrap",
+	"justify-content",
+	"align-items",
+	"gap",
+	"grid-template-columns",
+	"grid-template-rows",
+	"transform"
+];
+/**
+* Collect the geometry of every tagged element that is currently rendered.
+*
+* Only visible elements are measured: the agent runs inside the host app and
+* must stay cheap.
+*/
+function collectMeasuredElements(doc, view) {
+	const elements = doc.querySelectorAll("[data-snoop-src]");
+	const measured = [];
+	for (const element of elements) {
+		const src = element.getAttribute("data-snoop-src");
+		if (!src || !isVisible(element, view)) continue;
+		measured.push({
+			src,
+			tag: element.tagName.toLowerCase(),
+			rect: toRect(element.getBoundingClientRect())
+		});
+	}
+	return measured;
+}
+/** Capture the full detail of a single element. */
+function describeElement(element, view) {
+	const src = element.getAttribute("data-snoop-src");
+	if (!src) return;
+	const computed = view.getComputedStyle(element);
+	const style = {};
+	for (const property of STYLE_PROPERTIES) {
+		const value = computed.getPropertyValue(property);
+		if (value) style[property] = value;
+	}
+	return {
+		src,
+		tag: element.tagName.toLowerCase(),
+		rect: toRect(element.getBoundingClientRect()),
+		style,
+		classes: classNames(element),
+		inlineStyle: collectInlineStyle(element),
+		matchedRules: collectMatchedRules(element, documentOf(element, view))
+	};
+}
+/**
+* Read every stylesheet rule that matches the element. The browser CSSOM is the
+* source of truth; the static index only labels where the winning rule lives.
+*/
+function collectMatchedRules(element, doc) {
+	if (!doc?.styleSheets) return [];
+	const matched = [];
+	let order = 0;
+	const walk = (rules, atRules) => {
+		if (!rules) return;
+		for (const rule of Array.from(rules)) {
+			if (matched.length >= 250) return;
+			const styleRule = rule;
+			if (typeof styleRule.selectorText === "string" && styleRule.style) {
+				const currentOrder = order;
+				order += 1;
+				if (!matchesAny(element, styleRule.selectorText)) continue;
+				const declarations = matchedDeclarations(styleRule.style);
+				if (declarations.length > 0) matched.push({
+					selector: styleRule.selectorText,
+					declarations,
+					order: currentOrder,
+					atRules
+				});
+				continue;
+			}
+			const grouping = rule;
+			if (grouping.cssRules) {
+				const label = groupingLabel(rule);
+				walk(grouping.cssRules, label ? [...atRules, label] : atRules);
+			}
+		}
+	};
+	for (const sheet of Array.from(doc.styleSheets)) {
+		if (sheet.disabled) continue;
+		let rules;
+		try {
+			rules = sheet.cssRules;
+		} catch {
+			continue;
+		}
+		walk(rules, []);
+	}
+	return matched;
+}
+function matchedDeclarations(style) {
+	const declarations = [];
+	for (const property of STYLE_PROPERTIES) {
+		const value = style.getPropertyValue(property);
+		if (!value) continue;
+		declarations.push({
+			property,
+			value,
+			important: style.getPropertyPriority(property) === "important"
+		});
+	}
+	return declarations;
+}
+function collectInlineStyle(element) {
+	const style = element.style;
+	if (!style || typeof style.getPropertyValue !== "function") return {};
+	const declarations = {};
+	for (const property of STYLE_PROPERTIES) {
+		const value = style.getPropertyValue(property);
+		if (value) declarations[property] = value;
+	}
+	return declarations;
+}
+function matchesAny(element, selector) {
+	for (const part of splitSelectorList(selector)) {
+		const candidate = part.trim();
+		if (!candidate) continue;
+		try {
+			if (element.matches(candidate)) return true;
+		} catch {}
+	}
+	return false;
+}
+function groupingLabel(rule) {
+	const media = rule.media;
+	if (media && typeof media.mediaText === "string") return `@media ${media.mediaText}`;
+	const condition = rule.conditionText;
+	if (typeof condition === "string") return (rule.constructor?.name ?? "").includes("Container") ? `@container ${condition}` : `@supports ${condition}`;
+	const layer = rule.name;
+	if (typeof layer === "string" && layer.length > 0) return `@layer ${layer}`;
+}
+function classNames(element) {
+	const value = element.getAttribute("class");
+	return value ? value.split(/\s+/).filter(Boolean) : [];
+}
+function documentOf(element, view) {
+	return element.ownerDocument ?? view.document;
+}
+/** An element counts as rendered when it has a box and is not hidden. */
+function isVisible(element, view) {
+	const rect = element.getBoundingClientRect();
+	if (rect.width <= 0 || rect.height <= 0) return false;
+	const computed = view.getComputedStyle(element);
+	if (computed.getPropertyValue("display") === "none") return false;
+	const visibility = computed.getPropertyValue("visibility");
+	if (visibility === "hidden" || visibility === "collapse") return false;
+	if (computed.getPropertyValue("opacity") === "0") return false;
+	return true;
+}
+/** Walk up from an event target to the closest tagged element. */
+function findSourceElement(target) {
+	let current = target;
+	while (current && typeof current.getAttribute === "function") {
+		if (current.getAttribute("data-snoop-src")) return current;
+		current = current.parentElement ?? null;
+	}
+}
+function toRect(rect) {
+	return {
+		x: round$1(rect.x),
+		y: round$1(rect.y),
+		width: round$1(rect.width),
+		height: round$1(rect.height),
+		top: round$1(rect.top),
+		left: round$1(rect.left),
+		right: round$1(rect.right),
+		bottom: round$1(rect.bottom)
+	};
+}
+function round$1(value) {
+	return Math.round(value * 100) / 100;
+}
+// ../core/src/runtime/overlay.ts
+var HOVER_COLOR = "#6366f1";
+var SELECTED_COLOR = "#16a34a";
+var FOCUS_DIM = "rgba(17, 17, 41, 0.55)";
+var ISOLATE_BACKDROP = "#f4f2fb";
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DIM_MASK_ID = "snoop-dim-mask";
+/**
+* A layer over the whole viewport with the selected rectangles cut out. A mask
+* is used instead of per-box shadows because overlapping or nested selections
+* must stay clear.
+*/
+function createDim(doc) {
+	const svg = doc.createElementNS(SVG_NS, "svg");
+	svg.setAttribute("aria-hidden", "true");
+	svg.style.cssText = [
+		"position:fixed",
+		"top:0",
+		"left:0",
+		"width:100vw",
+		"height:100vh",
+		"display:none",
+		"pointer-events:none"
+	].join(";");
+	const defs = doc.createElementNS(SVG_NS, "defs");
+	const mask = doc.createElementNS(SVG_NS, "mask");
+	mask.setAttribute("id", DIM_MASK_ID);
+	mask.setAttribute("maskUnits", "userSpaceOnUse");
+	mask.setAttribute("x", "0");
+	mask.setAttribute("y", "0");
+	mask.setAttribute("width", "100%");
+	mask.setAttribute("height", "100%");
+	const visible = doc.createElementNS(SVG_NS, "rect");
+	visible.setAttribute("width", "100%");
+	visible.setAttribute("height", "100%");
+	visible.setAttribute("fill", "#fff");
+	const holes = doc.createElementNS(SVG_NS, "g");
+	holes.setAttribute("fill", "#000");
+	mask.append(visible, holes);
+	defs.append(mask);
+	const layer = doc.createElementNS(SVG_NS, "rect");
+	layer.setAttribute("width", "100%");
+	layer.setAttribute("height", "100%");
+	layer.setAttribute("mask", `url(#${DIM_MASK_ID})`);
+	svg.append(defs, layer);
+	return {
+		svg,
+		update(rects, fill) {
+			holes.replaceChildren();
+			for (const rect of rects) {
+				const hole = doc.createElementNS(SVG_NS, "rect");
+				hole.setAttribute("x", String(rect.left));
+				hole.setAttribute("y", String(rect.top));
+				hole.setAttribute("width", String(rect.width));
+				hole.setAttribute("height", String(rect.height));
+				holes.append(hole);
+			}
+			layer.setAttribute("fill", fill);
+			svg.style.display = rects.length > 0 ? "block" : "none";
+		}
+	};
+}
+/**
+* Draw the inspection overlay inside the host app document.
+*
+* The overlay never receives pointer events, so the app stays usable while it
+* is shown. Clicks are intercepted separately by the agent when inspect mode
+* is on.
+*/
+function createOverlay(doc) {
+	const root = doc.createElement("div");
+	root.setAttribute("data-snoop-overlay", "");
+	root.setAttribute("aria-hidden", "true");
+	root.style.cssText = [
+		"position:fixed",
+		"top:0",
+		"left:0",
+		"width:0",
+		"height:0",
+		"z-index:2147483647",
+		"pointer-events:none",
+		"contain:layout style size"
+	].join(";");
+	const dim = createDim(doc);
+	const hover = createMarker(doc, HOVER_COLOR);
+	const selected = [];
+	let items = [];
+	let isolated = false;
+	root.append(dim.svg, hover.box, hover.label);
+	doc.body?.append(root);
+	function place(marker, rect, label) {
+		marker.box.style.top = `${rect.top}px`;
+		marker.box.style.left = `${rect.left}px`;
+		marker.box.style.width = `${rect.width}px`;
+		marker.box.style.height = `${rect.height}px`;
+		marker.box.style.display = "block";
+		marker.label.textContent = label;
+		marker.label.style.display = "block";
+		const labelTop = rect.top - 20 < 0 ? rect.top + 2 : rect.top - 20;
+		marker.label.style.top = `${labelTop}px`;
+		marker.label.style.left = `${rect.left}px`;
+	}
+	function hide(marker) {
+		marker.box.style.display = "none";
+		marker.label.style.display = "none";
+	}
+	function removeMarkers() {
+		for (const marker of selected) {
+			hide(marker);
+			marker.box.remove();
+			marker.label.remove();
+		}
+		selected.length = 0;
+	}
+	function render() {
+		removeMarkers();
+		if (!isolated) for (const item of items) {
+			const marker = createMarker(doc, SELECTED_COLOR);
+			root.append(marker.box, marker.label);
+			selected.push(marker);
+			place(marker, item.rect, item.label);
+		}
+		dim.update(items.map((item) => item.rect), isolated ? ISOLATE_BACKDROP : FOCUS_DIM);
+	}
+	function clearSelected() {
+		items = [];
+		render();
+	}
+	return {
+		showHover(item) {
+			if (!item) {
+				hide(hover);
+				return;
+			}
+			place(hover, item.rect, item.label);
+		},
+		showSelected(next) {
+			items = next;
+			render();
+		},
+		setIsolated(next) {
+			isolated = next;
+			render();
+		},
+		clearHover() {
+			hide(hover);
+		},
+		clearSelected,
+		destroy() {
+			removeMarkers();
+			hover.box.remove();
+			hover.label.remove();
+			dim.svg.remove();
+			root.remove();
+		}
+	};
+}
+function createMarker(doc, color) {
+	const box = doc.createElement("div");
+	box.style.cssText = [
+		"position:fixed",
+		"display:none",
+		"box-sizing:border-box",
+		"pointer-events:none",
+		`border:2px solid ${color}`,
+		`background:${color}1f`,
+		"border-radius:2px"
+	].join(";");
+	const label = doc.createElement("div");
+	label.style.cssText = [
+		"position:fixed",
+		"display:none",
+		"pointer-events:none",
+		"white-space:nowrap",
+		"font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+		`background:${color}`,
+		"color:#ffffff",
+		"padding:2px 5px",
+		"border-radius:4px",
+		"max-width:60vw",
+		"overflow:hidden",
+		"text-overflow:ellipsis"
+	].join(";");
+	return {
+		box,
+		label
+	};
+}
+// ../core/src/runtime/protocol.ts
+function isDashboardMessage(value) {
+	if (!isRecord(value) || typeof value.kind !== "string") return false;
+	switch (value.kind) {
+		case "measure":
+		case "inspect":
+		case "isolate":
+		case "select":
+		case "sync": return true;
+		default: return false;
+	}
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+// src/agent.ts
+var SESSION_ENDPOINT = "/__snoop/session";
+var WS_ENDPOINT = "/__snoop/ws";
+var MEASURE_DEBOUNCE = 120;
+var RECONNECT_DELAY = 2e3;
+/**
+* Start the runtime agent inside the host app.
+*
+* The agent is injected by the Vite plugin in dev mode only. It stays idle
+* until the dashboard asks for measurements, so a dev server without an open
+* dashboard costs one WebSocket and nothing else.
+*/
+function startAgent(options = {}) {
+	if (typeof window === "undefined" || typeof document === "undefined") return;
+	run(options);
+}
+async function run(options) {
+	const sessionEndpoint = options.sessionEndpoint ?? SESSION_ENDPOINT;
+	const websocketEndpoint = options.websocketEndpoint ?? WS_ENDPOINT;
+	const token = await fetchToken(sessionEndpoint);
+	if (!token) return;
+	const sessionToken = token;
+	const state = {
+		socket: null,
+		overlay: null,
+		measureEnabled: false,
+		inspectEnabled: false,
+		selectedSrcs: [],
+		hoverSrc: null,
+		elements: [],
+		reconnectTimer: void 0,
+		measureTimer: void 0,
+		observer: void 0,
+		listening: false,
+		isolateEnabled: false
+	};
+	function send(message) {
+		const socket = state.socket;
+		if (!socket || socket.readyState !== WebSocket.OPEN) return;
+		socket.send(JSON.stringify({
+			type: "relay",
+			payload: message
+		}));
+	}
+	function sendElements() {
+		if (!state.measureEnabled) return;
+		const elements = collectMeasuredElements(document, window);
+		state.elements = elements;
+		send({
+			kind: "elements",
+			elements
+		});
+	}
+	function sendDetail(src) {
+		const element = findElementBySource(src);
+		if (!element) return;
+		const detail = describeElement(element, window);
+		if (detail) send({
+			kind: "detail",
+			detail
+		});
+	}
+	function ensureOverlay() {
+		if (!state.overlay) state.overlay = createOverlay(document);
+		return state.overlay;
+	}
+	function showSelected(srcs) {
+		const items = [];
+		for (const src of srcs) for (const element of findElementsBySource(src)) {
+			const rect = toOverlayRect(element);
+			if (rect.width > 0 && rect.height > 0) items.push({
+				rect,
+				label: src
+			});
+		}
+		ensureOverlay().showSelected(items);
+	}
+	function showHover(src) {
+		const overlay = ensureOverlay();
+		if (!src) {
+			overlay.showHover(void 0);
+			return;
+		}
+		const element = findElementBySource(src);
+		if (!element) {
+			overlay.showHover(void 0);
+			return;
+		}
+		overlay.showHover({
+			rect: toOverlayRect(element),
+			label: src
+		});
+	}
+	function reveal(src) {
+		const element = findElementBySource(src);
+		if (!element) return;
+		const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+		element.scrollIntoView({
+			block: "center",
+			inline: "center",
+			behavior: reduceMotion ? "auto" : "smooth"
+		});
+	}
+	let refreshFrame = 0;
+	function refreshSelected() {
+		if (refreshFrame !== 0 || state.selectedSrcs.length === 0) return;
+		refreshFrame = window.requestAnimationFrame(() => {
+			refreshFrame = 0;
+			showSelected(state.selectedSrcs);
+		});
+	}
+	window.addEventListener("scroll", refreshSelected, true);
+	window.addEventListener("resize", refreshSelected);
+	function scheduleMeasure() {
+		if (state.measureTimer !== void 0) window.clearTimeout(state.measureTimer);
+		state.measureTimer = window.setTimeout(() => {
+			state.measureTimer = void 0;
+			sendElements();
+		}, MEASURE_DEBOUNCE);
+	}
+	function startMeasureListeners() {
+		if (state.listening) return;
+		state.listening = true;
+		window.addEventListener("scroll", scheduleMeasure, true);
+		window.addEventListener("resize", scheduleMeasure);
+		state.observer = new MutationObserver(scheduleMeasure);
+		state.observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+	}
+	function stopMeasureListeners() {
+		if (!state.listening) return;
+		state.listening = false;
+		window.removeEventListener("scroll", scheduleMeasure, true);
+		window.removeEventListener("resize", scheduleMeasure);
+		state.observer?.disconnect();
+		state.observer = void 0;
+	}
+	function onClick(event) {
+		const src = findSourceElement(event.target)?.getAttribute("data-snoop-src");
+		if (!src) return;
+		event.preventDefault();
+		event.stopPropagation();
+		state.selectedSrcs = [src];
+		showSelected(state.selectedSrcs);
+		send({
+			kind: "click",
+			src
+		});
+	}
+	let hoverFrame = 0;
+	function onMouseMove(event) {
+		if (hoverFrame) return;
+		const target = event.target;
+		hoverFrame = window.requestAnimationFrame(() => {
+			hoverFrame = 0;
+			const src = findSourceElement(target)?.getAttribute("data-snoop-src") ?? null;
+			if (src === state.hoverSrc) return;
+			state.hoverSrc = src;
+			showHover(src);
+			send({
+				kind: "hover",
+				src
+			});
+		});
+	}
+	function handleDashboardMessage(message) {
+		switch (message.kind) {
+			case "measure":
+				state.measureEnabled = message.enabled;
+				if (message.enabled) {
+					startMeasureListeners();
+					sendElements();
+				} else stopMeasureListeners();
+				break;
+			case "inspect":
+				state.inspectEnabled = message.enabled;
+				if (message.enabled) {
+					document.addEventListener("click", onClick, true);
+					document.addEventListener("mousemove", onMouseMove, true);
+				} else {
+					document.removeEventListener("click", onClick, true);
+					document.removeEventListener("mousemove", onMouseMove, true);
+					state.hoverSrc = null;
+					showHover(null);
+				}
+				break;
+			case "select": {
+				state.selectedSrcs = message.srcs;
+				const first = message.srcs[0];
+				if (first) {
+					showSelected(message.srcs);
+					sendDetail(first);
+					if (message.reveal) reveal(first);
+				} else ensureOverlay().showSelected([]);
+				break;
+			}
+			case "isolate": {
+				state.isolateEnabled = message.enabled;
+				ensureOverlay().setIsolated(message.enabled);
+				showSelected(state.selectedSrcs);
+				const first = state.selectedSrcs[0];
+				if (message.enabled && first) reveal(first);
+				break;
+			}
+			case "sync": {
+				send({ kind: "ready" });
+				sendElements();
+				const first = state.selectedSrcs[0];
+				if (first) sendDetail(first);
+				break;
+			}
+		}
+	}
+	function connect() {
+		const url = new URL(websocketEndpoint, window.location.href);
+		url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+		url.searchParams.set("token", sessionToken);
+		url.searchParams.set("role", "agent");
+		const socket = new WebSocket(url);
+		state.socket = socket;
+		socket.addEventListener("open", () => {
+			send({ kind: "ready" });
+			sendElements();
+		});
+		socket.addEventListener("message", (event) => {
+			let payload;
+			try {
+				payload = JSON.parse(String(event.data));
+			} catch {
+				return;
+			}
+			if (typeof payload === "object" && payload !== null && payload.type === "relay" && isDashboardMessage(payload.payload)) handleDashboardMessage(payload.payload);
+		});
+		socket.addEventListener("close", () => {
+			state.socket = null;
+			state.reconnectTimer = window.setTimeout(connect, RECONNECT_DELAY);
+		});
+	}
+	connect();
+}
+async function fetchToken(endpoint) {
+	try {
+		const response = await fetch(endpoint, {
+			headers: { Accept: "application/json" },
+			cache: "no-store"
+		});
+		if (!response.ok) return;
+		const session = await response.json();
+		return typeof session.token === "string" ? session.token : void 0;
+	} catch {
+		return;
+	}
+}
+function findElementBySource(src) {
+	const elements = document.querySelectorAll("[data-snoop-src]");
+	for (const element of elements) if (element.getAttribute("data-snoop-src") === src) return element;
+}
+function findElementsBySource(src) {
+	return Array.from(document.querySelectorAll("[data-snoop-src]")).filter((element) => element.getAttribute("data-snoop-src") === src);
+}
+function toOverlayRect(element) {
+	const rect = element.getBoundingClientRect();
+	return {
+		x: round(rect.x),
+		y: round(rect.y),
+		width: round(rect.width),
+		height: round(rect.height),
+		top: round(rect.top),
+		left: round(rect.left),
+		right: round(rect.right),
+		bottom: round(rect.bottom)
+	};
+}
+function round(value) {
+	return Math.round(value * 100) / 100;
+}
+export { startAgent };
+
+//# sourceMappingURL=agent.js.map