vintage-frames 0.9.0 → 0.10.0

package/dist/components/vf-icon-field.js

@@ -6,6 +6,7 @@ import { VfPositioned as a } from "../position.js";
 import { vfBase as o } from "../styles/recipes/host.js";
 import { DocumentListenersController as s } from "../document-listeners.js";
 import { VfSized as c } from "../size.js";
+import "../motion.js";
 import { paintSelectionRect as l, penPhase as u } from "../open-art.js";
 import { LitElement as d, css as f, html as p } from "lit";
 import { property as m } from "lit/decorators.js";
@@ -48,34 +49,52 @@ var h = (e, t, n) => Math.min(Math.max(e, t), n), g = class extends c(a(d)) {
 	#e;
 	#t;
 	#n;
+	#r;
+	#i;
+	#a;
+	#o;
 	constructor() {
 		super(), this.label = "", this.scale = new n(this), this.#e = this.attachInternals(), this.#t = null, this.#n = new s(this, () => [[
 			document,
 			"keydown",
-			this.#l,
+			this.#p,
+			!0
+		]]), this.#r = null, this.#i = new s(this, () => [[
+			document,
+			"pointerdown",
+			this.#a,
+			!0
+		], [
+			document,
+			"keydown",
+			this.#o,
 			!0
-		]]), this.#r = () => {
-			this.#i();
+		]]), this.#a = () => {
+			this.#S();
 		}, this.#o = (e) => {
+			e.key !== "Escape" || !this.#r || (e.preventDefault(), e.stopPropagation(), this.#S());
+		}, this.#s = () => {
+			this.#c();
+		}, this.#u = (e) => {
 			if (this.#t || e.button !== 0 || e.target !== this) return;
 			let t = this.getBoundingClientRect();
 			if (t.width <= 0 || t.height <= 0) return;
-			let n = r(this), i = this.#f(t, n);
+			let n = r(this), i = this.#g(t, n);
 			this.#t = {
 				pointerId: e.pointerId,
 				box: t,
 				reach: i,
-				origin: this.#d(e, t, n, i),
-				screen: this.#p(t, n),
-				anchor: new Set(this.#a().filter((e) => e.selected)),
+				origin: this.#h(e, t, n, i),
+				screen: this.#_(t, n),
+				anchor: new Set(this.#l().filter((e) => e.selected)),
 				rect: null,
 				canvas: null,
 				phase: -1
 			}, this.setPointerCapture(e.pointerId), e.preventDefault();
-		}, this.#s = (e) => {
+		}, this.#d = (e) => {
 			let t = this.#t;
 			if (!t || e.pointerId !== t.pointerId) return;
-			let n = r(this), i = this.#d(e, t.box, n, t.reach);
+			let n = r(this), i = this.#h(e, t.box, n, t.reach);
 			if (!t.rect && i.x === t.origin.x && i.y === t.origin.y) return;
 			let a = {
 				x: Math.min(t.origin.x, i.x),
@@ -83,46 +102,46 @@ var h = (e, t, n) => Math.min(Math.max(e, t), n), g = class extends c(a(d)) {
 				width: Math.abs(i.x - t.origin.x),
 				height: Math.abs(i.y - t.origin.y)
 			}, o = t.rect;
-			o && o.x === a.x && o.y === a.y && o.width === a.width && o.height === a.height || (o || (this.#n.attach(), t.canvas = this.#m(), this.renderRoot.append(t.canvas)), t.rect = a, this.#h(t, n), this.#g(t, n));
-		}, this.#c = (e) => {
+			o && o.x === a.x && o.y === a.y && o.width === a.width && o.height === a.height || (o || (this.#n.attach(), t.canvas = this.#v(), this.renderRoot.append(t.canvas)), t.rect = a, this.#y(t, n), this.#b(t, n));
+		}, this.#f = (e) => {
 			let t = this.#t;
-			!t || e.pointerId !== t.pointerId || this.#u(e.type === "pointercancel");
-		}, this.#l = (e) => {
-			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#u(!0));
-		}, this.#e.role = "listbox", this.#e.ariaMultiSelectable = "true", this.addEventListener("pointerdown", this.#o), this.addEventListener("pointermove", this.#s), this.addEventListener("pointerup", this.#c), this.addEventListener("pointercancel", this.#c);
+			!t || e.pointerId !== t.pointerId || this.#m(e.type === "pointercancel");
+		}, this.#p = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#m(!0));
+		}, this.#e.role = "listbox", this.#e.ariaMultiSelectable = "true", this.addEventListener("pointerdown", this.#u), this.addEventListener("pointermove", this.#d), this.addEventListener("pointerup", this.#f), this.addEventListener("pointercancel", this.#f);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#t?.canvas?.remove(), this.#t = null;
+		super.disconnectedCallback(), this.#t?.canvas?.remove(), this.#t = null, this.#S();
 	}
 	updated(e) {
-		e.has("label") && (this.#e.ariaLabel = this.label || null), e.has("size") && this.#i();
+		e.has("label") && (this.#e.ariaLabel = this.label || null), e.has("size") && this.#c();
 	}
-	#r;
-	#i() {
+	#s;
+	#c() {
 		let e = this.size;
 		if (e != null) for (let t of this.querySelectorAll("vf-icon")) t.size !== e && (t.size = e);
 	}
-	#a() {
+	#l() {
 		return [...this.querySelectorAll("vf-icon")].filter((e) => e.selectable);
 	}
-	#o;
-	#s;
-	#c;
-	#l;
-	#u(e) {
+	#u;
+	#d;
+	#f;
+	#p;
+	#m(e) {
 		let t = this.#t;
-		if (t && (this.#t = null, this.hasPointerCapture(t.pointerId) && this.releasePointerCapture(t.pointerId), t.rect && (this.#n.detach(), t.canvas?.remove(), e))) for (let e of this.#a()) {
+		if (t && (this.#t = null, this.hasPointerCapture(t.pointerId) && this.releasePointerCapture(t.pointerId), t.rect && (this.#n.detach(), t.canvas?.remove(), e))) for (let e of this.#l()) {
 			let n = t.anchor.has(e);
 			e.selected !== n && e.setSelected(n);
 		}
 	}
-	#d(e, t, n, r) {
+	#h(e, t, n, r) {
 		return {
 			x: h(Math.round((e.clientX - t.left) / n), r.minX, r.maxX),
 			y: h(Math.round((e.clientY - t.top) / n), r.minY, r.maxY)
 		};
 	}
-	#f(e, t) {
+	#g(e, t) {
 		let n = e.left, r = e.top, i = e.right, a = e.bottom, o = this.assignedSlot ?? this.parentNode;
 		for (; o;) if (o instanceof Element) {
 			let e = getComputedStyle(o);
@@ -140,7 +159,7 @@ var h = (e, t, n) => Math.min(Math.max(e, t), n), g = class extends c(a(d)) {
 			maxY: Math.max(0, Math.floor(s((a - e.top) / t)))
 		};
 	}
-	#p(t, n) {
+	#_(t, n) {
 		let r = { surface: null };
 		if (e(this, "vf-drag-surface-request", r, { composed: !1 }), !r.surface) return {
 			x: 0,
@@ -152,19 +171,19 @@ var h = (e, t, n) => Math.min(Math.max(e, t), n), g = class extends c(a(d)) {
 			y: Math.round((t.top - i.top) / n)
 		};
 	}
-	#m() {
+	#v() {
 		let e = document.createElement("canvas");
 		e.className = "selection-rect";
 		let t = e.style;
 		return t.position = "fixed", t.display = "block", t.pointerEvents = "none", t.filter = "invert(1)", t.mixBlendMode = "difference", t.imageRendering = "pixelated", e;
 	}
-	#h(e, t) {
+	#y(e, t) {
 		let { rect: n, canvas: r } = e;
 		if (!n || !r) return;
 		let i = Math.max(1, n.width), a = Math.max(1, n.height), o = u(e.screen.x + n.x, e.screen.y + n.y);
 		l(r, i, a, o), e.phase = o, r.style.left = `${e.box.left + n.x * t}px`, r.style.top = `${e.box.top + n.y * t}px`, r.style.width = `${i * t}px`, r.style.height = `${a * t}px`;
 	}
-	#g(e, t) {
+	#b(e, t) {
 		let { rect: n } = e;
 		if (!n) return;
 		let r = {
@@ -173,13 +192,53 @@ var h = (e, t, n) => Math.min(Math.max(e, t), n), g = class extends c(a(d)) {
 			right: e.box.left + (n.x + Math.max(1, n.width)) * t,
 			bottom: e.box.top + (n.y + Math.max(1, n.height)) * t
 		};
-		for (let t of this.#a()) {
+		for (let t of this.#l()) {
 			let n = e.anchor.has(t) !== t.touches(r);
 			t.selected !== n && t.setSelected(n);
 		}
 	}
+	dragIcons(e) {
+		this.#S();
+		let t = {
+			queue: [...e],
+			beat: null,
+			finished: !1,
+			settle: () => {}
+		}, n = new Promise((e) => {
+			t.settle = e;
+		});
+		return this.#r = t, this.#i.attach(), this.#x(t), n;
+	}
+	async #x(e) {
+		for (; !e.finished && e.queue.length > 0;) {
+			let t = e.queue[0];
+			if (!t) break;
+			let { icon: n, left: r, top: i } = t, a = n.isConnected ? await n.dragTo(r, i) : !1;
+			if (e.finished) return;
+			e.queue.shift(), !(!a || e.queue.length === 0) && await new Promise((t) => {
+				let n = window.setTimeout(() => {
+					e.beat = null, t();
+				}, 50);
+				e.beat = () => {
+					window.clearTimeout(n), e.beat = null, t();
+				};
+			});
+		}
+		this.#C(e);
+	}
+	#S() {
+		let e = this.#r;
+		if (e) {
+			e.beat?.();
+			for (let { icon: t, left: n, top: r } of e.queue) t.isConnected && t.moveTo(n, r);
+			e.queue.length = 0, this.#C(e);
+		}
+	}
+	#C(e) {
+		e.finished || (e.finished = !0, this.#r === e && (this.#r = null, this.#i.detach()), e.settle());
+	}
 	render() {
-		return p`<slot @slotchange=${this.#r}></slot>`;
+		return p`<slot @slotchange=${this.#s}></slot>`;
 	}
 };
 i([m()], g.prototype, "label", void 0), i([m({ reflect: !0 })], g.prototype, "size", void 0), g = i([t("vf-icon-field")], g);

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

@@ -226,7 +226,8 @@ declare const VfIcon_base: (new (...args: any[]) => import("../position.js").VfP
  *   changed the snapped proposal;
  * - `vf-drop`, the same shape at the release, **cancelable**: its default
  *   action is the move, the proposal written through `left`/`top` and
- *   clamped whole in the container measured at the press. `preventDefault()`
+ *   clamped whole in the container measured at the press — held at the
+ *   origin only in a scrolling plane, whose rails reach the rest. `preventDefault()`
  *   writes nothing — the page re-parents or places the icon itself, the
  *   outline's origin converted with the destination's `placementAt`;
  * - `vf-drag-cancel` `{}` on Escape or a `pointercancel`: nothing written.
@@ -270,6 +271,33 @@ declare const VfIcon_base: (new (...args: any[]) => import("../position.js").VfP
  * under `color` — with none of `selected`'s semantics: no event, no outside
  * listener, no `aria-selected`, the plate untouched.
  *
+ * ### The page drags it too
+ *
+ * The Finder's Clean Up walked a container's icons one at a time, each
+ * icon's outline travelling from where it sat to its cell and the icon
+ * landing when the outline arrived — the drag's own vocabulary, with the
+ * Finder for a hand. {@link dragTo} is that move for one icon: the outline
+ * built and placed as a drag's is, on the desktop's surface or in the frame,
+ * stepped to the landing at the walk's cadence ({@link runOutlineTravel},
+ * src/motion.ts — the kit's, no knobs), then the outline down and the icon
+ * written where a drop would write it. The landing is resolved before the
+ * outline sets off, so the outline goes where the icon will land rather
+ * than where a pair past the container's edge pointed. {@link moveTo} is
+ * that write alone: the drop's clamp and snap, one `vf-placement-change` —
+ * where a property set is the authored pair, unclamped. Neither fires a
+ * drag event (the page is the mover and already knows) and neither needs
+ * `movable`, which says the hand may drag: the page may always place its
+ * icon. `vf-icon-field.dragIcons` walks a set through `dragTo` with the
+ * Finder's beat between landings.
+ *
+ * A walk is finished, never cancelled: a press anywhere, or Escape, lands
+ * the icon at once — the user wants the machine back, and the move was the
+ * page's to make. A second `dragTo`, or a `moveTo`, finishes the one in
+ * flight the same way; leaving the DOM takes the outline down and writes
+ * nothing. Under `prefers-reduced-motion` the icon lands at once with no
+ * outline, the blink's posture — as does one being renamed, or one under
+ * the hand's own press.
+ *
  * Opening gets the same treatment. The double-click is the pointer gesture,
  * and its keyboard route is ⌘O / ⌘↓ — the System 7 Open shortcuts, with Ctrl
  * standing in for ⌘ off the Mac. Return is deliberately not one of them: the
@@ -564,6 +592,25 @@ export declare class VfIcon extends VfIcon_base {
         right: number;
         bottom: number;
     }): boolean;
+    /**
+     * Place the icon as a drop would: the stated pair — the origin point
+     * under an `origin`, the corner without one — clamped whole in the
+     * container measured now (held at the origin only in a scrolling plane),
+     * snapped onto the lattice, announced as one `vf-placement-change`. A
+     * `left`/`top` write is the authored pair, unclamped; this is the
+     * gesture's. Finishes a walk in flight first.
+     */
+    moveTo(left: number, top: number): void;
+    /**
+     * Move the icon the way a drag moves it (see the class doc): its outline
+     * travels from where it sits to where it will land, and the icon lands
+     * when the outline arrives, written as {@link moveTo} writes. Resolves
+     * once it has landed — to whether the outline travelled; false when the
+     * icon landed at once: already there, `prefers-reduced-motion`, nothing
+     * to draw the outline with, or not in the DOM (nothing written then).
+     * Fires no drag event. A walk already in flight here is finished first.
+     */
+    dragTo(left: number, top: number): Promise<boolean>;
 }
 declare global {
     interface HTMLElementTagNameMap {