mesurer-solid 0.2.5-beta.0 → 0.2.5-beta.1

package/dist/index.js

@@ -8404,45 +8404,20 @@ function hm(e) {
 			x: n.scrollX,
 			y: n.scrollY
 		};
-	}, p = (e, n) => {
-		let r = e.rect, i = t?.ownerDocument.defaultView?.devicePixelRatio || 1, a = (e) => Math.round(e * i) / i, o = Math.max(1, Math.round(i)) / i, s = t?.getBoundingClientRect(), c = s?.left ?? r.left, l = s?.top ?? r.top, u = a(c), d = a(c + (s?.width ?? r.width)), f = a(l), p = a(l + (s?.height ?? r.height)), m = (e, t, n, r) => ({
-			left: "0px",
-			top: "0px",
-			width: "1px",
-			height: "1px",
-			"transform-origin": "0 0",
-			transform: `translate(${e}px, ${t}px) scale(${n}, ${r})`
-		});
-		switch (n) {
-			case "top": return m(u - c, f - l, d - u, o);
-			case "right": return m(d - c - o, f - l, o, p - f);
-			case "bottom": return m(u - c, p - l - o, d - u, o);
-			case "left": return m(u - c, f - l, o, p - f);
-		}
-	}, m = () => {
+	}, p = () => {
 		let r = d();
 		if (!r || !t) return;
-		let i = Yd(r.ownerDocument), a = Xd(Qu(r), i), o = r.ownerDocument.defaultView, s = t.parentElement, c = !!(o && s?.parentNode === r.ownerDocument.body), l = c ? o.scrollX : 0, u = c ? o.scrollY : 0, f = a.left + l, m = a.top + u;
+		let i = Yd(r.ownerDocument), a = Xd(Qu(r), i), o = r.ownerDocument.defaultView, s = t.parentElement, c = !!(o && s?.parentNode === r.ownerDocument.body), l = c ? o.scrollX : 0, u = c ? o.scrollY : 0, f = a.left + l, p = a.top + u;
 		Object.assign(t.style, {
 			left: `${f}px`,
-			top: `${m}px`,
+			top: `${p}px`,
 			width: `${a.width}px`,
 			height: `${a.height}px`,
 			display: a.width > 0 && a.height > 0 ? "" : "none"
-		});
-		for (let n of [
-			"top",
-			"right",
-			"bottom",
-			"left"
-		]) {
-			let r = t.querySelector(`[data-mesurer-selection-edge="${n}"]`);
-			if (r) for (let [t, i] of Object.entries(p(e.measurement, n))) r.style.setProperty(t, i);
-		}
-		n && Object.assign(n.style, {
+		}), n && Object.assign(n.style, {
 			left: `${f + a.width / 2}px`,
-			top: `${m + a.height + 2}px`,
-			display: a.width > 0 && a.height > 0 && g({
+			top: `${p + a.height + 2}px`,
+			display: a.width > 0 && a.height > 0 && h({
 				...e.measurement,
 				rect: a
 			}) ? "" : "none"
@@ -8455,9 +8430,9 @@ function hm(e) {
 		i(o ? e.ownerDocument.body : null);
 		let s = t && o ? Sf(t, e) : null, c = o ? dm(r, e, () => [t, n]) : null, l = 0, u = () => {
 			t?.dataset.mesurerNativeScrollAnchor === "box" || l || (l = r.requestAnimationFrame(() => {
-				l = 0, t?.dataset.mesurerNativeScrollAnchor !== "box" && m();
+				l = 0, t?.dataset.mesurerNativeScrollAnchor !== "box" && p();
 			}));
-		}, f = new r.ResizeObserver(m), p = (() => {
+		}, f = new r.ResizeObserver(p), m = (() => {
 			let e = r;
 			for (; e.frameElement;) {
 				let t = e.frameElement.ownerDocument.defaultView;
@@ -8466,16 +8441,16 @@ function hm(e) {
 			}
 			return e;
 		})();
-		m(), c?.sync(), f.observe(e), r.addEventListener("scroll", u, {
+		p(), c?.sync(), f.observe(e), r.addEventListener("scroll", u, {
 			capture: !0,
 			passive: !0
 		});
 		let h = Yd(e.ownerDocument) !== void 0;
-		return p !== r && h && p.addEventListener("mesurer:responsive-preview-geometry-change", u), r.addEventListener("resize", m, !0), p !== r && h && p.addEventListener("resize", m, !0), () => {
-			f.disconnect(), s?.(), c?.release(), l && r.cancelAnimationFrame(l), r.removeEventListener("scroll", u, !0), p !== r && h && p.removeEventListener("mesurer:responsive-preview-geometry-change", u), r.removeEventListener("resize", m, !0), p !== r && h && p.removeEventListener("resize", m, !0);
+		return m !== r && h && m.addEventListener("mesurer:responsive-preview-geometry-change", u), r.addEventListener("resize", p, !0), m !== r && h && m.addEventListener("resize", p, !0), () => {
+			f.disconnect(), s?.(), c?.release(), l && r.cancelAnimationFrame(l), r.removeEventListener("scroll", u, !0), m !== r && h && m.removeEventListener("mesurer:responsive-preview-geometry-change", u), r.removeEventListener("resize", p, !0), m !== r && h && m.removeEventListener("resize", p, !0);
 		};
 	});
-	let h = (r) => [Y(K, {
+	let m = (r) => [Y(K, {
 		get when() {
 			return !o();
 		},
@@ -8488,145 +8463,57 @@ function hm(e) {
 				t = e;
 			}, n), Q(n, Y(K, {
 				get when() {
-					return J(() => !!d())() ? Yd(d().ownerDocument) !== void 0 : d();
+					return a().top;
 				},
-				get fallback() {
-					return [
-						Y(K, {
-							get when() {
-								return a().top;
-							},
-							get children() {
-								var t = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full" });
-								return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
-									$(t, "style", e, n);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().right;
-							},
-							get children() {
-								var t = X("div", { class: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px" });
-								return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
-									$(t, "style", e, n);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().bottom;
-							},
-							get children() {
-								var t = X("div", { class: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full" });
-								return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
-									$(t, "style", e, n);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().left;
-							},
-							get children() {
-								var t = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px" });
-								return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
-									$(t, "style", e, n);
-								}), t;
-							}
-						})
-					];
+				get children() {
+					var t = X("div", {
+						"data-mesurer-selection-edge": "top",
+						class: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full"
+					});
+					return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
+						$(t, "style", e, n);
+					}), t;
+				}
+			}), null), Q(n, Y(K, {
+				get when() {
+					return a().right;
 				},
 				get children() {
-					return [
-						Y(K, {
-							get when() {
-								return a().top;
-							},
-							get children() {
-								var t = X("svg", {
-									"data-mesurer-selection-edge": "top",
-									class: "msr:absolute"
-								}), n = X("rect", {
-									width: "1",
-									height: "1",
-									"shape-rendering": "crispEdges"
-								});
-								return Z(t, n), q(() => ({
-									e: p(r(), "top"),
-									t: e.outlineColor
-								}), ({ e, t: r }, i) => {
-									e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "fill", r, i?.t);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().right;
-							},
-							get children() {
-								var t = X("svg", {
-									"data-mesurer-selection-edge": "right",
-									class: "msr:absolute"
-								}), n = X("rect", {
-									width: "1",
-									height: "1",
-									"shape-rendering": "crispEdges"
-								});
-								return Z(t, n), q(() => ({
-									e: p(r(), "right"),
-									t: e.outlineColor
-								}), ({ e, t: r }, i) => {
-									e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "fill", r, i?.t);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().bottom;
-							},
-							get children() {
-								var t = X("svg", {
-									"data-mesurer-selection-edge": "bottom",
-									class: "msr:absolute"
-								}), n = X("rect", {
-									width: "1",
-									height: "1",
-									"shape-rendering": "crispEdges"
-								});
-								return Z(t, n), q(() => ({
-									e: p(r(), "bottom"),
-									t: e.outlineColor
-								}), ({ e, t: r }, i) => {
-									e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "fill", r, i?.t);
-								}), t;
-							}
-						}),
-						Y(K, {
-							get when() {
-								return a().left;
-							},
-							get children() {
-								var t = X("svg", {
-									"data-mesurer-selection-edge": "left",
-									class: "msr:absolute"
-								}), n = X("rect", {
-									width: "1",
-									height: "1",
-									"shape-rendering": "crispEdges"
-								});
-								return Z(t, n), q(() => ({
-									e: p(r(), "left"),
-									t: e.outlineColor
-								}), ({ e, t: r }, i) => {
-									e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "fill", r, i?.t);
-								}), t;
-							}
-						})
-					];
+					var t = X("div", {
+						"data-mesurer-selection-edge": "right",
+						class: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px"
+					});
+					return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
+						$(t, "style", e, n);
+					}), t;
 				}
-			})), q(() => ({
+			}), null), Q(n, Y(K, {
+				get when() {
+					return a().bottom;
+				},
+				get children() {
+					var t = X("div", {
+						"data-mesurer-selection-edge": "bottom",
+						class: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full"
+					});
+					return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
+						$(t, "style", e, n);
+					}), t;
+				}
+			}), null), Q(n, Y(K, {
+				get when() {
+					return a().left;
+				},
+				get children() {
+					var t = X("div", {
+						"data-mesurer-selection-edge": "left",
+						class: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px"
+					});
+					return q(() => ({ "background-color": e.outlineColor }), (e, n) => {
+						$(t, "style", e, n);
+					}), t;
+				}
+			}), null), q(() => ({
 				e: s() ? "true" : void 0,
 				t: {
 					left: `${r().rect.left + f().x}px`,
@@ -8647,7 +8534,7 @@ function hm(e) {
 		}
 	}), Y(K, {
 		get when() {
-			return J(() => e.showLabel !== !1)() && g(r());
+			return J(() => e.showLabel !== !1)() && h(r());
 		},
 		get children() {
 			var e = X("div", {
@@ -8670,7 +8557,7 @@ function hm(e) {
 				$(e, "style", t, n);
 			}), e;
 		}
-	})], g = (t) => {
+	})], h = (t) => {
 		let n = d() ? Yd(d().ownerDocument) : e.clipRect;
 		if (!n) return !0;
 		let r = t.rect, i = r.left + r.width / 2, a = r.top + r.height + 2;
@@ -8689,7 +8576,7 @@ function hm(e) {
 					class: "msr:pointer-events-none",
 					"data-mesurer-measurement": "true"
 				});
-				return Q(e, () => h(t)), q(() => ({
+				return Q(e, () => m(t)), q(() => ({
 					e: "paddingRect" in t() ? "true" : void 0,
 					t: o() ? "true" : void 0
 				}), ({ e: t, t: n }, r) => {
@@ -8707,7 +8594,7 @@ function hm(e) {
 						"data-mesurer-selected-measurement": "true",
 						"data-mesurer-inspector-ui": "true"
 					});
-					return Q(n, () => h(t)), q(() => e.theme ?? "system", (e, t) => {
+					return Q(n, () => m(t)), q(() => e.theme ?? "system", (e, t) => {
 						$(n, "data-theme", e, t);
 					}), n;
 				}
@@ -10034,23 +9921,26 @@ function Sh(e) {
 	}), U = ho(() => {
 		let t = e.model.state.settings.multiMeasureEnabled && e.model.state.measurements.length > 0 ? e.model.state.measurements : e.model.state.activeMeasurement ? [e.model.state.activeMeasurement] : [], n = new Set(M().map((e) => e.elementRef).filter((e) => !!e));
 		return t.filter((e) => !e.elementRef || !n.has(e.elementRef));
-	}), W = ho(() => e.displayedSelectedMeasurements), te = ho(() => {
+	}), W = ho(() => e.displayedSelectedMeasurements), te = () => M().some((e) => {
+		let t = e.elementRef?.ownerDocument;
+		return t ? Yd(t) !== void 0 : !1;
+	}), ne = ho(() => {
 		let t = e.model.state.hoverElement;
 		return !!(t && M().some((e) => e.elementRef === t));
-	}), ne = ho(() => e.model.state.heldDistances), re = ho(() => pf(U().map((e) => e.rect))), ie = ho(() => pf(W().map((e) => e.rect))), ae = ho(() => {
+	}), re = ho(() => e.model.state.heldDistances), ie = ho(() => pf(U().map((e) => e.rect))), ae = ho(() => pf(W().map((e) => e.rect))), oe = ho(() => {
 		let n = M();
 		if (!S() || !e.selectionSpacingStyle.enabled || n.length < 2) return [];
 		let r = t?.ownerDocument.defaultView;
 		return r ? jd(n, r) : [];
-	}), oe = ho(() => ae().map((e) => e.id)), se = (e) => ae().find((t) => t.id === e), ce = ho(() => M().map((e) => e.id).join("|"));
-	yo(() => ce(), () => {
+	}), se = ho(() => oe().map((e) => e.id)), ce = (e) => oe().find((t) => t.id === e), le = ho(() => M().map((e) => e.id).join("|"));
+	yo(() => le(), () => {
 		f(null), m(null);
 	});
-	let le = () => {
+	let ue = () => {
 		let t = e.model.state.hoverRect;
 		return t ? pf([t, ...W().map((e) => e.rect)])[0] ?? null : null;
-	}, ue = () => mf(t, e.model.state.hoverElement), de = () => {
-		let t = e.model.state.hoverElement, n = ue(), r = t?.ownerDocument.defaultView;
+	}, de = () => mf(t, e.model.state.hoverElement), fe = () => {
+		let t = e.model.state.hoverElement, n = de(), r = t?.ownerDocument.defaultView;
 		return !t || !r || n !== t.ownerDocument.body ? {
 			x: 0,
 			y: 0
@@ -10058,13 +9948,13 @@ function Sh(e) {
 			x: r.scrollX,
 			y: r.scrollY
 		};
-	}, fe = () => {
+	}, pe = () => {
 		N();
 		let t = e.model.state.hoverElement;
 		if (t && Yd(t.ownerDocument) !== void 0 && e.model.state.selectedMeasurements.some((e) => e.elementRef === t)) return null;
 		let r = t ? Qu(t) : e.model.state.hoverRect, i = t ? Yd(t.ownerDocument) : void 0, a = r && t ? Xd(r, i) : r;
 		if (!a || a.width <= 0 || a.height <= 0) return null;
-		let o = !!ue(), s = o || i ? "2147482700" : void 0, c = de();
+		let o = !!de(), s = o || i ? "2147482700" : void 0, c = fe();
 		var l = X("div", {
 			"data-mesurer-hover-measurement": "true",
 			"data-mesurer-document-hover-layer": o ? "true" : void 0,
@@ -10074,7 +9964,7 @@ function Sh(e) {
 			n = e;
 		}, l), Q(l, Y(K, {
 			get when() {
-				return le()?.top;
+				return ue()?.top;
 			},
 			get children() {
 				var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full" });
@@ -10091,7 +9981,7 @@ function Sh(e) {
 			}
 		}), null), Q(l, Y(K, {
 			get when() {
-				return le()?.right;
+				return ue()?.right;
 			},
 			get children() {
 				var e = X("div", { class: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px" });
@@ -10108,7 +9998,7 @@ function Sh(e) {
 			}
 		}), null), Q(l, Y(K, {
 			get when() {
-				return le()?.bottom;
+				return ue()?.bottom;
 			},
 			get children() {
 				var e = X("div", { class: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full" });
@@ -10125,7 +10015,7 @@ function Sh(e) {
 			}
 		}), null), Q(l, Y(K, {
 			get when() {
-				return le()?.left;
+				return ue()?.left;
 			},
 			get children() {
 				var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px" });
@@ -10154,10 +10044,10 @@ function Sh(e) {
 		}), (e, t) => {
 			$(l, "style", e, t);
 		}), l;
-	}, pe = (t) => {
+	}, me = (t) => {
 		let n = t === "active" ? 100 : t === "hover" ? 90 : t === "preview" ? 50 : 70;
 		return `color-mix(in oklch, ${e.model.state.settings.guideColor} ${n}%, transparent)`;
-	}, me = ho(() => {
+	}, he = ho(() => {
 		if (e.responsiveOpen) return [];
 		if (e.model.state.guides.length > 0 || !e.model.state.settingsOpen || e.model.state.settingsTab !== "guides") return e.model.state.guides;
 		let n = t?.ownerDocument.defaultView;
@@ -10170,21 +10060,21 @@ function Sh(e) {
 			orientation: "horizontal",
 			position: n.innerHeight / 2
 		}] : e.model.state.guides;
-	}), he = () => {
+	}), ge = () => {
 		s && t?.ownerDocument.defaultView?.clearTimeout(s), s = 0, c = null;
-	}, ge = (t, n) => {
+	}, _e = (t, n) => {
 		if (!e.model.current.enabled || e.model.current.settingsOpen || n.button !== 0) return;
 		if (n.preventDefault(), n.stopPropagation(), e.model.checkpoint(), n.shiftKey) {
 			e.model.setSelectedGuideIds(e.model.current.selectedGuideIds.includes(t.id) ? e.model.current.selectedGuideIds.filter((e) => e !== t.id) : [...e.model.current.selectedGuideIds, t.id]);
 			return;
 		}
-		e.model.setSelectedGuideIds([t.id]), he();
+		e.model.setSelectedGuideIds([t.id]), ge();
 		let r = n.currentTarget.ownerDocument.defaultView;
 		r && (c = t.id, s = r.setTimeout(() => {
 			s = 0, c === t.id && e.model.setTransient({ draggingGuideId: t.id });
 		}, 220)), Vl(n.currentTarget, n.pointerId);
-	}, _e = (t, n) => {
-		n.stopPropagation(), he(), e.model.current.draggingGuideId === t.id && e.model.setTransient({ draggingGuideId: null }), n.currentTarget.hasPointerCapture(n.pointerId) && n.currentTarget.releasePointerCapture(n.pointerId);
+	}, ve = (t, n) => {
+		n.stopPropagation(), ge(), e.model.current.draggingGuideId === t.id && e.model.setTransient({ draggingGuideId: null }), n.currentTarget.hasPointerCapture(n.pointerId) && n.currentTarget.releasePointerCapture(n.pointerId);
 	};
 	Un(() => {
 		let s = t, c = s?.ownerDocument.defaultView, d = s?.ownerDocument;
@@ -10279,10 +10169,10 @@ function Sh(e) {
 			capture: !0,
 			passive: !0
 		}), c.addEventListener("resize", S, !0), c.addEventListener("pointerdown", T, !0), c.addEventListener("pointermove", E, !0), c.addEventListener("pointerup", D, !0), c.addEventListener("pointercancel", D, !0), () => {
-			s.removeEventListener("pointermove", m), c.removeEventListener("pointermove", x, !0), c.removeEventListener("scroll", w, !0), c.removeEventListener("scroll", h, !0), c.removeEventListener("resize", S, !0), c.removeEventListener("pointerdown", T, !0), c.removeEventListener("pointermove", E, !0), c.removeEventListener("pointerup", D, !0), c.removeEventListener("pointercancel", D, !0), p.disconnect(), l && c.clearTimeout(l), u && c.cancelAnimationFrame(u), l = 0, u = 0, n?.style.removeProperty("visibility"), he(), o?.previousUserSelect !== null && o && (d.documentElement.style.userSelect = o.previousUserSelect), o = null;
+			s.removeEventListener("pointermove", m), c.removeEventListener("pointermove", x, !0), c.removeEventListener("scroll", w, !0), c.removeEventListener("scroll", h, !0), c.removeEventListener("resize", S, !0), c.removeEventListener("pointerdown", T, !0), c.removeEventListener("pointermove", E, !0), c.removeEventListener("pointerup", D, !0), c.removeEventListener("pointercancel", D, !0), p.disconnect(), l && c.clearTimeout(l), u && c.cancelAnimationFrame(u), l = 0, u = 0, n?.style.removeProperty("visibility"), ge(), o?.previousUserSelect !== null && o && (d.documentElement.style.userSelect = o.previousUserSelect), o = null;
 		};
 	});
-	let ve = () => [
+	let ye = () => [
 		Y(So, {
 			get each() {
 				return I();
@@ -10299,7 +10189,7 @@ function Sh(e) {
 					return Yd(t().sourceDocument ?? t().elementRef?.ownerDocument);
 				},
 				get edgeVisibility() {
-					return ie()[n()];
+					return ae()[n()];
 				},
 				get outlineColor() {
 					return A();
@@ -10358,16 +10248,16 @@ function Sh(e) {
 					})()
 				}), Y(So, {
 					get each() {
-						return oe();
+						return se();
 					},
 					children: (t) => Y(cm, {
 						get distance() {
-							return se(t);
+							return ce(t);
 						},
 						kind: "selection-spacing",
 						showRects: !1,
 						get spacingScopeId() {
-							return ce();
+							return le();
 						},
 						get selectionSpacingStyle() {
 							return e.selectionSpacingStyle;
@@ -10379,7 +10269,7 @@ function Sh(e) {
 			}
 		})
 	];
-	var ye = X("div", {
+	var be = X("div", {
 		"data-mesurer-interaction-overlay": "true",
 		onPointerDown: (t) => e.onPointerDown(t),
 		onPointerUp: (t) => e.onPointerUp(t),
@@ -10387,7 +10277,7 @@ function Sh(e) {
 	});
 	return lc(() => (e) => {
 		t = e;
-	}, ye), Q(ye, Y(K, {
+	}, be), Q(be, Y(K, {
 		get when() {
 			return S();
 		},
@@ -10400,7 +10290,7 @@ function Sh(e) {
 					children: (t, n) => Y(hm, {
 						measurement: t,
 						get edgeVisibility() {
-							return re()[n()];
+							return ie()[n()];
 						},
 						get outlineColor() {
 							return O();
@@ -10455,22 +10345,22 @@ function Sh(e) {
 				}),
 				Y(K, {
 					get when() {
-						return J(() => !!(e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled && (e.editSelectionHover() || M().length <= 1)))() ? !te() : e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled && (e.editSelectionHover() || M().length <= 1);
+						return J(() => !!(e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled && (e.editSelectionHover() || M().length <= 1)))() ? !ne() : e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled && (e.editSelectionHover() || M().length <= 1);
 					},
 					get children() {
 						return Y(K, {
 							get when() {
-								return ue();
+								return de();
 							},
 							get fallback() {
-								return fe();
+								return pe();
 							},
 							children: (e) => Y(ns, {
 								get mount() {
 									return e();
 								},
 								get children() {
-									return fe();
+									return pe();
 								}
 							})
 						});
@@ -10478,7 +10368,7 @@ function Sh(e) {
 				})
 			];
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return B();
 		},
@@ -10516,7 +10406,7 @@ function Sh(e) {
 				}
 			});
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !B())() && ee();
 		},
@@ -10553,7 +10443,7 @@ function Sh(e) {
 				}
 			});
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !!(e.interactive && C() && e.model.state.guidePreview))() ? !e.model.state.draggingGuideId : e.interactive && C() && e.model.state.guidePreview;
 		},
@@ -10576,29 +10466,29 @@ function Sh(e) {
 					top: "0",
 					width: "2px",
 					height: "100%",
-					"background-color": pe("preview")
+					"background-color": me("preview")
 				} : {
 					top: "6px",
 					left: "0",
 					height: "2px",
 					width: "100%",
-					"background-color": pe("preview")
+					"background-color": me("preview")
 				}
 			}), ({ e, t: r }, i) => {
 				e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "style", r, i?.t);
 			}), t;
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return S();
 		},
 		get children() {
 			return Y(K, {
 				get when() {
-					return J(() => M().length > 1)() ? h() : null;
+					return J(() => M().length > 1 && !te())() ? h() : null;
 				},
 				get fallback() {
-					return Y(ve, {});
+					return Y(ye, {});
 				},
 				children: (t) => Y(ns, {
 					get mount() {
@@ -10610,8 +10500,8 @@ function Sh(e) {
 							"data-mesurer-inspector-ui": "true",
 							class: "msr:pointer-events-none"
 						});
-						return Q(t, Y(ve, {})), q(() => ({
-							e: ce(),
+						return Q(t, Y(ye, {})), q(() => ({
+							e: le(),
 							t: e.model.state.settings.theme,
 							a: {
 								position: "absolute",
@@ -10626,7 +10516,7 @@ function Sh(e) {
 				})
 			});
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !!S())() ? M().length > 1 : S();
 		},
@@ -10639,16 +10529,16 @@ function Sh(e) {
 				r = e;
 			}, t), Q(t, Y(So, {
 				get each() {
-					return oe();
+					return se();
 				},
 				children: (t) => Y(cm, {
 					get distance() {
-						return se(t);
+						return ce(t);
 					},
 					showRects: !1,
 					kind: "selection-spacing",
 					get spacingScopeId() {
-						return ce();
+						return le();
 					},
 					get selectionSpacingStyle() {
 						return e.selectionSpacingStyle;
@@ -10660,9 +10550,9 @@ function Sh(e) {
 				})
 			})), t;
 		}
-	}), null), Q(ye, Y(So, {
+	}), null), Q(be, Y(So, {
 		get each() {
-			return ne();
+			return re();
 		},
 		children: (t) => Y(cm, {
 			distance: t,
@@ -10671,7 +10561,7 @@ function Sh(e) {
 			},
 			kind: "held"
 		})
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !!(S() && e.model.state.altPressed))() ? e.optionPairOverlay : S() && e.model.state.altPressed;
 		},
@@ -10683,7 +10573,7 @@ function Sh(e) {
 				kind: "preview"
 			});
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !!(e.interactive && C() && e.model.state.altPressed))() ? e.guideDistanceOverlay : e.interactive && C() && e.model.state.altPressed;
 		},
@@ -10695,7 +10585,7 @@ function Sh(e) {
 				kind: "preview"
 			});
 		}
-	}), null), Q(ye, Y(K, {
+	}), null), Q(be, Y(K, {
 		get when() {
 			return J(() => !!(S() && e.model.state.altPressed))() ? e.optionContainerLines : S() && e.model.state.altPressed;
 		},
@@ -10813,23 +10703,23 @@ function Sh(e) {
 				}
 			})
 		]
-	}), null), Q(ye, Y(So, {
+	}), null), Q(be, Y(So, {
 		get each() {
-			return me();
+			return he();
 		},
 		children: (t) => {
-			let n = () => t.id.startsWith("__mesurer-preview-"), r = () => !n() && e.model.state.selectedGuideIds.includes(t.id), i = () => !n() && e.hoverGuide?.id === t.id, a = () => r() ? pe("active") : i() ? pe("hover") : pe("default"), o = () => Math.max(e.model.state.settings.guideStyle.width, r() || i() ? 2 : e.model.state.settings.guideStyle.width), s = () => e.model.state.settings.guideStyle.pattern === "solid" ? void 0 : e.model.state.settings.guideStyle.pattern === "dotted" ? `radial-gradient(circle, ${a()} 0 ${o() / 2}px, transparent ${o() / 2 + .5}px)` : `repeating-linear-gradient(${t.orientation === "vertical" ? "to bottom" : "to right"}, ${a()} 0 ${e.model.state.settings.guideStyle.dashLength}px, transparent ${e.model.state.settings.guideStyle.dashLength}px ${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px)`, c = () => e.model.state.settings.guideStyle.pattern === "dotted" ? t.orientation === "vertical" ? `${o()}px ${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px` : `${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px ${o()}px` : void 0;
+			let n = () => t.id.startsWith("__mesurer-preview-"), r = () => !n() && e.model.state.selectedGuideIds.includes(t.id), i = () => !n() && e.hoverGuide?.id === t.id, a = () => r() ? me("active") : i() ? me("hover") : me("default"), o = () => Math.max(e.model.state.settings.guideStyle.width, r() || i() ? 2 : e.model.state.settings.guideStyle.width), s = () => e.model.state.settings.guideStyle.pattern === "solid" ? void 0 : e.model.state.settings.guideStyle.pattern === "dotted" ? `radial-gradient(circle, ${a()} 0 ${o() / 2}px, transparent ${o() / 2 + .5}px)` : `repeating-linear-gradient(${t.orientation === "vertical" ? "to bottom" : "to right"}, ${a()} 0 ${e.model.state.settings.guideStyle.dashLength}px, transparent ${e.model.state.settings.guideStyle.dashLength}px ${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px)`, c = () => e.model.state.settings.guideStyle.pattern === "dotted" ? t.orientation === "vertical" ? `${o()}px ${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px` : `${e.model.state.settings.guideStyle.dashLength + e.model.state.settings.guideStyle.gap}px ${o()}px` : void 0;
 			var l = X("div", {
 				class: "msr:absolute",
 				"data-mesurer-guide": "true",
 				onPointerDown: (r) => {
-					!n() && e.model.current.toolMode !== "none" && ge(t, r);
+					!n() && e.model.current.toolMode !== "none" && _e(t, r);
 				},
 				onPointerUp: (r) => {
-					!n() && e.model.current.toolMode !== "none" && _e(t, r);
+					!n() && e.model.current.toolMode !== "none" && ve(t, r);
 				},
 				onPointerCancel: (r) => {
-					!n() && e.model.current.toolMode !== "none" && _e(t, r);
+					!n() && e.model.current.toolMode !== "none" && ve(t, r);
 				}
 			}), u = X("div", { class: "msr:absolute" });
 			return Z(l, u), q(() => ({
@@ -10873,8 +10763,8 @@ function Sh(e) {
 		e: `msr:absolute msr:inset-0 msr:select-none ${w() ? `msr:pointer-events-auto ${C() ? e.hoverGuide || e.model.state.draggingGuideId ? "msr:cursor-default" : "msr:cursor-crosshair" : "msr:cursor-default"} msr:opacity-100` : "msr:pointer-events-none msr:opacity-0"}`,
 		t: { "pointer-events": E() ? "auto" : "none" }
 	}), ({ e, t }, n) => {
-		e !== n?.e && $(ye, "class", e, n?.e), t !== n?.t && $(ye, "style", t, n?.t);
-	}), ye;
+		e !== n?.e && $(be, "class", e, n?.e), t !== n?.t && $(be, "style", t, n?.t);
+	}), be;
 }
 var Ch = 18, wh = 5, Th = 32, Eh = Array.from({ length: 801 }, (e, t) => t * wh);
 function Dh(e) {
@@ -16577,7 +16467,7 @@ function Qy(e) {
 	let F = ho(() => {
 		let e = t.state.start, n = t.state.end;
 		return e && n ? Ou(e, n) : null;
-	}), I = ho(() => Zy(t.state.selectedMeasurements, t.state.selectionOriginRect)), L = ho(() => I() ? [I()] : t.state.selectedMeasurements.length ? t.state.selectedMeasurements : t.state.selectedMeasurement ? [t.state.selectedMeasurement] : []), R = ho(() => Sv(t.state.guides, t.state.selectedGuideIds)), z = ho(() => xv(t.state.hoverPointer, t.state.guides)), B = ho(() => I() ?? t.state.selectedMeasurement ?? t.state.selectedMeasurements.at(-1) ?? null), V = () => (r.pluginTools ?? []).some((e) => e.modeSwitch === !0 && e.toolbarMode === "edit" && (e.active?.() ?? !1)), ee = ho(() => {
+	}), I = ho(() => Zy(t.state.selectedMeasurements, t.state.selectionOriginRect)), L = ho(() => r.responsiveOpen && t.state.selectedMeasurements.length > 1 ? t.state.selectedMeasurements : I() ? [I()] : t.state.selectedMeasurements.length ? t.state.selectedMeasurements : t.state.selectedMeasurement ? [t.state.selectedMeasurement] : []), R = ho(() => Sv(t.state.guides, t.state.selectedGuideIds)), z = ho(() => xv(t.state.hoverPointer, t.state.guides)), B = ho(() => I() ?? t.state.selectedMeasurement ?? t.state.selectedMeasurements.at(-1) ?? null), V = () => (r.pluginTools ?? []).some((e) => e.modeSwitch === !0 && e.toolbarMode === "edit" && (e.active?.() ?? !1)), ee = ho(() => {
 		if (V()) return null;
 		let e = B()?.elementRef ?? null;
 		return e?.isConnected ? e : null;
@@ -16857,7 +16747,7 @@ function Qy(e) {
 	}), yo(() => t.state.xrayVisible, (e) => N.setVisible(e)), yo(() => r.responsiveOpen === !0, (e) => {
 		N.setResponsiveOnly(e), e && t.current.toolMode === "text-inspector" && m?.clearResponsivePreview();
 		let n = !e && P;
-		P = e, n && (ie(), m?.clearResponsivePreview(), t.setSelectedMeasurements([], null), t.setSelectedGuideIds([]), t.setHoverTarget(null, null), t.setTransient({
+		P = e, n && (ie(), m?.clearResponsivePreview(), t.setSelectedMeasurements([], null), t.setActiveMeasurement(null), t.setSelectedGuideIds([]), t.setHoverTarget(null, null), t.setTransient({
 			start: null,
 			end: null,
 			isDragging: !1,
@@ -28102,7 +27992,7 @@ function IO(e) {
 }
 //#endregion
 //#region src/version.ts
-var LO = "0.2.5-beta.0", RO = ob, zO = sb, BO = () => ({
+var LO = "0.2.5-beta.1", RO = ob, zO = sb, BO = () => ({
 	...nx(),
 	version: LO
 }), VO = zO, HO = (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, UO = (e) => {