mesurer-solid 0.2.3-beta.6 → 0.2.3-beta.7

package/dist/plugins.js

@@ -2973,23 +2973,27 @@ var _o = /* @__PURE__ */ new WeakMap(), vo = (e) => {
 	let n = vo(e);
 	for (let e of t.listeners) e(n);
 }, bo = (e) => {
-	let t = _o.get(e);
+	let t = _o.get(e.document);
 	if (t) return t;
-	let n = e.history, r = n.pushState, i = n.replaceState, a = {
+	let n = e.history, r = n.pushState, i = n.replaceState, a = e.removeEventListener.bind(e), o = {
+		document: e.document,
+		releaseNativeListeners: () => {
+			a("popstate", o.handleNativeChange), a("hashchange", o.handleNativeChange);
+		},
 		listeners: /* @__PURE__ */ new Set(),
 		pushState: r,
 		replaceState: i,
-		handleNativeChange: () => yo(e, a)
+		handleNativeChange: () => yo(e, o)
 	};
 	return n.pushState = function(...t) {
 		let n = r.apply(this, t);
-		return yo(e, a), n;
+		return yo(e, o), n;
 	}, n.replaceState = function(...t) {
 		let n = i.apply(this, t);
-		return yo(e, a), n;
-	}, e.addEventListener("popstate", a.handleNativeChange), e.addEventListener("hashchange", a.handleNativeChange), _o.set(e, a), a;
+		return yo(e, o), n;
+	}, e.addEventListener("popstate", o.handleNativeChange), e.addEventListener("hashchange", o.handleNativeChange), _o.set(e.document, o), o;
 }, xo = (e, t) => {
-	t.listeners.size > 0 || _o.get(e) !== t || (e.history.pushState = t.pushState, e.history.replaceState = t.replaceState, e.removeEventListener("popstate", t.handleNativeChange), e.removeEventListener("hashchange", t.handleNativeChange), _o.delete(e));
+	t.listeners.size > 0 || _o.get(t.document) !== t || (t.document.defaultView === e && (e.history.pushState = t.pushState, e.history.replaceState = t.replaceState), t.releaseNativeListeners(), _o.delete(t.document));
 }, So = (e, t) => {
 	let n = bo(e);
 	n.listeners.add(t);
@@ -5827,7 +5831,7 @@ function cu(e) {
 		t && (t.scroll.release(), t.releaseAnchor?.(), U.delete(e));
 	}, pe = (t) => {
 		let n = e.runtime.annotation(t);
-		return !n || n.anchor.kind !== "elements" ? null : n.resolvedTargets.find(({ element: e }) => e?.isConnected)?.element ?? null;
+		return !n || n.anchor.kind !== "elements" || !e.runtime.annotationVisible(t) ? null : n.resolvedTargets.find(({ element: e }) => e?.isConnected && !Zs(e.ownerDocument))?.element ?? null;
 	}, me = (e) => !!(ru(e) && G() && N && ce() && e.getRootNode() === N.getRootNode()), he = (e) => {
 		let t = pe(e), n = U.get(e);
 		if (!t) {
@@ -5875,6 +5879,10 @@ function cu(e) {
 		V?.release(), V = null, B?.(), B = null, R = null, z = null;
 	}, be = (e) => !!(ru(e) && G() && N && e !== O && ce() && e.getRootNode() === N.getRootNode()), xe = () => {
 		let e = q();
+		if (e && Zs(e.ownerDocument)) {
+			ye();
+			return;
+		}
 		O && e !== O && (O = null);
 		let t = R, n = !!(e?.isConnected && be(e)), r = z === e;
 		if (e === R && e?.isConnected && n === r) {
@@ -5929,24 +5937,24 @@ function cu(e) {
 	});
 	let Me = q();
 	Se(Me);
-	let Ne = e.runtime.subscribe(() => {
+	let Ne = e.runtime.subscribe(() => Qt(() => {
 		let t = e.runtime.selectGestureActive();
 		p() && t ? (k = !0, se()) : p() && A !== null && !ae(A, ie()) && (O = q(), k = !1, se());
 		let r = q(), i = r !== Me;
-		i && (Me = r, Se(Me), k && (k = !1, O = r)), xe(), i && we(), n((e) => e + 1), ve();
-	});
+		i && (Me = r, Se(Me), k && (k = !1, O = r)), xe(), (i || r && Zs(r.ownerDocument)) && we(), n((e) => e + 1), ve();
+	}));
 	xe(), W().queueMicrotask(ge), Sn(() => {
 		H?.disconnect(), H = null, oe(), ee?.removeEventListener("resize", we), ee = null, je?.disconnect(), ye();
 		for (let e of U.keys()) fe(e);
 		Ne();
 	});
-	let Pe = wr(() => (t(), e.runtime.currentSelection())), Fe = wr(() => (t(), e.runtime.annotations())), Ie = wr(() => {
+	let Pe = wr(() => (t(), e.runtime.currentSelection())), Fe = wr(() => (t(), e.runtime.annotations().filter((t) => e.runtime.annotationVisible(t.id)))), Ie = wr(() => {
 		let e = a();
 		return e ? Fe().find((t) => t.id === e) ?? null : null;
 	}), Le = wr(() => s() ?? l() ?? a()), Re = (e) => Fe().findIndex((t) => t.id === e) + 1, ze = wr(() => {
 		t(), r();
 		let n = Le();
-		if (!n) return [];
+		if (!n || !e.runtime.annotationVisible(n)) return [];
 		let i = e.runtime.annotation(n);
 		if (!i) return [];
 		if (i.anchor.kind === "region") return [{ ...i.anchor.rect }];
@@ -5987,7 +5995,7 @@ function cu(e) {
 	}), Ke = () => {
 		r();
 		let e = Ge();
-		if (!e?.isConnected || Zs(e.ownerDocument)) return null;
+		if (!e?.isConnected) return null;
 		let t = ds(e), n = {
 			left: t.left,
 			top: t.top,
@@ -6195,7 +6203,7 @@ function cu(e) {
 			}
 		}
 	}, ot = se, st = () => {
-		Be() && (e.runtime.currentSelection().elements.some((e) => Zs(e.ownerDocument)) || (k = !1, A = ie(), g(""), v(!1), b(null), w(null), o(null), m(!0), F = (e) => {
+		Be() && (k = !1, A = ie(), g(""), v(!1), b(null), w(null), o(null), m(!0), F = (e) => {
 			let t = le()?.querySelector("[data-mesurer-annotation-composer='true']"), n = W().Node;
 			if (!(t && n && e.target instanceof n && t.contains(e.target))) {
 				if (h().trim() && !y()) {
@@ -6204,24 +6212,18 @@ function cu(e) {
 				}
 				ct();
 			}
-		}, W().document.addEventListener("pointerdown", F, !0), W().queueMicrotask(() => V?.sync())));
+		}, W().document.addEventListener("pointerdown", F, !0), W().queueMicrotask(() => V?.sync()));
 	}, ct = () => {
 		let e = p();
 		A !== null && !ae(A, ie()) ? (O = q(), k = !1, xe(), we()) : e && (k = !1), ot();
 	}, lt = () => {
 		p() && (k = !0, ot());
 	}, ut = () => {
-		if (!(!h().trim() || x())) {
-			if (e.runtime.currentSelection().elements.some((e) => Zs(e.ownerDocument))) {
-				b("Context annotations are unavailable for Responsive preview targets.");
-				return;
-			}
-			try {
-				let t = e.runtime.addSelectionAnnotation(h());
-				k = !1, A = null, g(""), v(!1), b(null), m(!1), oe(), he(t.id), et(t.id), o(t.id), w(null), _e(t.id);
-			} catch (e) {
-				b(e instanceof Error ? e.message : String(e));
-			}
+		if (!(!h().trim() || x())) try {
+			let t = e.runtime.addSelectionAnnotation(h());
+			k = !1, A = null, g(""), v(!1), b(null), m(!1), oe(), he(t.id), et(t.id), o(t.id), w(null), _e(t.id);
+		} catch (e) {
+			b(e instanceof Error ? e.message : String(e));
 		}
 	}, dt = {
 		openNoteComposer: st,
@@ -9812,7 +9814,7 @@ var Lu = "mesurer.layout-guides", Ru = "layout-guides:v1", zu = "mesurer.layout-
 			C = !0, b += 1, d.removeEventListener("pointerdown", z), d.removeEventListener("pointermove", B), d.removeEventListener("pointerup", V), d.removeEventListener("pointercancel", H), i.removeEventListener("keydown", ee, !0), y && i.clearTimeout(y), M.dispose(), k(), oo(i), a.finishCapture(), a.dispose(), o.dispose();
 		});
 	}
-}), mp = "0.2.3-beta.6", hp = Uc, gp = Bc, _p = Vc, vp = Wc, yp = Hc, bp = () => ({
+}), mp = "0.2.3-beta.7", hp = Uc, gp = Bc, _p = Vc, vp = Wc, yp = Hc, bp = () => ({
 	...Il(),
 	version: mp
 }), xp = bp, Sp = hp, Cp = gp, wp = _p, Tp = vp, Ep = yp, Dp = (e, t) => e.left <= t.left + t.width && e.left + e.width >= t.left && e.top <= t.top + t.height && e.top + e.height >= t.top, Op = (e) => {
@@ -9998,11 +10000,15 @@ var Bp = 10, Vp = (e) => ({
 function Wp(e) {
 	let { runtime: t, ownerDocument: n, ownerWindow: r } = e, i = e.request ?? { scope: "workspace" }, a = t.snapshot();
 	if (!a) throw Error("Mesurer workspace is not ready yet.");
-	let o = (e) => Vp(t.elementRect?.(e) ?? e.getBoundingClientRect()), s = [], c = [], l = { kind: "workspace" }, u = /* @__PURE__ */ new Map();
+	let o = (e) => Vp(t.elementRect?.(e) ?? e.getBoundingClientRect()), s = [], c = [], l = { kind: "workspace" }, u = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), f;
 	if ("annotation" in i) {
 		let e = t.annotation(i.annotation);
 		if (!e) throw Error(`Mesurer annotation not found: ${i.annotation}`);
-		for (let t of e.resolvedTargets) t.element?.isConnected && u.set(t.element, t.target.id);
+		e.anchor.kind === "elements" && (f = e.anchor.targets.find((e) => e.viewport)?.viewport);
+		for (let t of e.resolvedTargets) t.element?.isConnected && (u.set(t.element, t.target.id), t.target.viewport && d.set(t.element, {
+			viewport: { ...t.target.viewport },
+			domPath: t.target.domPath?.map((e) => ({ ...e })) ?? []
+		}));
 		s = Hp(e.resolvedTargets.map((e) => e.element));
 		let n = t.annotationRect(e.id);
 		n && (c = [n]);
@@ -10023,7 +10029,7 @@ function Wp(e) {
 		a.activeMeasurement?.elementRef,
 		...a.heldDistances.flatMap((e) => [e.elementRefA, e.elementRefB])
 	]);
-	let d = l.kind === "workspace" ? [] : c.length ? c : s.map(o), f = jp({
+	let p = l.kind === "workspace" ? [] : c.length ? c : s.map(o), m = jp({
 		workspace: {
 			guides: a.guides,
 			measurements: a.measurements,
@@ -10033,33 +10039,34 @@ function Wp(e) {
 		scope: l.kind === "workspace" ? { kind: "workspace" } : {
 			kind: "scoped",
 			elements: s,
-			regions: d
+			regions: p
 		},
 		guideTolerance: a.guideRelevanceTolerance ?? Bp
-	}), p = f.measurements, m = f.distances, h = f.guides, g = Hp([
+	}), h = m.measurements, g = m.distances, _ = m.guides, v = Hp([
 		...s,
-		...p.map((e) => e.elementRef),
-		...m.flatMap((e) => [e.elementRefA, e.elementRefB])
-	]), _ = /* @__PURE__ */ new Map(), v = new Set(u.values()), y = 1, b = () => {
-		let e = `target-${y++}`;
-		for (; v.has(e);) e = `target-${y++}`;
-		return v.add(e), e;
-	}, x = g.map((e) => {
-		let t = u.get(e) ?? b(), n = o(e), r = zp(e);
-		return _.set(e, t), {
-			ref: t,
+		...h.map((e) => e.elementRef),
+		...g.flatMap((e) => [e.elementRefA, e.elementRefB])
+	]), y = /* @__PURE__ */ new Map(), b = new Set(u.values()), x = 1, S = () => {
+		let e = `target-${x++}`;
+		for (; b.has(e);) e = `target-${x++}`;
+		return b.add(e), e;
+	}, C = v.map((e) => {
+		let n = u.get(e) ?? S(), r = o(e), i = zp(e);
+		return y.set(e, n), {
+			ref: n,
+			...d.get(e) ?? t.targetScope?.(e),
 			inspection: {
-				...r,
+				...i,
 				rect: {
-					...n,
-					right: n.left + n.width,
-					bottom: n.top + n.height,
-					x: n.left,
-					y: n.top
+					...r,
+					right: r.left + r.width,
+					bottom: r.top + r.height,
+					x: r.left,
+					y: r.top
 				}
 			}
 		};
-	}), S = p.map((e) => {
+	}), w = h.map((e) => {
 		let t = {
 			id: e.id,
 			rect: Vp(e.rect),
@@ -10067,19 +10074,18 @@ function Wp(e) {
 			deltaY: e.deltaY
 		};
 		e.snapped !== void 0 && (t.snapped = e.snapped);
-		let n = e.elementRef ? _.get(e.elementRef) : void 0;
+		let n = e.elementRef ? y.get(e.elementRef) : void 0;
 		return n && (t.targetRef = n), t;
-	}), C = m.map((e) => {
+	}), T = g.map((e) => {
 		let t = {
 			id: e.id,
 			rectA: Vp(e.rectA),
 			rectB: Vp(e.rectB),
 			horizontal: e.horizontal ? { ...e.horizontal } : null,
 			vertical: e.vertical ? { ...e.vertical } : null
-		}, n = e.elementRefA ? _.get(e.elementRefA) : void 0, r = e.elementRefB ? _.get(e.elementRefB) : void 0;
+		}, n = e.elementRefA ? y.get(e.elementRefA) : void 0, r = e.elementRefB ? y.get(e.elementRefB) : void 0;
 		return n && (t.targetARef = n), r && (t.targetBRef = r), t;
-	});
-	return {
+	}), E = {
 		schema: "mesurer.context/v1",
 		id: Up(r),
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -10101,14 +10107,15 @@ function Wp(e) {
 			rulersVisible: a.rulersVisible,
 			xrayVisible: a.xrayVisible
 		},
-		targets: x,
+		targets: C,
 		visualContext: {
-			guides: h,
+			guides: _,
 			layoutGuides: (e.layoutGuides ?? []).map((e) => ({ ...e })),
-			measurements: S,
-			distances: C
+			measurements: w,
+			distances: T
 		}
 	};
+	return f ??= C.find((e) => e.viewport)?.viewport, f && (E.previewViewport = { ...f }), E;
 }
 var Gp = (e) => `${Math.round(e * 100) / 100}px`, Kp = (e) => `x=${Gp(e.left)} y=${Gp(e.top)} w=${Gp(e.width)} h=${Gp(e.height)}`;
 function qp(e) {
@@ -10122,7 +10129,7 @@ function qp(e) {
 		t.push("", "Targets");
 		for (let n of e.targets) {
 			let e = n.inspection;
-			t.push(`[${n.ref}] ${e.selector}`, `  rect: ${Kp(e.rect)}`, `  margin: ${Gp(e.margin.top)} ${Gp(e.margin.right)} ${Gp(e.margin.bottom)} ${Gp(e.margin.left)}`, `  padding: ${Gp(e.padding.top)} ${Gp(e.padding.right)} ${Gp(e.padding.bottom)} ${Gp(e.padding.left)}`, `  layout: display=${e.layout.display}; position=${e.layout.position}; gap=${e.layout.gap}`, `  typography: ${e.typography.fontSize} / ${e.typography.lineHeight}; weight=${e.typography.fontWeight}; align=${e.typography.textAlign}`), e.text && t.push(`  text: ${JSON.stringify(e.text)}`);
+			n.viewport && t.push(`Preview: ${n.viewport.url}; ${n.viewport.width} × ${n.viewport.height} CSS px; id=${n.viewport.previewId}`), t.push(`[${n.ref}] ${e.selector}`, `  rect: ${Kp(e.rect)}`, `  margin: ${Gp(e.margin.top)} ${Gp(e.margin.right)} ${Gp(e.margin.bottom)} ${Gp(e.margin.left)}`, `  padding: ${Gp(e.padding.top)} ${Gp(e.padding.right)} ${Gp(e.padding.bottom)} ${Gp(e.padding.left)}`, `  layout: display=${e.layout.display}; position=${e.layout.position}; gap=${e.layout.gap}`, `  typography: ${e.typography.fontSize} / ${e.typography.lineHeight}; weight=${e.typography.fontWeight}; align=${e.typography.textAlign}`), e.text && t.push(`  text: ${JSON.stringify(e.text)}`);
 		}
 	}
 	if (e.visualContext.guides.length) {
@@ -10173,13 +10180,14 @@ function Jp(e) {
 			}
 		});
 	}
-	return {
+	let r = {
 		schema: "mesurer.capture/v1",
 		contextId: e.id,
 		chrome: "hide",
 		evidence: "show",
 		captures: n
 	};
+	return e.previewViewport && (r.previewViewport = { ...e.previewViewport }), r;
 }
 var Yp = (e, t, n, r, i) => {
 	!Number.isFinite(r) || !Number.isFinite(i) || Math.abs(r - i) < .01 || e.push({
@@ -10330,18 +10338,9 @@ var em = Lu, tm = Ru, nm = zu, rm = Bu, im = () => ({
 			e.finishCapture(), await pm(t, n);
 		}
 	};
-}, hm = (e) => {
-	let t = e.currentSelection();
-	return (t.elements.length > 0 || t.region !== null) && !t.elements.some((e) => {
-		let t = e.ownerDocument;
-		for (; t;) {
-			let e = t.defaultView?.frameElement ?? null;
-			if (!e) return !1;
-			if (e.hasAttribute("data-mesurer-responsive-frame")) return !0;
-			t = e.ownerDocument;
-		}
-		return !1;
-	});
+}, hm = (e, t) => {
+	let n = e.currentSelection();
+	return n.elements.length > 0 || n.region !== null && !t?.querySelector("[data-mesurer-responsive-stage]");
 };
 function gm(e = {}) {
 	return {
@@ -10359,39 +10358,39 @@ function gm(e = {}) {
 				persist: !0
 			}), t.state.register({
 				id: cm,
-				initial: { hasSelection: hm(r) }
+				initial: { hasSelection: hm(r, n.rendererRoot) }
 			});
-			let a = () => t.state.get("mesurer.context.settings")?.ui ?? !0, o = () => hm(r), s = (e) => {
+			let a = () => t.state.get("mesurer.context.settings")?.ui ?? !0, o = () => hm(r, n.rendererRoot), s = (e) => {
 				t.state.update(sm, (t) => ({
 					...t,
 					ui: e
 				}));
-			}, c = null, l = null, u = null, d = null, f = r.currentSelection(), p = {
-				elements: [...f.elements],
-				region: f.region ? { ...f.region } : null
-			}, m = (e, t) => e.elements.length !== t.elements.length || e.elements.some((e, n) => e !== t.elements[n]) ? !1 : e.region === t.region ? !0 : !e.region || !t.region ? !1 : e.region.left === t.region.left && e.region.top === t.region.top && e.region.width === t.region.width && e.region.height === t.region.height, h = r.subscribe(() => {
-				let e = r.currentSelection(), n = !m(p, e);
-				p = {
+			}, c = null, l = null, u = null, d = null, [f, p] = Tr(!!n.rendererRoot?.querySelector("[data-mesurer-responsive-stage]")), m = null, h = r.currentSelection(), g = {
+				elements: [...h.elements],
+				region: h.region ? { ...h.region } : null
+			}, _ = (e, t) => e.elements.length !== t.elements.length || e.elements.some((e, n) => e !== t.elements[n]) ? !1 : e.region === t.region ? !0 : !e.region || !t.region ? !1 : e.region.left === t.region.left && e.region.top === t.region.top && e.region.width === t.region.width && e.region.height === t.region.height, v = r.subscribe(() => {
+				let e = r.currentSelection(), i = !_(g, e);
+				g = {
 					elements: [...e.elements],
 					region: e.region ? { ...e.region } : null
-				}, r.selectGestureActive() ? c?.abandonNoteComposer() : n && c?.closeNoteComposer();
-				let i = hm(r);
-				i !== (t.state.get(cm)?.hasSelection ?? !1) && t.state.update(cm, () => ({ hasSelection: i }));
+				}, r.selectGestureActive() ? c?.abandonNoteComposer() : i && c?.closeNoteComposer();
+				let a = hm(r, n.rendererRoot);
+				a !== (t.state.get(cm)?.hasSelection ?? !1) && t.state.update(cm, () => ({ hasSelection: a }));
 			});
 			t.command.register("context.copy", () => i.copyContext()), t.command.register("context.copy-selection", () => i.copyContext({ scope: "selection" }));
-			let g = () => {
+			let y = () => {
 				let e = u?.element;
 				e && (n.rendererRoot?.hasAttribute(lm) ? e.setAttribute(lm, "true") : e.removeAttribute(lm));
-			}, _ = () => {
+			}, b = () => {
 				d?.disconnect(), d = null, c = null, l?.(), l = null, u?.dispose(), u = null;
-			}, v = () => {
+			}, x = () => {
 				if (u) return;
-				if (u = pu(n), u.element.dataset.mesurerLayer = "evidence", u.element.dataset.mesurerContextRoot = "true", n.rendererRoot) {
-					let e = new n.ownerWindow.MutationObserver(g);
+				if (u = pu(n), m = u.element.parentNode, u.element.dataset.mesurerLayer = "evidence", u.element.dataset.mesurerContextRoot = "true", n.rendererRoot) {
+					let e = new n.ownerWindow.MutationObserver(y);
 					d = e, e.observe(n.rendererRoot, {
 						attributes: !0,
 						attributeFilter: [lm]
-					}), g();
+					}), y();
 				}
 				let e = {
 					runtime: r,
@@ -10399,16 +10398,25 @@ function gm(e = {}) {
 					onController: (e) => {
 						c = e;
 					},
-					coordinateSpace: "document",
+					get coordinateSpace() {
+						return f() ? "viewport" : "document";
+					},
 					rendererRoot: n.rendererRoot
 				};
 				l = Ur(() => Or(lu, yr(e, { get ownerWindow() {
 					return n.ownerWindow;
-				} })), u.element);
-			}, y = () => {
-				a() ? v() : _();
+				} })), u.element), Qt(f) && n.rendererRoot && (n.rendererRoot.append(u.element), u.element.style.zIndex = "90");
+			}, S = () => {
+				a() ? x() : b();
+			};
+			S(), t.state.subscribe(S);
+			let C = () => {
+				let e = !!n.rendererRoot?.querySelector("[data-mesurer-responsive-stage]");
+				if (e === Qt(f) || (p(e), !u)) return;
+				let t = e ? n.rendererRoot : m;
+				t && u.element.parentNode !== t && t.appendChild(u.element), u.element.style.zIndex = e ? "90" : "", Qt(() => c?.closeNoteComposer());
 			};
-			y(), t.state.subscribe(y), t.command.register("context.add-note", () => {
+			n.ownerWindow.addEventListener("mesurer:responsive-stage-change", C), t.command.register("context.add-note", () => {
 				o() && c?.openNoteComposer();
 			}), t.tool.register({
 				id: "context.copy",
@@ -10452,7 +10460,7 @@ function gm(e = {}) {
 					set: s
 				}]
 			}), t.lifecycle.onDispose(() => {
-				h(), _(), r.dispose();
+				v(), n.ownerWindow.removeEventListener("mesurer:responsive-stage-change", C), b(), r.dispose();
 			});
 		}
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesurer-solid",
-  "version": "0.2.3-beta.6",
+  "version": "0.2.3-beta.7",
   "description": "Framework-agnostic UI measurement and inspection tools for browser apps and coding agents.",
   "license": "MIT",
   "type": "module",

package/skills/mesurer-ui/SKILL.md

@@ -15,7 +15,7 @@ A meaningful Mesurer step must return evidence the agent actually uses.
 
 ## Know the available capabilities
 
-The base inspector has Select, X-ray, Color Picker, Rulers, Responsive, Typography, Guides, Distance, and Settings. Responsive opens one live iPhone 15 (393 × 852 CSS px) same-origin preview; while it is open, Select, measurements, X-ray, and Typography inspect accessible preview documents. Preview evidence is projected over the scaled iframe, and the root page and stage chrome are not inspection sources. Context annotations are unavailable for preview targets in this increment. The existing `window.__MESURER__` inspect/select methods continue targeting the root document. Preview loads rerun page JavaScript and side effects. Color Picker uses application-local host capture when available and otherwise uses a working browser `EyeDropper`; a successful sample copies the configured format to the clipboard.
+The base inspector has Select, X-ray, Color Picker, Rulers, Responsive, Typography, Guides, Distance, and Settings. Responsive opens one live iPhone 15 (393 × 852 CSS px) same-origin preview; while it is open, Select, measurements, X-ray, and Typography inspect accessible preview documents. Preview evidence is projected over the scaled iframe, and the root page and stage chrome are not inspection sources. Context preview notes store exact URL/width/height/preview identity and render only over a matching preview in the root overlay. Removing or closing previews hides notes and releases watchers without deleting saved records; a uniquely matching recreated viewport can conservatively rebind. Context targets and capture plans include viewport metadata with root-projected geometry. The existing `window.__MESURER__` inspect/select methods continue targeting the root document. Preview loads rerun page JavaScript and side effects. Color Picker uses application-local host capture when available and otherwise uses a working browser `EyeDropper`; a successful sample copies the configured format to the clipboard.
 
 Optional first-party plugins add Context, Edit, Layout Guides, Screenshot, Recording, and Codex delivery. Rulers, ordinary Guides, and Layout Guides remain usable while Edit is active; X-ray, Color Picker, Typography, Screenshot, and Recording stay in the Select lane. Context carries annotations and structured evidence. Edit carries Before/Desired/Live movement intent through the existing Arrange compatibility APIs. Layout Guides carries page-scoped column/row/grid intent and exposes saved guides through Context with each guide's `visible` flag. Screenshot and Recording are human capture workflows; Recording exposes the typed `recording:v1` service when application code needs its lifecycle. Codex is an optional human queue transport, not the normal agent protocol.