@hansenexus/hud 0.2.0 → 0.4.0

package/dist/review.js

@@ -0,0 +1,1017 @@
+import { n as buildAnchorSelector, t as anchorLabelFor } from "./selector-NSYSe7AZ.js";
+import { i as PICKER_CSS, n as ShadowHost, r as ElementPicker, t as HUD_CSS } from "./styles--slk86ZQ.js";
+import { t as HUD_REVIEW_MARKER } from "./marker-DjeGvL-F.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConvexClient } from "convex/browser";
+import { makeFunctionReference } from "convex/server";
+//#region src/review/anchor/viewport.ts
+/** Tailwind's `md` (768) and `xl` (1280) — the breakpoints the apps already lay out against. */
+const BUCKET_BREAKPOINTS = {
+	tablet: 768,
+	desktop: 1280
+};
+function viewportBucket(width) {
+	if (width < BUCKET_BREAKPOINTS.tablet) return "mobile";
+	if (width < BUCKET_BREAKPOINTS.desktop) return "tablet";
+	return "desktop";
+}
+const BUCKET_LABEL = {
+	mobile: "Mobil",
+	tablet: "Tablet",
+	desktop: "Desktop"
+};
+//#endregion
+//#region src/review/anchor/capture.ts
+/**
+* Ids that are regenerated on every mount. Radix hands its triggers ids like
+* `radix-:r1h:`, so without this denylist the "most stable" strategy would be
+* the least stable while claiming otherwise.
+*/
+const GENERATED_ID = /^(radix-|headlessui-|react-aria|:r[0-9a-z]+:|\d)/i;
+/** Attributes worth trying as a stable handle, most intentional first. */
+const STABLE_ATTRS = [
+	"data-testid",
+	"data-review-id",
+	"data-slot"
+];
+/** How far up to look for a stable ancestor before giving up. */
+const STABLE_ANCESTOR_DEPTH = 3;
+/** Longer than this and the element's text identifies a whole section, not an element. */
+const MAX_TEXT_SOURCE = 400;
+const MAX_TEXT_PREFIX = 120;
+function escapeIdent(value) {
+	const css = globalThis.CSS;
+	return css?.escape ? css.escape(value) : value.replace(/["\\]/g, "\\$&");
+}
+function escapeAttrValue(value) {
+	return value.replace(/["\\]/g, "\\$&");
+}
+function isGeneratedId(value) {
+	return value.length === 0 || GENERATED_ID.test(value);
+}
+/**
+* A stable selector for `el` itself, or null.
+*
+* Uniqueness is checked, not assumed: shadcn stamps `data-slot="button"` on
+* every button in the tree, so an unchecked attribute selector would be a
+* stable-looking handle onto forty different nodes.
+*/
+function stableSelectorFor(el, doc) {
+	const candidates = [];
+	const id = el.getAttribute("id");
+	if (id && !isGeneratedId(id)) candidates.push(`#${escapeIdent(id)}`);
+	for (const attr of STABLE_ATTRS) {
+		const value = el.getAttribute(attr);
+		if (value && !isGeneratedId(value)) candidates.push(`[${attr}="${escapeAttrValue(value)}"]`);
+	}
+	for (const candidate of candidates) try {
+		if (doc.querySelectorAll(candidate).length === 1) return candidate;
+	} catch {}
+	return null;
+}
+function findStableAncestor(el, doc) {
+	let node = el;
+	for (let depth = 0; node && depth <= STABLE_ANCESTOR_DEPTH; depth++) {
+		const selector = stableSelectorFor(node, doc);
+		if (selector) return {
+			selector,
+			node
+		};
+		node = node.parentElement;
+	}
+	return null;
+}
+function normaliseText(value) {
+	return value.trim().replace(/\s+/g, " ");
+}
+function textPrefixFor(el) {
+	const raw = el.textContent ?? "";
+	if (raw.length === 0 || raw.length > MAX_TEXT_SOURCE) return void 0;
+	const text = normaliseText(raw);
+	return text.length > 0 ? text.slice(0, MAX_TEXT_PREFIX) : void 0;
+}
+/** Attributes that identify an element which carries no text of its own. */
+const SIGNATURE_ATTRS = [
+	"aria-label",
+	"alt",
+	"title",
+	"name",
+	"src",
+	"href"
+];
+/**
+* A cheap identity for text-less elements. `src`/`href` are reduced to their
+* last path segment so a CDN hash or a locale prefix does not invalidate it.
+*/
+function signatureFor(el) {
+	for (const attr of SIGNATURE_ATTRS) {
+		const raw = el.getAttribute(attr);
+		if (!raw) continue;
+		const value = attr === "src" || attr === "href" ? (raw.split("?")[0] ?? "").split("/").filter(Boolean).pop() : normaliseText(raw);
+		if (value) return `${attr}=${value.slice(0, 80)}`;
+	}
+}
+function clamp01(value) {
+	if (!Number.isFinite(value)) return .5;
+	return Math.min(1, Math.max(0, value));
+}
+function round(value, places = 4) {
+	return Number(value.toFixed(places));
+}
+/**
+* Snapshot everything needed to find this element again on a later render, at a
+* possibly different scroll offset, viewport and content revision.
+*/
+function capturePinAnchor(el, point) {
+	const doc = el.ownerDocument;
+	const win = doc.defaultView;
+	const root = doc.documentElement;
+	const rect = el.getBoundingClientRect();
+	const scrollX = win?.scrollX ?? 0;
+	const scrollY = win?.scrollY ?? 0;
+	const viewportWidth = win?.innerWidth ?? root.clientWidth ?? 0;
+	const viewportHeight = win?.innerHeight ?? root.clientHeight ?? 0;
+	const docWidth = Math.max(root.scrollWidth, viewportWidth, 1);
+	const docHeight = Math.max(root.scrollHeight, viewportHeight, 1);
+	const pct = (part, whole) => whole > 0 ? round(part / whole * 100, 1) : 0;
+	const anchor = {
+		tag: el.tagName.toLowerCase(),
+		selector: buildAnchorSelector(el, doc.body),
+		label: anchorLabelFor(el),
+		offsetX: point && rect.width > 0 ? clamp01((point.clientX - rect.left) / rect.width) : .5,
+		offsetY: point && rect.height > 0 ? clamp01((point.clientY - rect.top) / rect.height) : .5,
+		docX: round(clamp01((rect.left + scrollX) / docWidth)),
+		docY: round(clamp01((rect.top + scrollY) / docHeight)),
+		rect: {
+			x: pct(rect.left, viewportWidth),
+			y: pct(rect.top, viewportHeight),
+			width: pct(rect.width, viewportWidth),
+			height: pct(rect.height, viewportHeight)
+		},
+		viewportWidth,
+		viewportHeight,
+		scrollY,
+		viewportBucket: viewportBucket(viewportWidth)
+	};
+	const stable = findStableAncestor(el, doc);
+	if (stable) {
+		anchor.stableId = stable.selector;
+		anchor.selectorFromStable = stable.node === el ? "" : buildAnchorSelector(el, stable.node);
+	}
+	const textPrefix = textPrefixFor(el);
+	if (textPrefix) anchor.textPrefix = textPrefix;
+	const signature = signatureFor(el);
+	if (signature) anchor.signature = signature;
+	return anchor;
+}
+//#endregion
+//#region src/review/anchor/resolve.ts
+/**
+* Is this element something a pin can actually point at?
+*
+* Deliberately not `offsetParent !== null`: that is null for every
+* `position: fixed` element, which would exile pins on sticky headers and
+* cookie banners — exactly the chrome clients comment on most.
+*/
+function isUsable(el) {
+	if (!el.isConnected) return false;
+	const rect = el.getBoundingClientRect();
+	return rect.width > 0 || rect.height > 0;
+}
+/**
+* Does this candidate look like the element the pin was planted on?
+*
+* A tag check alone is not enough, and assuming otherwise is the single
+* sharpest edge here: these pages render Convex-backed lists, so inserting one
+* row shifts every `nth-of-type` below it and the stored path then resolves to
+* a *different node of the same tag*. The resolver would return it with an
+* "exact" badge and be confidently wrong — worse than returning nothing,
+* because nothing is visibly a miss and a wrong element is not.
+*
+* So a path hit must also match whatever identity we stored: the leading text,
+* or for text-less elements (icon buttons, images, inputs) an attribute
+* signature. With neither available the path stands alone, which is the
+* weakest case and unavoidable.
+*/
+function corroborates(el, anchor) {
+	if (el.tagName.toLowerCase() !== anchor.tag) return false;
+	if (anchor.textPrefix) return normaliseText(el.textContent ?? "").startsWith(anchor.textPrefix);
+	if (anchor.signature) return signatureFor(el) === anchor.signature;
+	return true;
+}
+function query(root, selector) {
+	if (!selector) return null;
+	try {
+		return root.querySelector(selector);
+	} catch {
+		return null;
+	}
+}
+function queryAll(root, selector) {
+	if (!selector) return [];
+	try {
+		return [...root.querySelectorAll(selector)];
+	} catch {
+		return [];
+	}
+}
+/** Strategy 1 — the stored path, corroborated. */
+function byExactSelector(anchor, doc) {
+	const el = query(doc, anchor.selector);
+	if (!el || !isUsable(el) || !corroborates(el, anchor)) return null;
+	return el;
+}
+/**
+* Strategy 2 — a unique, non-generated handle, then the path *below* it.
+*
+* Storing only the handle would make this a coarse fallback; storing the tail
+* as well makes it independent of everything above the handle, which is
+* precisely what content-driven reshuffles change. The tail is corroborated
+* too — it carries the same `nth-of-type` fragility as the full path, just
+* over a shorter distance.
+*/
+function byStableId(anchor, doc) {
+	if (!anchor.stableId) return null;
+	const host = query(doc, anchor.stableId);
+	if (!host) return null;
+	const candidate = anchor.selectorFromStable ? query(host, anchor.selectorFromStable) : host;
+	if (!candidate || !isUsable(candidate) || !corroborates(candidate, anchor)) return null;
+	return candidate;
+}
+/**
+* Strategy 3 — scan every element of the same tag for the one whose identity
+* matches, ignoring structure entirely.
+*
+* This is the strategy that survives a reshuffle, because it does not look at
+* the path at all. It matches on whichever identity was stored — leading text,
+* or an attribute signature for text-less elements like icon buttons — so both
+* kinds of element are recoverable and not just the ones with words in them.
+*
+* It only runs when there IS an identity: with neither stored, `corroborates`
+* accepts every element of that tag, and picking the nearest one would be a
+* guess dressed as a result.
+*
+* Text matching is locale-dependent by nature — a pin planted on the German
+* site will not match by text on `/en` — which is why a pin also stores its
+* locale.
+*/
+function byIdentity(anchor, doc) {
+	if (!anchor.textPrefix && !anchor.signature) return null;
+	const matches = queryAll(doc, anchor.tag).filter((el) => isUsable(el) && corroborates(el, anchor));
+	if (matches.length === 0) return null;
+	if (matches.length === 1) return matches[0] ?? null;
+	const root = doc.documentElement;
+	const win = doc.defaultView;
+	const docHeight = Math.max(root.scrollHeight, win?.innerHeight ?? 0, 1);
+	const scrollY = win?.scrollY ?? 0;
+	let best = null;
+	let bestDelta = Number.POSITIVE_INFINITY;
+	for (const el of matches) {
+		const docY = (el.getBoundingClientRect().top + scrollY) / docHeight;
+		const delta = Math.abs(docY - anchor.docY);
+		if (delta < bestDelta) {
+			bestDelta = delta;
+			best = el;
+		}
+	}
+	return best;
+}
+/**
+* Locate a stored anchor on the current document.
+*
+* Returns null rather than guessing. A null resolution is a first-class
+* outcome, not an error: the pin is shown in the "Ohne Position" list with its
+* screenshot, where it stays actionable — and a pin that stops resolving is
+* itself a signal that the thing it complained about is gone.
+*/
+function resolveAnchor(anchor, doc = document) {
+	const exact = byExactSelector(anchor, doc);
+	if (exact) return {
+		element: exact,
+		strategy: "exact"
+	};
+	const stable = byStableId(anchor, doc);
+	if (stable) return {
+		element: stable,
+		strategy: "stable"
+	};
+	const identity = byIdentity(anchor, doc);
+	if (identity) return {
+		element: identity,
+		strategy: "identity"
+	};
+	return null;
+}
+//#endregion
+//#region src/review/backend.ts
+/**
+* Function references by name rather than a generated `api` object: the
+* widget is consumed by apps that cannot import the review app's
+* `convex/_generated`. The names are a contract with that deployment.
+*/
+const fn = {
+	redeemGrant: makeFunctionReference("access:redeemGrant"),
+	whoami: makeFunctionReference("access:whoami"),
+	listForRoute: makeFunctionReference("pins:listForRoute"),
+	plant: makeFunctionReference("pins:plant")
+};
+/** The review app's Convex deployment at `url`. */
+function convexReview(url) {
+	const client = new ConvexClient(url);
+	return {
+		redeemGrant: (grant) => client.mutation(fn.redeemGrant, { grant }),
+		watchReviewer: (sessionToken, onChange) => client.onUpdate(fn.whoami, { sessionToken }, (value) => onChange(value), () => onChange(null)),
+		watchPins: (sessionToken, route, onChange) => client.onUpdate(fn.listForRoute, {
+			sessionToken,
+			route
+		}, (value) => onChange(value ?? []), () => onChange([])),
+		plant: (pin) => client.mutation(fn.plant, { ...pin }),
+		close: () => {
+			client.close();
+		}
+	};
+}
+//#endregion
+//#region src/review/page-inset.ts
+const STYLE_ID = "hn-review-inset";
+/**
+* Narrow the page so a docked panel covers nothing. OFF by default — see below.
+*
+* `margin-right` on the root element does narrow the layout correctly: the
+* document box and every in-flow element follow it. What does NOT follow is
+* the thing that matters most.
+*
+* **Media queries evaluate against the viewport, not the narrowed box.** Inset
+* elbe-akustik by 360px at a 1183px viewport and the page still believes it is
+* a 1183px desktop: it renders the full desktop nav and then squeezes it into
+* 808px, so the booking CTA overflows its own header. The reviewer is then
+* looking at a layout the client will never see, and can file a bug this tool
+* caused.
+*
+* It also quietly corrupts the pins: `viewportBucket` reads
+* `window.innerWidth`, which the inset does not change, so a pin planted while
+* inset is tagged with a bucket that does not match the layout it was planted
+* against.
+*
+* So the default is an overlay and the page under review is left exactly as the
+* client sees it. The inset stays available as a deliberate per-viewer toggle,
+* for reading long pin threads against a page that does reflow cleanly.
+*
+* Second caveat if you do turn it on: `position: fixed` site chrome does not
+* move with it either — it is positioned against the viewport — so the chat
+* launcher and ProvenExpert badge stay put behind the panel.
+*/
+function applyPageInset(px) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	if (px <= 0) {
+		root.style.removeProperty("margin-right");
+		root.style.removeProperty("transition");
+		document.getElementById(STYLE_ID)?.remove();
+		return;
+	}
+	if (!document.getElementById(STYLE_ID)) {
+		const style = document.createElement("style");
+		style.id = STYLE_ID;
+		style.textContent = ":root{scrollbar-gutter:stable}";
+		document.head.append(style);
+	}
+	root.style.transition = "margin-right 180ms ease";
+	root.style.marginRight = `${px}px`;
+}
+/** Docked width, or 0 when the viewport is too narrow to give any away. */
+function dockWidthFor(viewportWidth) {
+	return viewportWidth < 768 ? 0 : Math.min(360, Math.round(viewportWidth * .32));
+}
+const PREF_KEY = "hn-review:inset";
+/** Whether this viewer asked for the page to be narrowed. Default off. */
+function readInsetPref() {
+	try {
+		return localStorage.getItem(PREF_KEY) === "1";
+	} catch {
+		return false;
+	}
+}
+function writeInsetPref(on) {
+	try {
+		localStorage.setItem(PREF_KEY, on ? "1" : "0");
+	} catch {}
+}
+//#endregion
+//#region src/review/pin-layer.tsx
+/**
+* Renders the pins for this page inside the review's shadow root.
+*
+* Three outcomes per pin and no fourth: placed, placed with a badge saying the
+* anchor moved, or handed to `onUnplaced` for the "Ohne Position" list. A pin
+* is never silently dropped and never silently moved onto a neighbour.
+*
+* The shadow host is `position: fixed`, so markers sit at viewport
+* coordinates and are re-measured on scroll, at most once per frame.
+*/
+function PinLayer({ pins, activeId, onSelect, onUnplaced }) {
+	const [placed, setPlaced] = useState([]);
+	const frame = useRef(null);
+	const reposition = useCallback(() => {
+		const bucket = viewportBucket(window.innerWidth);
+		const next = [];
+		const missing = [];
+		for (const pin of pins) {
+			if (pin.viewportBucket !== bucket) {
+				missing.push(pin);
+				continue;
+			}
+			const hit = resolveAnchor(pin.anchor, document);
+			if (!hit) {
+				missing.push(pin);
+				continue;
+			}
+			const rect = hit.element.getBoundingClientRect();
+			next.push({
+				pin,
+				x: rect.left + rect.width * pin.anchor.offsetX,
+				y: rect.top + rect.height * pin.anchor.offsetY,
+				strategy: hit.strategy
+			});
+		}
+		setPlaced(next);
+		onUnplaced(missing);
+	}, [pins, onUnplaced]);
+	const schedule = useCallback(() => {
+		if (frame.current !== null) return;
+		frame.current = requestAnimationFrame(() => {
+			frame.current = null;
+			reposition();
+		});
+	}, [reposition]);
+	useEffect(() => {
+		reposition();
+		window.addEventListener("scroll", schedule, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", schedule);
+		const resizeObserver = new ResizeObserver(schedule);
+		resizeObserver.observe(document.documentElement);
+		let mutationTimer = null;
+		const mutationObserver = new MutationObserver(() => {
+			if (mutationTimer) clearTimeout(mutationTimer);
+			mutationTimer = setTimeout(schedule, 200);
+		});
+		mutationObserver.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			window.removeEventListener("scroll", schedule, { capture: true });
+			window.removeEventListener("resize", schedule);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			if (mutationTimer) clearTimeout(mutationTimer);
+			if (frame.current !== null) cancelAnimationFrame(frame.current);
+			frame.current = null;
+		};
+	}, [reposition, schedule]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "pin-layer",
+		children: placed.map(({ pin, x, y, strategy }) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "pin",
+			"data-lane": pin.lane,
+			"data-moved": strategy === "exact" ? void 0 : "",
+			"aria-pressed": activeId === pin._id,
+			style: {
+				left: x,
+				top: y
+			},
+			onClick: () => onSelect(activeId === pin._id ? null : pin._id),
+			title: strategy === "exact" ? `#${pin.number} ${pin.authorName}` : `#${pin.number} ${pin.authorName} — Position angenähert (${strategy})`,
+			children: pin.number
+		}, pin._id))
+	});
+}
+//#endregion
+//#region src/review/route.ts
+/**
+* The route a pin belongs to.
+*
+* Locale-stripped on purpose: with `localePrefix: "as-needed"` the German page
+* is `/standorte/wedel` and the English one `/en/standorte/wedel`. Storing the
+* raw path would make those two different routes, so a pin left by a German
+* reviewer would be invisible to anyone reading the English page — and the same
+* layout bug would be reported once per language.
+*/
+function routeKey(pathname, locale) {
+	const stripped = pathname === `/${locale}` ? "/" : pathname.startsWith(`/${locale}/`) ? pathname.slice(locale.length + 1) : pathname;
+	return stripped.length > 1 ? stripped.replace(/\/+$/, "") : "/";
+}
+//#endregion
+//#region src/review/session.ts
+/**
+* The reviewer's session on the reviewed site's own origin.
+*
+* The dashboard lives on a different origin with its own storage, so the same
+* link is redeemed on both. The backend keys the reviewer on the grant, so that
+* is one identity with two sessions rather than two people.
+*/
+const KEY = "hn-review:session";
+const NAME_KEY = "hn-review:name";
+function safeGet(key) {
+	try {
+		return localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+function safeSet(key, value) {
+	try {
+		localStorage.setItem(key, value);
+	} catch {}
+}
+function readToken(slug) {
+	return safeGet(`${KEY}:${slug}`);
+}
+function writeToken(slug, token) {
+	safeSet(`${KEY}:${slug}`, token);
+}
+function readName() {
+	return safeGet(NAME_KEY);
+}
+function writeName(name) {
+	safeSet(NAME_KEY, name);
+}
+/**
+* Pull a grant out of `?rv=` and strip it from the URL.
+*
+* Returns it once: the caller redeems it, and the parameter is gone from the
+* address bar before it can be bookmarked, screenshotted or sent to anyone in a
+* Referer header.
+*/
+function takeGrantFromUrl() {
+	if (typeof window === "undefined") return null;
+	const url = new URL(window.location.href);
+	const grant = url.searchParams.get("rv");
+	if (!grant) return null;
+	url.searchParams.delete("rv");
+	window.history.replaceState({}, "", url.toString());
+	return grant;
+}
+//#endregion
+//#region src/review/review.tsx
+const CSS = HUD_CSS + PICKER_CSS + `
+.hud { --review-client: #2563eb; --review-internal: #9333ea; --review-moved: #fbbf24; }
+
+/* Client sites fill every corner (booking CTA, chat launcher, cookie banner,
+   rating badge), so the review pill is a tab on the middle of the right edge
+   and rides alongside the docked sheet (inline \`right\`). */
+.hud .review-pill {
+  top: 50%;
+  bottom: auto;
+  left: auto;
+  right: 0;
+  transform: translateY(-50%);
+  border-right: 0;
+  border-radius: 999px 0 0 999px;
+  font-family: var(--hud-font);
+}
+.review-pill .count {
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--hud-accent);
+  color: var(--hud-accent-fg);
+  font: 600 10px/16px var(--hud-mono);
+  text-align: center;
+}
+
+/* The German hint is long; let it wrap on a phone instead of running off both edges. */
+.grab-hint {
+  width: max-content;
+  max-width: calc(100vw - 16px);
+  white-space: normal;
+  text-align: center;
+}
+
+.pin-layer { position: fixed; inset: 0; pointer-events: none; }
+.hud .pin {
+  position: fixed;
+  transform: translate(-50%, -50%);
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  background: var(--review-client);
+  color: #ffffff;
+  font: 700 12px/1 var(--hud-font);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
+  pointer-events: auto;
+}
+.hud .pin[data-lane="internal"] { background: var(--review-internal); }
+.hud .pin[data-moved] { border-color: var(--review-moved); }
+.hud .pin[aria-pressed="true"] { outline: 2px solid var(--hud-fg); outline-offset: 2px; }
+
+.sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--hud-bg);
+  color: var(--hud-fg);
+  border-left: 1px solid var(--hud-border);
+  box-shadow: var(--hud-shadow);
+  font-size: 13px;
+  pointer-events: auto;
+}
+.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.sheet-head strong { font-size: 14px; }
+.sheet-tools { display: flex; align-items: center; gap: 4px; }
+.hud .toggle {
+  padding: 3px 6px;
+  border: 1px solid var(--hud-border);
+  border-radius: 5px;
+  color: var(--hud-fg-muted);
+  font-size: 10px;
+  font-weight: 600;
+}
+.hud .toggle[aria-pressed="true"] { background: var(--hud-fg); color: var(--hud-bg); }
+.hud .close { padding: 0 4px; font-size: 16px; line-height: 1; }
+.muted { margin: 4px 0 12px; color: var(--hud-fg-muted); font-size: 12px; }
+
+.compose textarea {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--hud-border);
+  border-radius: 6px;
+  background: var(--hud-bg);
+  color: var(--hud-fg);
+  font: inherit;
+  resize: vertical;
+}
+.actions { display: flex; gap: 8px; margin-top: 8px; }
+.hud .primary, .hud .secondary {
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-weight: 600;
+}
+.hud .primary { flex: 1; background: var(--hud-accent); color: var(--hud-accent-fg); }
+.hud .primary:disabled { opacity: 0.45; cursor: not-allowed; }
+.hud .secondary { border: 1px solid var(--hud-border); }
+.hud .start { width: 100%; padding: 10px; background: var(--hud-fg); color: var(--hud-bg); }
+
+.pins { margin-top: 16px; }
+.pins ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.pins li { padding: 8px; border: 1px solid var(--hud-border); border-radius: 6px; }
+.pins li[data-active] { border-color: var(--hud-accent); }
+.pins.unplaced li { border-style: dashed; }
+.pins p { margin: 4px 0 0; }
+`;
+/**
+* The production-safe review widget: a pill, the element picker and a docked
+* review sheet with the page's pins.
+*
+* Everything arrives as a prop and nothing is read from `process.env`. That is
+* what makes the runtime gate work: an app that ships one image to two
+* productions has identical build-time flags on both, so a build flag could not
+* switch the widget off where it must be off. The mounting app decides, per
+* deployment, by passing `convexUrl` or not.
+*
+* Nothing renders, and no DOM is touched, until a reviewer session exists:
+* a visitor without a review link never sees a pill.
+*/
+function Review({ convexUrl, projectSlug, locale, backend }) {
+	const [client, setClient] = useState(null);
+	useEffect(() => {
+		if (backend) {
+			setClient(backend);
+			return;
+		}
+		if (!convexUrl) {
+			setClient(null);
+			return;
+		}
+		const convex = convexReview(convexUrl);
+		setClient(convex);
+		return () => {
+			convex.close?.();
+			setClient(null);
+		};
+	}, [backend, convexUrl]);
+	if (!client) return null;
+	return /* @__PURE__ */ jsx(Widget, {
+		backend: client,
+		projectSlug,
+		locale
+	});
+}
+function Widget({ backend, projectSlug, locale }) {
+	const [token, setToken] = useState(null);
+	const [ready, setReady] = useState(false);
+	const [mode, setMode] = useState("idle");
+	const [draft, setDraft] = useState(null);
+	const [body, setBody] = useState("");
+	const [name, setName] = useState("");
+	const [failed, setFailed] = useState(false);
+	const [activeId, setActiveId] = useState(null);
+	const [unplaced, setUnplaced] = useState([]);
+	const [open, setOpen] = useState(false);
+	const [route, setRoute] = useState("/");
+	useEffect(() => {
+		setRoute(routeKey(window.location.pathname, locale));
+		setName(readName() ?? "");
+		const existing = readToken(projectSlug);
+		const grant = takeGrantFromUrl();
+		if (!grant) {
+			setToken(existing);
+			setReady(true);
+			return;
+		}
+		backend.redeemGrant(grant).then((session) => {
+			writeToken(session.projectSlug, session.sessionToken);
+			writeName(session.displayName);
+			setToken(session.sessionToken);
+			setName(session.displayName);
+		}).catch(() => setToken(existing)).finally(() => setReady(true));
+	}, [
+		backend,
+		projectSlug,
+		locale
+	]);
+	useEffect(() => {
+		const id = setInterval(() => {
+			const next = routeKey(window.location.pathname, locale);
+			setRoute((current) => current === next ? current : next);
+		}, 400);
+		return () => clearInterval(id);
+	}, [locale]);
+	const [reviewer, setReviewer] = useState(void 0);
+	useEffect(() => {
+		setReviewer(void 0);
+		if (!token) return;
+		return backend.watchReviewer(token, setReviewer);
+	}, [backend, token]);
+	const [pins, setPins] = useState([]);
+	useEffect(() => {
+		setPins([]);
+		if (!token) return;
+		return backend.watchPins(token, route, setPins);
+	}, [
+		backend,
+		token,
+		route
+	]);
+	const [dockWidth, setDockWidth] = useState(0);
+	useEffect(() => {
+		const measure = () => setDockWidth(dockWidthFor(window.innerWidth));
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, []);
+	const [inset, setInset] = useState(false);
+	useEffect(() => setInset(readInsetPref()), []);
+	useEffect(() => {
+		applyPageInset(open && inset ? dockWidth : 0);
+		return () => applyPageInset(0);
+	}, [
+		open,
+		dockWidth,
+		inset
+	]);
+	const onPick = useCallback((element, point) => {
+		setDraft(capturePinAnchor(element, point));
+		setMode("composing");
+		setFailed(false);
+		setOpen(true);
+	}, []);
+	const onSelect = useCallback((id) => {
+		setActiveId(id);
+		if (id) setOpen(true);
+	}, []);
+	const submit = useCallback(async () => {
+		if (!token || !draft || !body.trim()) return;
+		try {
+			await backend.plant({
+				sessionToken: token,
+				route,
+				rawPath: window.location.pathname,
+				locale,
+				body,
+				anchor: draft
+			});
+		} catch {
+			setFailed(true);
+			return;
+		}
+		setBody("");
+		setDraft(null);
+		setFailed(false);
+		setMode("idle");
+	}, [
+		backend,
+		token,
+		draft,
+		body,
+		route,
+		locale
+	]);
+	const discard = useCallback(() => {
+		setDraft(null);
+		setBody("");
+		setFailed(false);
+		setMode("idle");
+	}, []);
+	if (!ready || !token || reviewer === null) return null;
+	const docked = open ? dockWidth : 0;
+	const startPick = () => {
+		setMode("picking");
+		if (dockWidth === 0) setOpen(false);
+	};
+	const pickToggle = () => mode === "picking" ? setMode("idle") : startPick();
+	return /* @__PURE__ */ jsxs(ShadowHost, {
+		css: CSS,
+		marker: HUD_REVIEW_MARKER,
+		children: [
+			/* @__PURE__ */ jsx(PinLayer, {
+				activeId,
+				onSelect,
+				onUnplaced: setUnplaced,
+				pins
+			}),
+			/* @__PURE__ */ jsx(ElementPicker, {
+				active: mode === "picking",
+				hint: "Element anklicken, das du kommentieren willst · Esc bricht ab",
+				onCancel: () => setMode("idle"),
+				onPick
+			}),
+			open && /* @__PURE__ */ jsx(Sheet, {
+				width: dockWidth,
+				mode,
+				draft,
+				body,
+				failed,
+				name: name || reviewer?.displayName || "Gast",
+				pins,
+				unplaced,
+				activeId,
+				inset,
+				onBody: setBody,
+				onStartPick: startPick,
+				onSubmit: submit,
+				onDiscard: discard,
+				onClose: () => setOpen(false),
+				onToggleInset: () => setInset((v) => {
+					writeInsetPref(!v);
+					return !v;
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pill review-pill",
+				role: "toolbar",
+				"aria-label": "Review",
+				style: { right: docked },
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "pill-item",
+					"aria-pressed": open,
+					onClick: () => setOpen((v) => !v),
+					children: ["Review", pins.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "count",
+						children: pins.length
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "pill-item",
+					"aria-label": "Element kommentieren",
+					"aria-pressed": mode === "picking",
+					title: "Element kommentieren",
+					onClick: pickToggle,
+					children: "⌖"
+				})]
+			})
+		]
+	});
+}
+function Sheet({ width, mode, draft, body, failed, name, pins, unplaced, activeId, inset, onBody, onStartPick, onSubmit, onDiscard, onClose, onToggleInset }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "sheet",
+		"aria-label": "Review",
+		style: width > 0 ? { width } : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "sheet-head",
+				children: [/* @__PURE__ */ jsx("strong", { children: "Review" }), /* @__PURE__ */ jsxs("span", {
+					className: "sheet-tools",
+					children: [width > 0 && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "toggle",
+						"aria-pressed": inset,
+						onClick: onToggleInset,
+						title: inset ? "Seite wieder voll breit zeigen" : "Seite schmaler machen. Achtung: die Seite rechnet weiter mit der vollen Fensterbreite, das Layout kann dadurch anders aussehen als beim Kunden.",
+						children: "schmaler"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "close",
+						"aria-label": "Schließen",
+						onClick: onClose,
+						children: "×"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "muted",
+				children: ["Angemeldet als ", name]
+			}),
+			mode === "composing" && draft ? /* @__PURE__ */ jsxs("div", {
+				className: "compose",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "muted",
+						children: draft.label
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						"aria-label": "Kommentar",
+						placeholder: "Was stimmt hier nicht?",
+						rows: 4,
+						value: body,
+						onChange: (event) => onBody(event.target.value)
+					}),
+					failed && /* @__PURE__ */ jsx("p", {
+						className: "muted",
+						children: "Speichern fehlgeschlagen. Bitte noch einmal versuchen."
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "actions",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "primary",
+							disabled: !body.trim(),
+							onClick: onSubmit,
+							children: "Pin setzen"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "secondary",
+							onClick: onDiscard,
+							children: "Verwerfen"
+						})]
+					})
+				]
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "primary start",
+				onClick: onStartPick,
+				children: "Element kommentieren"
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "pins",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "muted",
+					children: [
+						pins.length,
+						" Pin",
+						pins.length === 1 ? "" : "s",
+						" auf dieser Seite"
+					]
+				}), /* @__PURE__ */ jsx("ul", { children: pins.map((pin) => /* @__PURE__ */ jsxs("li", {
+					"data-active": activeId === pin._id ? "" : void 0,
+					children: [
+						/* @__PURE__ */ jsxs("strong", { children: ["#", pin.number] }),
+						" ",
+						pin.authorName,
+						/* @__PURE__ */ jsx("p", { children: pin.body })
+					]
+				}, pin._id)) })]
+			}),
+			unplaced.length > 0 && /* @__PURE__ */ jsxs("section", {
+				className: "pins unplaced",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "muted",
+						children: [
+							"Ohne Position (",
+							unplaced.length,
+							")"
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "muted",
+						children: "Entweder in einer anderen Ansichtsbreite gesetzt, oder das Element gibt es nicht mehr."
+					}),
+					/* @__PURE__ */ jsx("ul", { children: unplaced.map((pin) => /* @__PURE__ */ jsxs("li", { children: [
+						/* @__PURE__ */ jsxs("strong", { children: ["#", pin.number] }),
+						" ",
+						pin.authorName,
+						" · ",
+						BUCKET_LABEL[pin.viewportBucket],
+						/* @__PURE__ */ jsx("p", { children: pin.body })
+					] }, pin._id)) })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { HUD_REVIEW_MARKER, Review, capturePinAnchor, convexReview, resolveAnchor, routeKey, viewportBucket };