@weasel-js/hud 1.10.1 → 1.11.1

package/dist/index.js

@@ -1,10 +1,769 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./tool-Dq_D9qpD.js";
-import { createViewportLayer as d, screenToWorld as f, viewToTransform as p } from "@weasel-js/core";
-import { clamp as m } from "@weasel-js/geom";
-import { releaseImageSource as h } from "@weasel-js/core/renderer";
-import { createLoupeModel as g, loupeInnerView as _, loupeInnerView as v } from "@weasel-js/loupe";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./tool-B5AjewKP.js";
+import { createViewportLayer as f, pathFromD as p, screenToWorld as m, textCommandFromRuns as h, viewToTransform as g } from "@weasel-js/core";
+import { clamp as _, identity as v, mat3 as y, multiply as b, pathFromD as x, rotateAboutPoint as S, roundRectPath as C, scale as w, translate as T } from "@weasel-js/geom";
+import { expandVars as E, parseBoxShadow as D, resolveCurrentColor as O, tokenPx as k } from "@weasel-js/theme";
+import { faceGeneration as A, metricsOf as j, resolveFontVariant as M } from "@weasel-js/font";
+import { createMenuController as N, menuNumberCanStep as P, menuNumberText as ee, placeMenu as te, placeMenuUnder as ne, placeSubmenu as re, withLinks as ie } from "@weasel-js/menu";
+import { formatShortcut as ae } from "@weasel-js/gestures";
+import { toIconRef as oe } from "@weasel-js/icons";
+import { releaseImageSource as se } from "@weasel-js/core/renderer";
+import { createLoupeModel as ce, loupeInnerView as le, loupeInnerView as F } from "@weasel-js/loupe";
+//#region src/menu/accessibleMenu.ts
+function ue(e, t) {
+	return t.kind === "number" ? `${t.label}: ${ee(e.numberValue(t), t)}` : t.kind === "color" ? `${t.label}: ${t.value ?? "—"}` : t.kind === "text" ? `${t.label}: ${e.textValue(t) ?? "—"}` : t.label;
+}
+function I(e, t) {
+	let n = e.stack(), r = t === n.length - 1;
+	return e.entriesAt(t).map((i, a) => {
+		if (i.kind === "separator") return {
+			role: "separator",
+			key: i.key
+		};
+		let o = i.kind === "item" && i.checked !== void 0, s = i.kind === "submenu" && n[t] === a && n.length > t + 1;
+		return {
+			role: o ? "menuitemcheckbox" : "menuitem",
+			key: i.key,
+			label: ue(e, i),
+			...r && n[t] === a ? { active: !0 } : {},
+			...i.kind === "item" && i.checked !== void 0 ? { checked: i.checked } : {},
+			...i.disabled || i.kind === "color" || i.kind === "text" ? { disabled: !0 } : {},
+			...i.kind === "submenu" ? { expanded: s } : {},
+			...s ? { children: [{
+				role: "menu",
+				key: "menu",
+				label: i.label,
+				children: I(e, t + 1)
+			}] } : {}
+		};
+	});
+}
+function de(e) {
+	return {
+		role: "menu",
+		key: "menu",
+		label: "Context menu",
+		children: I(e, 0)
+	};
+}
+//#endregion
+//#region src/boxShadow.ts
+var fe = 7, pe = .16, L = (e) => ({ paint: {
+	kind: "solid",
+	color: e
+} });
+function R(e, t, n, r, i) {
+	let a = Math.max(0, Math.min(i, n / 2, r / 2));
+	return a === 0 ? `M ${e} ${t} H ${e + n} V ${t + r} H ${e} Z` : `M ${e + a} ${t} H ${e + n - a} A ${a} ${a} 0 0 1 ${e + n} ${t + a} V ${t + r - a} A ${a} ${a} 0 0 1 ${e + n - a} ${t + r} H ${e + a} A ${a} ${a} 0 0 1 ${e} ${t + r - a} V ${t + a} A ${a} ${a} 0 0 1 ${e + a} ${t} Z`;
+}
+function me(e, t, n, r) {
+	let i = (r) => {
+		let i = e.w + r * 2, a = e.h + r * 2;
+		return i > 0 && a > 0 ? C(e.x + n.x - r, e.y + n.y - r, i, a, Math.max(0, t + r)) : null;
+	};
+	if (n.blur <= 0) {
+		let e = i(n.spread);
+		return {
+			kind: "group",
+			children: e ? [{
+				kind: "path",
+				path: e,
+				fill: L(r)
+			}] : []
+		};
+	}
+	let a = [], o = n.blur / 6;
+	for (let e = 0; e < fe; e++) {
+		let t = i(n.spread + n.blur / 2 - e * o);
+		t && a.push({
+			kind: "path",
+			path: t,
+			fill: L(r)
+		});
+	}
+	return {
+		kind: "group",
+		alpha: pe,
+		children: a
+	};
+}
+function he(e, t, n, r) {
+	let i = Math.abs(n.x) + Math.abs(n.y) + Math.abs(n.spread) + 1, a = R(e.x + n.x + n.spread, e.y + n.y + n.spread, e.w - n.spread * 2, e.h - n.spread * 2, Math.max(0, t - n.spread)), o = x(`${R(e.x - i, e.y - i, e.w + i * 2, e.h + i * 2, 0)} ${a}`);
+	return {
+		kind: "group",
+		clip: C(e.x, e.y, e.w, e.h, t),
+		children: [{
+			kind: "path",
+			path: o.kind === "polygon" ? {
+				...o,
+				fillRule: "evenodd"
+			} : o,
+			fill: L(r)
+		}]
+	};
+}
+function z(e, t, n, r, i = e) {
+	let a = [], o = [], s = Math.max(0, t - (i.x - e.x));
+	for (let c of [...n].reverse()) {
+		let n = O(c.color, r);
+		c.inset ? o.push(he(i, s, c, n)) : a.push(me(e, t, c, n));
+	}
+	return {
+		under: a,
+		over: o
+	};
+}
+//#endregion
+//#region src/glyph.ts
+var ge = {
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, _e = /* @__PURE__ */ new Set([
+	"fill",
+	"fill-opacity",
+	"fill-rule",
+	"stroke",
+	"stroke-width",
+	"stroke-opacity",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"stroke-dasharray"
+]);
+function* ve(e) {
+	for (let t of e.matchAll(/<(\/?)([a-zA-Z]+)((?:\s+[\w:-]+="[^"]*")*)\s*(\/?)>/g)) {
+		let e = {};
+		for (let n of t[3].matchAll(/([\w:-]+)="([^"]*)"/g)) e[n[1]] = n[2];
+		yield {
+			close: t[1] === "/",
+			name: t[2],
+			attrs: e,
+			selfClosing: t[4] === "/"
+		};
+	}
+}
+var B = (e, t = 0) => e === void 0 || e === "" ? t : Number(e), V = (e) => e.trim().split(/[\s,]+/).filter((e) => e !== "").map(Number);
+function ye(e) {
+	let t = v();
+	if (!e) return t;
+	for (let [, n, r] of e.matchAll(/(\w+)\s*\(([^)]*)\)/g)) {
+		let e = V(r), i = n === "translate" ? T(e[0] ?? 0, e[1] ?? 0) : n === "scale" ? w(e[0] ?? 1, e[1] ?? e[0] ?? 1) : n === "rotate" ? S(e[1] ?? 0, e[2] ?? 0, (e[0] ?? 0) * Math.PI / 180) : n === "matrix" && e.length === 6 ? e : null;
+		i && (t = b(t, i));
+	}
+	return t;
+}
+function be(e, t, n, r, i, a) {
+	return i <= 0 || a <= 0 ? `M ${e} ${t} H ${e + n} V ${t + r} H ${e} Z` : `M ${e + i} ${t} H ${e + n - i} A ${i} ${a} 0 0 1 ${e + n} ${t + a} V ${t + r - a} A ${i} ${a} 0 0 1 ${e + n - i} ${t + r} H ${e + i} A ${i} ${a} 0 0 1 ${e} ${t + r - a} V ${t + a} A ${i} ${a} 0 0 1 ${e + i} ${t} Z`;
+}
+var H = (e, t, n, r) => `M ${e - n} ${t} A ${n} ${r} 0 1 0 ${e + n} ${t} A ${n} ${r} 0 1 0 ${e - n} ${t} Z`;
+function xe(e, t) {
+	switch (e) {
+		case "path": return t.d;
+		case "rect": {
+			let e = B(t.width), n = B(t.height), r = Math.min(B(t.rx, B(t.ry)), e / 2), i = Math.min(B(t.ry, B(t.rx)), n / 2);
+			return be(B(t.x), B(t.y), e, n, r, i);
+		}
+		case "circle": return H(B(t.cx), B(t.cy), B(t.r), B(t.r));
+		case "ellipse": return H(B(t.cx), B(t.cy), B(t.rx), B(t.ry));
+		case "line": return `M ${B(t.x1)} ${B(t.y1)} L ${B(t.x2)} ${B(t.y2)}`;
+		case "polygon":
+		case "polyline": {
+			let n = V(t.points ?? "");
+			if (n.length < 4) return;
+			let r = [];
+			for (let e = 0; e + 1 < n.length; e += 2) r.push(`${n[e]} ${n[e + 1]}`);
+			return `M ${r.join(" L ")}${e === "polygon" ? " Z" : ""}`;
+		}
+		default: return;
+	}
+}
+var U = (e, t) => e === void 0 || e === "none" ? null : /^currentcolor$/i.test(e) ? t : e;
+function Se(e, t, n) {
+	let r = [], i = U(t.fill, n);
+	if (i) {
+		let n = {
+			kind: "path",
+			path: e.kind === "polygon" && t["fill-rule"] === "evenodd" ? {
+				...e,
+				fillRule: "evenodd"
+			} : e,
+			fill: { paint: {
+				kind: "solid",
+				color: i
+			} }
+		}, a = B(t["fill-opacity"], 1);
+		r.push(a < 1 ? {
+			kind: "group",
+			alpha: a,
+			children: [n]
+		} : n);
+	}
+	let a = U(t.stroke, n);
+	if (a) {
+		let n = t["stroke-dasharray"] && t["stroke-dasharray"] !== "none" ? V(t["stroke-dasharray"]) : void 0, i = {
+			kind: "path",
+			path: e,
+			stroke: {
+				paint: {
+					kind: "solid",
+					color: a
+				},
+				width: B(t["stroke-width"], 1),
+				cap: t["stroke-linecap"],
+				join: t["stroke-linejoin"],
+				...n ? { dash: n } : {}
+			}
+		}, o = B(t["stroke-opacity"], 1);
+		r.push(o < 1 ? {
+			kind: "group",
+			alpha: o,
+			children: [i]
+		} : i);
+	}
+	return r;
+}
+function W(e, t) {
+	let n = { ...t };
+	for (let [t, r] of Object.entries(e.attrs)) _e.has(t) && (n[t] = r);
+	let r = [], i = {
+		kind: "group",
+		children: r
+	}, a = ye(e.attrs.transform);
+	return a.some((e, t) => e !== v()[t]) && (i.transform = y.fromAffine(a)), e.name === "svg" && (i.clip = {
+		kind: "rect",
+		x: B(e.attrs.x),
+		y: B(e.attrs.y),
+		width: B(e.attrs.width),
+		height: B(e.attrs.height)
+	}), {
+		attrs: n,
+		children: r,
+		group: i
+	};
+}
+function G(e, t) {
+	let n = t.size / 20, r = {
+		attrs: ge,
+		children: [],
+		group: {
+			kind: "group",
+			transform: y.fromAffine([
+				n,
+				0,
+				0,
+				n,
+				t.x,
+				t.y
+			]),
+			children: []
+		}
+	};
+	r.group.children = r.children;
+	let i = [r], a = 0;
+	for (let n of ve(e.body)) {
+		let e = i.at(-1);
+		if (a > 0 || n.name === "defs" || n.name === "clipPath") {
+			n.selfClosing || (a += n.close ? -1 : 1);
+			continue;
+		}
+		if (n.close) {
+			(n.name === "g" || n.name === "svg") && i.length > 1 && i.pop();
+			continue;
+		}
+		if (n.name === "g" || n.name === "svg") {
+			let t = W(n, e.attrs);
+			e.children.push(t.group), n.selfClosing || i.push(t);
+			continue;
+		}
+		let r = xe(n.name, n.attrs);
+		if (r === void 0) continue;
+		let o = W(n, e.attrs), s = Se(x(r), o.attrs, t.color);
+		o.group.transform ? e.children.push({
+			kind: "group",
+			transform: o.group.transform,
+			children: s
+		}) : e.children.push(...s);
+	}
+	return [r.group];
+}
+//#endregion
+//#region src/menu/valueRows.ts
+function K(e, t) {
+	let n = t.rowHeight, r = e - t.padX;
+	return {
+		minus: {
+			x: r - 4 * n,
+			w: n
+		},
+		value: {
+			x: r - 3 * n,
+			w: 2 * n
+		},
+		plus: {
+			x: r - n,
+			w: n
+		},
+		width: 4 * n
+	};
+}
+function Ce(e, t, n) {
+	let { minus: r, plus: i } = K(e, t), a = (e) => n >= e.x && n < e.x + e.w;
+	return a(i) ? 1 : a(r) ? -1 : null;
+}
+function we(e, t, n) {
+	if (e.kind === "number") return t.padX + K(0, t).width;
+	if (e.kind === "color") return Math.max(t.rowHeight, t.padX + n(e.value ?? "—", t.fontSize));
+	if (e.kind === "text") return t.padX + n(e.value ?? "—", t.fontSize);
+}
+var q = (e) => ({ paint: {
+	kind: "solid",
+	color: e
+} }), J = (e, t) => ({
+	kind: "path",
+	path: p(e),
+	stroke: {
+		paint: {
+			kind: "solid",
+			color: t
+		},
+		width: 1.5,
+		cap: "round"
+	}
+});
+function Te(e, t, n, r, i, a) {
+	let { minus: o, value: s, plus: c } = K(e.w, i), l = e.y + t.y + t.h / 2, u = (e) => e && !n.disabled ? a.fg : a.muted, d = (t) => e.x + t.x + t.w / 2, f = r !== void 0 && !P(n, r, -1), p = r !== void 0 && !P(n, r, 1);
+	return [
+		J(`M ${d(o) - 4} ${l} L ${d(o) + 4} ${l}`, u(!f)),
+		h(e.x + s.x, e.y + t.y, [{
+			text: ee(r, n),
+			fill: q(u(!0))
+		}], {
+			...a.font,
+			align: "center"
+		}, void 0, t.h, "center", void 0, s.w),
+		J(`M ${d(c) - 4} ${l} L ${d(c) + 4} ${l} M ${d(c)} ${l - 4} L ${d(c)} ${l + 4}`, u(!p))
+	];
+}
+function Ee(e, t, n, r, i) {
+	return [h(e.x + r.padX, e.y + t.y, [{
+		text: n ?? "—",
+		fill: q(i.muted)
+	}], {
+		...i.font,
+		align: "right"
+	}, void 0, t.h, "center", void 0, e.w - r.padX * 2)];
+}
+function De(e, t, n, r, i) {
+	let a = [];
+	if (n.value !== void 0) {
+		let o = e.x + r.padX + (r.rowHeight - 12) / 2, s = e.y + t.y + (t.h - 12) / 2;
+		a.push({
+			kind: "path",
+			path: {
+				kind: "rect",
+				x: o,
+				y: s,
+				width: 12,
+				height: 12
+			},
+			fill: q(n.value),
+			stroke: {
+				paint: {
+					kind: "solid",
+					color: i.border
+				},
+				width: 1
+			}
+		});
+	}
+	return a.push(h(e.x + r.padX, e.y + t.y, [{
+		text: n.value ?? "—",
+		fill: q(i.muted)
+	}], {
+		...i.font,
+		align: "right"
+	}, void 0, t.h, "center", void 0, e.w - r.padX * 2)), a;
+}
+//#endregion
+//#region src/menu/drawPanel.ts
+var Y = {
+	rowHeight: 24,
+	padX: 8,
+	padY: 4,
+	separatorHeight: 9,
+	minWidth: 180,
+	fontSize: 13
+};
+function X(e, t) {
+	let n = t.padY;
+	return e.map((e) => {
+		let r = e.kind === "separator" ? t.separatorHeight : t.rowHeight, i = {
+			y: n,
+			h: r
+		};
+		return n += r, i;
+	});
+}
+var Oe = (e) => e.kind === "item" ? ae(e.shortcut) : void 0;
+function ke(e, t, n) {
+	let r = X(e, t).at(-1), i = Math.max(0, ...e.map((e) => {
+		if (e.kind === "separator") return 0;
+		let r = we(e, t, n);
+		if (r !== void 0) return n(e.label, t.fontSize) + r;
+		let i = Oe(e);
+		return n(e.label, t.fontSize) + Math.max(t.rowHeight, i ? t.padX + n(i, t.fontSize) : 0);
+	}));
+	return {
+		w: Math.max(t.minWidth, Math.ceil(i) + t.padX * 2 + t.rowHeight),
+		h: (r ? r.y + r.h : 0) + t.padY
+	};
+}
+var Z = (e) => ({ paint: {
+	kind: "solid",
+	color: e
+} }), Ae = (e, t, n, r, i) => ({
+	kind: "path",
+	path: {
+		kind: "rect",
+		x: e,
+		y: t,
+		width: n,
+		height: r
+	},
+	fill: Z(i)
+});
+function je(e, t, n) {
+	return {
+		kind: "path",
+		path: p(`M ${e - 3 / 2} ${t - 3} L ${e + 3 / 2} ${t} L ${e - 3 / 2} ${t + 3}`),
+		stroke: {
+			paint: {
+				kind: "solid",
+				color: n
+			},
+			width: 1.5,
+			cap: "round"
+		}
+	};
+}
+function Me(e, t, n) {
+	return {
+		kind: "path",
+		path: p(`M ${e - 4} ${t} L ${e - 1.5} ${t + 2.5} L ${e + 4} ${t - 3}`),
+		stroke: {
+			paint: {
+				kind: "solid",
+				color: n
+			},
+			width: 1.5,
+			cap: "round",
+			join: "round"
+		}
+	};
+}
+var Q = 16, Ne = "var(--wzl-bevel-raised, 0 8px 24px var(--wzl-shadow))";
+function Pe(e, t, n, r, i, a, o = (e) => e.value) {
+	let s = e.tokens, c = s["--wzl-fg"], l = O(s["--wzl-fg-muted"], c), u = k("--wzl-radius-md", s), d = {
+		fontFamily: e.defaultFont,
+		fontSize: i.fontSize
+	}, f = z(t, u, D(E(Ne, s)), c, {
+		x: t.x + 1,
+		y: t.y + 1,
+		w: t.w - 2,
+		h: t.h - 2
+	}), p = [
+		...f.under,
+		{
+			kind: "path",
+			path: C(t.x, t.y, t.w, t.h, u),
+			fill: Z(s["--wzl-surface-popover"]),
+			stroke: {
+				paint: {
+					kind: "solid",
+					color: s["--wzl-border"]
+				},
+				width: 1
+			}
+		},
+		...f.over
+	], m = X(n, i);
+	return n.forEach((e, n) => {
+		let u = m[n];
+		if (e.kind === "separator") {
+			p.push(Ae(t.x + i.padX, t.y + u.y + Math.floor(u.h / 2), t.w - i.padX * 2, 1, s["--wzl-border"]));
+			return;
+		}
+		n === r && p.push(Ae(t.x + 2, t.y + u.y, t.w - 4, u.h, s["--wzl-surface-hover"]));
+		let f = e.disabled || e.kind === "color" || e.kind === "text" ? l : c;
+		p.push(h(t.x + i.padX + i.rowHeight, t.y + u.y, [{
+			text: e.label,
+			fill: Z(f)
+		}], d, void 0, u.h, "center"));
+		let g = t.x + i.padX + i.rowHeight / 2, _ = t.y + u.y + u.h / 2, v = e.kind !== "color" && typeof e.icon == "string" ? oe(e.icon) : void 0, y = v ? a?.get(v) : void 0;
+		e.kind === "item" && e.checked ? p.push(Me(g, _, f)) : y && p.push(...G(y, {
+			x: g - Q / 2,
+			y: _ - Q / 2,
+			size: Q,
+			color: f
+		}));
+		let b = Oe(e);
+		b && p.push(h(t.x + i.padX, t.y + u.y, [{
+			text: b,
+			fill: Z(l)
+		}], {
+			...d,
+			align: "right"
+		}, void 0, u.h, "center", void 0, t.w - i.padX * 2));
+		let x = {
+			fg: c,
+			muted: l,
+			border: s["--wzl-border"],
+			font: d
+		};
+		e.kind === "number" && p.push(...Te(t, u, e, o(e), i, x)), e.kind === "color" && p.push(...De(t, u, e, i, x)), e.kind === "text" && p.push(...Ee(t, u, e.value, i, x)), e.kind === "submenu" && p.push(je(t.x + t.w - i.padX - i.rowHeight / 2, t.y + u.y + u.h / 2, f));
+	}), p;
+}
+function Fe(e, t, n) {
+	let r = X(e, t).findIndex((e) => n >= e.y && n < e.y + e.h);
+	return r < 0 ? null : r;
+}
+//#endregion
+//#region src/menu/measureLabel.ts
+function Ie(e, t) {
+	return e.length * t * .55;
+}
+function Le(e, t, n) {
+	let r = j(M(n, 400, "normal"));
+	if (!r) return Ie(e, t);
+	let i = 0, a = null;
+	for (let t of e) {
+		let e = t.codePointAt(0);
+		i += r.advanceOf(e) ?? r.size * .55, a !== null && (i += r.kernOf(a, e)), a = e;
+	}
+	return i * t / r.size;
+}
+//#endregion
+//#region src/menu/placePanels.ts
+function Re(e) {
+	let t = [], n = null;
+	return (r, i) => {
+		let a = A();
+		(n?.family !== i || n.faces !== a) && (t = [], n = {
+			family: i,
+			faces: a
+		});
+		let { width: o, height: s } = e.canvasSize(), c = {
+			x: 0,
+			y: 0,
+			w: o,
+			h: s
+		}, l = e.metrics, u = r.stack(), d = [], f = !0;
+		for (let n = 0; n < u.length; n++) {
+			let a = r.entriesAt(n), o = n === 0 ? null : u[n - 1] ?? null, s = t[n];
+			if (f && s && s.entries === a && s.parentRow === o) {
+				d.push(s);
+				continue;
+			}
+			f = !1;
+			let p = ke(a, l, (t, n) => i === null ? Ie(t, n) : e.measure(t, n, i)), m;
+			if (n === 0) m = e.under ? ne(p, e.under, c) : te(p, e.anchor, c);
+			else {
+				let e = d[n - 1].rect, t = X(r.entriesAt(n - 1), l)[o];
+				m = re(p, {
+					x: e.x,
+					y: e.y + t.y,
+					w: e.w,
+					h: t.h
+				}, c);
+			}
+			let h = {
+				x: m.x,
+				y: m.y,
+				w: p.w,
+				h: p.h
+			};
+			d.push({
+				entries: a,
+				parentRow: o,
+				rect: h
+			}), r.setPanel(n, h);
+		}
+		return t = d, d.map((e) => e.rect);
+	};
+}
+//#endregion
+//#region src/menu/menuWidget.ts
+var ze = [
+	"pointer",
+	"doubleClick",
+	"contextMenu",
+	"longPress",
+	"wheel"
+];
+function Be(e, t) {
+	let n = t({
+		x: e.x,
+		y: e.y
+	}), r = t({
+		x: e.x + e.w,
+		y: e.y + e.h
+	});
+	return {
+		x: n.x,
+		y: n.y,
+		w: r.x - n.x,
+		h: r.y - n.y
+	};
+}
+function Ve(e) {
+	let t = e.metrics ?? Y, r = n(e.onChange), i = N({
+		entries: ie(e.open.entries, (e) => window.location.assign(e)),
+		highlightFirst: e.open.source === "keyboard",
+		onClose: e.close
+	}), a = Re({
+		anchor: e.toCanvas(e.open.client),
+		...e.open.under ? { under: Be(e.open.under, e.toCanvas) } : {},
+		canvasSize: e.canvasSize,
+		measure: e.measure ?? Le,
+		metrics: t
+	}), o = null, s = a(i, o), c = !1, l = !1, u = null;
+	i.subscribe(() => {
+		s = a(i, o), r.changed();
+	});
+	let d = (e, t) => {
+		for (let n = s.length - 1; n >= 0; n--) {
+			let r = s[n];
+			if (e >= r.x && e < r.x + r.w && t >= r.y && t < r.y + r.h) return n;
+		}
+		return -1;
+	}, f = () => {
+		let e = Math.min(...s.map((e) => e.x)), t = Math.min(...s.map((e) => e.y)), n = Math.max(...s.map((e) => e.x + e.w)), r = Math.max(...s.map((e) => e.y + e.h));
+		return {
+			x: e,
+			y: t,
+			w: n - e,
+			h: r - t
+		};
+	}, p = (e) => {
+		u !== null && u !== e && i.hover(u, null), u = e;
+	}, m = (e) => {
+		if (e.type === "hoverleave") {
+			p(null);
+			return;
+		}
+		if (e.type === "cancel") {
+			l = !1;
+			return;
+		}
+		if (e.type === "down") {
+			l = !0;
+			return;
+		}
+		if (e.type !== "hovermove" && e.type !== "move" && e.type !== "up") return;
+		let n = d(e.x, e.y), r = e.type === "up" && l;
+		if (e.type === "up" && (l = !1), r || p(n < 0 ? null : n), n < 0) return;
+		let a = i.entriesAt(n), o = Fe(a, t, e.y - s[n].y);
+		if (!r) i.hover(n, o, {
+			x: e.x,
+			y: e.y
+		});
+		else if (o !== null) {
+			i.press(n, o);
+			let r = a[o], c = r?.kind === "number" ? Ce(s[n].w, t, e.x - s[n].x) : null;
+			r?.kind === "number" && c !== null && i.spin(r, c > 0 ? "ArrowUp" : "ArrowDown");
+		}
+	}, h = (e) => e.type === "keydown" && (!e.ctrlKey && !e.metaKey && !e.altKey && i.key(e.key), !0), g = {
+		read: () => de(i),
+		subscribe: i.subscribe
+	};
+	return {
+		id: `weasel-menu-${e.open.seq}`,
+		get bounds() {
+			return f();
+		},
+		hidden: !1,
+		get disposed() {
+			return c;
+		},
+		claims: ze,
+		focusable: !0,
+		focusRing: !1,
+		accessibleName: "Context menu",
+		accessibleTree: g,
+		deps: (t) => [
+			...r.deps(),
+			t.defaultFont,
+			A(),
+			e.icons?.getVersion()
+		],
+		draw: (n) => (o = n.defaultFont, s = a(i, o), s.flatMap((r, a) => Pe(n, r, i.entriesAt(a), i.stack()[a] ?? null, t, e.icons, i.numberValue))),
+		hitTest: (e, t) => d(e, t) >= 0,
+		cursorAt: () => "default",
+		onPointer: m,
+		onKey: h,
+		dispose() {
+			c = !0, i.dispose();
+		}
+	};
+}
+//#endregion
+//#region src/menu/attachMenuHost.ts
+function He(e, t, n) {
+	let r = null, i = {
+		widget: null,
+		visible: !1
+	}, a = () => {
+		let t = r;
+		r = null, t && (e.remove(t), t.disposed || t.dispose());
+	}, o = () => {
+		let { widget: t, visible: n } = i;
+		i = {
+			widget: null,
+			visible: !1
+		}, t && e.focus(t, { visible: n });
+	}, s = () => {
+		let s = t.current();
+		r || (i = {
+			widget: e.focused,
+			visible: e.focusVisible
+		});
+		let c = r !== null && e.focused === r;
+		if (a(), !s) {
+			c && o();
+			return;
+		}
+		let l = Ve({
+			...n,
+			open: s,
+			close: () => {
+				t.current() === s && t.close();
+			},
+			onChange: () => e.markDirty()
+		});
+		r = l, e.add(l), e.focus(l) || (a(), t.close());
+	}, c = () => {
+		r && t.close();
+	}, l = (e) => {
+		if (!r) return;
+		let i = n.toCanvas({
+			x: e.clientX,
+			y: e.clientY
+		});
+		r.hitTest(i.x, i.y) || t.close();
+	}, u = t.subscribe(s), d = e.subscribeFocus((e) => {
+		r && e !== r && t.close();
+	});
+	return window.addEventListener("wheel", l, {
+		capture: !0,
+		passive: !0
+	}), window.addEventListener("blur", c), window.addEventListener("resize", c), s(), () => {
+		u(), d(), window.removeEventListener("wheel", l, !0), window.removeEventListener("blur", c), window.removeEventListener("resize", c), a();
+	};
+}
+//#endregion
 //#region src/loupe/contentWatch.ts
-function y(e) {
+function Ue(e) {
 	let t = "", n = null;
 	return {
 		drew(e) {
@@ -21,12 +780,12 @@ function y(e) {
 }
 //#endregion
 //#region src/loupe/pointerAim.ts
-var b = [
+var We = [
 	"pointerup",
 	"pointercancel",
 	"lostpointercapture"
 ];
-function x(e, t) {
+function Ge(e, t) {
 	let n = !1, r = (t) => {
 		let n = e.getBoundingClientRect();
 		return {
@@ -41,16 +800,16 @@ function x(e, t) {
 		n = !1;
 	};
 	e.addEventListener("pointermove", i), e.addEventListener("pointerdown", a);
-	for (let t of b) e.addEventListener(t, o);
+	for (let t of We) e.addEventListener(t, o);
 	return () => {
 		e.removeEventListener("pointermove", i), e.removeEventListener("pointerdown", a);
-		for (let t of b) e.removeEventListener(t, o);
+		for (let t of We) e.removeEventListener(t, o);
 	};
 }
 //#endregion
 //#region src/loupe/readback.ts
-function S(e, t, n, r, i, a, o) {
-	let s = n.x + Math.round(r.x * i), c = n.y + Math.round(r.y * i), l = m(s - Math.floor(a / 2), n.x, n.x + Math.max(0, n.width - a)), u = t - m(c - Math.floor(o / 2), n.y, n.y + Math.max(0, n.height - o)) - o, d = new Uint8Array(a * o * 4);
+function Ke(e, t, n, r, i, a, o) {
+	let s = n.x + Math.round(r.x * i), c = n.y + Math.round(r.y * i), l = _(s - Math.floor(a / 2), n.x, n.x + Math.max(0, n.width - a)), u = t - _(c - Math.floor(o / 2), n.y, n.y + Math.max(0, n.height - o)) - o, d = new Uint8Array(a * o * 4);
 	e.readPixels(l, u, a, o, e.RGBA, e.UNSIGNED_BYTE, d);
 	let f = new Uint8ClampedArray(a * o * 4), p = a * 4;
 	for (let e = 0; e < o; e++) {
@@ -61,7 +820,7 @@ function S(e, t, n, r, i, a, o) {
 }
 //#endregion
 //#region src/loupe/createLoupe.ts
-var C = (e, t) => ({
+var qe = (e, t) => ({
 	kind: "path",
 	path: {
 		kind: "rect",
@@ -74,35 +833,43 @@ var C = (e, t) => ({
 		kind: "solid",
 		color: t
 	} }
-}), w = {
+}), $ = "weasel-loupe:lens", Je = {
 	x: 0,
 	y: 0,
 	w: 0,
 	h: 0
 };
-function T(e) {
+function Ye(e, t, n, r, i) {
+	if (t && t.id !== null) {
+		let n = {
+			x: (e.x - t.rect.x) / t.view.scale.x + t.view.x,
+			y: (e.y - t.rect.y) / t.view.scale.y + t.view.y
+		};
+		return F(n, t.view, r, i);
+	}
+	let a = m(e.x, e.y, g(n));
+	return F({
+		x: a[0],
+		y: a[1]
+	}, n, r, i);
+}
+function Xe(e) {
 	let { hud: t, canvas: n, requestRedraw: r } = e, i = e.views, a = i !== void 0 && e.interactive === !0, o = e.input ?? n, s = null, c = null, l = () => {
-		c &&= (h(c), c.close(), null);
-	}, u = !1, m = !1, _ = !1, b = !1, T = e.bounds ?? {
+		c &&= (se(c), c.close(), null);
+	}, u = !1, d = !1, p = !1, m = !1, h = e.bounds ?? {
 		x: 24,
 		y: 24,
 		w: 220,
 		h: 200
-	}, E = y(e.contentVersion ?? i?.getPaintedVersion), D = !1, O = (e) => (E.drew(e.view), V.mode === "vector" ? M(e) : N(e)), k = (t) => e.background ?? t.tokens["--wzl-surface"], A = (e) => C(e, k(e)), j = (e, t) => {
-		let n = f(V.aim.x, V.aim.y, p(e));
-		return v({
-			x: n[0],
-			y: n[1]
-		}, e, t, V.factor);
-	}, M = (t) => i ? s ? [A(t), ...s.draw(t.data, t.view, t.dims)] : [A(t)] : d({
-		id: `${R.id}:lens`,
+	}, g = Ue(e.contentVersion ?? i?.getPaintedVersion), _ = !1, v = (e) => (g.drew(e.view), j.mode === "vector" ? S(e) : C(e)), y = (t) => e.background ?? t.tokens["--wzl-surface"], b = (e) => qe(e, y(e)), x = (e, t) => Ye(j.aim, i?.viewAt?.(j.aim, { except: $ }) ?? null, e, t, j.factor), S = (t) => i ? s ? [b(t), ...s.draw(t.data, t.view, t.dims)] : [b(t)] : f({
+		id: `${O.id}:lens`,
 		label: "Loupe content",
 		source: e.source ?? [],
-		view: j(t.view, t.rect),
+		view: x(t.view, t.rect),
 		bounds: () => t.rect,
-		background: k(t)
-	}).draw(t.data, t.view, t.dims), N = (e) => {
-		let t = [A(e)];
+		background: y(t)
+	}).draw(t.data, t.view, t.dims), C = (e) => {
+		let t = [b(e)];
 		return c && t.push({
 			kind: "image",
 			image: c,
@@ -112,10 +879,10 @@ function T(e) {
 			h: e.rect.h,
 			sampling: "nearest"
 		}), t;
-	}, P = () => {
-		_ || V.mode !== "pixel" || (m = !0);
-	}, F = (t, r, a) => {
-		if (!b) return null;
+	}, w = () => {
+		p || j.mode !== "pixel" || (d = !0);
+	}, T = (t, r, a) => {
+		if (!m) return null;
 		let o = n.getContext("webgl2");
 		if (!o) return null;
 		let s = n.getBoundingClientRect();
@@ -131,12 +898,12 @@ function T(e) {
 			width: n.width,
 			height: n.height
 		};
-		return S(o, n.height, u, t, c, r(c), a(c));
-	}, I = () => {
-		if (_ || V.mode !== "pixel") return;
-		let e = R.contentRect, t = F(V.aim, (t) => Math.max(1, Math.round(e.w * t / V.factor)), (t) => Math.max(1, Math.round(e.h * t / V.factor)));
+		return Ke(o, n.height, u, t, c, r(c), a(c));
+	}, E = () => {
+		if (p || j.mode !== "pixel") return;
+		let e = O.contentRect, t = T(j.aim, (t) => Math.max(1, Math.round(e.w * t / j.factor)), (t) => Math.max(1, Math.round(e.h * t / j.factor)));
 		t && (u = !0, createImageBitmap(t).then((e) => {
-			if (_) {
+			if (p) {
 				e.close();
 				return;
 			}
@@ -144,92 +911,92 @@ function T(e) {
 		}).catch(() => {
 			u = !1, r();
 		}));
-	}, L = (e) => {
-		let t = F(e, () => 1, () => 1);
+	}, D = (e) => {
+		let t = T(e, () => 1, () => 1);
 		return !t || t.data[3] === 0 ? null : "#" + [
 			t.data[0],
 			t.data[1],
 			t.data[2]
 		].map((e) => e.toString(16).padStart(2, "0")).join("");
-	}, R = t.window({
+	}, O = t.window({
 		id: "weasel-loupe",
-		x: T.x,
-		y: T.y,
-		w: T.w,
-		h: T.h,
+		x: h.x,
+		y: h.y,
+		w: h.w,
+		h: h.h,
 		title: e.title ?? "Loupe",
 		titlebar: e.titlebar,
-		content: O,
+		content: v,
 		interior: a ? "pass" : "claim",
 		onResize: () => {
-			P();
+			w();
 		},
 		...a ? {} : { onContentClick: (e) => {
-			V.pick(e);
+			j.pick(e);
 		} },
 		...e.onClose ? { onClose: e.onClose } : {}
-	}), z = {
-		lens: () => R.contentRect,
-		covers: (e) => R.hitTest(e.x, e.y) || (R.passes?.(e.x, e.y) ?? !1),
-		sample: L,
-		hidden: () => R.hidden,
-		gone: () => R.disposed === !0,
+	}), k = {
+		lens: () => O.contentRect,
+		covers: (e) => O.hitTest(e.x, e.y) || (O.passes?.(e.x, e.y) ?? !1),
+		sample: D,
+		hidden: () => O.hidden,
+		gone: () => O.disposed === !0,
 		changed: () => {
-			P(), r();
+			w(), r();
 		},
 		subscribeFrame: t.subscribeFrame
-	}, B = t.subscribeFrame(() => {
-		b = !0, (E.changed() || D) && (D = !1, P(), V.resample()), m && !u && (m = !1, I());
-	}), V = g({
-		surface: z,
+	}, A = t.subscribeFrame(() => {
+		m = !0, (g.changed() || _) && (_ = !1, w(), j.resample()), d && !u && (d = !1, E());
+	}), j = ce({
+		surface: k,
 		...e.mode ? { mode: e.mode } : {},
 		...e.factor === void 0 ? {} : { factor: e.factor },
 		...e.onColorChange ? { onColorChange: e.onColorChange } : {},
 		...e.onPick ? { onPick: e.onPick } : {},
-		onDispose: () => U()
+		onDispose: () => N()
 	});
 	i && (s = i.addView({
-		id: `${R.id}:lens`,
+		id: $,
 		label: "Loupe",
-		bounds: () => R.hidden ? w : R.contentRect,
-		view: (e) => j(e, R.contentRect),
+		bounds: () => O.hidden ? Je : O.contentRect,
+		view: (e) => x(e, O.contentRect),
 		paint: !1,
 		interactive: a,
 		...e.source ? { layers: () => e.source } : {}
 	}));
-	let H = x(o, {
-		aimAt: (e) => V.aimAt(e),
-		holds: (e) => a && z.covers(e)
-	}), U = () => {
-		_ = !0, B(), H(), s?.remove(), s = null, l();
+	let M = Ge(o, {
+		aimAt: (e) => j.aimAt(e),
+		holds: (e) => a && k.covers(e)
+	}), N = () => {
+		p = !0, A(), M(), s?.remove(), s = null, l();
 	};
 	return {
-		window: R,
+		window: O,
 		get mode() {
-			return V.mode;
+			return j.mode;
 		},
 		get factor() {
-			return V.factor;
+			return j.factor;
 		},
 		get aim() {
-			return V.aim;
+			return j.aim;
 		},
 		get color() {
-			return V.color;
+			return j.color;
 		},
-		setMode: V.setMode,
-		setFactor: V.setFactor,
-		aimAt: V.aimAt,
-		pick: V.pick,
+		setMode: j.setMode,
+		setFactor: j.setFactor,
+		aimAt: j.aimAt,
+		pick: j.pick,
 		refresh() {
-			_ || (D = !0, r());
+			p || (_ = !0, r());
 		},
 		dispose() {
-			V.dispose(), R.dispose();
+			j.dispose(), O.dispose();
 		}
 	};
 }
 //#endregion
-export { r as DEFAULT_FONT_FAMILY, i as DEFAULT_WIDGET_CLAIMS, c as DEFAULT_WINDOW_METRICS, l as HUD_AFFORDANCE_KIND, s as attachHud, u as claimsOf, o as createHud, a as createHudContribution, T as createLoupe, t as cursorForZone, n as isFocusable, _ as loupeInnerView, e as registerDefaultFont };
+export { i as DEFAULT_FONT_FAMILY, Y as DEFAULT_MENU_METRICS, a as DEFAULT_WIDGET_CLAIMS, l as DEFAULT_WINDOW_METRICS, u as HUD_AFFORDANCE_KIND, c as attachHud, He as attachMenuHost, z as boxShadowCommands, d as claimsOf, s as createHud, o as createHudContribution, Xe as createLoupe, Ve as createMenuWidget, t as cursorForZone, G as glyphCommands, r as isFocusable, le as loupeInnerView, Le as measureLabel, e as registerDefaultFont };
 
 //# sourceMappingURL=index.js.map