annotate-anything 0.0.0-stage → 0.1.0

package/dist/src-DTByJ6QG.js

@@ -0,0 +1,2116 @@
+import { t as LOCAL_HOST } from "./local-W-uyrETY.js";
+// src/anchor.ts
+var STATE_CLASS = /^(on|off|open|closed|active|sel|selected|current|hover|hovered|focus|focused|flash|show|shown|hidden|visible|disabled|checked|expanded|collapsed|loading)$|^(is|has)-/;
+var GENERATED_ID = /\d{4,}|[:«»]|^_r_|^radix-|^headlessui-|^react-aria|^mui-|^ember\d/;
+var PLAIN_CLASS = /^[A-Za-z_-][\w-]*$/;
+var DIALOG = "dialog,[role=dialog],[role=alertdialog]";
+var OPEN_DIALOG = "dialog[open],[role=dialog],[role=alertdialog]";
+var DEEP = " >>> ";
+var NEAR = 80;
+function matches(el, sel) {
+	try {
+		return el.matches(sel);
+	} catch {
+		return false;
+	}
+}
+var isShadow = (n) => n.nodeType === 11 && "host" in n;
+function frameOf(doc) {
+	try {
+		return doc.defaultView?.frameElement ?? null;
+	} catch {
+		return null;
+	}
+}
+function frameDoc(el) {
+	if (el.tagName !== "IFRAME" && el.tagName !== "FRAME") return null;
+	try {
+		return el.contentDocument;
+	} catch {
+		return null;
+	}
+}
+function composedParent(el) {
+	if (el.parentElement) return el.parentElement;
+	const root = el.getRootNode();
+	if (isShadow(root)) return root.host;
+	if (root.nodeType === 9 && el === root.documentElement) return frameOf(root);
+	return null;
+}
+function within(container, el) {
+	for (let e = el; e; e = composedParent(e)) if (e === container) return true;
+	return false;
+}
+function rectOf(el) {
+	const r = el.getBoundingClientRect();
+	let x = r.left;
+	let y = r.top;
+	for (let doc = el.ownerDocument, f = frameOf(doc); f && doc !== document; doc = f.ownerDocument, f = frameOf(doc)) {
+		const fr = f.getBoundingClientRect();
+		x += fr.left + f.clientLeft;
+		y += fr.top + f.clientTop;
+	}
+	return {
+		left: x,
+		top: y,
+		width: r.width,
+		height: r.height,
+		right: x + r.width,
+		bottom: y + r.height
+	};
+}
+function rootsOf(el) {
+	const roots = [];
+	for (let e = el; e;) {
+		const root = e.getRootNode();
+		if (root === document) break;
+		roots.push(root);
+		e = isShadow(root) ? root.host : frameOf(root);
+	}
+	return roots;
+}
+function inDialog(el) {
+	for (let e = el; e; e = composedParent(e)) if (matches(e, DIALOG)) return true;
+	return false;
+}
+function topLayer(host) {
+	let open = [...document.querySelectorAll(OPEN_DIALOG)].filter((el) => el !== host && !host.contains(el) && visible(el));
+	const top = open.filter((el) => el.tagName === "DIALOG" && matches(el, ":modal")).at(-1);
+	if (top) open = open.filter((el) => top.contains(el));
+	const dialog = open.at(-1) ?? null;
+	if (!dialog) return {
+		parent: document.body,
+		dialog: null,
+		modal: false
+	};
+	const headless = dialog.hasAttribute("data-headlessui-state");
+	const modal = matches(dialog, ":modal") || dialog.getAttribute("aria-modal") === "true" || headless || document.body.style.pointerEvents === "none";
+	return {
+		parent: headless ? document.body : dialog,
+		dialog,
+		modal
+	};
+}
+function visible(el) {
+	const r = el.getBoundingClientRect();
+	return r.width > 0 || r.height > 0;
+}
+function elementAt(x, y, host) {
+	let el = null;
+	for (const e of document.elementsFromPoint(x, y)) {
+		if (e === host || e === document.documentElement || e === document.body) continue;
+		el = e;
+		break;
+	}
+	let ox = 0;
+	let oy = 0;
+	for (let depth = 0; el && depth < 10; depth++) {
+		if (el.shadowRoot) {
+			const root = el.shadowRoot;
+			const inner = root.elementsFromPoint(x - ox, y - oy).find((e) => e.getRootNode() === root);
+			if (!inner) break;
+			el = inner;
+			continue;
+		}
+		const doc = frameDoc(el);
+		if (doc) {
+			const fr = el.getBoundingClientRect();
+			ox += fr.left + el.clientLeft;
+			oy += fr.top + el.clientTop;
+			const inner = doc.elementsFromPoint(x - ox, y - oy).find((e) => e !== doc.documentElement && e !== doc.body);
+			if (!inner) break;
+			el = inner;
+			continue;
+		}
+		break;
+	}
+	return el;
+}
+function localPath(el, root) {
+	const parts = [];
+	const doc = root.nodeType === 9 ? root : null;
+	let cur = el;
+	while (cur && cur !== doc?.body && cur !== doc?.documentElement && parts.length < 12) {
+		const tag = cur.tagName.toLowerCase();
+		if (cur.id && !GENERATED_ID.test(cur.id)) {
+			parts.unshift(tag + "#" + CSS.escape(cur.id));
+			break;
+		}
+		let part = tag;
+		const cls = [...cur.classList].filter((c) => PLAIN_CLASS.test(c) && !/\d{3,}/.test(c) && !STATE_CLASS.test(c)).slice(0, 2);
+		if (cls.length) part += "." + cls.map((c) => CSS.escape(c)).join(".");
+		const parent = cur.parentElement;
+		const same = (parent ? [...parent.children] : [...root.children]).filter((c) => c.tagName === cur.tagName);
+		if (same.length > 1) part += `:nth-of-type(${same.indexOf(cur) + 1})`;
+		parts.unshift(part);
+		try {
+			const path = parts.join(" > ");
+			if (parts.length >= 2 && root.querySelectorAll(path).length === 1 && root.querySelector(path) === el) break;
+		} catch {}
+		cur = parent;
+	}
+	return parts.join(" > ") || el.tagName.toLowerCase();
+}
+function cssPath(el) {
+	const segs = [];
+	for (let cur = el; cur;) {
+		const root = cur.getRootNode();
+		segs.unshift(localPath(cur, root));
+		cur = isShadow(root) ? root.host : root === document ? null : frameOf(root);
+	}
+	return segs.join(DEEP);
+}
+function textOf(el) {
+	return (el.innerText || el.getAttribute("aria-label") || el.getAttribute("title") || el.alt || el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 180);
+}
+function labelFor(el, attrs) {
+	const tag = el.tagName.toLowerCase();
+	for (const a of attrs) {
+		const v = el.getAttribute(a);
+		if (v) return `${tag}[${v}]`;
+	}
+	if (el.id) return tag + "#" + el.id;
+	const c = [...el.classList].find((c) => PLAIN_CLASS.test(c));
+	return c ? tag + "." + c : tag;
+}
+function stableAttr(el, attrs) {
+	for (const a of attrs) {
+		const v = el.getAttribute(a);
+		if (v) return v;
+	}
+}
+function sized(el) {
+	if (!el) return false;
+	const r = el.getBoundingClientRect();
+	return r.width > 0 || r.height > 0;
+}
+function query(root, sel, host) {
+	try {
+		const el = root.querySelector(sel);
+		return el && el !== host && !host.contains(el) ? el : null;
+	} catch {
+		return null;
+	}
+}
+function container(selector) {
+	const segs = selector.split(DEEP);
+	let root = document;
+	for (const seg of segs.slice(0, -1)) {
+		let el = null;
+		try {
+			el = root.querySelector(seg);
+		} catch {}
+		const next = el ? el.shadowRoot ?? frameDoc(el) : null;
+		if (!next) return null;
+		root = next;
+	}
+	return {
+		root,
+		last: segs.at(-1)
+	};
+}
+function find(note, host, attrs) {
+	const c = container(note.selector || note.tag);
+	if (!c) return null;
+	const { root, last } = c;
+	const bySelector = note.selector ? query(root, last, host) : null;
+	const agrees = (el) => (!note.testId || stableAttr(el, attrs) === note.testId) && (!note.targetText || textOf(el) === note.targetText);
+	if (sized(bySelector) && agrees(bySelector)) return bySelector;
+	if (note.testId) for (const a of attrs) {
+		const el = query(root, `[${a}="${CSS.escape(note.testId)}"]`, host);
+		if (sized(el)) return el;
+	}
+	if (!note.tag) return null;
+	const cx = note.bounds.x + note.bounds.width / 2 + note.scroll.x;
+	const cy = note.bounds.y + note.bounds.height / 2 + note.scroll.y;
+	let byText = null;
+	let byTextDist = Infinity;
+	let near = null;
+	let nearDist = NEAR;
+	let candidates = [];
+	try {
+		candidates = [...root.querySelectorAll(note.tag)];
+	} catch {}
+	for (const el of candidates) {
+		if (host.contains(el) || inDialog(el) !== note.inDialog) continue;
+		const r = rectOf(el);
+		if (!r.width && !r.height) continue;
+		const dist = Math.hypot(r.left + r.width / 2 + scrollX - cx, r.top + r.height / 2 + scrollY - cy);
+		if (note.targetText && dist < byTextDist && textOf(el) === note.targetText) {
+			byText = el;
+			byTextDist = dist;
+		}
+		if (dist < nearDist) {
+			near = el;
+			nearDist = dist;
+		}
+	}
+	if (byText) return byText;
+	if (sized(bySelector)) return bySelector;
+	return near;
+}
+function place(note, el) {
+	if (el) {
+		const r = rectOf(el);
+		if (note.kind === "element") return {
+			x: r.left,
+			y: r.top,
+			width: r.width,
+			height: r.height,
+			ok: true,
+			hidden: false
+		};
+		if (note.kind === "area" && note.offset) return {
+			x: r.left + note.offset.x,
+			y: r.top + note.offset.y,
+			width: note.offset.width,
+			height: note.offset.height,
+			ok: true,
+			hidden: false
+		};
+		const b = note.bounds;
+		const fx = b.width ? clamp((note.x - b.x) / b.width, 0, 1) : 0;
+		const fy = b.height ? clamp((note.y - b.y) / b.height, 0, 1) : 0;
+		return {
+			x: r.left + fx * r.width,
+			y: r.top + fy * r.height,
+			width: 0,
+			height: 0,
+			ok: true,
+			hidden: false
+		};
+	}
+	const dx = note.scroll.x - scrollX;
+	const dy = note.scroll.y - scrollY;
+	const hidden = note.inDialog;
+	if (note.kind === "pin") return {
+		x: note.x + dx,
+		y: note.y + dy,
+		width: 0,
+		height: 0,
+		ok: false,
+		hidden
+	};
+	if (note.kind === "area" && note.offset) return {
+		x: note.bounds.x + note.offset.x + dx,
+		y: note.bounds.y + note.offset.y + dy,
+		width: note.offset.width,
+		height: note.offset.height,
+		ok: false,
+		hidden
+	};
+	return {
+		x: note.bounds.x + dx,
+		y: note.bounds.y + dy,
+		width: note.bounds.width,
+		height: note.bounds.height,
+		ok: false,
+		hidden
+	};
+}
+function scrollableAt(el) {
+	while (el && el !== document.body && el !== document.documentElement) {
+		const doc = el.ownerDocument;
+		if (doc !== document && (el === doc.body || el === doc.documentElement)) {
+			const s = doc.scrollingElement;
+			if (s && (s.scrollHeight > s.clientHeight || s.scrollWidth > s.clientWidth)) return s;
+			el = frameOf(doc);
+			continue;
+		}
+		const s = getComputedStyle(el);
+		if (/(auto|scroll)/.test(s.overflowY + s.overflowX) && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)) return el;
+		el = composedParent(el);
+	}
+	return null;
+}
+function containing(start, rect) {
+	let el = start;
+	while (el) {
+		const parent = composedParent(el);
+		if (!parent || parent === document.documentElement) break;
+		const r = rectOf(el);
+		if (r.left <= rect.x + 1 && r.top <= rect.y + 1 && r.right >= rect.x + rect.width - 1 && r.bottom >= rect.y + rect.height - 1) break;
+		el = parent;
+	}
+	return el;
+}
+function clamp(v, lo, hi) {
+	return Math.min(Math.max(v, lo), hi);
+}
+// src/icons.ts
+var ICON = {
+	pin: "<svg viewBox=\"0 0 24 24\"><path d=\"M12 21s7-6.7 7-12a7 7 0 1 0-14 0c0 5.3 7 12 7 12z\"/><circle cx=\"12\" cy=\"9\" r=\"2.4\"/></svg>",
+	element: "<svg viewBox=\"0 0 24 24\"><path d=\"M5 3l14 8-6 2-2 6z\"/></svg>",
+	area: "<svg viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"1.5\" stroke-dasharray=\"3 2.5\"/></svg>",
+	list: "<svg viewBox=\"0 0 24 24\"><path d=\"M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01\"/></svg>",
+	eye: "<svg viewBox=\"0 0 24 24\"><path d=\"M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>",
+	eyeOff: "<svg viewBox=\"0 0 24 24\"><path d=\"M3 3l18 18M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 4M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7a9.6 9.6 0 0 0 5.4-1.6\"/></svg>",
+	caret: "<svg viewBox=\"0 0 24 24\"><path d=\"M6 9l6 6 6-6\"/></svg>",
+	copy: "<svg viewBox=\"0 0 24 24\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\"/><path d=\"M5 15H4V6a2 2 0 0 1 2-2h9v1\"/></svg>",
+	check: "<svg viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5 9-10\"/></svg>",
+	trash: "<svg viewBox=\"0 0 24 24\"><path d=\"M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5\"/></svg>",
+	pencil: "<svg viewBox=\"0 0 24 24\"><path d=\"M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4z\"/><path d=\"M13.5 6.5l4 4\"/></svg>"
+};
+// src/styles.ts
+var LIGHT = {
+	ink: "#ffffff",
+	"ink-2": "#f1f6fb",
+	"ink-hover": "#e3edf6",
+	text: "#0b1a28",
+	muted: "#556575",
+	line: "#d8e4ef",
+	edge: "rgba(11,26,40,.09)",
+	divider: "#e8eff6",
+	hover: "#eef4f9",
+	accent: "#0369a1",
+	"accent-2": "#4f46e5",
+	"on-accent": "#fff",
+	sent: "#7c3aed",
+	working: "#d97706",
+	resolved: "#059669",
+	danger: "#be123c",
+	"accent-soft": "rgba(3,105,161,.13)",
+	"accent-soft-hover": "rgba(3,105,161,.2)",
+	shadow: "0 18px 46px rgba(20,30,50,.15)",
+	launcher: "#e3edf6",
+	"launcher-ring": "rgba(11,26,40,.14)",
+	"mark-edge": "#fff",
+	radius: "16px",
+	font: "13px/1.4 Geist,\"Geist Sans\",Inter,system-ui,-apple-system,sans-serif"
+};
+var DARK = {
+	ink: "#1d2630",
+	"ink-2": "#27323e",
+	"ink-hover": "#323e4c",
+	text: "#f1f6fb",
+	muted: "#aebbc9",
+	line: "#384553",
+	edge: "rgba(241,246,251,.09)",
+	divider: "#2b3643",
+	hover: "#28333f",
+	accent: "#38bdf8",
+	"accent-2": "#818cf8",
+	"on-accent": "#06263a",
+	sent: "#b794ff",
+	working: "#fbbf24",
+	resolved: "#34d399",
+	danger: "#fb7185",
+	"accent-soft": "rgba(56,189,248,.17)",
+	"accent-soft-hover": "rgba(56,189,248,.28)",
+	shadow: "0 20px 50px rgba(0,0,0,.5)",
+	launcher: "#1d2630",
+	"launcher-ring": "rgba(241,246,251,.14)",
+	"mark-edge": "#1d2630"
+};
+var tokens = (t) => Object.entries(t).map(([k, v]) => `--aa-${k}:${v}`).join(";");
+var themes = `:host{${tokens(LIGHT)}}:host([data-scheme=dark]){${tokens(DARK)}}`;
+var GRADIENT = "linear-gradient(135deg,var(--aa-accent),var(--aa-accent-2))";
+var css = `
+${themes}
+.root{all:initial;font:var(--aa-font);color:var(--aa-text);pointer-events:none}
+.root *{box-sizing:border-box;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none;text-align:left;line-height:inherit}
+button,textarea{all:unset;box-sizing:border-box;font:inherit;color:inherit}
+button{cursor:pointer}
+button:focus-visible{outline:2px solid var(--aa-accent);outline-offset:1px}
+[hidden]{display:none!important}
+svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
+.capture{position:fixed;inset:0;cursor:crosshair;background:transparent;touch-action:none;pointer-events:auto}
+.hover{position:fixed;pointer-events:none;border:1px dashed color-mix(in srgb,var(--aa-accent) 70%,transparent);border-radius:3px}
+.hover.el{border:0;border-radius:6px;background:linear-gradient(var(--aa-accent),var(--aa-accent)) 0 0/14px 2px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 0 0/2px 14px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 100% 0/14px 2px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 100% 0/2px 14px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 0 100%/14px 2px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 0 100%/2px 14px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 100% 100%/14px 2px no-repeat,linear-gradient(var(--aa-accent),var(--aa-accent)) 100% 100%/2px 14px no-repeat,color-mix(in srgb,var(--aa-accent) 7%,transparent);transition:left .12s cubic-bezier(.2,.9,.3,1),top .12s cubic-bezier(.2,.9,.3,1),width .12s cubic-bezier(.2,.9,.3,1),height .12s cubic-bezier(.2,.9,.3,1)}
+.hover.el span{left:16px;border-radius:6px;background:${GRADIENT}}
+.hover span{position:absolute;left:-1px;bottom:100%;margin-bottom:3px;padding:2px 6px;font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--aa-on-accent);background:var(--aa-accent);border-radius:4px}
+.area{position:fixed;pointer-events:none;border:1.5px solid var(--aa-accent);background:color-mix(in srgb,var(--aa-accent) 7%,transparent);border-radius:4px}
+.area.drawing{border-style:dashed}
+.area.sent,.area.working{border-color:var(--aa-sent);background:color-mix(in srgb,var(--aa-sent) 6%,transparent)}
+.area.resolved{border-color:color-mix(in srgb,var(--aa-resolved) 55%,transparent);border-style:dashed;background:transparent}
+.area.detached{opacity:.45;border-style:dashed}
+.mark{position:fixed;width:22px;height:22px;padding:0;border:2px solid var(--aa-mark-edge);border-radius:50%;background:${GRADIENT};color:var(--aa-on-accent);font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.22);transform:translate(-50%,-50%);transition:transform .16s cubic-bezier(.2,1.4,.4,1);pointer-events:auto}
+.mark:hover,.mark.current{transform:translate(-50%,-50%) scale(1.12)}
+.mark.current{box-shadow:0 0 0 3px color-mix(in srgb,var(--aa-accent) 28%,transparent),0 1px 5px rgba(0,0,0,.22)}
+.mark.current{color:var(--aa-on-accent)}
+.mark.d3,.dot.d3{font-size:8px}
+.mark.d4,.dot.d4{font-size:6px}
+.mark.sent{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}
+.mark.working{background:linear-gradient(135deg,#d97706,#fbbf24);color:#fff}
+.mark.resolved{background:linear-gradient(135deg,#059669,#34d399);color:#fff}
+.mark.detached{opacity:.5;border-style:dashed}
+.mark.sent::after,.mark.working::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(currentColor,transparent 70%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));animation:aa-spin 1.1s linear infinite;pointer-events:none}
+.mark.sent::after{color:var(--aa-sent)}
+.mark.working::after{color:var(--aa-working)}
+.burst{position:fixed;width:22px;height:22px;pointer-events:none}
+.burst::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--aa-resolved);animation:aa-ring .75s cubic-bezier(.1,.7,.3,1) forwards}
+.burst::after{content:"";position:absolute;left:10px;top:10px;width:2.5px;height:2.5px;border-radius:50%;animation:aa-sparks .7s cubic-bezier(.1,.7,.3,1) forwards}
+@keyframes aa-ring{from{transform:scale(.7);opacity:1}to{transform:scale(2.5);opacity:0}}
+@keyframes aa-sparks{from{box-shadow:0 -8px var(--aa-resolved),5.6px -5.6px var(--aa-accent),8px 0 var(--aa-resolved),5.6px 5.6px var(--aa-accent),0 8px var(--aa-resolved),-5.6px 5.6px var(--aa-accent),-8px 0 var(--aa-resolved),-5.6px -5.6px var(--aa-accent);opacity:1}to{box-shadow:0 -30px var(--aa-resolved),21px -21px var(--aa-accent),30px 0 var(--aa-resolved),21px 21px var(--aa-accent),0 30px var(--aa-resolved),-21px 21px var(--aa-accent),-30px 0 var(--aa-resolved),-21px -21px var(--aa-accent);opacity:0}}
+@keyframes aa-spin{to{rotate:360deg}}
+@keyframes aa-pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
+.panel,.toolbar{position:fixed;background:var(--aa-ink);border:1px solid var(--aa-edge);border-radius:var(--aa-radius);box-shadow:var(--aa-shadow);pointer-events:auto}
+.panel:not([hidden]),.toolbar:not([hidden]){animation:aa-pop .2s cubic-bezier(.2,1.2,.4,1)}
+.panel{z-index:3;padding:10px}
+.head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.chip{flex:none;padding:2px 7px;font-size:11px;font-weight:700;color:var(--aa-on-accent);background:${GRADIENT};border-radius:6px}
+.chip.sent,.dot.sent{background:linear-gradient(120deg,#7c3aed,#9f67ff);color:#fff}
+.chip.working,.dot.working{background:linear-gradient(120deg,#b45309,#d97706);color:#fff}
+.chip.resolved,.dot.resolved{background:linear-gradient(120deg,#059669,#10b981);color:#fff}
+.target{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--aa-muted)}
+.x{color:var(--aa-muted);font-size:18px;line-height:1;padding:0 2px}
+.x:hover{color:var(--aa-text)}
+textarea.input{display:block;width:100%;min-height:84px;resize:vertical;padding:8px 9px;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--aa-text);background:var(--aa-ink-2);border:1px solid var(--aa-line);border-radius:11px;cursor:text}
+textarea.input:focus{border-color:var(--aa-accent);box-shadow:0 0 0 3px var(--aa-accent-soft)}
+textarea.input::placeholder{color:var(--aa-muted)}
+.comment{margin:0 0 8px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
+.reply{margin-bottom:8px;padding:8px 9px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;background:color-mix(in srgb,var(--aa-resolved) 9%,var(--aa-ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aa-resolved) 35%,transparent);border-radius:10px}
+.reply.progress{background:color-mix(in srgb,var(--aa-working) 9%,var(--aa-ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aa-working) 35%,transparent)}
+.reply b{display:block;margin-bottom:2px;font-size:10.5px;font-weight:700;color:var(--aa-muted);text-transform:uppercase;letter-spacing:.04em}
+.waiting{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 9px;font-size:12px;line-height:1.45;color:var(--aa-text);background:var(--aa-ink-2);border-radius:6px;overflow-wrap:anywhere}
+.waiting .spinner{margin-top:2px}
+.waiting span{flex:1;min-width:0}
+.status{display:flex;align-items:center;gap:8px}
+.status>span{flex:1;min-width:0}
+.copy{flex:none;display:inline-flex;align-items:center;gap:4px;margin:-2px 0;padding:3px 7px 3px 6px;font-size:11px;font-weight:600;color:var(--aa-accent);background:var(--aa-accent-soft);border-radius:6px;white-space:nowrap}
+.copy:hover{background:var(--aa-accent-soft-hover)}
+.copy.copied{color:var(--aa-resolved);background:color-mix(in srgb,var(--aa-resolved) 14%,transparent)}
+.copy svg{width:12px;height:12px}
+.foot{display:flex;align-items:center;gap:6px;margin-top:8px}
+.hint{flex:1;font-size:11px;color:var(--aa-muted);text-align:right}
+.hint.nudge{color:var(--aa-accent);font-weight:600}
+.btn{height:30px;padding:0 12px;font-size:12px;font-weight:600;line-height:30px;color:var(--aa-text);background:color-mix(in srgb,var(--aa-text) 9%,transparent);border-radius:9px}
+.btn:hover:not(:disabled){background:color-mix(in srgb,var(--aa-text) 15%,transparent)}
+.panel .btn:not(.primary,.danger){color:var(--aa-accent);background:var(--aa-accent-soft)}
+.panel .btn:not(.primary,.danger):hover:not(:disabled){background:var(--aa-accent-soft-hover)}
+.btn:disabled{opacity:.4;cursor:default}
+.panel .btn.primary,.btn.primary{background:var(--aa-accent);color:var(--aa-on-accent)}
+.panel .btn.primary:hover:not(:disabled),.btn.primary:hover:not(:disabled){background:var(--aa-accent);filter:brightness(1.08)}
+.btn.danger{color:var(--aa-danger);background:color-mix(in srgb,var(--aa-danger) 13%,var(--aa-ink))}
+.btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--aa-danger) 21%,var(--aa-ink))}
+.btn.trash{display:grid;place-items:center;width:30px;padding:0;color:var(--aa-muted);background:color-mix(in srgb,var(--aa-text) 9%,transparent)}
+.btn.trash svg{width:16px;height:16px}
+.btn.trash:hover:not(:disabled){color:var(--aa-danger);background:color-mix(in srgb,var(--aa-danger) 15%,var(--aa-ink))}
+.toolbar{max-width:calc(100vw - 16px)}
+.tools{display:flex;align-items:center;gap:2px;padding:5px;flex-wrap:wrap}
+.tool{position:relative;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;font-size:12px;font-weight:600;border-radius:8px;white-space:nowrap}
+.tool:hover:not(:disabled){background:var(--aa-hover)}
+.tool.on{color:var(--aa-text);background:linear-gradient(110deg,color-mix(in srgb,var(--aa-accent) 20%,transparent),color-mix(in srgb,var(--aa-accent-2) 20%,transparent))}
+.tool[data-mode].on{background:none}
+.tool[data-mode].on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,color-mix(in srgb,var(--aa-accent) 24%,transparent),color-mix(in srgb,var(--aa-accent-2) 24%,transparent))}
+.toolbar.opening .tools>*{animation:aa-rise .34s cubic-bezier(.2,1.3,.4,1) backwards}
+.toolbar.opening .tools>*:nth-child(2){animation-delay:.03s}
+.toolbar.opening .tools>*:nth-child(3){animation-delay:.06s}
+.toolbar.opening .tools>*:nth-child(4){animation-delay:.09s}
+.toolbar.opening .tools>*:nth-child(5){animation-delay:.12s}
+.toolbar.opening .tools>*:nth-child(6){animation-delay:.15s}
+.toolbar.opening .tools>*:nth-child(7){animation-delay:.18s}
+.toolbar.opening .tools>*:nth-child(8){animation-delay:.21s}
+@keyframes aa-rise{from{opacity:0;transform:translateY(7px)}}
+.tool:disabled{opacity:.4;cursor:default}
+.tool.icon{padding:6px 7px}
+.sep{width:1px;height:18px;margin:0 3px;background:var(--aa-line)}
+.send{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;margin-left:2px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--aa-accent);background:var(--aa-accent-soft);border-radius:8px;white-space:nowrap}
+.send:not(:disabled)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--aa-accent) 38%,transparent) 50%,transparent 65%);transform:translateX(-120%);animation:aa-sheen 4.5s ease-in-out infinite;pointer-events:none}
+@keyframes aa-sheen{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
+.send:not(:disabled) .count{color:var(--aa-on-accent);background:${GRADIENT};animation:aa-count 2.25s ease-in-out infinite}
+@keyframes aa-count{50%{box-shadow:0 0 0 3px var(--aa-accent-soft)}}
+.send:hover:not(:disabled){background:var(--aa-accent-soft-hover)}
+.send:disabled{opacity:.45;cursor:default}
+.split{display:inline-flex;min-width:0;margin-left:2px}
+.split .send{margin-left:0}
+.split .send:has(+ .more){border-radius:8px 0 0 8px;min-width:0}
+.send.more{padding:6px 7px;border-radius:0 8px 8px 0;border-left:1px solid color-mix(in srgb,var(--aa-accent) 30%,transparent)}
+.send.more svg{width:13px;height:13px}
+.send .to{max-width:160px;overflow:hidden;text-overflow:ellipsis}
+.current{flex:none;color:var(--aa-accent)}
+.current svg{width:14px;height:14px}
+.count{font-variant-numeric:tabular-nums;min-width:17px;padding:0 5px;font-size:10.5px;line-height:17px;text-align:center;color:var(--aa-ink);background:var(--aa-text);border-radius:9px}
+.slot{display:contents}
+.rows{width:0;min-width:100%}
+.toolbar.up:not([hidden]){display:flex;flex-direction:column-reverse}
+.toolbar.up .rows{border-bottom:1px solid var(--aa-divider)}
+.toolbar.up .rows>:first-child{border-top:0}
+.status,.rows>.busy{padding:6px 12px 8px;font-size:11.5px;color:var(--aa-muted);border-top:1px solid var(--aa-divider);overflow-wrap:anywhere}
+.rows>.busy{display:flex;align-items:center;gap:7px}
+.rows>.busy span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.spinner{flex:none;width:11px;height:11px;border-radius:50%;border:2px solid color-mix(in srgb,var(--aa-muted) 35%,transparent);border-top-color:var(--aa-text);animation:aa-spin .9s linear infinite}
+.list{list-style:none;padding:4px;max-height:260px;overflow-y:auto;border-top:1px solid var(--aa-divider)}
+.list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer}
+.list li:hover{background:var(--aa-hover)}
+.list li:focus-visible{outline:2px solid var(--aa-accent);outline-offset:-2px}
+.phead{padding:8px 12px 2px;font-size:11px;font-weight:600;color:var(--aa-muted);border-top:1px solid var(--aa-divider)}
+.pick{border-top:0}
+.list li.empty{color:var(--aa-muted);cursor:default}
+.list li.empty:hover{background:none}
+.dot{flex:none;width:20px;height:20px;padding:0;font-size:10.5px;font-weight:700;line-height:20px;text-align:center;color:var(--aa-on-accent);background:${GRADIENT};border-radius:50%}
+.ltext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lstate{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--aa-muted)}
+.lfoot{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:6px 8px;border-top:1px solid var(--aa-divider)}
+.confirm{display:flex;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--aa-divider)}
+.confirm p{flex:1;font-size:11.5px;color:var(--aa-muted)}
+.launcher{position:fixed;transition:transform .22s cubic-bezier(.2,1.5,.4,1),background .15s,color .15s;left:clamp(8px,calc(var(--fx,1) * 100vw - 64px),calc(100vw - 52px));top:clamp(8px,calc(var(--fy,1) * 100vh - 140px),calc(100vh - 52px));width:44px;height:44px;display:grid;place-items:center;color:var(--aa-text);background:var(--aa-launcher);border:1.5px solid var(--aa-launcher-ring);border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto}
+.launcher.placed{left:clamp(8px,calc(var(--fx) * 100vw),calc(100vw - 52px));top:clamp(8px,calc(var(--fy) * 100vh),calc(100vh - 52px))}
+.launcher svg{width:19px;height:19px}
+.launcher:hover{transform:scale(1.08);background:color-mix(in srgb,var(--aa-text) 12%,var(--aa-launcher))}
+.launcher.on:hover{background:${GRADIENT}}
+.launcher:active{transform:scale(.93)}
+.launcher:hover svg{animation:aa-wiggle .55s ease-in-out}
+@keyframes aa-wiggle{20%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
+.launcher.on{background:${GRADIENT};border-color:transparent;color:var(--aa-on-accent)}
+.launcher.busy::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--aa-accent);animation:aa-spin 1.1s linear infinite}
+.launcher.on.busy::after{border-top-color:var(--aa-accent-2)}
+.badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;font-size:10.5px;font-weight:700;line-height:14px;text-align:center;color:var(--aa-on-accent);background:var(--aa-accent);border:2px solid var(--aa-mark-edge);border-radius:9px}
+@media (prefers-reduced-motion:reduce){.mark::after,.launcher.busy::after,.spinner,.send::after,.send .count,.panel,.toolbar,.toolbar *,.launcher svg{animation:none!important}.burst{display:none}.mark,.launcher,.hover{transition:none!important}}
+@media print{.root{display:none!important}}
+`;
+// src/scheme.ts
+var probe;
+function schemeOf(color) {
+	if (probe === void 0) probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+	if (!probe) return null;
+	probe.clearRect(0, 0, 1, 1);
+	probe.fillStyle = "rgba(0,0,0,0)";
+	probe.fillStyle = color;
+	probe.fillRect(0, 0, 1, 1);
+	const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
+	if (a < 128) return null;
+	return .2126 * r + .7152 * g + .0722 * b < 128 ? "dark" : "light";
+}
+function pageScheme(host) {
+	const wide = document.elementsFromPoint(innerWidth / 2, innerHeight / 2).filter((el) => {
+		if (el === host || host.contains(el)) return false;
+		const r = el.getBoundingClientRect();
+		return r.width >= innerWidth / 2 && r.height >= innerHeight / 2;
+	});
+	for (const el of [
+		...wide,
+		document.body,
+		document.documentElement
+	]) {
+		if (!el) continue;
+		const found = schemeOf(getComputedStyle(el).backgroundColor);
+		if (found) return found;
+	}
+	const declared = getComputedStyle(document.documentElement).colorScheme;
+	if (declared.includes("dark") && !declared.includes("light")) return "dark";
+	if (declared.includes("light") && !declared.includes("dark")) return "light";
+	return matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
+}
+// src/transport.ts
+function http(endpoint, extra = {}) {
+	const base = endpoint.replace(/\/$/, "");
+	async function call(path, body) {
+		const res = await fetch(base + path, {
+			method: body === void 0 ? "GET" : "POST",
+			headers: body === void 0 ? extra : {
+				...extra,
+				"Content-Type": "application/json"
+			},
+			body: body === void 0 ? void 0 : JSON.stringify(body),
+			cache: "no-store",
+			signal: AbortSignal.timeout(path.endsWith("/submit") ? 12e4 : 2e4)
+		});
+		if (!res.ok) throw new Error(`${res.status} ${(await res.text()).slice(0, 160)}`);
+		return res.json();
+	}
+	return {
+		kind: "http",
+		sends: true,
+		pull: () => call("/feedback"),
+		push: (notes, deleted) => call("/feedback", {
+			notes,
+			deleted
+		}),
+		submit: (notes, page, target) => call("/feedback/submit", {
+			noteIds: notes.map((n) => n.id),
+			...page,
+			target: target?.id,
+			agent: target?.label
+		}),
+		status: async (ids, status) => {
+			await call("/feedback/status", {
+				ids,
+				status
+			});
+		},
+		targets: () => call("/targets").then((r) => Array.isArray(r.targets) ? r.targets : [])
+	};
+}
+function clipboard() {
+	return {
+		...local(),
+		kind: "clipboard",
+		sends: false,
+		submit: async (notes, page) => {
+			await navigator.clipboard.writeText(markdown(notes, page));
+			return {
+				sent: notes.length,
+				watching: false
+			};
+		}
+	};
+}
+function local() {
+	const state = (notes, deleted) => ({
+		notes,
+		deleted,
+		watching: false
+	});
+	return {
+		kind: "local",
+		sends: false,
+		pull: () => Promise.resolve(state([], [])),
+		push: (notes, deleted) => Promise.resolve(state(notes, deleted)),
+		submit: () => Promise.reject(/* @__PURE__ */ new Error("No agent connection")),
+		status: () => Promise.resolve()
+	};
+}
+function markdown(notes, page) {
+	const lines = [`UI notes on ${page.title || page.url} (${page.url}), viewport ${page.viewport.width}x${page.viewport.height}:`, ""];
+	for (const n of notes) {
+		lines.push(`#${n.n} ${n.kind} on ${n.route}: ${n.selector || n.tag}`);
+		if (n.targetText) lines.push(`  element text: "${n.targetText}"`);
+		if (n.testId) lines.push(`  test id: ${n.testId}`);
+		if (Object.keys(n.context).length) lines.push(`  context: ${JSON.stringify(n.context)}`);
+		lines.push(`  ${n.comment.replace(/\n/g, "\n  ")}`, "");
+	}
+	return lines.join("\n").trimEnd();
+}
+// src/annotator.ts
+var PANEL_W = 300;
+var KIND_LABEL = {
+	pin: "Pin",
+	element: "Element",
+	area: "Area"
+};
+var HINT = {
+	pin: "Click an exact spot to pin a note · Esc to stop",
+	element: "Click an element to note it · Esc to stop",
+	area: "Drag a box over an area · Esc to stop"
+};
+var TOOL_TITLE = {
+	pin: "Drop a pin on an exact spot",
+	element: "Select a whole element",
+	area: "Drag a box over an area"
+};
+var LAYOUT_ATTRS = [
+	"class",
+	"style",
+	"hidden",
+	"open",
+	"aria-hidden",
+	"aria-expanded",
+	"aria-current",
+	"data-state"
+];
+var esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;"
+})[c]);
+var now = () => (/* @__PURE__ */ new Date()).toISOString();
+var digits = (n) => n >= 1e3 ? " d4" : n >= 100 ? " d3" : "";
+var plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+var clock = (iso) => iso ? new Date(iso).toLocaleTimeString([], {
+	hour: "numeric",
+	minute: "2-digit"
+}) : "";
+var uuid = () => crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
+function read(key, fallback) {
+	try {
+		const raw = localStorage.getItem(key);
+		return raw ? JSON.parse(raw) : fallback;
+	} catch {
+		return fallback;
+	}
+}
+function write(key, value) {
+	try {
+		if (value === null) localStorage.removeItem(key);
+		else localStorage.setItem(key, JSON.stringify(value));
+	} catch {}
+}
+var Annotator = class {
+	options;
+	host;
+	shadow;
+	q;
+	layer;
+	hoverBox;
+	schemeObserver;
+	schemeMedia;
+	schemeStop;
+	schemeTimer = 0;
+	lastStatus = /* @__PURE__ */ new Map();
+	marksHtml = "";
+	barHtml = "";
+	toolRect = null;
+	drawBox;
+	marks;
+	panelEl;
+	bar;
+	launcher;
+	transport;
+	attrs;
+	keys;
+	notes = [];
+	deleted = [];
+	pending = /* @__PURE__ */ new Map();
+	watching = false;
+	agentFromServer;
+	connected = true;
+	ready = false;
+	open = false;
+	mode = null;
+	listOpen = false;
+	confirming = false;
+	picking = null;
+	targets = [];
+	panel = null;
+	drawing = null;
+	msg = null;
+	intro = null;
+	busy = false;
+	lastSent;
+	delivered = false;
+	showMarks;
+	route;
+	found = /* @__PURE__ */ new Map();
+	dirtyAnchors = true;
+	modal = null;
+	roots = /* @__PURE__ */ new Set();
+	dialog = null;
+	active = false;
+	keysOn = false;
+	raf = 0;
+	attachRaf = 0;
+	msgTimer = 0;
+	nudgeTimer = 0;
+	pushTimer = 0;
+	pollTimer = 0;
+	pushing = null;
+	modalObserver;
+	layoutObserver;
+	drag = null;
+	destroyed = false;
+	constructor(options = {}) {
+		this.options = options;
+		const scope = options.scope ?? "default";
+		this.keys = {
+			notes: `annotate-anything:${scope}:notes`,
+			pos: "annotate-anything:launcher",
+			marks: "annotate-anything:marks",
+			target: `annotate-anything:${scope}:target`
+		};
+		this.attrs = options.stableAttributes ?? [
+			"data-testid",
+			"data-test",
+			"data-qa",
+			"data-cy"
+		];
+		const t = options.transport ?? (options.endpoint ? "http" : "local");
+		this.transport = typeof t === "object" ? t : t === "http" ? http(options.endpoint ?? "/__annotate", options.headers) : t === "clipboard" ? clipboard() : local();
+		const saved = read(this.keys.notes, {});
+		this.notes = Array.isArray(saved.notes) ? saved.notes : [];
+		this.deleted = Array.isArray(saved.deleted) ? saved.deleted : [];
+		this.ready = this.transport.kind !== "http";
+		this.showMarks = read(this.keys.marks, true);
+		this.route = this.routeOf();
+		this.host = document.createElement("annotate-anything");
+		const hs = this.host.style;
+		for (const [k, v] of Object.entries({
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			margin: "0",
+			padding: "0",
+			border: "0",
+			background: "transparent",
+			overflow: "visible",
+			"pointer-events": "none",
+			"z-index": "2147483000",
+			display: "block",
+			"max-width": "none",
+			"max-height": "none",
+			transform: "none",
+			filter: "none",
+			contain: "none"
+		})) hs.setProperty(k, v, "important");
+		this.setTheme(options.theme);
+		this.syncScheme();
+		if ("showPopover" in this.host) this.host.setAttribute("popover", "manual");
+		this.shadow = this.host.attachShadow({ mode: "open" });
+		this.shadow.innerHTML = `<style>${css}</style><div class="root" part="root">
+      <div class="capture" hidden></div>
+      <div class="hover" hidden><span></span></div>
+      <div class="area drawing" hidden></div>
+      <div class="marks"></div>
+      <div class="toolbar" role="toolbar" aria-label="Annotate this page" hidden></div>
+      <div class="panel" role="dialog" aria-label="Note" hidden></div>
+      <button class="launcher" type="button" aria-label="Annotate this page" aria-expanded="false" title="Annotate the UI (drag to move · double-click to reset)">${ICON.pencil}<span class="badge" hidden></span></button>
+    </div>`;
+		this.q = (s) => this.shadow.querySelector(s);
+		this.layer = this.q(".capture");
+		this.hoverBox = this.q(".hover");
+		this.drawBox = this.q(".drawing");
+		this.marks = this.q(".marks");
+		this.panelEl = this.q(".panel");
+		this.bar = this.q(".toolbar");
+		this.launcher = this.q(".launcher");
+		for (const el of options.controls ?? []) this.addControl(el);
+		this.modalObserver = new MutationObserver((records) => this.onModalMutation(records));
+		this.layoutObserver = new MutationObserver(() => {
+			this.dirtyAnchors = true;
+			this.schedule();
+		});
+		this.wire();
+		this.placeLauncher();
+		this.attach();
+		this.watchScheme();
+		this.modalObserver.observe(document.documentElement, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"open",
+				"aria-modal",
+				"role"
+			]
+		});
+		this.render();
+		this.start();
+	}
+	addControl(el) {
+		el.slot = "controls";
+		this.host.appendChild(el);
+		this.renderBar();
+	}
+	syncScheme = () => {
+		if (this.destroyed) return;
+		const chosen = this.options.colorScheme;
+		this.host.dataset.scheme = chosen && chosen !== "auto" ? chosen : pageScheme(this.host);
+	};
+	watchScheme() {
+		const later = () => {
+			this.syncScheme();
+			clearTimeout(this.schemeTimer);
+			this.schemeTimer = window.setTimeout(this.syncScheme, 350);
+		};
+		this.schemeObserver = new MutationObserver(later);
+		const watch = () => {
+			for (const el of [document.documentElement, document.body]) if (el) this.schemeObserver.observe(el, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"style",
+					"data-theme",
+					"data-mode",
+					"data-color-scheme",
+					"data-bs-theme"
+				]
+			});
+		};
+		watch();
+		this.schemeMedia = matchMedia("(prefers-color-scheme:dark)");
+		this.schemeMedia.addEventListener("change", later);
+		this.schemeStop = () => {
+			this.schemeObserver?.disconnect();
+			this.schemeMedia?.removeEventListener("change", later);
+			removeEventListener("load", onLoad);
+			clearTimeout(this.schemeTimer);
+		};
+		const onLoad = () => {
+			removeEventListener("load", onLoad);
+			watch();
+			later();
+		};
+		if (document.readyState !== "complete") addEventListener("load", onLoad);
+		later();
+	}
+	setTheme(theme) {
+		for (const [k, v] of Object.entries(theme ?? {})) this.host.style.setProperty(k.startsWith("--") ? k : `--aa-${k}`, v);
+	}
+	openTool(opts = {}) {
+		if (!this.open) this.toggleOpen();
+		if (opts.mode && this.mode !== opts.mode) this.setMode(opts.mode);
+		this.intro = opts.intro ?? null;
+		this.renderBar();
+	}
+	close() {
+		if (this.open) this.toggleOpen();
+	}
+	destroy() {
+		this.destroyed = true;
+		this.schemeStop?.();
+		this.setActive(false);
+		this.setKeys(false);
+		this.modalObserver.disconnect();
+		clearTimeout(this.pushTimer);
+		clearTimeout(this.pollTimer);
+		this.host.remove();
+	}
+	routeOf() {
+		if (this.options.route) return this.options.route();
+		return location.pathname + (location.hash.startsWith("#/") ? location.hash : "");
+	}
+	page() {
+		return {
+			route: this.route,
+			url: location.href,
+			title: document.title,
+			viewport: {
+				width: innerWidth,
+				height: innerHeight
+			}
+		};
+	}
+	save() {
+		write(this.keys.notes, {
+			notes: this.notes,
+			deleted: this.deleted.slice(-2e3)
+		});
+	}
+	changed() {
+		this.save();
+		this.schedulePush();
+		this.render();
+	}
+	unsent = () => this.notes.filter((n) => n.status === "open" && this.mine(n));
+	mine = (n) => !n.origin || n.origin === location.origin;
+	done = () => this.notes.filter((n) => n.status === "resolved");
+	waiting = () => this.notes.filter((n) => n.status === "sent" || n.status === "working");
+	async start() {
+		if (this.transport.kind !== "http") return;
+		await this.pull();
+		if (this.ready) this.schedulePush(0);
+		this.poll();
+	}
+	merge(state) {
+		const deleted = /* @__PURE__ */ new Set([...state.deleted, ...this.deleted]);
+		const server = new Map(state.notes.map((n) => [n.id, n]));
+		const out = [];
+		const t = Date.now();
+		for (const mine of this.notes) {
+			if (deleted.has(mine.id)) continue;
+			const theirs = server.get(mine.id);
+			server.delete(mine.id);
+			if (!theirs) {
+				out.push(mine);
+				continue;
+			}
+			const p = this.pending.get(mine.id);
+			if (p && theirs.status === p.status) this.pending.delete(mine.id);
+			if (p && theirs.status !== p.status && t - p.at < 15e3) {
+				out.push(mine);
+				continue;
+			}
+			const newer = Date.parse(theirs.updatedAt) > Date.parse(mine.updatedAt) ? {
+				comment: theirs.comment,
+				updatedAt: theirs.updatedAt
+			} : {};
+			out.push({
+				...mine,
+				...newer,
+				n: theirs.n,
+				status: theirs.status,
+				sentAt: theirs.sentAt,
+				pickedUpAt: theirs.pickedUpAt,
+				reply: theirs.reply,
+				resolvedAt: theirs.resolvedAt
+			});
+		}
+		for (const theirs of server.values()) if (!deleted.has(theirs.id) && this.mine(theirs)) out.push(theirs);
+		this.notes = out;
+		this.deleted = [...deleted];
+		this.watching = !!state.watching;
+		this.agentFromServer = state.agent;
+		this.save();
+	}
+	apply(state) {
+		if (this.destroyed) return;
+		const before = this.panel && !this.panel.isNew ? this.notes.find((n) => n.id === this.panel.note.id) : void 0;
+		const was = new Map(this.notes.map((n) => [n.id, n.status]));
+		this.merge(state);
+		const finished = this.notes.filter((n) => n.status === "resolved" && (was.get(n.id) === "sent" || was.get(n.id) === "working"));
+		if (finished.length) this.flash(`${this.who(true)} finished ${finished.length === 1 ? `note ${finished[0].n}` : `notes ${finished.map((n) => n.n).join(", ")}`}.`);
+		this.connected = true;
+		this.ready = true;
+		if (this.panel && !this.panel.isNew) {
+			const fresh = this.notes.find((n) => n.id === this.panel.note.id);
+			if (!fresh) this.closePanel();
+			else if (before && (fresh.status !== before.status || fresh.reply !== before.reply || fresh.pickedUpAt !== before.pickedUpAt) && !this.isDirty()) this.openPanel(fresh, false);
+			else this.panel.note = fresh;
+		}
+		this.render();
+	}
+	async pull() {
+		try {
+			this.apply(await this.transport.pull());
+		} catch {
+			if (this.destroyed) return;
+			this.connected = false;
+			this.ready = true;
+			this.render();
+		}
+	}
+	schedulePush(delay = 300) {
+		if (this.destroyed || this.transport.kind !== "http") return;
+		clearTimeout(this.pushTimer);
+		this.pushTimer = window.setTimeout(() => void this.flush(), delay);
+	}
+	async flush() {
+		if (this.destroyed || this.transport.kind !== "http") return;
+		clearTimeout(this.pushTimer);
+		while (this.pushing) await this.pushing;
+		let failed;
+		this.pushing = (async () => {
+			try {
+				this.apply(await this.transport.push(this.notes, this.deleted.slice(-2e3)));
+			} catch (e) {
+				failed = e.message;
+				if (this.destroyed) return;
+				this.connected = false;
+				this.renderBar();
+				this.schedulePush(15e3);
+			}
+		})();
+		await this.pushing;
+		this.pushing = null;
+		return failed;
+	}
+	poll() {
+		clearTimeout(this.pollTimer);
+		if (this.destroyed || this.transport.kind !== "http") return;
+		const waiting = this.waiting().length > 0;
+		const need = this.open || !!this.panel || waiting || !this.connected;
+		this.pollTimer = window.setTimeout(async () => {
+			if (need && !document.hidden) await this.pull();
+			this.poll();
+		}, waiting ? 2e3 : need ? 5e3 : 15e3);
+	}
+	setStatus(note, status) {
+		note.status = status;
+		note.updatedAt = now();
+		if (status === "open") delete note.sentAt;
+		if (status === "resolved") note.resolvedAt = now();
+		this.pending.set(note.id, {
+			status,
+			at: Date.now()
+		});
+		this.changed();
+		this.transport.status([note.id], status).catch(() => {});
+	}
+	remove(ids) {
+		const gone = new Set(ids);
+		this.notes = this.notes.filter((n) => !gone.has(n.id));
+		this.deleted.push(...ids);
+		for (const id of ids) this.found.delete(id);
+		this.changed();
+	}
+	onModalMutation(records) {
+		if (!this.host.isConnected) return this.attach();
+		if (this.attachRaf || !records.some((r) => r.type === "attributes" || r.addedNodes.length || r.removedNodes.length)) return;
+		this.attachRaf = requestAnimationFrame(() => {
+			this.attachRaf = 0;
+			this.attach();
+		});
+	}
+	attach() {
+		if (this.destroyed || !document.body) return;
+		const { parent, dialog, modal } = topLayer(this.host);
+		const top = modal ? dialog : null;
+		const moved = this.host.parentElement !== parent;
+		if (moved) {
+			if (this.popoverOpen()) this.host.hidePopover();
+			parent.appendChild(this.host);
+		}
+		if (this.host.hasAttribute("popover") && (moved || dialog !== this.dialog || !this.popoverOpen())) try {
+			if (this.popoverOpen()) this.host.hidePopover();
+			this.host.showPopover();
+		} catch {}
+		this.dialog = dialog;
+		if (top !== this.modal) {
+			this.modal = top;
+			this.dirtyAnchors = true;
+			this.schedule();
+		}
+	}
+	popoverOpen() {
+		try {
+			return this.host.matches(":popover-open");
+		} catch {
+			return false;
+		}
+	}
+	setActive(on) {
+		if (on === this.active) return;
+		this.active = on;
+		const f = on ? "addEventListener" : "removeEventListener";
+		window[f]("resize", this.onResize);
+		document[f]("scroll", this.onScroll, { capture: true });
+		document[f]("load", this.onLoaded, { capture: true });
+		window[f]("popstate", this.onRoute);
+		window[f]("hashchange", this.onRoute);
+		window[f]("annotate-anything:route", this.onRoute);
+		document[f]("visibilitychange", this.onVisible);
+		if (on) {
+			patchHistory();
+			this.layoutObserver.observe(document.documentElement, {
+				subtree: true,
+				childList: true,
+				attributes: true,
+				attributeFilter: LAYOUT_ATTRS
+			});
+		} else {
+			this.layoutObserver.disconnect();
+			for (const root of this.roots) if (root.nodeType === 9) {
+				root.removeEventListener("scroll", this.onScroll, { capture: true });
+				root.defaultView?.removeEventListener("resize", this.onScroll);
+			}
+			this.roots.clear();
+		}
+	}
+	setKeys(on) {
+		if (on === this.keysOn) return;
+		this.keysOn = on;
+		if (on) window.addEventListener("keydown", this.onKey, true);
+		else window.removeEventListener("keydown", this.onKey, true);
+	}
+	onResize = () => {
+		this.schedule();
+		if (this.open) this.placeBar();
+	};
+	onScroll = () => this.schedule();
+	onLoaded = () => {
+		this.dirtyAnchors = true;
+		this.schedule();
+	};
+	onVisible = () => {
+		if (!document.hidden && this.transport.kind === "http") this.pull();
+	};
+	onRoute = () => {
+		const r = this.routeOf();
+		if (r === this.route) return;
+		this.route = r;
+		this.dirtyAnchors = true;
+		this.render();
+	};
+	onKey = (e) => {
+		if (e.key !== "Escape" || !(this.open || this.panel)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (this.panel) this.dismissPanel();
+		else if (this.picking) {
+			this.picking = null;
+			this.renderBar();
+		} else if (this.confirming) {
+			this.confirming = false;
+			this.renderBar();
+		} else if (this.listOpen) {
+			this.listOpen = false;
+			this.renderBar();
+		} else if (this.mode) this.setMode(this.mode);
+		else this.toggleOpen();
+	};
+	render() {
+		this.setActive(this.open || this.notes.length > 0);
+		this.setKeys(this.open || !!this.panel);
+		this.renderMarks();
+		this.renderBar();
+		this.renderLauncher();
+		this.renderLayer();
+	}
+	schedule() {
+		if (!this.raf) this.raf = requestAnimationFrame(() => this.frame());
+	}
+	frame() {
+		this.raf = 0;
+		if (this.dirtyAnchors) {
+			this.dirtyAnchors = false;
+			this.found.clear();
+		}
+		this.position();
+	}
+	elementFor(note) {
+		let el = this.found.get(note.id);
+		if (el === void 0 || el && !el.isConnected) {
+			el = find(note, this.host, this.attrs);
+			this.found.set(note.id, el);
+			if (el) this.watchRoots(el);
+		}
+		return el;
+	}
+	watchRoots(el) {
+		if (!this.active) return;
+		for (const root of rootsOf(el)) {
+			if (this.roots.has(root)) continue;
+			this.roots.add(root);
+			this.layoutObserver.observe(root, {
+				subtree: true,
+				childList: true,
+				attributes: true,
+				attributeFilter: LAYOUT_ATTRS
+			});
+			if (root.nodeType === 9) {
+				root.addEventListener("scroll", this.onScroll, {
+					capture: true,
+					passive: true
+				});
+				root.defaultView?.addEventListener("resize", this.onScroll);
+			}
+		}
+	}
+	placed(note) {
+		const el = this.elementFor(note);
+		const p = place(note, el);
+		if (this.modal && !(el && within(this.modal, el))) p.hidden = true;
+		return p;
+	}
+	visibleNotes() {
+		if (!this.showMarks || !this.ready) return [];
+		return this.notes.filter((n) => n.route === this.route);
+	}
+	renderMarks() {
+		const shown = this.visibleNotes();
+		const p = this.panel;
+		let html = shown.sort((a, b) => a.n - b.n).map((n) => (n.kind !== "pin" ? `<div class="area ${n.status}" data-area="${esc(n.id)}"></div>` : "") + `<button type="button" class="mark k-${n.kind} ${n.status}${digits(n.n)}" data-id="${esc(n.id)}" title="${esc(n.comment)}" aria-label="Note ${n.n}"><span>${n.status === "resolved" ? "✓" : n.n}</span></button>`).join("");
+		if (p?.isNew) html += (p.note.kind !== "pin" ? "<div class=\"area\" data-area=\"new\"></div>" : "") + `<button type="button" class="mark k-${p.note.kind} current${digits(p.note.n)}" data-id="new" aria-label="New note"><span>${p.note.n}</span></button>`;
+		if (html !== this.marksHtml) {
+			this.marksHtml = html;
+			this.marks.innerHTML = html;
+		}
+		this.position();
+		this.celebrate();
+	}
+	celebrate() {
+		const seen = /* @__PURE__ */ new Map();
+		for (const n of this.notes) {
+			seen.set(n.id, n.status);
+			if (n.status !== "resolved" || !this.lastStatus.has(n.id) || this.lastStatus.get(n.id) === "resolved") continue;
+			const mark = this.marks.querySelector(`[data-id="${CSS.escape(n.id)}"]`);
+			if (!mark || mark.hidden) continue;
+			const r = mark.getBoundingClientRect();
+			const burst = document.createElement("div");
+			burst.className = "burst";
+			burst.style.left = r.left + r.width / 2 - 11 + "px";
+			burst.style.top = r.top + r.height / 2 - 11 + "px";
+			this.marks.parentElement.append(burst);
+			setTimeout(() => burst.remove(), 800);
+		}
+		this.lastStatus = seen;
+	}
+	position() {
+		for (const m of this.marks.querySelectorAll("[data-id]")) {
+			const id = m.dataset.id;
+			const n = id === "new" ? this.panel?.note : this.notes.find((x) => x.id === id);
+			if (!n) continue;
+			const r = id === "new" ? this.newRect(n) : this.placed(n);
+			const area = this.marks.querySelector(`[data-area="${CSS.escape(id)}"]`);
+			m.hidden = r.hidden;
+			m.style.left = r.x + "px";
+			m.style.top = r.y + "px";
+			m.classList.toggle("detached", !r.ok);
+			m.classList.toggle("current", !!this.panel && (id === "new" || this.panel.note.id === n.id));
+			if (area) {
+				area.hidden = r.hidden;
+				Object.assign(area.style, {
+					left: r.x + "px",
+					top: r.y + "px",
+					width: r.width + "px",
+					height: r.height + "px"
+				});
+				area.classList.toggle("detached", !r.ok);
+			}
+		}
+		if (this.panel) this.placePanel();
+	}
+	newRect(n) {
+		const el = this.found.get(n.id) ?? null;
+		return place(n, el && el.isConnected ? el : null);
+	}
+	placePanel() {
+		const p = this.panel;
+		const r = p.isNew ? this.newRect(p.note) : this.placed(p.note);
+		const w = Math.min(PANEL_W, innerWidth - 16);
+		const h = this.panelEl.offsetHeight;
+		let left = r.x + r.width + 14;
+		if (left + w > innerWidth - 8) left = r.x - w - 14;
+		if (left < 8 || left + w > innerWidth - 8) left = Math.max(8, Math.min(r.x, innerWidth - w - 8));
+		let top = Math.min(Math.max(8, r.y - 8), innerHeight - h - 8);
+		if (r.hidden) top = innerHeight / 3;
+		Object.assign(this.panelEl.style, {
+			left: left + "px",
+			top: Math.max(8, top) + "px",
+			width: w + "px"
+		});
+	}
+	statusText() {
+		if (this.msg) return this.msg;
+		if (this.intro) return this.intro;
+		if (this.mode) return HINT[this.mode];
+		const u = this.unsent().length;
+		const t = this.transport.kind;
+		if (t === "http" && !this.connected) return "Saved in this browser · server unreachable, retrying";
+		if (u && t === "clipboard") return `${plural(u, "note")} ready · Copy puts them on your clipboard`;
+		if (u && t === "local") return `${plural(u, "note")} saved in this browser · no agent connection`;
+		if (u) return `${plural(u, "note")} waiting · press Send`;
+		if (t === "local") return "No agent connection · notes stay in this browser";
+		if (t === "clipboard") return "Copy mode · Copy puts your notes on the clipboard to paste into your agent";
+		if (this.needsAgent()) return this.lastSent ? `Sent at ${clock(this.lastSent)} · no agent attached` : "No agent attached";
+		if (this.lastSent) return `Sent at ${clock(this.lastSent)}`;
+		if (this.watching) return `Connected · ${this.who()} is listening`;
+		return this.offers ? "Connected · Send lets you pick an agent" : "Connected · no agent attached yet";
+	}
+	unheard(n) {
+		return n.status === "sent" && !n.pickedUpAt && this.transport.kind === "http" && !this.watching && !this.delivered;
+	}
+	get offers() {
+		return this.targets.length > 0;
+	}
+	lastTarget() {
+		if (this.transport.kind !== "http") return void 0;
+		const id = read(this.keys.target, "");
+		return this.targets.find((t) => t.id === id);
+	}
+	noAgent() {
+		return this.offers ? "no agent has it · open the note to send it to one" : "no agent attached";
+	}
+	watchCmd() {
+		return this.options.watchCommand ?? "npx annotate-anything attach";
+	}
+	agentPrompt() {
+		return `Run \`${this.watchCmd()}\` in this project, in the background if you can, and follow what it prints.`;
+	}
+	needsAgent() {
+		return this.transport.kind === "http" && this.connected && !this.watching && !this.delivered && !this.offers;
+	}
+	copyHtml() {
+		return `<button type="button" class="copy" data-act="copy-prompt" aria-label="Copy prompt for your agent" title="${esc(this.agentPrompt())}">${ICON.copy}<span>Copy prompt</span></button>`;
+	}
+	unheardOnly() {
+		const sent = this.notes.filter((n) => n.status === "sent");
+		return !this.busy && sent.length > 0 && sent.every((n) => this.unheard(n)) && !this.notes.some((n) => n.status === "working");
+	}
+	async copyPrompt(b) {
+		try {
+			await navigator.clipboard.writeText(this.agentPrompt());
+		} catch {
+			this.flash("Your browser blocked copying. Select the prompt and copy it yourself.");
+			return;
+		}
+		const label = b.getAttribute("aria-label");
+		b.innerHTML = `${ICON.check}<span>Copied</span>`;
+		b.classList.add("copied");
+		b.setAttribute("aria-label", "Copied");
+		setTimeout(() => {
+			b.innerHTML = `${ICON.copy}<span>Copy prompt</span>`;
+			b.classList.remove("copied");
+			b.setAttribute("aria-label", label);
+		}, 1500);
+	}
+	busyText() {
+		if (this.busy) return this.transport.kind === "clipboard" ? "Copying…" : `Sending to ${this.who()}…`;
+		const working = this.notes.filter((n) => n.status === "working");
+		if (working.length) {
+			const latest = working.filter((n) => n.reply).sort((a, b) => b.updatedAt > a.updatedAt ? 1 : -1)[0];
+			return `${this.who(true)} is working on ${plural(working.length, "note")}` + (latest?.reply ? ` · ${latest.reply}` : "");
+		}
+		const sent = this.notes.filter((n) => n.status === "sent");
+		if (!sent.length) return "";
+		const picked = sent.filter((n) => n.pickedUpAt);
+		if (picked.length) return `${this.who(true)} picked up ${plural(picked.length, "note")} at ${clock(picked.map((n) => n.pickedUpAt).sort().at(-1))} · starting soon`;
+		const at = sent.map((n) => n.sentAt ?? "").sort().at(-1);
+		return this.watching || this.delivered ? `Sent to ${this.who()} at ${clock(at)} · waiting for ${this.who()} to pick it up` : `Sent at ${clock(at)} · ${this.noAgent()}`;
+	}
+	agentName() {
+		return this.options.agentName ?? this.agentFromServer;
+	}
+	who(start = false) {
+		return this.agentName() ?? (start ? "Your agent" : "your agent");
+	}
+	stateLabel(n) {
+		if (n.status === "open") return "not sent";
+		if (n.status === "resolved") return "done";
+		if (n.status === "working") return `${this.who()} working`;
+		return n.pickedUpAt ? "picked up" : "sent";
+	}
+	slideTool() {
+		const tool = this.bar.querySelector(".tool[data-mode].on");
+		const was = this.toolRect;
+		this.toolRect = tool ? tool.getBoundingClientRect() : null;
+		if (!tool || !was || !this.toolRect || Math.abs(was.left - this.toolRect.left) < 1) return;
+		if (matchMedia("(prefers-reduced-motion:reduce)").matches) return;
+		tool.animate([{
+			transform: `translateX(${was.left - this.toolRect.left}px) scaleX(${was.width / this.toolRect.width})`,
+			transformOrigin: "left"
+		}, {
+			transform: "none",
+			transformOrigin: "left"
+		}], {
+			duration: 240,
+			easing: "cubic-bezier(.2,1.1,.3,1)",
+			pseudoElement: "::before"
+		});
+	}
+	renderBar() {
+		const opening = this.open && this.bar.hidden;
+		this.bar.hidden = !this.open;
+		if (!this.open) {
+			this.toolRect = null;
+			return;
+		}
+		if (opening) {
+			this.bar.classList.add("opening");
+			setTimeout(() => this.bar.classList.remove("opening"), 650);
+		}
+		const u = this.unsent().length;
+		const d = this.done().length;
+		const copy = this.transport.kind === "clipboard";
+		const canSend = u > 0 && !this.busy && (this.transport.sends || copy) && (this.transport.kind !== "http" || this.ready);
+		const tool = (k) => `<button type="button" class="tool${this.mode === k ? " on" : ""}" data-mode="${k}" aria-pressed="${this.mode === k}" title="${TOOL_TITLE[k]}">${ICON[k]}${KIND_LABEL[k]}</button>`;
+		const sorted = [...this.notes].sort((a, b) => a.n - b.n);
+		const to = this.lastTarget();
+		const picker = this.picking ? `<div class="phead">Send to</div><ul class="list pick" aria-label="Send to">${this.picking.length ? this.picking.map((t) => `<li data-target="${esc(t.id)}" tabindex="0"${t.id === to?.id ? " aria-current=\"true\"" : ""}><span class="ltext">${esc(t.label)}</span>${t.detail ? `<span class="lstate">${esc(t.detail)}</span>` : ""}${t.id === to?.id ? `<span class="current">${ICON.check}</span>` : ""}</li>`).join("") : "<li class=\"empty\">Loading agents…</li>"}</ul>` : "";
+		const list = picker ? picker : this.listOpen ? `<ul class="list" aria-label="Notes">${sorted.length ? sorted.map((n) => `<li data-note="${esc(n.id)}" tabindex="0"><span class="dot ${n.status}${digits(n.n)}">${n.status === "resolved" ? "✓" : n.n}</span><span class="ltext">${esc(n.comment)}</span><span class="lstate">${n.route !== this.route ? esc(n.route) + " · " : ""}${esc(this.stateLabel(n))}</span></li>`).join("") : "<li class=\"empty\">No notes yet. Pick Pin, Element or Area.</li>"}</ul>` + (sorted.length ? this.confirming ? `<div class="confirm" role="alertdialog" aria-label="Clear all notes"><p>Delete all ${plural(sorted.length, "note")}? This can't be undone.</p><button type="button" class="btn" data-act="keep">Keep</button><button type="button" class="btn primary" data-act="clear-all">Clear all</button></div>` : "<div class=\"lfoot\"><button type=\"button\" class=\"btn danger\" data-act=\"confirm-clear\">Clear all…</button></div>" : "") : "";
+		const busy = this.busyText();
+		const barHtml = `<div class="tools">${tool("pin")}${tool("element")}${tool("area")}<span class="sep"></span><button type="button" class="tool${this.listOpen ? " on" : ""}" data-act="list" aria-pressed="${this.listOpen}" title="All notes" aria-label="All notes">${ICON.list}${this.notes.length}</button><button type="button" class="tool icon${this.showMarks ? "" : " on"}" data-act="marks" title="${this.showMarks ? "Hide marks" : "Show marks"}" aria-label="${this.showMarks ? "Hide marks" : "Show marks"}">${this.showMarks ? ICON.eye : ICON.eyeOff}</button><span class="sep"></span><button type="button" class="tool" data-act="clear-done" ${d ? "" : "disabled"} title="Remove notes that are done">Clear done<span class="count">${d}</span></button><span class="split"><button type="button" class="send" data-act="send" ${canSend ? "" : "disabled"} title="${copy ? "Copy unsent notes to the clipboard" : to ? `Send unsent notes to ${esc(to.label)}` : this.transport.sends ? "Send unsent notes to your agent" : "No agent connection"}">${copy ? "Copy" : to ? `<span class="to">Send to ${esc(to.label)}</span>` : "Send"}<span class="count">${u}</span></button>` + (to ? `<button type="button" class="send more" data-act="pick" ${canSend ? "" : "disabled"} aria-label="Send to another agent" aria-expanded="${!!this.picking}" title="Send to another agent">${ICON.caret}</button>` : "") + "</span><span class=\"slot\"><slot name=\"controls\"></slot></span></div><div class=\"rows\">" + (busy && !(this.needsAgent() && this.unheardOnly()) ? `<div class="busy" role="status"><i class="spinner"></i><span>${esc(busy)}</span></div>` : "") + `<div class="status"><span role="status">${esc(this.statusText())}</span>${this.needsAgent() ? this.copyHtml() : ""}</div>` + list + `</div>`;
+		if (barHtml !== this.barHtml) {
+			this.barHtml = barHtml;
+			this.bar.innerHTML = barHtml;
+		}
+		this.placeBar();
+		this.slideTool();
+	}
+	launcherXY() {
+		const l = this.launcher;
+		return {
+			x: l.offsetLeft,
+			y: l.offsetTop,
+			w: l.offsetWidth || 44,
+			h: l.offsetHeight || 44
+		};
+	}
+	placeBar() {
+		const { x, y, w, h } = this.launcherXY();
+		const s = this.bar.style;
+		s.top = s.bottom = s.left = s.right = "";
+		const above = y >= innerHeight / 2;
+		this.bar.classList.toggle("up", above);
+		if (above) s.bottom = innerHeight - y + 10 + "px";
+		else s.top = y + h + 10 + "px";
+		const side = x > innerWidth / 2 ? Math.max(8, innerWidth - x - w) : Math.max(8, x);
+		s[x > innerWidth / 2 ? "right" : "left"] = side + "px";
+		s.maxWidth = `calc(100vw - ${side + 8}px)`;
+	}
+	placeLauncher() {
+		const pos = read(this.keys.pos, null);
+		this.launcher.classList.toggle("placed", !!pos);
+		if (pos) {
+			this.launcher.style.setProperty("--fx", String(pos.fx));
+			this.launcher.style.setProperty("--fy", String(pos.fy));
+		} else {
+			this.launcher.style.removeProperty("--fx");
+			this.launcher.style.removeProperty("--fy");
+		}
+	}
+	renderLauncher() {
+		const u = this.unsent().length;
+		const badge = this.launcher.querySelector(".badge");
+		badge.hidden = !(u && !this.open);
+		badge.textContent = String(u);
+		const busy = this.busyText();
+		this.launcher.classList.toggle("on", this.open);
+		this.launcher.classList.toggle("busy", !!busy);
+		this.launcher.setAttribute("aria-expanded", String(this.open));
+		this.launcher.title = (busy ? busy + " · " : "") + "Annotate the UI (drag to move · double-click to reset)";
+	}
+	renderLayer() {
+		const on = !!this.panel || this.open && !!this.mode;
+		this.layer.hidden = !on;
+		if (!on || this.panel) this.hoverBox.hidden = true;
+	}
+	flash(m) {
+		this.msg = m;
+		clearTimeout(this.msgTimer);
+		this.msgTimer = window.setTimeout(() => {
+			this.msg = null;
+			this.renderBar();
+		}, 6e3);
+		this.renderBar();
+	}
+	setMode(m) {
+		this.mode = this.mode === m ? null : m;
+		this.intro = null;
+		this.listOpen = false;
+		this.confirming = false;
+		this.hoverBox.hidden = true;
+		this.render();
+	}
+	toggleOpen() {
+		if (this.panel && this.isDirty()) return this.nudge();
+		this.open = !this.open;
+		if (this.open && this.transport.targets) this.transport.targets().then((t) => {
+			this.targets = t;
+			this.renderBar();
+		}).catch(() => {});
+		if (!this.open) {
+			this.mode = null;
+			this.listOpen = false;
+			this.confirming = false;
+			this.intro = null;
+			if (this.panel) this.closePanel();
+		}
+		this.render();
+		this.poll();
+	}
+	newNote(kind, el, x, y, area) {
+		const r = rectOf(el);
+		const bounds = {
+			x: r.left,
+			y: r.top,
+			width: r.width,
+			height: r.height
+		};
+		const n = Math.max(0, ...this.notes.map((n) => n.n)) + 1;
+		const t = now();
+		let context = {};
+		try {
+			context = this.options.context?.() ?? {};
+		} catch {}
+		return {
+			id: uuid(),
+			n,
+			origin: location.origin,
+			kind,
+			route: this.route,
+			comment: "",
+			createdAt: t,
+			updatedAt: t,
+			status: "open",
+			selector: cssPath(el),
+			testId: stableAttr(el, this.attrs),
+			tag: el.tagName.toLowerCase(),
+			targetText: textOf(el),
+			x,
+			y,
+			bounds,
+			offset: area ? {
+				x: area.x - r.left,
+				y: area.y - r.top,
+				width: area.width,
+				height: area.height
+			} : void 0,
+			scroll: {
+				x: scrollX,
+				y: scrollY
+			},
+			viewport: {
+				width: innerWidth,
+				height: innerHeight
+			},
+			inDialog: inDialog(el),
+			context
+		};
+	}
+	openPanel(note, isNew, el) {
+		this.listOpen = false;
+		this.confirming = false;
+		this.hoverBox.hidden = true;
+		this.panel = {
+			note,
+			isNew
+		};
+		if (el) {
+			this.found.set(note.id, el);
+			this.watchRoots(el);
+		}
+		const n = note;
+		const head = `<div class="head"><span class="chip ${n.status}">#${n.n} · ${KIND_LABEL[n.kind]}</span><span class="target" title="${esc(n.selector)}">${esc(n.tag || "page")}${n.targetText ? " · “" + esc(n.targetText.slice(0, 60)) + "”" : ""}</span><button type="button" class="x" data-act="close" aria-label="Close">×</button></div>`;
+		if (n.status === "open") this.panelEl.innerHTML = head + `<textarea class="input" rows="4" placeholder="What should change here?" aria-label="Note">${esc(n.comment)}</textarea><div class="foot">${isNew ? "" : `<button type="button" class="btn trash danger" data-act="delete" aria-label="Delete note" title="Delete note">${ICON.trash}</button>`}<span class="hint">⌘↵ to save</span><button type="button" class="btn primary" data-act="save">Save</button></div>`;
+		else {
+			const progress = n.status === "working" ? n.reply || `${this.who(true)} is working on this.` : n.status === "sent" ? n.pickedUpAt ? `${this.who(true)} picked this up at ${clock(n.pickedUpAt)}.` : this.unheard(n) ? this.offers ? `Sent at ${clock(n.sentAt)}. No agent has it yet.` : `Sent at ${clock(n.sentAt)}. No agent is attached yet.` : `Sent to ${this.who()} at ${clock(n.sentAt)}, waiting for ${this.who()} to pick it up.` : "";
+			this.panelEl.innerHTML = head + `<p class="comment">${esc(n.comment)}</p>` + (n.reply && n.status === "resolved" ? `<div class="reply"><b>${esc(this.agentName() ?? "Agent")}</b>${esc(n.reply)}</div>` : "") + (progress ? `<div class="waiting"><i class="spinner"></i><span role="status">${esc(progress)}</span>${this.unheard(n) && !this.offers ? this.copyHtml() : ""}</div>` : "") + `<div class="foot"><button type="button" class="btn trash danger" data-act="delete" aria-label="Delete note" title="Delete note">${ICON.trash}</button><span class="hint"></span>${n.status === "resolved" ? "<button type=\"button\" class=\"btn\" data-act=\"reopen\">Reopen</button>" : this.offers && this.unheard(n) ? "<button type=\"button\" class=\"btn primary\" data-act=\"resend\">Send to an agent</button>" : "<button type=\"button\" class=\"btn\" data-act=\"done\">Mark done</button>"}</div>`;
+		}
+		this.panelEl.hidden = false;
+		this.syncSave();
+		this.render();
+		const ta = this.panelEl.querySelector("textarea");
+		if (ta) {
+			const f = () => {
+				ta.focus();
+				ta.setSelectionRange(ta.value.length, ta.value.length);
+			};
+			f();
+			setTimeout(f, 0);
+		}
+	}
+	closePanel() {
+		if (this.panel?.isNew) this.found.delete(this.panel.note.id);
+		this.panel = null;
+		this.panelEl.hidden = true;
+		this.panelEl.innerHTML = "";
+		this.render();
+	}
+	panelText() {
+		return this.panelEl.querySelector("textarea")?.value.trim() ?? "";
+	}
+	isDirty() {
+		const p = this.panel;
+		return !!p && p.note.status === "open" && this.panelText() !== "" && this.panelText() !== p.note.comment;
+	}
+	syncSave() {
+		const b = this.panelEl.querySelector("[data-act=\"save\"]");
+		if (b) b.disabled = !this.panelText();
+	}
+	commitPanel() {
+		const p = this.panel;
+		if (!p) return;
+		const text = this.panelText();
+		if (!text) return this.closePanel();
+		if (p.isNew) {
+			const el = this.found.get(p.note.id);
+			this.notes.push({
+				...p.note,
+				comment: text,
+				updatedAt: now()
+			});
+			this.panel = null;
+			if (el) this.found.set(p.note.id, el);
+			this.flash(`Note ${p.note.n} saved. ${this.transport.kind === "clipboard" ? "Copy" : "Send"} when you're done.`);
+		} else if (text !== p.note.comment) {
+			const n = this.notes.find((x) => x.id === p.note.id);
+			if (n) {
+				n.comment = text;
+				n.updatedAt = now();
+			}
+		}
+		this.panel = null;
+		this.panelEl.hidden = true;
+		this.panelEl.innerHTML = "";
+		this.changed();
+	}
+	dismissPanel() {
+		if (this.isDirty()) this.commitPanel();
+		else this.closePanel();
+	}
+	nudge() {
+		const h = this.panelEl.querySelector(".hint");
+		if (h) {
+			h.textContent = "Save or press Esc first";
+			h.classList.add("nudge");
+			clearTimeout(this.nudgeTimer);
+			this.nudgeTimer = window.setTimeout(() => {
+				h.textContent = "⌘↵ to save";
+				h.classList.remove("nudge");
+			}, 1600);
+		}
+		this.panelEl.querySelector("textarea")?.focus();
+	}
+	panelAction(a) {
+		const p = this.panel;
+		if (a === "close") return this.dismissPanel();
+		if (a === "save") return this.commitPanel();
+		if (!p) return;
+		const note = this.notes.find((n) => n.id === p.note.id);
+		if (a === "delete") {
+			this.closePanel();
+			if (!p.isNew) this.remove([p.note.id]);
+			return;
+		}
+		if (!note) return;
+		if (a === "resend") {
+			this.closePanel();
+			this.setStatus(note, "open");
+			this.pick();
+			return;
+		}
+		if (a === "done" || a === "reopen") {
+			this.setStatus(note, a === "done" ? "resolved" : "open");
+			if (a === "reopen") this.openPanel(note, false);
+			else this.closePanel();
+		}
+	}
+	async focusNote(n) {
+		if (n.route !== this.route) {
+			await (this.options.navigate ?? defaultNavigate)(n.route);
+			this.onRoute();
+			await new Promise((r) => setTimeout(r, 400));
+		}
+		this.found.delete(n.id);
+		const el = this.elementFor(n);
+		if (el) el.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+		setTimeout(() => {
+			const fresh = this.notes.find((x) => x.id === n.id);
+			if (fresh) this.openPanel(fresh, false);
+		}, el ? 350 : 0);
+	}
+	async pick() {
+		if (this.picking) {
+			this.picking = null;
+			return this.renderBar();
+		}
+		if (!this.transport.targets) return this.send();
+		this.listOpen = this.confirming = false;
+		const last = read(this.keys.target, "");
+		const order = (list) => [...list].sort((a, b) => Number(b.id === last) - Number(a.id === last));
+		const focusRow = (id) => (this.bar.querySelector(`li[data-target="${CSS.escape(id ?? "")}"]`) ?? this.bar.querySelector("li[data-target]"))?.focus();
+		this.picking = order(this.targets);
+		this.renderBar();
+		focusRow();
+		let targets = this.targets;
+		try {
+			targets = await this.transport.targets();
+		} catch {}
+		if (!this.picking) return;
+		this.targets = targets;
+		if (!targets.length) {
+			this.picking = null;
+			return this.send();
+		}
+		const focused = this.shadow.activeElement?.dataset?.target;
+		this.picking = order(targets);
+		this.renderBar();
+		focusRow(focused);
+	}
+	async send(target) {
+		if (this.isDirty()) this.commitPanel();
+		const notes = this.unsent();
+		if (!notes.length || this.busy) return;
+		this.busy = true;
+		this.render();
+		try {
+			if (this.transport.kind === "http") {
+				const failed = await this.flush();
+				if (failed) throw new Error(failed);
+			}
+			const res = await this.transport.submit(notes, this.page(), target);
+			if (this.transport.kind === "http" && !res.submission) {
+				this.busy = false;
+				this.flash("Those notes were already sent.");
+				this.pull();
+				return;
+			}
+			this.busy = false;
+			if (this.transport.kind === "clipboard") this.flash(`Copied ${plural(notes.length, "note")} to the clipboard. Paste them into your agent.`);
+			else {
+				const t = res.submission?.submittedAt ?? now();
+				const ids = new Set(res.submission?.noteIds ?? notes.map((n) => n.id));
+				for (const n of this.notes) if (ids.has(n.id) && n.status === "open") {
+					n.status = "sent";
+					n.sentAt = t;
+				}
+				this.lastSent = t;
+				this.watching = res.watching;
+				this.delivered = !!res.delivery?.ok;
+				if (res.agent) this.agentFromServer = res.agent;
+				this.save();
+				const d = res.delivery;
+				const via = d ? d.ok ? ` to ${d.to}${d.detail ? ` (${d.detail})` : ""}` : `. ${d.to} didn't take it: ${d.detail ?? "unknown error"}` : "";
+				this.flash(res.delivery?.ok || res.watching ? `Sent ${plural(res.sent, "note")}${via || ` to ${this.who()}`}.` : `Sent ${plural(res.sent, "note")}${via}. No agent is attached yet.`);
+			}
+		} catch (e) {
+			this.busy = false;
+			this.flash(`${this.transport.kind === "clipboard" ? "Copy" : "Send"} failed: ${e.message}. Your notes are still here.`);
+		}
+		this.render();
+		this.poll();
+	}
+	wire() {
+		const layer = this.layer;
+		layer.addEventListener("mousedown", (e) => e.preventDefault());
+		layer.addEventListener("pointermove", (e) => {
+			if (this.panel) return;
+			if (this.drawing) {
+				this.drawing.x1 = e.clientX;
+				this.drawing.y1 = e.clientY;
+				const r = this.drawRect();
+				Object.assign(this.drawBox.style, {
+					left: r.x + "px",
+					top: r.y + "px",
+					width: r.width + "px",
+					height: r.height + "px"
+				});
+				this.drawBox.hidden = false;
+				return;
+			}
+			if (this.mode === "area" || e.pointerType === "touch") {
+				this.hoverBox.hidden = true;
+				return;
+			}
+			const el = elementAt(e.clientX, e.clientY, this.host);
+			if (!el) {
+				this.hoverBox.hidden = true;
+				return;
+			}
+			const r = rectOf(el);
+			Object.assign(this.hoverBox.style, {
+				left: r.left + "px",
+				top: r.top + "px",
+				width: r.width + "px",
+				height: r.height + "px"
+			});
+			this.hoverBox.classList.toggle("el", this.mode === "element");
+			this.hoverBox.firstElementChild.textContent = labelFor(el, this.attrs);
+			this.hoverBox.hidden = false;
+		});
+		layer.addEventListener("pointerleave", () => this.hoverBox.hidden = true);
+		layer.addEventListener("pointerdown", (e) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			if (this.panel) {
+				if (this.isDirty()) this.nudge();
+				else this.closePanel();
+				return;
+			}
+			if (this.mode === "area") {
+				this.drawing = {
+					x0: e.clientX,
+					y0: e.clientY,
+					x1: e.clientX,
+					y1: e.clientY
+				};
+				layer.setPointerCapture(e.pointerId);
+				return;
+			}
+			const el = elementAt(e.clientX, e.clientY, this.host);
+			if (!el) {
+				this.flash("Nothing here to note · click on part of the page");
+				return;
+			}
+			const r = rectOf(el);
+			if (this.mode === "pin") this.openPanel(this.newNote("pin", el, e.clientX, e.clientY), true, el);
+			else if (this.mode === "element") this.openPanel(this.newNote("element", el, r.left, r.top), true, el);
+		});
+		layer.addEventListener("pointerup", () => {
+			if (!this.drawing) return;
+			const rect = this.drawRect();
+			this.drawing = null;
+			this.drawBox.hidden = true;
+			if (rect.width < 12 || rect.height < 12) return;
+			const el = containing(elementAt(rect.x + rect.width / 2, rect.y + rect.height / 2, this.host), rect);
+			if (!el) return;
+			this.openPanel(this.newNote("area", el, rect.x, rect.y, rect), true, el);
+		});
+		layer.addEventListener("wheel", (e) => {
+			const target = scrollableAt(elementAt(e.clientX, e.clientY, this.host));
+			if (target) target.scrollBy(e.deltaX, e.deltaY);
+			else scrollBy(e.deltaX, e.deltaY);
+		}, { passive: true });
+		this.marks.addEventListener("click", (e) => {
+			const m = e.target.closest("[data-id]");
+			if (!m || m.dataset.id === "new") return;
+			const n = this.notes.find((x) => x.id === m.dataset.id);
+			if (!n) return;
+			if (this.panel && this.isDirty()) return this.nudge();
+			this.openPanel(n, false);
+		});
+		this.bar.addEventListener("click", (e) => {
+			const b = e.target.closest("button,li[data-note],li[data-target]");
+			if (!b || b.disabled || !this.bar.contains(b)) return;
+			if (b.dataset.mode) return this.setMode(b.dataset.mode);
+			if (b.dataset.note) {
+				const n = this.notes.find((x) => x.id === b.dataset.note);
+				if (n) this.focusNote(n);
+				return;
+			}
+			if (b.dataset.target !== void 0) {
+				const t = this.picking?.find((x) => x.id === b.dataset.target);
+				this.picking = null;
+				if (t) {
+					write(this.keys.target, t.id);
+					this.send(t);
+				} else this.renderBar();
+				return;
+			}
+			const a = b.dataset.act;
+			if (a === "copy-prompt") return void this.copyPrompt(b);
+			if (a === "list") {
+				this.listOpen = !this.listOpen;
+				this.confirming = false;
+				this.renderBar();
+			} else if (a === "marks") {
+				this.showMarks = !this.showMarks;
+				write(this.keys.marks, this.showMarks);
+				this.render();
+			} else if (a === "clear-done") {
+				const d = this.done();
+				if (d.length) {
+					this.remove(d.map((n) => n.id));
+					this.flash(`Cleared ${plural(d.length, "finished note")}.`);
+				}
+			} else if (a === "confirm-clear") {
+				this.confirming = true;
+				this.renderBar();
+			} else if (a === "keep") {
+				this.confirming = false;
+				this.renderBar();
+			} else if (a === "clear-all") {
+				const all = this.notes.map((n) => n.id);
+				this.confirming = false;
+				if (this.panel) this.closePanel();
+				this.remove(all);
+				this.flash(`Cleared ${plural(all.length, "note")}.`);
+			} else if (a === "send") {
+				const t = this.lastTarget();
+				t ? this.send(t) : this.pick();
+			} else if (a === "pick") this.pick();
+		});
+		this.bar.addEventListener("keydown", (e) => {
+			const li = e.target.closest("li[data-note],li[data-target]");
+			if (li && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				li.click();
+			}
+		});
+		this.panelEl.addEventListener("click", (e) => {
+			const b = e.target.closest("[data-act]");
+			if (b?.dataset.act === "copy-prompt") return void this.copyPrompt(b);
+			if (b && !b.disabled) this.panelAction(b.dataset.act);
+		});
+		this.panelEl.addEventListener("input", () => this.syncSave());
+		const root = this.q(".root");
+		const fromControls = (e) => e.composedPath().some((t) => t instanceof HTMLSlotElement);
+		root.addEventListener("keydown", (e) => {
+			if (fromControls(e)) return;
+			const k = e;
+			if (k.key === "Enter" && (k.metaKey || k.ctrlKey) && k.target.tagName === "TEXTAREA") {
+				k.preventDefault();
+				this.commitPanel();
+			}
+			if (k.key !== "Escape") e.stopPropagation();
+		});
+		for (const t of [
+			"click",
+			"dblclick",
+			"mousedown",
+			"mouseup",
+			"pointerdown",
+			"pointerup",
+			"contextmenu",
+			"keyup",
+			"keypress",
+			"input",
+			"focusin",
+			"focusout"
+		]) root.addEventListener(t, (e) => {
+			if (!fromControls(e)) e.stopPropagation();
+		});
+		const launcher = this.launcher;
+		launcher.addEventListener("pointerdown", (e) => {
+			if (e.button !== 0) return;
+			const { x, y } = this.launcherXY();
+			this.drag = {
+				sx: e.clientX,
+				sy: e.clientY,
+				bx: x,
+				by: y,
+				moved: false
+			};
+			launcher.setPointerCapture(e.pointerId);
+		});
+		launcher.addEventListener("pointermove", (e) => {
+			const d = this.drag;
+			if (!d) return;
+			const dx = e.clientX - d.sx;
+			const dy = e.clientY - d.sy;
+			if (!d.moved && Math.hypot(dx, dy) < 4) return;
+			d.moved = true;
+			launcher.classList.add("placed");
+			launcher.style.setProperty("--fx", String((d.bx + dx) / innerWidth));
+			launcher.style.setProperty("--fy", String((d.by + dy) / innerHeight));
+			if (this.open) this.placeBar();
+		});
+		launcher.addEventListener("pointerup", () => {
+			const d = this.drag;
+			if (!d) return;
+			this.drag = null;
+			if (d.moved) {
+				const { x, y } = this.launcherXY();
+				write(this.keys.pos, {
+					fx: x / innerWidth,
+					fy: y / innerHeight
+				});
+				this.placeLauncher();
+			} else this.toggleOpen();
+		});
+		launcher.addEventListener("pointercancel", () => this.drag = null);
+		launcher.addEventListener("dblclick", () => {
+			write(this.keys.pos, null);
+			this.placeLauncher();
+			if (this.open) this.placeBar();
+		});
+	}
+	drawRect() {
+		const d = this.drawing;
+		return {
+			x: Math.min(d.x0, d.x1),
+			y: Math.min(d.y0, d.y1),
+			width: Math.abs(d.x1 - d.x0),
+			height: Math.abs(d.y1 - d.y0)
+		};
+	}
+};
+function defaultNavigate(route) {
+	history.pushState(null, "", route);
+	dispatchEvent(new PopStateEvent("popstate", { state: null }));
+}
+var patched = false;
+function patchHistory() {
+	if (patched) return;
+	patched = true;
+	for (const name of ["pushState", "replaceState"]) {
+		const original = history[name];
+		history[name] = function(...args) {
+			const result = original.apply(this, args);
+			dispatchEvent(new Event("annotate-anything:route"));
+			return result;
+		};
+	}
+}
+// src/index.ts
+var current = null;
+function annotate(options = {}) {
+	if (current) return current.handle;
+	const allowed = options.enabled ?? LOCAL_HOST.test(location.hostname);
+	const noop = {
+		open() {},
+		close() {},
+		addControl() {},
+		setTheme() {},
+		destroy() {}
+	};
+	if (!allowed) {
+		console.info("annotate-anything: not starting outside local development. Pass { enabled: true } to turn it on here.");
+		return noop;
+	}
+	const state = {
+		annotator: null,
+		handle: noop
+	};
+	const queue = [];
+	let pendingOpen;
+	state.handle = {
+		open: (o) => state.annotator ? state.annotator.openTool(o) : pendingOpen = o ?? {},
+		close: () => state.annotator?.close(),
+		addControl: (el) => state.annotator ? state.annotator.addControl(el) : queue.push(el),
+		setTheme: (t) => state.annotator ? state.annotator.setTheme(t) : options.theme = t,
+		destroy: () => {
+			state.annotator?.destroy();
+			current = null;
+		}
+	};
+	const boot = () => {
+		if (current !== state) return;
+		state.annotator = new Annotator({
+			...options,
+			controls: [...options.controls ?? [], ...queue]
+		});
+		if (pendingOpen) state.annotator.openTool(pendingOpen);
+	};
+	current = state;
+	if (document.body) boot();
+	else document.addEventListener("DOMContentLoaded", boot, { once: true });
+	return state.handle;
+}
+export { markdown as a, local as i, clipboard as n, http as r, annotate as t };