@autono/pinbox-toolbar 0.19.0 → 0.21.0

package/dist/{src-BsWnyGwB.js → src-B134WXZ8.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,254 +793,123 @@ 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;
+//#region src/reveal-settle.ts
+const pending = /* @__PURE__ */ new WeakMap();
+function cancelRevealSettle(doc) {
+	pending.get(doc)?.();
 }
-/**
-* 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(" > ");
+function settlePinReveal(doc, reveal) {
+	cancelRevealSettle(doc);
+	const win = doc.defaultView;
+	if (!win) return;
+	let attempts = 0;
+	let timer = 0;
+	const events = [
+		"wheel",
+		"touchstart",
+		"pointerdown",
+		"keydown"
+	];
+	const stop = () => {
+		win.clearTimeout(timer);
+		for (const event of events) doc.removeEventListener(event, stop, true);
+		pending.delete(doc);
+	};
+	for (const event of events) doc.addEventListener(event, stop, {
+		capture: true,
+		passive: true
+	});
+	const tick = () => {
+		reveal();
+		if (++attempts >= 10) stop();
+		else timer = win.setTimeout(tick, 150);
+	};
+	pending.set(doc, stop);
+	timer = win.setTimeout(tick, 150);
 }
 //#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;
+//#region src/pin-reveal.ts
+/** Query ordering is not a view change; repeated parameter ordering remains intact. */
+function samePinView(win, value) {
+	if (!value) return true;
 	try {
-		cs = win.getComputedStyle(el);
+		const target = new URL(value, win.location.href);
+		const current = new URL(win.location.href);
+		target.searchParams.sort();
+		current.searchParams.sort();
+		return target.pathname === current.pathname && target.search === current.search;
 	} catch {
-		return;
-	}
-	const out = {};
-	for (const key of STYLE_KEYS) {
-		const value = cs.getPropertyValue(key);
-		if (value !== "") out[key] = value;
+		return true;
 	}
-	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 pagePin(pin) {
+	return pin.target?.selector === "html" || pin.target?.selector === "body";
 }
-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) {
+/** Resolve before clipping: an offscreen row is precisely the target we need to scroll. */
+function scrollToPin(doc, pin) {
+	if (pin.target?.model || pagePin(pin)) return false;
+	const win = doc.defaultView;
+	if (!win || !samePinView(win, pin.target?.url) || !pin.target?.selector) return false;
 	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;
+		const element = doc.querySelector(pin.target.selector);
+		if (!element?.getClientRects().length) return false;
+		element.scrollIntoView({
+			behavior: "instant",
+			block: "center",
+			inline: "center"
+		});
+		return true;
 	} catch {
-		return;
+		return false;
 	}
 }
-/** `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;
+const key = (endpoint) => `pinbox:${endpoint}:reveal`;
+/** Returns true when leaving this document. Never navigates to a different origin. */
+function revealPin(doc, pin, endpoint) {
+	cancelRevealSettle(doc);
+	const win = doc.defaultView;
+	if (!win) return false;
+	try {
+		win.sessionStorage.removeItem(key(endpoint));
+	} catch {}
+	if (pagePin(pin) || pin.target?.model) return false;
+	if (pin.target?.url && !samePinView(win, pin.target.url)) try {
+		const target = new URL(pin.target.url, win.location.href);
+		if (target.origin !== win.location.origin || !["http:", "https:"].includes(target.protocol)) return false;
+		win.sessionStorage.setItem(key(endpoint), JSON.stringify({
+			id: pin.id,
+			expires: Date.now() + 3e4
+		}));
+		win.location.assign(target.href);
+		return true;
 	} catch {
 		return false;
 	}
+	scrollToPin(doc, pin);
 	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;
+/** Called on pin updates and DOM changes: SPA content may arrive after the toolbar. */
+function pendingPinReveal(doc, pins, endpoint) {
+	const win = doc.defaultView;
+	if (!win) return null;
+	try {
+		const raw = win.sessionStorage.getItem(key(endpoint));
+		if (!raw) return null;
+		const pending = JSON.parse(raw);
+		if (typeof pending.id !== "string" || !Number.isFinite(pending.expires) || pending.expires < Date.now()) {
+			win.sessionStorage.removeItem(key(endpoint));
+			return null;
 		}
-		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 pin = pins.find((p) => p.id === pending.id);
+		if (!pin || !scrollToPin(doc, pin)) return null;
+		win.sessionStorage.removeItem(key(endpoint));
+		settlePinReveal(doc, () => {
+			scrollToPin(doc, pin);
+		});
+		return pin.id;
+	} catch {
+		return null;
 	}
-	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
@@ -1311,7 +1165,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 +2223,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);
@@ -2649,20 +2504,6 @@ const chipMemo = /* @__PURE__ */ new WeakMap();
 function nextOrdinal(pins) {
 	return Math.max(pins.length, ...pins.map((p) => p.n ?? 0)) + 1;
 }
-/**
-* Does the pin's captured URL still describe the view on screen? Path + search
-* only — hashes are anchors, not views. An absent or unparseable URL never
-* gates: old pins (and CLI pins) keep rendering exactly as before.
-*/
-function sameView(win, url) {
-	if (url === void 0) return true;
-	try {
-		const target = new URL(url, win.location.href);
-		return target.pathname === win.location.pathname && target.search === win.location.search;
-	} catch {
-		return true;
-	}
-}
 /** A stored (document-space) rect or point, in today's viewport. */
 function toViewport(win, p) {
 	return {
@@ -2687,22 +2528,23 @@ 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;
-	if (win === null) return stored;
-	if (!sameView(win, target?.url)) return null;
+	if (win === null) return stored ?? null;
+	if (!samePinView(win, target?.url)) return null;
 	const selector = target?.selector;
-	if (selector === void 0) return toViewport(win, stored);
+	if (selector === void 0) return stored ? toViewport(win, stored) : null;
+	if (!stored && (selector === "html" || selector === "body")) return null;
 	let el;
 	try {
 		el = doc.querySelector(selector);
 	} catch {
-		return toViewport(win, stored);
+		return stored ? toViewport(win, stored) : null;
 	}
 	if (el === null) return null;
 	const r = el.getBoundingClientRect();
-	if (r.width <= 0 && r.height <= 0) return toViewport(win, stored);
+	if (r.width <= 0 && r.height <= 0) return stored ? toViewport(win, stored) : null;
 	return clipToScrollAncestors(win, el, {
 		x: r.left,
 		y: r.top,
@@ -3016,6 +2858,8 @@ function anchorOf(root, pin, draft) {
 * labels the card without claiming an element that was never captured.
 */
 function labelOf(target) {
+	if (target?.selector === "html" || target?.selector === "body") return "PAGE";
+	if (target?.model) return `3D · ${target.model.partId}`;
 	return target?.anchor ?? target?.tag?.toUpperCase() ?? "PIN";
 }
 function viewOf(root, state) {
@@ -3753,11 +3597,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() {
@@ -4028,16 +3868,15 @@ var PinboxToolbarElement = class extends BaseElement {
 	/** Inbox item click: activate the pin and scroll it into view (prototype line 700). */
 	#activateFromInbox(pinId) {
 		const pin = this.store.get().pins.find((p) => p.id === pinId);
+		if (!pin) return;
+		this.store.update({
+			inboxOpen: false,
+			activePinId: null,
+			pinsHidden: false
+		});
+		if (revealPin(document, pin, this.config?.endpoint ?? "")) return;
 		this.#ensureThread(pinId);
 		this.store.update({ activePinId: pinId });
-		const rect = pin === void 0 ? null : anchorRect(document, pin);
-		if (rect) {
-			const y = window.scrollY + rect.y + rect.height / 2;
-			window.scrollTo({
-				top: Math.max(0, y - window.innerHeight / 2),
-				behavior: "smooth"
-			});
-		}
 	}
 	/**
 	* Nudge a stale pin: re-post the last human message as a new thread message. A watcher that
@@ -4186,6 +4025,16 @@ var PinboxToolbarElement = class extends BaseElement {
 		});
 	};
 	#render(state) {
+		const restored = pendingPinReveal(document, state.pins, this.config?.endpoint ?? "");
+		if (restored) {
+			this.#ensureThread(restored);
+			this.store.update({
+				activePinId: restored,
+				inboxOpen: false,
+				pinsHidden: false
+			});
+			return;
+		}
 		const placing = state.mode === "placing";
 		this.toggleAttribute("data-placing", placing);
 		document.body.classList.toggle(PAGE_PLACING_CLASS, placing);
@@ -4198,6 +4047,184 @@ var PinboxToolbarElement = class extends BaseElement {
 	}
 };
 //#endregion
+//#region src/ui/preview-styles.ts
+const PREVIEW_STYLES = `
+.pb-preview-wrap { display:flex; align-items:center; border-left:1px solid var(--pb-line); margin-left:4px; padding-left:4px; }
+.pb-preview-trigger { max-width:160px; gap:7px; }
+.pb-preview-trigger .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px; }
+.pb-preview-trigger svg { flex-shrink:0; }
+.pb-preview-menu { position:fixed; margin:0; padding:0; width:304px; max-width:calc(100vw - 24px); max-height:70vh; overflow:auto; background:var(--pb-surface); color:var(--pb-fg1); border:1px solid var(--pb-line-2); border-radius:4px; box-shadow:var(--pb-shadow); font-family:var(--pb-font-body); }
+.pb-preview-menu::backdrop { background:transparent; }
+.pb-preview-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px 16px; border-bottom:1px solid var(--pb-line); }
+.pb-preview-head span { font:10px var(--pb-font-mono); letter-spacing:.18em; color:var(--pb-fg3); }
+.pb-preview-list { padding:5px; }
+.pb-preview-option { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 10px; border-radius:2px; color:var(--pb-fg2); }
+.pb-preview-option:hover, .pb-preview-option:focus-visible { background:var(--pb-hover); outline:1px solid var(--pb-line-2); }
+.pb-preview-option[aria-checked="true"] { background:var(--pb-amber-soft); color:var(--pb-fg1); }
+.pb-preview-option:disabled { opacity:.45; cursor:not-allowed; }
+.pb-preview-option .check { width:14px; flex-shrink:0; color:var(--pb-amber); }
+.pb-preview-option .copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
+.pb-preview-option .title { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pb-preview-option .branch { font:10px var(--pb-font-mono); color:var(--pb-fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pb-preview-foot { border-top:1px solid var(--pb-line); padding:11px 16px; display:flex; flex-direction:column; gap:8px; }
+.pb-preview-status { font-size:11px; line-height:1.5; color:var(--pb-fg3); }
+.pb-preview-foot a { font:10px var(--pb-font-mono); letter-spacing:.08em; color:var(--pb-amber); text-decoration:none; }
+`;
+//#endregion
+//#region src/ui/preview-switcher.ts
+const CHEVRON = icon("<path d=\"m4 6 4 4 4-4\"/>", 14);
+const REFRESH = icon("<path d=\"M2 8a6 6 0 0 1 10.5-4L14 6M14 2v4h-4M14 8a6 6 0 0 1-10.5 4L2 10M2 14v-4h4\"/>", 14);
+const BRANCH = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"><circle cx=\"4\" cy=\"3\" r=\"1.5\"/><circle cx=\"4\" cy=\"13\" r=\"1.5\"/><circle cx=\"12\" cy=\"4\" r=\"1.5\"/><path d=\"M4 4.5v7M12 5.5v1a3 3 0 0 1-3 3H7a3 3 0 0 0-3 3\"/></svg>";
+function createPreviewView(doc, root, bar) {
+	const style = doc.createElement("style");
+	style.textContent = PREVIEW_STYLES;
+	root.append(style);
+	const wrap = doc.createElement("div");
+	wrap.dataset["previewSwitcher"] = "";
+	wrap.className = "pb-preview-wrap";
+	wrap.innerHTML = `<button type="button" class="pb-tb pb-preview-trigger" aria-label="Switch preview" aria-haspopup="menu" aria-controls="pb-preview-menu" aria-expanded="false">${BRANCH}<span class="name">PREVIEW</span>${CHEVRON}</button>
+    <div id="pb-preview-menu" class="pb-preview-menu" popover="auto" aria-label="Local previews">
+      <div class="pb-preview-head"><span>LOCAL PREVIEWS</span><button type="button" class="pb-tb sq" aria-label="Refresh previews">${REFRESH}</button></div>
+      <div class="pb-preview-list" role="menu" aria-label="Preview branch or worktree"></div>
+      <div class="pb-preview-foot"><span class="pb-preview-status" role="status">Loading previews…</span><a target="_blank" rel="noopener noreferrer" hidden>OPEN PR ↗</a></div>
+    </div>`;
+	bar.append(wrap);
+	const trigger = wrap.querySelector(".pb-preview-trigger");
+	const panel = wrap.querySelector(".pb-preview-menu");
+	const list = wrap.querySelector(".pb-preview-list");
+	const reload = wrap.querySelector("[aria-label=\"Refresh previews\"]");
+	const status = wrap.querySelector("[role=\"status\"]");
+	const pr = wrap.querySelector("a");
+	wirePopover(trigger, panel, list, doc);
+	return {
+		trigger,
+		list,
+		status,
+		reload,
+		render(choices) {
+			renderOptions(doc, list, choices);
+			const current = choices.find((p) => p.current);
+			trigger.querySelector(".name").textContent = compactLabel(current);
+			trigger.setAttribute("aria-label", `Switch preview: ${current?.label ?? "local previews"}`);
+			trigger.title = current ? `${current.branch} · ${current.commit.slice(0, 8)}` : "Choose a preview";
+			status.textContent = current?.backend || "Local frontend preview";
+			pr.hidden = !current?.pr;
+			if (current?.pr) pr.href = current.pr;
+		}
+	};
+}
+function compactLabel(current) {
+	if (!current) return "PREVIEW";
+	return current.label.match(/^PR #\d+/)?.[0] ?? (current.branch === "main" ? "MAIN" : current.branch.replace(/^[^/]+\//, ""));
+}
+function renderOptions(doc, list, choices) {
+	list.replaceChildren();
+	for (const item of choices) {
+		const button = doc.createElement("button");
+		button.type = "button";
+		button.className = "pb-preview-option";
+		button.dataset["previewId"] = item.id;
+		button.setAttribute("role", "menuitemradio");
+		button.setAttribute("aria-checked", String(item.current));
+		button.disabled = !item.ready;
+		button.innerHTML = "<span class=\"check\" aria-hidden=\"true\"></span><span class=\"copy\"><span class=\"title\"></span><span class=\"branch\"></span></span>";
+		button.querySelector(".check").textContent = item.current ? "✓" : "";
+		button.querySelector(".title").textContent = item.label;
+		button.querySelector(".branch").textContent = `${item.branch}${item.ready ? "" : " · unavailable"}`;
+		list.append(button);
+	}
+}
+function wirePopover(trigger, panel, list, doc) {
+	trigger.addEventListener("click", () => {
+		panel.togglePopover();
+		const rect = trigger.getBoundingClientRect();
+		const width = doc.documentElement.clientWidth;
+		panel.style.left = `${Math.max(12, Math.min(rect.right - 304, width - 316))}px`;
+		panel.style.top = `${rect.top > panel.offsetHeight + 20 ? rect.top - panel.offsetHeight - 10 : rect.bottom + 10}px`;
+		(list.querySelector("button[aria-checked=\"true\"]:not(:disabled)") ?? list.querySelector("button:not(:disabled)"))?.focus();
+	});
+	panel.addEventListener("toggle", () => trigger.setAttribute("aria-expanded", String(panel.matches(":popover-open"))));
+	panel.addEventListener("keydown", (e) => {
+		const buttons = [...list.querySelectorAll("button:not(:disabled)")];
+		const index = buttons.indexOf(panel.getRootNode().activeElement);
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) {
+			e.preventDefault();
+			buttons[e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : (index + (e.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+		}
+		if (e.key === "Escape") {
+			panel.hidePopover();
+			trigger.focus();
+		}
+	});
+}
+//#endregion
+//#region src/previews.ts
+function previewDestination(origin, current) {
+	const target = new URL(origin);
+	const source = new URL(current);
+	if (!["http:", "https:"].includes(target.protocol) || target.username || target.password || target.pathname !== "/" || target.search || target.hash) throw new Error("Invalid preview origin");
+	target.pathname = source.pathname;
+	target.search = source.search;
+	target.hash = source.hash;
+	return target.href;
+}
+function mountPreviewSwitcher(host, endpoint) {
+	const root = host.shadowRoot;
+	const bar = root?.querySelector(".pb-bar");
+	if (!root || !bar || root.querySelector("[data-preview-switcher]")) return;
+	const doc = host.ownerDocument;
+	const { trigger, list, status, reload, render } = createPreviewView(doc, root, bar);
+	let choices = [];
+	let busy = false;
+	const load = async () => {
+		const response = await fetch(endpoint, {
+			credentials: "same-origin",
+			cache: "no-store"
+		});
+		const envelope = await response.json();
+		if (!response.ok || !envelope.ok || !Array.isArray(envelope.data)) throw new Error("Preview discovery unavailable");
+		return envelope.data;
+	};
+	async function refresh() {
+		if (busy) return;
+		busy = true;
+		try {
+			choices = await load();
+			render(choices);
+			trigger.disabled = false;
+		} catch {
+			status.textContent = "Preview discovery unavailable";
+			trigger.disabled = false;
+		} finally {
+			busy = false;
+		}
+	}
+	reload.addEventListener("click", () => {
+		refresh();
+	});
+	list.addEventListener("click", async (event) => {
+		const target = event.target.closest("[data-preview-id]");
+		const id = target?.dataset["previewId"];
+		if (!id || target?.disabled) return;
+		trigger.disabled = true;
+		status.textContent = "Checking preview…";
+		try {
+			const destination = (await load()).find((p) => p.id === id);
+			if (!destination?.ready || !destination.url) throw new Error("unavailable");
+			doc.defaultView?.location.assign(previewDestination(destination.url, doc.location.href));
+		} catch {
+			status.textContent = "Preview unavailable. Refresh to try again.";
+			trigger.disabled = false;
+		}
+	});
+	refresh();
+}
+//#endregion
 //#region src/index.ts
 /** Register <pinbox-toolbar>; no-op outside a browser or when already defined. */
 function defineToolbarElement() {
@@ -4213,4 +4240,4 @@ const Pinbox = { init(config) {
 } };
 defineToolbarElement();
 //#endregion
-export { HubError as a, createStore as c, HubTransport as i, deriveUiStatus as l, defineToolbarElement as n, appendThreadMessage as o, PinboxToolbarElement as r, applyHubEvent as s, Pinbox as t, upsertPin as u };
+export { HubTransport as a, applyHubEvent as c, upsertPin as d, PinboxToolbarElement as i, createStore as l, defineToolbarElement as n, HubError as o, mountPreviewSwitcher as r, appendThreadMessage as s, Pinbox as t, deriveUiStatus as u };