agentation-vue 0.2.1 → 0.2.3

package/dist/AgentationVue.vue

@@ -1,292 +1,235 @@
-<script setup lang="ts">
-import type { KeyboardShortcutConfig } from './composables/useKeyboardShortcuts'
-import type { Annotation, OutputDetail, Settings } from './types'
-import { isVue2 as _isVue2, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue-demi'
-import AgentationToolbar from './components/AgentationToolbar.vue'
-import AnnotationInput from './components/AnnotationInput.vue'
-import AnnotationMarker from './components/AnnotationMarker.vue'
-import ElementHighlight from './components/ElementHighlight.vue'
-import SettingsPopover from './components/SettingsPopover.vue'
-import { useAnimationPause } from './composables/useAnimationPause'
-import { useAnnotations } from './composables/useAnnotations'
-import { useAreaSelect } from './composables/useAreaSelect'
-import { useElementDetection } from './composables/useElementDetection'
-import { useInteractionMode } from './composables/useInteractionMode'
-import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from './composables/useKeyboardShortcuts'
-import { useMarkerPositions } from './composables/useMarkerPositions'
-import { useMultiSelect } from './composables/useMultiSelect'
-import { useOutputFormatter } from './composables/useOutputFormatter'
-import { useSettings } from './composables/useSettings'
-import { useTextSelection } from './composables/useTextSelection'
-import { VA_DATA_ATTR_SELECTOR } from './constants'
-import { copyToClipboard } from './utils/clipboard'
-import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from './utils/dom-inspector'
-import { createPortalContainer, destroyPortalContainer } from './utils/portal'
-import { getElementName, getElementPath } from './utils/selectors'
-import { boundingBoxToStyle } from './utils/style'
-
-const props = withDefaults(defineProps<{
-  outputDetail?: OutputDetail
-  markerColor?: string
-  copyToClipboard?: boolean
-  blockPageInteractions?: boolean
-  autoHideToolbar?: boolean
-  pageUrl?: string
-  theme?: 'light' | 'dark' | 'auto'
-  activationKey?: 'none' | 'Meta' | 'Alt' | 'Shift'
-}>(), {
-  copyToClipboard: true,
-})
-
-const emit = defineEmits<{
-  'annotation-add': [annotation: Annotation]
-  'annotation-delete': [annotation: Annotation]
-  'annotation-update': [annotation: Annotation]
-  'annotations-clear': [annotations: Annotation[]]
-  'copy': [markdown: string]
-}>()
-
-const HISTORY_CHANGE_EVENT = 'va:history-change'
-
-interface VaWindow extends Window {
-  __vaHistoryPatched?: boolean
-}
-
+<script setup>
+import { isVue2 as _isVue2, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue-demi";
+import AgentationToolbar from "./components/AgentationToolbar.vue";
+import AnnotationInput from "./components/AnnotationInput.vue";
+import AnnotationMarker from "./components/AnnotationMarker.vue";
+import ElementHighlight from "./components/ElementHighlight.vue";
+import SettingsPopover from "./components/SettingsPopover.vue";
+import { useAnimationPause } from "./composables/useAnimationPause";
+import { useAnnotations } from "./composables/useAnnotations";
+import { useAreaSelect } from "./composables/useAreaSelect";
+import { useElementDetection } from "./composables/useElementDetection";
+import { useInteractionMode } from "./composables/useInteractionMode";
+import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts";
+import { useMarkerPositions } from "./composables/useMarkerPositions";
+import { useMultiSelect } from "./composables/useMultiSelect";
+import { useOutputFormatter } from "./composables/useOutputFormatter";
+import { useSettings } from "./composables/useSettings";
+import { useTextSelection } from "./composables/useTextSelection";
+import { VA_DATA_ATTR_SELECTOR } from "./constants";
+import { copyToClipboard } from "./utils/clipboard";
+import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector";
+import { createPortalContainer, destroyPortalContainer } from "./utils/portal";
+import { getElementName, getElementPath } from "./utils/selectors";
+import { boundingBoxToStyle } from "./utils/style";
+const props = defineProps({
+  outputDetail: { type: String, required: false },
+  markerColor: { type: String, required: false },
+  copyToClipboard: { type: Boolean, required: false, default: true },
+  blockPageInteractions: { type: Boolean, required: false },
+  autoHideToolbar: { type: Boolean, required: false },
+  pageUrl: { type: String, required: false },
+  theme: { type: String, required: false },
+  activationKey: { type: String, required: false }
+});
+const emit = defineEmits(["annotation-add", "annotation-delete", "annotation-update", "annotations-clear", "copy"]);
+const HISTORY_CHANGE_EVENT = "va:history-change";
 function getCurrentUrl() {
-  return typeof window !== 'undefined' ? window.location.href : ''
+  return typeof window !== "undefined" ? window.location.href : "";
 }
-
 function patchHistoryEvents() {
-  const win = window as VaWindow
+  const win = window;
   if (win.__vaHistoryPatched)
-    return
-  win.__vaHistoryPatched = true
-
-  const originalPushState = win.history.pushState.bind(win.history)
-  const originalReplaceState = win.history.replaceState.bind(win.history)
-
-  win.history.pushState = function (...args: Parameters<History['pushState']>) {
-    originalPushState(...args)
-    win.dispatchEvent(new Event(HISTORY_CHANGE_EVENT))
-  }
-
-  win.history.replaceState = function (...args: Parameters<History['replaceState']>) {
-    originalReplaceState(...args)
-    win.dispatchEvent(new Event(HISTORY_CHANGE_EVENT))
-  }
-}
-
-// Refs
-const rootEl = ref<HTMLElement | null>(null)
-const overlayEl = ref<HTMLElement | null>(null)
-const toolbarRef = ref<any>(null)
-const currentUrl = ref(props.pageUrl || getCurrentUrl())
-
-// Core composables
-const { settings } = useSettings()
-const { mode, transition } = useInteractionMode()
-const { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl } = useAnnotations(currentUrl.value)
-const { hoveredRect, hoveredName, hoveredComponentChain, onMouseMove, clearHighlight, getElementUnderOverlay, cleanup: cleanupDetection } = useElementDetection(overlayEl, () => settings.showComponentTree)
-const textSelection = useTextSelection(mode)
-const multiSelect = useMultiSelect(mode, transition)
-const areaSelect = useAreaSelect(mode, transition)
-const animPause = useAnimationPause()
-const { recalculatePositions: _recalculatePositions } = useMarkerPositions(annotations)
-const { formatAnnotations } = useOutputFormatter()
-
-// Local state
-const pendingPosition = ref<{ x: number, y: number } | null>(null)
-const pendingElementName = ref('')
-const pendingTarget = ref<Element | null>(null)
-const pendingComponentChain = ref<string | undefined>()
-const pendingComputedStyles = ref<Record<string, string> | undefined>()
-const pendingTextSelection = ref<{ text: string, element: Element, rect: { x: number, y: number, width: number, height: number } } | null>(null)
-const editingAnnotation = ref<Annotation | null>(null)
-const settingsOpen = ref(false)
-const settingsAnchorEl = ref<HTMLElement | null>(null)
-const copyFeedback = ref(false)
-const toolbarDragging = ref(false)
-const DRAG_END_SUPPRESSION_MS = 500
-const SETTINGS_CLOSE_SUPPRESSION_MS = 220
-let suppressInteractionsUntil = 0
-const effectiveBlockPageInteractions = computed(() => props.blockPageInteractions ?? settings.blockPageInteractions)
+    return;
+  win.__vaHistoryPatched = true;
+  const originalPushState = win.history.pushState.bind(win.history);
+  const originalReplaceState = win.history.replaceState.bind(win.history);
+  win.history.pushState = function(...args) {
+    originalPushState(...args);
+    win.dispatchEvent(new Event(HISTORY_CHANGE_EVENT));
+  };
+  win.history.replaceState = function(...args) {
+    originalReplaceState(...args);
+    win.dispatchEvent(new Event(HISTORY_CHANGE_EVENT));
+  };
+}
+const rootEl = ref(null);
+const overlayEl = ref(null);
+const toolbarRef = ref(null);
+const currentUrl = ref(props.pageUrl || getCurrentUrl());
+const { settings } = useSettings();
+const { mode, transition } = useInteractionMode();
+const { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl } = useAnnotations(currentUrl.value);
+const { hoveredRect, hoveredName, hoveredComponentChain, onMouseMove, clearHighlight, getElementUnderOverlay, cleanup: cleanupDetection } = useElementDetection(overlayEl, () => settings.showComponentTree);
+const textSelection = useTextSelection(mode);
+const multiSelect = useMultiSelect(mode, transition);
+const areaSelect = useAreaSelect(mode, transition);
+const animPause = useAnimationPause();
+const { recalculatePositions: _recalculatePositions } = useMarkerPositions(annotations);
+const { formatAnnotations } = useOutputFormatter();
+const pendingPosition = ref(null);
+const pendingElementName = ref("");
+const pendingTarget = ref(null);
+const pendingComponentChain = ref();
+const pendingComputedStyles = ref();
+const pendingTextSelection = ref(null);
+const editingAnnotation = ref(null);
+const settingsOpen = ref(false);
+const settingsAnchorEl = ref(null);
+const copyFeedback = ref(false);
+const toolbarDragging = ref(false);
+const DRAG_END_SUPPRESSION_MS = 500;
+const SETTINGS_CLOSE_SUPPRESSION_MS = 220;
+let suppressInteractionsUntil = 0;
+const effectiveBlockPageInteractions = computed(() => props.blockPageInteractions ?? settings.blockPageInteractions);
 const rootStyle = computed(() => {
-  const hex = settings.markerColor
+  const hex = settings.markerColor;
   if (!hex)
-    return undefined
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
+    return void 0;
+  const r = Number.parseInt(hex.slice(1, 3), 16);
+  const g = Number.parseInt(hex.slice(3, 5), 16);
+  const b = Number.parseInt(hex.slice(5, 7), 16);
   return {
-    '--va-accent': hex,
-    '--va-accent-rgb': `${r}, ${g}, ${b}`,
-  } as Record<string, string>
-})
-const resolvedUrl = computed(() => currentUrl.value)
+    "--va-accent": hex,
+    "--va-accent-rgb": `${r}, ${g}, ${b}`
+  };
+});
+const resolvedUrl = computed(() => currentUrl.value);
 const pendingMarkerX = computed(() => {
   if (!pendingPosition.value)
-    return 0
-  return (pendingPosition.value.x / window.innerWidth) * 100
-})
+    return 0;
+  return pendingPosition.value.x / window.innerWidth * 100;
+});
 const pendingMarkerY = computed(() => {
   if (!pendingPosition.value)
-    return 0
-  return pendingPosition.value.y + (window.scrollY || document.documentElement.scrollTop)
-})
-const pendingIsSelection = computed(() => (
-  mode.value === 'input-open'
-  && !editingAnnotation.value
-  && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value)
-))
-
-// Portal setup (Vue 2.7 compat)
-let portalContainer: HTMLElement | null = null
-const isVue2 = _isVue2
-
+    return 0;
+  return pendingPosition.value.y + (window.scrollY || document.documentElement.scrollTop);
+});
+const pendingIsSelection = computed(() => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value));
+let portalContainer = null;
+const isVue2 = _isVue2;
 const PassThrough = defineComponent({
   render() {
-    // eslint-disable-next-line vue/require-slots-as-functions -- Vue 2: $slots.default is VNode[], not a function
-    const slot = this.$slots.default
-    return (typeof slot === 'function' ? slot() : slot?.[0]) || null
-  },
-})
-
-const portalWrapper = isVue2 ? PassThrough : 'Teleport'
-const portalProps = isVue2 ? {} : { to: 'body' }
-
+    const slot = this.$slots.default;
+    return (typeof slot === "function" ? slot() : slot?.[0]) || null;
+  }
+});
+const portalWrapper = isVue2 ? PassThrough : "Teleport";
+const portalProps = isVue2 ? {} : { to: "body" };
 onMounted(() => {
   if (isVue2 && rootEl.value) {
-    portalContainer = createPortalContainer()
-    portalContainer.appendChild(rootEl.value)
+    portalContainer = createPortalContainer();
+    portalContainer.appendChild(rootEl.value);
   }
-})
-
+});
 onBeforeUnmount(() => {
-  animPause.cleanup()
-  cleanupDetection()
+  animPause.cleanup();
+  cleanupDetection();
   if (portalContainer) {
-    destroyPortalContainer(portalContainer)
+    destroyPortalContainer(portalContainer);
   }
-})
-
-// Apply prop overrides to settings
+});
 watch(() => props.outputDetail, (v) => {
   if (v)
-    settings.outputDetail = v
-}, { immediate: true })
+    settings.outputDetail = v;
+}, { immediate: true });
 watch(() => props.markerColor, (v) => {
   if (v)
-    settings.markerColor = v
-}, { immediate: true })
+    settings.markerColor = v;
+}, { immediate: true });
 watch(() => props.theme, (v) => {
   if (v)
-    settings.theme = v
-}, { immediate: true })
+    settings.theme = v;
+}, { immediate: true });
 watch(() => props.blockPageInteractions, (v) => {
   if (v)
-    settings.blockPageInteractions = v
-}, { immediate: true })
+    settings.blockPageInteractions = v;
+}, { immediate: true });
 watch(() => props.autoHideToolbar, (v) => {
   if (v)
-    settings.autoHideToolbar = v
-}, { immediate: true })
+    settings.autoHideToolbar = v;
+}, { immediate: true });
 watch(() => props.pageUrl, (url) => {
-  syncUrlScope(url || getCurrentUrl())
-}, { immediate: true })
+  syncUrlScope(url || getCurrentUrl());
+}, { immediate: true });
 watch(() => props.activationKey, (v) => {
-  if (v !== undefined)
-    settings.activationKey = v
-}, { immediate: true })
-
-// Event handlers
+  if (v !== void 0)
+    settings.activationKey = v;
+}, { immediate: true });
 function onActivate() {
-  transition('inspect')
+  transition("inspect");
 }
-
 function onDeactivate() {
-  transition('idle')
-  clearHighlight()
-  closeSettings(false)
+  transition("idle");
+  clearHighlight();
+  closeSettings(false);
 }
-
-function onOverlayMouseMove(e: MouseEvent) {
+function onOverlayMouseMove(e) {
   if (isInteractionLocked())
-    return
-  if (mode.value === 'inspect') {
-    onMouseMove(e)
-  }
-  else if (mode.value === 'multi-selecting') {
-    multiSelect.onMouseMove(e)
-  }
-  else if (mode.value === 'area-selecting') {
-    areaSelect.onMouseMove(e)
+    return;
+  if (mode.value === "inspect") {
+    onMouseMove(e);
+  } else if (mode.value === "multi-selecting") {
+    multiSelect.onMouseMove(e);
+  } else if (mode.value === "area-selecting") {
+    areaSelect.onMouseMove(e);
   }
 }
-
-function onOverlayMouseDown(e: MouseEvent) {
+function onOverlayMouseDown(e) {
   if (isInteractionLocked())
-    return
+    return;
   if (multiSelect.onMouseDown(e))
-    return
-  areaSelect.onMouseDown(e)
+    return;
+  areaSelect.onMouseDown(e);
 }
-
-function onOverlayMouseUp(e: MouseEvent) {
+function onOverlayMouseUp(e) {
   if (isInteractionLocked())
-    return
-  if (mode.value === 'multi-selecting') {
-    multiSelect.onMouseUp()
+    return;
+  if (mode.value === "multi-selecting") {
+    multiSelect.onMouseUp();
     if (multiSelect.selectedElements.value.length > 0) {
-      const elements = multiSelect.selectedElements.value
-      const rect = multiSelect.selectionRect.value
-      pendingPosition.value = rect
-        ? { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
-        : { x: e.clientX, y: e.clientY }
-      pendingElementName.value = `${elements.length} elements selected`
-      pendingComponentChain.value = undefined
-      pendingComputedStyles.value = undefined
-      pendingTarget.value = null
-      transition('input-open')
-    }
-    else {
-      multiSelect.reset()
-      transition('inspect')
+      const elements = multiSelect.selectedElements.value;
+      const rect = multiSelect.selectionRect.value;
+      pendingPosition.value = rect ? { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 } : { x: e.clientX, y: e.clientY };
+      pendingElementName.value = `${elements.length} elements selected`;
+      pendingComponentChain.value = void 0;
+      pendingComputedStyles.value = void 0;
+      pendingTarget.value = null;
+      transition("input-open");
+    } else {
+      multiSelect.reset();
+      transition("inspect");
     }
-    return
+    return;
   }
-
-  if (mode.value === 'area-selecting') {
-    areaSelect.onMouseUp()
-    const rect = areaSelect.areaRect.value
+  if (mode.value === "area-selecting") {
+    areaSelect.onMouseUp();
+    const rect = areaSelect.areaRect.value;
     if (rect && rect.width > 10 && rect.height > 10) {
-      pendingPosition.value = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
-      pendingElementName.value = 'Area selection'
-      pendingComponentChain.value = undefined
-      pendingComputedStyles.value = undefined
-      pendingTarget.value = null
-      transition('input-open')
+      pendingPosition.value = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+      pendingElementName.value = "Area selection";
+      pendingComponentChain.value = void 0;
+      pendingComputedStyles.value = void 0;
+      pendingTarget.value = null;
+      transition("input-open");
+    } else {
+      areaSelect.reset();
+      transition("inspect");
     }
-    else {
-      areaSelect.reset()
-      transition('inspect')
-    }
-    return
+    return;
   }
-
-  if (mode.value !== 'inspect')
-    return
-
-  // Check for text selection first
-  const textResult = textSelection.checkTextSelection(e)
+  if (mode.value !== "inspect")
+    return;
+  const textResult = textSelection.checkTextSelection(e);
   if (textResult) {
     pendingPosition.value = {
       x: textResult.rect.left + textResult.rect.width / 2,
-      y: textResult.rect.bottom,
-    }
-    pendingElementName.value = `"${textResult.selectedText.slice(0, 30)}"`
-    pendingComponentChain.value = getVueComponents(textResult.anchorElement)
-    pendingComputedStyles.value = getRelevantComputedStyles(textResult.anchorElement)
-    pendingTarget.value = textResult.anchorElement
+      y: textResult.rect.bottom
+    };
+    pendingElementName.value = `"${textResult.selectedText.slice(0, 30)}"`;
+    pendingComponentChain.value = getVueComponents(textResult.anchorElement);
+    pendingComputedStyles.value = getRelevantComputedStyles(textResult.anchorElement);
+    pendingTarget.value = textResult.anchorElement;
     pendingTextSelection.value = {
       text: textResult.selectedText,
       element: textResult.anchorElement,
@@ -294,192 +237,163 @@ function onOverlayMouseUp(e: MouseEvent) {
         x: textResult.rect.x,
         y: textResult.rect.y,
         width: textResult.rect.width,
-        height: textResult.rect.height,
-      },
-    }
-    transition('input-open')
-    return
+        height: textResult.rect.height
+      }
+    };
+    transition("input-open");
+    return;
   }
-
-  // Normal click annotation
-  const el = getElementUnderOverlay(e)
+  const el = getElementUnderOverlay(e);
   if (!el || el.closest(VA_DATA_ATTR_SELECTOR))
-    return
-
-  pendingPosition.value = { x: e.clientX, y: e.clientY }
-  pendingElementName.value = getElementName(el)
-  pendingComponentChain.value = settings.showComponentTree ? detectVueComponents(el) : undefined
-  pendingComputedStyles.value = getRelevantComputedStyles(el)
-  pendingTarget.value = el
-  pendingTextSelection.value = null
-  transition('input-open')
-}
-
-function onOverlayWheel(_e: WheelEvent) {
+    return;
+  pendingPosition.value = { x: e.clientX, y: e.clientY };
+  pendingElementName.value = getElementName(el);
+  pendingComponentChain.value = settings.showComponentTree ? detectVueComponents(el) : void 0;
+  pendingComputedStyles.value = getRelevantComputedStyles(el);
+  pendingTarget.value = el;
+  pendingTextSelection.value = null;
+  transition("input-open");
+}
+function onOverlayWheel(_e) {
   if (isInteractionLocked())
-    return
-  const overlay = overlayEl.value
+    return;
+  const overlay = overlayEl.value;
   if (!overlay)
-    return
-  const previousPointerEvents = overlay.style.pointerEvents
-  overlay.style.pointerEvents = 'none'
+    return;
+  const previousPointerEvents = overlay.style.pointerEvents;
+  overlay.style.pointerEvents = "none";
   requestAnimationFrame(() => {
     if (overlay)
-      overlay.style.pointerEvents = previousPointerEvents
-  })
+      overlay.style.pointerEvents = previousPointerEvents;
+  });
 }
-
-function getElementAtPointThroughOverlay(x: number, y: number): Element | null {
-  const overlay = overlayEl.value
+function getElementAtPointThroughOverlay(x, y) {
+  const overlay = overlayEl.value;
   if (!overlay)
-    return document.elementFromPoint(x, y)
-
-  const previousPointerEvents = overlay.style.pointerEvents
-  overlay.style.pointerEvents = 'none'
-  const el = document.elementFromPoint(x, y)
-  overlay.style.pointerEvents = previousPointerEvents
-  return el
+    return document.elementFromPoint(x, y);
+  const previousPointerEvents = overlay.style.pointerEvents;
+  overlay.style.pointerEvents = "none";
+  const el = document.elementFromPoint(x, y);
+  overlay.style.pointerEvents = previousPointerEvents;
+  return el;
 }
-
 function shouldUseDocumentFallbackEvents() {
-  return mode.value === 'inspect' && !effectiveBlockPageInteractions.value && !isInteractionLocked()
+  return mode.value === "inspect" && !effectiveBlockPageInteractions.value && !isInteractionLocked();
 }
-
-function lockInteractionsTemporarily(durationMs: number) {
-  suppressInteractionsUntil = Math.max(suppressInteractionsUntil, Date.now() + durationMs)
+function lockInteractionsTemporarily(durationMs) {
+  suppressInteractionsUntil = Math.max(suppressInteractionsUntil, Date.now() + durationMs);
 }
-
 function isInteractionLocked() {
-  return settingsOpen.value || toolbarDragging.value || Date.now() < suppressInteractionsUntil
+  return settingsOpen.value || toolbarDragging.value || Date.now() < suppressInteractionsUntil;
 }
-
 function closeSettings(lockInteractions = true) {
   if (!settingsOpen.value)
-    return
-  settingsOpen.value = false
+    return;
+  settingsOpen.value = false;
   if (lockInteractions)
-    lockInteractionsTemporarily(SETTINGS_CLOSE_SUPPRESSION_MS)
+    lockInteractionsTemporarily(SETTINGS_CLOSE_SUPPRESSION_MS);
 }
-
-function syncUrlScope(nextUrl: string) {
+function syncUrlScope(nextUrl) {
   if (!nextUrl || currentUrl.value === nextUrl)
-    return
-  currentUrl.value = nextUrl
-  setScopeUrl(nextUrl)
+    return;
+  currentUrl.value = nextUrl;
+  setScopeUrl(nextUrl);
 }
-
 function syncUrlScopeFromWindow() {
   if (props.pageUrl)
-    return
-  syncUrlScope(getCurrentUrl())
+    return;
+  syncUrlScope(getCurrentUrl());
 }
-
 function onToolbarDragStart() {
-  toolbarDragging.value = true
+  toolbarDragging.value = true;
 }
-
 function onToolbarDragEnd() {
-  toolbarDragging.value = false
-  // Ignore trailing mouseup/click compatibility events right after drag release.
-  lockInteractionsTemporarily(DRAG_END_SUPPRESSION_MS)
+  toolbarDragging.value = false;
+  lockInteractionsTemporarily(DRAG_END_SUPPRESSION_MS);
 }
-
-function onDocumentMouseMove(e: MouseEvent) {
+function onDocumentMouseMove(e) {
   if (!shouldUseDocumentFallbackEvents())
-    return
-  onOverlayMouseMove(e)
+    return;
+  onOverlayMouseMove(e);
 }
-
-function onDocumentMouseDown(e: MouseEvent) {
+function onDocumentMouseDown(e) {
   if (!shouldUseDocumentFallbackEvents())
-    return
-  onOverlayMouseDown(e)
+    return;
+  onOverlayMouseDown(e);
 }
-
-function onDocumentMouseUp(e: MouseEvent) {
+function onDocumentMouseUp(e) {
   if (!shouldUseDocumentFallbackEvents())
-    return
-  onOverlayMouseUp(e)
+    return;
+  onOverlayMouseUp(e);
 }
-
-function onDocumentWheel(e: WheelEvent) {
+function onDocumentWheel(e) {
   if (!shouldUseDocumentFallbackEvents())
-    return
-  onOverlayWheel(e)
+    return;
+  onOverlayWheel(e);
 }
-
-function onDocumentClick(e: MouseEvent) {
-  if (mode.value === 'idle')
-    return
-  const target = e.target as Element
+function onDocumentClick(e) {
+  if (mode.value === "idle")
+    return;
+  const target = e.target;
   if (!target || target.closest(VA_DATA_ATTR_SELECTOR))
-    return
-  e.preventDefault()
-  e.stopPropagation()
+    return;
+  e.preventDefault();
+  e.stopPropagation();
 }
-
-function getVueComponents(el: Element): string | undefined {
-  return settings.showComponentTree
-    ? detectVueComponents(el, settings.outputDetail === 'forensic')
-    : undefined
+function getVueComponents(el) {
+  return settings.showComponentTree ? detectVueComponents(el, settings.outputDetail === "forensic") : void 0;
 }
-
 function resetPendingState() {
-  pendingPosition.value = null
-  pendingTarget.value = null
-  pendingComponentChain.value = undefined
-  pendingComputedStyles.value = undefined
-  pendingTextSelection.value = null
-  editingAnnotation.value = null
-}
-
-function onInputAdd(comment: string) {
+  pendingPosition.value = null;
+  pendingTarget.value = null;
+  pendingComponentChain.value = void 0;
+  pendingComputedStyles.value = void 0;
+  pendingTextSelection.value = null;
+  editingAnnotation.value = null;
+}
+function onInputAdd(comment) {
   if (editingAnnotation.value) {
-    onInputSave(comment)
-    return
+    onInputSave(comment);
+    return;
   }
-
-  const scrollTop = window.scrollY || document.documentElement.scrollTop
-  const detail = settings.outputDetail
-  const url = resolvedUrl.value
-
-  if (mode.value === 'input-open' && multiSelect.selectedElements.value.length > 0) {
-    // Multi-select annotation
-    const selected = multiSelect.selectedElements.value
-    const elements = selected.map(el => ({
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  const detail = settings.outputDetail;
+  const url = resolvedUrl.value;
+  if (mode.value === "input-open" && multiSelect.selectedElements.value.length > 0) {
+    const selected = multiSelect.selectedElements.value;
+    const elements = selected.map((el) => ({
       element: el.tagName.toLowerCase(),
       elementPath: getElementPath(el),
-      cssClasses: Array.from(el.classList).join(' '),
+      cssClasses: Array.from(el.classList).join(" "),
       boundingBox: (() => {
-        const r = el.getBoundingClientRect()
-        return { x: r.x, y: r.y, width: r.width, height: r.height }
-      })(),
-    }))
-    const firstElement = selected[0]!
+        const r = el.getBoundingClientRect();
+        return { x: r.x, y: r.y, width: r.width, height: r.height };
+      })()
+    }));
+    const firstElement = selected[0];
     const selectionBox = elements.reduce(
       (acc, el) => {
-        const box = el.boundingBox!
-        acc.left = Math.min(acc.left, box.x)
-        acc.top = Math.min(acc.top, box.y)
-        acc.right = Math.max(acc.right, box.x + box.width)
-        acc.bottom = Math.max(acc.bottom, box.y + box.height)
-        return acc
+        const box = el.boundingBox;
+        acc.left = Math.min(acc.left, box.x);
+        acc.top = Math.min(acc.top, box.y);
+        acc.right = Math.max(acc.right, box.x + box.width);
+        acc.bottom = Math.max(acc.bottom, box.y + box.height);
+        return acc;
       },
-      { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity },
-    )
+      { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity }
+    );
     const boundingBox = {
       x: selectionBox.left,
       y: selectionBox.top,
       width: selectionBox.right - selectionBox.left,
-      height: selectionBox.bottom - selectionBox.top,
-    }
-
+      height: selectionBox.bottom - selectionBox.top
+    };
     const ann = addAnnotation({
-      x: pendingPosition.value!.x / window.innerWidth * 100,
-      y: pendingPosition.value!.y + scrollTop,
+      x: pendingPosition.value.x / window.innerWidth * 100,
+      y: pendingPosition.value.y + scrollTop,
       comment,
       url,
-      element: 'multi',
+      element: "multi",
       elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(boundingBox.y)})`,
       isMultiSelect: true,
       elements,
@@ -487,26 +401,24 @@ function onInputAdd(comment: string) {
       vueComponents: getVueComponents(firstElement),
       nearbyElements: getNearbyElements(firstElement),
       nearbyText: getNearbyText(firstElement),
-      cssClasses: detail === 'forensic' ? Array.from(firstElement.classList).join(' ') : undefined,
-      fullPath: detail === 'forensic' ? getElementPath(firstElement) : undefined,
-      computedStyles: detail === 'forensic' ? getComputedStylesSummary(firstElement) : undefined,
-      accessibility: detail === 'forensic' ? getAccessibilityInfo(firstElement) : undefined,
-    })
-    emit('annotation-add', ann)
-    multiSelect.reset()
-  }
-  else if (mode.value === 'input-open' && areaSelect.areaRect.value) {
-    // Area annotation
-    const area = { ...areaSelect.areaRect.value! }
-    const centerX = area.x + area.width / 2
-    const centerY = area.y + area.height / 2
-    const centerElement = getElementAtPointThroughOverlay(centerX, centerY) || document.body
+      cssClasses: detail === "forensic" ? Array.from(firstElement.classList).join(" ") : void 0,
+      fullPath: detail === "forensic" ? getElementPath(firstElement) : void 0,
+      computedStyles: detail === "forensic" ? getComputedStylesSummary(firstElement) : void 0,
+      accessibility: detail === "forensic" ? getAccessibilityInfo(firstElement) : void 0
+    });
+    emit("annotation-add", ann);
+    multiSelect.reset();
+  } else if (mode.value === "input-open" && areaSelect.areaRect.value) {
+    const area = { ...areaSelect.areaRect.value };
+    const centerX = area.x + area.width / 2;
+    const centerY = area.y + area.height / 2;
+    const centerElement = getElementAtPointThroughOverlay(centerX, centerY) || document.body;
     const ann = addAnnotation({
       x: centerX / window.innerWidth * 100,
       y: centerY + scrollTop,
       comment,
       url,
-      element: 'area',
+      element: "area",
       elementPath: `region at (${Math.round(area.x)}, ${Math.round(area.y)})`,
       isAreaSelect: true,
       area,
@@ -514,20 +426,18 @@ function onInputAdd(comment: string) {
       vueComponents: getVueComponents(centerElement),
       nearbyElements: getNearbyElements(centerElement),
       nearbyText: getNearbyText(centerElement),
-      cssClasses: detail === 'forensic' ? Array.from(centerElement.classList).join(' ') : undefined,
-      fullPath: detail === 'forensic' ? getElementPath(centerElement) : undefined,
-      computedStyles: detail === 'forensic' ? getComputedStylesSummary(centerElement) : undefined,
-      accessibility: detail === 'forensic' ? getAccessibilityInfo(centerElement) : undefined,
-    })
-    emit('annotation-add', ann)
-    areaSelect.reset()
-  }
-  else if (pendingTextSelection.value) {
-    // Text selection annotation
-    const { element: el, rect, text } = pendingTextSelection.value
+      cssClasses: detail === "forensic" ? Array.from(centerElement.classList).join(" ") : void 0,
+      fullPath: detail === "forensic" ? getElementPath(centerElement) : void 0,
+      computedStyles: detail === "forensic" ? getComputedStylesSummary(centerElement) : void 0,
+      accessibility: detail === "forensic" ? getAccessibilityInfo(centerElement) : void 0
+    });
+    emit("annotation-add", ann);
+    areaSelect.reset();
+  } else if (pendingTextSelection.value) {
+    const { element: el, rect, text } = pendingTextSelection.value;
     const ann = addAnnotation({
-      x: pendingPosition.value!.x / window.innerWidth * 100,
-      y: pendingPosition.value!.y + scrollTop,
+      x: pendingPosition.value.x / window.innerWidth * 100,
+      y: pendingPosition.value.y + scrollTop,
       comment,
       url,
       element: el.tagName.toLowerCase(),
@@ -537,23 +447,20 @@ function onInputAdd(comment: string) {
       vueComponents: getVueComponents(el),
       nearbyElements: getNearbyElements(el),
       nearbyText: getNearbyText(el),
-      cssClasses: detail === 'forensic' ? Array.from(el.classList).join(' ') : undefined,
-      fullPath: detail === 'forensic' ? getElementPath(el) : undefined,
-      computedStyles: detail === 'forensic' ? getComputedStylesSummary(el) : undefined,
-      accessibility: detail === 'forensic' ? getAccessibilityInfo(el) : undefined,
-      _targetRef: new WeakRef(el),
-    })
-    emit('annotation-add', ann)
-  }
-  else if (pendingTarget.value) {
-    // Element click annotation
-    const el = pendingTarget.value
-    const rect = el.getBoundingClientRect()
-    const fixed = checkIsFixed(el)
-
+      cssClasses: detail === "forensic" ? Array.from(el.classList).join(" ") : void 0,
+      fullPath: detail === "forensic" ? getElementPath(el) : void 0,
+      computedStyles: detail === "forensic" ? getComputedStylesSummary(el) : void 0,
+      accessibility: detail === "forensic" ? getAccessibilityInfo(el) : void 0,
+      _targetRef: new WeakRef(el)
+    });
+    emit("annotation-add", ann);
+  } else if (pendingTarget.value) {
+    const el = pendingTarget.value;
+    const rect = el.getBoundingClientRect();
+    const fixed = checkIsFixed(el);
     const ann = addAnnotation({
-      x: pendingPosition.value!.x / window.innerWidth * 100,
-      y: fixed ? pendingPosition.value!.y : pendingPosition.value!.y + scrollTop,
+      x: pendingPosition.value.x / window.innerWidth * 100,
+      y: fixed ? pendingPosition.value.y : pendingPosition.value.y + scrollTop,
       comment,
       url,
       element: el.tagName.toLowerCase(),
@@ -564,124 +471,102 @@ function onInputAdd(comment: string) {
       nearbyElements: getNearbyElements(el),
       nearbyText: getNearbyText(el),
       boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-      cssClasses: detail === 'forensic' ? Array.from(el.classList).join(' ') : undefined,
-      fullPath: detail === 'forensic' ? getElementPath(el) : undefined,
-      computedStyles: detail === 'forensic' ? getComputedStylesSummary(el) : undefined,
-      accessibility: detail === 'forensic' ? getAccessibilityInfo(el) : undefined,
-    })
-    emit('annotation-add', ann)
+      cssClasses: detail === "forensic" ? Array.from(el.classList).join(" ") : void 0,
+      fullPath: detail === "forensic" ? getElementPath(el) : void 0,
+      computedStyles: detail === "forensic" ? getComputedStylesSummary(el) : void 0,
+      accessibility: detail === "forensic" ? getAccessibilityInfo(el) : void 0
+    });
+    emit("annotation-add", ann);
   }
-
-  resetPendingState()
-  transition('inspect')
+  resetPendingState();
+  transition("inspect");
 }
-
 function onInputCancel() {
-  resetPendingState()
-  multiSelect.reset()
-  areaSelect.reset()
-  transition('inspect')
+  resetPendingState();
+  multiSelect.reset();
+  areaSelect.reset();
+  transition("inspect");
 }
-
 async function onCopy() {
-  const markdown = formatAnnotations(annotations.value, settings.outputDetail, resolvedUrl.value)
-
+  const markdown = formatAnnotations(annotations.value, settings.outputDetail, resolvedUrl.value);
   if (props.copyToClipboard !== false) {
-    const success = await copyToClipboard(markdown)
+    const success = await copyToClipboard(markdown);
     if (!success)
-      return
-    copyFeedback.value = true
+      return;
+    copyFeedback.value = true;
     setTimeout(() => {
-      copyFeedback.value = false
-    }, 2000)
+      copyFeedback.value = false;
+    }, 2e3);
   }
-
-  emit('copy', markdown)
+  emit("copy", markdown);
   if (settings.clearAfterCopy) {
-    const cleared = clearAnnotations()
-    emit('annotations-clear', cleared)
+    const cleared = clearAnnotations();
+    emit("annotations-clear", cleared);
   }
 }
-
 function onClear() {
-  const cleared = clearAnnotations()
-  emit('annotations-clear', cleared)
+  const cleared = clearAnnotations();
+  emit("annotations-clear", cleared);
+}
+function onMarkerClick(ann) {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  const markerX = ann.x / 100 * window.innerWidth;
+  const markerY = ann.isFixed ? ann.y : ann.y - scrollTop;
+  editingAnnotation.value = ann;
+  pendingPosition.value = { x: markerX, y: markerY };
+  pendingElementName.value = getElementName(ann._targetRef?.deref() || document.createElement(ann.element));
+  pendingComponentChain.value = ann.vueComponents;
+  pendingComputedStyles.value = ann.computedStyles ? Object.fromEntries(ann.computedStyles.split("\n").filter(Boolean).map((line) => {
+    const idx = line.indexOf(":");
+    return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, ""];
+  })) : ann._targetRef?.deref() ? getRelevantComputedStyles(ann._targetRef.deref()) : void 0;
+  pendingTextSelection.value = null;
+  pendingTarget.value = ann._targetRef?.deref() || null;
+  transition("input-open");
 }
-
-function onMarkerClick(ann: Annotation) {
-  // Open the annotation popup for editing
-  const scrollTop = window.scrollY || document.documentElement.scrollTop
-  const markerX = (ann.x / 100) * window.innerWidth
-  const markerY = ann.isFixed ? ann.y : ann.y - scrollTop
-
-  editingAnnotation.value = ann
-  pendingPosition.value = { x: markerX, y: markerY }
-  pendingElementName.value = getElementName(ann._targetRef?.deref() || document.createElement(ann.element))
-  pendingComponentChain.value = ann.vueComponents
-  pendingComputedStyles.value = ann.computedStyles
-    ? Object.fromEntries(ann.computedStyles.split('\n').filter(Boolean).map((line) => {
-        const idx = line.indexOf(':')
-        return idx > -1 ? [line.slice(0, idx).trim(), line.slice(idx + 1).trim()] : [line, '']
-      }))
-    : ann._targetRef?.deref()
-      ? getRelevantComputedStyles(ann._targetRef.deref()!)
-      : undefined
-  pendingTextSelection.value = null
-  pendingTarget.value = ann._targetRef?.deref() || null
-  transition('input-open')
-}
-
 function onInputDelete() {
   if (!editingAnnotation.value)
-    return
-  const removed = removeAnnotation(editingAnnotation.value.id)
+    return;
+  const removed = removeAnnotation(editingAnnotation.value.id);
   if (removed)
-    emit('annotation-delete', removed)
-  resetPendingState()
-  transition('inspect')
+    emit("annotation-delete", removed);
+  resetPendingState();
+  transition("inspect");
 }
-
-function onInputSave(comment: string) {
+function onInputSave(comment) {
   if (!editingAnnotation.value)
-    return
-  const updated = updateAnnotation(editingAnnotation.value.id, { comment })
+    return;
+  const updated = updateAnnotation(editingAnnotation.value.id, { comment });
   if (updated)
-    emit('annotation-update', updated)
-  resetPendingState()
-  transition('inspect')
+    emit("annotation-update", updated);
+  resetPendingState();
+  transition("inspect");
 }
-
-function onToggleArea(value: boolean) {
-  areaSelect.isAreaMode.value = value
+function onToggleArea(value) {
+  areaSelect.isAreaMode.value = value;
 }
-
-function onToolbarPlacementUpdate(value: Settings['toolbarPlacement']) {
-  settings.toolbarPlacement = value
+function onToolbarPlacementUpdate(value) {
+  settings.toolbarPlacement = value;
 }
-
-function onSettingsUpdate(updates: Partial<Settings>) {
-  Object.assign(settings, updates)
+function onSettingsUpdate(updates) {
+  Object.assign(settings, updates);
 }
-
-function onOpenSettings(anchorEl: HTMLElement | null) {
+function onOpenSettings(anchorEl) {
   if (settingsOpen.value && settingsAnchorEl.value === anchorEl) {
-    closeSettings()
-    return
+    closeSettings();
+    return;
   }
-  settingsAnchorEl.value = anchorEl
-  settingsOpen.value = true
+  settingsAnchorEl.value = anchorEl;
+  settingsOpen.value = true;
 }
-
-// Keyboard shortcut manager
-const shortcutConfig = computed<KeyboardShortcutConfig>(() => ({
+const shortcutConfig = computed(() => ({
   ...DEFAULT_SHORTCUT_CONFIG,
   doubleTap: {
     ...DEFAULT_SHORTCUT_CONFIG.doubleTap,
-    enabled: settings.activationKey !== 'none',
-    key: settings.activationKey !== 'none' ? settings.activationKey : DEFAULT_SHORTCUT_CONFIG.doubleTap.key,
-  },
-}))
-
+    enabled: settings.activationKey !== "none",
+    key: settings.activationKey !== "none" ? settings.activationKey : DEFAULT_SHORTCUT_CONFIG.doubleTap.key
+  }
+}));
 useKeyboardShortcuts({
   mode,
   settingsOpen,
@@ -699,44 +584,46 @@ useKeyboardShortcuts({
     clear: () => onClear(),
     openSettings: () => onOpenSettings(null),
     inputCancel: () => onInputCancel(),
-    closeSettings: () => closeSettings(),
-  },
-})
-
+    closeSettings: () => closeSettings()
+  }
+});
 onMounted(() => {
-  patchHistoryEvents()
-  window.addEventListener(HISTORY_CHANGE_EVENT, syncUrlScopeFromWindow)
-  window.addEventListener('popstate', syncUrlScopeFromWindow)
-  window.addEventListener('hashchange', syncUrlScopeFromWindow)
-  document.addEventListener('mousemove', onDocumentMouseMove, true)
-  document.addEventListener('mousedown', onDocumentMouseDown, true)
-  document.addEventListener('mouseup', onDocumentMouseUp, true)
-  document.addEventListener('wheel', onDocumentWheel, { passive: true, capture: true })
-  document.addEventListener('click', onDocumentClick, true)
-})
-
+  patchHistoryEvents();
+  window.addEventListener(HISTORY_CHANGE_EVENT, syncUrlScopeFromWindow);
+  window.addEventListener("popstate", syncUrlScopeFromWindow);
+  window.addEventListener("hashchange", syncUrlScopeFromWindow);
+  document.addEventListener("mousemove", onDocumentMouseMove, true);
+  document.addEventListener("mousedown", onDocumentMouseDown, true);
+  document.addEventListener("mouseup", onDocumentMouseUp, true);
+  document.addEventListener("wheel", onDocumentWheel, { passive: true, capture: true });
+  document.addEventListener("click", onDocumentClick, true);
+});
 onBeforeUnmount(() => {
-  window.removeEventListener(HISTORY_CHANGE_EVENT, syncUrlScopeFromWindow)
-  window.removeEventListener('popstate', syncUrlScopeFromWindow)
-  window.removeEventListener('hashchange', syncUrlScopeFromWindow)
-  document.removeEventListener('mousemove', onDocumentMouseMove, true)
-  document.removeEventListener('mousedown', onDocumentMouseDown, true)
-  document.removeEventListener('mouseup', onDocumentMouseUp, true)
-  document.removeEventListener('wheel', onDocumentWheel, true)
-  document.removeEventListener('click', onDocumentClick, true)
-})
+  window.removeEventListener(HISTORY_CHANGE_EVENT, syncUrlScopeFromWindow);
+  window.removeEventListener("popstate", syncUrlScopeFromWindow);
+  window.removeEventListener("hashchange", syncUrlScopeFromWindow);
+  document.removeEventListener("mousemove", onDocumentMouseMove, true);
+  document.removeEventListener("mousedown", onDocumentMouseDown, true);
+  document.removeEventListener("mouseup", onDocumentMouseUp, true);
+  document.removeEventListener("wheel", onDocumentWheel, true);
+  document.removeEventListener("click", onDocumentClick, true);
+});
 </script>
 
 <template>
   <component :is="portalWrapper" v-bind="portalProps">
-    <div ref="rootEl" data-agentation-vue :data-va-theme="settings.theme !== 'auto' ? settings.theme : undefined" :style="rootStyle">
+    <div ref="rootEl" data-agentation-vue :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0" :style="rootStyle">
       <!-- Intercept overlay -->
       <div
         v-if="mode !== 'idle'"
         ref="overlayEl"
         class="__va-intercept"
-        :class="{ '__va-intercept--input-open': mode === 'input-open' }"
-        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : undefined"
+        :class="{
+  '__va-intercept--input-open': mode === 'input-open'
+}"
+        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? {
+  pointerEvents: 'none'
+} : void 0"
         @mousemove="onOverlayMouseMove"
         @mousedown="onOverlayMouseDown"
         @mouseup="onOverlayMouseUp"