@autono/pinbox-toolbar 0.1.0 → 0.8.0

package/dist/toolbar.iife.js

@@ -2,13 +2,20 @@ var Pinbox = (function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/targeting/dom.ts
 	/**
-	* Deepest element under (clientX, clientY), or null when the hit is the page
-	* chrome itself (html/body) or something the caller ignores (our own overlay).
+	* Deepest element under (clientX, clientY) that the caller does not ignore, or null when there is
+	* nothing there but page chrome (html/body).
+	*
+	* Looks THROUGH our own overlay rather than giving up at it. The single-element form could not:
+	* the drag-aim grip sits exactly on the point being aimed at, so it is always the topmost thing
+	* under the crosshair, and every probe came back "nothing" the moment touch aiming existed.
 	*/
 	function hitTest(doc, x, y, ignore) {
-		const el = doc.elementFromPoint(x, y);
-		if (!el || el === doc.body || el === doc.documentElement) return null;
-		return ignore(el) ? null : el;
+		const stack = doc.elementsFromPoint?.(x, y) ?? [doc.elementFromPoint(x, y)];
+		for (const el of stack) {
+			if (!el || el === doc.body || el === doc.documentElement) return null;
+			if (!ignore(el)) return el;
+		}
+		return null;
 	}
 	/** CLASS-or-TAG display name with a sibling index when needed (prototype nodeName). */
 	function nodeName(el) {
@@ -148,6 +155,44 @@ var Pinbox = (function(exports) {
 		}
 		return false;
 	}
+	/** Beyond this an element is not a thing you pinned, it is a region. Too many to rewrite as a set. */
+	const MAX_RUNS = 40;
+	const MAX_RUN_LENGTH = 200;
+	/** Text that is not content: a script body or a stylesheet is not something to rewrite. */
+	const NON_CONTENT = /* @__PURE__ */ new Set([
+		"SCRIPT",
+		"STYLE",
+		"NOSCRIPT",
+		"TEMPLATE"
+	]);
+	/**
+	* The element's text, split the way the browser stores it: one entry per run of characters.
+	*
+	* This walks TEXT NODES, not elements, and that distinction is the whole point — it makes no
+	* assumption about how a site is built. A heading is one run. A nav bar is one per link. A
+	* paragraph with a bold word in the middle is three, in reading order, including the halves either
+	* side of the bold. An earlier version keyed off "elements with no element children", which
+	* quietly lost the "Hello " in `<p>Hello <b>world</b></p>` — text a person can obviously see and
+	* would obviously expect to be able to change.
+	*
+	* `nearbyText` runs them all together, which is fine to read and useless to edit: it cannot tell
+	* an agent that "work approach people contact" is four separate places. This can.
+	*/
+	function textRuns(el) {
+		const runs = [];
+		const walk = (node) => {
+			if (node.nodeType === 3) {
+				const text = (node.nodeValue ?? "").trim();
+				if (text.length > 0) runs.push(text.slice(0, MAX_RUN_LENGTH));
+				return runs.length <= MAX_RUNS;
+			}
+			if (node.nodeType !== 1 || NON_CONTENT.has(node.tagName)) return true;
+			for (const child of node.childNodes) if (!walk(child)) return false;
+			return true;
+		};
+		if (!walk(el) || runs.length === 0) return void 0;
+		return runs;
+	}
 	function buildContext(win, el) {
 		const context = {};
 		if (el.classList.length > 0) context.classes = [...el.classList];
@@ -159,6 +204,8 @@ var Pinbox = (function(exports) {
 		if (nearby !== void 0) context.nearbyText = nearby;
 		const selected = selectedText(win, el);
 		if (selected !== void 0) context.selectedText = selected;
+		const runs = textRuns(el);
+		if (runs !== void 0) context.textRuns = runs;
 		return Object.keys(context).length > 0 ? context : void 0;
 	}
 	/** Fills PinInput.target/env from a chosen element (shapes come from the pin schema). */
@@ -178,6 +225,14 @@ var Pinbox = (function(exports) {
 			fixed: isFixed(win, el)
 		};
 		if (opts?.anchor !== void 0) target.anchor = opts.anchor;
+		if (opts?.at !== void 0 && r.width > 0 && r.height > 0) {
+			const fx = (opts.at.x - (r.left + win.scrollX)) / r.width;
+			const fy = (opts.at.y - (r.top + win.scrollY)) / r.height;
+			if (fx >= 0 && fx <= 1 && fy >= 0 && fy <= 1) target.spot = {
+				x: fx,
+				y: fy
+			};
+		}
 		const context = buildContext(win, el);
 		if (context !== void 0) target.context = context;
 		return {
@@ -942,6 +997,118 @@ var Pinbox = (function(exports) {
 		}
 	};
 	//#endregion
+	//#region src/ui/aim.ts
+	/**
+	* True when aiming has to be done by dragging rather than by pointing.
+	*
+	* Two independent reasons, either of which is sufficient. A coarse pointer means there is no
+	* hover to follow at all — the mouse crosshair cannot work, whatever the screen size. The width
+	* check is the design's own rule (720px) and catches the case a media query cannot: a device that
+	* reports a fine pointer but is being used at phone width.
+	*/
+	function needsDragAim(win) {
+		return win.matchMedia?.("(pointer: coarse)").matches === true || win.innerWidth < 720;
+	}
+	/**
+	* Where the reticle starts.
+	*
+	* Slightly above centre: the confirm bar owns the bottom of the screen, and a reticle that opens
+	* underneath your own thumb is one you have to move before you can even see it.
+	*/
+	function startPoint(win) {
+		return {
+			x: win.innerWidth / 2,
+			y: win.innerHeight * .42
+		};
+	}
+	const MARKUP = "<div class=\"h\"></div><div class=\"v\"></div><div class=\"grip\" aria-label=\"Pin position — arrow keys to aim\" tabindex=\"0\"><i></i></div><div class=\"bar\"><span class=\"lab\" role=\"status\" aria-live=\"polite\"></span><button type=\"button\" class=\"cancel\" data-aim=\"cancel\">CANCEL</button><button type=\"button\" class=\"ok\" data-aim=\"confirm\">PIN IT HERE</button></div>";
+	function createAim(doc, handlers) {
+		const win = doc.defaultView;
+		const root = doc.createElement("div");
+		root.className = "pb-aim";
+		root.innerHTML = MARKUP;
+		const h = root.querySelector(".h");
+		const v = root.querySelector(".v");
+		const grip = root.querySelector(".grip");
+		const label = root.querySelector(".lab");
+		const point = {
+			x: 0,
+			y: 0
+		};
+		/** Grab offset, so the reticle does not jump to your fingertip when you take hold of it. */
+		let grab = null;
+		function put(x, y) {
+			point.x = Math.max(0, Math.min(win.innerWidth, x));
+			point.y = Math.max(0, Math.min(win.innerHeight, y));
+			h.style.top = `${point.y}px`;
+			v.style.left = `${point.x}px`;
+			grip.style.left = `${point.x}px`;
+			grip.style.top = `${point.y}px`;
+		}
+		const onPointerMove = (e) => {
+			if (grab === null) return;
+			e.preventDefault();
+			put(e.clientX + grab.dx, e.clientY + grab.dy);
+			handlers.onAim(point.x, point.y);
+		};
+		const onPointerUp = () => {
+			grab = null;
+		};
+		grip.addEventListener("pointerdown", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			grab = {
+				dx: point.x - e.clientX,
+				dy: point.y - e.clientY
+			};
+			grip.setPointerCapture?.(e.pointerId);
+		});
+		grip.addEventListener("keydown", (e) => {
+			const step = e.shiftKey ? 20 : 2;
+			const delta = {
+				ArrowLeft: [-step, 0],
+				ArrowRight: [step, 0],
+				ArrowUp: [0, -step],
+				ArrowDown: [0, step]
+			}[e.key];
+			if (!delta) return;
+			e.preventDefault();
+			put(point.x + delta[0], point.y + delta[1]);
+			handlers.onAim(point.x, point.y);
+		});
+		root.addEventListener("click", (e) => {
+			const action = e.target.closest?.("[data-aim]")?.getAttribute("data-aim");
+			if (!action) return;
+			e.preventDefault();
+			e.stopPropagation();
+			if (action === "confirm") handlers.onConfirm();
+			else handlers.onCancel();
+		});
+		win.addEventListener("pointermove", onPointerMove, { passive: false });
+		win.addEventListener("pointerup", onPointerUp);
+		win.addEventListener("pointercancel", onPointerUp);
+		return {
+			root,
+			point,
+			show(x, y) {
+				put(x, y);
+				root.classList.add("on");
+			},
+			hide() {
+				grab = null;
+				root.classList.remove("on");
+			},
+			setLabel(text) {
+				label.textContent = text;
+			},
+			destroy() {
+				win.removeEventListener("pointermove", onPointerMove);
+				win.removeEventListener("pointerup", onPointerUp);
+				win.removeEventListener("pointercancel", onPointerUp);
+			}
+		};
+	}
+	//#endregion
 	//#region src/ui/bar.ts
 	const PIN_ICON = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"1.5\" width=\"10\" height=\"6.5\" rx=\"1\"/><path d=\"M8 8v6.5\"/></svg>";
 	const INBOX_ICON = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M1.8 8.5h3.4l1 2h3.6l1-2h3.4\"/><path d=\"M2.6 3.2h10.8l1.2 5.3v4a1 1 0 01-1 1H2.4a1 1 0 01-1-1v-4z\"/></svg>";
@@ -1050,6 +1217,31 @@ var Pinbox = (function(exports) {
 		const via = origin ? `<span class="via-tag"><span>${esc(origin)}</span></span>` : "";
 		return `<div class="pb-msg you"><div class="pb-av${mirror ? " via" : ""}">${esc(initials)}</div><div class="col"><div class="line"><span class="who">${esc(who)}</span><span class="tm">${esc(timeOf(m.at))}</span>${via}</div><div class="txt">${esc(m.text)}</div>${attachmentsHtml(m)}</div></div>`;
 	}
+	/** The agent has the message and has not answered yet. Its own node, so patching never rebuilds. */
+	const TYPING_HTML = "<div class=\"pb-typing\"><div class=\"pb-av agent\">AI</div><div class=\"dots\"><i></i><i></i><i></i></div><div class=\"lbl\">THINKING</div></div>";
+	/**
+	* Show or hide the "working on it" row.
+	*
+	* Without it the card sits silent from the moment you comment until the answer lands, which reads
+	* as nothing happening — the single most common report on the demo.
+	*/
+	function patchTyping(threadEl, pending) {
+		const existing = threadEl.querySelector("[data-iid=\"pb-typing\"]");
+		if (!pending) {
+			existing?.remove();
+			return;
+		}
+		if (existing) {
+			threadEl.appendChild(existing);
+			return;
+		}
+		const node = threadEl.ownerDocument.createElement("div");
+		node.className = "pb-msg-w";
+		node.setAttribute("data-iid", "pb-typing");
+		node.innerHTML = TYPING_HTML;
+		threadEl.appendChild(node);
+		threadEl.scrollTop = threadEl.scrollHeight;
+	}
 	/** Keyed thread patching: appends/patches [data-iid] nodes only, never rebuilds. */
 	function patchThread(threadEl, messages) {
 		let appended = false;
@@ -1215,6 +1407,22 @@ var Pinbox = (function(exports) {
 		};
 	}
 	/** Render the thread card for a state snapshot: the active pin, or the draft. */
+	/**
+	* The pin's own text, as the first message in its thread.
+	*
+	* A pin stores what you wrote on the pin itself, not in the thread — so a card that renders only
+	* `thread` shows an empty box the moment you hit Comment, and your words look lost. They are not
+	* lost; they were never drawn.
+	*/
+	function pinAsMessage(pin) {
+		return {
+			id: `pin:${pin.id}`,
+			pinId: pin.id,
+			role: "human",
+			text: pin.text,
+			at: pin.createdAt
+		};
+	}
 	function renderCard(root, state, actions) {
 		const card = ensureShell(root);
 		const ctx = ctxByCard.get(card);
@@ -1228,7 +1436,7 @@ var Pinbox = (function(exports) {
 		if (ctx.pid !== view.pid) {
 			ctx.pid = view.pid;
 			ctx.parts = {};
-			buildSkeleton(card, ctx, view.pid === "draft", view.thread.length > 0);
+			buildSkeleton(card, ctx, view.pid === "draft", view.pin !== null || view.thread.length > 0);
 		}
 		card.hidden = false;
 		const queued = view.pin !== null && state.queuedIds.has(view.pin.id);
@@ -1237,9 +1445,13 @@ var Pinbox = (function(exports) {
 		setPart(card, ctx, "hd", hdHtml(view.n, view.label, statusLabel, resolvable));
 		setPart(card, ctx, "link", linkHtml(view.pin));
 		setPart(card, ctx, "verify", verifyHtml(view.status));
-		setPart(card, ctx, "row", rowHtml(view.thread.length > 0));
+		const messages = view.pin === null ? view.thread : [pinAsMessage(view.pin), ...view.thread];
+		setPart(card, ctx, "row", rowHtml(messages.length > 0));
 		const threadEl = card.querySelector("[data-ref=\"thread\"]");
-		if (threadEl) patchThread(threadEl, view.thread);
+		if (threadEl) {
+			patchThread(threadEl, messages);
+			patchTyping(threadEl, !queued && view.pin?.status === "open" && view.status === "waiting");
+		}
 		position(card, view.at);
 	}
 	//#endregion
@@ -1339,11 +1551,19 @@ var Pinbox = (function(exports) {
 	//#region src/ui/pins.ts
 	/** The prototype's `_h` innerHTML memo, kept off the DOM node. */
 	const chipMemo = /* @__PURE__ */ new WeakMap();
-	/** Needle anchor point for a committed pin: center of the captured target rect. */
-	function pinPoint(r) {
+	/**
+	* Where the needle lands: the point inside the element that was actually clicked, when the pin
+	* recorded one, else the centre of its box.
+	*
+	* `spot` is a fraction of the element, so the pin still tracks the element when it moves or
+	* resizes — it just stops sliding to the middle of a wide block the moment you commit it.
+	*/
+	function pinPoint(r, spot) {
+		const fx = spot?.x ?? .5;
+		const fy = spot?.y ?? .5;
 		return {
-			x: r.x + r.width / 2,
-			y: r.y + r.height / 2
+			x: r.x + r.width * fx,
+			y: r.y + r.height * fy
 		};
 	}
 	/** Chip contents (prototype chipBtnInner, lines 546–550): number + linked-channel tag,
@@ -1385,21 +1605,28 @@ var Pinbox = (function(exports) {
 		const placed = [];
 		visible.forEach((pin, i) => {
 			const rect = pin.target?.rect;
-			if (rect !== void 0) placed.push({
+			if (rect === void 0) return;
+			const spot = pin.target?.spot;
+			placed.push(spot === void 0 ? {
 				pin,
 				n: i + 1,
 				rect
+			} : {
+				pin,
+				n: i + 1,
+				rect,
+				spot
 			});
 		});
 		const keys = new Set(placed.map((entry) => entry.pin.id));
 		if (state.draft) keys.add("draft");
 		for (const node of [...layer.children]) if (!keys.has(node.getAttribute("data-pin") ?? "")) node.remove();
-		for (const { pin, n, rect } of placed) {
+		for (const { pin, n, rect, spot } of placed) {
 			const node = ensureNode(layer, pin.id, false);
 			const hot = pin.id === state.activePinId;
 			const queued = state.queuedIds.has(pin.id);
 			node.classList.toggle("queued", queued);
-			patchNode(node, pinPoint(rect), hot, chipInner(n, pin, queued));
+			patchNode(node, pinPoint(rect, spot), hot, chipInner(n, pin, queued));
 		}
 		if (state.draft) patchNode(ensureNode(layer, "draft", true), state.draft.placedAt, true, chipInner(visible.length + 1, null));
 	}
@@ -1540,6 +1767,26 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .pb-reticle .box { position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px; border: 1px solid var(--pb-amber); border-radius: 2px; }
 .pb-reticle .ro { position: absolute; margin: 14px 0 0 14px; padding: 3px 6px; background: var(--pb-amber); color: var(--pb-amber-ink); font-family: var(--pb-font-mono); font-size: 9.5px; letter-spacing: .12em; border-radius: 2px; white-space: nowrap; }
 
+/* Drag-to-aim, for touch. The layer never takes pointer events — only the grip and the bar do —
+   so what is under the crosshair can still be probed, and the page underneath is still visible. */
+/* Above the command bar (90), below the shortcuts modal (120). The confirm bar sits at the very
+   bottom of the screen, where the command bar already is — under it, CONFIRM was unclickable. */
+.pb-aim { position: fixed; inset: 0; z-index: 100; display: none; pointer-events: none; }
+.pb-aim.on { display: block; animation: pb-fade 160ms ease-out both; }
+.pb-aim .h { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--pb-amber) 30%, transparent); }
+.pb-aim .v { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--pb-amber) 30%, transparent); }
+/* 72px: a finger-sized target, per the design. Smaller and you cannot hold it accurately;
+   touch-action:none is what stops the page scrolling instead of the reticle moving. */
+.pb-aim .grip { position: absolute; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; border: 1px solid var(--pb-amber); background: var(--pb-amber-soft); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; pointer-events: auto; touch-action: none; cursor: grab; }
+.pb-aim .grip:active { cursor: grabbing; }
+.pb-aim .grip i { width: 10px; height: 10px; border-radius: 999px; background: var(--pb-amber); box-shadow: 0 0 0 3px var(--pb-canvas); }
+.pb-aim .bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 7px; background: var(--pb-bar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--pb-line-2); border-radius: 4px; box-shadow: var(--pb-shadow); pointer-events: auto; }
+.pb-aim .bar .lab { flex: 1; min-width: 0; padding-left: 8px; font-family: var(--pb-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--pb-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* 48px tall: the minimum a thumb hits reliably. */
+.pb-aim .bar button { height: 48px; border-radius: 2px; font-family: var(--pb-font-mono); font-size: 11px; letter-spacing: .16em; cursor: pointer; }
+.pb-aim .bar .cancel { flex: none; padding: 0 18px; border: 1px solid var(--pb-line-2); background: transparent; color: var(--pb-fg2); }
+.pb-aim .bar .ok { flex: none; padding: 0 20px; border: none; background: var(--pb-amber); color: var(--pb-amber-ink); }
+
 .pb-pin { position: absolute; }
 .pb-pin.resolving { animation: pb-resolve 380ms var(--pb-ease) forwards; }
 .pb-pin .ring { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 1px solid var(--pb-amber); border-radius: 999px; animation: pb-ring 900ms var(--pb-ease) forwards; pointer-events: none; }
@@ -1575,6 +1822,12 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .pb-msg-w { animation: pb-in 260ms var(--pb-ease) both; }
 .pb-msg { padding: 13px 14px; display: flex; gap: 10px; }
 .pb-msg.you { border-bottom: 1px solid var(--pb-line); }
+.pb-typing { padding: 13px 14px; display: flex; gap: 10px; align-items: center; }
+.pb-typing .dots { display: flex; gap: 4px; }
+.pb-typing .dots i { width: 4px; height: 4px; border-radius: 999px; background: var(--pb-amber); animation: pb-pulse 1.1s var(--pb-ease) infinite; }
+.pb-typing .dots i:nth-child(2) { animation-delay: .18s; }
+.pb-typing .dots i:nth-child(3) { animation-delay: .36s; }
+.pb-typing .lbl { font-family: var(--pb-font-mono); font-size: 9px; letter-spacing: .14em; color: var(--pb-fg3); }
 .pb-msg .steps { display: flex; flex-direction: column; gap: 7px; }
 .pb-av { flex: none; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--pb-font-mono); font-size: 9px; letter-spacing: .04em; background: var(--pb-invert-bg); color: var(--pb-invert-fg); border: 1px solid var(--pb-invert-bg); }
 .pb-av.via { background: transparent; color: var(--pb-info); border-color: var(--pb-info); }
@@ -1672,17 +1925,31 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 	}
 	var PinboxToolbarElement = class extends BaseElement {
 		static tagName = "pinbox-toolbar";
+		/** Watched so a config that arrives after insertion can still start the transport. */
+		static observedAttributes = ["hub", "token"];
 		store = createStore();
 		/** Card → transport seam (wired by #startTransport once a config exists). */
 		actions = {};
 		#config = null;
 		#transport = null;
+		/**
+		* Connected-lifetime counter, bumped on disconnect. #startTransport can park at
+		* an await (getToken, or `await undefined` on the token-less path); a
+		* continuation that crossed a disconnect must not install a transport into a
+		* later lifetime, where it would shadow or duplicate that lifetime's own start.
+		*/
+		#lifetime = 0;
+		/** One deferred start per tick, however many attribute callbacks land in it. */
+		#startQueued = false;
 		#token = "";
 		#built = false;
 		#bar = null;
 		#reticle = null;
 		#pinsLayer = null;
 		#drawer = null;
+		#aim = null;
+		/** Pending viewport-refresh frame, 0 when none is queued. */
+		#viewportFrame = 0;
 		#modal = null;
 		#helpOpen = false;
 		#pageStyle = null;
@@ -1698,6 +1965,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 		/** Programmatic path (Pinbox.init). The snippet path reads hub/token attributes. */
 		configure(config) {
 			this.#config = config;
+			if (this.isConnected) this.#queueStart();
 		}
 		get config() {
 			if (this.#config) return this.#config;
@@ -1722,25 +1990,77 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			style.textContent = PAGE_CSS;
 			document.head.appendChild(style);
 			this.#pageStyle = style;
+			if (this.#aim === null) this.#mountAim();
 			document.addEventListener("mousemove", this.#onMouseMove);
+			window.addEventListener("scroll", this.#onViewportChange, { passive: true });
+			window.addEventListener("resize", this.#onViewportChange);
 			document.addEventListener("click", this.#onClickCapture, true);
 			document.addEventListener("keydown", this.#onKeyDown);
 			this.#unsubscribe = this.store.subscribe((s) => this.#render(s));
 			this.#render(this.store.get());
-			this.#startTransport();
+			this.#queueStart();
+		}
+		/**
+		* Late-config rescue: an element inserted BEFORE its hub/token attributes were
+		* set connected configless and #startTransport bailed. Starting here the moment
+		* a config first exists keeps such an element from staying silently dead.
+		* Config is still read once — a running transport is never reconfigured.
+		*/
+		attributeChangedCallback() {
+			if (this.isConnected && this.config !== null) this.#queueStart();
+		}
+		/**
+		* Start at the END of the current tick, not synchronously: a config assembled
+		* attribute-by-attribute on a connected element (append → set hub → set token)
+		* must be read whole. A synchronous start at the first fragment would connect
+		* token-less and, per the read-once rule, drop the token forever.
+		*/
+		#queueStart() {
+			if (this.#startQueued) return;
+			this.#startQueued = true;
+			queueMicrotask(() => {
+				this.#startQueued = false;
+				this.#startTransport();
+			});
 		}
 		disconnectedCallback() {
+			this.#lifetime += 1;
 			this.#transport?.close();
 			this.#transport = null;
 			document.removeEventListener("mousemove", this.#onMouseMove);
+			window.removeEventListener("scroll", this.#onViewportChange);
+			window.removeEventListener("resize", this.#onViewportChange);
 			document.removeEventListener("click", this.#onClickCapture, true);
 			document.removeEventListener("keydown", this.#onKeyDown);
+			if (this.#viewportFrame !== 0) cancelAnimationFrame(this.#viewportFrame);
+			this.#viewportFrame = 0;
+			this.#aim?.destroy();
+			this.#aim = null;
 			this.#unsubscribe?.();
 			this.#unsubscribe = null;
 			this.#pageStyle?.remove();
 			this.#pageStyle = null;
 			document.body.classList.remove(PAGE_PLACING_CLASS);
 		}
+		/**
+		* Create the aim controller and put its layer in the shadow root.
+		*
+		* Separate from `#build` because the two have different lifetimes: `#build` runs once, but
+		* `disconnectedCallback` tears this controller's window listeners down. A re-parented element
+		* would otherwise come back with no controller and its markup still in place — a grip that
+		* renders and does nothing, with no error to explain it.
+		*/
+		#mountAim() {
+			const shadow = this.shadowRoot;
+			if (!shadow) return;
+			shadow.querySelector(".pb-aim")?.remove();
+			this.#aim = createAim(document, {
+				onAim: (x, y) => this.#probe(x, y),
+				onConfirm: () => this.#confirmAim(),
+				onCancel: () => this.#dismiss()
+			});
+			shadow.appendChild(this.#aim.root);
+		}
 		#build() {
 			const shadow = this.attachShadow({ mode: "open" });
 			try {
@@ -1777,6 +2097,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 				onClose: () => this.store.update({ inboxOpen: false })
 			});
 			shadow.appendChild(this.#drawer.root);
+			this.#mountAim();
 			this.#modal = createShortcutsModal(document, () => this.#setHelp(false));
 			shadow.appendChild(this.#modal.root);
 			this.#pinsLayer.addEventListener("click", (e) => this.#onChipClick(e));
@@ -1787,10 +2108,13 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 		* still renders read-only threads and queued drafts.
 		*/
 		async #startTransport() {
-			if (this.#transport !== null) return;
+			if (this.#transport !== null || !this.isConnected) return;
 			const cfg = this.config;
 			if (cfg === null) return;
-			this.#token = cfg.token ?? await cfg.getToken?.().catch(() => void 0) ?? "";
+			const lifetime = this.#lifetime;
+			const token = cfg.token ?? await cfg.getToken?.().catch(() => void 0) ?? "";
+			if (this.#lifetime !== lifetime || this.#transport !== null || !this.isConnected) return;
+			this.#token = token;
 			const transport = new HubTransport({
 				endpoint: cfg.endpoint,
 				token: this.#token,
@@ -1806,7 +2130,10 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			if (queued.length > 0) this.store.update({ queuedIds: new Set(queued.map((p) => p.id)) });
 			this.actions.send = (pinId, text) => void this.#send(transport, pinId, text);
 			this.actions.resolve = (pinId) => void transport.resolve(pinId).then((pin) => upsertPin(this.store, pin)).catch(() => {});
-			this.actions.verify = (pinId, outcome) => void transport.verify(pinId, outcome).then((pin) => upsertPin(this.store, pin)).catch(() => {});
+			this.actions.verify = (pinId, outcome) => void transport.verify(pinId, outcome).then((pin) => {
+				upsertPin(this.store, pin);
+				if (outcome === "accepted") this.#dismiss();
+			}).catch(() => {});
 			transport.connect();
 		}
 		/** draft ⇒ compose PinInput (+ best-effort screenshot) and createPin; else thread reply. */
@@ -1832,6 +2159,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 		async #screenshot(selector) {
 			const cfg = this.config;
 			if (cfg === null) return null;
+			if (cfg.screenshots === false) return null;
 			try {
 				const el = document.querySelector(selector);
 				if (el === null) return null;
@@ -1915,28 +2243,71 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			});
 			if (this.store.get().draft) this.store.discardDraft();
 		}
+		/**
+		* Work out what sits under a viewport point and highlight it.
+		*
+		* Shared by both ways of aiming — following a mouse, and dragging the reticle — so the two can
+		* never disagree about what is under the crosshair.
+		*/
+		#probe(clientX, clientY) {
+			const el = hitTest(document, clientX, clientY, (hit) => hit === this);
+			this.#hover = el;
+			if (el) this.#reticle?.snap(el.getBoundingClientRect(), targetLabel(el), {
+				x: window.scrollX,
+				y: window.scrollY
+			});
+			else this.#reticle?.release();
+			this.#aim?.setLabel(el ? targetLabel(el) : "NOTHING UNDER THE PIN");
+		}
+		/**
+		* Keep the drag-aim reticle honest while the viewport moves under it.
+		*
+		* Scrolling changes what is beneath a fixed reticle, and resizing (a phone rotating, a window
+		* dragged narrow) can both strand it off-screen and flip which way of aiming applies.
+		*/
+		#onViewportChange = () => {
+			if (this.store.get().mode !== "placing" || this.#viewportFrame !== 0) return;
+			this.#viewportFrame = requestAnimationFrame(() => {
+				this.#viewportFrame = 0;
+				if (this.store.get().mode !== "placing") return;
+				this.#syncAim(true);
+				const aim = this.#aim;
+				if (aim?.root.classList.contains("on") === true) this.#probe(aim.point.x, aim.point.y);
+			});
+		};
 		#onMouseMove = (e) => {
 			if (this.store.get().mode !== "placing" || !this.#reticle) return;
 			this.#reticle.move(e);
-			const el = hitTest(document, e.clientX, e.clientY, (hit) => hit === this);
-			if (el) {
-				this.#hover = el;
-				this.#reticle.snap(el.getBoundingClientRect(), targetLabel(el), {
-					x: window.scrollX,
-					y: window.scrollY
-				});
-			} else {
-				this.#hover = null;
-				this.#reticle.release();
-			}
+			this.#probe(e.clientX, e.clientY);
 		};
+		/** Commit the pin the drag-aim reticle is sitting on. */
+		#confirmAim() {
+			const aim = this.#aim;
+			if (!aim) return;
+			this.#probe(aim.point.x, aim.point.y);
+			const el = this.#hover ?? document.body;
+			this.store.place({
+				target: captureTarget(el, { at: {
+					x: aim.point.x + window.scrollX,
+					y: aim.point.y + window.scrollY
+				} }),
+				placedAt: {
+					x: aim.point.x + window.scrollX,
+					y: aim.point.y + window.scrollY
+				}
+			});
+			this.#reticle?.release();
+		}
 		/** Placement click: capture the hovered target (or body) into a client-only draft. */
 		#placeDraft(e) {
 			e.preventDefault();
 			e.stopPropagation();
 			const el = this.#hover ?? document.body;
 			this.store.place({
-				target: captureTarget(el),
+				target: captureTarget(el, { at: {
+					x: e.pageX,
+					y: e.pageY
+				} }),
 				placedAt: {
 					x: e.pageX,
 					y: e.pageY
@@ -1947,8 +2318,12 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 		#onClickCapture = (e) => {
 			if (e.composedPath().includes(this)) return;
 			const state = this.store.get();
-			if (state.mode === "placing") this.#placeDraft(e);
-			else if (state.activePinId || state.draft) this.#dismiss();
+			if (state.mode === "placing") {
+				if (!needsDragAim(window)) this.#placeDraft(e);
+				return;
+			}
+			if (state.inboxOpen) this.store.update({ inboxOpen: false });
+			if (state.activePinId || state.draft) this.#dismiss();
 		};
 		/** Prototype keyboard map (v2-command-bar.html lines 701–712). */
 		#shortcuts = {
@@ -1964,11 +2339,33 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			if (isTextEntry(e.composedPath()[0])) return;
 			this.#shortcuts[e.key === "?" ? "?" : e.key.toLowerCase()]?.();
 		};
+		/**
+		* Bring the drag-aim reticle up with placing mode, seeded mid-screen and already showing what it
+		* is over — so the first thing you see is a live target, not an empty crosshair waiting for a
+		* mouse that is never coming.
+		*/
+		#syncAim(placing) {
+			const aim = this.#aim;
+			if (!aim) return;
+			if (!placing || !needsDragAim(window)) {
+				aim.hide();
+				return;
+			}
+			if (aim.root.classList.contains("on")) {
+				if (aim.point.x <= window.innerWidth && aim.point.y <= window.innerHeight) return;
+				aim.show(Math.min(aim.point.x, window.innerWidth), Math.min(aim.point.y, window.innerHeight));
+				return;
+			}
+			const { x, y } = startPoint(window);
+			aim.show(x, y);
+			this.#probe(x, y);
+		}
 		#render(state) {
 			const placing = state.mode === "placing";
 			this.toggleAttribute("data-placing", placing);
 			document.body.classList.toggle(PAGE_PLACING_CLASS, placing);
 			if (!placing) this.#reticle?.release();
+			this.#syncAim(placing);
 			if (this.#pinsLayer) renderPins(this.#pinsLayer, state);
 			if (this.shadowRoot) renderCard(this.shadowRoot, state, this.#cardActions);
 			this.#drawer?.update(state);