vintage-frames 0.8.0 → 0.10.0

package/dist/components/vf-icon.js

@@ -9,36 +9,39 @@ import { vfFocusUnderline as f } from "../styles/recipes/focus.js";
 import { GridSnapController as p } from "../grid-snap.js";
 import { DocumentListenersController as m } from "../document-listeners.js";
 import { DragController as h } from "../drag.js";
-import "../motion.js";
-import { FocusRuleController as g } from "../focus-modality.js";
-import { deriveDragOutline as _, deriveOpenArt as v, dotOutline as y, penPhase as b } from "../open-art.js";
-import { LitElement as x, css as S, html as C, nothing as w } from "lit";
-import { property as T, state as E } from "lit/decorators.js";
+import { prefersReducedMotion as g, runOutlineTravel as _ } from "../motion.js";
+import { FocusRuleController as v } from "../focus-modality.js";
+import { deriveDragOutline as y, deriveOpenArt as b, dotOutline as x, penPhase as S } from "../open-art.js";
+import { LitElement as C, css as w, html as T, nothing as E } from "lit";
+import { property as D, state as O } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
-var D, O = {
+var k, A = {
 	large: 32,
 	small: 16
-}, k = 1, A = 8, j = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), M = class extends c(x) {
+}, j = 1, M = 8, N = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), P = class extends c(C) {
 	static {
-		D = this;
+		k = 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 p(this), this.focusRule = new g(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 = new m(this, () => [[
+		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 p(this), this.focusRule = new v(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 = new m(this, () => [[
 			document,
 			"pointerdown",
-			this.#K,
+			this.#Z,
 			!0
-		]]), this.#d = (e, t, n) => ({
-			x: j(e, n.width - a(this.offsetWidth, this)),
-			y: j(t, n.height - a(this.offsetHeight, this))
-		}), this.#f = new s(this, (e, t, n) => this.#d(e, t, n)), this.#p = null, this.#m = new h(this, {
+		]]), this.#d = (e, t, n) => this.#f() ? {
+			x: Math.max(e, 0),
+			y: Math.max(t, 0)
+		} : {
+			x: N(e, n.width - a(this.offsetWidth, this)),
+			y: N(t, n.height - a(this.offsetHeight, this))
+		}, this.#p = new s(this, (e, t, n) => this.#d(e, t, n)), this.#m = null, this.#h = new h(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
-				this.#k();
-				let t = this.#f.seed();
-				return this.#p = {
+				this.#P();
+				let t = this.#p.seed();
+				return this.#m = {
 					origin: t,
-					frame: this.#_(),
+					frame: this.#S(),
 					pointer: {
 						clientX: e.clientX,
 						clientY: e.clientY
@@ -46,63 +49,77 @@ var D, O = {
 					proposal: null,
 					outline: null,
 					followers: [],
-					size: this.#v()
+					size: this.#C()
 				}, t;
 			},
 			onDrag: (e, t, n) => {
-				this.#x(e, t, n);
+				this.#E(e, t, n);
 			},
 			onDragEnd: (e, t) => {
-				this.#S(e, t);
+				this.#D(e, t);
 			}
-		}), this.#h = new m(this, () => [[
+		}), this.#g = new m(this, () => [[
 			document,
 			"keydown",
-			this.#g,
+			this.#_,
 			!0
-		]]), this.#g = (e) => {
-			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#m.cancel());
-		}, this.#O = !1, this.#M = () => {
-			this.#P(), this.#R();
-		}, this.#N = () => {
-			this.#F();
-		}, this.#U = (e) => {
+		]]), this.#_ = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#h.cancel());
+		}, this.#v = null, this.#y = new m(this, () => [[
+			document,
+			"pointerdown",
+			this.#b,
+			!0
+		], [
+			document,
+			"keydown",
+			this.#x,
+			!0
+		]]), this.#b = () => {
+			this.#v?.finish();
+		}, this.#x = (e) => {
+			e.key !== "Escape" || !this.#v || (e.preventDefault(), e.stopPropagation(), this.#v.finish());
+		}, this.#N = !1, this.#L = () => {
+			this.#z(), this.#U();
+		}, this.#R = () => {
+			this.#B();
+		}, this.#J = (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.#L();
+			this.#l = e.timeStamp, this.#H();
 			let i = !e.shiftKey && !e.metaKey;
-			this.selectable && (i ? this.#H(!0) : this.#H(!this.selected)), this.#a = i && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#I(), this.#B && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#m.onPointerDown(e);
-		}, this.#W = () => {
+			this.selectable && (i ? this.#q(!0) : this.#q(!this.selected)), this.#a = i && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#V(), this.#G && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#h.onPointerDown(e);
+		}, this.#Y = () => {
 			this._editing || e(this, "vf-open", {});
-		}, this.#G = (e) => {
-			if (this.#m.onPointerUp(e), !this.#a || (this.#a = !1, e.type !== "pointerup")) return;
+		}, this.#X = (e) => {
+			if (this.#h.onPointerUp(e), !this.#a || (this.#a = !1, e.type !== "pointerup")) return;
 			let t = this.#i;
 			if (t) for (let e of t.querySelectorAll("vf-icon")) e !== this && e.selected && e.setSelected(!1);
-		}, this.#K = (e) => {
+		}, this.#Z = (e) => {
 			let t = e.composedPath();
-			if (t.includes(this) || (this.#L(), e.shiftKey || e.metaKey)) return;
+			if (t.includes(this) || (this.#H(), e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
-				let e = t.find((e) => e instanceof D);
+				let e = t.find((e) => e instanceof k);
 				if (e?.selected && e.#i === n) return;
 			}
-			this.#H(!1);
-		}, this.#q = (e) => {
+			this.#q(!1);
+		}, this.#Q = (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.#Y(a);
-		}, this.#J = (e) => {
+			a.length > this.maxlength && this.#ee(a);
+		}, this.#$ = (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.#Y(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ee(e);
 			}
 			this._draft = t.value;
-		}, this.#X = (e) => {
+		}, this.#te = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#Z = (t) => {
-			if (this.#L(), !(this._editing || t.defaultPrevented)) {
+		}, this.#ne = (t) => {
+			if (this.#H(), !(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;
@@ -114,7 +131,7 @@ var D, O = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#H(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#q(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -122,17 +139,17 @@ var D, O = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? A : k, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
-						this.#k();
-						let i = this.#f.seed();
-						this.#f.moveTo(i.x + n, i.y + r);
+						let e = t.shiftKey ? M : j, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						this.#P();
+						let i = this.#p.seed();
+						this.#p.moveTo(i.x + n, i.y + r);
 					}
 				}
 			}
 		};
 	}
 	static {
-		this.styles = [d, S`
+		this.styles = [d, w`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -213,7 +230,7 @@ var D, O = {
          centring below is still a whole number of system px. */
       .caption {
         position: relative;
-        margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 2px));
+        margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 0px));
       }
       .label {
         ${u}
@@ -375,15 +392,27 @@ var D, O = {
 	#l;
 	#u;
 	#d;
-	#f;
+	#f() {
+		let e = this.offsetParent, t = this.assignedSlot ?? this.parentNode;
+		for (; t && t !== e;) if (t instanceof Element) {
+			if (t.localName === "vf-scroll-area") return !0;
+			t = t.assignedSlot ?? t.parentNode;
+		} else t = t instanceof ShadowRoot ? t.host : null;
+		return !1;
+	}
 	#p;
 	#m;
 	#h;
 	#g;
-	#_() {
+	#_;
+	#v;
+	#y;
+	#b;
+	#x;
+	#S() {
 		return this.renderRoot?.querySelector(".frame")?.getBoundingClientRect() ?? this.getBoundingClientRect();
 	}
-	#v() {
+	#C() {
 		return {
 			width: a(this.offsetWidth, this),
 			height: a(this.offsetHeight, this)
@@ -391,22 +420,22 @@ var D, O = {
 	}
 	followDrag(e) {
 		if (!this.movable || this._editing) return null;
-		let t = this.#f.seed(), n = this.#T(this.#_(), e);
+		let t = this.#p.seed(), n = this.#A(this.#S(), e);
 		return {
 			icon: this,
 			origin: t,
-			offset: this.#f.offset,
-			size: this.#v(),
+			offset: this.#p.offset,
+			size: this.#C(),
 			move: (e, t) => {
-				n && this.#E(n, e, t);
+				n && this.#j(n, e, t);
 			},
 			drop: (e, n) => {
-				this.#f.moveTo(t.x + e, t.y + n);
+				this.#p.moveTo(t.x + e, t.y + n);
 			},
 			end: () => n?.canvas.remove()
 		};
 	}
-	#y(e) {
+	#w(e) {
 		if (!this.selected) return [];
 		let t = this.#i;
 		if (!t) return [];
@@ -418,26 +447,26 @@ var D, O = {
 		}
 		return n;
 	}
-	#b(e) {
+	#T(e) {
 		return [this, ...e.followers.map((e) => e.icon)];
 	}
-	#x(t, n, r) {
-		let i = this.#p;
+	#E(t, n, r) {
+		let i = this.#m;
 		if (!i) return;
 		if (i.pointer = {
 			clientX: r.clientX,
 			clientY: r.clientY
 		}, !i.proposal) {
 			if (t === i.origin.x && n === i.origin.y) return;
-			this.#L(), this.#a = !1, i.proposal = {
+			this.#H(), this.#a = !1, i.proposal = {
 				left: i.origin.x,
 				top: i.origin.y
-			}, this.#h.attach();
-			let r = this.#w();
-			i.outline = this.#T(i.frame, r), i.followers = this.#y(r), e(this, "vf-drag-start", {
+			}, this.#g.attach();
+			let r = this.#k();
+			i.outline = this.#A(i.frame, r), i.followers = this.#w(r), e(this, "vf-drag-start", {
 				left: i.origin.x,
 				top: i.origin.y,
-				icons: this.#b(i)
+				icons: this.#T(i)
 			});
 		}
 		if (t === i.proposal.left && n === i.proposal.top) return;
@@ -446,14 +475,14 @@ var D, O = {
 			top: n
 		};
 		let a = t - i.origin.x, o = n - i.origin.y;
-		i.outline && this.#E(i.outline, a, o);
+		i.outline && this.#j(i.outline, a, o);
 		for (let e of i.followers) e.move(a, o);
-		e(this, "vf-drag", this.#D(i));
+		e(this, "vf-drag", this.#M(i));
 	}
-	#S(t, n) {
-		let r = this.#p;
-		if (this.#p = null, !r?.proposal) return;
-		this.#h.detach(), r.outline?.canvas.remove();
+	#D(t, n) {
+		let r = this.#m;
+		if (this.#m = null, !r?.proposal) return;
+		this.#g.detach(), r.outline?.canvas.remove();
 		for (let e of r.followers) e.end();
 		if (t && (r.pointer = {
 			clientX: t.clientX,
@@ -462,85 +491,78 @@ var D, O = {
 			e(this, "vf-drag-cancel", {});
 			return;
 		}
-		let i = this.#D(r);
-		e(this, "vf-drop", i, { cancelable: !0 }) && this.#C(r, i);
+		let i = this.#M(r);
+		e(this, "vf-drop", i, { cancelable: !0 }) && this.#O(r, i);
 	}
-	#C(e, t) {
+	#O(e, t) {
 		if (e.followers.length === 0) {
-			this.#f.moveTo(t.left, t.top);
+			this.#p.moveTo(t.left, t.top);
 			return;
 		}
-		let n = this.#f.bounds, r = (e, t) => ({
+		let n = this.#p.bounds, r = (e, t) => ({
 			x: e.x - t.x,
 			y: e.y - t.y
 		}), i = [{
-			corner: r(e.origin, this.#f.offset),
+			corner: r(e.origin, this.#p.offset),
 			size: e.size
 		}, ...e.followers.map((e) => ({
 			corner: r(e.origin, e.offset),
 			size: e.size
-		}))], a = (e, t, n, r) => {
-			let a = -Infinity, o = Infinity;
-			for (let e of i) a = Math.max(a, -t(e)), o = Math.min(o, r - n(e) - t(e));
-			return o < a && (o = Infinity), Math.min(Math.max(e, a), o);
-		}, o = a(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, n.width), s = a(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.height);
-		this.#f.moveTo(e.origin.x + o, e.origin.y + s);
-		for (let t of e.followers) t.drop(o, s);
-	}
-	#w() {
+		}))], a = this.#f(), o = (e, t, n, r) => {
+			let o = -Infinity, s = Infinity;
+			for (let e of i) o = Math.max(o, -t(e)), a || (s = Math.min(s, r - n(e) - t(e)));
+			return s < o && (s = Infinity), Math.min(Math.max(e, o), s);
+		}, s = o(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, n.width), c = o(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.height);
+		this.#p.moveTo(e.origin.x + s, e.origin.y + c);
+		for (let t of e.followers) t.drop(s, c);
+	}
+	#k() {
 		let t = { surface: null };
 		return e(this, "vf-drag-surface-request", t, { composed: !1 }), t.surface;
 	}
-	#T(e, t) {
+	#A(e, t) {
 		let n = this.renderRoot, a = n?.querySelector(".frame");
 		if (!a) return null;
-		let o = r(this), s = (t) => ({
-			x: Math.round((t.left - e.left) / o),
-			y: Math.round((t.top - e.top) / o),
-			width: Math.round(t.width / o),
-			height: Math.round(t.height / o)
-		}), c = Math.round(e.width / o), l = Math.round(e.height / o), u = n.querySelector(".art"), d = n.querySelector(".name"), f = this.open && this._ghost ? this._ghost : this.#t, p = f != null && (f instanceof HTMLCanvasElement ? f.width > 0 : f.complete && f.naturalWidth > 0), m = p ? f.getBoundingClientRect() : null, h = _(p ? f : null, {
-			width: c,
-			height: l,
-			art: m && m.width > 0 ? s(m) : null,
-			cell: u ? s(u.getBoundingClientRect()) : {
+		let o = r(this), s = n.querySelector(".art"), c = n.querySelector(".name")?.getBoundingClientRect() ?? null, l = c ? Math.min(e.left, c.left) : e.left, u = c ? Math.min(e.top, c.top) : e.top, d = c ? Math.max(e.right, c.right) : e.right, f = c ? Math.max(e.bottom, c.bottom) : e.bottom, p = (e) => ({
+			x: Math.round((e.left - l) / o),
+			y: Math.round((e.top - u) / o),
+			width: Math.round(e.width / o),
+			height: Math.round(e.height / o)
+		}), m = Math.round((d - l) / o), h = Math.round((f - u) / o), g = this.open && this._ghost ? this._ghost : this.#t, _ = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), v = _ ? g.getBoundingClientRect() : null, b = y(_ ? g : null, {
+			width: m,
+			height: h,
+			art: v && v.width > 0 ? p(v) : null,
+			cell: s ? p(s.getBoundingClientRect()) : {
 				x: 0,
 				y: 0,
-				width: c,
-				height: l
+				width: m,
+				height: h
 			},
-			plate: d ? s(d.getBoundingClientRect()) : null
+			plate: c ? p(c) : null
 		});
-		if (!h) return null;
-		let g = document.createElement("canvas");
-		g.className = "drag-outline";
-		let v = g.style;
-		v.position = "absolute", v.display = "block", v.pointerEvents = "none", v.filter = "invert(1)", v.mixBlendMode = "difference", v.imageRendering = "pixelated", v.width = i(h.width), v.height = i(h.height);
-		let y = {
-			x: 0,
-			y: 0
+		if (!b) return null;
+		let x = document.createElement("canvas");
+		x.className = "drag-outline";
+		let S = x.style;
+		S.position = "absolute", S.display = "block", S.pointerEvents = "none", S.filter = "invert(1)", S.mixBlendMode = "difference", S.imageRendering = "pixelated", S.width = i(b.width), S.height = i(b.height);
+		let C = t ?? a, w = t ? t.getBoundingClientRect() : e, T = {
+			x: Math.round((l - w.left) / o),
+			y: Math.round((u - w.top) / o)
 		};
-		if (t) {
-			let n = t.getBoundingClientRect();
-			y = {
-				x: Math.round((e.left - n.left) / o),
-				y: Math.round((e.top - n.top) / o)
-			}, t.append(g);
-		} else a.append(g);
-		return {
-			ring: h,
-			canvas: g,
-			base: y,
+		return C.append(x), {
+			ring: b,
+			canvas: x,
+			base: T,
 			phase: -1
 		};
 	}
-	#E(e, t, n) {
+	#j(e, t, n) {
 		let r = e.base.x + t, a = e.base.y + n;
 		e.canvas.style.left = i(r), e.canvas.style.top = i(a);
-		let o = b(r, a);
-		o !== e.phase && (e.phase = o, y(e.ring, e.canvas, o));
+		let o = S(r, a);
+		o !== e.phase && (e.phase = o, x(e.ring, e.canvas, o));
 	}
-	#D(e) {
+	#M(e) {
 		let { left: t, top: n } = e.proposal ?? {
 			left: e.origin.x,
 			top: e.origin.y
@@ -552,32 +574,32 @@ var D, O = {
 			top: n,
 			x: e.frame.left + (t - e.origin.x) * i,
 			y: e.frame.top + (n - e.origin.y) * i,
-			icons: this.#b(e)
+			icons: this.#T(e)
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#V(), this.#R(), this.selectable && this.selected && this.#u.attach(), this.addEventListener("keydown", this.#Z);
+		super.connectedCallback(), this.#K(), this.#U(), this.selectable && this.selected && this.#u.attach(), this.addEventListener("keydown", this.#ne);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#Z), this.#L(), this.#p?.outline?.canvas.remove();
-		for (let e of this.#p?.followers ?? []) e.end();
-		this.#p = null;
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#ne), this.#H(), this.#m?.outline?.canvas.remove();
+		for (let e of this.#m?.followers ?? []) e.end();
+		this.#m = null, this.#v?.finish();
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#V(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#R(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#u.attach() : this.#u.detach()), e.has("_editing") && this._editing) {
+		if (e.has("selectable") && this.#K(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#U(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#u.attach() : this.#u.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.#A(), (e.has("open") || e.has("size")) && this.#P();
+		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#F(), (e.has("open") || e.has("size")) && this.#z();
 	}
-	#O;
-	#k() {
-		this.#O ||= l(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
+	#N;
+	#P() {
+		this.#N ||= l(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
 	}
 	firstUpdated() {
-		document.fonts.ready.then(() => this.#A());
+		document.fonts.ready.then(() => this.#F());
 	}
-	#A() {
+	#F() {
 		let e = this.renderRoot?.querySelector(".name");
 		if (!e) {
 			this.#e = 0;
@@ -589,14 +611,14 @@ var D, O = {
 			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, O[this.size]) : i, e.style.width = this.#j;
+		this.#e = this._editing && t === 0 ? Math.max(i, A[this.size]) : i, e.style.width = this.#I;
 	}
-	get #j() {
+	get #I() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
 	}
-	#M;
-	#N;
-	#P() {
+	#L;
+	#R;
+	#z() {
 		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");
@@ -605,9 +627,9 @@ var D, O = {
 				break;
 			}
 		}
-		t !== this.#t && (this.#t?.removeEventListener("load", this.#N), this.#t?.removeEventListener("error", this.#N), this.#t = t, t?.addEventListener("load", this.#N), t?.addEventListener("error", this.#N)), this.#F();
+		t !== this.#t && (this.#t?.removeEventListener("load", this.#R), this.#t?.removeEventListener("error", this.#R), this.#t = t, t?.addEventListener("load", this.#R), t?.addEventListener("error", this.#R)), this.#B();
 	}
-	#F() {
+	#B() {
 		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 = "";
@@ -615,7 +637,7 @@ var D, O = {
 		}
 		let n = e instanceof HTMLImageElement ? `${this.size} ${e.currentSrc}` : "";
 		if (n !== "" && n === this.#o && this._ghost) return;
-		let r = v(e);
+		let r = b(e);
 		if (r) {
 			r.className = "ghost", r.style.width = `calc(var(--vf-scale, 1) * ${r.width}px)`, r.style.height = `calc(var(--vf-scale, 1) * ${r.height}px)`;
 			let t = e instanceof HTMLImageElement ? e.alt : "";
@@ -623,16 +645,16 @@ var D, O = {
 		}
 		this._ghost = r, this.#o = r ? n : "";
 	}
-	#I() {
-		this.#L(), this.#c = window.setTimeout(() => {
+	#V() {
+		this.#H(), this.#c = window.setTimeout(() => {
 			this.#c = 0, this.startEditing();
 		}, 800);
 	}
-	#L() {
+	#H() {
 		this.#c &&= (clearTimeout(this.#c), 0);
 	}
 	startEditing() {
-		this.#L(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
+		this.#H(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
 	}
 	commitEditing() {
 		if (!this._editing) return;
@@ -656,45 +678,45 @@ var D, O = {
 	}
 	render() {
 		let e = this._editing, t = e ? this._draft : this.label, n = this.focusRule.marked && !e, r = t !== "" || e, i = `caption${e ? " editing" : ""}${n && t ? " focus-rule" : ""}`, a = `art${this.open && this._ghost ? " open" : ""}${n && !t ? " focus-rule" : ""}`, o = this.width ? `width: calc(var(--vf-scale, 1) * ${this.width}px)` : "";
-		return C`<div
+		return T`<div
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#U}
-      @pointermove=${this.#m.onPointerMove}
-      @pointerup=${this.#G}
-      @pointercancel=${this.#G}
-      @dblclick=${this.#W}
+      @pointerdown=${this.#J}
+      @pointermove=${this.#h.onPointerMove}
+      @pointerup=${this.#X}
+      @pointercancel=${this.#X}
+      @dblclick=${this.#Y}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? C`<slot name="small" @slotchange=${this.#M}></slot>` : C`<slot name="large" @slotchange=${this.#M}></slot>`}${this._ghost ?? w}
+        ${this.size === "small" ? T`<slot name="small" @slotchange=${this.#L}></slot>` : T`<slot name="large" @slotchange=${this.#L}></slot>`}${this._ghost ?? E}
       </div>
-      ${r ? C`<div class=${i}>
+      ${r ? T`<div class=${i}>
             <!-- No whitespace around the span: it is the measured run, and a
                  stray space would widen it. -->
             <div class="label" part="label"><span
               class="name"
               part="plate"
-              style=${this.#e ? `width: ${this.#j}` : ""}
+              style=${this.#e ? `width: ${this.#I}` : ""}
               >${t}</span
             ></div>
-            ${e ? C`<div class="rename-box">
+            ${e ? T`<div class="rename-box">
                   <input
                     class="rename"
                     part="input"
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#q}
-                    @input=${this.#J}
-                    @keydown=${this.#X}
+                    @beforeinput=${this.#Q}
+                    @input=${this.#$}
+                    @keydown=${this.#te}
                     @blur=${this.commitEditing}
                   />
-                </div>` : w}
-          </div>` : w}
+                </div>` : E}
+          </div>` : E}
     </div>`;
 	}
-	#R() {
+	#U() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -703,22 +725,22 @@ var D, O = {
 			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.#z || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#W || null;
 	}
-	get #z() {
+	get #W() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #B() {
+	get #G() {
 		return this.selectable;
 	}
-	#V() {
-		this.hasAttribute("tabindex") || (this.#B ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#K() {
+		this.hasAttribute("tabindex") || (this.#G ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#H(t) {
+	#q(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#H(e);
+		this.#q(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -731,43 +753,57 @@ var D, O = {
 		}
 		return !1;
 	}
-	#U;
-	#W;
-	#G;
-	#K;
-	#q;
+	moveTo(e, t) {
+		this.#v?.finish(), this.#P(), this.#p.seed(), this.#p.moveTo(e, t);
+	}
+	async dragTo(e, t) {
+		if (this.#v?.finish(), await this.updateComplete, this.#v?.finish(), !this.isConnected) return !1;
+		this.#P();
+		let n = this.#p.seed(), r = this.#p.resolve(e, t), i = r.x - n.x, a = r.y - n.y, o = i === 0 && a === 0 || g() || this._editing || this.#m !== null ? null : this.#A(this.#S(), this.#k());
+		return o ? (this.#j(o, 0, 0), new Promise((e) => {
+			let t = null;
+			t = _(Math.hypot(i, a), (e) => this.#j(o, Math.round(i * e), Math.round(a * e)), () => {
+				this.#v === t && (this.#v = null, this.#y.detach()), o.canvas.remove(), this.isConnected && this.#p.moveTo(r.x, r.y), e(!0);
+			}), this.#v = t, this.#y.attach();
+		})) : (this.#p.moveTo(r.x, r.y), !1);
+	}
 	#J;
-	#Y(t) {
+	#Y;
+	#X;
+	#Z;
+	#Q;
+	#$;
+	#ee(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#X;
-	#Z;
+	#te;
+	#ne;
 };
-o([T()], M.prototype, "label", void 0), o([T({ reflect: !0 })], M.prototype, "size", void 0), o([T({
+o([D()], P.prototype, "label", void 0), o([D({ reflect: !0 })], P.prototype, "size", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "selectable", void 0), o([T({
+})], P.prototype, "selectable", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "selected", void 0), o([T({
+})], P.prototype, "selected", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "target", void 0), o([T({
+})], P.prototype, "target", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "color", void 0), o([T({
+})], P.prototype, "color", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "open", void 0), o([T({
+})], P.prototype, "open", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "movable", void 0), o([T({
+})], P.prototype, "movable", void 0), o([D({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "editable", void 0), o([T({ type: Number })], M.prototype, "width", void 0), o([T({ type: Number })], M.prototype, "maxlength", void 0), o([E()], M.prototype, "_editing", void 0), o([E()], M.prototype, "_draft", void 0), o([E()], M.prototype, "_ghost", void 0), M = D = o([t("vf-icon")], M);
+})], P.prototype, "editable", void 0), o([D({ type: Number })], P.prototype, "width", void 0), o([D({ type: Number })], P.prototype, "maxlength", void 0), o([O()], P.prototype, "_editing", void 0), o([O()], P.prototype, "_draft", void 0), o([O()], P.prototype, "_ghost", void 0), P = k = o([t("vf-icon")], P);
 //#endregion
-export { M as VfIcon };
+export { P as VfIcon };