@autono/pinbox-toolbar 0.18.0 → 0.20.0

package/README.md

@@ -33,7 +33,7 @@ Both plugin files are **guest-rule code** (`AGENTS.md`): they are evaluated insi
 
 - **Realtime** — `src/transport.ts` speaks the frozen WS protocol (`hello → catch-up → events`) against `GET /ws`, authenticating at upgrade only via the `pinbox.token.<token>` subprotocol, because a browser cannot set headers on an upgrade. It reconnects with jittered 1s→30s backoff and replays from its persisted cursor, so a dropped socket costs no events. Either side of an excluding protocol window closes `4400` with a clear upgrade message; a bad token closes `4401`.
 - **Offline mirror** — `src/transport/mirror.ts` keeps the cursor, the last-known pin list, and an outbox of pins drawn while offline in `localStorage`, namespaced per endpoint. Reconnect reconciles on one rule: **the hub wins on status, the client wins on new pins**. Storage writes never throw upward — private mode or a full quota degrades the mirror, never the toolbar.
-- **Attachments** — screenshots are cropped and webp-encoded **in the browser** (`createImageBitmap` → `OffscreenCanvas` → `convertToBlob`), POSTed to `/attachments`, and the pin then carries the returned **path — never bytes**. Capture is best-effort by design: with no `html2canvas`-class dependency allowed, `src/screenshot.ts` resolves `null` wherever the environment cannot capture, and the pin ships with structured capture alone.
+- **Attachments** — two capture modes, both webp-encoded **in the browser** and POSTed to `/attachments`; the pin then carries the returned **path — never bytes**. The default is a DOM snapshot of the pinned element (`src/screenshot-dom.ts`: clone, inline computed styles, SVG `foreignObject` → canvas; no permission prompt, images become neutral boxes). Tab capture (`src/screenshot.ts`, `getDisplayMedia` → `createImageBitmap` → `OffscreenCanvas`) is opt-in from the bar's camera button and prompts once per page load. Capture is best-effort and bounded (4 s): wherever the environment cannot capture, the pin ships with structured capture alone.
 
 The toolbar's copies of the `ws-protocol.ts` wire constants are mirrored, not imported (core is a **type-only** dependency here — that is what keeps the runtime zero-dependency, and fallow's `allowTypeOnly` enforces it). `e2e/toolbar.test.ts` drives this transport against a real `pinbox serve`, so drift between the two copies fails the build.
 
@@ -41,4 +41,4 @@ The toolbar's copies of the `ws-protocol.ts` wire constants are mirrored, not im
 
 **This package deliberately declares no `engines` field, and must not gain one.** It is the sole exception to the repo-wide `"engines": { "bun": ">=1.3.0" }` rule. The toolbar is browser code: Bun builds it here, but consumers install it into their own toolchain — a Vite/React app on npm under Node, most often. Declaring a Bun engine would make those installs warn, and refuse outright under `engine-strict`, for a package that never executes on a server runtime at all.
 
-Key behaviors (see spec): targeting adapters (`dom` hit-testing | `anchor` attributes for sandboxed-iframe hosts), move pins with before/after rects, live status badges over WS with the accept/reopen verification step, localStorage offline mirror with reconnect reconciliation, copy-as-markdown fallback, `Pinbox.init({ getToken })` auth passthrough — the toolbar never renders a login.
+Key behaviors (see spec): targeting adapters (`dom` hit-testing | `anchor` attributes for sandboxed-iframe hosts), a viewport-space overlay re-laid out per frame so pins hold their element through scrolling, sticky headers and inner scroll containers, two pin kinds on the draft (Ask agent / Note — a `comment` pin is never routed to an agent), pending stages (THINKING → WAITING FOR AGENT → NO RESPONSE with Nudge), resolve/unresolve from the inbox with PR-linked pins grouped, one action table behind the bar, the puck's fan menu and the keyboard (capture-phase, modifier-safe, `shortcuts` config), a draggable bar and puck, live status badges over WS with the accept/reopen verification step, localStorage offline mirror with reconnect reconciliation, copy-as-markdown fallback, `Pinbox.init({ getToken })` auth passthrough — the toolbar never renders a login.

package/dist/{index-DENhglDF.d.ts → index-xNXeJ2mR.d.ts}

@@ -69,6 +69,8 @@ interface ToolbarState {
    * Persisted per endpoint; the bar's camera button flips it.
    */
   captureMode: "dom" | "tab";
+  /** Optional model camera action label; absent preserves the 2D capture toggle. */
+  captureLabel?: string | undefined;
 }
 interface Store {
   get(): ToolbarState;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-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-DENhglDF.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-xNXeJ2mR.js";
 export { type CaptureResult, type ConnectionState, type Draft, HubError, type HubEvent, HubTransport, Pinbox, PinboxConfig, PinboxToolbarElement, type StorageLike, type Store, type ToolbarState, type TransportOptions, type UiStatus, type WebSocketLike, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };

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-BsWnyGwB.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-DnAkx29T.js";
 export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };

package/dist/model-target-BykKL8H5.js

@@ -0,0 +1,350 @@
+//#region src/capture-mode.ts
+function captureKey(prefix) {
+	return `${prefix}:capture`;
+}
+function loadCaptureMode(storage, key, fallback) {
+	try {
+		const raw = storage?.getItem(key);
+		if (raw === "dom" || raw === "tab") return raw;
+	} catch {}
+	return fallback;
+}
+function saveCaptureMode(storage, key, mode) {
+	try {
+		storage?.setItem(key, mode);
+	} catch {}
+}
+//#endregion
+//#region src/model-capture.ts
+const handlers = /* @__PURE__ */ new WeakMap();
+/** The first viewer owns the camera until another registered surface is entered. */
+function registerModelCapture(owner, run, error) {
+	const entry = {
+		run,
+		error,
+		busy: false
+	};
+	const entries = handlers.get(owner) ?? [];
+	entries.push(entry);
+	handlers.set(owner, entries);
+	owner.store.update({ captureLabel: "Capture model screenshot (S)" });
+	return {
+		activate() {
+			const index = entries.indexOf(entry);
+			if (index < 0) return;
+			entries.splice(index, 1);
+			entries.unshift(entry);
+		},
+		destroy() {
+			const index = entries.indexOf(entry);
+			if (index < 0) return;
+			entries.splice(index, 1);
+			if (!entries.length) {
+				handlers.delete(owner);
+				owner.store.update({ captureLabel: void 0 });
+			}
+		}
+	};
+}
+function runModelCapture(owner) {
+	const entries = handlers.get(owner);
+	const entry = entries?.[0];
+	if (!entries || !entry) return false;
+	if (entries.some((candidate) => candidate.busy)) return true;
+	entry.busy = true;
+	try {
+		Promise.resolve(entry.run()).catch(entry.error).finally(() => {
+			entry.busy = false;
+		});
+	} catch (error) {
+		entry.busy = false;
+		entry.error(error);
+	}
+	return true;
+}
+/** Shared by the camera button, puck and S shortcut; preserve the 2D fallback. */
+function toggleToolbarCapture(owner, endpoint, release) {
+	if (runModelCapture(owner)) return true;
+	const next = owner.store.get().captureMode === "tab" ? "dom" : "tab";
+	owner.store.update({ captureMode: next });
+	if (next === "dom") release();
+	saveCaptureMode(globalThis.localStorage, captureKey(`pinbox:${endpoint}`), next);
+	return true;
+}
+//#endregion
+//#region src/targeting/dom.ts
+/**
+* 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 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) {
+	const key = el.classList[0];
+	let name = (key ?? el.tagName).toUpperCase();
+	const parent = el.parentElement;
+	if (parent) {
+		const sibs = [...parent.children].filter((c) => c.classList[0] === key && c.tagName === el.tagName);
+		if (sibs.length > 1) name += ` ${sibs.indexOf(el) + 1}`;
+	}
+	return name;
+}
+/**
+* Human label for a target: an explicit data-pb-el annotation wins; otherwise a
+* CLASS/TAG ancestry chain of at most 3 parts joined with ›, terminating early
+* at the first annotated ancestor.
+*/
+function targetLabel(el) {
+	const own = el.getAttribute("data-pb-el");
+	if (own) return own;
+	const parts = [nodeName(el)];
+	const body = el.ownerDocument.body;
+	let node = el.parentElement;
+	while (node && node !== body && parts.length < 3) {
+		const anchor = node.getAttribute("data-pb-el");
+		if (anchor) {
+			parts.unshift(anchor);
+			break;
+		}
+		if (node.classList[0]) parts.unshift(nodeName(node));
+		node = node.parentElement;
+	}
+	return parts.join(" › ");
+}
+const SAFE_ID = /^[A-Za-z][\w-]*$/;
+/** Data attributes trusted as stable hooks, in priority order. */
+const STABLE_DATA_ATTRS = [
+	"data-pb-anchor",
+	"data-pb-el",
+	"data-testid"
+];
+function attrSegment(el, doc) {
+	for (const attr of STABLE_DATA_ATTRS) {
+		const value = el.getAttribute(attr);
+		if (value === null || value.includes("\"") || value.includes("\\")) continue;
+		const selector = `${el.tagName.toLowerCase()}[${attr}="${value}"]`;
+		if (doc.querySelectorAll(selector).length === 1) return selector;
+	}
+	return null;
+}
+function nthSegment(el) {
+	const tag = el.tagName.toLowerCase();
+	const parent = el.parentElement;
+	if (!parent) return tag;
+	const sameTag = [...parent.children].filter((c) => c.tagName === el.tagName);
+	return sameTag.length > 1 ? `${tag}:nth-of-type(${sameTag.indexOf(el) + 1})` : tag;
+}
+/**
+* Stable CSS path for an element: ids > stable data attributes > an
+* nth-of-type chain. Guaranteed round-trip: querySelector(buildSelector(el)) === el.
+*/
+function buildSelector(el) {
+	const doc = el.ownerDocument;
+	const segments = [];
+	let node = el;
+	while (node && node !== doc.documentElement) {
+		const id = node.getAttribute("id");
+		if (id && SAFE_ID.test(id) && doc.querySelectorAll(`#${id}`).length === 1) {
+			segments.unshift(`#${id}`);
+			return segments.join(" > ");
+		}
+		const byAttr = attrSegment(node, doc);
+		if (byAttr) {
+			segments.unshift(byAttr);
+			return segments.join(" > ");
+		}
+		segments.unshift(nthSegment(node));
+		node = node.parentElement;
+	}
+	return segments.join(" > ");
+}
+//#endregion
+//#region src/capture.ts
+/** Curated computed-style subset — enough to reconstruct layout intent, tiny on the wire. */
+const STYLE_KEYS = [
+	"display",
+	"position",
+	"font-size",
+	"color",
+	"background-color",
+	"margin",
+	"padding",
+	"overflow"
+];
+const NEARBY_TEXT_MAX = 160;
+function styleSubset(win, el) {
+	let cs;
+	try {
+		cs = win.getComputedStyle(el);
+	} catch {
+		return;
+	}
+	const out = {};
+	for (const key of STYLE_KEYS) {
+		const value = cs.getPropertyValue(key);
+		if (value !== "") out[key] = value;
+	}
+	return Object.keys(out).length > 0 ? out : void 0;
+}
+function ariaMap(el) {
+	const out = {};
+	for (const name of el.getAttributeNames()) if (name.startsWith("aria-")) out[name] = el.getAttribute(name) ?? "";
+	return Object.keys(out).length > 0 ? out : void 0;
+}
+function nearbyText(el) {
+	const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+	return text === "" ? void 0 : text.slice(0, NEARBY_TEXT_MAX);
+}
+/** The user's selection, only when it intersects the captured element. */
+function selectedText(win, el) {
+	try {
+		const sel = win.getSelection?.();
+		if (!sel || sel.isCollapsed || sel.rangeCount === 0) return void 0;
+		if (!sel.getRangeAt(0).intersectsNode(el)) return void 0;
+		const text = sel.toString().trim();
+		return text === "" ? void 0 : text;
+	} catch {
+		return;
+	}
+}
+/** `fixed` detected via ancestry: any ancestor with computed position: fixed. */
+function isFixed(win, el) {
+	for (let node = el; node !== null; node = node.parentElement) try {
+		if (win.getComputedStyle(node).position === "fixed") return true;
+	} catch {
+		return false;
+	}
+	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];
+	const styles = styleSubset(win, el);
+	if (styles !== void 0) context.styles = styles;
+	const aria = ariaMap(el);
+	if (aria !== void 0) context.aria = aria;
+	const nearby = nearbyText(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). */
+function captureTarget(el, opts) {
+	const win = el.ownerDocument.defaultView;
+	const r = el.getBoundingClientRect();
+	const target = {
+		url: win.location.href,
+		selector: buildSelector(el),
+		tag: el.tagName.toLowerCase(),
+		rect: {
+			x: r.left + win.scrollX,
+			y: r.top + win.scrollY,
+			width: r.width,
+			height: r.height
+		},
+		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 {
+		target,
+		env: {
+			viewport: {
+				w: win.innerWidth,
+				h: win.innerHeight,
+				dpr: win.devicePixelRatio
+			},
+			browser: win.navigator.userAgent,
+			os: win.navigator.platform || "unknown",
+			colorScheme: win.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+		}
+	};
+}
+//#endregion
+//#region src/model-target.ts
+const projectors = /* @__PURE__ */ new WeakMap();
+function registerModelProjection(doc, project) {
+	const set = projectors.get(doc) ?? /* @__PURE__ */ new Set();
+	const entry = (anchor) => project(anchor);
+	set.add(entry);
+	projectors.set(doc, set);
+	return () => {
+		set.delete(entry);
+		if (!set.size) projectors.delete(doc);
+	};
+}
+function projectModelTarget(doc, anchor) {
+	for (const project of projectors.get(doc) ?? []) {
+		const p = project(anchor);
+		if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) return {
+			x: p.x,
+			y: p.y,
+			width: 0,
+			height: 0
+		};
+	}
+	return null;
+}
+//#endregion
+export { targetLabel as a, captureKey as c, hitTest as i, loadCaptureMode as l, registerModelProjection as n, registerModelCapture as o, captureTarget as r, toggleToolbarCapture as s, projectModelTarget as t };

package/dist/model.d.ts

@@ -0,0 +1,52 @@
+import { d as PinboxToolbarElement } from "./index-xNXeJ2mR.js";
+import { ModelAnchor, ModelAnchor as ModelAnchor$1, Pin } from "@autono/pinbox-core/schema";
+//#region src/model-target.d.ts
+type ModelProjection = (anchor: ModelAnchor$1) => {
+  x: number;
+  y: number;
+} | null;
+//#endregion
+//#region src/model-ui.d.ts
+type ModelViewerAdapter = {
+  /** Canvas or element containing the model. DOM pins outside it keep working. */
+  surface: HTMLElement;
+  /** Raycast a viewport point; return a part-local anchor, or null for empty space. */
+  pick: (clientX: number, clientY: number) => ModelAnchor$1 | null;
+  /** Project to viewport CSS pixels. Null for a stale, hidden or occluded anchor. */
+  project: ModelProjection;
+  /** Called each update in pin mode, or null when the hover clears. */
+  onHover?: (anchor: ModelAnchor$1 | null) => void;
+  /** Filter activation for multiple viewers; may accept older revisions for loading. */
+  acceptsAnchor?: (anchor: ModelAnchor$1) => boolean;
+  /** Animate/load a pin view. Stop stale asynchronous work when signal is aborted. */
+  onActivate?: (anchor: ModelAnchor$1, pin: Pin, context: {
+    signal: AbortSignal;
+  }) => void | Promise<void>;
+  /** Camera button and S action. Host owns capture, preview, save and chat/storage UI. */
+  onCapture?: () => void | Promise<void>;
+  onError?: (error: unknown) => void;
+};
+/** Connect the real Pinbox toolbar, draft card and needle markers to a 3D viewer.
+ * Call update() after rendering a frame. Destroy before removing the viewer. */
+declare function attachModelViewer(toolbar: PinboxToolbarElement, adapter: ModelViewerAdapter): {
+  openPin: (id: string) => Promise<void>;
+  update(): void;
+  destroy(): void;
+};
+//#endregion
+//#region src/model.d.ts
+type ModelScene = {
+  modelId: string;
+  revision: string;
+  /** Column-major 4x4 object-to-world matrix (e.g. Three.js matrixWorld.elements). */
+  partMatrix: (partId: string) => readonly number[] | undefined;
+};
+type AnchorResolution = {
+  status: "visible";
+  worldPosition: [number, number, number];
+} | {
+  status: "stale" | "missing";
+};
+declare function resolveModelAnchor(anchor: ModelAnchor, scene: ModelScene): AnchorResolution;
+//#endregion
+export { AnchorResolution, type ModelAnchor, ModelScene, type ModelViewerAdapter, attachModelViewer, resolveModelAnchor };

package/dist/model.js

@@ -0,0 +1,182 @@
+import { n as registerModelProjection, o as registerModelCapture, r as captureTarget } from "./model-target-BykKL8H5.js";
+//#region src/model-hooks.ts
+/** Renderer callbacks stay separate from placement and marker projection. */
+function attachModelHooks(toolbar, adapter) {
+	const surface = adapter.surface, win = surface.ownerDocument.defaultView;
+	if (!win) throw new Error("The model surface must belong to a browser document");
+	const error = adapter.onError ?? ((cause) => console.error("Pinbox model hook failed", cause));
+	const capture = adapter.onCapture ? registerModelCapture(toolbar, adapter.onCapture, error) : void 0;
+	let point, hovering = false, disposed = false;
+	let active = null, controller;
+	let activation = Promise.resolve();
+	const clear = () => {
+		point = void 0;
+		if (hovering) {
+			hovering = false;
+			adapter.onHover?.(null);
+		}
+	};
+	const move = (event) => {
+		if (!event.composedPath().includes(surface)) {
+			clear();
+			return;
+		}
+		point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		capture?.activate();
+	};
+	const focus = () => capture?.activate();
+	const activate = (pin) => {
+		controller?.abort();
+		controller = new AbortController();
+		const signal = controller.signal, anchor = pin.target?.model;
+		if (!anchor || !adapter.onActivate || adapter.acceptsAnchor && !adapter.acceptsAnchor(anchor)) return Promise.resolve();
+		try {
+			return Promise.resolve(adapter.onActivate(anchor, pin, { signal })).catch((cause) => {
+				if (!signal.aborted) error(cause);
+			});
+		} catch (cause) {
+			error(cause);
+			return Promise.resolve();
+		}
+	};
+	const unsubscribe = toolbar.store.subscribe((state) => {
+		if (state.mode !== "placing" && hovering) {
+			hovering = false;
+			adapter.onHover?.(null);
+		}
+		if (active === state.activePinId) return;
+		const pin = state.pins.find((p) => p.id === state.activePinId);
+		if (state.activePinId && !pin) return;
+		active = state.activePinId;
+		controller?.abort();
+		if (pin) activation = activate(pin);
+	});
+	win.addEventListener("pointermove", move, true);
+	win.addEventListener("blur", clear);
+	surface.addEventListener("pointerleave", clear);
+	surface.addEventListener("pointerdown", focus, true);
+	return {
+		update() {
+			if (disposed || !adapter.onHover || !point || toolbar.store.get().mode !== "placing") return;
+			try {
+				const anchor = adapter.pick(point.x, point.y);
+				hovering = anchor !== null;
+				adapter.onHover(anchor);
+			} catch (cause) {
+				clear();
+				error(cause);
+			}
+		},
+		async openPin(id) {
+			if (disposed) return;
+			const pin = toolbar.store.get().pins.find((p) => p.id === id);
+			if (!pin) throw new Error("Pin not found.");
+			if (active === id) activation = activate(pin);
+			toolbar.store.update({
+				mode: "idle",
+				activePinId: id,
+				pinsHidden: false
+			});
+			await activation;
+		},
+		destroy() {
+			if (disposed) return;
+			disposed = true;
+			controller?.abort();
+			unsubscribe();
+			clear();
+			capture?.destroy();
+			win.removeEventListener("pointermove", move, true);
+			win.removeEventListener("blur", clear);
+			surface.removeEventListener("pointerleave", clear);
+			surface.removeEventListener("pointerdown", focus, true);
+		}
+	};
+}
+//#endregion
+//#region src/model-ui.ts
+/** Connect the real Pinbox toolbar, draft card and needle markers to a 3D viewer.
+* Call update() after rendering a frame. Destroy before removing the viewer. */
+function attachModelViewer(toolbar, adapter) {
+	const doc = adapter.surface.ownerDocument, win = doc.defaultView;
+	if (!win) throw new Error("The model surface must belong to a browser document");
+	const unregister = registerModelProjection(doc, adapter.project);
+	const hooks = attachModelHooks(toolbar, adapter);
+	let down;
+	const pointerDown = (e) => {
+		if (e.composedPath().includes(adapter.surface)) down = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	};
+	const click = (e) => {
+		if (toolbar.store.get().mode !== "placing" || e.composedPath().includes(toolbar) || !e.composedPath().includes(adapter.surface)) return;
+		e.preventDefault();
+		e.stopImmediatePropagation();
+		if (down && Math.hypot(e.clientX - down.x, e.clientY - down.y) > 5) {
+			down = void 0;
+			return;
+		}
+		down = void 0;
+		const model = adapter.pick(e.clientX, e.clientY);
+		if (!model) return;
+		const at = {
+			x: e.clientX + win.scrollX,
+			y: e.clientY + win.scrollY
+		};
+		const captured = captureTarget(adapter.surface, { at });
+		captured.target.model = model;
+		captured.target.anchor = `3D · ${model.partId}`;
+		delete captured.target.spot;
+		toolbar.store.place({
+			target: captured,
+			placedAt: at
+		});
+	};
+	win.addEventListener("pointerdown", pointerDown, true);
+	win.addEventListener("click", click, true);
+	let destroyed = false;
+	return {
+		openPin: hooks.openPin,
+		update() {
+			if (destroyed || !toolbar.isConnected) return;
+			hooks.update();
+			const s = toolbar.store.get();
+			if (s.pins.some((p) => p.target?.model) || s.draft?.target.target.model) toolbar.store.update({ clock: s.clock });
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			hooks.destroy();
+			unregister();
+			win.removeEventListener("pointerdown", pointerDown, true);
+			win.removeEventListener("click", click, true);
+		}
+	};
+}
+//#endregion
+//#region src/model.ts
+function resolveModelAnchor(anchor, scene) {
+	if (anchor.modelId !== scene.modelId || anchor.revision !== scene.revision) return { status: "stale" };
+	const values = scene.partMatrix(anchor.partId);
+	if (values?.length !== 16 || !values.every(Number.isFinite)) return { status: "missing" };
+	const m = values;
+	const [x, y, z] = anchor.position;
+	const w = m[3] * x + m[7] * y + m[11] * z + m[15];
+	if (!Number.isFinite(w) || Math.abs(w) < 1e-12) return { status: "missing" };
+	const worldPosition = [
+		(m[0] * x + m[4] * y + m[8] * z + m[12]) / w,
+		(m[1] * x + m[5] * y + m[9] * z + m[13]) / w,
+		(m[2] * x + m[6] * y + m[10] * z + m[14]) / w
+	];
+	if (!worldPosition.every(Number.isFinite)) return { status: "missing" };
+	return {
+		status: "visible",
+		worldPosition
+	};
+}
+//#endregion
+export { attachModelViewer, resolveModelAnchor };

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { n as PinboxConfig } from "./index-DENhglDF.js";
+import { n as PinboxConfig } from "./index-xNXeJ2mR.js";
 import { ReactElement } from "react";
 //#region src/react.d.ts
 /**

package/dist/react.js

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

package/dist/{src-BsWnyGwB.js → src-DnAkx29T.js}

@@ -1,3 +1,4 @@
+import { a as targetLabel, c as captureKey, i as hitTest, l as loadCaptureMode, r as captureTarget, s as toggleToolbarCapture, t as projectModelTarget } from "./model-target-BykKL8H5.js";
 //#region src/anchor-watch.ts
 function watchAnchors(win, onChange) {
 	let frame = 0;
@@ -22,23 +23,6 @@ function watchAnchors(win, onChange) {
 	} };
 }
 //#endregion
-//#region src/capture-mode.ts
-function captureKey(prefix) {
-	return `${prefix}:capture`;
-}
-function loadCaptureMode(storage, key, fallback) {
-	try {
-		const raw = storage?.getItem(key);
-		if (raw === "dom" || raw === "tab") return raw;
-	} catch {}
-	return fallback;
-}
-function saveCaptureMode(storage, key, mode) {
-	try {
-		storage?.setItem(key, mode);
-	} catch {}
-}
-//#endregion
 //#region src/ui/actions.ts
 const PIN_GLYPH = "<rect x=\"3\" y=\"1.5\" width=\"10\" height=\"6.5\" rx=\"1\"/><path d=\"M8 8v6.5\"/>";
 const INBOX_GLYPH = "<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\"/>";
@@ -208,10 +192,11 @@ function threadTail(thread) {
 	];
 }
 function block(pin, thread) {
-	const { selector, url, source } = pin.target ?? {};
+	const { selector, url, source, model } = pin.target ?? {};
 	return [
 		`## Pin ${pin.n === void 0 ? pin.id : `#${pin.n} (${pin.id})`} — ${pin.status.toUpperCase()}`,
 		`- label: ${line(label(pin))}`,
+		...model ? [`- model: ${line(model.modelId)} / ${line(model.partId)} @ ${line(model.revision)}`, `- position: ${model.position.join(", ")} ${model.units}`] : [],
 		...selector === void 0 ? [] : [`- selector: \`${line(selector)}\``],
 		...(pin.target?.targets ?? []).map((t) => t.selector ?? t.anchor ?? t.tag).filter((locus) => locus !== void 0).map((locus) => `- also: \`${line(locus)}\``),
 		...source === void 0 ? [] : [`- source: ${line(source.line === void 0 ? source.file : `${source.file}:${source.line}`)}`],
@@ -808,256 +793,6 @@ function createMinimize(host) {
 	};
 }
 //#endregion
-//#region src/targeting/dom.ts
-/**
-* 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 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) {
-	const key = el.classList[0];
-	let name = (key ?? el.tagName).toUpperCase();
-	const parent = el.parentElement;
-	if (parent) {
-		const sibs = [...parent.children].filter((c) => c.classList[0] === key && c.tagName === el.tagName);
-		if (sibs.length > 1) name += ` ${sibs.indexOf(el) + 1}`;
-	}
-	return name;
-}
-/**
-* Human label for a target: an explicit data-pb-el annotation wins; otherwise a
-* CLASS/TAG ancestry chain of at most 3 parts joined with ›, terminating early
-* at the first annotated ancestor.
-*/
-function targetLabel(el) {
-	const own = el.getAttribute("data-pb-el");
-	if (own) return own;
-	const parts = [nodeName(el)];
-	const body = el.ownerDocument.body;
-	let node = el.parentElement;
-	while (node && node !== body && parts.length < 3) {
-		const anchor = node.getAttribute("data-pb-el");
-		if (anchor) {
-			parts.unshift(anchor);
-			break;
-		}
-		if (node.classList[0]) parts.unshift(nodeName(node));
-		node = node.parentElement;
-	}
-	return parts.join(" › ");
-}
-const SAFE_ID = /^[A-Za-z][\w-]*$/;
-/** Data attributes trusted as stable hooks, in priority order. */
-const STABLE_DATA_ATTRS = [
-	"data-pb-anchor",
-	"data-pb-el",
-	"data-testid"
-];
-function attrSegment(el, doc) {
-	for (const attr of STABLE_DATA_ATTRS) {
-		const value = el.getAttribute(attr);
-		if (value === null || value.includes("\"") || value.includes("\\")) continue;
-		const selector = `${el.tagName.toLowerCase()}[${attr}="${value}"]`;
-		if (doc.querySelectorAll(selector).length === 1) return selector;
-	}
-	return null;
-}
-function nthSegment(el) {
-	const tag = el.tagName.toLowerCase();
-	const parent = el.parentElement;
-	if (!parent) return tag;
-	const sameTag = [...parent.children].filter((c) => c.tagName === el.tagName);
-	return sameTag.length > 1 ? `${tag}:nth-of-type(${sameTag.indexOf(el) + 1})` : tag;
-}
-/**
-* Stable CSS path for an element: ids > stable data attributes > an
-* nth-of-type chain. Guaranteed round-trip: querySelector(buildSelector(el)) === el.
-*/
-function buildSelector(el) {
-	const doc = el.ownerDocument;
-	const segments = [];
-	let node = el;
-	while (node && node !== doc.documentElement) {
-		const id = node.getAttribute("id");
-		if (id && SAFE_ID.test(id) && doc.querySelectorAll(`#${id}`).length === 1) {
-			segments.unshift(`#${id}`);
-			return segments.join(" > ");
-		}
-		const byAttr = attrSegment(node, doc);
-		if (byAttr) {
-			segments.unshift(byAttr);
-			return segments.join(" > ");
-		}
-		segments.unshift(nthSegment(node));
-		node = node.parentElement;
-	}
-	return segments.join(" > ");
-}
-//#endregion
-//#region src/capture.ts
-/** Curated computed-style subset — enough to reconstruct layout intent, tiny on the wire. */
-const STYLE_KEYS = [
-	"display",
-	"position",
-	"font-size",
-	"color",
-	"background-color",
-	"margin",
-	"padding",
-	"overflow"
-];
-const NEARBY_TEXT_MAX = 160;
-function styleSubset(win, el) {
-	let cs;
-	try {
-		cs = win.getComputedStyle(el);
-	} catch {
-		return;
-	}
-	const out = {};
-	for (const key of STYLE_KEYS) {
-		const value = cs.getPropertyValue(key);
-		if (value !== "") out[key] = value;
-	}
-	return Object.keys(out).length > 0 ? out : void 0;
-}
-function ariaMap(el) {
-	const out = {};
-	for (const name of el.getAttributeNames()) if (name.startsWith("aria-")) out[name] = el.getAttribute(name) ?? "";
-	return Object.keys(out).length > 0 ? out : void 0;
-}
-function nearbyText(el) {
-	const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
-	return text === "" ? void 0 : text.slice(0, NEARBY_TEXT_MAX);
-}
-/** The user's selection, only when it intersects the captured element. */
-function selectedText(win, el) {
-	try {
-		const sel = win.getSelection?.();
-		if (!sel || sel.isCollapsed || sel.rangeCount === 0) return void 0;
-		if (!sel.getRangeAt(0).intersectsNode(el)) return void 0;
-		const text = sel.toString().trim();
-		return text === "" ? void 0 : text;
-	} catch {
-		return;
-	}
-}
-/** `fixed` detected via ancestry: any ancestor with computed position: fixed. */
-function isFixed(win, el) {
-	for (let node = el; node !== null; node = node.parentElement) try {
-		if (win.getComputedStyle(node).position === "fixed") return true;
-	} catch {
-		return false;
-	}
-	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];
-	const styles = styleSubset(win, el);
-	if (styles !== void 0) context.styles = styles;
-	const aria = ariaMap(el);
-	if (aria !== void 0) context.aria = aria;
-	const nearby = nearbyText(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). */
-function captureTarget(el, opts) {
-	const win = el.ownerDocument.defaultView;
-	const r = el.getBoundingClientRect();
-	const target = {
-		url: win.location.href,
-		selector: buildSelector(el),
-		tag: el.tagName.toLowerCase(),
-		rect: {
-			x: r.left + win.scrollX,
-			y: r.top + win.scrollY,
-			width: r.width,
-			height: r.height
-		},
-		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 {
-		target,
-		env: {
-			viewport: {
-				w: win.innerWidth,
-				h: win.innerHeight,
-				dpr: win.devicePixelRatio
-			},
-			browser: win.navigator.userAgent,
-			os: win.navigator.platform || "unknown",
-			colorScheme: win.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-		}
-	};
-}
-//#endregion
 //#region src/ui/aim.ts
 /**
 * True when aiming has to be done by dragging rather than by pointing.
@@ -1311,7 +1046,8 @@ function createPlacement(deps) {
 	function placeDraft(e) {
 		e.preventDefault();
 		e.stopPropagation();
-		const capture = captureTarget(hover ?? doc.body, { at: {
+		const el = hover ?? doc.body;
+		const capture = captureTarget(el, { at: {
 			x: e.pageX,
 			y: e.pageY
 		} });
@@ -2368,8 +2104,8 @@ function createBar(doc, on) {
 			inboxBtn.classList.toggle("lit", state.inboxOpen);
 			const open = String(openTaskCount(state.pins));
 			if (count.textContent !== open) count.textContent = open;
-			captureBtn.classList.toggle("lit", state.captureMode === "tab");
-			captureBtn.title = state.captureMode === "tab" ? "Tab capture on — real pixels, Chrome asks once per page load (S)" : "Screenshots: DOM snapshot, no prompt — press for tab capture (S)";
+			captureBtn.classList.toggle("lit", !state.captureLabel && state.captureMode === "tab");
+			captureBtn.title = state.captureLabel ?? (state.captureMode === "tab" ? "Tab capture on — real pixels, Chrome asks once per page load (S)" : "Screenshots: DOM snapshot, no prompt — press for tab capture (S)");
 			if (hideShown !== state.pinsHidden) {
 				hideShown = state.pinsHidden;
 				hideBtn.innerHTML = icon(state.pinsHidden ? EYE_GLYPH : EYE_OFF_GLYPH, 14);
@@ -2687,6 +2423,7 @@ function anchorRect(doc, pin) {
 }
 /** The same resolution for any captured target — a pin's, or the draft's before it commits. */
 function targetRect(doc, target) {
+	if (target?.model) return projectModelTarget(doc, target.model);
 	const stored = target?.rect;
 	if (stored === void 0) return null;
 	const win = doc.defaultView;
@@ -3016,6 +2753,7 @@ function anchorOf(root, pin, draft) {
 * labels the card without claiming an element that was never captured.
 */
 function labelOf(target) {
+	if (target?.model) return `3D · ${target.model.partId}`;
 	return target?.anchor ?? target?.tag?.toUpperCase() ?? "PIN";
 }
 function viewOf(root, state) {
@@ -3753,11 +3491,7 @@ var PinboxToolbarElement = class extends BaseElement {
 		return loadCaptureMode(globalThis.localStorage, key, this.config?.capture ?? "dom");
 	}
 	#toggleCapture() {
-		const next = this.store.get().captureMode === "tab" ? "dom" : "tab";
-		this.store.update({ captureMode: next });
-		if (next === "dom") releaseCapture();
-		saveCaptureMode(globalThis.localStorage, captureKey(`pinbox:${this.config?.endpoint ?? ""}`), next);
-		return true;
+		return toggleToolbarCapture(this, this.config?.endpoint ?? "", releaseCapture);
 	}
 	/** Theme from the OS when the host set none; the page-level CSS (placing cursor) into <head>. */
 	#applyPageDefaults() {

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-DENhglDF.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-xNXeJ2mR.js";
 import { Action } from "svelte/action";
 //#region src/svelte.d.ts
 /**

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-BsWnyGwB.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-DnAkx29T.js";
 //#region src/svelte.ts
 /**
 * `<div use:pinbox={{ endpoint }} />` — creates + configures the element BEFORE insertion

package/dist/toolbar.iife.js

@@ -210,10 +210,11 @@ var Pinbox = (function(exports) {
 		];
 	}
 	function block(pin, thread) {
-		const { selector, url, source } = pin.target ?? {};
+		const { selector, url, source, model } = pin.target ?? {};
 		return [
 			`## Pin ${pin.n === void 0 ? pin.id : `#${pin.n} (${pin.id})`} — ${pin.status.toUpperCase()}`,
 			`- label: ${line(label(pin))}`,
+			...model ? [`- model: ${line(model.modelId)} / ${line(model.partId)} @ ${line(model.revision)}`, `- position: ${model.position.join(", ")} ${model.units}`] : [],
 			...selector === void 0 ? [] : [`- selector: \`${line(selector)}\``],
 			...(pin.target?.targets ?? []).map((t) => t.selector ?? t.anchor ?? t.tag).filter((locus) => locus !== void 0).map((locus) => `- also: \`${line(locus)}\``),
 			...source === void 0 ? [] : [`- source: ${line(source.line === void 0 ? source.file : `${source.file}:${source.line}`)}`],
@@ -810,6 +811,34 @@ var Pinbox = (function(exports) {
 		};
 	}
 	//#endregion
+	//#region src/model-capture.ts
+	const handlers = /* @__PURE__ */ new WeakMap();
+	function runModelCapture(owner) {
+		const entries = handlers.get(owner);
+		const entry = entries?.[0];
+		if (!entries || !entry) return false;
+		if (entries.some((candidate) => candidate.busy)) return true;
+		entry.busy = true;
+		try {
+			Promise.resolve(entry.run()).catch(entry.error).finally(() => {
+				entry.busy = false;
+			});
+		} catch (error) {
+			entry.busy = false;
+			entry.error(error);
+		}
+		return true;
+	}
+	/** Shared by the camera button, puck and S shortcut; preserve the 2D fallback. */
+	function toggleToolbarCapture(owner, endpoint, release) {
+		if (runModelCapture(owner)) return true;
+		const next = owner.store.get().captureMode === "tab" ? "dom" : "tab";
+		owner.store.update({ captureMode: next });
+		if (next === "dom") release();
+		saveCaptureMode(globalThis.localStorage, captureKey(`pinbox:${endpoint}`), next);
+		return true;
+	}
+	//#endregion
 	//#region src/targeting/dom.ts
 	/**
 	* Deepest element under (clientX, clientY) that the caller does not ignore, or null when there is
@@ -2370,8 +2399,8 @@ var Pinbox = (function(exports) {
 				inboxBtn.classList.toggle("lit", state.inboxOpen);
 				const open = String(openTaskCount(state.pins));
 				if (count.textContent !== open) count.textContent = open;
-				captureBtn.classList.toggle("lit", state.captureMode === "tab");
-				captureBtn.title = state.captureMode === "tab" ? "Tab capture on — real pixels, Chrome asks once per page load (S)" : "Screenshots: DOM snapshot, no prompt — press for tab capture (S)";
+				captureBtn.classList.toggle("lit", !state.captureLabel && state.captureMode === "tab");
+				captureBtn.title = state.captureLabel ?? (state.captureMode === "tab" ? "Tab capture on — real pixels, Chrome asks once per page load (S)" : "Screenshots: DOM snapshot, no prompt — press for tab capture (S)");
 				if (hideShown !== state.pinsHidden) {
 					hideShown = state.pinsHidden;
 					hideBtn.innerHTML = icon(state.pinsHidden ? EYE_GLYPH : EYE_OFF_GLYPH, 14);
@@ -2644,6 +2673,21 @@ var Pinbox = (function(exports) {
 		return `${isDraft ? `<div class="pb-seg" role="radiogroup" aria-label="Pin kind"><button type="button" role="radio" aria-checked="${kind === "note"}" class="${kind === "note" ? "on" : ""}" data-kind="note" title="An agent picks this up">Ask agent</button><button type="button" role="radio" aria-checked="${kind === "comment"}" class="${kind === "comment" ? "on" : ""}" data-kind="comment" title="A remark for people; no agent acts on it">Note</button></div>` : ""}<div class="pb-kbd">⌘ ↵</div><button type="button" class="pb-bt-solid" data-action="send">${hasThread ? "Reply" : kind === "comment" ? "Leave note" : "Comment"}</button>`;
 	}
 	//#endregion
+	//#region src/model-target.ts
+	const projectors = /* @__PURE__ */ new WeakMap();
+	function projectModelTarget(doc, anchor) {
+		for (const project of projectors.get(doc) ?? []) {
+			const p = project(anchor);
+			if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) return {
+				x: p.x,
+				y: p.y,
+				width: 0,
+				height: 0
+			};
+		}
+		return null;
+	}
+	//#endregion
 	//#region src/ui/pins.ts
 	/** The prototype's `_h` innerHTML memo, kept off the DOM node. */
 	const chipMemo = /* @__PURE__ */ new WeakMap();
@@ -2689,6 +2733,7 @@ var Pinbox = (function(exports) {
 	}
 	/** The same resolution for any captured target — a pin's, or the draft's before it commits. */
 	function targetRect(doc, target) {
+		if (target?.model) return projectModelTarget(doc, target.model);
 		const stored = target?.rect;
 		if (stored === void 0) return null;
 		const win = doc.defaultView;
@@ -3018,6 +3063,7 @@ var Pinbox = (function(exports) {
 	* labels the card without claiming an element that was never captured.
 	*/
 	function labelOf(target) {
+		if (target?.model) return `3D · ${target.model.partId}`;
 		return target?.anchor ?? target?.tag?.toUpperCase() ?? "PIN";
 	}
 	function viewOf(root, state) {
@@ -3755,11 +3801,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			return loadCaptureMode(globalThis.localStorage, key, this.config?.capture ?? "dom");
 		}
 		#toggleCapture() {
-			const next = this.store.get().captureMode === "tab" ? "dom" : "tab";
-			this.store.update({ captureMode: next });
-			if (next === "dom") releaseCapture();
-			saveCaptureMode(globalThis.localStorage, captureKey(`pinbox:${this.config?.endpoint ?? ""}`), next);
-			return true;
+			return toggleToolbarCapture(this, this.config?.endpoint ?? "", releaseCapture);
 		}
 		/** Theme from the OS when the host set none; the page-level CSS (placing cursor) into <head>. */
 		#applyPageDefaults() {

package/dist/vue.d.ts

@@ -1,4 +1,4 @@
-import { d as PinboxToolbarElement, n as PinboxConfig } from "./index-DENhglDF.js";
+import { d as PinboxToolbarElement, n as PinboxConfig } from "./index-xNXeJ2mR.js";
 import { VNode } from "vue";
 //#region src/vue.d.ts
 /** The slice of the Vue component instance this wrapper touches. */

package/dist/vue.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/pinbox-toolbar",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -42,7 +42,11 @@
       "types": "./dist/plugins/next.d.ts",
       "default": "./dist/plugins/next.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./model": {
+      "types": "./dist/model.d.ts",
+      "default": "./dist/model.js"
+    }
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -71,7 +75,7 @@
     }
   },
   "devDependencies": {
-    "@autono/pinbox-core": "0.18.0",
+    "@autono/pinbox-core": "0.20.0",
     "@types/react": "^19.2.0",
     "typescript": "^7.0.0",
     "tsdown": "^0.22.0",