mesurer-solid 0.1.7-beta.8 → 0.1.7-beta.9

package/dist/arrange.js

@@ -2974,7 +2974,7 @@ var $n = {
 ].join(",")}`;
 //#endregion
 //#region src/version.ts
-var Rr = "0.1.7-beta.8", zr = ir, Br = tr, Vr = nr, Hr = ar, Ur = rr, Wr = () => ({
+var Rr = "0.1.7-beta.9", zr = ir, Br = tr, Vr = nr, Hr = ar, Ur = rr, Wr = () => ({
 	...Lr(),
 	version: Rr
 });

package/dist/index.js

@@ -5241,10 +5241,115 @@ function rc(e) {
 	let D = () => {
 		let t = e.model.state.hoverRect;
 		return t ? co([t, ...b().map((e) => e.rect)])[0] ?? null : null;
-	}, O = (t) => {
+	}, O = () => {
+		let n = t, r = e.model.state.hoverElement, i = n?.ownerDocument.defaultView;
+		if (!n || !r?.isConnected || !i || !n.ownerDocument.body || !(n.getRootNode() instanceof i.ShadowRoot) || r.getRootNode() !== n.ownerDocument) return null;
+		let a = n.ownerDocument.querySelector("[data-mesurer-text-inspector-info='true']");
+		return !a?.isConnected || a.getRootNode() !== n.ownerDocument ? null : n.ownerDocument.body;
+	}, k = () => {
+		let t = e.model.state.hoverElement, n = O(), r = t?.ownerDocument.defaultView;
+		return !t || !r || n !== t.ownerDocument.body ? {
+			x: 0,
+			y: 0
+		} : {
+			x: r.scrollX,
+			y: r.scrollY
+		};
+	}, A = () => {
+		let t = e.model.state.hoverRect, r = !!O(), i = k();
+		var a = X("div", {
+			"data-mesurer-hover-measurement": "true",
+			"data-mesurer-document-hover-layer": r ? "true" : void 0,
+			class: "msr:pointer-events-none msr:absolute"
+		});
+		return Ji(() => (e) => {
+			n = e;
+		}, a), Q(a, Y(K, {
+			get when() {
+				return D()?.top;
+			},
+			get children() {
+				var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full" });
+				return q(() => ({
+					position: "absolute",
+					left: "0",
+					top: "0",
+					height: "1px",
+					width: "100%",
+					"background-color": _()
+				}), (t, n) => {
+					$(e, "style", t, n);
+				}), e;
+			}
+		}), null), Q(a, Y(K, {
+			get when() {
+				return D()?.right;
+			},
+			get children() {
+				var e = X("div", { class: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px" });
+				return q(() => ({
+					position: "absolute",
+					right: "0",
+					top: "0",
+					height: "100%",
+					width: "1px",
+					"background-color": _()
+				}), (t, n) => {
+					$(e, "style", t, n);
+				}), e;
+			}
+		}), null), Q(a, Y(K, {
+			get when() {
+				return D()?.bottom;
+			},
+			get children() {
+				var e = X("div", { class: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full" });
+				return q(() => ({
+					position: "absolute",
+					bottom: "0",
+					left: "0",
+					height: "1px",
+					width: "100%",
+					"background-color": _()
+				}), (t, n) => {
+					$(e, "style", t, n);
+				}), e;
+			}
+		}), null), Q(a, Y(K, {
+			get when() {
+				return D()?.left;
+			},
+			get children() {
+				var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px" });
+				return q(() => ({
+					position: "absolute",
+					left: "0",
+					top: "0",
+					height: "100%",
+					width: "1px",
+					"background-color": _()
+				}), (t, n) => {
+					$(e, "style", t, n);
+				}), e;
+			}
+		}), null), q(() => ({
+			position: "absolute",
+			"pointer-events": "none",
+			"z-index": r ? "2147482700" : void 0,
+			left: `${t.left + i.x}px`,
+			top: `${t.top + i.y}px`,
+			width: `${t.width}px`,
+			height: `${t.height}px`,
+			"background-color": v(),
+			transition: "none",
+			animation: "none"
+		}), (e, t) => {
+			$(a, "style", e, t);
+		}), a;
+	}, j = (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)`;
-	}, k = W(() => {
+	}, M = W(() => {
 		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;
 		return n ? [{
@@ -5256,21 +5361,21 @@ function rc(e) {
 			orientation: "horizontal",
 			position: n.innerHeight / 2
 		}] : e.model.state.guides;
-	}), A = () => {
+	}), N = () => {
 		i && t?.ownerDocument.defaultView?.clearTimeout(i), i = 0, a = null;
-	}, j = (t, n) => {
+	}, P = (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]), A();
+		e.model.setSelectedGuideIds([t.id]), N();
 		let r = n.currentTarget.ownerDocument.defaultView;
 		r && (a = t.id, i = r.setTimeout(() => {
 			i = 0, a === t.id && e.model.setTransient({ draggingGuideId: t.id });
 		}, 220)), bo(n.currentTarget, n.pointerId);
-	}, M = (t, n) => {
-		n.stopPropagation(), A(), e.model.current.draggingGuideId === t.id && e.model.setTransient({ draggingGuideId: null }), n.currentTarget.hasPointerCapture(n.pointerId) && n.currentTarget.releasePointerCapture(n.pointerId);
+	}, F = (t, n) => {
+		n.stopPropagation(), N(), e.model.current.draggingGuideId === t.id && e.model.setTransient({ draggingGuideId: null }), n.currentTarget.hasPointerCapture(n.pointerId) && n.currentTarget.releasePointerCapture(n.pointerId);
 	};
 	Kt(() => {
 		let i = t, a = i?.ownerDocument.defaultView, s = i?.ownerDocument;
@@ -5278,10 +5383,10 @@ function rc(e) {
 		let c = (t) => e.onPointerMove(t), l = () => {
 			let t = e.model.current.hoverElement, r = n;
 			if (!t?.isConnected || !r?.isConnected) return;
-			let i = t.getBoundingClientRect();
+			let i = t.getBoundingClientRect(), o = O() === t.ownerDocument.body, s = o ? a.scrollX : 0, c = o ? a.scrollY : 0;
 			Object.assign(r.style, {
-				left: `${i.left}px`,
-				top: `${i.top}px`,
+				left: `${i.left + s}px`,
+				top: `${i.top + c}px`,
 				width: `${i.width}px`,
 				height: `${i.height}px`
 			});
@@ -5292,6 +5397,10 @@ function rc(e) {
 					l();
 					return;
 				}
+				if (O() === s.body) {
+					l();
+					return;
+				}
 				e.style.visibility = "hidden", o && a.clearTimeout(o), o = a.setTimeout(() => {
 					o = 0, l(), e.isConnected && e.style.removeProperty("visibility");
 				}, 80);
@@ -5322,17 +5431,17 @@ function rc(e) {
 			!t || t.pointerId !== e.pointerId || (t.previousUserSelect !== null && (s.documentElement.style.userSelect = t.previousUserSelect), r = null);
 		};
 		return l(), i.addEventListener("pointermove", c), a.addEventListener("scroll", u, !0), a.addEventListener("resize", l, !0), a.addEventListener("pointerdown", d, !0), a.addEventListener("pointermove", f, !0), a.addEventListener("pointerup", p, !0), a.addEventListener("pointercancel", p, !0), () => {
-			i.removeEventListener("pointermove", c), a.removeEventListener("scroll", u, !0), a.removeEventListener("resize", l, !0), a.removeEventListener("pointerdown", d, !0), a.removeEventListener("pointermove", f, !0), a.removeEventListener("pointerup", p, !0), a.removeEventListener("pointercancel", p, !0), o && a.clearTimeout(o), o = 0, n?.style.removeProperty("visibility"), A(), r?.previousUserSelect !== null && r && (s.documentElement.style.userSelect = r.previousUserSelect), r = null;
+			i.removeEventListener("pointermove", c), a.removeEventListener("scroll", u, !0), a.removeEventListener("resize", l, !0), a.removeEventListener("pointerdown", d, !0), a.removeEventListener("pointermove", f, !0), a.removeEventListener("pointerup", p, !0), a.removeEventListener("pointercancel", p, !0), o && a.clearTimeout(o), o = 0, n?.style.removeProperty("visibility"), N(), r?.previousUserSelect !== null && r && (s.documentElement.style.userSelect = r.previousUserSelect), r = null;
 		};
 	});
-	var N = X("div", {
+	var I = X("div", {
 		onPointerDown: (t) => e.onPointerDown(t),
 		onPointerUp: (t) => e.onPointerUp(t),
 		onPointerLeave: (t) => e.onPointerLeave(t)
 	});
 	return Ji(() => (e) => {
 		t = e;
-	}, N), Q(N, Y(K, {
+	}, I), Q(I, Y(K, {
 		get when() {
 			return f();
 		},
@@ -5400,68 +5509,27 @@ function rc(e) {
 						return J(() => !!(e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled))() ? x().length <= 1 : e.model.state.hoverRect && e.model.state.settings.hoverHighlightEnabled;
 					},
 					get children() {
-						var t = X("div", {
-							"data-mesurer-hover-measurement": "true",
-							class: "msr:pointer-events-none msr:absolute"
-						});
-						return Ji(() => (e) => {
-							n = e;
-						}, t), Q(t, Y(K, {
-							get when() {
-								return D()?.top;
-							},
-							get children() {
-								var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full" });
-								return q(() => ({ "background-color": _() }), (t, n) => {
-									$(e, "style", t, n);
-								}), e;
-							}
-						}), null), Q(t, Y(K, {
-							get when() {
-								return D()?.right;
-							},
-							get children() {
-								var e = X("div", { class: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px" });
-								return q(() => ({ "background-color": _() }), (t, n) => {
-									$(e, "style", t, n);
-								}), e;
-							}
-						}), null), Q(t, Y(K, {
+						return Y(K, {
 							get when() {
-								return D()?.bottom;
+								return O();
 							},
-							get children() {
-								var e = X("div", { class: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full" });
-								return q(() => ({ "background-color": _() }), (t, n) => {
-									$(e, "style", t, n);
-								}), e;
-							}
-						}), null), Q(t, Y(K, {
-							get when() {
-								return D()?.left;
+							get fallback() {
+								return A();
 							},
-							get children() {
-								var e = X("div", { class: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px" });
-								return q(() => ({ "background-color": _() }), (t, n) => {
-									$(e, "style", t, n);
-								}), e;
-							}
-						}), null), q(() => ({
-							left: `${e.model.state.hoverRect.left}px`,
-							top: `${e.model.state.hoverRect.top}px`,
-							width: `${e.model.state.hoverRect.width}px`,
-							height: `${e.model.state.hoverRect.height}px`,
-							"background-color": v(),
-							transition: "none",
-							animation: "none"
-						}), (e, n) => {
-							$(t, "style", e, n);
-						}), t;
+							children: (e) => Y(yi, {
+								get mount() {
+									return e();
+								},
+								get children() {
+									return A();
+								}
+							})
+						});
 					}
 				})
 			];
 		}
-	}), null), Q(N, Y(K, {
+	}), null), Q(I, Y(K, {
 		get when() {
 			return J(() => !!(e.interactive && p() && e.model.state.guidePreview))() ? !e.model.state.draggingGuideId : e.interactive && p() && e.model.state.guidePreview;
 		},
@@ -5484,19 +5552,19 @@ function rc(e) {
 					top: "0",
 					width: "2px",
 					height: "100%",
-					"background-color": O("preview")
+					"background-color": j("preview")
 				} : {
 					top: "6px",
 					left: "0",
 					height: "2px",
 					width: "100%",
-					"background-color": O("preview")
+					"background-color": j("preview")
 				}
 			}), ({ e, t: r }, i) => {
 				e !== i?.e && $(t, "style", e, i?.e), r !== i?.t && $(n, "style", r, i?.t);
 			}), t;
 		}
-	}), null), Q(N, Y(K, {
+	}), null), Q(I, Y(K, {
 		get when() {
 			return f();
 		},
@@ -5557,7 +5625,7 @@ function rc(e) {
 				}
 			})];
 		}
-	}), null), Q(N, Y(Vr, {
+	}), null), Q(I, Y(Vr, {
 		get each() {
 			return S();
 		},
@@ -5568,7 +5636,7 @@ function rc(e) {
 			},
 			kind: "held"
 		})
-	}), null), Q(N, Y(K, {
+	}), null), Q(I, Y(K, {
 		get when() {
 			return J(() => !!(f() && e.model.state.altPressed))() ? e.optionPairOverlay : f() && e.model.state.altPressed;
 		},
@@ -5580,7 +5648,7 @@ function rc(e) {
 				kind: "preview"
 			});
 		}
-	}), null), Q(N, Y(K, {
+	}), null), Q(I, Y(K, {
 		get when() {
 			return J(() => !!(e.interactive && p() && e.model.state.altPressed))() ? e.guideDistanceOverlay : e.interactive && p() && e.model.state.altPressed;
 		},
@@ -5592,7 +5660,7 @@ function rc(e) {
 				kind: "preview"
 			});
 		}
-	}), null), Q(N, Y(K, {
+	}), null), Q(I, Y(K, {
 		get when() {
 			return J(() => !!(f() && e.model.state.altPressed))() ? e.optionContainerLines : f() && e.model.state.altPressed;
 		},
@@ -5710,23 +5778,23 @@ function rc(e) {
 				}
 			})
 		]
-	}), null), Q(N, Y(Vr, {
+	}), null), Q(I, Y(Vr, {
 		get each() {
-			return k();
+			return M();
 		},
 		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() ? O("active") : i() ? O("hover") : O("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() ? j("active") : i() ? j("hover") : j("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" && j(t, r);
+					!n() && e.model.current.toolMode !== "none" && P(t, r);
 				},
 				onPointerUp: (r) => {
-					!n() && e.model.current.toolMode !== "none" && M(t, r);
+					!n() && e.model.current.toolMode !== "none" && F(t, r);
 				},
 				onPointerCancel: (r) => {
-					!n() && e.model.current.toolMode !== "none" && M(t, r);
+					!n() && e.model.current.toolMode !== "none" && F(t, r);
 				}
 			}), u = X("div", { class: "msr:absolute" });
 			return Z(l, u), q(() => ({
@@ -5770,8 +5838,8 @@ function rc(e) {
 		e: `msr:absolute msr:inset-0 msr:select-none ${m() ? `msr:pointer-events-auto ${p() ? 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": h() ? "auto" : "none" }
 	}), ({ e, t }, n) => {
-		e !== n?.e && $(N, "class", e, n?.e), t !== n?.t && $(N, "style", t, n?.t);
-	}), N;
+		e !== n?.e && $(I, "class", e, n?.e), t !== n?.t && $(I, "style", t, n?.t);
+	}), I;
 }
 var ic = 18, ac = 5, oc = 32, sc = Array.from({ length: 801 }, (e, t) => t * ac);
 function cc(e) {
@@ -15838,7 +15906,7 @@ async function Sg(e, t, n) {
 }
 //#endregion
 //#region src/version.ts
-var Cg = "0.1.7-beta.8", wg = "mesurer.context", Tg = "context:v1", Eg = "mesurer.context.settings", Dg = "context.ui", Og = {
+var Cg = "0.1.7-beta.9", wg = "mesurer.context", Tg = "context:v1", Eg = "mesurer.context.settings", Dg = "context.ui", Og = {
 	viewBox: "0 0 256 256",
 	paths: ["M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"]
 }, kg = {