@weasel-js/hud 1.13.0 → 1.14.1

package/dist/index.js

@@ -1,64 +1,67 @@
-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-8LVUdM5S.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";
+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-DELNnWid.js";
+import { createStepRepeat as f, editEnd as p } from "@weasel-js/headless";
+import { createEmitter as m } from "@weasel-js/registry";
+import { createViewportLayer as h, pathFromD as g, screenToWorld as _, textCommandFromRuns as v, viewToTransform as y } from "@weasel-js/core";
+import { clamp as b, identity as x, mat3 as S, multiply as C, pathFromD as w, rotateAboutPoint as T, roundRectPath as E, scale as ee, translate as te } from "@weasel-js/geom";
+import { tryNormalizeHex as D } from "@weasel-js/paint";
+import { expandVars as O, parseBoxShadow as ne, resolveCurrentColor as k, tokenPx as re } from "@weasel-js/theme";
+import { faceGeneration as A, metricsOf as ie, resolveFontVariant as ae } from "@weasel-js/font";
+import { attachMenuDismiss as oe, createMenuController as se, menuNumberCanStep as j, menuNumberText as ce, placeMenu as le, placeMenuUnder as ue, placeSubmenu as de, withLinks as fe } from "@weasel-js/menu";
+import { formatShortcut as pe, isApplePlatform as me } from "@weasel-js/gestures";
+import { toIconRef as he } from "@weasel-js/icons";
+import { releaseImageSource as ge } from "@weasel-js/core/renderer";
+import { createLoupeModel as _e, loupeInnerView as ve, loupeInnerView as M } 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 ye(e, t, n) {
+	return t.kind === "number" ? `${t.label}: ${ce(e.numberValue(t), t)}` : t.kind === "color" ? `${t.label}: ${t.value ?? "—"}` : t.kind === "text" ? `${t.label}: ${e.textValue(t) ?? "—"}` : t.kind === "submenu" && n?.(t) !== void 0 ? `${t.label}: ${n(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 {
+function N(e, t, n) {
+	let r = e.stack(), i = t === r.length - 1;
+	return e.entriesAt(t).map((a, o) => {
+		if (a.kind === "separator") return {
 			role: "separator",
-			key: i.key
+			key: a.key
 		};
-		let o = i.kind === "item" && i.checked !== void 0, s = i.kind === "submenu" && n[t] === a && n.length > t + 1;
+		let s = a.kind === "item" && a.checked !== void 0, c = a.kind === "submenu" && r[t] === o && r.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: s ? "menuitemcheckbox" : "menuitem",
+			key: a.key,
+			label: ye(e, a, n),
+			...i && r[t] === o ? { active: !0 } : {},
+			...a.kind === "item" && a.checked !== void 0 ? { checked: a.checked } : {},
+			...a.disabled || a.kind === "color" ? { disabled: !0 } : {},
+			...a.kind === "submenu" ? { expanded: c } : {},
+			...c ? { children: [{
 				role: "menu",
 				key: "menu",
-				label: i.label,
-				children: I(e, t + 1)
+				label: a.label,
+				children: N(e, t + 1, n)
 			}] } : {}
 		};
 	});
 }
-function de(e) {
+function be(e, t) {
 	return {
 		role: "menu",
 		key: "menu",
 		label: "Context menu",
-		children: I(e, 0)
+		children: N(e, 0, t)
 	};
 }
 //#endregion
 //#region src/boxShadow.ts
-var fe = 7, pe = .16, L = (e) => ({ paint: {
+var xe = 7, Se = .16, P = (e) => ({ paint: {
 	kind: "solid",
 	color: e
 } });
-function R(e, t, n, r, i) {
+function Ce(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) {
+function we(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;
+		return i > 0 && a > 0 ? E(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);
@@ -67,45 +70,45 @@ function me(e, t, n, r) {
 			children: e ? [{
 				kind: "path",
 				path: e,
-				fill: L(r)
+				fill: P(r)
 			}] : []
 		};
 	}
 	let a = [], o = n.blur / 6;
-	for (let e = 0; e < fe; e++) {
+	for (let e = 0; e < xe; e++) {
 		let t = i(n.spread + n.blur / 2 - e * o);
 		t && a.push({
 			kind: "path",
 			path: t,
-			fill: L(r)
+			fill: P(r)
 		});
 	}
 	return {
 		kind: "group",
-		alpha: pe,
+		alpha: Se,
 		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}`);
+function Te(e, t, n, r) {
+	let i = Math.abs(n.x) + Math.abs(n.y) + Math.abs(n.spread) + 1, a = Ce(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 = w(`${Ce(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),
+		clip: E(e.x, e.y, e.w, e.h, t),
 		children: [{
 			kind: "path",
 			path: o.kind === "polygon" ? {
 				...o,
 				fillRule: "evenodd"
 			} : o,
-			fill: L(r)
+			fill: P(r)
 		}]
 	};
 }
-function z(e, t, n, r, i = e) {
+function Ee(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));
+		let n = k(c.color, r);
+		c.inset ? o.push(Te(i, s, c, n)) : a.push(we(e, t, c, n));
 	}
 	return {
 		under: a,
@@ -114,13 +117,13 @@ function z(e, t, n, r, i = e) {
 }
 //#endregion
 //#region src/glyph.ts
-var ge = {
+var De = {
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, _e = /* @__PURE__ */ new Set([
+}, Oe = /* @__PURE__ */ new Set([
 	"fill",
 	"fill-opacity",
 	"fill-rule",
@@ -131,7 +134,7 @@ var ge = {
 	"stroke-linejoin",
 	"stroke-dasharray"
 ]);
-function* ve(e) {
+function* ke(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];
@@ -143,33 +146,33 @@ function* ve(e) {
 		};
 	}
 }
-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();
+var F = (e, t = 0) => e === void 0 || e === "" ? t : Number(e), I = (e) => e.trim().split(/[\s,]+/).filter((e) => e !== "").map(Number);
+function Ae(e) {
+	let t = x();
 	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));
+		let e = I(r), i = n === "translate" ? te(e[0] ?? 0, e[1] ?? 0) : n === "scale" ? ee(e[0] ?? 1, e[1] ?? e[0] ?? 1) : n === "rotate" ? T(e[1] ?? 0, e[2] ?? 0, (e[0] ?? 0) * Math.PI / 180) : n === "matrix" && e.length === 6 ? e : null;
+		i && (t = C(t, i));
 	}
 	return t;
 }
-function be(e, t, n, r, i, a) {
+function je(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) {
+var Me = (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 Ne(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);
+			let e = F(t.width), n = F(t.height), r = Math.min(F(t.rx, F(t.ry)), e / 2), i = Math.min(F(t.ry, F(t.rx)), n / 2);
+			return je(F(t.x), F(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 "circle": return Me(F(t.cx), F(t.cy), F(t.r), F(t.r));
+		case "ellipse": return Me(F(t.cx), F(t.cy), F(t.rx), F(t.ry));
+		case "line": return `M ${F(t.x1)} ${F(t.y1)} L ${F(t.x2)} ${F(t.y2)}`;
 		case "polygon":
 		case "polyline": {
-			let n = V(t.points ?? "");
+			let n = I(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]}`);
@@ -178,9 +181,9 @@ function xe(e, t) {
 		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);
+var Pe = (e, t) => e === void 0 || e === "none" ? null : /^currentcolor$/i.test(e) ? t : e;
+function Fe(e, t, n) {
+	let r = [], i = Pe(t.fill, n);
 	if (i) {
 		let n = {
 			kind: "path",
@@ -192,16 +195,16 @@ function Se(e, t, n) {
 				kind: "solid",
 				color: i
 			} }
-		}, a = B(t["fill-opacity"], 1);
+		}, a = F(t["fill-opacity"], 1);
 		r.push(a < 1 ? {
 			kind: "group",
 			alpha: a,
 			children: [n]
 		} : n);
 	}
-	let a = U(t.stroke, n);
+	let a = Pe(t.stroke, n);
 	if (a) {
-		let n = t["stroke-dasharray"] && t["stroke-dasharray"] !== "none" ? V(t["stroke-dasharray"]) : void 0, i = {
+		let n = t["stroke-dasharray"] && t["stroke-dasharray"] !== "none" ? I(t["stroke-dasharray"]) : void 0, i = {
 			kind: "path",
 			path: e,
 			stroke: {
@@ -209,12 +212,12 @@ function Se(e, t, n) {
 					kind: "solid",
 					color: a
 				},
-				width: B(t["stroke-width"], 1),
+				width: F(t["stroke-width"], 1),
 				cap: t["stroke-linecap"],
 				join: t["stroke-linejoin"],
 				...n ? { dash: n } : {}
 			}
-		}, o = B(t["stroke-opacity"], 1);
+		}, o = F(t["stroke-opacity"], 1);
 		r.push(o < 1 ? {
 			kind: "group",
 			alpha: o,
@@ -223,32 +226,32 @@ function Se(e, t, n) {
 	}
 	return r;
 }
-function W(e, t) {
+function Ie(e, t) {
 	let n = { ...t };
-	for (let [t, r] of Object.entries(e.attrs)) _e.has(t) && (n[t] = r);
+	for (let [t, r] of Object.entries(e.attrs)) Oe.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 = {
+	}, a = Ae(e.attrs.transform);
+	return a.some((e, t) => e !== x()[t]) && (i.transform = S.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)
+		x: F(e.attrs.x),
+		y: F(e.attrs.y),
+		width: F(e.attrs.width),
+		height: F(e.attrs.height)
 	}), {
 		attrs: n,
 		children: r,
 		group: i
 	};
 }
-function G(e, t) {
+function Le(e, t) {
 	let n = t.size / 20, r = {
-		attrs: ge,
+		attrs: De,
 		children: [],
 		group: {
 			kind: "group",
-			transform: y.fromAffine([
+			transform: S.fromAffine([
 				n,
 				0,
 				0,
@@ -261,7 +264,7 @@ function G(e, t) {
 	};
 	r.group.children = r.children;
 	let i = [r], a = 0;
-	for (let n of ve(e.body)) {
+	for (let n of ke(e.body)) {
 		let e = i.at(-1);
 		if (a > 0 || n.name === "defs" || n.name === "clipPath") {
 			n.selfClosing || (a += n.close ? -1 : 1);
@@ -272,13 +275,13 @@ function G(e, t) {
 			continue;
 		}
 		if (n.name === "g" || n.name === "svg") {
-			let t = W(n, e.attrs);
+			let t = Ie(n, e.attrs);
 			e.children.push(t.group), n.selfClosing || i.push(t);
 			continue;
 		}
-		let r = xe(n.name, n.attrs);
+		let r = Ne(n.name, n.attrs);
 		if (r === void 0) continue;
-		let o = W(n, e.attrs), s = Se(x(r), o.attrs, t.color);
+		let o = Ie(n, e.attrs), s = Fe(w(r), o.attrs, t.color);
 		o.group.transform ? e.children.push({
 			kind: "group",
 			transform: o.group.transform,
@@ -288,8 +291,143 @@ function G(e, t) {
 	return [r.group];
 }
 //#endregion
+//#region src/menu/textEdit.ts
+function Re(e, t = me()) {
+	let n = e.shiftKey;
+	return t ? {
+		shift: n,
+		mod: e.ctrlKey || e.metaKey,
+		line: e.metaKey,
+		word: e.altKey
+	} : e.ctrlKey && e.altKey ? { shift: n } : {
+		shift: n,
+		mod: e.ctrlKey || e.metaKey,
+		word: e.ctrlKey
+	};
+}
+var ze = /[\p{L}\p{N}\p{M}_]/u;
+function L(e, t, n) {
+	let r = (t) => ze.test(e[n < 0 ? t - 1 : t] ?? ""), i = (t) => n < 0 ? t > 0 : t < e.length, a = t;
+	for (; i(a) && !r(a);) a += n;
+	for (; i(a) && r(a);) a += n;
+	return a;
+}
+function Be(e, t) {
+	let n = Array.from(t).length;
+	return {
+		entry: e,
+		draft: t,
+		caret: n,
+		anchor: n
+	};
+}
+function R(e) {
+	return e.caret < e.anchor ? [e.caret, e.anchor] : [e.anchor, e.caret];
+}
+function z(e, t, n, r) {
+	let i = Array.from(e.draft), a = t + Array.from(r).length, { preedit: o, ...s } = e;
+	return {
+		...s,
+		draft: [
+			...i.slice(0, t),
+			r,
+			...i.slice(n)
+		].join(""),
+		caret: a,
+		anchor: a
+	};
+}
+function Ve(e, t) {
+	let { preedit: n, ...r } = e;
+	return t ? {
+		...r,
+		preedit: t
+	} : r;
+}
+function B(e, t) {
+	let [n, r] = R(e);
+	return z(e, n, r, t);
+}
+function V(e) {
+	if (!e.preedit) return { edit: e };
+	let [t] = R(e), n = B(e, e.preedit);
+	return {
+		edit: n,
+		preedit: [t, n.caret]
+	};
+}
+function H(e, t, n) {
+	let r = Array.from(e.draft).length, i = Math.max(0, Math.min(r, t));
+	return {
+		...e,
+		caret: i,
+		anchor: n ? e.anchor : i
+	};
+}
+function He(e, t, n) {
+	let r = Array.from(e.draft).length, [i, a] = R(e);
+	if (t === "Home" || t === "ArrowLeft" && n.line) return 0;
+	if (t === "End" || t === "ArrowRight" && n.line) return r;
+	if (n.word && (t === "ArrowLeft" || t === "ArrowRight")) {
+		let r = t === "ArrowLeft" ? -1 : 1, o = n.shift ? e.caret : r < 0 ? i : a;
+		return L(Array.from(e.draft), o, r);
+	}
+	if (t === "ArrowLeft") return !n.shift && i !== a ? i : e.caret - 1;
+	if (t === "ArrowRight") return !n.shift && i !== a ? a : e.caret + 1;
+}
+function Ue(e, t, n = {}) {
+	let r = p({
+		key: t,
+		shift: n.shift === !0
+	});
+	if (r) return r === "commit" ? {
+		edit: null,
+		commit: e.draft
+	} : { edit: null };
+	let i = He(e, t, n);
+	if (i !== void 0) return { edit: H(e, i, n.shift === !0) };
+	let [a, o] = R(e);
+	if ((t === "Backspace" || t === "Delete") && a !== o) return { edit: z(e, a, o, "") };
+	let s = Array.from(e.draft);
+	return t === "Backspace" ? { edit: z(e, n.line ? 0 : n.word ? L(s, a, -1) : Math.max(0, a - 1), a, "") } : t === "Delete" ? { edit: z(e, a, n.line ? s.length : n.word ? L(s, a, 1) : a + 1, "") } : n.mod ? { edit: t.toLowerCase() === "a" ? {
+		...e,
+		anchor: 0,
+		caret: s.length
+	} : e } : Array.from(t).length === 1 ? { edit: z(e, a, o, t) } : { edit: e };
+}
+function We(e, t) {
+	let n = null, r = (r) => {
+		let i = n;
+		n = null, i && r !== void 0 && e.setText(i.entry, r), t();
+	};
+	return {
+		current: () => n,
+		start(r) {
+			r?.kind !== "text" || r.disabled || n?.entry === r || (n = Be(r, e.textValue(r) ?? ""), t());
+		},
+		place(e, r) {
+			let i = n && n.entry === e ? r(n.draft) : void 0;
+			n && i !== void 0 && (n = H(n, i, !1), t());
+		},
+		leave(e) {
+			n && n.entry !== e && r(p("blur") === "commit" ? n.draft : void 0);
+		},
+		compose(e) {
+			n && (n.preedit ?? "") !== e && (n = Ve(n, e), t());
+		},
+		insert(e) {
+			n && (n = B(n, e), t());
+		},
+		key(e, i = {}) {
+			if (!n) return !1;
+			let a = Ue(n, e, i);
+			return a.edit ? (n = a.edit, t()) : r(a.commit), !0;
+		}
+	};
+}
+//#endregion
 //#region src/menu/valueRows.ts
-function K(e, t) {
+function U(e, t) {
 	let n = t.rowHeight, r = e - t.padX;
 	return {
 		minus: {
@@ -307,21 +445,21 @@ function K(e, t) {
 		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;
+function Ge(e, t, n) {
+	let { minus: r, plus: i } = U(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;
+function Ke(e, t, n) {
+	if (e.kind === "number") return t.padX + U(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);
+	if (e.kind === "text") return t.padX + Math.max(n(e.value ?? "—", t.fontSize), t.fontSize * 7);
 }
-var q = (e) => ({ paint: {
+var W = (e) => ({ paint: {
 	kind: "solid",
 	color: e
-} }), J = (e, t) => ({
+} }), G = (e, t) => ({
 	kind: "path",
-	path: p(e),
+	path: g(e),
 	stroke: {
 		paint: {
 			kind: "solid",
@@ -331,63 +469,115 @@ var q = (e) => ({ paint: {
 		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);
+function qe(e, t, n, r, i, a) {
+	let { minus: o, value: s, plus: c } = U(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 && !j(n, r, -1), p = r !== void 0 && !j(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))
+		G(`M ${d(o) - 4} ${l} L ${d(o) + 4} ${l}`, u(!f)),
+		v(e.x + s.x, e.y + t.y, [{
+			text: ce(r, n),
+			fill: W(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))
+		G(`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, [{
+function Je(e, t, n, r, i, a = "live") {
+	return [v(e.x + r.padX, e.y + t.y, [{
 		text: n ?? "—",
-		fill: q(i.muted)
+		fill: W(a === "off" ? i.muted : i.fg)
 	}], {
 		...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
+var Ye = (e, t) => e - t.padX - 3;
+function Xe(e, t, n, r, i) {
+	let a = Array.from(e), o = K(e, t, n, i);
+	if (r < o(0) - n.padX) return;
+	let s = 0;
+	for (let e = 1; e <= a.length; e++) Math.abs(o(e) - r) < Math.abs(o(s) - r) && (s = e);
+	return s;
+}
+function K(e, t, n, r) {
+	let i = Ye(t, n), a = Array.from(e);
+	return (e) => i - r(a.slice(e).join(""));
+}
+function Ze(e, t, n, r) {
+	let i = V(e).edit;
+	return K(i.draft, t, n, r)(i.caret) + 1;
+}
+function Qe(e, t, n, r, i, a, o) {
+	let { edit: s, preedit: c } = V(n), l = K(s.draft, e.w, r, o), u = (t) => e.x + l(t), d = e.x + Ye(e.w, r), f = i.font.fontSize * .6, p = e.y + t.y + t.h / 2, m = [], [h, g] = R(s);
+	h !== g && m.push({
+		kind: "path",
+		path: {
+			kind: "rect",
+			x: u(h),
+			y: p - f,
+			width: u(g) - u(h),
+			height: f * 2
+		},
+		fill: W(a)
+	}), m.push(v(e.x + r.padX, e.y + t.y, [{
+		text: s.draft,
+		fill: W(i.fg)
+	}], {
+		...i.font,
+		align: "right"
+	}, void 0, t.h, "center", void 0, d - e.x - r.padX)), c && m.push(G(`M ${u(c[0])} ${p + f} L ${u(c[1])} ${p + f}`, i.fg));
+	let _ = u(s.caret) + 1;
+	return m.push(G(`M ${_} ${p - f} L ${_} ${p + f}`, i.fg)), m;
+}
+function $e(e, t, n, r, i, a = 1) {
+	return {
+		kind: "path",
+		path: {
+			kind: "rect",
+			x: e.x + r.padX + (r.rowHeight - 12) / 2,
+			y: e.y + t.y + (t.h - 12) / 2,
+			width: 12,
+			height: 12
+		},
+		fill: W(n),
+		stroke: {
+			paint: {
+				kind: "solid",
+				color: i
 			},
-			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, [{
+			width: a
+		}
+	};
+}
+function et(e, t, n, r, i) {
+	let a = n.value === void 0 ? [] : [$e(e, t, n.value, r, i.border)];
+	return a.push(v(e.x + r.padX, e.y + t.y, [{
 		text: n.value ?? "—",
-		fill: q(i.muted)
+		fill: W(i.muted)
 	}], {
 		...i.font,
 		align: "right"
 	}, void 0, t.h, "center", void 0, e.w - r.padX * 2)), a;
 }
 //#endregion
+//#region src/menu/measureLabel.ts
+function tt(e, t) {
+	return e.length * t * .55;
+}
+function q(e, t, n) {
+	let r = ie(ae(n, 400, "normal"));
+	if (!r) return tt(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/drawPanel.ts
-var Y = {
+var nt = {
 	rowHeight: 24,
 	padX: 8,
 	padY: 4,
@@ -395,7 +585,7 @@ var Y = {
 	minWidth: 180,
 	fontSize: 13
 };
-function X(e, t) {
+function J(e, t) {
 	let n = t.padY;
 	return e.map((e) => {
 		let r = e.kind === "separator" ? t.separatorHeight : t.rowHeight, i = {
@@ -405,13 +595,13 @@ function X(e, t) {
 		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) => {
+var rt = (e) => e.kind === "item" ? pe(e.shortcut) : void 0;
+function it(e, t, n) {
+	let r = J(e, t).at(-1), i = Math.max(0, ...e.map((e) => {
 		if (e.kind === "separator") return 0;
-		let r = we(e, t, n);
+		let r = Ke(e, t, n);
 		if (r !== void 0) return n(e.label, t.fontSize) + r;
-		let i = Oe(e);
+		let i = rt(e);
 		return n(e.label, t.fontSize) + Math.max(t.rowHeight, i ? t.padX + n(i, t.fontSize) : 0);
 	}));
 	return {
@@ -419,10 +609,10 @@ function ke(e, t, n) {
 		h: (r ? r.y + r.h : 0) + t.padY
 	};
 }
-var Z = (e) => ({ paint: {
+var Y = (e) => ({ paint: {
 	kind: "solid",
 	color: e
-} }), Ae = (e, t, n, r, i) => ({
+} }), at = (e, t, n, r, i) => ({
 	kind: "path",
 	path: {
 		kind: "rect",
@@ -431,12 +621,12 @@ var Z = (e) => ({ paint: {
 		width: n,
 		height: r
 	},
-	fill: Z(i)
+	fill: Y(i)
 });
-function je(e, t, n) {
+function ot(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}`),
+		path: g(`M ${e - 3 / 2} ${t - 3} L ${e + 3 / 2} ${t} L ${e - 3 / 2} ${t + 3}`),
 		stroke: {
 			paint: {
 				kind: "solid",
@@ -447,10 +637,10 @@ function je(e, t, n) {
 		}
 	};
 }
-function Me(e, t, n) {
+function st(e, t, n) {
 	return {
 		kind: "path",
-		path: p(`M ${e - 4} ${t} L ${e - 1.5} ${t + 2.5} L ${e + 4} ${t - 3}`),
+		path: g(`M ${e - 4} ${t} L ${e - 1.5} ${t + 2.5} L ${e + 4} ${t - 3}`),
 		stroke: {
 			paint: {
 				kind: "solid",
@@ -462,12 +652,15 @@ function Me(e, t, n) {
 		}
 	};
 }
-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 = {
+var X = 16, ct = "var(--wzl-bevel-raised, 0 8px 24px var(--wzl-shadow))", lt = {
+	number: (e) => e.value,
+	text: (e) => e.value
+};
+function ut(e, t, n, r, i, a, o = lt) {
+	let s = e.tokens, c = s["--wzl-fg"], l = k(s["--wzl-fg-muted"], c), u = re("--wzl-radius-md", s), d = {
 		fontFamily: e.defaultFont,
 		fontSize: i.fontSize
-	}, f = z(t, u, D(E(Ne, s)), c, {
+	}, f = Ee(t, u, ne(O(ct, s)), c, {
 		x: t.x + 1,
 		y: t.y + 1,
 		w: t.w - 2,
@@ -476,8 +669,8 @@ function Pe(e, t, n, r, i, a, o = (e) => e.value) {
 		...f.under,
 		{
 			kind: "path",
-			path: C(t.x, t.y, t.w, t.h, u),
-			fill: Z(s["--wzl-surface-popover"]),
+			path: E(t.x, t.y, t.w, t.h, u),
+			fill: Y(s["--wzl-surface-popover"]),
 			stroke: {
 				paint: {
 					kind: "solid",
@@ -487,65 +680,57 @@ function Pe(e, t, n, r, i, a, o = (e) => e.value) {
 			}
 		},
 		...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"]));
+	], m = J(n, i), h = o.measure ?? q, g = s["--wzl-accent-soft"] ?? s["--wzl-surface-pressed"] ?? l;
+	return n.forEach((n, u) => {
+		let f = m[u];
+		if (n.kind === "separator") {
+			p.push(at(t.x + i.padX, t.y + f.y + Math.floor(f.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
+		u === r && p.push(at(t.x + 2, t.y + f.y, t.w - 4, f.h, s["--wzl-surface-hover"]));
+		let _ = n.disabled || n.kind === "color" ? l : c;
+		p.push(v(t.x + i.padX + i.rowHeight, t.y + f.y, [{
+			text: n.label,
+			fill: Y(_)
+		}], d, void 0, f.h, "center"));
+		let y = t.x + i.padX + i.rowHeight / 2, b = t.y + f.y + f.h / 2, x = n.kind !== "color" && typeof n.icon == "string" ? he(n.icon) : void 0, S = x ? a?.get(x) : void 0, C = o.swatch?.(n);
+		if (C !== void 0) {
+			let e = n.kind === "item" && n.checked;
+			p.push($e(t, f, C, i, e ? c : s["--wzl-border"], e ? 2 : 1));
+		} else n.kind === "item" && n.checked ? p.push(st(y, b, _)) : S && p.push(...Le(S, {
+			x: y - X / 2,
+			y: b - X / 2,
+			size: X,
+			color: _
 		}));
-		let b = Oe(e);
-		b && p.push(h(t.x + i.padX, t.y + u.y, [{
-			text: b,
-			fill: Z(l)
+		let w = rt(n);
+		w && p.push(v(t.x + i.padX, t.y + f.y, [{
+			text: w,
+			fill: Y(l)
 		}], {
 			...d,
 			align: "right"
-		}, void 0, u.h, "center", void 0, t.w - i.padX * 2));
-		let x = {
+		}, void 0, f.h, "center", void 0, t.w - i.padX * 2));
+		let T = {
 			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));
+		if (n.kind === "number" && p.push(...qe(t, f, n, o.number(n), i, T)), n.kind === "color" && p.push(...et(t, f, n, i, T)), n.kind === "text") {
+			let r = o.editing?.entry === n ? o.editing : void 0;
+			p.push(...r ? Qe(t, f, r, i, T, g, (t) => h(t, i.fontSize, e.defaultFont)) : Je(t, f, o.text(n), i, T, n.disabled ? "off" : "live"));
+		}
+		n.kind === "submenu" && p.push(ot(t.x + t.w - i.padX - i.rowHeight / 2, t.y + f.y + f.h / 2, _));
 	}), p;
 }
-function Fe(e, t, n) {
-	let r = X(e, t).findIndex((e) => n >= e.y && n < e.y + e.h);
+function Z(e, t, n) {
+	let r = J(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) {
+function dt(e) {
 	let t = [], n = null;
 	return (r, i) => {
 		let a = A();
@@ -566,11 +751,11 @@ function Re(e) {
 				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);
+			let p = it(a, l, (t, n) => i === null ? tt(t, n) : e.measure(t, n, i)), m;
+			if (n === 0) m = e.under ? ue(p, e.under, c) : le(p, e.anchor, c);
 			else {
-				let e = d[n - 1].rect, t = X(r.entriesAt(n - 1), l)[o];
-				m = re(p, {
+				let e = d[n - 1].rect, t = J(r.entriesAt(n - 1), l)[o];
+				m = de(p, {
 					x: e.x,
 					y: e.y + t.y,
 					w: e.w,
@@ -593,15 +778,122 @@ function Re(e) {
 	};
 }
 //#endregion
+//#region src/menu/colorPicker.ts
+var ft = [
+	"#000000",
+	"#595959",
+	"#a6a6a6",
+	"#ffffff",
+	"#e53935",
+	"#fb8c00",
+	"#fdd835",
+	"#43a047",
+	"#00acc1",
+	"#1e88e5",
+	"#8e24aa",
+	"#d81b60"
+];
+function Q(e, t, n) {
+	let r = D(e);
+	if (r !== void 0) return t ? r.length === 9 ? r : `${r}${n && D(n, "rgba")?.slice(7) || "ff"}` : r.slice(0, 7);
+}
+function pt(e, t, n) {
+	let r = /* @__PURE__ */ new Map(), i = (e) => {
+		let i = () => n().colorValue(e), a = e.alpha === !0, o = t.map((t) => {
+			let o = Q(t, a, e.value) ?? t, s = {
+				kind: "item",
+				key: `${e.key}/${t}`,
+				label: t,
+				keepOpen: !0,
+				get checked() {
+					return Q(i() ?? "", a) === Q(o, a);
+				},
+				run: () => n().setColor(e, Q(t, a, i()) ?? t)
+			};
+			return r.set(s, () => o), s;
+		}), s = {
+			kind: "text",
+			key: `${e.key}/#`,
+			label: "Hex",
+			get value() {
+				return i();
+			},
+			set: (t) => {
+				let r = Q(t, a, i());
+				r !== void 0 && n().setColor(e, r);
+			}
+		}, c = {
+			kind: "submenu",
+			key: e.key,
+			label: e.label,
+			...e.access ? { access: e.access } : {},
+			entries: [
+				...o,
+				{
+					kind: "separator",
+					key: `${e.key}/|`
+				},
+				s
+			]
+		};
+		return r.set(c, i), c;
+	}, a = (e) => e.map((e) => e.kind === "submenu" ? {
+		...e,
+		entries: a(e.entries)
+	} : e.kind === "color" && e.set && !e.disabled ? i(e) : e);
+	return {
+		entries: a(e),
+		swatchOf: (e) => r.get(e)?.()
+	};
+}
+//#endregion
+//#region src/menu/chipRepeat.ts
+function $(e, t, n) {
+	for (let r = e.length - 1; r >= 0; r--) {
+		let i = e[r];
+		if (t >= i.x && t < i.x + i.w && n >= i.y && n < i.y + i.h) return r;
+	}
+	return -1;
+}
+function mt(e, t, n, r, i) {
+	let a = $(t, r, i);
+	if (a < 0) return null;
+	let o = t[a], s = e.entriesAt(a), c = Z(s, n, i - o.y), l = c === null ? void 0 : s[c];
+	if (l?.kind !== "number" || l.disabled) return null;
+	let u = Ge(o.w, n, r - o.x);
+	return u === null ? null : {
+		entry: l,
+		dir: u
+	};
+}
+function ht(e, t, n) {
+	let r = (t) => e.numberValue(t) ?? t.min ?? 0, i = f(({ entry: t, dir: n }) => {
+		e.spin(t, n > 0 ? "ArrowUp" : "ArrowDown");
+	}, ({ entry: e, dir: t }) => e.disabled === !0 || !j(e, r(e), t), n);
+	return {
+		press(e, n) {
+			let r = t(e, n);
+			r && i.start(r);
+		},
+		follow(e) {
+			let n = i.held();
+			if (!n) return;
+			let r = e && t(e.x, e.y);
+			(r?.entry !== n.entry || r.dir !== n.dir) && i.stop();
+		},
+		stop: i.stop
+	};
+}
+//#endregion
 //#region src/menu/menuWidget.ts
-var ze = [
+var gt = [
 	"pointer",
 	"doubleClick",
 	"contextMenu",
 	"longPress",
 	"wheel"
 ];
-function Be(e, t) {
+function _t(e, t) {
 	let n = t({
 		x: e.x,
 		y: e.y
@@ -616,100 +908,139 @@ function Be(e, t) {
 		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)),
+function vt(e) {
+	let t = Math.min(...e.map((e) => e.x)), n = Math.min(...e.map((e) => e.y)), r = Math.max(...e.map((e) => e.x + e.w)), i = Math.max(...e.map((e) => e.y + e.h));
+	return {
+		x: t,
+		y: n,
+		w: r - t,
+		h: i - n
+	};
+}
+function yt(e, t, n, r, i, a) {
+	return {
+		read: () => {
+			let a = t.current(), o = n();
+			for (let t = 0; a && t < o.length; t++) {
+				let n = e.entriesAt(t), s = n.indexOf(a.entry);
+				if (s < 0) continue;
+				let c = o[t], l = J(n, r)[s], u = c.x + Ze(a, c.w, r, i);
+				return {
+					rect: {
+						x: u,
+						y: c.y + l.y,
+						w: Math.max(1, c.x + c.w - u),
+						h: l.h
+					},
+					label: a.entry.label
+				};
+			}
+			return null;
+		},
+		subscribe: a,
+		compose: t.compose,
+		insert: t.insert
+	};
+}
+function bt(e) {
+	let t = e.metrics ?? nt, r = e.measure ?? q, i = m(), a = n(() => {
+		e.onChange(), i.emit();
+	}), o = pt(fe(e.open.entries, (e) => window.location.assign(e)), e.palette ?? ft, () => s), s = se({
+		entries: o.entries,
 		highlightFirst: e.open.source === "keyboard",
 		onClose: e.close
-	}), a = Re({
+	}), c = dt({
 		anchor: e.toCanvas(e.open.client),
-		...e.open.under ? { under: Be(e.open.under, e.toCanvas) } : {},
+		...e.open.under ? { under: _t(e.open.under, e.toCanvas) } : {},
 		canvasSize: e.canvasSize,
-		measure: e.measure ?? Le,
+		measure: r,
 		metrics: t
-	}), o = null, s = a(i, o), c = !1, l = !1, u = null;
-	i.subscribe(() => {
-		s = a(i, o), r.changed();
+	}), l = null, u = c(s, l), d = !1, f = !1, p = null, h = We(s, a.changed), g = ht(s, (e, n) => mt(s, u, t, e, n), e.repeat);
+	s.subscribe(() => {
+		u = c(s, l), a.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) => {
+	let _ = (e) => {
+		p !== null && p !== e && s.hover(p, null), p = e;
+	}, v = (e) => {
 		if (e.type === "hoverleave") {
-			p(null);
+			_(null);
 			return;
 		}
 		if (e.type === "cancel") {
-			l = !1;
+			f = !1, g.stop();
 			return;
 		}
 		if (e.type === "down") {
-			l = !0;
+			f = !0, g.press(e.x, e.y);
 			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, {
+		g.follow(e.type === "up" ? null : e);
+		let n = $(u, e.x, e.y), i = e.type === "up" && f;
+		if (e.type === "up" && (f = !1), i || _(n < 0 ? null : n), n < 0) return;
+		let a = s.entriesAt(n), o = Z(a, t, e.y - u[n].y);
+		if (!i) s.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.leave(a[o]), s.press(n, o), h.start(a[o]);
+			let i = a[o], { w: c } = u[n], d = e.x - u[n].x;
+			h.place(i, (e) => Xe(e, c, t, d, (e) => r(e, t.fontSize, l ?? "")));
 		}
-	}, h = (e) => e.type === "keydown" && (!e.ctrlKey && !e.metaKey && !e.altKey && i.key(e.key), !0), g = {
-		read: () => de(i),
-		subscribe: i.subscribe
+	}, y = (e) => {
+		if (e.type !== "keydown") return !1;
+		if (h.key(e.key, Re(e))) return !0;
+		let t = s.stack().length - 1, n = s.stack()[t], r = n == null ? void 0 : s.entriesAt(t)[n];
+		return e.key === "Enter" && r?.kind === "text" ? h.start(r) : !e.ctrlKey && !e.metaKey && !e.altKey && s.key(e.key), !0;
+	}, b = {
+		read: () => be(s, o.swatchOf),
+		subscribe: s.subscribe
 	};
 	return {
 		id: `weasel-menu-${e.open.seq}`,
 		get bounds() {
-			return f();
+			return vt(u);
 		},
 		hidden: !1,
 		get disposed() {
-			return c;
+			return d;
 		},
-		claims: ze,
+		claims: gt,
 		focusable: !0,
 		focusRing: !1,
 		accessibleName: "Context menu",
-		accessibleTree: g,
+		accessibleTree: b,
+		textInput: yt(s, h, () => u, t, (e) => r(e, t.fontSize, l ?? ""), i.subscribe),
 		deps: (t) => [
-			...r.deps(),
+			...a.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,
+		draw: (n) => {
+			l = n.defaultFont, u = c(s, l);
+			let i = {
+				number: s.numberValue,
+				text: s.textValue,
+				editing: h.current(),
+				swatch: o.swatchOf,
+				measure: r
+			};
+			return u.flatMap((r, a) => ut(n, r, s.entriesAt(a), s.stack()[a] ?? null, t, e.icons, i));
+		},
+		hitTest: (e, t) => $(u, e, t) >= 0,
 		cursorAt: () => "default",
-		onPointer: m,
-		onKey: h,
+		onPointer: v,
+		onKey: y,
 		dispose() {
-			c = !0, i.dispose();
+			h.leave(), g.stop(), d = !0, s.dispose();
 		}
 	};
 }
 //#endregion
 //#region src/menu/attachMenuHost.ts
-function He(e, t, n) {
+function xt(e, t, n) {
 	let r = null, i = {
 		widget: null,
 		visible: !1
@@ -733,7 +1064,7 @@ function He(e, t, n) {
 			c && o();
 			return;
 		}
-		let l = Ve({
+		let l = bt({
 			...n,
 			open: s,
 			close: () => {
@@ -742,28 +1073,29 @@ function He(e, t, n) {
 			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) => {
+	}, c = t.subscribe(s), l = e.subscribeFocus((e) => {
 		r && e !== r && t.close();
+	}), u = oe(window, {
+		press: !1,
+		outside: (e) => {
+			if (!r) return !1;
+			let t = n.toCanvas({
+				x: e.clientX,
+				y: e.clientY
+			});
+			return !r.hitTest(t.x, t.y);
+		},
+		close: () => {
+			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();
+	return s(), () => {
+		c(), l(), u(), a();
 	};
 }
 //#endregion
 //#region src/loupe/contentWatch.ts
-function Ue(e) {
+function St(e) {
 	let t = "", n = null;
 	return {
 		drew(e) {
@@ -780,12 +1112,12 @@ function Ue(e) {
 }
 //#endregion
 //#region src/loupe/pointerAim.ts
-var We = [
+var Ct = [
 	"pointerup",
 	"pointercancel",
 	"lostpointercapture"
 ];
-function Ge(e, t) {
+function wt(e, t) {
 	let n = !1, r = (t) => {
 		let n = e.getBoundingClientRect();
 		return {
@@ -800,16 +1132,16 @@ function Ge(e, t) {
 		n = !1;
 	};
 	e.addEventListener("pointermove", i), e.addEventListener("pointerdown", a);
-	for (let t of We) e.addEventListener(t, o);
+	for (let t of Ct) e.addEventListener(t, o);
 	return () => {
 		e.removeEventListener("pointermove", i), e.removeEventListener("pointerdown", a);
-		for (let t of We) e.removeEventListener(t, o);
+		for (let t of Ct) e.removeEventListener(t, o);
 	};
 }
 //#endregion
 //#region src/loupe/readback.ts
-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);
+function Tt(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 = b(s - Math.floor(a / 2), n.x, n.x + Math.max(0, n.width - a)), u = t - b(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++) {
@@ -820,7 +1152,7 @@ function Ke(e, t, n, r, i, a, o) {
 }
 //#endregion
 //#region src/loupe/createLoupe.ts
-var qe = (e, t) => ({
+var Et = (e, t) => ({
 	kind: "path",
 	path: {
 		kind: "rect",
@@ -833,42 +1165,42 @@ var qe = (e, t) => ({
 		kind: "solid",
 		color: t
 	} }
-}), $ = "weasel-loupe:lens", Je = {
+}), Dt = "weasel-loupe:lens", Ot = {
 	x: 0,
 	y: 0,
 	w: 0,
 	h: 0
 };
-function Ye(e, t, n, r, i) {
+function kt(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);
+		return M(n, t.view, r, i);
 	}
-	let a = m(e.x, e.y, g(n));
-	return F({
+	let a = _(e.x, e.y, y(n));
+	return M({
 		x: a[0],
 		y: a[1]
 	}, n, r, i);
 }
-function Xe(e) {
+function At(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 &&= (se(c), c.close(), null);
-	}, u = !1, d = !1, p = !1, m = !1, h = e.bounds ?? {
+		c &&= (ge(c), c.close(), null);
+	}, u = !1, d = !1, f = !1, p = !1, m = e.bounds ?? {
 		x: 24,
 		y: 24,
 		w: 220,
 		h: 200
-	}, 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`,
+	}, g = St(e.contentVersion ?? i?.getPaintedVersion), _ = !1, v = (e) => (g.drew(e.view), k.mode === "vector" ? C(e) : w(e)), y = (t) => e.background ?? t.tokens["--wzl-surface"], b = (e) => Et(e, y(e)), x = () => i?.viewAt?.(k.aim, { except: Dt }) ?? null, S = (e, t) => kt(k.aim, x(), e, t, k.factor), C = (t) => i ? s ? [b(t), ...s.draw(t.data, t.view, t.dims)] : [b(t)] : h({
+		id: `${D.id}:lens`,
 		label: "Loupe content",
 		source: e.source ?? [],
-		view: x(t.view, t.rect),
+		view: S(t.view, t.rect),
 		bounds: () => t.rect,
 		background: y(t)
-	}).draw(t.data, t.view, t.dims), C = (e) => {
+	}).draw(t.data, t.view, t.dims), w = (e) => {
 		let t = [b(e)];
 		return c && t.push({
 			kind: "image",
@@ -879,10 +1211,10 @@ function Xe(e) {
 			h: e.rect.h,
 			sampling: "nearest"
 		}), t;
-	}, w = () => {
-		p || j.mode !== "pixel" || (d = !0);
-	}, T = (t, r, a) => {
-		if (!m) return null;
+	}, T = () => {
+		f || k.mode !== "pixel" || (d = !0);
+	}, E = (t, r, a) => {
+		if (!p) return null;
 		let o = n.getContext("webgl2");
 		if (!o) return null;
 		let s = n.getBoundingClientRect();
@@ -898,12 +1230,12 @@ function Xe(e) {
 			width: n.width,
 			height: n.height
 		};
-		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)));
+		return Tt(o, n.height, u, t, c, r(c), a(c));
+	}, ee = () => {
+		if (f || k.mode !== "pixel") return;
+		let e = D.contentRect, t = E(k.aim, (t) => Math.max(1, Math.round(e.w * t / k.factor)), (t) => Math.max(1, Math.round(e.h * t / k.factor)));
 		t && (u = !0, createImageBitmap(t).then((e) => {
-			if (p) {
+			if (f) {
 				e.close();
 				return;
 			}
@@ -911,92 +1243,93 @@ function Xe(e) {
 		}).catch(() => {
 			u = !1, r();
 		}));
-	}, D = (e) => {
-		let t = T(e, () => 1, () => 1);
+	}, te = (e) => {
+		let t = E(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("");
-	}, O = t.window({
+	}, D = t.window({
 		id: "weasel-loupe",
-		x: h.x,
-		y: h.y,
-		w: h.w,
-		h: h.h,
+		x: m.x,
+		y: m.y,
+		w: m.w,
+		h: m.h,
 		title: e.title ?? "Loupe",
 		titlebar: e.titlebar,
 		content: v,
 		interior: a ? "pass" : "claim",
 		onResize: () => {
-			w();
+			T();
 		},
 		...a ? {} : { onContentClick: (e) => {
-			j.pick(e);
+			k.pick(e);
 		} },
 		...e.onClose ? { onClose: e.onClose } : {}
-	}), 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,
+	}), O = {
+		lens: () => D.contentRect,
+		covers: (e) => D.hitTest(e.x, e.y) || (D.passes?.(e.x, e.y) ?? !1),
+		sample: te,
+		hidden: () => D.hidden,
+		gone: () => D.disposed === !0,
 		changed: () => {
-			w(), r();
+			T(), r();
 		},
 		subscribeFrame: t.subscribeFrame
-	}, A = t.subscribeFrame(() => {
-		m = !0, (g.changed() || _) && (_ = !1, w(), j.resample()), d && !u && (d = !1, E());
-	}), j = ce({
-		surface: k,
+	}, ne = t.subscribeFrame(() => {
+		p = !0, (g.changed() || _) && (_ = !1, T(), k.resample()), d && !u && (d = !1, ee());
+	}), k = _e({
+		surface: O,
 		...e.mode ? { mode: e.mode } : {},
 		...e.factor === void 0 ? {} : { factor: e.factor },
 		...e.onColorChange ? { onColorChange: e.onColorChange } : {},
 		...e.onPick ? { onPick: e.onPick } : {},
-		onDispose: () => N()
+		onDispose: () => A()
 	});
 	i && (s = i.addView({
-		id: $,
+		id: Dt,
 		label: "Loupe",
-		bounds: () => O.hidden ? Je : O.contentRect,
-		view: (e) => x(e, O.contentRect),
+		bounds: () => D.hidden ? Ot : D.contentRect,
+		view: (e) => S(e, D.contentRect),
 		paint: !1,
 		interactive: a,
+		follows: () => x()?.id ?? null,
 		...e.source ? { layers: () => e.source } : {}
 	}));
-	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();
+	let re = wt(o, {
+		aimAt: (e) => k.aimAt(e),
+		holds: (e) => a && O.covers(e)
+	}), A = () => {
+		f = !0, ne(), re(), s?.remove(), s = null, l();
 	};
 	return {
-		window: O,
+		window: D,
 		get mode() {
-			return j.mode;
+			return k.mode;
 		},
 		get factor() {
-			return j.factor;
+			return k.factor;
 		},
 		get aim() {
-			return j.aim;
+			return k.aim;
 		},
 		get color() {
-			return j.color;
+			return k.color;
 		},
-		setMode: j.setMode,
-		setFactor: j.setFactor,
-		aimAt: j.aimAt,
-		pick: j.pick,
+		setMode: k.setMode,
+		setFactor: k.setFactor,
+		aimAt: k.aimAt,
+		pick: k.pick,
 		refresh() {
-			p || (_ = !0, r());
+			f || (_ = !0, r());
 		},
 		dispose() {
-			j.dispose(), O.dispose();
+			k.dispose(), D.dispose();
 		}
 	};
 }
 //#endregion
-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 };
+export { i as DEFAULT_FONT_FAMILY, nt as DEFAULT_MENU_METRICS, ft as DEFAULT_MENU_PALETTE, a as DEFAULT_WIDGET_CLAIMS, l as DEFAULT_WINDOW_METRICS, u as HUD_AFFORDANCE_KIND, c as attachHud, xt as attachMenuHost, Ee as boxShadowCommands, d as claimsOf, s as createHud, o as createHudContribution, At as createLoupe, bt as createMenuWidget, t as cursorForZone, Le as glyphCommands, r as isFocusable, ve as loupeInnerView, q as measureLabel, e as registerDefaultFont };
 
 //# sourceMappingURL=index.js.map