mesurer-solid 0.2.1-beta.5 → 0.2.1-beta.6

package/dist/index.js

@@ -5508,7 +5508,7 @@ function ll(e) {
 		get children() {
 			var n = X("div", {
 				"data-mesurer-measurement-chrome": "true",
-				class: "msr:absolute"
+				class: "msr:pointer-events-none msr:absolute"
 			});
 			return aa(() => (e) => {
 				t = e;
@@ -5870,6 +5870,7 @@ function dl(e) {
 		};
 	});
 	var B = X("div", {
+		"data-mesurer-interaction-overlay": "true",
 		onPointerDown: (t) => e.onPointerDown(t),
 		onPointerUp: (t) => e.onPointerUp(t),
 		onPointerLeave: (t) => e.onPointerLeave(t)
@@ -18282,7 +18283,11 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 	setup(t) {
 		let n = t.service.get(vb);
 		if (!n) throw Error("Recording plugin requires the Solid renderer runtime.");
-		let { ownerDocument: r, ownerWindow: i } = n, a = n.createInspectorMount(), o = a.element;
+		let { ownerDocument: r, ownerWindow: i } = n, a = n.createInspectorMount(), o = a.element, s = n.rendererRoot ?? n.portalTarget.querySelector("[data-mesurer-root='true']"), c = (e) => {
+			s?.toggleAttribute("data-mesurer-recording-active", e);
+			let t = s?.querySelector("[data-mesurer-interaction-overlay='true']");
+			t && (e ? (t.style.setProperty("pointer-events", "none", "important"), t.style.setProperty("cursor", "default", "important")) : (t.style.removeProperty("pointer-events"), t.style.removeProperty("cursor")));
+		};
 		o.dataset.mesurerRecording = "true", kb(o, {
 			position: "fixed",
 			inset: "0",
@@ -18290,19 +18295,19 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			"pointer-events": "none",
 			"font-family": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
 		});
-		let s = Math.max(1, Math.min(60, Math.round(e.frameRate ?? Cb))), c = Math.max(1, Math.min(600, e.maxDurationSeconds ?? wb)), l = e.quality ?? "medium";
+		let l = Math.max(1, Math.min(60, Math.round(e.frameRate ?? Cb))), u = Math.max(1, Math.min(600, e.maxDurationSeconds ?? wb)), d = e.quality ?? "medium";
 		t.state.register({
 			id: _b,
 			initial: { toolEnabled: e.toolEnabled ?? !0 },
 			persist: !0
 		});
-		let u = () => ({ toolEnabled: t.state.get("mesurer.recording.settings")?.toolEnabled ?? !0 }), d = (e) => {
+		let f = () => ({ toolEnabled: t.state.get("mesurer.recording.settings")?.toolEnabled ?? !0 }), p = (e) => {
 			t.state.update(_b, (t) => {
 				let n = { ...t };
 				return e.toolEnabled !== void 0 && (n.toolEnabled = e.toolEnabled), n;
 			});
-		}, f = r.createElement("div");
-		f.dataset.mesurerRecordingSelect = "true", f.dataset.mesurerInspectorUi = "true", f.setAttribute("role", "application"), f.setAttribute("aria-label", "Recording selection"), kb(f, {
+		}, m = r.createElement("div");
+		m.dataset.mesurerRecordingSelect = "true", m.dataset.mesurerInspectorUi = "true", m.setAttribute("role", "application"), m.setAttribute("aria-label", "Recording selection"), kb(m, {
 			position: "fixed",
 			inset: "0",
 			display: "none",
@@ -18311,24 +18316,24 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			"pointer-events": "auto",
 			"user-select": "none",
 			"touch-action": "none"
-		}), o.append(f);
-		let p = Array.from({ length: 4 }, () => {
+		}), o.append(m);
+		let h = Array.from({ length: 4 }, () => {
 			let e = r.createElement("div");
 			return kb(e, {
 				position: "fixed",
 				background: "rgb(0 0 0 / 40%)",
 				"pointer-events": "none"
-			}), f.append(e), e;
-		}), m = r.createElement("div");
-		m.dataset.mesurerRecordingSelection = "true", kb(m, {
+			}), m.append(e), e;
+		}), g = r.createElement("div");
+		g.dataset.mesurerRecordingSelection = "true", kb(g, {
 			position: "fixed",
 			display: "none",
 			border: "1px solid var(--msr-accent, #0d99ff)",
 			"box-sizing": "border-box",
 			"pointer-events": "none"
-		}), f.append(m);
-		let h = r.createElement("div");
-		kb(h, {
+		}), m.append(g);
+		let _ = r.createElement("div");
+		kb(_, {
 			position: "fixed",
 			display: "none",
 			transform: "translateX(-50%)",
@@ -18339,9 +18344,9 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			"font-size": "10px",
 			"font-variant-numeric": "tabular-nums",
 			"pointer-events": "none"
-		}), f.append(h);
-		let g = r.createElement("div");
-		g.textContent = "Drag a region to record · Esc to cancel", kb(g, {
+		}), m.append(_);
+		let v = r.createElement("div");
+		v.textContent = "Drag a region to record · Esc to cancel", kb(v, {
 			position: "fixed",
 			left: "50%",
 			bottom: "16px",
@@ -18352,26 +18357,217 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			color: "var(--msr-surface, #fff)",
 			"font-size": "11px",
 			"pointer-events": "none"
-		}), f.append(g);
-		let _ = r.createElement("button");
-		_.type = "button", _.dataset.mesurerRecordingStatus = "true", _.dataset.mesurerInspectorUi = "true", _.setAttribute("aria-label", "Stop recording"), kb(_, {
+		}), m.append(v);
+		let y = r.createElement("div");
+		y.dataset.mesurerRecordingRegion = "true", y.dataset.mesurerInspectorUi = "true", y.setAttribute("role", "dialog"), y.setAttribute("aria-label", "Recording region"), kb(y, {
 			position: "fixed",
 			display: "none",
-			height: "30px",
-			padding: "0 10px",
+			width: "220px",
+			padding: "8px",
+			"z-index": "90",
+			"box-sizing": "border-box",
+			overflow: "hidden",
+			"border-radius": "10px",
+			background: "var(--msr-surface-raised, #fff)",
+			color: "var(--msr-content, #18181b)",
+			"box-shadow": "var(--msr-shadow-floating, 0 10px 30px rgba(0,0,0,.12))",
+			"font-size": "11px",
+			"pointer-events": "auto",
+			transform: "translateX(-50%)"
+		}), m.append(y);
+		let b = (e) => {
+			let t = r.createElement("label");
+			kb(t, {
+				display: "grid",
+				"grid-template-columns": "44px minmax(0,1fr)",
+				"align-items": "center",
+				gap: "8px"
+			});
+			let n = r.createElement("span");
+			n.textContent = e, n.style.color = "var(--msr-color-ink-500, #64748b)", t.append(n);
+			let i = r.createElement("div");
+			return kb(i, {
+				display: "flex",
+				"align-items": "center",
+				gap: "4px",
+				"min-width": "0"
+			}), t.append(i), y.append(t), i;
+		}, x = (e) => {
+			let t = r.createElement("input");
+			return t.type = "number", t.setAttribute("aria-label", e), t.step = "1", kb(t, {
+				width: "0",
+				"min-width": "0",
+				flex: "1 1 0",
+				height: "26px",
+				padding: "0 6px",
+				border: "1px solid var(--msr-color-ink-200, #e2e8f0)",
+				"border-radius": "6px",
+				background: "var(--msr-surface, #fff)",
+				color: "var(--msr-content, #18181b)",
+				"font-family": "ui-monospace, SFMono-Regular, Menlo, monospace",
+				"font-size": "10px",
+				"font-variant-numeric": "tabular-nums"
+			}), t;
+		}, S = b("Size"), C = x("Width"), w = x("Height");
+		S.append(C);
+		let T = r.createElement("span");
+		T.textContent = "×", T.style.color = "var(--msr-color-ink-500, #64748b)", S.append(T, w);
+		let E = r.createElement("span");
+		E.textContent = "px", E.style.color = "var(--msr-color-ink-500, #64748b)", S.append(E);
+		let D = b("Position");
+		D.style.marginTop = "8px";
+		let O = x("Left"), k = x("Top");
+		D.append(O, k);
+		let A = r.createElement("span");
+		A.textContent = "px", A.style.color = "var(--msr-color-ink-500, #64748b)", D.append(A);
+		let j = r.createElement("button");
+		j.type = "button", j.dataset.mesurerRecordingStart = "true", j.textContent = "●  Start recording", kb(j, {
+			width: "100%",
+			height: "28px",
+			"margin-top": "8px",
+			border: "1px solid var(--msr-color-ink-200, #e2e8f0)",
+			"border-radius": "7px",
+			background: "var(--msr-surface-raised, #fff)",
+			color: "var(--msr-content, #18181b)",
+			"font-family": "inherit",
+			"font-size": "11px",
+			"font-weight": "500",
+			cursor: "pointer"
+		}), y.append(j);
+		let M = r.createElement("div");
+		M.dataset.mesurerRecordingGrid = "true", kb(M, {
+			position: "absolute",
+			inset: "0",
+			display: "none",
+			"pointer-events": "none"
+		}), g.append(M);
+		let N = (e) => {
+			let t = r.createElement("div");
+			kb(t, {
+				position: "absolute",
+				opacity: "0.3",
+				...e
+			}), M.append(t);
+		};
+		N({
+			left: "33.333%",
+			top: "0",
+			bottom: "0",
+			borderLeft: "1px dashed var(--msr-color-ink-500, #64748b)"
+		}), N({
+			left: "66.666%",
+			top: "0",
+			bottom: "0",
+			borderLeft: "1px dashed var(--msr-color-ink-500, #64748b)"
+		}), N({
+			top: "33.333%",
+			left: "0",
+			right: "0",
+			borderTop: "1px dashed var(--msr-color-ink-500, #64748b)"
+		}), N({
+			top: "66.666%",
+			left: "0",
+			right: "0",
+			borderTop: "1px dashed var(--msr-color-ink-500, #64748b)"
+		});
+		let P = Object.entries({
+			nw: {
+				left: "0",
+				top: "0"
+			},
+			n: {
+				left: "50%",
+				top: "0"
+			},
+			ne: {
+				left: "100%",
+				top: "0"
+			},
+			e: {
+				left: "100%",
+				top: "50%"
+			},
+			se: {
+				left: "100%",
+				top: "100%"
+			},
+			s: {
+				left: "50%",
+				top: "100%"
+			},
+			sw: {
+				left: "0",
+				top: "100%"
+			},
+			w: {
+				left: "0",
+				top: "50%"
+			}
+		}).map(([e, t]) => {
+			let n = r.createElement("button");
+			return n.type = "button", n.dataset.mesurerRecordingResize = e, n.setAttribute("aria-label", `Resize ${e}`), kb(n, {
+				position: "absolute",
+				display: "none",
+				left: t.left,
+				top: t.top,
+				width: "8px",
+				height: "8px",
+				padding: "0",
+				border: "1px solid var(--msr-color-white, #fff)",
+				"border-radius": "999px",
+				background: "var(--msr-color-ink-900, #18181b)",
+				"box-shadow": "0 0 0 1px rgb(0 0 0 / 25%)",
+				transform: "translate(-50%, -50%)",
+				cursor: e === "n" || e === "s" ? "ns-resize" : e === "e" || e === "w" ? "ew-resize" : e === "nw" || e === "se" ? "nwse-resize" : "nesw-resize",
+				"pointer-events": "auto"
+			}), g.append(n), n;
+		}), F = r.createElement("section");
+		F.dataset.mesurerRecordingStatus = "true", F.dataset.mesurerInspectorUi = "true", F.setAttribute("aria-label", "Screen recording"), kb(F, {
+			position: "fixed",
+			display: "none",
+			height: "34px",
+			padding: "0 8px",
+			"align-items": "center",
+			gap: "8px",
 			border: "0",
-			"border-radius": "999px",
+			"border-radius": "9px",
 			background: "var(--msr-surface-raised, #fff)",
 			color: "var(--msr-content, #18181b)",
 			"box-shadow": "var(--msr-shadow-floating, 0 8px 24px rgba(0,0,0,.14))",
 			"font-family": "inherit",
 			"font-size": "11px",
-			"font-variant-numeric": "tabular-nums",
-			cursor: "pointer",
 			"pointer-events": "auto"
-		}), o.append(_);
-		let v = r.createElement("div");
-		v.dataset.mesurerRecordingError = "true", v.dataset.mesurerInspectorUi = "true", v.setAttribute("role", "status"), kb(v, {
+		});
+		let I = r.createElement("span");
+		I.setAttribute("aria-hidden", "true"), kb(I, {
+			width: "6px",
+			height: "6px",
+			"border-radius": "999px",
+			background: "var(--msr-danger-solid-bg, #dc2626)",
+			"flex-shrink": "0"
+		}), F.append(I);
+		let L = r.createElement("span");
+		L.dataset.mesurerRecordingTime = "true", L.textContent = "00:00", kb(L, {
+			color: "var(--msr-content, #18181b)",
+			"font-family": "ui-monospace, SFMono-Regular, Menlo, monospace",
+			"font-size": "11px",
+			"font-variant-numeric": "tabular-nums"
+		}), F.append(L);
+		let R = r.createElement("button");
+		R.type = "button", R.dataset.mesurerRecordingStop = "true", R.textContent = "Stop", R.setAttribute("aria-label", "Stop recording"), kb(R, {
+			height: "24px",
+			padding: "0 8px",
+			border: "0",
+			"border-radius": "6px",
+			background: "var(--msr-danger-solid-bg, #dc2626)",
+			color: "var(--msr-danger-solid-text, #fff)",
+			"font-family": "inherit",
+			"font-size": "11px",
+			"font-weight": "500",
+			cursor: "pointer"
+		}), F.append(R), o.append(F);
+		let z = r.createElement("div");
+		z.dataset.mesurerRecordingError = "true", z.dataset.mesurerInspectorUi = "true", z.setAttribute("role", "status"), kb(z, {
 			position: "fixed",
 			display: "none",
 			left: "8px",
@@ -18383,8 +18579,8 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			color: "#fff",
 			"font-size": "11px",
 			"pointer-events": "none"
-		}), o.append(v);
-		let y = {
+		}), o.append(z);
+		let B = {
 			status: "idle",
 			elapsed: 0,
 			rect: null,
@@ -18392,28 +18588,28 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			width: null,
 			height: null,
 			error: null
-		}, b = /* @__PURE__ */ new Set(), x = null, S = null, C = null, w = null, T = null, E = null, D = 0, O = 0, k = 0, A = 0, j = 0, M = -1, N = !1, P = null, F = () => {
-			let e = Ob(y);
-			for (let t of b) t(e);
-		}, I = (e) => {
-			y = {
-				...y,
+		}, V = /* @__PURE__ */ new Set(), H = null, U = null, ee = null, te = null, ne = null, W = null, re = !1, ie = null, ae = null, oe = 0, se = 0, ce = 0, le = 0, G = 0, ue = -1, de = !1, fe = null, pe = () => {
+			let e = Ob(B);
+			for (let t of V) t(e);
+		}, me = (e) => {
+			B = {
+				...B,
 				...e,
-				rect: e.rect === void 0 ? y.rect : Db(e.rect)
-			}, F();
-		}, L = () => y.status === "selecting" || y.status === "recording" || y.status === "exporting", R = () => {
-			if (E) return;
+				rect: e.rect === void 0 ? B.rect : Db(e.rect)
+			}, pe();
+		}, he = () => B.status === "selecting" || B.status === "recording" || B.status === "exporting", ge = () => {
+			if (ae) return;
 			let e = n.portalTarget.querySelector("[data-mesurer-toolbar='true']");
-			e && (E = {
+			e && (ae = {
 				element: e,
 				value: e.style.getPropertyValue("visibility"),
 				priority: e.style.getPropertyPriority("visibility")
 			}, e.style.setProperty("visibility", "hidden", "important"));
-		}, z = () => {
-			if (!E) return;
-			let e = E;
-			E = null, e.value || e.priority ? e.element.style.setProperty("visibility", e.value, e.priority) : e.element.style.removeProperty("visibility");
-		}, B = (e, t) => {
+		}, _e = () => {
+			if (!ae) return;
+			let e = ae;
+			ae = null, e.value || e.priority ? e.element.style.setProperty("visibility", e.value, e.priority) : e.element.style.removeProperty("visibility");
+		}, ve = (e, t) => {
 			for (let n of [
 				"left",
 				"top",
@@ -18423,78 +18619,128 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				let r = t[n];
 				r === void 0 ? e.style.removeProperty(n) : e.style.setProperty(n, `${r}px`);
 			}
-		}, V = (e) => {
+		}, ye = (e) => {
+			let t = i.innerWidth, n = i.innerHeight, r = Math.min(t, Math.max(4, Math.round(e.width))), a = Math.min(n, Math.max(4, Math.round(e.height)));
+			return {
+				left: Math.min(Math.max(0, Math.round(e.left)), Math.max(0, t - r)),
+				top: Math.min(Math.max(0, Math.round(e.top)), Math.max(0, n - a)),
+				width: r,
+				height: a
+			};
+		}, be = (e, t) => t.x >= e.left && t.x <= e.left + e.width && t.y >= e.top && t.y <= e.top + e.height, xe = (e) => {
 			let t = i.innerWidth, n = i.innerHeight;
 			if (!e || e.width <= 0 || e.height <= 0) {
-				B(p[0], {
+				ve(h[0], {
 					left: 0,
 					top: 0,
 					width: t,
 					height: n
 				});
-				for (let e of p.slice(1)) B(e, {
+				for (let e of h.slice(1)) ve(e, {
 					left: 0,
 					top: 0,
 					width: 0,
 					height: 0
 				});
-				m.style.display = "none", h.style.display = "none";
+				g.style.display = "none", g.style.pointerEvents = "none", M.style.display = "none";
+				for (let e of P) e.style.display = "none";
+				_.style.display = "none", y.style.display = "none", v.textContent = "Drag to select a region · Esc to cancel";
 				return;
 			}
-			B(p[0], {
+			if (ve(h[0], {
 				left: 0,
 				top: 0,
 				width: t,
 				height: e.top
-			}), B(p[1], {
+			}), ve(h[1], {
 				left: 0,
 				top: e.top,
 				width: e.left,
 				height: e.height
-			}), B(p[2], {
+			}), ve(h[2], {
 				left: e.left + e.width,
 				top: e.top,
 				width: Math.max(0, t - e.left - e.width),
 				height: e.height
-			}), B(p[3], {
+			}), ve(h[3], {
 				left: 0,
 				top: e.top + e.height,
 				width: t,
 				height: Math.max(0, n - e.top - e.height)
-			}), m.style.display = "block", B(m, e), h.style.display = "block", h.textContent = `${Math.round(e.width)} × ${Math.round(e.height)}`, B(h, {
-				left: e.left + e.width / 2,
-				top: Math.min(n - 22, e.top + e.height + 6)
-			});
-		}, H = () => {
-			T = null, V(null), f.style.display = "none", o.style.pointerEvents = "none";
-		}, U = (e) => {
-			let t = i.innerHeight, n = i.innerWidth, r = Math.max(112, _.offsetWidth || 112), a = null;
+			}), g.style.display = "block", ve(g, e), re) {
+				g.style.pointerEvents = "auto", g.style.cursor = "move", M.style.display = "block";
+				for (let e of P) e.style.display = "block";
+				_.style.display = "none", C.value = String(Math.round(e.width)), w.value = String(Math.round(e.height)), O.value = String(Math.round(e.left)), k.value = String(Math.round(e.top)), C.max = String(t), w.max = String(n), O.max = String(Math.max(0, t - e.width)), k.max = String(Math.max(0, n - e.height));
+				let r = Math.min(Math.max(118, e.left + e.width / 2), Math.max(118, t - 110 - 8)), i = e.top + e.height + 12, a = i + 112 <= n ? i : Math.max(8, e.top - 112);
+				y.style.left = `${r}px`, y.style.top = `${a}px`, y.style.display = "block", v.textContent = "Adjust region · Enter to start · Esc to cancel";
+			} else {
+				g.style.pointerEvents = "none", g.style.cursor = "", M.style.display = "none";
+				for (let e of P) e.style.display = "none";
+				y.style.display = "none", _.style.display = "block", _.textContent = `${Math.round(e.width)} × ${Math.round(e.height)}`, ve(_, {
+					left: e.left + e.width / 2,
+					top: Math.min(n - 22, e.top + e.height + 6)
+				}), v.textContent = "Drag to select a region · Esc to cancel";
+			}
+		}, Se = (e) => {
+			let t = ye(e);
+			W = t, me({ rect: t }), xe(t);
+		}, Ce = (e) => {
+			let t = i.innerWidth, n = i.innerHeight;
+			ve(h[0], {
+				left: 0,
+				top: 0,
+				width: t,
+				height: e.top
+			}), ve(h[1], {
+				left: 0,
+				top: e.top,
+				width: e.left,
+				height: e.height
+			}), ve(h[2], {
+				left: e.left + e.width,
+				top: e.top,
+				width: Math.max(0, t - e.left - e.width),
+				height: e.height
+			}), ve(h[3], {
+				left: 0,
+				top: e.top + e.height,
+				width: t,
+				height: Math.max(0, n - e.top - e.height)
+			}), g.style.display = "none", _.style.display = "none", y.style.display = "none", M.style.display = "none", v.style.display = "none";
+			for (let e of P) e.style.display = "none";
+			m.style.display = "block", m.style.pointerEvents = "none", m.style.cursor = "default";
+		}, we = () => {
+			c(!1), m.style.display = "none", m.style.pointerEvents = "auto", m.style.cursor = "crosshair", v.style.removeProperty("display");
+		}, Te = () => {
+			ne = null, W = null, re = !1, ie = null, xe(null), m.style.display = "none", m.style.cursor = "crosshair", o.style.pointerEvents = "none";
+		}, Ee = (e) => {
+			let t = i.innerHeight, n = i.innerWidth, r = Math.max(112, F.offsetWidth || 112), a = null;
 			if (e.top >= 46 ? a = e.top - 30 - 8 : t - (e.top + e.height) >= 46 && (a = e.top + e.height + 8), a === null) {
-				_.style.display = "none";
+				F.style.display = "none";
 				return;
 			}
 			let o = Math.min(n - r - 8, Math.max(8, e.left + e.width / 2 - r / 2));
-			_.style.left = `${o}px`, _.style.top = `${a}px`, _.style.display = "block";
-		}, ee = () => {
-			_.style.display = "none";
-		}, te = (e) => {
-			k && i.clearTimeout(k);
+			F.style.left = `${o}px`, F.style.top = `${a}px`, F.style.display = "flex";
+		}, De = () => {
+			F.style.display = "none";
+		}, Oe = (e) => {
+			ce && i.clearTimeout(ce);
 			let t = e instanceof Error ? e.message : "Could not record this region.";
-			v.textContent = t, v.style.display = "block", k = i.setTimeout(() => {
-				k = 0, v.style.display = "none";
+			z.textContent = t, z.style.display = "block", ce = i.setTimeout(() => {
+				ce = 0, z.style.display = "none";
 			}, Tb);
-		}, ne = async (e) => {
-			D && i.cancelAnimationFrame(D), D = 0, O && i.clearTimeout(O), O = 0;
-			let t = w;
-			if (w = null, t) try {
+		}, ke = async (e) => {
+			oe && i.cancelAnimationFrame(oe), oe = 0, se && i.clearTimeout(se), se = 0;
+			let t = te;
+			if (te = null, t) try {
 				await t;
 			} catch {}
-			let n = C;
-			C = null, e && await n?.cancel();
-			let r = S;
-			S = null, r && Vy(r), ee();
-		}, W = () => {
-			x = null, ae.dismiss(), I({
+			let n = ee;
+			ee = null, e && await n?.cancel();
+			let r = U;
+			U = null, r && Vy(r), we(), De();
+		}, Ae = () => {
+			H = null, Ne.dismiss(), me({
 				status: "idle",
 				elapsed: 0,
 				rect: null,
@@ -18503,14 +18749,14 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				height: null,
 				error: null
 			}), t.hook.emit("recording:discard", {});
-		}, re = async () => {
-			let e = x;
-			return Zy(e?.width ?? Math.max(2, Math.round(i.innerWidth)), e?.height ?? Math.max(2, Math.round(i.innerHeight)), s);
-		}, ie = async (e = {}) => {
-			let n = x;
+		}, je = async () => {
+			let e = H;
+			return Zy(e?.width ?? Math.max(2, Math.round(i.innerWidth)), e?.height ?? Math.max(2, Math.round(i.innerHeight)), l);
+		}, Me = async (e = {}) => {
+			let n = H;
 			if (!n) throw Error("No recording is ready to export.");
-			let r = y.status;
-			I({
+			let r = B.status;
+			me({
 				status: "exporting",
 				error: null
 			});
@@ -18519,7 +18765,7 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 					...r,
 					filename: nb(r.format)
 				};
-				return I({
+				return me({
 					status: "ready",
 					duration: n.duration,
 					width: n.width,
@@ -18534,29 +18780,29 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 					bytes: i.blob.size
 				}), i;
 			} catch (e) {
-				throw I({
+				throw me({
 					status: r === "ready" ? "ready" : "error",
 					error: e instanceof Error ? e.message : "Could not export the recording."
 				}), e;
 			}
-		}, ae = mb({
+		}, Ne = mb({
 			ownerDocument: r,
 			ownerWindow: i,
 			root: o,
-			formats: async () => re(),
-			onDiscard: W,
-			onExport: ie
-		}), oe = async () => {
-			if (P) return P;
-			if (y.status !== "recording" || !C || !S) throw Error("No recording is active.");
-			let e = A, n = C, r = S, a = Db(y.rect);
+			formats: async () => je(),
+			onDiscard: Ae,
+			onExport: Me
+		}), Pe = async () => {
+			if (fe) return fe;
+			if (B.status !== "recording" || !ee || !U) throw Error("No recording is active.");
+			let e = le, n = ee, r = U, a = Db(B.rect);
 			if (!a) throw Error("Recording region is unavailable.");
-			return P = (async () => {
-				D && i.cancelAnimationFrame(D), D = 0, O && i.clearTimeout(O), O = 0;
-				let s = w;
-				w = null, s && await s;
+			return fe = (async () => {
+				oe && i.cancelAnimationFrame(oe), oe = 0, se && i.clearTimeout(se), se = 0;
+				let s = te;
+				te = null, s && await s;
 				let c = await n.finalize();
-				if (C = null, S = null, Vy(r), A !== e || N) throw Error("Recording was cancelled.");
+				if (ee = null, U = null, Vy(r), le !== e || de) throw Error("Recording was cancelled.");
 				let l = await eb(c), u = {
 					blob: c,
 					format: "webm",
@@ -18565,14 +18811,14 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 					height: l.height,
 					createdAt: Date.now()
 				};
-				return x = u, ee(), z(), o.style.pointerEvents = "none", I({
+				return H = u, we(), De(), _e(), o.style.pointerEvents = "none", me({
 					status: "ready",
 					elapsed: l.duration,
 					duration: l.duration,
 					width: l.width,
 					height: l.height,
 					error: null
-				}), ae.show(u), await t.hook.emit("recording:ready", {
+				}), Ne.show(u), await t.hook.emit("recording:ready", {
 					rect: a,
 					duration: l.duration,
 					width: l.width,
@@ -18580,45 +18826,45 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 					bytes: c.size
 				}), u;
 			})().catch(async (t) => {
-				if (await ne(!0), z(), A === e && !N) {
+				if (await ke(!0), _e(), le === e && !de) {
 					let e = t instanceof Error ? t.message : "Could not finish the recording.";
-					I({
+					me({
 						status: "error",
 						error: e
-					}), te(t);
+					}), Oe(t);
 				}
 				throw t;
 			}).finally(() => {
-				P = null;
-			}), P;
-		}, se = (e, t, n) => {
-			let r = 1 / s, a = (o) => {
-				if (N || A !== n || y.status !== "recording" || C !== t || S !== e) return;
-				let s = Math.max(0, (o - j) / 1e3);
-				I({ elapsed: s }), _.textContent = `● ${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}  Stop`;
+				fe = null;
+			}), fe;
+		}, Fe = (e, t, n) => {
+			let r = 1 / l, a = (o) => {
+				if (de || le !== n || B.status !== "recording" || ee !== t || U !== e) return;
+				let s = Math.max(0, (o - G) / 1e3);
+				me({ elapsed: s }), L.textContent = `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
 				let c = s;
-				!w && c - M >= r * .8 && (By(e, y.rect ?? {
+				!te && c - ue >= r * .8 && (By(e, B.rect ?? {
 					left: 0,
 					top: 0,
 					width: i.innerWidth,
 					height: i.innerHeight
-				}, Ty(i)), M = c, w = t.addFrame(c, r).catch((e) => {
-					throw A === n && !N && ne(!0).then(() => {
-						z();
+				}, Ty(i)), ue = c, te = t.addFrame(c, r).catch((e) => {
+					throw le === n && !de && ke(!0).then(() => {
+						_e();
 						let t = e instanceof Error ? e.message : "MediaBunny could not encode the recording.";
-						I({
+						me({
 							status: "error",
 							error: t
-						}), te(e);
+						}), Oe(e);
 					}), e;
 				}).finally(() => {
-					w = null;
-				})), D = i.requestAnimationFrame(a);
+					te = null;
+				})), oe = i.requestAnimationFrame(a);
 			};
-			D = i.requestAnimationFrame(a);
-		}, ce = async (e) => {
-			let n = ++A;
-			ae.dismiss(), x = null, H(), R(), I({
+			oe = i.requestAnimationFrame(a);
+		}, Ie = async (e) => {
+			let n = ++le;
+			Ne.dismiss(), H = null, Te(), _e(), me({
 				status: "selecting",
 				elapsed: 0,
 				rect: e,
@@ -18629,46 +18875,46 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			});
 			try {
 				let a = await zy(r, i, e);
-				if (N || A !== n) {
+				if (de || le !== n) {
 					Vy(a);
 					return;
 				}
-				let u = await $y(a.canvas, {
+				let s = await $y(a.canvas, {
 					format: "webm",
-					frameRate: s,
-					quality: l
+					frameRate: l,
+					quality: d
 				});
-				if (N || A !== n) {
-					await u.cancel(), Vy(a);
+				if (de || le !== n) {
+					await s.cancel(), Vy(a);
 					return;
 				}
-				if (S = a, C = u, j = i.performance.now(), M = 0, By(a, e, Ty(i)), await u.addFrame(0, 1 / s), N || A !== n) {
-					await ne(!0);
+				if (U = a, ee = s, G = i.performance.now(), ue = 0, By(a, e, Ty(i)), await s.addFrame(0, 1 / l), de || le !== n) {
+					await ke(!0);
 					return;
 				}
-				I({
+				me({
 					status: "recording",
 					elapsed: 0
-				}), o.style.pointerEvents = "auto", _.textContent = "● 0:00  Stop", U(e), se(a, u, n), a.track.addEventListener("ended", () => {
-					A === n && y.status === "recording" && oe().catch(() => void 0);
-				}, { once: !0 }), O = i.setTimeout(() => {
-					A === n && y.status === "recording" && oe().catch(() => void 0);
-				}, c * 1e3), await t.hook.emit("recording:start", {
+				}), o.style.pointerEvents = "none", c(!0), Ce(e), L.textContent = "00:00", Ee(e), Fe(a, s, n), a.track.addEventListener("ended", () => {
+					le === n && B.status === "recording" && Pe().catch(() => void 0);
+				}, { once: !0 }), se = i.setTimeout(() => {
+					le === n && B.status === "recording" && Pe().catch(() => void 0);
+				}, u * 1e3), await t.hook.emit("recording:start", {
 					rect: { ...e },
-					frameRate: s,
-					maxDurationSeconds: c
+					frameRate: l,
+					maxDurationSeconds: u
 				});
 			} catch (t) {
-				if (await ne(!0), z(), A !== n || N) return;
+				if (await ke(!0), _e(), le !== n || de) return;
 				let r = t instanceof DOMException && t.name === "AbortError", i = r ? null : t instanceof Error ? t.message : "Could not start the recording.";
-				throw I({
+				throw me({
 					status: r ? "idle" : "error",
 					rect: r ? null : e,
 					error: i
-				}), r || te(t), t;
+				}), r || Oe(t), t;
 			}
-		}, le = () => {
-			y.status !== "selecting" && (++A, ae.dismiss(), x = null, R(), V(null), f.style.display = "block", o.style.pointerEvents = "auto", I({
+		}, Le = () => {
+			B.status !== "selecting" && (++le, Ne.dismiss(), H = null, W = null, re = !1, ie = null, ge(), xe(null), m.style.display = "block", m.style.pointerEvents = "auto", v.style.removeProperty("display"), o.style.pointerEvents = "auto", me({
 				status: "selecting",
 				elapsed: 0,
 				rect: null,
@@ -18677,23 +18923,23 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				height: null,
 				error: null
 			}));
-		}, G = async (e) => {
-			if (y.status === "recording") {
-				await oe();
+		}, Re = async (e) => {
+			if (B.status === "recording") {
+				await Pe();
 				return;
 			}
-			if (y.status === "selecting") {
-				await ue();
+			if (B.status === "selecting") {
+				await ze();
 				return;
 			}
 			if (!e) {
-				le();
+				Le();
 				return;
 			}
 			if (e.width < 4 || e.height < 4) throw Error("Recording selection must be at least 4px by 4px.");
-			await ce(e);
-		}, ue = async () => {
-			++A, H(), await ne(!0), z(), y.status !== "ready" && I({
+			await Ie(e);
+		}, ze = async () => {
+			++le, Te(), await ke(!0), _e(), B.status !== "ready" && me({
 				status: "idle",
 				elapsed: 0,
 				rect: null,
@@ -18702,26 +18948,64 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				height: null,
 				error: null
 			});
-		}, de = (e) => {
-			y.status === "selecting" && e.button === 0 && (e.preventDefault(), e.stopPropagation(), T = {
+		}, Be = (e, t, n) => {
+			let r = W;
+			!re || !r || e.button !== 0 || (e.preventDefault(), e.stopPropagation(), ie = {
+				kind: t,
+				handle: n,
+				pointerId: e.pointerId,
+				startX: e.clientX,
+				startY: e.clientY,
+				rect: { ...r }
+			}, m.setPointerCapture?.(e.pointerId));
+		}, Ve = (e) => {
+			B.status === "selecting" && e.button === 0 && (re && W && be(W, {
 				x: e.clientX,
 				y: e.clientY
-			}, V(qa(T, T, {
-				width: i.innerWidth,
-				height: i.innerHeight
-			})), f.setPointerCapture?.(e.pointerId));
-		}, fe = (e) => {
-			y.status !== "selecting" || !T || V(qa(T, {
+			}) || (e.preventDefault(), e.stopPropagation(), re = !1, W = null, me({ rect: null }), m.style.cursor = "crosshair", ne = {
 				x: e.clientX,
 				y: e.clientY
-			}, {
+			}, xe(qa(ne, ne, {
 				width: i.innerWidth,
 				height: i.innerHeight
-			}));
-		}, pe = (e) => {
-			let t = T;
-			if (T = null, y.status !== "selecting" || !t) return;
-			f.hasPointerCapture?.(e.pointerId) && f.releasePointerCapture(e.pointerId);
+			})), m.setPointerCapture?.(e.pointerId)));
+		}, He = (e) => {
+			if (B.status === "selecting") {
+				if (ie) {
+					let t = ie, n = e.clientX - t.startX, r = e.clientY - t.startY, a = i.innerWidth, o = i.innerHeight;
+					if (t.kind === "move") {
+						Se({
+							...t.rect,
+							left: t.rect.left + n,
+							top: t.rect.top + r
+						});
+						return;
+					}
+					let s = t.handle ?? "", c = t.rect.left, l = t.rect.top, u = t.rect.left + t.rect.width, d = t.rect.top + t.rect.height;
+					s.includes("w") && (c = Math.min(u - 4, Math.max(0, t.rect.left + n))), s.includes("e") && (u = Math.max(c + 4, Math.min(a, t.rect.left + t.rect.width + n))), s.includes("n") && (l = Math.min(d - 4, Math.max(0, t.rect.top + r))), s.includes("s") && (d = Math.max(l + 4, Math.min(o, t.rect.top + t.rect.height + r))), Se({
+						left: c,
+						top: l,
+						width: u - c,
+						height: d - l
+					});
+					return;
+				}
+				ne && xe(qa(ne, {
+					x: e.clientX,
+					y: e.clientY
+				}, {
+					width: i.innerWidth,
+					height: i.innerHeight
+				}));
+			}
+		}, Ue = (e) => {
+			if (ie) {
+				ie = null, m.hasPointerCapture?.(e.pointerId) && m.releasePointerCapture(e.pointerId), W && xe(W);
+				return;
+			}
+			let t = ne;
+			if (ne = null, B.status !== "selecting" || !t) return;
+			m.hasPointerCapture?.(e.pointerId) && m.releasePointerCapture(e.pointerId);
 			let n = qa(t, {
 				x: e.clientX,
 				y: e.clientY
@@ -18730,35 +19014,60 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				height: i.innerHeight
 			});
 			if (n.width < 4 || n.height < 4) {
-				V(null);
+				W = null, re = !1, me({ rect: null }), xe(null);
+				return;
+			}
+			W = ye(n), re = !0, m.style.cursor = "default", me({ rect: W }), xe(W);
+		}, We = (e) => {
+			ne = null, ie = null, m.hasPointerCapture?.(e.pointerId) && m.releasePointerCapture(e.pointerId), xe(W && re ? W : null);
+		}, Ge = (e) => {
+			if (e.key === "Enter" && B.status === "selecting" && re && W) {
+				e.preventDefault(), e.stopImmediatePropagation(), Ie(W).catch(() => void 0);
 				return;
 			}
-			ce(n).catch(() => void 0);
-		}, me = (e) => {
-			T = null, f.hasPointerCapture?.(e.pointerId) && f.releasePointerCapture(e.pointerId), V(null);
-		}, he = (e) => {
 			if (e.key === "Escape") {
-				if (y.status === "selecting") {
-					e.preventDefault(), e.stopImmediatePropagation(), ue();
+				if (B.status === "selecting") {
+					e.preventDefault(), e.stopImmediatePropagation(), ze();
 					return;
 				}
-				y.status === "recording" && (e.preventDefault(), e.stopImmediatePropagation(), oe().catch(() => void 0));
+				B.status === "recording" && (e.preventDefault(), e.stopImmediatePropagation(), Pe().catch(() => void 0));
 			}
 		};
-		f.addEventListener("pointerdown", de), f.addEventListener("pointermove", fe), f.addEventListener("pointerup", pe), f.addEventListener("pointercancel", me), i.addEventListener("keydown", he, !0), _.addEventListener("click", () => {
-			y.status === "recording" && oe().catch(() => void 0);
+		m.addEventListener("pointerdown", Ve), m.addEventListener("pointermove", He), m.addEventListener("pointerup", Ue), m.addEventListener("pointercancel", We), i.addEventListener("keydown", Ge, !0), g.addEventListener("pointerdown", (e) => {
+			let t = e.target;
+			t instanceof Element && t.closest("[data-mesurer-recording-resize]") || Be(e, "move");
+		});
+		for (let e of P) e.addEventListener("pointerdown", (t) => {
+			Be(t, "resize", e.dataset.mesurerRecordingResize);
+		});
+		y.addEventListener("pointerdown", (e) => {
+			e.stopPropagation();
+		}), y.addEventListener("click", (e) => {
+			e.stopPropagation();
+		});
+		let Ke = (e, t) => {
+			let n = W, r = Number(e.value);
+			!n || !Number.isFinite(r) || Se({
+				...n,
+				[t]: r
+			});
+		};
+		C.addEventListener("change", () => Ke(C, "width")), w.addEventListener("change", () => Ke(w, "height")), O.addEventListener("change", () => Ke(O, "left")), k.addEventListener("change", () => Ke(k, "top")), j.addEventListener("click", () => {
+			B.status === "selecting" && re && W && Ie(W).catch(() => void 0);
+		}), R.addEventListener("click", () => {
+			B.status === "recording" && Pe().catch(() => void 0);
 		});
-		let ge = {
-			snapshot: () => Ob(y),
+		let qe = {
+			snapshot: () => Ob(B),
 			subscribe(e) {
-				return b.add(e), () => b.delete(e);
+				return V.add(e), () => V.delete(e);
 			},
-			formats: re,
-			start: G,
-			stop: oe,
-			cancel: ue,
-			discard: W,
-			export: ie
+			formats: je,
+			start: Re,
+			stop: Pe,
+			cancel: ze,
+			discard: Ae,
+			export: Me
 		};
 		t.tool.register({
 			id: "recording",
@@ -18768,28 +19077,28 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 			command: yb,
 			toolbarMode: "select",
 			icon: Eb,
-			active: L,
-			hidden: () => !u().toolEnabled,
+			active: he,
+			hidden: () => !f().toolEnabled,
 			menu: {
 				label: "Recording options",
 				items: [
 					{
 						id: "new",
 						label: "New recording",
-						disabled: () => y.status === "recording" || y.status === "exporting",
-						run: () => G()
+						disabled: () => B.status === "recording" || B.status === "exporting",
+						run: () => Re()
 					},
 					{
 						id: "stop",
 						label: "Stop recording",
-						disabled: () => y.status !== "recording",
-						run: () => oe().then(() => void 0)
+						disabled: () => B.status !== "recording",
+						run: () => Pe().then(() => void 0)
 					},
 					{
 						id: "discard",
 						label: "Discard clip",
-						disabled: () => x === null,
-						run: W
+						disabled: () => H === null,
+						run: Ae
 					}
 				]
 			}
@@ -18802,16 +19111,16 @@ var Kv = "mesurer.layout-guides", qv = "layout-guides:v1", Jv = "mesurer.layout-
 				id: "tool",
 				label: "Recording tool",
 				description: "Show selected-region video recording in the Select toolbar.",
-				value: () => u().toolEnabled,
+				value: () => f().toolEnabled,
 				set: async (e) => {
-					d({ toolEnabled: e }), !e && L() && await ue();
+					p({ toolEnabled: e }), !e && he() && await ze();
 				}
 			}]
-		}), t.command.register(yb, async () => (await G(), Nb(y))), t.command.register(bb, async () => Fb(await oe())), t.command.register(xb, () => (W(), Nb(y))), t.command.register(Sb, async (e) => {
-			let t = await ie(Mb(e));
+		}), t.command.register(yb, async () => (await Re(), Nb(B))), t.command.register(bb, async () => Fb(await Pe())), t.command.register(xb, () => (Ae(), Nb(B))), t.command.register(Sb, async (e) => {
+			let t = await Me(Mb(e));
 			return Ib(t, r, i), Pb(t);
-		}), t.service.provide(gb, ge), t.lifecycle.onDispose(() => {
-			N = !0, ++A, b.clear(), f.removeEventListener("pointerdown", de), f.removeEventListener("pointermove", fe), f.removeEventListener("pointerup", pe), f.removeEventListener("pointercancel", me), i.removeEventListener("keydown", he, !0), k && i.clearTimeout(k), ae.dispose(), H(), z(), ne(!0), a.dispose();
+		}), t.service.provide(gb, qe), t.lifecycle.onDispose(() => {
+			de = !0, ++le, V.clear(), m.removeEventListener("pointerdown", Ve), m.removeEventListener("pointermove", He), m.removeEventListener("pointerup", Ue), m.removeEventListener("pointercancel", We), i.removeEventListener("keydown", Ge, !0), ce && i.clearTimeout(ce), Ne.dispose(), Te(), _e(), ke(!0), a.dispose();
 		});
 	}
 }), Rb = 144, zb = 96, Bb = 8, Vb = 4, Hb = 1800, Ub = (e, t) => {
@@ -19866,7 +20175,7 @@ function Gx(e) {
 }
 //#endregion
 //#region src/version.ts
-var Kx = "0.2.1-beta.5", qx = Np, Jx = Pp, Yx = () => ({
+var Kx = "0.2.1-beta.6", qx = Np, Jx = Pp, Yx = () => ({
 	...km(),
 	version: Kx
 }), Xx = Jx, Zx = (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, Qx = (e) => {
@@ -20638,7 +20947,7 @@ var LS = {
 	overflow: "visible",
 	background: "transparent",
 	"box-sizing": "border-box",
-	"pointer-events": "auto",
+	"pointer-events": "none",
 	"z-index": "2147483647",
 	opacity: "1",
 	visibility: "visible",