@autono/pinbox-toolbar 0.1.0 → 0.7.0

package/dist/{src-BoLg81_j.js → src-D1qn1iet.js}

@@ -1,12 +1,19 @@
 //#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) {
@@ -146,6 +153,44 @@ function isFixed(win, el) {
 	}
 	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];
@@ -157,6 +202,8 @@ function buildContext(win, el) {
 	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). */
@@ -176,6 +223,14 @@ function captureTarget(el, opts) {
 		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 {
@@ -940,6 +995,118 @@ var HubTransport = class {
 	}
 };
 //#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>";
@@ -1048,6 +1215,31 @@ function messageHtml(m) {
 	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;
@@ -1213,6 +1405,22 @@ function viewOf(state) {
 	};
 }
 /** 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);
@@ -1226,7 +1434,7 @@ function renderCard(root, state, actions) {
 	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);
@@ -1235,9 +1443,13 @@ function renderCard(root, state, actions) {
 	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
@@ -1337,11 +1549,19 @@ function createDrawer(doc, on) {
 //#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,
@@ -1383,21 +1603,28 @@ function renderPins(layer, state) {
 	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));
 }
@@ -1538,6 +1765,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; }
@@ -1573,6 +1820,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); }
@@ -1670,17 +1923,31 @@ function isTextEntry(target) {
 }
 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;
@@ -1696,6 +1963,7 @@ var PinboxToolbarElement = class extends BaseElement {
 	/** 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;
@@ -1720,25 +1988,77 @@ var PinboxToolbarElement = class extends BaseElement {
 		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 {
@@ -1775,6 +2095,7 @@ var PinboxToolbarElement = class extends BaseElement {
 			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));
@@ -1785,10 +2106,13 @@ var PinboxToolbarElement = class extends BaseElement {
 	* 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,
@@ -1804,7 +2128,10 @@ var PinboxToolbarElement = class extends BaseElement {
 		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. */
@@ -1830,6 +2157,7 @@ var PinboxToolbarElement = class extends BaseElement {
 	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;
@@ -1913,28 +2241,71 @@ var PinboxToolbarElement = class extends BaseElement {
 		});
 		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
@@ -1945,8 +2316,12 @@ var PinboxToolbarElement = class extends BaseElement {
 	#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 = {
@@ -1962,11 +2337,33 @@ var PinboxToolbarElement = class extends BaseElement {
 		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);

package/dist/svelte.d.ts

@@ -1,4 +1,4 @@
-import { _ as applyHubEvent, a as HubEvent, b as upsertPin, c as WebSocketLike, d as PinboxToolbarElement, f as Draft, g as appendThreadMessage, h as UiStatus, i as ConnectionState, l as HubError, m as ToolbarState, n as PinboxConfig, o as HubTransport, p as Store, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as createStore, x as CaptureResult, y as deriveUiStatus } from "./index-ZR3JBQu-.js";
+import { _ as applyHubEvent, a as HubEvent, b as upsertPin, c as WebSocketLike, d as PinboxToolbarElement, f as Draft, g as appendThreadMessage, h as UiStatus, i as ConnectionState, l as HubError, m as ToolbarState, n as PinboxConfig, o as HubTransport, p as Store, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as createStore, x as CaptureResult, y as deriveUiStatus } from "./index-DnhwJYxE.js";
 import { Action } from "svelte/action";
 //#region src/svelte.d.ts
 /**