vintage-frames 0.18.0 → 0.19.1

package/dist/build/plugins.js

@@ -1,41 +1,41 @@
-import { inspectAppFile as e, isVersion as t, satisfies as n } from "../shell/app-file.js";
-import { VERSION as r } from "../shell/version.js";
-import { packApp as i } from "./app-file.js";
-import { mkdir as a, readFile as o, writeFile as s } from "node:fs/promises";
-import { join as c, relative as l, resolve as u } from "node:path";
+import { VERSION as e } from "../shell/version.js";
+import { appRuns as t, inspectAppFile as n, isVersion as r, satisfies as i } from "../shell/app-file.js";
+import { packApp as a } from "./app-file.js";
+import { mkdir as o, readFile as s, writeFile as c } from "node:fs/promises";
+import { join as l, relative as u, resolve as d } from "node:path";
 //#region src/build/plugins.ts
-var d = [
+var f = [
 	"vintage-frames",
 	"vintage-frames/shell",
 	"vintage-frames/shell/pure"
-], f = "app-code";
-function p(e) {
+], p = "app-code";
+function m(e) {
 	let t = e.match(/(?<=[\\/]node_modules[\\/])(?:@[^\\/]+[\\/])?[^\\/]+/g)?.at(-1)?.replace("\\", "/");
 	return t === "vintage-frames" ? "a copy of vintage-frames" : t && /^(?:lit|lit-html|lit-element|@lit\/.+|@lit-labs\/.+)$/.test(t) ? `Lit (${t})` : null;
 }
-async function m(e) {
-	let n = JSON.parse(await o(c(e, "package.json"), "utf8")), i = n.devDependencies?.["vintage-frames"] ?? n.dependencies?.["vintage-frames"];
+async function h(t) {
+	let n = JSON.parse(await s(l(t, "package.json"), "utf8")), i = n.devDependencies?.["vintage-frames"] ?? n.dependencies?.["vintage-frames"];
 	if (typeof i != "string") throw Error("package.json has no vintage-frames dev dependency");
-	if (!i.startsWith("^") || !t(i.slice(1))) throw Error(`package.json's vintage-frames range is "${i}", and an app file requires a caret range: ^${r}`);
+	if (!i.startsWith("^") || !r(i.slice(1))) throw Error(`package.json's vintage-frames range is "${i}", and an app file requires a caret range: ^${e}`);
 	return i;
 }
-function h(e) {
-	let { app: l, entry: f, icon: h, artwork: g, copyTo: _ } = e;
+function g(t) {
+	let { app: n, entry: u, icon: p, artwork: g, copyTo: _ } = t;
 	for (let e of [
 		"id",
 		"name",
 		"version",
 		"author"
-	]) if (typeof l?.[e] != "string" || !l[e]) throw Error(`vintage-frames appFile(): app.${e} is missing`);
-	if (!t(l.version)) throw Error(`vintage-frames appFile(): app.version, ${l.version}, is not a version`);
-	if (!f || !h) throw Error(`vintage-frames appFile(): ${f ? "icon" : "entry"} is missing`);
-	let v = `${l.name.replace(/[\\/:*?"<>|]/g, "-")}.png`, y = "", b = null;
+	]) if (typeof n?.[e] != "string" || !n[e]) throw Error(`vintage-frames appFile(): app.${e} is missing`);
+	if (!r(n.version)) throw Error(`vintage-frames appFile(): app.version, ${n.version}, is not a version`);
+	if (!u || !p) throw Error(`vintage-frames appFile(): ${u ? "icon" : "entry"} is missing`);
+	let v = `${n.name.replace(/[\\/:*?"<>|]/g, "-")}.png`, y = "", b = null;
 	return {
 		name: "vintage-frames:app-file",
 		apply: "build",
 		config: () => ({ build: {
 			lib: {
-				entry: f,
+				entry: u,
 				formats: ["es"],
 				fileName: "app"
 			},
@@ -50,44 +50,44 @@ function h(e) {
 		},
 		buildStart() {
 			for (let e of [
-				h,
+				p,
 				g,
 				"package.json"
-			]) e && this.addWatchFile(u(y, e));
+			]) e && this.addWatchFile(d(y, e));
 		},
 		generateBundle: {
 			order: "post",
-			async handler(e, t) {
-				let a = Object.values(t), s = a.filter((e) => e.type === "chunk"), c = a.filter((e) => e.type === "asset").map((e) => e.fileName);
-				c.length && this.error(`${l.name} emits ${c.join(", ")} beside its code, and an app file holds one module: no CSS import, no source map file, its art inlined.`);
-				let [f] = s;
-				(!f || s.length > 1) && this.error(`${l.name} builds to ${s.length} modules, and an app file holds one.`);
-				for (let e of Object.keys(f.modules)) {
-					let t = p(e);
-					t && this.error(`${l.name} bundles ${t}. It composes the page's kit and brings none of its own.`);
+			async handler(t, r) {
+				let o = Object.values(r), c = o.filter((e) => e.type === "chunk"), l = o.filter((e) => e.type === "asset").map((e) => e.fileName);
+				l.length && this.error(`${n.name} emits ${l.join(", ")} beside its code, and an app file holds one module: no CSS import, no source map file, its art inlined.`);
+				let [u] = c;
+				(!u || c.length > 1) && this.error(`${n.name} builds to ${c.length} modules, and an app file holds one.`);
+				for (let e of Object.keys(u.modules)) {
+					let t = m(e);
+					t && this.error(`${n.name} bundles ${t}. It composes the page's kit and brings none of its own.`);
 				}
-				let _ = [...f.imports, ...f.dynamicImports].filter((e) => !d.includes(e));
-				_.length && this.error(`${l.name} imports ${_.join(", ")}. An application imports ${d.join(", ")} and its own files.`);
+				let _ = [...u.imports, ...u.dynamicImports].filter((e) => !f.includes(e));
+				_.length && this.error(`${n.name} imports ${_.join(", ")}. An application imports ${f.join(", ")} and its own files.`);
 				try {
-					let e = await m(y);
-					if (!n("0.18.0", e)) throw Error(`package.json requires vintage-frames ${e}, and the build is on ${r}: move the range`);
-					b = await i({
+					let t = await h(y);
+					if (!i("0.19.1", t)) throw Error(`package.json requires vintage-frames ${t}, and the build is on ${e}: move the range`);
+					b = await a({
 						manifest: {
-							id: l.id,
-							name: l.name,
-							version: l.version,
-							requires: e,
-							author: l.author,
-							description: l.description
+							id: n.id,
+							name: n.name,
+							version: n.version,
+							requires: t,
+							author: n.author,
+							description: n.description
 						},
-						icon: new Uint8Array(await o(u(y, h))),
-						code: f.code,
-						artwork: g ? new Uint8Array(await o(u(y, g))) : void 0
+						icon: new Uint8Array(await s(d(y, p))),
+						code: u.code,
+						artwork: g ? new Uint8Array(await s(d(y, g))) : void 0
 					});
 				} catch (e) {
-					this.error(`${l.name}: ${e.message}`);
+					this.error(`${n.name}: ${e.message}`);
 				}
-				delete t[f.fileName], this.emitFile({
+				delete r[u.fileName], this.emitFile({
 					type: "asset",
 					fileName: v,
 					source: b
@@ -96,31 +96,34 @@ function h(e) {
 		},
 		async writeBundle() {
 			if (!_ || !b) return;
-			let e = u(y, _);
-			await a(e, { recursive: !0 }), await s(c(e, v), b);
+			let e = d(y, _);
+			await o(e, { recursive: !0 }), await c(l(e, v), b);
 		}
 	};
 }
-function g() {
-	let t = "";
+function _(t) {
+	return t.api === void 0 ? `requires vintage-frames ${t.requires}, and this site has ${e}` : `is built for app API ${t.api}, and this site's kit runs app API 2`;
+}
+function v() {
+	let r = "";
 	return {
 		name: "vintage-frames:app-files",
 		enforce: "pre",
 		configResolved(e) {
-			t = e.root;
+			r = e.root;
 		},
 		async load(i) {
 			let a = i.indexOf("?");
 			if (a < 0) return null;
-			let s = i.slice(0, a), c = new URLSearchParams(i.slice(a + 1));
-			if (!s.endsWith(".png") || !(c.has("app") || c.has(f))) return null;
-			this.addWatchFile(s);
-			let u = l(t, s), d = await e(new Uint8Array(await o(s)));
-			typeof d == "string" && this.error(`${u} is not an app file: ${d}.`);
-			let { manifest: p, code: m } = d;
-			return c.has(f) ? m : (n("0.18.0", p.requires) || this.error(`${u}: ${p.name} ${p.version} requires vintage-frames ${p.requires}, and this site has ${r}. Build ${p.name} on ${r} and copy its app file in.`), [
-				`import factory from ${JSON.stringify(`${s}?${f}`)}`,
-				`export const manifest = ${JSON.stringify(p)}`,
+			let o = i.slice(0, a), c = new URLSearchParams(i.slice(a + 1));
+			if (!o.endsWith(".png") || !(c.has("app") || c.has(p))) return null;
+			this.addWatchFile(o);
+			let l = u(r, o), d = await n(new Uint8Array(await s(o)));
+			typeof d == "string" && this.error(`${l} is not an app file: ${d}.`);
+			let { manifest: f, code: m } = d;
+			return c.has(p) ? m : (t(f) || this.error(`${l}: ${f.name} ${f.version} ${_(f)}. Build ${f.name} on ${e} and copy its app file in.`), [
+				`import factory from ${JSON.stringify(`${o}?${p}`)}`,
+				`export const manifest = ${JSON.stringify(f)}`,
 				"export default (...args) => ({ ...factory(...args), icon: manifest.icon })",
 				""
 			].join("\n"));
@@ -128,4 +131,4 @@ function g() {
 	};
 }
 //#endregion
-export { h as appFile, g as appFiles };
+export { g as appFile, v as appFiles };

package/dist/components/vf-icon.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '../styles/body-italic-font.js';
 /** Which member of the icon family paints — the two System 7 resource sizes. */
 export type VfIconSize = 'large' | 'small';
 /**
@@ -523,6 +524,12 @@ export declare class VfIcon extends VfIcon_base {
      * Selection inverts the ghost exactly as it inverts the art.
      */
     open: boolean;
+    /**
+     * The icon is an alias, an item standing for another: its name is set in
+     * italics, the body face's own, and the plate widens to the slant's last
+     * pixel.
+     */
+    alias: boolean;
     /**
      * Drag to move — `movable`, never `draggable`, which is a platform attribute
      * and accessor (see the class doc). Arrow keys move a focused icon too, which

package/dist/components/vf-icon.js

@@ -13,28 +13,29 @@ import { DragController as g } from "../drag.js";
 import { dragSlop as _, prefersReducedMotion as v, runOutlineTravel as y } from "../motion.js";
 import { deriveDragOutline as b, deriveOpenArt as x, dotOutline as S, penPhase as C, xorPenCanvas as w } from "../open-art.js";
 import { FocusRuleController as T } from "../focus-modality.js";
+import "../styles/body-italic-font.js";
 import { LitElement as E, css as D, html as O, nothing as k } from "lit";
 import { property as A, state as j } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
 var M, N = {
 	large: 32,
 	small: 16
-}, P = 1, F = 8, I = (e, t, n) => n <= t ? Math.max(e, t) : Math.min(Math.max(e, t), n), L = "vf-icon-field, [role=\"listbox\"]", R = (e) => e instanceof Element && e.matches(L), z = class extends c(E) {
+}, P, F = 1, I = 8, L = (e, t, n) => n <= t ? Math.max(e, t) : Math.min(Math.max(e, t), n), R = "vf-icon-field, [role=\"listbox\"]", z = (e) => e instanceof Element && e.matches(R), B = class extends c(E) {
 	static {
 		M = this;
 	}
 	constructor(...t) {
-		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new m(this), this.focusRule = new T(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new h(this, () => [[
+		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.alias = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new m(this), this.focusRule = new T(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new h(this, () => [[
 			document,
 			"pointerdown",
-			this.#ne,
+			this.#re,
 			!0
 		]]), this.#m = (e, t, n) => this.#h() ? {
 			x: Math.max(e, 0),
 			y: Math.max(t, n.top)
 		} : {
-			x: I(e, 0, n.width - a(this.offsetWidth, this)),
-			y: I(t, n.top, n.height - a(this.offsetHeight, this))
+			x: L(e, 0, n.width - a(this.offsetWidth, this)),
+			y: L(t, n.top, n.height - a(this.offsetHeight, this))
 		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new g(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
@@ -85,20 +86,20 @@ var M, N = {
 			this.#x?.finish();
 		}, this.#w = (e) => {
 			e.key !== "Escape" || !this.#x || (e.preventDefault(), e.stopPropagation(), this.#x.finish());
-		}, this.#I = !1, this.#B = () => {
-			this.#H(), this.#q();
-		}, this.#V = () => {
-			this.#U();
-		}, this.#K = () => {
+		}, this.#I = !1, this.#V = () => {
+			this.#U(), this.#J();
+		}, this.#H = () => {
+			this.#W();
+		}, this.#q = () => {
 			queueMicrotask(() => {
 				if (!this._editing) return;
 				let e = this.renderRoot.querySelector("input");
 				e && this.renderRoot.activeElement === e || this.commitEditing();
 			});
-		}, this.#Q = (e) => {
+		}, this.#$ = (e) => {
 			if (e.button !== 0 || this._editing) return;
 			let t = e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("label")), n = this.selected, r = e.timeStamp - this.#l < 800;
-			this.#l = e.timeStamp, this.#G();
+			this.#l = e.timeStamp, this.#K();
 			let i = this.#f;
 			this.#f = null, this.#u = e.pointerType !== "mouse", this.#d = this.#u && e.isPrimary ? {
 				pointerId: e.pointerId,
@@ -108,44 +109,44 @@ var M, N = {
 				second: i !== null && e.timeStamp - i.time <= 500 && Math.hypot(e.clientX - i.x, e.clientY - i.y) <= 24
 			} : null;
 			let a = !e.shiftKey && !e.metaKey;
-			this.selectable && (a ? this.#Z(!0) : this.#Z(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#Y && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
-		}, this.#$ = () => {
+			this.selectable && (a ? this.#Q(!0) : this.#Q(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#G(), this.#X && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
+		}, this.#ee = () => {
 			this._editing || this.#u || e(this, "vf-open", {});
-		}, this.#ee = (t) => {
+		}, this.#te = (t) => {
 			let n = this.#_?.proposal != null;
 			this.#v.onPointerUp(t);
-			let r = this.#te(t, n);
+			let r = this.#ne(t, n);
 			if (this.#a) {
 				this.#a = !1;
 				let e = t.type === "pointercancel" ? null : this.#i;
 				for (let t of e?.querySelectorAll("vf-icon") ?? []) t !== this && t.selected && t.setSelected(!1);
 			}
 			r && e(this, "vf-open", {});
-		}, this.#ne = (e) => {
+		}, this.#re = (e) => {
 			let t = e.composedPath();
-			if (t.includes(this) || (this.#G(), this.#f = null, e.shiftKey || e.metaKey)) return;
+			if (t.includes(this) || (this.#K(), this.#f = null, e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
 				let e = t.find((e) => e instanceof M);
-				if (!e && !t.some(R) || e?.selected && e.#i === n) return;
+				if (!e && !t.some(z) || e?.selected && e.#i === n) return;
 			}
-			this.#Z(!1);
-		}, this.#re = (e) => {
+			this.#Q(!1);
+		}, this.#ie = (e) => {
 			let t = e.target, n = e.data ?? e.dataTransfer?.getData("text") ?? "";
 			if (n === "") return;
 			let r = t.selectionStart ?? t.value.length, i = t.selectionEnd ?? r, a = t.value.slice(0, r) + n + t.value.slice(i);
-			a.length > this.maxlength && this.#ae(a);
-		}, this.#ie = (e) => {
+			a.length > this.maxlength && this.#oe(a);
+		}, this.#ae = (e) => {
 			let t = e.target;
 			if (t.value.length > this.maxlength) {
 				let e = t.value, n = Math.min(t.selectionStart ?? this.maxlength, this.maxlength);
-				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ae(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#oe(e);
 			}
 			this._draft = t.value;
-		}, this.#oe = (e) => {
+		}, this.#se = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#se = (t) => {
-			if (this.#G(), !(this._editing || t.defaultPrevented)) {
+		}, this.#ce = (t) => {
+			if (this.#K(), !(this._editing || t.defaultPrevented)) {
 				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
 					t.preventDefault(), e(this, "vf-open", {});
 					return;
@@ -157,7 +158,7 @@ var M, N = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#Z(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#Q(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -165,7 +166,7 @@ var M, N = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? F : P, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						let e = t.shiftKey ? I : F, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
 						this.#L();
 						let i = this.#g.seed();
 						this.#g.moveTo(i.x + n, i.y + r);
@@ -302,6 +303,14 @@ var M, N = {
         padding: 0 calc(var(--vf-scale, 1) * 1px);
         text-align: left;
       }
+      /* An alias's name, plate and rename field alike: the body face's own
+         italic, slanted on the pixel grid. Never a synthesized oblique, which
+         would smear it; until the italic loads the name stands upright. */
+      :host([alias]) .label,
+      :host([alias]) .rename {
+        font-style: italic;
+        font-synthesis: none;
+      }
       :host([selected]) .name {
         /* Forced colors: exempt the inverted plate from the mode's text
            backplate, which would land a Canvas slab on the highlight bar —
@@ -411,7 +420,7 @@ var M, N = {
 		return this.#i !== null;
 	}
 	get #i() {
-		return this.closest(L);
+		return this.closest(R);
 	}
 	#a;
 	#o;
@@ -489,7 +498,7 @@ var M, N = {
 			clientY: r.clientY
 		}, !i.proposal) {
 			if (Math.hypot(r.clientX - i.press.clientX, r.clientY - i.press.clientY) < i.slop || t === i.origin.x && n === i.origin.y) return;
-			this.#G(), this.#a = !1, i.proposal = {
+			this.#K(), this.#a = !1, i.proposal = {
 				left: i.origin.x,
 				top: i.origin.y
 			}, this.#y.attach();
@@ -607,19 +616,19 @@ var M, N = {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#X(), this.#q(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#se);
+		super.connectedCallback(), this.#Z(), this.#J(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#ce);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#se), this.#G(), this.#_?.outline?.canvas.remove();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#ce), this.#K(), this.#_?.outline?.canvas.remove();
 		for (let e of this.#_?.followers ?? []) e.end();
 		this.#_ = null, this.#x?.finish();
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#X(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#q(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
+		if (e.has("selectable") && this.#Z(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#J(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
 			let e = this.renderRoot.querySelector("input");
 			e?.focus(), e?.select();
 		}
-		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#R(), (e.has("open") || e.has("size")) && this.#H();
+		(e.has("label") || e.has("_draft") || e.has("_editing") || e.has("alias")) && this.#R(), (e.has("open") || e.has("size")) && this.#U();
 	}
 	#I;
 	#L() {
@@ -639,15 +648,23 @@ var M, N = {
 			let n = document.createRange();
 			n.selectNodeContents(e), t = n.getBoundingClientRect().width, n.detach();
 		}
-		let n = t / r(this) + 2, i = Math.max(2, Math.ceil(n / 2) * 2);
-		this.#e = this._editing && t === 0 ? Math.max(i, N[this.size]) : i, e.style.width = this.#z;
-	}
-	get #z() {
+		let n = t / r(this) + 2 + (this.alias ? this.#z(e) : 0), i = Math.max(2, Math.ceil(n / 2) * 2);
+		this.#e = this._editing && t === 0 ? Math.max(i, N[this.size]) : i, e.style.width = this.#B;
+	}
+	#z(e) {
+		let t = e.textContent ?? "";
+		if (P ??= document.createElement("canvas").getContext("2d"), !t || !P) return 0;
+		let { fontStyle: n, fontWeight: i, fontSize: a, fontFamily: o } = getComputedStyle(e);
+		P.font = `${n} ${i} ${a} ${o}`;
+		let s = P.measureText(t);
+		return Math.max(0, Math.ceil((s.actualBoundingBoxRight - s.width) / r(this)));
+	}
+	get #B() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
 	}
-	#B;
 	#V;
-	#H() {
+	#H;
+	#U() {
 		let e = this.renderRoot?.querySelector(`slot[name='${this.size}']`), t = null;
 		for (let n of e?.assignedElements({ flatten: !0 }) ?? []) {
 			let e = n instanceof HTMLImageElement || n instanceof HTMLCanvasElement ? n : n.querySelector("img, canvas");
@@ -656,9 +673,9 @@ var M, N = {
 				break;
 			}
 		}
-		t !== this.#t && (this.#t?.removeEventListener("load", this.#V), this.#t?.removeEventListener("error", this.#V), this.#t = t, t?.addEventListener("load", this.#V), t?.addEventListener("error", this.#V)), this.#U();
+		t !== this.#t && (this.#t?.removeEventListener("load", this.#H), this.#t?.removeEventListener("error", this.#H), this.#t = t, t?.addEventListener("load", this.#H), t?.addEventListener("error", this.#H)), this.#W();
 	}
-	#U() {
+	#W() {
 		let e = this.#t, t = e instanceof HTMLImageElement ? e.complete && e.naturalWidth > 0 : e != null && e.width > 0;
 		if (!this.open || e == null || !t) {
 			this._ghost = null, this.#o = "";
@@ -674,16 +691,16 @@ var M, N = {
 		}
 		this._ghost = r, this.#o = r ? n : "";
 	}
-	#W() {
-		this.#G(), this.#c = window.setTimeout(() => {
+	#G() {
+		this.#K(), this.#c = window.setTimeout(() => {
 			this.#c = 0, this.startEditing();
 		}, 800);
 	}
-	#G() {
+	#K() {
 		this.#c &&= (clearTimeout(this.#c), 0);
 	}
 	startEditing() {
-		this.#G(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
+		this.#K(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
 	}
 	commitEditing() {
 		if (!this._editing) return;
@@ -702,7 +719,7 @@ var M, N = {
 			previous: t
 		}));
 	}
-	#K;
+	#q;
 	cancelEditing() {
 		this._editing && (this._editing = !1, this._draft = this.#s);
 	}
@@ -712,15 +729,15 @@ var M, N = {
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#Q}
+      @pointerdown=${this.#$}
       @pointermove=${this.#v.onPointerMove}
-      @pointerup=${this.#ee}
-      @pointercancel=${this.#ee}
-      @lostpointercapture=${this.#ee}
-      @dblclick=${this.#$}
+      @pointerup=${this.#te}
+      @pointercancel=${this.#te}
+      @lostpointercapture=${this.#te}
+      @dblclick=${this.#ee}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? O`<slot name="small" @slotchange=${this.#B}></slot>` : O`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? k}
+        ${this.size === "small" ? O`<slot name="small" @slotchange=${this.#V}></slot>` : O`<slot name="large" @slotchange=${this.#V}></slot>`}${this._ghost ?? k}
       </div>
       ${r ? O`<div class=${i}>
             <!-- No whitespace around the span: it is the measured run, and a
@@ -728,7 +745,7 @@ var M, N = {
             <div class="label" part="label"><span
               class="name"
               part="plate"
-              style=${this.#e ? `width: ${this.#z}` : ""}
+              style=${this.#e ? `width: ${this.#B}` : ""}
               >${t}</span
             ></div>
             ${e ? O`<div class="rename-box">
@@ -738,16 +755,16 @@ var M, N = {
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#re}
-                    @input=${this.#ie}
-                    @keydown=${this.#oe}
-                    @blur=${this.#K}
+                    @beforeinput=${this.#ie}
+                    @input=${this.#ae}
+                    @keydown=${this.#se}
+                    @blur=${this.#q}
                   />
                 </div>` : k}
           </div>` : k}
     </div>`;
 	}
-	#q() {
+	#J() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -756,22 +773,22 @@ var M, N = {
 			this.#n.role = "option", this.#n.ariaSelected = this.selected ? "true" : "false", this.#n.ariaLabel = null;
 			return;
 		}
-		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#J || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#Y || null;
 	}
-	get #J() {
+	get #Y() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #Y() {
+	get #X() {
 		return this.selectable;
 	}
-	#X() {
-		this.hasAttribute("tabindex") || (this.#Y ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#Z() {
+		this.hasAttribute("tabindex") || (this.#X ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#Z(t) {
+	#Q(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#Z(e);
+		this.#Q(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -801,10 +818,10 @@ var M, N = {
 			}), this.#x = t, this.#S.attach();
 		})) : (this.#g.moveTo(r.x, r.y), !1);
 	}
-	#Q;
 	#$;
 	#ee;
-	#te(e, t) {
+	#te;
+	#ne(e, t) {
 		let n = this.#d;
 		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type !== "pointercancel" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < _(e))) ? !1 : n.second ? !0 : (this.#f = {
 			time: n.time,
@@ -812,40 +829,43 @@ var M, N = {
 			y: n.y
 		}, !1);
 	}
-	#ne;
 	#re;
 	#ie;
-	#ae(t) {
+	#ae;
+	#oe(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#oe;
 	#se;
+	#ce;
 };
-o([A()], z.prototype, "label", void 0), o([A({ reflect: !0 })], z.prototype, "size", void 0), o([A({
+o([A()], B.prototype, "label", void 0), o([A({ reflect: !0 })], B.prototype, "size", void 0), o([A({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "selectable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "selectable", void 0), o([A({
+})], B.prototype, "selected", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "selected", void 0), o([A({
+})], B.prototype, "target", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "target", void 0), o([A({
+})], B.prototype, "color", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "color", void 0), o([A({
+})], B.prototype, "open", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "open", void 0), o([A({
+})], B.prototype, "alias", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "movable", void 0), o([A({
+})], B.prototype, "movable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "editable", void 0), o([A({ type: Number })], z.prototype, "width", void 0), o([A({ type: Number })], z.prototype, "maxlength", void 0), o([j()], z.prototype, "_editing", void 0), o([j()], z.prototype, "_draft", void 0), o([j()], z.prototype, "_ghost", void 0), z = M = o([t("vf-icon")], z);
+})], B.prototype, "editable", void 0), o([A({ type: Number })], B.prototype, "width", void 0), o([A({ type: Number })], B.prototype, "maxlength", void 0), o([j()], B.prototype, "_editing", void 0), o([j()], B.prototype, "_draft", void 0), o([j()], B.prototype, "_ghost", void 0), B = M = o([t("vf-icon")], B);
 //#endregion
-export { z as VfIcon };
+export { B as VfIcon };

package/dist/components/vf-menu-bar.d.ts

@@ -7,10 +7,12 @@ declare const VfMenuBar_base: (new (...args: any[]) => import("../position.js").
  *
  * Coordinates its menus: pressing a label opens that menu (and inverts the
  * label); while any menu is open, hovering another label switches to it;
- * Escape, an outside click, or item selection closes. ArrowLeft/ArrowRight
- * move between menus while one is open; ArrowDown/ArrowUp move focus through
- * the open menu's items, Home/End jump to its first/last, and typed letters
- * run the shared Finder first-letter type-ahead (src/type-ahead.ts).
+ * Escape, an outside click, or item selection closes. While a menu is open
+ * the keyboard is src/menu-navigation.ts's: ArrowDown/ArrowUp move focus
+ * through the open menu's items, Home/End jump to its first/last, typed
+ * letters run the shared Finder first-letter type-ahead (src/type-ahead.ts),
+ * ArrowRight opens an item's submenu and ArrowLeft closes it, and at the top
+ * level ArrowLeft/ArrowRight move between menus.
  *
  * The bar also owns the **press-drag-release** gesture (see src/menu-press.ts)
  * — press a title, slide onto a command, release over it — because one press