@autono/pinbox-toolbar 0.16.0 → 0.18.0

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-z-YC_RT4.js";
+import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-BsWnyGwB.js";
 export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-z-YC_RT4.js";
+import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-BsWnyGwB.js";
 import { createElement, useEffect, useRef } from "react";
 //#region src/react.ts
 /**

package/dist/{src-z-YC_RT4.js → src-BsWnyGwB.js}

@@ -239,20 +239,31 @@ const DRAG_START = 8;
 /** …but a release under this much TOTAL travel is still a tap. */
 const TAP_MAX = 12;
 /**
-* Attach the drag rules to `el`. Move/up listeners live on `el` itself with pointer capture
-* (a capture failure on a synthetic pointer is tolerated); `touch-action: none` on the element
-* is the caller's job.
+* Attach the drag rules to `el`. The press is read on `el`; move/up/cancel are read on its
+* document while a hold is live, so the release cannot be lost to a failed capture. Pointer
+* capture is still requested (it keeps moves flowing when the pointer leaves the window);
+* `touch-action: none` on the element is the caller's job.
 */
 function attachDrag(el, on) {
+	const doc = el.ownerDocument;
+	const win = doc.defaultView;
 	let hold = null;
+	function listen(active) {
+		const method = active ? "addEventListener" : "removeEventListener";
+		doc[method]("pointermove", onPointerMove, true);
+		doc[method]("pointerup", onPointerUp, true);
+		doc[method]("pointercancel", onPointerUp, true);
+		win?.[method]("blur", onBlur);
+	}
 	function onPointerDown(e) {
-		if (e.button !== 0) return;
+		if (e.button !== 0 || hold !== null) return;
 		const origin = on.origin();
 		if (origin === null) return;
 		try {
 			el.setPointerCapture(e.pointerId);
 		} catch {}
 		hold = {
+			pointerId: e.pointerId,
 			px: e.clientX,
 			py: e.clientY,
 			origin,
@@ -260,16 +271,17 @@ function attachDrag(el, on) {
 			ly: e.clientY,
 			started: false
 		};
+		listen(true);
 	}
 	function onPointerMove(e) {
-		if (hold === null) return;
+		if (hold === null || e.pointerId !== hold.pointerId) return;
 		hold.lx = e.clientX;
 		hold.ly = e.clientY;
 		const dx = e.clientX - hold.px;
 		const dy = e.clientY - hold.py;
 		if (!hold.started) {
 			if (!on.canStart()) {
-				hold = null;
+				release();
 				return;
 			}
 			if (Math.hypot(dx, dy) < DRAG_START) return;
@@ -281,10 +293,18 @@ function attachDrag(el, on) {
 			y: hold.origin.y + dy
 		});
 	}
-	function onPointerUp() {
-		if (hold === null) return;
-		const h = hold;
+	function release() {
 		hold = null;
+		listen(false);
+	}
+	/** The window lost focus mid-hold: whatever the pointer does next, we will not see it. */
+	function onBlur() {
+		if (hold !== null) onPointerUp();
+	}
+	function onPointerUp(e) {
+		if (hold === null || e !== void 0 && e.pointerId !== hold.pointerId) return;
+		const h = hold;
+		release();
 		const total = Math.hypot(h.lx - h.px, h.ly - h.py);
 		on.onEnd({
 			dragged: h.started && total >= TAP_MAX,
@@ -297,19 +317,11 @@ function attachDrag(el, on) {
 		});
 	}
 	el.addEventListener("pointerdown", onPointerDown);
-	el.addEventListener("pointermove", onPointerMove);
-	el.addEventListener("pointerup", onPointerUp);
-	el.addEventListener("pointercancel", onPointerUp);
 	return {
-		cancel() {
-			hold = null;
-		},
+		cancel: release,
 		destroy() {
-			hold = null;
+			release();
 			el.removeEventListener("pointerdown", onPointerDown);
-			el.removeEventListener("pointermove", onPointerMove);
-			el.removeEventListener("pointerup", onPointerUp);
-			el.removeEventListener("pointercancel", onPointerUp);
 		}
 	};
 }
@@ -479,6 +491,7 @@ function createMinimize(host) {
 		ui.surface.style.borderRadius = `${m.r}px`;
 		ui.surface.style.transform = `translate(${m.x}px, ${m.y}px)`;
 		ui.carrier.style.transform = `translate(${m.x + m.w / 2 - PUCK / 2}px, ${m.y + m.h / 2 - PUCK / 2}px)`;
+		if (mode === "settle") placePuck(m.x, m.y);
 		const iconOn = mode === "drag" || mode === "settle" || (mode === "toPuck" || mode === "toBar") && m.w < CARRIER_MAX_W;
 		ui.carrier.classList.toggle("show", iconOn);
 	}
@@ -653,9 +666,17 @@ function createMinimize(host) {
 		if (path.includes(ui.fan) || path.includes(ui.puck)) return;
 		closeFan();
 	}
+	/** Grabbable at rest and while settling — mid-flight, the spring's current spot is the origin. */
+	const grabbable = () => mode === "puck" || mode === "settle";
 	const drag = attachDrag(ui.puck, {
-		origin: () => mode === "puck" ? puckPos : null,
-		canStart: () => mode === "puck",
+		origin: () => {
+			if (mode === "settle") return {
+				x: main.cur.x,
+				y: main.cur.y
+			};
+			return mode === "puck" ? puckPos : null;
+		},
+		canStart: grabbable,
 		onStart(origin) {
 			closeFan();
 			mode = "drag";
@@ -718,6 +739,9 @@ function createMinimize(host) {
 				x: main.tgt.x,
 				y: main.tgt.y
 			});
+			placePuck(main.cur.x, main.cur.y);
+			ui.puck.classList.remove("pb-ghost");
+			hideMorph();
 			main.to({
 				...p,
 				w: PUCK,

package/dist/svelte.js

@@ -1,4 +1,4 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-z-YC_RT4.js";
+import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-BsWnyGwB.js";
 //#region src/svelte.ts
 /**
 * `<div use:pinbox={{ endpoint }} />` — creates + configures the element BEFORE insertion

package/dist/toolbar.iife.js

@@ -241,20 +241,31 @@ var Pinbox = (function(exports) {
 	/** …but a release under this much TOTAL travel is still a tap. */
 	const TAP_MAX = 12;
 	/**
-	* Attach the drag rules to `el`. Move/up listeners live on `el` itself with pointer capture
-	* (a capture failure on a synthetic pointer is tolerated); `touch-action: none` on the element
-	* is the caller's job.
+	* Attach the drag rules to `el`. The press is read on `el`; move/up/cancel are read on its
+	* document while a hold is live, so the release cannot be lost to a failed capture. Pointer
+	* capture is still requested (it keeps moves flowing when the pointer leaves the window);
+	* `touch-action: none` on the element is the caller's job.
 	*/
 	function attachDrag(el, on) {
+		const doc = el.ownerDocument;
+		const win = doc.defaultView;
 		let hold = null;
+		function listen(active) {
+			const method = active ? "addEventListener" : "removeEventListener";
+			doc[method]("pointermove", onPointerMove, true);
+			doc[method]("pointerup", onPointerUp, true);
+			doc[method]("pointercancel", onPointerUp, true);
+			win?.[method]("blur", onBlur);
+		}
 		function onPointerDown(e) {
-			if (e.button !== 0) return;
+			if (e.button !== 0 || hold !== null) return;
 			const origin = on.origin();
 			if (origin === null) return;
 			try {
 				el.setPointerCapture(e.pointerId);
 			} catch {}
 			hold = {
+				pointerId: e.pointerId,
 				px: e.clientX,
 				py: e.clientY,
 				origin,
@@ -262,16 +273,17 @@ var Pinbox = (function(exports) {
 				ly: e.clientY,
 				started: false
 			};
+			listen(true);
 		}
 		function onPointerMove(e) {
-			if (hold === null) return;
+			if (hold === null || e.pointerId !== hold.pointerId) return;
 			hold.lx = e.clientX;
 			hold.ly = e.clientY;
 			const dx = e.clientX - hold.px;
 			const dy = e.clientY - hold.py;
 			if (!hold.started) {
 				if (!on.canStart()) {
-					hold = null;
+					release();
 					return;
 				}
 				if (Math.hypot(dx, dy) < DRAG_START) return;
@@ -283,10 +295,18 @@ var Pinbox = (function(exports) {
 				y: hold.origin.y + dy
 			});
 		}
-		function onPointerUp() {
-			if (hold === null) return;
-			const h = hold;
+		function release() {
 			hold = null;
+			listen(false);
+		}
+		/** The window lost focus mid-hold: whatever the pointer does next, we will not see it. */
+		function onBlur() {
+			if (hold !== null) onPointerUp();
+		}
+		function onPointerUp(e) {
+			if (hold === null || e !== void 0 && e.pointerId !== hold.pointerId) return;
+			const h = hold;
+			release();
 			const total = Math.hypot(h.lx - h.px, h.ly - h.py);
 			on.onEnd({
 				dragged: h.started && total >= TAP_MAX,
@@ -299,19 +319,11 @@ var Pinbox = (function(exports) {
 			});
 		}
 		el.addEventListener("pointerdown", onPointerDown);
-		el.addEventListener("pointermove", onPointerMove);
-		el.addEventListener("pointerup", onPointerUp);
-		el.addEventListener("pointercancel", onPointerUp);
 		return {
-			cancel() {
-				hold = null;
-			},
+			cancel: release,
 			destroy() {
-				hold = null;
+				release();
 				el.removeEventListener("pointerdown", onPointerDown);
-				el.removeEventListener("pointermove", onPointerMove);
-				el.removeEventListener("pointerup", onPointerUp);
-				el.removeEventListener("pointercancel", onPointerUp);
 			}
 		};
 	}
@@ -481,6 +493,7 @@ var Pinbox = (function(exports) {
 			ui.surface.style.borderRadius = `${m.r}px`;
 			ui.surface.style.transform = `translate(${m.x}px, ${m.y}px)`;
 			ui.carrier.style.transform = `translate(${m.x + m.w / 2 - PUCK / 2}px, ${m.y + m.h / 2 - PUCK / 2}px)`;
+			if (mode === "settle") placePuck(m.x, m.y);
 			const iconOn = mode === "drag" || mode === "settle" || (mode === "toPuck" || mode === "toBar") && m.w < CARRIER_MAX_W;
 			ui.carrier.classList.toggle("show", iconOn);
 		}
@@ -655,9 +668,17 @@ var Pinbox = (function(exports) {
 			if (path.includes(ui.fan) || path.includes(ui.puck)) return;
 			closeFan();
 		}
+		/** Grabbable at rest and while settling — mid-flight, the spring's current spot is the origin. */
+		const grabbable = () => mode === "puck" || mode === "settle";
 		const drag = attachDrag(ui.puck, {
-			origin: () => mode === "puck" ? puckPos : null,
-			canStart: () => mode === "puck",
+			origin: () => {
+				if (mode === "settle") return {
+					x: main.cur.x,
+					y: main.cur.y
+				};
+				return mode === "puck" ? puckPos : null;
+			},
+			canStart: grabbable,
 			onStart(origin) {
 				closeFan();
 				mode = "drag";
@@ -720,6 +741,9 @@ var Pinbox = (function(exports) {
 					x: main.tgt.x,
 					y: main.tgt.y
 				});
+				placePuck(main.cur.x, main.cur.y);
+				ui.puck.classList.remove("pb-ghost");
+				hideMorph();
 				main.to({
 					...p,
 					w: PUCK,

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-z-YC_RT4.js";
+import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-BsWnyGwB.js";
 import { h } from "vue";
 //#region src/vue.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/pinbox-toolbar",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -71,7 +71,7 @@
     }
   },
   "devDependencies": {
-    "@autono/pinbox-core": "0.16.0",
+    "@autono/pinbox-core": "0.18.0",
     "@types/react": "^19.2.0",
     "typescript": "^7.0.0",
     "tsdown": "^0.22.0",