@pasko70/pibo 1.4.1 → 1.4.3

package/dist/web-annotations/cdp.js

@@ -194,914 +194,914 @@ function createOverlaySubmissionToken() {
     return randomBytes(24).toString("base64url");
 }
 function buildDocumentReadyExpression() {
-    return String.raw `new Promise((resolve) => {
-  if (document.documentElement) {
-    resolve(true);
-    return;
-  }
-  const done = () => resolve(Boolean(document.documentElement));
-  document.addEventListener("DOMContentLoaded", done, { once: true });
-  setTimeout(done, 2000);
+    return String.raw `new Promise((resolve) => {
+  if (document.documentElement) {
+    resolve(true);
+    return;
+  }
+  const done = () => resolve(Boolean(document.documentElement));
+  document.addEventListener("DOMContentLoaded", done, { once: true });
+  setTimeout(done, 2000);
 })`;
 }
 function buildInjectExpression(config) {
     return buildWebAnnotationOverlayScript(JSON.stringify(config));
 }
 export function buildWebAnnotationOverlayScript(configExpression = "window.__piboWebAnnotationConfig") {
-    return String.raw `(() => {
-  const config = (${configExpression});
-  if (!config || !config.bindingId || !config.bindingToken) throw new Error("Pibo Web Annotation overlay config is missing bindingId or bindingToken");
-  const rootId = "pibo-web-annotation-overlay";
-  const outlineId = "pibo-web-annotation-outline";
-  const shortcutStorageKey = "pibo.chat.shortcuts.webAnnotationsToggle";
-  const overlayStateEventName = "pibo:web-annotation-overlay-state";
-  const overlayStateStoragePrefix = "pibo.chat.webAnnotations.overlay.";
-  const defaultAnnotationShortcut = "Alt+Shift+A";
-  const previous = window.__piboWebAnnotations;
-  if (previous && typeof previous.remove === "function") previous.remove();
-
-  const caps = {
-    note: 2000,
-    text: 500,
-    htmlHint: 400,
-    classSummary: 240,
-    accessibility: 240,
-    selector: 500,
-    domPath: 700,
-    sourceRaw: 800,
-  };
-  const state = {
-    active: false,
-    mode: "element",
-    hovered: null,
-    popup: null,
-    lastHoverAt: 0,
-    pendingFrame: 0,
-    dragMoved: false,
-    toolbarExpanded: false,
-    shortcut: parseShortcut(config.annotationShortcut || readStoredShortcut() || defaultAnnotationShortcut),
-    submissions: [],
-    lastError: null,
-  };
-
-  function publishOverlayState(reason, installed) {
-    const piboSessionId = String(config.piboSessionId || "");
-    const detail = {
-      bindingId: String(config.bindingId || ""),
-      piboSessionId,
-      installed: installed !== false,
-      active: installed !== false && Boolean(state.active),
-      toolbarExpanded: installed !== false && Boolean(state.toolbarExpanded),
-      mode: state.mode,
-      reason: String(reason || "state"),
-      updatedAt: new Date().toISOString(),
-    };
-    if (piboSessionId) {
-      try { window.localStorage && window.localStorage.setItem(overlayStateStoragePrefix + piboSessionId, JSON.stringify(detail)); } catch {}
-    }
-    try { window.dispatchEvent(new CustomEvent(overlayStateEventName, { detail })); } catch {}
-  }
-
-  function onPageHide() {
-    state.active = false;
-    publishOverlayState("pagehide", false);
-  }
-
-  const host = document.createElement("div");
-  host.id = rootId;
-  host.setAttribute("data-pibo-web-annotation-binding", config.bindingId);
-  host.style.cssText = "position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:2147483647;pointer-events:auto;color-scheme:light dark";
-  const shadow = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
-  const style = document.createElement("style");
-  style.textContent = [
-    ":host{all:initial;font:13px system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}",
-    "@keyframes pibo-wa-attention{0%{transform:scale(.72);opacity:.45;box-shadow:0 0 0 0 rgba(56,189,248,.7)}18%{transform:scale(1.22,.82);opacity:1}34%{transform:scale(.9,1.12)}52%{transform:scale(1.08,.94);box-shadow:0 0 0 12px rgba(56,189,248,.18)}72%{transform:scale(.98,1.02)}100%{transform:scale(1);opacity:1;box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 0 0 rgba(56,189,248,0)}}",
-    ".pibo-wa-panel{position:relative;width:50px;min-height:50px;color:#fff;font:13px system-ui,sans-serif;touch-action:none}",
-    ".pibo-wa-main,.pibo-wa-button{box-sizing:border-box;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.5);background:#111827;color:#dbeafe;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.36);cursor:pointer;user-select:none;line-height:0;padding:0;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}",
-    ".pibo-wa-main{border-color:#38bdf8;background:linear-gradient(180deg,#102334,#0f172a);color:#7dd3fc;cursor:grab}",
-    ".pibo-wa-main:active{cursor:grabbing}",
-    ".pibo-wa-main.pibo-wa-attention{animation:pibo-wa-attention .78s cubic-bezier(.2,.8,.2,1) both}",
-    "@media (prefers-reduced-motion:reduce){.pibo-wa-main.pibo-wa-attention{animation:none;box-shadow:0 0 0 3px rgba(56,189,248,.6),0 12px 32px rgba(0,0,0,.36)}}",
-    ".pibo-wa-main:hover,.pibo-wa-button:hover{border-color:#7dd3fc;color:#e0f2fe;background:#172033;transform:translateY(-1px)}",
-    ".pibo-wa-icon{width:22px;height:22px;display:block;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:0 0 auto}",
-    ".pibo-wa-actions{position:absolute;right:-2px;bottom:42px;display:flex;flex-direction:column;gap:7px;padding:0 2px 12px 2px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .12s ease,transform .12s ease}",
-    ".pibo-wa-actions::before{content:'';position:absolute;inset:0 -8px -12px -8px;z-index:-1}",
-    ".pibo-wa-panel:hover .pibo-wa-actions,.pibo-wa-panel:focus-within .pibo-wa-actions,.pibo-wa-panel.pibo-wa-active .pibo-wa-actions,.pibo-wa-panel.pibo-wa-expanded .pibo-wa-actions{opacity:1;pointer-events:auto;transform:translateY(0)}",
-    "@media (hover:none),(pointer:coarse){.pibo-wa-panel{width:54px;min-height:54px}.pibo-wa-main,.pibo-wa-button{width:52px;height:52px;border-radius:16px}.pibo-wa-actions,.pibo-wa-panel:hover .pibo-wa-actions,.pibo-wa-panel:focus-within .pibo-wa-actions,.pibo-wa-panel.pibo-wa-active .pibo-wa-actions{right:-1px;bottom:48px;gap:8px;opacity:0;pointer-events:none;transform:translateY(6px)}.pibo-wa-panel.pibo-wa-expanded .pibo-wa-actions{opacity:1;pointer-events:auto;transform:none}.pibo-wa-main:hover,.pibo-wa-button:hover{transform:none}}",
-    ".pibo-wa-button{background:#1f2937}",
-    ".pibo-wa-button[aria-pressed='true']{background:#2563eb;border-color:#93c5fd;color:#fff}",
-    ".pibo-wa-button-danger{background:#3f1418;border-color:#7f1d1d;color:#fecaca}",
-    ".pibo-wa-button-danger:hover{border-color:#ef4444;color:#fff;background:#7f1d1d}",
-    ".pibo-wa-status{display:none}",
-    ".pibo-wa-popup{box-sizing:border-box;position:fixed;z-index:2147483647;width:min(320px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#fff;color:#111827;border:1px solid #9ca3af;border-radius:12px;padding:10px;box-shadow:0 14px 36px rgba(0,0,0,.35);font:13px system-ui,sans-serif;overscroll-behavior:contain}",
-    ".pibo-wa-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}",
-    ".pibo-wa-popup textarea{box-sizing:border-box;width:100%;min-height:76px;margin:8px 0;border:1px solid #9ca3af;border-radius:8px;padding:8px;font:13px system-ui,sans-serif;color:#111827;background:#fff}",
-    "@media (max-width:480px){.pibo-wa-popup{width:calc(100vw - 24px);padding:12px}.pibo-wa-popup textarea{min-height:96px;font-size:16px}.pibo-wa-row .pibo-wa-button{width:auto;min-width:92px;height:40px;border-radius:10px;padding:0 12px;line-height:1}}",
-    ".pibo-wa-popup-label{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-  ].join("");
-  const panel = document.createElement("div");
-  panel.className = "pibo-wa-panel";
-  const actions = document.createElement("div");
-  actions.className = "pibo-wa-actions";
-  const toggle = button(iconSvg("edit"), "Toggle element annotation mode");
-  const pin = button(iconSvg("arrow-down-to-dot"), "Mark a point instead of an element");
-  const stop = button(iconSvg("x"), "Remove the Pibo annotation overlay");
-  stop.className += " pibo-wa-button-danger";
-  const main = document.createElement("button");
-  main.type = "button";
-  main.className = "pibo-wa-main";
-  main.innerHTML = iconSvg("book-a");
-  main.classList.add("pibo-wa-attention");
-  main.setAttribute("aria-label", shortcutTitle("Enable element annotation mode"));
-  main.title = shortcutTitle("Enable element annotation mode");
-  const status = document.createElement("div");
-  status.className = "pibo-wa-status";
-  actions.append(toggle, pin, stop);
-  panel.append(actions, main, status);
-  shadow.append(style, panel);
-  document.documentElement.appendChild(host);
-
-  const outline = document.createElement("div");
-  outline.id = outlineId;
-  outline.style.cssText = "position:fixed;z-index:2147483646;pointer-events:none;border:2px solid #2563eb;background:rgba(37,99,235,.10);box-shadow:0 0 0 9999px rgba(37,99,235,.04);display:none;border-radius:3px";
-  document.documentElement.appendChild(outline);
-
-  main.addEventListener("pointerdown", startDrag);
-  main.addEventListener("click", () => {
-    if (state.dragMoved) {
-      state.dragMoved = false;
-      return;
-    }
-    if (isCoarsePointer()) {
-      state.toolbarExpanded = !state.toolbarExpanded;
-      updateUi();
-      publishOverlayState("toolbar-toggle");
-      return;
-    }
-    state.active = true;
-    state.mode = "element";
-    closePopup();
-    updateUi();
-    publishOverlayState("main-button");
-  });
-  main.addEventListener("animationend", () => main.classList.remove("pibo-wa-attention"));
-  toggle.addEventListener("click", () => {
-    state.active = !state.active;
-    state.mode = "element";
-    state.toolbarExpanded = !state.active;
-    closePopup();
-    updateUi();
-    publishOverlayState("toggle");
-  });
-  pin.addEventListener("click", () => {
-    state.active = true;
-    state.mode = state.mode === "pin" ? "element" : "pin";
-    state.toolbarExpanded = false;
-    closePopup();
-    updateUi();
-    publishOverlayState("pin-toggle");
-  });
-  stop.addEventListener("click", () => api.remove());
-
-  function button(content, aria) {
-    const el = document.createElement("button");
-    el.type = "button";
-    el.className = "pibo-wa-button";
-    el.innerHTML = content;
-    el.setAttribute("aria-label", aria);
-    el.title = aria;
-    return el;
-  }
-
-  function iconSvg(name) {
-    const attrs = "class=\"pibo-wa-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"";
-    if (name === "book-a") return "<svg " + attrs + "><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><path d=\"m8 13 4-7 4 7\"/><path d=\"M9.1 11h5.7\"/></svg>";
-    if (name === "arrow-down-to-dot") return "<svg " + attrs + "><path d=\"M12 2v14\"/><path d=\"m19 9-7 7-7-7\"/><circle cx=\"12\" cy=\"21\" r=\"1\"/></svg>";
-    if (name === "x") return "<svg " + attrs + "><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>";
-    return "<svg " + attrs + "><path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"/></svg>";
-  }
-
-  function startDrag(event) {
-    if (event.button !== undefined && event.button !== 0) return;
-    const startX = event.clientX;
-    const startY = event.clientY;
-    const rect = host.getBoundingClientRect();
-    const originLeft = rect.left;
-    const originTop = rect.top;
-    state.dragMoved = false;
-    if (main.setPointerCapture) main.setPointerCapture(event.pointerId);
-    const onMove = (nextEvent) => {
-      const dx = nextEvent.clientX - startX;
-      const dy = nextEvent.clientY - startY;
-      if (!state.dragMoved && Math.hypot(dx, dy) < 4) return;
-      state.dragMoved = true;
-      nextEvent.preventDefault();
-      const viewport = viewportMetrics();
-      const left = clamp(originLeft + dx, viewport.left + 8, viewport.left + viewport.width - rect.width - 8);
-      const top = clamp(originTop + dy, viewport.top + 8, viewport.top + viewport.height - rect.height - 8);
-      host.style.left = left + "px";
-      host.style.top = top + "px";
-      host.style.right = "auto";
-      host.style.bottom = "auto";
-    };
-    const onUp = () => {
-      window.removeEventListener("pointermove", onMove, true);
-      window.removeEventListener("pointerup", onUp, true);
-      window.removeEventListener("pointercancel", onUp, true);
-      ensureHostInViewport();
-    };
-    window.addEventListener("pointermove", onMove, true);
-    window.addEventListener("pointerup", onUp, true);
-    window.addEventListener("pointercancel", onUp, true);
-  }
-
-  function updateUi(message) {
-    const title = isCoarsePointer() ? (state.toolbarExpanded ? "Hide annotation controls" : "Show annotation controls") : shortcutTitle("Enable element annotation mode");
-    main.setAttribute("aria-label", title);
-    main.setAttribute("aria-expanded", state.toolbarExpanded ? "true" : "false");
-    main.title = title;
-    toggle.title = shortcutTitle("Toggle element annotation mode");
-    toggle.setAttribute("aria-label", shortcutTitle("Toggle element annotation mode"));
-    toggle.setAttribute("aria-pressed", state.active && state.mode === "element" ? "true" : "false");
-    pin.setAttribute("aria-pressed", state.active && state.mode === "pin" ? "true" : "false");
-    panel.classList.toggle("pibo-wa-active", state.active);
-    panel.classList.toggle("pibo-wa-expanded", state.toolbarExpanded);
-    outline.style.display = state.active && state.mode === "element" && state.hovered ? "block" : "none";
-    status.textContent = message || (state.active ? (state.mode === "pin" ? "Pin mode: click anywhere to mark a point." : "Element mode: hover and click a visible target.") : "Inactive: page clicks and typing pass through normally.");
-  }
-
-  function isCoarsePointer() {
-    return Boolean(window.matchMedia && window.matchMedia("(hover: none), (pointer: coarse)").matches);
-  }
-
-  function readStoredShortcut() {
-    try { return window.localStorage && window.localStorage.getItem(shortcutStorageKey); } catch { return ""; }
-  }
-
-  function parseShortcut(value) {
-    const label = String(value || defaultAnnotationShortcut).trim() || defaultAnnotationShortcut;
-    const parts = label.split("+").map((part) => part.trim()).filter(Boolean);
-    const shortcut = { alt: false, ctrl: false, meta: false, shift: false, key: "a", label: defaultAnnotationShortcut };
-    for (const part of parts) {
-      const lower = part.toLowerCase();
-      if (lower === "alt" || lower === "option") shortcut.alt = true;
-      else if (lower === "ctrl" || lower === "control") shortcut.ctrl = true;
-      else if (lower === "cmd" || lower === "command" || lower === "meta") shortcut.meta = true;
-      else if (lower === "shift") shortcut.shift = true;
-      else shortcut.key = normalizeShortcutKey(part);
-    }
-    shortcut.label = shortcutLabel(shortcut);
-    return shortcut;
-  }
-
-  function normalizeShortcutKey(value) {
-    const key = String(value || "a").trim();
-    if (key === " ") return "Space";
-    if (key.length === 1) return key.toLowerCase();
-    return key.toLowerCase() === "space" ? "Space" : key;
-  }
-
-  function shortcutLabel(shortcut) {
-    const parts = [];
-    if (shortcut.ctrl) parts.push("Ctrl");
-    if (shortcut.alt) parts.push("Alt");
-    if (shortcut.shift) parts.push("Shift");
-    if (shortcut.meta) parts.push("Meta");
-    parts.push(shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key);
-    return parts.join("+");
-  }
-
-  function shortcutTitle(label) {
-    return label + " (" + state.shortcut.label + ")";
-  }
-
-  function matchesShortcut(event) {
-    const key = normalizeShortcutKey(event.key || "");
-    const expected = String(state.shortcut.key);
-    const keyMatches = key.toLowerCase() === expected.toLowerCase()
-      || (expected.length === 1 && event.code === "Key" + expected.toUpperCase());
-    return keyMatches
-      && Boolean(event.altKey) === state.shortcut.alt
-      && Boolean(event.ctrlKey) === state.shortcut.ctrl
-      && Boolean(event.metaKey) === state.shortcut.meta
-      && Boolean(event.shiftKey) === state.shortcut.shift;
-  }
-
-  function setShortcut(value) {
-    state.shortcut = parseShortcut(value || readStoredShortcut() || defaultAnnotationShortcut);
-    updateUi();
-  }
-
-  function onKeyDown(event) {
-    if (event.defaultPrevented || event.repeat || !matchesShortcut(event)) return;
-    event.preventDefault();
-    event.stopPropagation();
-    state.active = !(state.active && state.mode === "element");
-    state.mode = "element";
-    closePopup();
-    updateUi(state.active ? "Element annotation mode enabled from shortcut." : "Annotation mode disabled from shortcut.");
-    publishOverlayState("shortcut");
-  }
-
-  function onShortcutChanged(event) {
-    setShortcut(event && event.detail && event.detail.shortcut);
-  }
-
-  function onMouseMove(event) {
-    if (!state.active || state.mode !== "element" || isOverlayEvent(event)) return;
-    const now = Date.now();
-    if (now - state.lastHoverAt < 80) return;
-    state.lastHoverAt = now;
-    if (state.pendingFrame) cancelAnimationFrame(state.pendingFrame);
-    state.pendingFrame = requestAnimationFrame(() => {
-      state.pendingFrame = 0;
-      const target = eventTargetElement(event);
-      if (!target) {
-        clearHover();
-        return;
-      }
-      const rect = target.getBoundingClientRect();
-      if (!isUsableRect(rect)) {
-        clearHover();
-        return;
-      }
-      state.hovered = target;
-      outline.style.left = rect.left + "px";
-      outline.style.top = rect.top + "px";
-      outline.style.width = rect.width + "px";
-      outline.style.height = rect.height + "px";
-      outline.style.display = "block";
-    });
-  }
-
-  function onClick(event) {
-    if (!state.active || isOverlayEvent(event)) return;
-    if (state.mode === "pin") {
-      event.preventDefault();
-      event.stopPropagation();
-      openNote("pin", buildPinTarget(event), { x: event.clientX, y: event.clientY });
-      return;
-    }
-    const target = eventTargetElement(event);
-    if (!target || !isUsableRect(target.getBoundingClientRect())) return;
-    event.preventDefault();
-    event.stopPropagation();
-    state.hovered = target;
-    openNote("element", buildElementTarget(target), rectAnchor(target.getBoundingClientRect()));
-  }
-
-  function isOverlayEvent(event) {
-    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-    return path.includes(host) || path.includes(panel) || (state.popup && path.includes(state.popup));
-  }
-
-  function eventTargetElement(event) {
-    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-    for (const item of path) {
-      if (item && item.nodeType === 1 && item !== host && item !== outline && item !== document.documentElement && item !== document.body) return item;
-    }
-    const target = event.target;
-    return target && target.nodeType === 1 ? target : null;
-  }
-
-  function clearHover() {
-    state.hovered = null;
-    outline.style.display = "none";
-  }
-
-  function rectAnchor(rect) {
-    const viewport = viewportMetrics();
-    return {
-      x: clamp(rect.left, viewport.left + 12, viewport.left + viewport.width - 12),
-      y: clamp(rect.bottom + 8, viewport.top + 12, viewport.top + viewport.height - 12),
-    };
-  }
-
-  function viewportMetrics() {
-    const visual = window.visualViewport;
-    return {
-      left: visual && Number.isFinite(visual.offsetLeft) ? visual.offsetLeft : 0,
-      top: visual && Number.isFinite(visual.offsetTop) ? visual.offsetTop : 0,
-      width: Math.max(0, visual && Number.isFinite(visual.width) ? visual.width : (window.innerWidth || document.documentElement.clientWidth || 0)),
-      height: Math.max(0, visual && Number.isFinite(visual.height) ? visual.height : (window.innerHeight || document.documentElement.clientHeight || 0)),
-    };
-  }
-
-  function clamp(value, min, max) {
-    const upper = Math.max(min, max);
-    return Math.max(min, Math.min(upper, value));
-  }
-
-  function positionPopup(popup, anchor) {
-    const viewport = viewportMetrics();
-    const margin = 12;
-    const rect = popup.getBoundingClientRect();
-    const width = Math.min(rect.width || 320, Math.max(0, viewport.width - margin * 2));
-    const height = Math.min(rect.height || 180, Math.max(0, viewport.height - margin * 2));
-    popup.style.left = clamp(anchor.x, viewport.left + margin, viewport.left + viewport.width - width - margin) + "px";
-    popup.style.top = clamp(anchor.y, viewport.top + margin, viewport.top + viewport.height - height - margin) + "px";
-  }
-
-  function ensureHostInViewport() {
-    const rect = host.getBoundingClientRect();
-    if (!rect.width || !rect.height) return;
-    const viewport = viewportMetrics();
-    const left = clamp(rect.left, viewport.left + 8, viewport.left + viewport.width - rect.width - 8);
-    const top = clamp(rect.top, viewport.top + 8, viewport.top + viewport.height - rect.height - 8);
-    if (Math.abs(left - rect.left) > 1 || Math.abs(top - rect.top) > 1) {
-      host.style.left = left + "px";
-      host.style.top = top + "px";
-      host.style.right = "auto";
-      host.style.bottom = "auto";
-    }
-  }
-
-  function onViewportChange() {
-    ensureHostInViewport();
-    if (state.popup && state.popup.__piboAnchor) positionPopup(state.popup, state.popup.__piboAnchor);
-  }
-
-  function isUsableRect(rect) {
-    return rect && rect.width > 1 && rect.height > 1 && rect.bottom >= 0 && rect.right >= 0 && rect.left <= window.innerWidth && rect.top <= window.innerHeight;
-  }
-
-  function openNote(kind, target, anchor) {
-    closePopup();
-    clearHover();
-    const popup = document.createElement("div");
-    popup.className = "pibo-wa-popup";
-    popup.__piboAnchor = anchor;
-    const label = document.createElement("div");
-    label.className = "pibo-wa-popup-label";
-    label.textContent = kind === "pin" ? "Pin annotation" : (target.label || target.selector || "Element annotation");
-    const textarea = document.createElement("textarea");
-    textarea.placeholder = "What should the agent know about this target?";
-    textarea.maxLength = caps.note;
-    const actions = document.createElement("div");
-    actions.className = "pibo-wa-row";
-    const submit = button("Submit", "Submit annotation");
-    const cancel = button("Cancel", "Cancel annotation");
-    actions.append(submit, cancel);
-    popup.append(label, textarea, actions);
-    shadow.append(popup);
-    state.popup = popup;
-    state.active = false;
-    positionPopup(popup, anchor);
-    updateUi("Add a note, submit, or cancel.");
-    textarea.focus({ preventScroll: true });
-    cancel.addEventListener("click", () => {
-      closePopup();
-      state.active = true;
-      updateUi("Cancelled. Annotation mode is active.");
-    });
-    submit.addEventListener("click", async () => {
-      const note = cap(textarea.value.trim(), caps.note);
-      if (!note) {
-        updateUi("Note is required before submitting.");
-        textarea.focus();
-        return;
-      }
-      submit.disabled = true;
-      const payload = buildPayload(kind, target, note);
-      state.submissions.push(payload);
-      try {
-        const response = await fetch(apiUrl() + "/submissions", {
-          method: "POST",
-          mode: "cors",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        if (!response.ok) throw new Error("HTTP " + response.status);
-        const data = await response.json().catch(() => ({}));
-        state.lastError = null;
-        try { window.dispatchEvent(new CustomEvent("pibo:web-annotation-saved", { detail: data })); } catch {}
-        closePopup();
-        state.active = true;
-        updateUi(data && data.annotation && data.annotation.id ? "Saved " + data.annotation.id + "." : "Saved annotation.");
-      } catch (error) {
-        state.lastError = error && error.message ? error.message : String(error);
-        submit.disabled = false;
-        updateUi("Submission failed: " + cap(state.lastError, 120));
-      }
-    });
-  }
-
-  function closePopup() {
-    if (state.popup) state.popup.remove();
-    state.popup = null;
-  }
-
-  function apiUrl() {
-    const base = config.apiBaseUrl || window.location.origin;
-    return base.replace(/\/$/, "") + "/api/web-annotations";
-  }
-
-  function buildPayload(kind, target, note) {
-    return {
-      bindingId: config.bindingId,
-      bindingToken: config.bindingToken,
-      note,
-      url: cap(window.location.href, 2000),
-      title: cap(document.title || "", 200),
-      targetKind: kind,
-      viewport: {
-        width: Math.max(0, Math.round(window.innerWidth || document.documentElement.clientWidth || 0)),
-        height: Math.max(0, Math.round(window.innerHeight || document.documentElement.clientHeight || 0)),
-        devicePixelRatio: Number(window.devicePixelRatio || 1),
-      },
-      target,
-    };
-  }
-
-  function buildPinTarget(event) {
-    return boundedTarget({
-      kind: "pin",
-      label: "pin " + Math.round(event.clientX) + "," + Math.round(event.clientY),
-      position: { x: Math.round(event.clientX), y: Math.round(event.clientY) },
-      sourceHints: [{ kind: "dom-fallback", confidence: "low", id: "pin", raw: { url: cap(location.pathname, 200) } }],
-    });
-  }
-
-  function buildElementTarget(element) {
-    const rect = element.getBoundingClientRect();
-    const selector = bestSelector(element);
-    const selectedText = getSelectedText();
-    const tagName = (element.tagName || "").toLowerCase();
-    const target = {
-      kind: "element",
-      label: cap(labelFor(element), caps.text),
-      selector,
-      domPath: cap(domPath(element, false), caps.domPath),
-      fullDomPath: cap(domPath(element, true), caps.domPath),
-      tagName,
-      stableId: stableId(element),
-      classSummary: cap(classSummary(element), caps.classSummary),
-      text: cap((element.innerText || element.textContent || "").replace(/\s+/g, " ").trim(), caps.text),
-      selectedText: selectedText || undefined,
-      htmlHint: cap(openingTagHint(element), caps.htmlHint),
-      accessibility: accessibilityHint(element),
-      boundingBox: { x: Math.round(rect.left), y: Math.round(rect.top), width: Math.round(rect.width), height: Math.round(rect.height) },
-      sourceHints: sourceHints(element, selector),
-    };
-    if (tagName === "iframe") {
-      target.accessibility = { ...(target.accessibility || {}), description: "Iframe contents are unavailable to the top-level annotation overlay when cross-origin." };
-    }
-    return boundedTarget(target);
-  }
-
-  function boundedTarget(target) {
-    if (target.selector) target.selector = cap(target.selector, caps.selector);
-    if (target.domPath) target.domPath = cap(target.domPath, caps.domPath);
-    if (target.fullDomPath) target.fullDomPath = cap(target.fullDomPath, caps.domPath);
-    if (target.text) target.text = cap(target.text, caps.text);
-    if (target.selectedText) target.selectedText = cap(target.selectedText, caps.text);
-    if (target.htmlHint) target.htmlHint = cap(target.htmlHint, caps.htmlHint);
-    if (target.classSummary) target.classSummary = cap(target.classSummary, caps.classSummary);
-    if (target.accessibility && target.accessibility.description) target.accessibility.description = cap(target.accessibility.description, caps.accessibility);
-    if (Array.isArray(target.sourceHints)) target.sourceHints = target.sourceHints.slice(0, 8).map(boundSourceHint);
-    return target;
-  }
-
-  function boundSourceHint(hint) {
-    const next = { ...hint };
-    if (next.id) next.id = cap(String(next.id), 160);
-    if (next.file) next.file = cap(String(next.file), 300);
-    if (next.component) next.component = cap(String(next.component), 160);
-    if (Array.isArray(next.componentPath)) next.componentPath = next.componentPath.slice(0, 12).map((item) => cap(String(item), 120));
-    if (next.raw) next.raw = truncateRaw(next.raw);
-    return next;
-  }
-
-  function truncateRaw(raw) {
-    try {
-      return JSON.parse(cap(JSON.stringify(raw), caps.sourceRaw));
-    } catch {
-      return { truncated: true };
-    }
-  }
-
-  function cap(value, max) {
-    if (value === undefined || value === null) return undefined;
-    const text = String(value).replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, "");
-    return text.length > max ? text.slice(0, max) : text;
-  }
-
-  function getSelectedText() {
-    const selection = window.getSelection && window.getSelection();
-    const text = selection ? selection.toString().replace(/\s+/g, " ").trim() : "";
-    return text ? cap(text, caps.text) : undefined;
-  }
-
-  function cssEscape(value) {
-    if (window.CSS && typeof window.CSS.escape === "function") return window.CSS.escape(value);
-    return String(value).replace(/[^a-zA-Z0-9_-]/g, (char) => "\\" + char);
-  }
-
-  function stableId(element) {
-    const attrs = ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-shared-terminal-card", "data-shared-status-field", "data-pibo-markdown-node", "data-testid", "data-test-id", "data-cy", "data-qa", "data-locatorjs-id", "id", "aria-label"];
-    let current = element;
-    while (current && current.nodeType === 1) {
-      for (const attr of attrs) {
-        const value = current.getAttribute && current.getAttribute(attr);
-        if (value && value.trim()) return attr + ":" + cap(value.trim(), 160);
-      }
-      const terminalRow = current.getAttribute && current.getAttribute("data-pibo-terminal-row");
-      if (terminalRow) {
-        const rowId = current.getAttribute("data-row-id") || current.getAttribute("data-row-kind") || terminalRow;
-        return "data-pibo-terminal-row:" + cap(rowId, 160);
-      }
-      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
-    }
-    return undefined;
-  }
-
-  function bestSelector(element) {
-    const direct = stableSelectorPart(element);
-    if (direct && direct.unique) return direct.selector;
-    const chain = [];
-    let current = element;
-    while (current && current.nodeType === 1 && current !== document.documentElement) {
-      const part = stableSelectorPart(current);
-      chain.unshift(part.selector);
-      const combined = chain.join(" > ");
-      if (safeQueryCount(combined) === 1) return combined;
-      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
-    }
-    return chain.length ? chain.join(" > ") : undefined;
-  }
-
-  function stableSelectorPart(element) {
-    const tag = (element.tagName || "*").toLowerCase();
-    const id = element.getAttribute && element.getAttribute("id");
-    if (id) {
-      const selector = "#" + cssEscape(id);
-      return { selector, unique: safeQueryCount(selector) === 1 };
-    }
-    for (const attr of ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-shared-terminal-card", "data-shared-status-field", "data-pibo-markdown-node", "data-testid", "data-test-id", "data-cy", "data-qa", "data-locatorjs-id", "aria-label"]) {
-      const value = element.getAttribute && element.getAttribute(attr);
-      if (value) {
-        const selector = tag + "[" + attr + "=\"" + String(value).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"") + "\"]";
-        return { selector, unique: safeQueryCount(selector) === 1 };
-      }
-    }
-    if (element.getAttribute && element.getAttribute("data-pibo-terminal-row")) {
-      const rowId = element.getAttribute("data-row-id");
-      if (rowId) {
-        const selector = tag + "[data-pibo-terminal-row=\"true\"][data-row-id=\"" + String(rowId).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"") + "\"]";
-        return { selector, unique: safeQueryCount(selector) === 1 };
-      }
-      return { selector: tag + "[data-pibo-terminal-row=\"true\"]", unique: false };
-    }
-    return { selector: tag + ":nth-of-type(" + nthOfType(element) + ")", unique: false };
-  }
-
-  function safeQueryCount(selector) {
-    try { return document.querySelectorAll(selector).length; } catch { return 0; }
-  }
-
-  function nthOfType(element) {
-    let index = 1;
-    let sibling = element.previousElementSibling;
-    while (sibling) {
-      if (sibling.tagName === element.tagName) index += 1;
-      sibling = sibling.previousElementSibling;
-    }
-    return index;
-  }
-
-  function domPath(element, full) {
-    const parts = [];
-    let current = element;
-    while (current && current.nodeType === 1) {
-      const tag = (current.tagName || "").toLowerCase();
-      if (!tag) break;
-      const id = current.getAttribute && current.getAttribute("id");
-      const testId = current.getAttribute && (current.getAttribute("data-pibo-id") || current.getAttribute("data-pibo-component") || current.getAttribute("data-pibo-debug") || current.getAttribute("data-shared-terminal-card") || current.getAttribute("data-shared-status-field") || current.getAttribute("data-pibo-markdown-node") || current.getAttribute("data-testid") || current.getAttribute("data-test-id"));
-      let part = tag;
-      if (id) part += "#" + id;
-      else if (testId) part += "[" + testId + "]";
-      else if (current.getAttribute && current.getAttribute("data-pibo-terminal-row")) part += "[terminal-row:" + (current.getAttribute("data-row-kind") || "true") + "]";
-      else part += ":nth-of-type(" + nthOfType(current) + ")";
-      parts.unshift(part);
-      if (!full && (id || testId || current.getAttribute && current.getAttribute("data-pibo-terminal-row") || parts.length >= 5)) break;
-      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
-    }
-    return parts.join(" > ");
-  }
-
-  function classSummary(element) {
-    const classes = Array.from(element.classList || []).filter((name) => !/[a-f0-9]{7,}/i.test(name)).slice(0, 12);
-    return classes.join(" ") || undefined;
-  }
-
-  function openingTagHint(element) {
-    const clone = element.cloneNode(false);
-    const html = clone.outerHTML || "";
-    return html.replace(/><\/[\s\S]*$/, ">");
-  }
-
-  function labelFor(element) {
-    const aria = element.getAttribute && (element.getAttribute("aria-label") || element.getAttribute("title") || element.getAttribute("alt"));
-    const text = (element.innerText || element.textContent || "").replace(/\s+/g, " ").trim();
-    const tag = (element.tagName || "element").toLowerCase();
-    return aria ? tag + " \"" + aria + "\"" : (text ? tag + " \"" + text.slice(0, 80) + "\"" : tag);
-  }
-
-  function accessibilityHint(element) {
-    const focusable = Boolean(element.matches && element.matches("a[href],button,input,textarea,select,[tabindex]"));
-    const role = element.getAttribute && element.getAttribute("role") || undefined;
-    const ariaLabel = element.getAttribute && element.getAttribute("aria-label") || undefined;
-    return { role, name: cap(ariaLabel || element.getAttribute && element.getAttribute("title") || undefined, 160), ariaLabel: cap(ariaLabel, 160), focusable };
-  }
-
-  function sourceHints(element, selector) {
-    const hints = [];
-    const explicit = explicitSourceHints(element);
-    hints.push(...explicit);
-    const locator = locatorHint(element);
-    if (locator && !hasEquivalentHint(hints, locator)) hints.push(locator);
-    const react = reactHint(element);
-    if (react && !hasEquivalentHint(hints, react)) hints.push(react);
-    if (!hints.length) hints.push({ kind: "dom-fallback", confidence: "low", id: selector || domPath(element, false), raw: { tagName: (element.tagName || "").toLowerCase() } });
-    return hints;
-  }
-
-  function explicitSourceHints(element) {
-    const hints = [];
-    const deferredTestHints = [];
-    let current = element;
-    while (current && current.nodeType === 1 && hints.length < 8) {
-      const tagName = (current.tagName || "").toLowerCase();
-      const piboId = current.getAttribute && current.getAttribute("data-pibo-id");
-      if (piboId) pushHint(hints, { kind: "pibo-id", confidence: "high", id: piboId, raw: { tagName } });
-      const component = current.getAttribute && current.getAttribute("data-pibo-component");
-      if (component) pushHint(hints, { kind: "pibo-component", confidence: "high", id: component, component, raw: collectPiboRaw(current) });
-      const debug = current.getAttribute && current.getAttribute("data-pibo-debug");
-      if (debug) pushHint(hints, { kind: "pibo-debug", confidence: "high", id: debug, component, raw: collectPiboRaw(current) });
-      const markdownNode = current.getAttribute && current.getAttribute("data-pibo-markdown-node");
-      if (markdownNode) pushHint(hints, { kind: "pibo-markdown", confidence: "high", id: markdownNode, component: component || "MarkdownRenderer", raw: collectPiboRaw(current) });
-      const sharedCard = current.getAttribute && current.getAttribute("data-shared-terminal-card");
-      if (sharedCard) pushHint(hints, { kind: "pibo-shared-card", confidence: "high", id: sharedCard, component: component || "TerminalCard", raw: collectPiboRaw(current) });
-      const sharedField = current.getAttribute && current.getAttribute("data-shared-status-field");
-      if (sharedField) pushHint(hints, { kind: "pibo-shared-card", confidence: "high", id: "status-field:" + sharedField, component: component || "TerminalStatusCard", raw: collectPiboRaw(current) });
-      if (current.getAttribute && current.getAttribute("data-pibo-terminal-row")) {
-        pushHint(hints, { kind: "pibo-terminal-row", confidence: "high", id: current.getAttribute("data-row-id") || current.getAttribute("data-row-kind") || "terminal-row", component: component || "TerminalRow", raw: collectPiboRaw(current) });
-      }
-      const testId = current.getAttribute && (current.getAttribute("data-testid") || current.getAttribute("data-test-id") || current.getAttribute("data-cy") || current.getAttribute("data-qa"));
-      if (testId) {
-        const testHint = { kind: "test-id", confidence: "high", id: testId, raw: { tagName } };
-        if (/^virtuoso/i.test(testId) || /virtuoso/i.test(testId)) deferredTestHints.push(testHint);
-        else pushHint(hints, testHint);
-      }
-      const locatorId = current.getAttribute && current.getAttribute("data-locatorjs-id");
-      if (locatorId) pushHint(hints, { kind: "locatorjs", confidence: "high", id: locatorId, raw: collectLocatorRaw(current) });
-      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
-    }
-    if (!hints.length) deferredTestHints.slice(0, 2).forEach((hint) => pushHint(hints, hint));
-    return hints;
-  }
-
-  function pushHint(hints, hint) {
-    if (!hint || !hint.kind) return;
-    if (hasEquivalentHint(hints, hint)) return;
-    hints.push(hint);
-  }
-
-  function hasEquivalentHint(hints, hint) {
-    return hints.some((existing) => existing.kind === hint.kind && (existing.id || "") === (hint.id || "") && (existing.component || "") === (hint.component || ""));
-  }
-
-  function collectPiboRaw(element) {
-    const raw = { tagName: (element.tagName || "").toLowerCase() };
-    for (const attr of ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-pibo-session-id", "data-pibo-title", "data-pibo-selected", "data-pibo-state", "data-pibo-terminal-row", "data-pibo-markdown-node", "data-pibo-markdown-kind", "data-shared-terminal-card", "data-shared-status-field", "data-row-id", "data-row-kind", "data-row-status", "data-trace-node-id", "data-event-id", "data-run-id", "data-order-source", "data-order-stream-id", "data-order-frame-index"]) {
-      const value = element.getAttribute && element.getAttribute(attr);
-      if (value) raw[attr.replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase())] = cap(value, 300);
-    }
-    return raw;
-  }
-
-  function locatorHint(element) {
-    let current = element;
-    while (current && current.nodeType === 1) {
-      const raw = collectLocatorRaw(current);
-      const file = raw.file || raw.sourceFile || raw.source;
-      const component = raw.component || raw.componentName;
-      if (file || component || raw.line || raw.column) {
-        return { kind: "locatorjs", confidence: "high", id: raw.id, file, line: numberOrUndefined(raw.line), column: numberOrUndefined(raw.column), component, raw };
-      }
-      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
-    }
-    return undefined;
-  }
-
-  function collectLocatorRaw(element) {
-    const names = ["data-locatorjs-id", "data-locatorjs-source", "data-locatorjs-file", "data-locatorjs-line", "data-locatorjs-column", "data-locatorjs-component", "data-source", "data-source-file", "data-source-line", "data-source-column", "data-component", "data-component-path"];
-    const raw = {};
-    for (const name of names) {
-      const value = element.getAttribute && element.getAttribute(name);
-      if (value) raw[name.replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase())] = cap(value, 300);
-    }
-    return raw;
-  }
-
-  function reactHint(element) {
-    let current = element;
-    while (current && current.nodeType === 1) {
-      const key = Object.keys(current).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
-      let fiber = key ? current[key] : undefined;
-      const names = [];
-      let source;
-      let guard = 0;
-      while (fiber && guard < 20) {
-        const type = fiber.elementType || fiber.type;
-        const name = typeof type === "function" ? (type.displayName || type.name) : (typeof type === "string" ? type : undefined);
-        if (name) names.push(name);
-        if (!source && fiber._debugSource) source = fiber._debugSource;
-        fiber = fiber.return;
-        guard += 1;
-      }
-      if (names.length || source) {
-        return {
-          kind: source ? "jsx-source" : "react-fiber",
-          confidence: "medium",
-          file: source && source.fileName,
-          line: source && source.lineNumber,
-          column: source && source.columnNumber,
-          component: names[0],
-          componentPath: names.slice(0, 12),
-          raw: source ? { source } : { components: names.slice(0, 12) },
-        };
-      }
-      current = current.parentElement || null;
-    }
-    return undefined;
-  }
-
-  function numberOrUndefined(value) {
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : undefined;
-  }
-
-  document.addEventListener("mousemove", onMouseMove, true);
-  document.addEventListener("click", onClick, true);
-  document.addEventListener("keydown", onKeyDown, true);
-  window.addEventListener("pibo:web-annotation-shortcut-changed", onShortcutChanged);
-  window.addEventListener("pagehide", onPageHide);
-  window.addEventListener("resize", onViewportChange);
-  if (window.visualViewport) {
-    window.visualViewport.addEventListener("resize", onViewportChange);
-    window.visualViewport.addEventListener("scroll", onViewportChange);
-  }
-  updateUi();
-
-  const api = {
-    bindingId: config.bindingId,
-    piboSessionId: config.piboSessionId,
-    injectedAt: new Date().toISOString(),
-    setActive(value) {
-      state.active = Boolean(value);
-      updateUi();
-      publishOverlayState("set-active");
-    },
-    setMode(value) {
-      state.mode = value === "pin" ? "pin" : "element";
-      state.active = true;
-      updateUi();
-      publishOverlayState("set-mode");
-    },
-    setShortcut(value) { setShortcut(value); },
-    getState() { return { active: state.active, toolbarExpanded: state.toolbarExpanded, mode: state.mode, shortcut: state.shortcut.label, submissions: state.submissions.slice(), lastError: state.lastError }; },
-    remove() {
-      state.active = false;
-      publishOverlayState("removed", false);
-      document.removeEventListener("mousemove", onMouseMove, true);
-      document.removeEventListener("click", onClick, true);
-      document.removeEventListener("keydown", onKeyDown, true);
-      window.removeEventListener("pibo:web-annotation-shortcut-changed", onShortcutChanged);
-      window.removeEventListener("pagehide", onPageHide);
-      window.removeEventListener("resize", onViewportChange);
-      if (window.visualViewport) {
-        window.visualViewport.removeEventListener("resize", onViewportChange);
-        window.visualViewport.removeEventListener("scroll", onViewportChange);
-      }
-      if (state.pendingFrame) cancelAnimationFrame(state.pendingFrame);
-      closePopup();
-      outline.remove();
-      host.remove();
-      if (window.__piboWebAnnotations && window.__piboWebAnnotations.bindingId === config.bindingId) delete window.__piboWebAnnotations;
-    },
-  };
-  window.__piboWebAnnotations = api;
-  publishOverlayState("installed");
-  return { ok: true, url: location.href, title: document.title || "" };
+    return String.raw `(() => {
+  const config = (${configExpression});
+  if (!config || !config.bindingId || !config.bindingToken) throw new Error("Pibo Web Annotation overlay config is missing bindingId or bindingToken");
+  const rootId = "pibo-web-annotation-overlay";
+  const outlineId = "pibo-web-annotation-outline";
+  const shortcutStorageKey = "pibo.chat.shortcuts.webAnnotationsToggle";
+  const overlayStateEventName = "pibo:web-annotation-overlay-state";
+  const overlayStateStoragePrefix = "pibo.chat.webAnnotations.overlay.";
+  const defaultAnnotationShortcut = "Alt+Shift+A";
+  const previous = window.__piboWebAnnotations;
+  if (previous && typeof previous.remove === "function") previous.remove();
+
+  const caps = {
+    note: 2000,
+    text: 500,
+    htmlHint: 400,
+    classSummary: 240,
+    accessibility: 240,
+    selector: 500,
+    domPath: 700,
+    sourceRaw: 800,
+  };
+  const state = {
+    active: false,
+    mode: "element",
+    hovered: null,
+    popup: null,
+    lastHoverAt: 0,
+    pendingFrame: 0,
+    dragMoved: false,
+    toolbarExpanded: false,
+    shortcut: parseShortcut(config.annotationShortcut || readStoredShortcut() || defaultAnnotationShortcut),
+    submissions: [],
+    lastError: null,
+  };
+
+  function publishOverlayState(reason, installed) {
+    const piboSessionId = String(config.piboSessionId || "");
+    const detail = {
+      bindingId: String(config.bindingId || ""),
+      piboSessionId,
+      installed: installed !== false,
+      active: installed !== false && Boolean(state.active),
+      toolbarExpanded: installed !== false && Boolean(state.toolbarExpanded),
+      mode: state.mode,
+      reason: String(reason || "state"),
+      updatedAt: new Date().toISOString(),
+    };
+    if (piboSessionId) {
+      try { window.localStorage && window.localStorage.setItem(overlayStateStoragePrefix + piboSessionId, JSON.stringify(detail)); } catch {}
+    }
+    try { window.dispatchEvent(new CustomEvent(overlayStateEventName, { detail })); } catch {}
+  }
+
+  function onPageHide() {
+    state.active = false;
+    publishOverlayState("pagehide", false);
+  }
+
+  const host = document.createElement("div");
+  host.id = rootId;
+  host.setAttribute("data-pibo-web-annotation-binding", config.bindingId);
+  host.style.cssText = "position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:2147483647;pointer-events:auto;color-scheme:light dark";
+  const shadow = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
+  const style = document.createElement("style");
+  style.textContent = [
+    ":host{all:initial;font:13px system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}",
+    "@keyframes pibo-wa-attention{0%{transform:scale(.72);opacity:.45;box-shadow:0 0 0 0 rgba(56,189,248,.7)}18%{transform:scale(1.22,.82);opacity:1}34%{transform:scale(.9,1.12)}52%{transform:scale(1.08,.94);box-shadow:0 0 0 12px rgba(56,189,248,.18)}72%{transform:scale(.98,1.02)}100%{transform:scale(1);opacity:1;box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 0 0 rgba(56,189,248,0)}}",
+    ".pibo-wa-panel{position:relative;width:50px;min-height:50px;color:#fff;font:13px system-ui,sans-serif;touch-action:none}",
+    ".pibo-wa-main,.pibo-wa-button{box-sizing:border-box;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.5);background:#111827;color:#dbeafe;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.36);cursor:pointer;user-select:none;line-height:0;padding:0;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}",
+    ".pibo-wa-main{border-color:#38bdf8;background:linear-gradient(180deg,#102334,#0f172a);color:#7dd3fc;cursor:grab}",
+    ".pibo-wa-main:active{cursor:grabbing}",
+    ".pibo-wa-main.pibo-wa-attention{animation:pibo-wa-attention .78s cubic-bezier(.2,.8,.2,1) both}",
+    "@media (prefers-reduced-motion:reduce){.pibo-wa-main.pibo-wa-attention{animation:none;box-shadow:0 0 0 3px rgba(56,189,248,.6),0 12px 32px rgba(0,0,0,.36)}}",
+    ".pibo-wa-main:hover,.pibo-wa-button:hover{border-color:#7dd3fc;color:#e0f2fe;background:#172033;transform:translateY(-1px)}",
+    ".pibo-wa-icon{width:22px;height:22px;display:block;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:0 0 auto}",
+    ".pibo-wa-actions{position:absolute;right:-2px;bottom:42px;display:flex;flex-direction:column;gap:7px;padding:0 2px 12px 2px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .12s ease,transform .12s ease}",
+    ".pibo-wa-actions::before{content:'';position:absolute;inset:0 -8px -12px -8px;z-index:-1}",
+    ".pibo-wa-panel:hover .pibo-wa-actions,.pibo-wa-panel:focus-within .pibo-wa-actions,.pibo-wa-panel.pibo-wa-active .pibo-wa-actions,.pibo-wa-panel.pibo-wa-expanded .pibo-wa-actions{opacity:1;pointer-events:auto;transform:translateY(0)}",
+    "@media (hover:none),(pointer:coarse){.pibo-wa-panel{width:54px;min-height:54px}.pibo-wa-main,.pibo-wa-button{width:52px;height:52px;border-radius:16px}.pibo-wa-actions,.pibo-wa-panel:hover .pibo-wa-actions,.pibo-wa-panel:focus-within .pibo-wa-actions,.pibo-wa-panel.pibo-wa-active .pibo-wa-actions{right:-1px;bottom:48px;gap:8px;opacity:0;pointer-events:none;transform:translateY(6px)}.pibo-wa-panel.pibo-wa-expanded .pibo-wa-actions{opacity:1;pointer-events:auto;transform:none}.pibo-wa-main:hover,.pibo-wa-button:hover{transform:none}}",
+    ".pibo-wa-button{background:#1f2937}",
+    ".pibo-wa-button[aria-pressed='true']{background:#2563eb;border-color:#93c5fd;color:#fff}",
+    ".pibo-wa-button-danger{background:#3f1418;border-color:#7f1d1d;color:#fecaca}",
+    ".pibo-wa-button-danger:hover{border-color:#ef4444;color:#fff;background:#7f1d1d}",
+    ".pibo-wa-status{display:none}",
+    ".pibo-wa-popup{box-sizing:border-box;position:fixed;z-index:2147483647;width:min(320px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#fff;color:#111827;border:1px solid #9ca3af;border-radius:12px;padding:10px;box-shadow:0 14px 36px rgba(0,0,0,.35);font:13px system-ui,sans-serif;overscroll-behavior:contain}",
+    ".pibo-wa-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}",
+    ".pibo-wa-popup textarea{box-sizing:border-box;width:100%;min-height:76px;margin:8px 0;border:1px solid #9ca3af;border-radius:8px;padding:8px;font:13px system-ui,sans-serif;color:#111827;background:#fff}",
+    "@media (max-width:480px){.pibo-wa-popup{width:calc(100vw - 24px);padding:12px}.pibo-wa-popup textarea{min-height:96px;font-size:16px}.pibo-wa-row .pibo-wa-button{width:auto;min-width:92px;height:40px;border-radius:10px;padding:0 12px;line-height:1}}",
+    ".pibo-wa-popup-label{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+  ].join("");
+  const panel = document.createElement("div");
+  panel.className = "pibo-wa-panel";
+  const actions = document.createElement("div");
+  actions.className = "pibo-wa-actions";
+  const toggle = button(iconSvg("edit"), "Toggle element annotation mode");
+  const pin = button(iconSvg("arrow-down-to-dot"), "Mark a point instead of an element");
+  const stop = button(iconSvg("x"), "Remove the Pibo annotation overlay");
+  stop.className += " pibo-wa-button-danger";
+  const main = document.createElement("button");
+  main.type = "button";
+  main.className = "pibo-wa-main";
+  main.innerHTML = iconSvg("book-a");
+  main.classList.add("pibo-wa-attention");
+  main.setAttribute("aria-label", shortcutTitle("Enable element annotation mode"));
+  main.title = shortcutTitle("Enable element annotation mode");
+  const status = document.createElement("div");
+  status.className = "pibo-wa-status";
+  actions.append(toggle, pin, stop);
+  panel.append(actions, main, status);
+  shadow.append(style, panel);
+  document.documentElement.appendChild(host);
+
+  const outline = document.createElement("div");
+  outline.id = outlineId;
+  outline.style.cssText = "position:fixed;z-index:2147483646;pointer-events:none;border:2px solid #2563eb;background:rgba(37,99,235,.10);box-shadow:0 0 0 9999px rgba(37,99,235,.04);display:none;border-radius:3px";
+  document.documentElement.appendChild(outline);
+
+  main.addEventListener("pointerdown", startDrag);
+  main.addEventListener("click", () => {
+    if (state.dragMoved) {
+      state.dragMoved = false;
+      return;
+    }
+    if (isCoarsePointer()) {
+      state.toolbarExpanded = !state.toolbarExpanded;
+      updateUi();
+      publishOverlayState("toolbar-toggle");
+      return;
+    }
+    state.active = true;
+    state.mode = "element";
+    closePopup();
+    updateUi();
+    publishOverlayState("main-button");
+  });
+  main.addEventListener("animationend", () => main.classList.remove("pibo-wa-attention"));
+  toggle.addEventListener("click", () => {
+    state.active = !state.active;
+    state.mode = "element";
+    state.toolbarExpanded = !state.active;
+    closePopup();
+    updateUi();
+    publishOverlayState("toggle");
+  });
+  pin.addEventListener("click", () => {
+    state.active = true;
+    state.mode = state.mode === "pin" ? "element" : "pin";
+    state.toolbarExpanded = false;
+    closePopup();
+    updateUi();
+    publishOverlayState("pin-toggle");
+  });
+  stop.addEventListener("click", () => api.remove());
+
+  function button(content, aria) {
+    const el = document.createElement("button");
+    el.type = "button";
+    el.className = "pibo-wa-button";
+    el.innerHTML = content;
+    el.setAttribute("aria-label", aria);
+    el.title = aria;
+    return el;
+  }
+
+  function iconSvg(name) {
+    const attrs = "class=\"pibo-wa-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"";
+    if (name === "book-a") return "<svg " + attrs + "><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><path d=\"m8 13 4-7 4 7\"/><path d=\"M9.1 11h5.7\"/></svg>";
+    if (name === "arrow-down-to-dot") return "<svg " + attrs + "><path d=\"M12 2v14\"/><path d=\"m19 9-7 7-7-7\"/><circle cx=\"12\" cy=\"21\" r=\"1\"/></svg>";
+    if (name === "x") return "<svg " + attrs + "><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>";
+    return "<svg " + attrs + "><path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"/></svg>";
+  }
+
+  function startDrag(event) {
+    if (event.button !== undefined && event.button !== 0) return;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const rect = host.getBoundingClientRect();
+    const originLeft = rect.left;
+    const originTop = rect.top;
+    state.dragMoved = false;
+    if (main.setPointerCapture) main.setPointerCapture(event.pointerId);
+    const onMove = (nextEvent) => {
+      const dx = nextEvent.clientX - startX;
+      const dy = nextEvent.clientY - startY;
+      if (!state.dragMoved && Math.hypot(dx, dy) < 4) return;
+      state.dragMoved = true;
+      nextEvent.preventDefault();
+      const viewport = viewportMetrics();
+      const left = clamp(originLeft + dx, viewport.left + 8, viewport.left + viewport.width - rect.width - 8);
+      const top = clamp(originTop + dy, viewport.top + 8, viewport.top + viewport.height - rect.height - 8);
+      host.style.left = left + "px";
+      host.style.top = top + "px";
+      host.style.right = "auto";
+      host.style.bottom = "auto";
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+      ensureHostInViewport();
+    };
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+  }
+
+  function updateUi(message) {
+    const title = isCoarsePointer() ? (state.toolbarExpanded ? "Hide annotation controls" : "Show annotation controls") : shortcutTitle("Enable element annotation mode");
+    main.setAttribute("aria-label", title);
+    main.setAttribute("aria-expanded", state.toolbarExpanded ? "true" : "false");
+    main.title = title;
+    toggle.title = shortcutTitle("Toggle element annotation mode");
+    toggle.setAttribute("aria-label", shortcutTitle("Toggle element annotation mode"));
+    toggle.setAttribute("aria-pressed", state.active && state.mode === "element" ? "true" : "false");
+    pin.setAttribute("aria-pressed", state.active && state.mode === "pin" ? "true" : "false");
+    panel.classList.toggle("pibo-wa-active", state.active);
+    panel.classList.toggle("pibo-wa-expanded", state.toolbarExpanded);
+    outline.style.display = state.active && state.mode === "element" && state.hovered ? "block" : "none";
+    status.textContent = message || (state.active ? (state.mode === "pin" ? "Pin mode: click anywhere to mark a point." : "Element mode: hover and click a visible target.") : "Inactive: page clicks and typing pass through normally.");
+  }
+
+  function isCoarsePointer() {
+    return Boolean(window.matchMedia && window.matchMedia("(hover: none), (pointer: coarse)").matches);
+  }
+
+  function readStoredShortcut() {
+    try { return window.localStorage && window.localStorage.getItem(shortcutStorageKey); } catch { return ""; }
+  }
+
+  function parseShortcut(value) {
+    const label = String(value || defaultAnnotationShortcut).trim() || defaultAnnotationShortcut;
+    const parts = label.split("+").map((part) => part.trim()).filter(Boolean);
+    const shortcut = { alt: false, ctrl: false, meta: false, shift: false, key: "a", label: defaultAnnotationShortcut };
+    for (const part of parts) {
+      const lower = part.toLowerCase();
+      if (lower === "alt" || lower === "option") shortcut.alt = true;
+      else if (lower === "ctrl" || lower === "control") shortcut.ctrl = true;
+      else if (lower === "cmd" || lower === "command" || lower === "meta") shortcut.meta = true;
+      else if (lower === "shift") shortcut.shift = true;
+      else shortcut.key = normalizeShortcutKey(part);
+    }
+    shortcut.label = shortcutLabel(shortcut);
+    return shortcut;
+  }
+
+  function normalizeShortcutKey(value) {
+    const key = String(value || "a").trim();
+    if (key === " ") return "Space";
+    if (key.length === 1) return key.toLowerCase();
+    return key.toLowerCase() === "space" ? "Space" : key;
+  }
+
+  function shortcutLabel(shortcut) {
+    const parts = [];
+    if (shortcut.ctrl) parts.push("Ctrl");
+    if (shortcut.alt) parts.push("Alt");
+    if (shortcut.shift) parts.push("Shift");
+    if (shortcut.meta) parts.push("Meta");
+    parts.push(shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key);
+    return parts.join("+");
+  }
+
+  function shortcutTitle(label) {
+    return label + " (" + state.shortcut.label + ")";
+  }
+
+  function matchesShortcut(event) {
+    const key = normalizeShortcutKey(event.key || "");
+    const expected = String(state.shortcut.key);
+    const keyMatches = key.toLowerCase() === expected.toLowerCase()
+      || (expected.length === 1 && event.code === "Key" + expected.toUpperCase());
+    return keyMatches
+      && Boolean(event.altKey) === state.shortcut.alt
+      && Boolean(event.ctrlKey) === state.shortcut.ctrl
+      && Boolean(event.metaKey) === state.shortcut.meta
+      && Boolean(event.shiftKey) === state.shortcut.shift;
+  }
+
+  function setShortcut(value) {
+    state.shortcut = parseShortcut(value || readStoredShortcut() || defaultAnnotationShortcut);
+    updateUi();
+  }
+
+  function onKeyDown(event) {
+    if (event.defaultPrevented || event.repeat || !matchesShortcut(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    state.active = !(state.active && state.mode === "element");
+    state.mode = "element";
+    closePopup();
+    updateUi(state.active ? "Element annotation mode enabled from shortcut." : "Annotation mode disabled from shortcut.");
+    publishOverlayState("shortcut");
+  }
+
+  function onShortcutChanged(event) {
+    setShortcut(event && event.detail && event.detail.shortcut);
+  }
+
+  function onMouseMove(event) {
+    if (!state.active || state.mode !== "element" || isOverlayEvent(event)) return;
+    const now = Date.now();
+    if (now - state.lastHoverAt < 80) return;
+    state.lastHoverAt = now;
+    if (state.pendingFrame) cancelAnimationFrame(state.pendingFrame);
+    state.pendingFrame = requestAnimationFrame(() => {
+      state.pendingFrame = 0;
+      const target = eventTargetElement(event);
+      if (!target) {
+        clearHover();
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      if (!isUsableRect(rect)) {
+        clearHover();
+        return;
+      }
+      state.hovered = target;
+      outline.style.left = rect.left + "px";
+      outline.style.top = rect.top + "px";
+      outline.style.width = rect.width + "px";
+      outline.style.height = rect.height + "px";
+      outline.style.display = "block";
+    });
+  }
+
+  function onClick(event) {
+    if (!state.active || isOverlayEvent(event)) return;
+    if (state.mode === "pin") {
+      event.preventDefault();
+      event.stopPropagation();
+      openNote("pin", buildPinTarget(event), { x: event.clientX, y: event.clientY });
+      return;
+    }
+    const target = eventTargetElement(event);
+    if (!target || !isUsableRect(target.getBoundingClientRect())) return;
+    event.preventDefault();
+    event.stopPropagation();
+    state.hovered = target;
+    openNote("element", buildElementTarget(target), rectAnchor(target.getBoundingClientRect()));
+  }
+
+  function isOverlayEvent(event) {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    return path.includes(host) || path.includes(panel) || (state.popup && path.includes(state.popup));
+  }
+
+  function eventTargetElement(event) {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    for (const item of path) {
+      if (item && item.nodeType === 1 && item !== host && item !== outline && item !== document.documentElement && item !== document.body) return item;
+    }
+    const target = event.target;
+    return target && target.nodeType === 1 ? target : null;
+  }
+
+  function clearHover() {
+    state.hovered = null;
+    outline.style.display = "none";
+  }
+
+  function rectAnchor(rect) {
+    const viewport = viewportMetrics();
+    return {
+      x: clamp(rect.left, viewport.left + 12, viewport.left + viewport.width - 12),
+      y: clamp(rect.bottom + 8, viewport.top + 12, viewport.top + viewport.height - 12),
+    };
+  }
+
+  function viewportMetrics() {
+    const visual = window.visualViewport;
+    return {
+      left: visual && Number.isFinite(visual.offsetLeft) ? visual.offsetLeft : 0,
+      top: visual && Number.isFinite(visual.offsetTop) ? visual.offsetTop : 0,
+      width: Math.max(0, visual && Number.isFinite(visual.width) ? visual.width : (window.innerWidth || document.documentElement.clientWidth || 0)),
+      height: Math.max(0, visual && Number.isFinite(visual.height) ? visual.height : (window.innerHeight || document.documentElement.clientHeight || 0)),
+    };
+  }
+
+  function clamp(value, min, max) {
+    const upper = Math.max(min, max);
+    return Math.max(min, Math.min(upper, value));
+  }
+
+  function positionPopup(popup, anchor) {
+    const viewport = viewportMetrics();
+    const margin = 12;
+    const rect = popup.getBoundingClientRect();
+    const width = Math.min(rect.width || 320, Math.max(0, viewport.width - margin * 2));
+    const height = Math.min(rect.height || 180, Math.max(0, viewport.height - margin * 2));
+    popup.style.left = clamp(anchor.x, viewport.left + margin, viewport.left + viewport.width - width - margin) + "px";
+    popup.style.top = clamp(anchor.y, viewport.top + margin, viewport.top + viewport.height - height - margin) + "px";
+  }
+
+  function ensureHostInViewport() {
+    const rect = host.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    const viewport = viewportMetrics();
+    const left = clamp(rect.left, viewport.left + 8, viewport.left + viewport.width - rect.width - 8);
+    const top = clamp(rect.top, viewport.top + 8, viewport.top + viewport.height - rect.height - 8);
+    if (Math.abs(left - rect.left) > 1 || Math.abs(top - rect.top) > 1) {
+      host.style.left = left + "px";
+      host.style.top = top + "px";
+      host.style.right = "auto";
+      host.style.bottom = "auto";
+    }
+  }
+
+  function onViewportChange() {
+    ensureHostInViewport();
+    if (state.popup && state.popup.__piboAnchor) positionPopup(state.popup, state.popup.__piboAnchor);
+  }
+
+  function isUsableRect(rect) {
+    return rect && rect.width > 1 && rect.height > 1 && rect.bottom >= 0 && rect.right >= 0 && rect.left <= window.innerWidth && rect.top <= window.innerHeight;
+  }
+
+  function openNote(kind, target, anchor) {
+    closePopup();
+    clearHover();
+    const popup = document.createElement("div");
+    popup.className = "pibo-wa-popup";
+    popup.__piboAnchor = anchor;
+    const label = document.createElement("div");
+    label.className = "pibo-wa-popup-label";
+    label.textContent = kind === "pin" ? "Pin annotation" : (target.label || target.selector || "Element annotation");
+    const textarea = document.createElement("textarea");
+    textarea.placeholder = "What should the agent know about this target?";
+    textarea.maxLength = caps.note;
+    const actions = document.createElement("div");
+    actions.className = "pibo-wa-row";
+    const submit = button("Submit", "Submit annotation");
+    const cancel = button("Cancel", "Cancel annotation");
+    actions.append(submit, cancel);
+    popup.append(label, textarea, actions);
+    shadow.append(popup);
+    state.popup = popup;
+    state.active = false;
+    positionPopup(popup, anchor);
+    updateUi("Add a note, submit, or cancel.");
+    textarea.focus({ preventScroll: true });
+    cancel.addEventListener("click", () => {
+      closePopup();
+      state.active = true;
+      updateUi("Cancelled. Annotation mode is active.");
+    });
+    submit.addEventListener("click", async () => {
+      const note = cap(textarea.value.trim(), caps.note);
+      if (!note) {
+        updateUi("Note is required before submitting.");
+        textarea.focus();
+        return;
+      }
+      submit.disabled = true;
+      const payload = buildPayload(kind, target, note);
+      state.submissions.push(payload);
+      try {
+        const response = await fetch(apiUrl() + "/submissions", {
+          method: "POST",
+          mode: "cors",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (!response.ok) throw new Error("HTTP " + response.status);
+        const data = await response.json().catch(() => ({}));
+        state.lastError = null;
+        try { window.dispatchEvent(new CustomEvent("pibo:web-annotation-saved", { detail: data })); } catch {}
+        closePopup();
+        state.active = true;
+        updateUi(data && data.annotation && data.annotation.id ? "Saved " + data.annotation.id + "." : "Saved annotation.");
+      } catch (error) {
+        state.lastError = error && error.message ? error.message : String(error);
+        submit.disabled = false;
+        updateUi("Submission failed: " + cap(state.lastError, 120));
+      }
+    });
+  }
+
+  function closePopup() {
+    if (state.popup) state.popup.remove();
+    state.popup = null;
+  }
+
+  function apiUrl() {
+    const base = config.apiBaseUrl || window.location.origin;
+    return base.replace(/\/$/, "") + "/api/web-annotations";
+  }
+
+  function buildPayload(kind, target, note) {
+    return {
+      bindingId: config.bindingId,
+      bindingToken: config.bindingToken,
+      note,
+      url: cap(window.location.href, 2000),
+      title: cap(document.title || "", 200),
+      targetKind: kind,
+      viewport: {
+        width: Math.max(0, Math.round(window.innerWidth || document.documentElement.clientWidth || 0)),
+        height: Math.max(0, Math.round(window.innerHeight || document.documentElement.clientHeight || 0)),
+        devicePixelRatio: Number(window.devicePixelRatio || 1),
+      },
+      target,
+    };
+  }
+
+  function buildPinTarget(event) {
+    return boundedTarget({
+      kind: "pin",
+      label: "pin " + Math.round(event.clientX) + "," + Math.round(event.clientY),
+      position: { x: Math.round(event.clientX), y: Math.round(event.clientY) },
+      sourceHints: [{ kind: "dom-fallback", confidence: "low", id: "pin", raw: { url: cap(location.pathname, 200) } }],
+    });
+  }
+
+  function buildElementTarget(element) {
+    const rect = element.getBoundingClientRect();
+    const selector = bestSelector(element);
+    const selectedText = getSelectedText();
+    const tagName = (element.tagName || "").toLowerCase();
+    const target = {
+      kind: "element",
+      label: cap(labelFor(element), caps.text),
+      selector,
+      domPath: cap(domPath(element, false), caps.domPath),
+      fullDomPath: cap(domPath(element, true), caps.domPath),
+      tagName,
+      stableId: stableId(element),
+      classSummary: cap(classSummary(element), caps.classSummary),
+      text: cap((element.innerText || element.textContent || "").replace(/\s+/g, " ").trim(), caps.text),
+      selectedText: selectedText || undefined,
+      htmlHint: cap(openingTagHint(element), caps.htmlHint),
+      accessibility: accessibilityHint(element),
+      boundingBox: { x: Math.round(rect.left), y: Math.round(rect.top), width: Math.round(rect.width), height: Math.round(rect.height) },
+      sourceHints: sourceHints(element, selector),
+    };
+    if (tagName === "iframe") {
+      target.accessibility = { ...(target.accessibility || {}), description: "Iframe contents are unavailable to the top-level annotation overlay when cross-origin." };
+    }
+    return boundedTarget(target);
+  }
+
+  function boundedTarget(target) {
+    if (target.selector) target.selector = cap(target.selector, caps.selector);
+    if (target.domPath) target.domPath = cap(target.domPath, caps.domPath);
+    if (target.fullDomPath) target.fullDomPath = cap(target.fullDomPath, caps.domPath);
+    if (target.text) target.text = cap(target.text, caps.text);
+    if (target.selectedText) target.selectedText = cap(target.selectedText, caps.text);
+    if (target.htmlHint) target.htmlHint = cap(target.htmlHint, caps.htmlHint);
+    if (target.classSummary) target.classSummary = cap(target.classSummary, caps.classSummary);
+    if (target.accessibility && target.accessibility.description) target.accessibility.description = cap(target.accessibility.description, caps.accessibility);
+    if (Array.isArray(target.sourceHints)) target.sourceHints = target.sourceHints.slice(0, 8).map(boundSourceHint);
+    return target;
+  }
+
+  function boundSourceHint(hint) {
+    const next = { ...hint };
+    if (next.id) next.id = cap(String(next.id), 160);
+    if (next.file) next.file = cap(String(next.file), 300);
+    if (next.component) next.component = cap(String(next.component), 160);
+    if (Array.isArray(next.componentPath)) next.componentPath = next.componentPath.slice(0, 12).map((item) => cap(String(item), 120));
+    if (next.raw) next.raw = truncateRaw(next.raw);
+    return next;
+  }
+
+  function truncateRaw(raw) {
+    try {
+      return JSON.parse(cap(JSON.stringify(raw), caps.sourceRaw));
+    } catch {
+      return { truncated: true };
+    }
+  }
+
+  function cap(value, max) {
+    if (value === undefined || value === null) return undefined;
+    const text = String(value).replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, "");
+    return text.length > max ? text.slice(0, max) : text;
+  }
+
+  function getSelectedText() {
+    const selection = window.getSelection && window.getSelection();
+    const text = selection ? selection.toString().replace(/\s+/g, " ").trim() : "";
+    return text ? cap(text, caps.text) : undefined;
+  }
+
+  function cssEscape(value) {
+    if (window.CSS && typeof window.CSS.escape === "function") return window.CSS.escape(value);
+    return String(value).replace(/[^a-zA-Z0-9_-]/g, (char) => "\\" + char);
+  }
+
+  function stableId(element) {
+    const attrs = ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-shared-terminal-card", "data-shared-status-field", "data-pibo-markdown-node", "data-testid", "data-test-id", "data-cy", "data-qa", "data-locatorjs-id", "id", "aria-label"];
+    let current = element;
+    while (current && current.nodeType === 1) {
+      for (const attr of attrs) {
+        const value = current.getAttribute && current.getAttribute(attr);
+        if (value && value.trim()) return attr + ":" + cap(value.trim(), 160);
+      }
+      const terminalRow = current.getAttribute && current.getAttribute("data-pibo-terminal-row");
+      if (terminalRow) {
+        const rowId = current.getAttribute("data-row-id") || current.getAttribute("data-row-kind") || terminalRow;
+        return "data-pibo-terminal-row:" + cap(rowId, 160);
+      }
+      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
+    }
+    return undefined;
+  }
+
+  function bestSelector(element) {
+    const direct = stableSelectorPart(element);
+    if (direct && direct.unique) return direct.selector;
+    const chain = [];
+    let current = element;
+    while (current && current.nodeType === 1 && current !== document.documentElement) {
+      const part = stableSelectorPart(current);
+      chain.unshift(part.selector);
+      const combined = chain.join(" > ");
+      if (safeQueryCount(combined) === 1) return combined;
+      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
+    }
+    return chain.length ? chain.join(" > ") : undefined;
+  }
+
+  function stableSelectorPart(element) {
+    const tag = (element.tagName || "*").toLowerCase();
+    const id = element.getAttribute && element.getAttribute("id");
+    if (id) {
+      const selector = "#" + cssEscape(id);
+      return { selector, unique: safeQueryCount(selector) === 1 };
+    }
+    for (const attr of ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-shared-terminal-card", "data-shared-status-field", "data-pibo-markdown-node", "data-testid", "data-test-id", "data-cy", "data-qa", "data-locatorjs-id", "aria-label"]) {
+      const value = element.getAttribute && element.getAttribute(attr);
+      if (value) {
+        const selector = tag + "[" + attr + "=\"" + String(value).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"") + "\"]";
+        return { selector, unique: safeQueryCount(selector) === 1 };
+      }
+    }
+    if (element.getAttribute && element.getAttribute("data-pibo-terminal-row")) {
+      const rowId = element.getAttribute("data-row-id");
+      if (rowId) {
+        const selector = tag + "[data-pibo-terminal-row=\"true\"][data-row-id=\"" + String(rowId).replace(/\\/g, "\\\\").replace(/\"/g, "\\\"") + "\"]";
+        return { selector, unique: safeQueryCount(selector) === 1 };
+      }
+      return { selector: tag + "[data-pibo-terminal-row=\"true\"]", unique: false };
+    }
+    return { selector: tag + ":nth-of-type(" + nthOfType(element) + ")", unique: false };
+  }
+
+  function safeQueryCount(selector) {
+    try { return document.querySelectorAll(selector).length; } catch { return 0; }
+  }
+
+  function nthOfType(element) {
+    let index = 1;
+    let sibling = element.previousElementSibling;
+    while (sibling) {
+      if (sibling.tagName === element.tagName) index += 1;
+      sibling = sibling.previousElementSibling;
+    }
+    return index;
+  }
+
+  function domPath(element, full) {
+    const parts = [];
+    let current = element;
+    while (current && current.nodeType === 1) {
+      const tag = (current.tagName || "").toLowerCase();
+      if (!tag) break;
+      const id = current.getAttribute && current.getAttribute("id");
+      const testId = current.getAttribute && (current.getAttribute("data-pibo-id") || current.getAttribute("data-pibo-component") || current.getAttribute("data-pibo-debug") || current.getAttribute("data-shared-terminal-card") || current.getAttribute("data-shared-status-field") || current.getAttribute("data-pibo-markdown-node") || current.getAttribute("data-testid") || current.getAttribute("data-test-id"));
+      let part = tag;
+      if (id) part += "#" + id;
+      else if (testId) part += "[" + testId + "]";
+      else if (current.getAttribute && current.getAttribute("data-pibo-terminal-row")) part += "[terminal-row:" + (current.getAttribute("data-row-kind") || "true") + "]";
+      else part += ":nth-of-type(" + nthOfType(current) + ")";
+      parts.unshift(part);
+      if (!full && (id || testId || current.getAttribute && current.getAttribute("data-pibo-terminal-row") || parts.length >= 5)) break;
+      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
+    }
+    return parts.join(" > ");
+  }
+
+  function classSummary(element) {
+    const classes = Array.from(element.classList || []).filter((name) => !/[a-f0-9]{7,}/i.test(name)).slice(0, 12);
+    return classes.join(" ") || undefined;
+  }
+
+  function openingTagHint(element) {
+    const clone = element.cloneNode(false);
+    const html = clone.outerHTML || "";
+    return html.replace(/><\/[\s\S]*$/, ">");
+  }
+
+  function labelFor(element) {
+    const aria = element.getAttribute && (element.getAttribute("aria-label") || element.getAttribute("title") || element.getAttribute("alt"));
+    const text = (element.innerText || element.textContent || "").replace(/\s+/g, " ").trim();
+    const tag = (element.tagName || "element").toLowerCase();
+    return aria ? tag + " \"" + aria + "\"" : (text ? tag + " \"" + text.slice(0, 80) + "\"" : tag);
+  }
+
+  function accessibilityHint(element) {
+    const focusable = Boolean(element.matches && element.matches("a[href],button,input,textarea,select,[tabindex]"));
+    const role = element.getAttribute && element.getAttribute("role") || undefined;
+    const ariaLabel = element.getAttribute && element.getAttribute("aria-label") || undefined;
+    return { role, name: cap(ariaLabel || element.getAttribute && element.getAttribute("title") || undefined, 160), ariaLabel: cap(ariaLabel, 160), focusable };
+  }
+
+  function sourceHints(element, selector) {
+    const hints = [];
+    const explicit = explicitSourceHints(element);
+    hints.push(...explicit);
+    const locator = locatorHint(element);
+    if (locator && !hasEquivalentHint(hints, locator)) hints.push(locator);
+    const react = reactHint(element);
+    if (react && !hasEquivalentHint(hints, react)) hints.push(react);
+    if (!hints.length) hints.push({ kind: "dom-fallback", confidence: "low", id: selector || domPath(element, false), raw: { tagName: (element.tagName || "").toLowerCase() } });
+    return hints;
+  }
+
+  function explicitSourceHints(element) {
+    const hints = [];
+    const deferredTestHints = [];
+    let current = element;
+    while (current && current.nodeType === 1 && hints.length < 8) {
+      const tagName = (current.tagName || "").toLowerCase();
+      const piboId = current.getAttribute && current.getAttribute("data-pibo-id");
+      if (piboId) pushHint(hints, { kind: "pibo-id", confidence: "high", id: piboId, raw: { tagName } });
+      const component = current.getAttribute && current.getAttribute("data-pibo-component");
+      if (component) pushHint(hints, { kind: "pibo-component", confidence: "high", id: component, component, raw: collectPiboRaw(current) });
+      const debug = current.getAttribute && current.getAttribute("data-pibo-debug");
+      if (debug) pushHint(hints, { kind: "pibo-debug", confidence: "high", id: debug, component, raw: collectPiboRaw(current) });
+      const markdownNode = current.getAttribute && current.getAttribute("data-pibo-markdown-node");
+      if (markdownNode) pushHint(hints, { kind: "pibo-markdown", confidence: "high", id: markdownNode, component: component || "MarkdownRenderer", raw: collectPiboRaw(current) });
+      const sharedCard = current.getAttribute && current.getAttribute("data-shared-terminal-card");
+      if (sharedCard) pushHint(hints, { kind: "pibo-shared-card", confidence: "high", id: sharedCard, component: component || "TerminalCard", raw: collectPiboRaw(current) });
+      const sharedField = current.getAttribute && current.getAttribute("data-shared-status-field");
+      if (sharedField) pushHint(hints, { kind: "pibo-shared-card", confidence: "high", id: "status-field:" + sharedField, component: component || "TerminalStatusCard", raw: collectPiboRaw(current) });
+      if (current.getAttribute && current.getAttribute("data-pibo-terminal-row")) {
+        pushHint(hints, { kind: "pibo-terminal-row", confidence: "high", id: current.getAttribute("data-row-id") || current.getAttribute("data-row-kind") || "terminal-row", component: component || "TerminalRow", raw: collectPiboRaw(current) });
+      }
+      const testId = current.getAttribute && (current.getAttribute("data-testid") || current.getAttribute("data-test-id") || current.getAttribute("data-cy") || current.getAttribute("data-qa"));
+      if (testId) {
+        const testHint = { kind: "test-id", confidence: "high", id: testId, raw: { tagName } };
+        if (/^virtuoso/i.test(testId) || /virtuoso/i.test(testId)) deferredTestHints.push(testHint);
+        else pushHint(hints, testHint);
+      }
+      const locatorId = current.getAttribute && current.getAttribute("data-locatorjs-id");
+      if (locatorId) pushHint(hints, { kind: "locatorjs", confidence: "high", id: locatorId, raw: collectLocatorRaw(current) });
+      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
+    }
+    if (!hints.length) deferredTestHints.slice(0, 2).forEach((hint) => pushHint(hints, hint));
+    return hints;
+  }
+
+  function pushHint(hints, hint) {
+    if (!hint || !hint.kind) return;
+    if (hasEquivalentHint(hints, hint)) return;
+    hints.push(hint);
+  }
+
+  function hasEquivalentHint(hints, hint) {
+    return hints.some((existing) => existing.kind === hint.kind && (existing.id || "") === (hint.id || "") && (existing.component || "") === (hint.component || ""));
+  }
+
+  function collectPiboRaw(element) {
+    const raw = { tagName: (element.tagName || "").toLowerCase() };
+    for (const attr of ["data-pibo-id", "data-pibo-component", "data-pibo-debug", "data-pibo-session-id", "data-pibo-title", "data-pibo-selected", "data-pibo-state", "data-pibo-terminal-row", "data-pibo-markdown-node", "data-pibo-markdown-kind", "data-shared-terminal-card", "data-shared-status-field", "data-row-id", "data-row-kind", "data-row-status", "data-trace-node-id", "data-event-id", "data-run-id", "data-order-source", "data-order-stream-id", "data-order-frame-index"]) {
+      const value = element.getAttribute && element.getAttribute(attr);
+      if (value) raw[attr.replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase())] = cap(value, 300);
+    }
+    return raw;
+  }
+
+  function locatorHint(element) {
+    let current = element;
+    while (current && current.nodeType === 1) {
+      const raw = collectLocatorRaw(current);
+      const file = raw.file || raw.sourceFile || raw.source;
+      const component = raw.component || raw.componentName;
+      if (file || component || raw.line || raw.column) {
+        return { kind: "locatorjs", confidence: "high", id: raw.id, file, line: numberOrUndefined(raw.line), column: numberOrUndefined(raw.column), component, raw };
+      }
+      current = current.parentElement || (current.getRootNode && current.getRootNode().host) || null;
+    }
+    return undefined;
+  }
+
+  function collectLocatorRaw(element) {
+    const names = ["data-locatorjs-id", "data-locatorjs-source", "data-locatorjs-file", "data-locatorjs-line", "data-locatorjs-column", "data-locatorjs-component", "data-source", "data-source-file", "data-source-line", "data-source-column", "data-component", "data-component-path"];
+    const raw = {};
+    for (const name of names) {
+      const value = element.getAttribute && element.getAttribute(name);
+      if (value) raw[name.replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase())] = cap(value, 300);
+    }
+    return raw;
+  }
+
+  function reactHint(element) {
+    let current = element;
+    while (current && current.nodeType === 1) {
+      const key = Object.keys(current).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
+      let fiber = key ? current[key] : undefined;
+      const names = [];
+      let source;
+      let guard = 0;
+      while (fiber && guard < 20) {
+        const type = fiber.elementType || fiber.type;
+        const name = typeof type === "function" ? (type.displayName || type.name) : (typeof type === "string" ? type : undefined);
+        if (name) names.push(name);
+        if (!source && fiber._debugSource) source = fiber._debugSource;
+        fiber = fiber.return;
+        guard += 1;
+      }
+      if (names.length || source) {
+        return {
+          kind: source ? "jsx-source" : "react-fiber",
+          confidence: "medium",
+          file: source && source.fileName,
+          line: source && source.lineNumber,
+          column: source && source.columnNumber,
+          component: names[0],
+          componentPath: names.slice(0, 12),
+          raw: source ? { source } : { components: names.slice(0, 12) },
+        };
+      }
+      current = current.parentElement || null;
+    }
+    return undefined;
+  }
+
+  function numberOrUndefined(value) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+
+  document.addEventListener("mousemove", onMouseMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  window.addEventListener("pibo:web-annotation-shortcut-changed", onShortcutChanged);
+  window.addEventListener("pagehide", onPageHide);
+  window.addEventListener("resize", onViewportChange);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener("resize", onViewportChange);
+    window.visualViewport.addEventListener("scroll", onViewportChange);
+  }
+  updateUi();
+
+  const api = {
+    bindingId: config.bindingId,
+    piboSessionId: config.piboSessionId,
+    injectedAt: new Date().toISOString(),
+    setActive(value) {
+      state.active = Boolean(value);
+      updateUi();
+      publishOverlayState("set-active");
+    },
+    setMode(value) {
+      state.mode = value === "pin" ? "pin" : "element";
+      state.active = true;
+      updateUi();
+      publishOverlayState("set-mode");
+    },
+    setShortcut(value) { setShortcut(value); },
+    getState() { return { active: state.active, toolbarExpanded: state.toolbarExpanded, mode: state.mode, shortcut: state.shortcut.label, submissions: state.submissions.slice(), lastError: state.lastError }; },
+    remove() {
+      state.active = false;
+      publishOverlayState("removed", false);
+      document.removeEventListener("mousemove", onMouseMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pibo:web-annotation-shortcut-changed", onShortcutChanged);
+      window.removeEventListener("pagehide", onPageHide);
+      window.removeEventListener("resize", onViewportChange);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", onViewportChange);
+        window.visualViewport.removeEventListener("scroll", onViewportChange);
+      }
+      if (state.pendingFrame) cancelAnimationFrame(state.pendingFrame);
+      closePopup();
+      outline.remove();
+      host.remove();
+      if (window.__piboWebAnnotations && window.__piboWebAnnotations.bindingId === config.bindingId) delete window.__piboWebAnnotations;
+    },
+  };
+  window.__piboWebAnnotations = api;
+  publishOverlayState("installed");
+  return { ok: true, url: location.href, title: document.title || "" };
 })()`;
 }
 function buildStopExpression() {
-    return `(() => {
-  const previous = window.__piboWebAnnotations;
-  if (previous && typeof previous.remove === "function") previous.remove();
-  const root = document.getElementById("pibo-web-annotation-overlay");
-  if (root) root.remove();
-  return { ok: true };
+    return `(() => {
+  const previous = window.__piboWebAnnotations;
+  if (previous && typeof previous.remove === "function") previous.remove();
+  const root = document.getElementById("pibo-web-annotation-overlay");
+  if (root) root.remove();
+  return { ok: true };
 })()`;
 }