vintage-frames 0.12.1 → 0.12.3

package/dist/components/vf-icon.js

@@ -9,117 +9,136 @@ 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 { 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";
+import { dragSlop as g, prefersReducedMotion as _, runOutlineTravel as v } from "../motion.js";
+import { deriveDragOutline as y, deriveOpenArt as b, dotOutline as x, penPhase as S, xorPenCanvas as C } from "../open-art.js";
+import { FocusRuleController as w } from "../focus-modality.js";
+import { LitElement as T, css as E, html as D, nothing as O } from "lit";
+import { property as k, state as A } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
-var k, A = {
+var j, M = {
 	large: 32,
 	small: 16
-}, 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) {
+}, N = 1, P = 8, F = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), I = class extends c(T) {
 	static {
-		k = this;
+		j = 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 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, () => [[
+		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 w(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 m(this, () => [[
 			document,
 			"pointerdown",
-			this.#Z,
+			this.#te,
 			!0
-		]]), this.#d = (e, t, n) => this.#f() ? {
+		]]), this.#m = (e, t, n) => this.#h() ? {
 			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, {
+			x: F(e, n.width - a(this.offsetWidth, this)),
+			y: F(t, n.height - a(this.offsetHeight, this))
+		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new h(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
-				this.#P();
-				let t = this.#p.seed();
-				return this.#m = {
+				this.#L();
+				let t = this.#g.seed();
+				return this.#_ = {
 					origin: t,
-					frame: this.#S(),
+					frame: this.#T(),
 					pointer: {
 						clientX: e.clientX,
 						clientY: e.clientY
 					},
+					press: {
+						clientX: e.clientX,
+						clientY: e.clientY
+					},
+					slop: g(e),
 					proposal: null,
 					outline: null,
 					followers: [],
-					size: this.#C()
+					size: this.#E()
 				}, t;
 			},
 			onDrag: (e, t, n) => {
-				this.#E(e, t, n);
+				this.#k(e, t, n);
 			},
 			onDragEnd: (e, t) => {
-				this.#D(e, t);
+				this.#A(e, t);
 			}
-		}), this.#g = new m(this, () => [[
+		}), this.#y = new m(this, () => [[
 			document,
 			"keydown",
-			this.#_,
+			this.#b,
 			!0
-		]]), this.#_ = (e) => {
-			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#h.cancel());
-		}, this.#v = null, this.#y = new m(this, () => [[
+		]]), this.#b = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#v.cancel());
+		}, this.#x = null, this.#S = new m(this, () => [[
 			document,
 			"pointerdown",
-			this.#b,
+			this.#C,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#x,
+			this.#w,
 			!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) => {
+		]]), this.#C = () => {
+			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.#K();
+		}, this.#V = () => {
+			this.#U();
+		}, this.#Z = (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.#H();
-			let i = !e.shiftKey && !e.metaKey;
-			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.#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.#Z = (e) => {
+			this.#l = e.timeStamp, this.#G();
+			let i = this.#f;
+			this.#f = null, this.#u = e.pointerType !== "mouse", this.#d = this.#u && e.isPrimary ? {
+				pointerId: e.pointerId,
+				time: e.timeStamp,
+				x: e.clientX,
+				y: e.clientY,
+				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.#X(!0) : this.#X(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#J && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
+		}, this.#Q = () => {
+			this._editing || this.#u || e(this, "vf-open", {});
+		}, this.#$ = (t) => {
+			let n = this.#_?.proposal != null;
+			this.#v.onPointerUp(t);
+			let r = this.#ee(t, n);
+			if (this.#a) {
+				this.#a = !1;
+				let e = t.type === "pointerup" ? this.#i : null;
+				for (let t of e?.querySelectorAll("vf-icon") ?? []) t !== this && t.selected && t.setSelected(!1);
+			}
+			r && e(this, "vf-open", {});
+		}, this.#te = (e) => {
 			let t = e.composedPath();
-			if (t.includes(this) || (this.#H(), e.shiftKey || e.metaKey)) return;
+			if (t.includes(this) || (this.#G(), this.#f = null, e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
-				let e = t.find((e) => e instanceof k);
+				let e = t.find((e) => e instanceof j);
 				if (e?.selected && e.#i === n) return;
 			}
-			this.#q(!1);
-		}, this.#Q = (e) => {
+			this.#X(!1);
+		}, this.#ne = (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.#ee(a);
-		}, this.#$ = (e) => {
+			a.length > this.maxlength && this.#ie(a);
+		}, this.#re = (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.#ee(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ie(e);
 			}
 			this._draft = t.value;
-		}, this.#te = (e) => {
+		}, this.#ae = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#ne = (t) => {
-			if (this.#H(), !(this._editing || t.defaultPrevented)) {
+		}, this.#oe = (t) => {
+			if (this.#G(), !(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;
@@ -131,7 +150,7 @@ var k, A = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#q(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#X(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -139,17 +158,17 @@ var k, A = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						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);
+						let e = t.shiftKey ? P : N, 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);
 					}
 				}
 			}
 		};
 	}
 	static {
-		this.styles = [d, w`
+		this.styles = [d, E`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -165,6 +184,9 @@ var k, A = {
         display: flex;
         flex-direction: column;
         align-items: center;
+        /* Two taps open the icon, so the platform's double-tap zoom is off
+           over it. A pan or a pinch that starts here is still the page's. */
+        touch-action: manipulation;
       }
       /* The frame is the drag handle, so a touch on a movable icon is the
          drag and never the page's pan — the window and dialog title bars
@@ -392,7 +414,10 @@ var k, A = {
 	#l;
 	#u;
 	#d;
-	#f() {
+	#f;
+	#p;
+	#m;
+	#h() {
 		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;
@@ -400,19 +425,19 @@ var k, A = {
 		} else t = t instanceof ShadowRoot ? t.host : null;
 		return !1;
 	}
-	#p;
-	#m;
-	#h;
 	#g;
 	#_;
 	#v;
 	#y;
 	#b;
 	#x;
-	#S() {
+	#S;
+	#C;
+	#w;
+	#T() {
 		return this.renderRoot?.querySelector(".frame")?.getBoundingClientRect() ?? this.getBoundingClientRect();
 	}
-	#C() {
+	#E() {
 		return {
 			width: a(this.offsetWidth, this),
 			height: a(this.offsetHeight, this)
@@ -420,22 +445,22 @@ var k, A = {
 	}
 	followDrag(e) {
 		if (!this.movable || this._editing) return null;
-		let t = this.#p.seed(), n = this.#A(this.#S(), e);
+		let t = this.#g.seed(), n = this.#N(this.#T(), e);
 		return {
 			icon: this,
 			origin: t,
-			offset: this.#p.offset,
-			size: this.#C(),
+			offset: this.#g.offset,
+			size: this.#E(),
 			move: (e, t) => {
-				n && this.#j(n, e, t);
+				n && this.#P(n, e, t);
 			},
 			drop: (e, n) => {
-				this.#p.moveTo(t.x + e, t.y + n);
+				this.#g.moveTo(t.x + e, t.y + n);
 			},
 			end: () => n?.canvas.remove()
 		};
 	}
-	#w(e) {
+	#D(e) {
 		if (!this.selected) return [];
 		let t = this.#i;
 		if (!t) return [];
@@ -447,26 +472,26 @@ var k, A = {
 		}
 		return n;
 	}
-	#T(e) {
+	#O(e) {
 		return [this, ...e.followers.map((e) => e.icon)];
 	}
-	#E(t, n, r) {
-		let i = this.#m;
+	#k(t, n, r) {
+		let i = this.#_;
 		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.#H(), this.#a = !1, 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 = {
 				left: i.origin.x,
 				top: i.origin.y
-			}, this.#g.attach();
-			let r = this.#k();
-			i.outline = this.#A(i.frame, r), i.followers = this.#w(r), e(this, "vf-drag-start", {
+			}, this.#y.attach();
+			let a = this.#M();
+			i.outline = this.#N(i.frame, a), i.followers = this.#D(a), e(this, "vf-drag-start", {
 				left: i.origin.x,
 				top: i.origin.y,
-				icons: this.#T(i)
+				icons: this.#O(i)
 			});
 		}
 		if (t === i.proposal.left && n === i.proposal.top) return;
@@ -475,14 +500,14 @@ var k, A = {
 			top: n
 		};
 		let a = t - i.origin.x, o = n - i.origin.y;
-		i.outline && this.#j(i.outline, a, o);
+		i.outline && this.#P(i.outline, a, o);
 		for (let e of i.followers) e.move(a, o);
-		e(this, "vf-drag", this.#M(i));
+		e(this, "vf-drag", this.#F(i));
 	}
-	#D(t, n) {
-		let r = this.#m;
-		if (this.#m = null, !r?.proposal) return;
-		this.#g.detach(), r.outline?.canvas.remove();
+	#A(t, n) {
+		let r = this.#_;
+		if (this.#_ = null, !r?.proposal) return;
+		this.#y.detach(), r.outline?.canvas.remove();
 		for (let e of r.followers) e.end();
 		if (t && (r.pointer = {
 			clientX: t.clientX,
@@ -491,36 +516,36 @@ var k, A = {
 			e(this, "vf-drag-cancel", {});
 			return;
 		}
-		let i = this.#M(r);
-		e(this, "vf-drop", i, { cancelable: !0 }) && this.#O(r, i);
+		let i = this.#F(r);
+		e(this, "vf-drop", i, { cancelable: !0 }) && this.#j(r, i);
 	}
-	#O(e, t) {
+	#j(e, t) {
 		if (e.followers.length === 0) {
-			this.#p.moveTo(t.left, t.top);
+			this.#g.moveTo(t.left, t.top);
 			return;
 		}
-		let n = this.#p.bounds, r = (e, t) => ({
+		let n = this.#g.bounds, r = (e, t) => ({
 			x: e.x - t.x,
 			y: e.y - t.y
 		}), i = [{
-			corner: r(e.origin, this.#p.offset),
+			corner: r(e.origin, this.#g.offset),
 			size: e.size
 		}, ...e.followers.map((e) => ({
 			corner: r(e.origin, e.offset),
 			size: e.size
-		}))], a = this.#f(), o = (e, t, n, r) => {
+		}))], a = this.#h(), 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);
+		this.#g.moveTo(e.origin.x + s, e.origin.y + c);
 		for (let t of e.followers) t.drop(s, c);
 	}
-	#k() {
+	#M() {
 		let t = { surface: null };
 		return e(this, "vf-drag-surface-request", t, { composed: !1 }), t.surface;
 	}
-	#A(e, t) {
+	#N(e, t) {
 		let n = this.renderRoot, a = n?.querySelector(".frame");
 		if (!a) return null;
 		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) => ({
@@ -541,28 +566,26 @@ var k, A = {
 			plate: c ? p(c) : null
 		});
 		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)
+		let x = C("drag-outline"), S = x.style;
+		S.position = "absolute", S.width = i(b.width), S.height = i(b.height);
+		let w = t ?? a, T = t ? t.getBoundingClientRect() : e, E = {
+			x: Math.round((l - T.left) / o),
+			y: Math.round((u - T.top) / o)
 		};
-		return C.append(x), {
+		return w.append(x), {
 			ring: b,
 			canvas: x,
-			base: T,
+			base: E,
 			phase: -1
 		};
 	}
-	#j(e, t, n) {
+	#P(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 = S(r, a);
 		o !== e.phase && (e.phase = o, x(e.ring, e.canvas, o));
 	}
-	#M(e) {
+	#F(e) {
 		let { left: t, top: n } = e.proposal ?? {
 			left: e.origin.x,
 			top: e.origin.y
@@ -574,32 +597,32 @@ var k, A = {
 			top: n,
 			x: e.frame.left + (t - e.origin.x) * i,
 			y: e.frame.top + (n - e.origin.y) * i,
-			icons: this.#T(e)
+			icons: this.#O(e)
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#K(), this.#U(), this.selectable && this.selected && this.#u.attach(), this.addEventListener("keydown", this.#ne);
+		super.connectedCallback(), this.#Y(), this.#K(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#oe);
 	}
 	disconnectedCallback() {
-		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();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#oe), this.#G(), this.#_?.outline?.canvas.remove();
+		for (let e of this.#_?.followers ?? []) e.end();
+		this.#_ = null, this.#x?.finish();
 	}
 	updated(e) {
-		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) {
+		if (e.has("selectable") && this.#Y(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#K(), (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.#F(), (e.has("open") || e.has("size")) && this.#z();
+		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#R(), (e.has("open") || e.has("size")) && this.#H();
 	}
-	#N;
-	#P() {
-		this.#N ||= l(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
+	#I;
+	#L() {
+		this.#I ||= 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.#F());
+		document.fonts.ready.then(() => this.#R());
 	}
-	#F() {
+	#R() {
 		let e = this.renderRoot?.querySelector(".name");
 		if (!e) {
 			this.#e = 0;
@@ -611,14 +634,14 @@ var k, A = {
 			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, A[this.size]) : i, e.style.width = this.#I;
+		this.#e = this._editing && t === 0 ? Math.max(i, M[this.size]) : i, e.style.width = this.#z;
 	}
-	get #I() {
+	get #z() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
 	}
-	#L;
-	#R;
-	#z() {
+	#B;
+	#V;
+	#H() {
 		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");
@@ -627,9 +650,9 @@ var k, A = {
 				break;
 			}
 		}
-		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();
+		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();
 	}
-	#B() {
+	#U() {
 		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 = "";
@@ -645,16 +668,16 @@ var k, A = {
 		}
 		this._ghost = r, this.#o = r ? n : "";
 	}
-	#V() {
-		this.#H(), this.#c = window.setTimeout(() => {
+	#W() {
+		this.#G(), this.#c = window.setTimeout(() => {
 			this.#c = 0, this.startEditing();
 		}, 800);
 	}
-	#H() {
+	#G() {
 		this.#c &&= (clearTimeout(this.#c), 0);
 	}
 	startEditing() {
-		this.#H(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
+		this.#G(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
 	}
 	commitEditing() {
 		if (!this._editing) return;
@@ -678,45 +701,45 @@ var k, A = {
 	}
 	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 T`<div
+		return D`<div
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#J}
-      @pointermove=${this.#h.onPointerMove}
-      @pointerup=${this.#X}
-      @pointercancel=${this.#X}
-      @dblclick=${this.#Y}
+      @pointerdown=${this.#Z}
+      @pointermove=${this.#v.onPointerMove}
+      @pointerup=${this.#$}
+      @pointercancel=${this.#$}
+      @dblclick=${this.#Q}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? T`<slot name="small" @slotchange=${this.#L}></slot>` : T`<slot name="large" @slotchange=${this.#L}></slot>`}${this._ghost ?? E}
+        ${this.size === "small" ? D`<slot name="small" @slotchange=${this.#B}></slot>` : D`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? O}
       </div>
-      ${r ? T`<div class=${i}>
+      ${r ? D`<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.#I}` : ""}
+              style=${this.#e ? `width: ${this.#z}` : ""}
               >${t}</span
             ></div>
-            ${e ? T`<div class="rename-box">
+            ${e ? D`<div class="rename-box">
                   <input
                     class="rename"
                     part="input"
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#Q}
-                    @input=${this.#$}
-                    @keydown=${this.#te}
+                    @beforeinput=${this.#ne}
+                    @input=${this.#re}
+                    @keydown=${this.#ae}
                     @blur=${this.commitEditing}
                   />
-                </div>` : E}
-          </div>` : E}
+                </div>` : O}
+          </div>` : O}
     </div>`;
 	}
-	#U() {
+	#K() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -725,22 +748,22 @@ var k, A = {
 			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.#W || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#q || null;
 	}
-	get #W() {
+	get #q() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #G() {
+	get #J() {
 		return this.selectable;
 	}
-	#K() {
-		this.hasAttribute("tabindex") || (this.#G ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#Y() {
+		this.hasAttribute("tabindex") || (this.#J ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#q(t) {
+	#X(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#q(e);
+		this.#X(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -753,57 +776,68 @@ var k, A = {
 		}
 		return !1;
 	}
+	cellRect() {
+		return this.checkVisibility() ? this.renderRoot?.querySelector(".art")?.getBoundingClientRect() ?? this.getBoundingClientRect() : null;
+	}
 	moveTo(e, t) {
-		this.#v?.finish(), this.#P(), this.#p.seed(), this.#p.moveTo(e, t);
+		this.#x?.finish(), this.#L(), this.#g.seed(), this.#g.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) => {
+		if (this.#x?.finish(), await this.updateComplete, this.#x?.finish(), !this.isConnected) return !1;
+		this.#L();
+		let n = this.#g.seed(), r = this.#g.resolve(e, t), i = r.x - n.x, a = r.y - n.y, o = i === 0 && a === 0 || _() || this._editing || this.#_ !== null ? null : this.#N(this.#T(), this.#M());
+		return o ? (this.#P(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;
-	#X;
+			t = v(Math.hypot(i, a), (e) => this.#P(o, Math.round(i * e), Math.round(a * e)), () => {
+				this.#x === t && (this.#x = null, this.#S.detach()), o.canvas.remove(), this.isConnected && this.#g.moveTo(r.x, r.y), e(!0);
+			}), this.#x = t, this.#S.attach();
+		})) : (this.#g.moveTo(r.x, r.y), !1);
+	}
 	#Z;
 	#Q;
 	#$;
-	#ee(t) {
+	#ee(e, t) {
+		let n = this.#d;
+		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type === "pointerup" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < g(e))) ? !1 : n.second ? !0 : (this.#f = {
+			time: n.time,
+			x: n.x,
+			y: n.y
+		}, !1);
+	}
+	#te;
+	#ne;
+	#re;
+	#ie(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#te;
-	#ne;
+	#ae;
+	#oe;
 };
-o([D()], P.prototype, "label", void 0), o([D({ reflect: !0 })], P.prototype, "size", void 0), o([D({
+o([k()], I.prototype, "label", void 0), o([k({ reflect: !0 })], I.prototype, "size", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "selectable", void 0), o([D({
+})], I.prototype, "selectable", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "selected", void 0), o([D({
+})], I.prototype, "selected", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "target", void 0), o([D({
+})], I.prototype, "target", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "color", void 0), o([D({
+})], I.prototype, "color", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "open", void 0), o([D({
+})], I.prototype, "open", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "movable", void 0), o([D({
+})], I.prototype, "movable", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], 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);
+})], I.prototype, "editable", void 0), o([k({ type: Number })], I.prototype, "width", void 0), o([k({ type: Number })], I.prototype, "maxlength", void 0), o([A()], I.prototype, "_editing", void 0), o([A()], I.prototype, "_draft", void 0), o([A()], I.prototype, "_ghost", void 0), I = j = o([t("vf-icon")], I);
 //#endregion
-export { P as VfIcon };
+export { I as VfIcon };