agentation-vue 0.2.6 → 0.2.10

package/dist/AgentationVue.vue

@@ -1,5 +1,13 @@
 <script setup>
-import { isVue2 as _isVue2, computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue-demi";
+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";
@@ -10,7 +18,10 @@ import { useAnnotations } from "./composables/useAnnotations.mjs";
 import { useAreaSelect } from "./composables/useAreaSelect.mjs";
 import { useElementDetection } from "./composables/useElementDetection.mjs";
 import { useInteractionMode } from "./composables/useInteractionMode.mjs";
-import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts.mjs";
+import {
+  DEFAULT_SHORTCUT_CONFIG,
+  useKeyboardShortcuts
+} from "./composables/useKeyboardShortcuts.mjs";
 import { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
 import { useMultiSelect } from "./composables/useMultiSelect.mjs";
 import { useOutputFormatter } from "./composables/useOutputFormatter.mjs";
@@ -18,7 +29,15 @@ import { useSettings } from "./composables/useSettings.mjs";
 import { useTextSelection } from "./composables/useTextSelection.mjs";
 import { isInsideAgentationTree } from "./utils/agentation-tree.mjs";
 import { copyToClipboard } from "./utils/clipboard.mjs";
-import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector.mjs";
+import {
+  isFixed as checkIsFixed,
+  detectVueComponents,
+  getAccessibilityInfo,
+  getComputedStylesSummary,
+  getNearbyElements,
+  getNearbyText,
+  getRelevantComputedStyles
+} from "./utils/dom-inspector.mjs";
 import { createPortalContainer, destroyPortalContainer } from "./utils/portal.mjs";
 import { getElementName, getElementPath } from "./utils/selectors.mjs";
 import { boundingBoxToStyle } from "./utils/style.mjs";
@@ -60,8 +79,24 @@ 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 {
+  annotations,
+  addAnnotation,
+  removeAnnotation,
+  updateAnnotation,
+  clearAnnotations,
+  restoreAnnotations,
+  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);
@@ -78,11 +113,17 @@ const editingAnnotation = ref(null);
 const settingsOpen = ref(false);
 const settingsAnchorEl = ref(null);
 const copyFeedback = ref(false);
+const undoFeedback = ref(false);
+const undoSnapshot = ref([]);
+let undoTimer = null;
+const UNDO_TIMEOUT_MS = 5e3;
 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 effectiveBlockPageInteractions = computed(
+  () => props.blockPageInteractions ?? settings.blockPageInteractions
+);
 const rootStyle = computed(() => {
   const hex = settings.markerColor;
   if (!hex)
@@ -106,7 +147,16 @@ const pendingMarkerY = computed(() => {
     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));
+const pendingIsSelection = computed(
+  () => mode.value === "input-open" && !editingAnnotation.value && (multiSelect.selectedElements.value.length > 0 || !!areaSelect.areaRect.value)
+);
+const mentionCandidates = computed(
+  () => annotations.value.map((ann, i) => ({
+    id: ann.id,
+    displayNumber: i + 1,
+    commentPreview: ann.comment.replace(/@\[\d+\]/g, "@\u2026").slice(0, 40) + (ann.comment.length > 40 ? "\u2026" : "")
+  })).filter((c) => !editingAnnotation.value || c.id !== editingAnnotation.value.id)
+);
 let portalContainer = null;
 const isVue2 = _isVue2;
 const PassThrough = defineComponent({
@@ -115,8 +165,12 @@ const PassThrough = defineComponent({
     return (typeof slot === "function" ? slot() : slot?.[0]) || null;
   }
 });
-const portalWrapper = computed(() => props.disablePortal || isVue2 ? PassThrough : "Teleport");
-const portalProps = computed(() => props.disablePortal || isVue2 ? {} : { to: "body" });
+const portalWrapper = computed(
+  () => props.disablePortal || isVue2 ? PassThrough : "Teleport"
+);
+const portalProps = computed(
+  () => props.disablePortal || isVue2 ? {} : { to: "body" }
+);
 onMounted(() => {
   if (!props.disablePortal && isVue2 && rootEl.value) {
     portalContainer = createPortalContainer();
@@ -124,39 +178,68 @@ onMounted(() => {
   }
 });
 onBeforeUnmount(() => {
+  dismissUndo();
   animPause.cleanup();
   cleanupDetection();
   if (portalContainer) {
     destroyPortalContainer(portalContainer);
   }
 });
-watch(() => props.outputDetail, (v) => {
-  if (v)
-    settings.outputDetail = v;
-}, { immediate: true });
-watch(() => props.markerColor, (v) => {
-  if (v)
-    settings.markerColor = v;
-}, { immediate: true });
-watch(() => props.theme, (v) => {
-  if (v)
-    settings.theme = v;
-}, { immediate: true });
-watch(() => props.blockPageInteractions, (v) => {
-  if (v)
-    settings.blockPageInteractions = v;
-}, { immediate: true });
-watch(() => props.autoHideToolbar, (v) => {
-  if (v)
-    settings.autoHideToolbar = v;
-}, { immediate: true });
-watch(() => props.pageUrl, (url) => {
-  syncUrlScope(url || getCurrentUrl());
-}, { immediate: true });
-watch(() => props.activationKey, (v) => {
-  if (v !== void 0)
-    settings.activationKey = v;
-}, { immediate: true });
+watch(
+  () => props.outputDetail,
+  (v) => {
+    if (v)
+      settings.outputDetail = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.markerColor,
+  (v) => {
+    if (v)
+      settings.markerColor = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.theme,
+  (v) => {
+    if (v)
+      settings.theme = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.blockPageInteractions,
+  (v) => {
+    if (v)
+      settings.blockPageInteractions = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.autoHideToolbar,
+  (v) => {
+    if (v)
+      settings.autoHideToolbar = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => props.pageUrl,
+  (url) => {
+    syncUrlScope(url || getCurrentUrl());
+  },
+  { immediate: true }
+);
+watch(
+  () => props.activationKey,
+  (v) => {
+    if (v !== void 0)
+      settings.activationKey = v;
+  },
+  { immediate: true }
+);
 function onActivate() {
   transition("inspect");
 }
@@ -207,7 +290,10 @@ function onOverlayMouseUp(e) {
     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 };
+      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;
@@ -229,7 +315,9 @@ function onOverlayMouseUp(e) {
     };
     pendingElementName.value = `"${textResult.selectedText.slice(0, 30)}"`;
     pendingComponentChain.value = getVueComponents(textResult.anchorElement);
-    pendingComputedStyles.value = getRelevantComputedStyles(textResult.anchorElement);
+    pendingComputedStyles.value = getRelevantComputedStyles(
+      textResult.anchorElement
+    );
     pendingTarget.value = textResult.anchorElement;
     pendingTextSelection.value = {
       text: textResult.selectedText,
@@ -282,7 +370,10 @@ function shouldUseDocumentFallbackEvents() {
   return mode.value === "inspect" && !effectiveBlockPageInteractions.value && !isInteractionLocked();
 }
 function lockInteractionsTemporarily(durationMs) {
-  suppressInteractionsUntil = Math.max(suppressInteractionsUntil, Date.now() + durationMs);
+  suppressInteractionsUntil = Math.max(
+    suppressInteractionsUntil,
+    Date.now() + durationMs
+  );
 }
 function isInteractionLocked() {
   return settingsOpen.value || toolbarDragging.value || Date.now() < suppressInteractionsUntil;
@@ -297,6 +388,7 @@ function closeSettings(lockInteractions = true) {
 function syncUrlScope(nextUrl) {
   if (!nextUrl || currentUrl.value === nextUrl)
     return;
+  dismissUndo();
   currentUrl.value = nextUrl;
   setScopeUrl(nextUrl);
 }
@@ -395,7 +487,9 @@ function onInputAdd(comment) {
       comment,
       url,
       element: "multi",
-      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(boundingBox.y)})`,
+      elementPath: `region at (${Math.round(boundingBox.x)}, ${Math.round(
+        boundingBox.y
+      )})`,
       isMultiSelect: true,
       elements,
       boundingBox,
@@ -471,7 +565,12 @@ function onInputAdd(comment) {
       vueComponents: getVueComponents(el),
       nearbyElements: getNearbyElements(el),
       nearbyText: getNearbyText(el),
-      boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      boundingBox: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      },
       cssClasses: detail === "forensic" ? Array.from(el.classList).join(" ") : void 0,
       fullPath: detail === "forensic" ? getElementPath(el) : void 0,
       computedStyles: detail === "forensic" ? getComputedStylesSummary(el) : void 0,
@@ -489,7 +588,11 @@ function onInputCancel() {
   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);
     if (!success)
@@ -501,13 +604,37 @@ async function onCopy() {
   }
   emit("copy", markdown);
   if (settings.clearAfterCopy) {
-    const cleared = clearAnnotations();
-    emit("annotations-clear", cleared);
+    onClear();
+  }
+}
+function dismissUndo() {
+  undoFeedback.value = false;
+  undoSnapshot.value = [];
+  if (undoTimer) {
+    clearTimeout(undoTimer);
+    undoTimer = null;
   }
 }
+function startUndoTimer() {
+  if (undoTimer)
+    clearTimeout(undoTimer);
+  undoTimer = setTimeout(() => dismissUndo(), UNDO_TIMEOUT_MS);
+}
+function onUndo() {
+  const snapshot = undoSnapshot.value;
+  dismissUndo();
+  if (snapshot.length > 0)
+    restoreAnnotations(snapshot);
+}
 function onClear() {
+  dismissUndo();
   const cleared = clearAnnotations();
+  if (cleared.length === 0)
+    return;
   emit("annotations-clear", cleared);
+  undoSnapshot.value = cleared;
+  undoFeedback.value = true;
+  startUndoTimer();
 }
 function onMarkerClick(ann) {
   const scrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -515,12 +642,16 @@ function onMarkerClick(ann) {
   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));
+  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;
+  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");
@@ -596,7 +727,10 @@ onMounted(() => {
   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("wheel", onDocumentWheel, {
+    passive: true,
+    capture: true
+  });
   document.addEventListener("click", onDocumentClick, true);
 });
 onBeforeUnmount(() => {
@@ -613,14 +747,21 @@ onBeforeUnmount(() => {
 
 <template>
   <component :is="portalWrapper" v-bind="portalProps">
-    <div ref="rootEl" data-agentation-vue :data-va-theme="settings.theme !== 'auto' ? settings.theme : void 0" :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' } : void 0"
+        :style="
+  mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0
+"
         @mousemove="onOverlayMouseMove"
         @mousedown="onOverlayMouseDown"
         @mouseup="onOverlayMouseUp"
@@ -679,6 +820,7 @@ onBeforeUnmount(() => {
         :computed-styles="pendingComputedStyles"
         :initial-comment="editingAnnotation?.comment"
         :is-editing="!!editingAnnotation"
+        :mention-candidates="mentionCandidates"
         @add="onInputAdd"
         @cancel="onInputCancel"
         @delete="onInputDelete"
@@ -698,6 +840,18 @@ onBeforeUnmount(() => {
         Copied!
       </div>
 
+      <!-- Undo clear feedback -->
+      <div
+        v-if="undoFeedback"
+        class="__va-undo-feedback"
+        :class="{ '__va-undo-feedback--shifted': copyFeedback }"
+      >
+        <span>Annotations cleared</span>
+        <button type="button" class="__va-undo-btn" @click="onUndo">
+          Undo
+        </button>
+      </div>
+
       <!-- Toolbar -->
       <AgentationToolbar
         ref="toolbarRef"

package/dist/components/AgentationToolbar.vue

@@ -77,8 +77,7 @@ function onDeactivate() {
   emit("deactivate");
 }
 function onClear() {
-  if (confirm("Clear all annotations?"))
-    emit("clear");
+  emit("clear");
 }
 function onOpenSettings(e) {
   const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;

package/dist/components/AnnotationInput.d.vue.ts

@@ -1,3 +1,4 @@
+import type { MentionCandidate } from '../utils/mention';
 type __VLS_Props = {
     position: {
         x: number;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     computedStyles?: Record<string, string>;
     initialComment?: string;
     isEditing?: boolean;
+    mentionCandidates?: MentionCandidate[];
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/components/AnnotationInput.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { computed, onMounted, ref } from "vue-demi";
+import { computed, onMounted, ref, toRef } from "vue-demi";
+import { useMentionDropdown } from "../composables/useMentionDropdown.mjs";
+import { hydrateMentions, serializeMentions } from "../utils/mention.mjs";
 import ComponentChain from "./ComponentChain.vue";
+import MentionDropdown from "./MentionDropdown.vue";
 import VaButton from "./VaButton.vue";
 import VaIcon from "./VaIcon.vue";
 const props = defineProps({
@@ -9,12 +12,16 @@ const props = defineProps({
   componentChain: { type: String, required: false },
   computedStyles: { type: Object, required: false },
   initialComment: { type: String, required: false },
-  isEditing: { type: Boolean, required: false }
+  isEditing: { type: Boolean, required: false },
+  mentionCandidates: { type: Array, required: false }
 });
 const emit = defineEmits(["add", "cancel", "delete"]);
-const comment = ref(props.initialComment || "");
 const inputEl = ref(null);
+const commentText = ref(props.initialComment || "");
 const computedStyleEntries = computed(() => Object.entries(props.computedStyles || {}));
+const candidates = toRef(props, "mentionCandidates");
+const safeCandidates = computed(() => candidates.value || []);
+const mention = useMentionDropdown(inputEl, safeCandidates);
 const inputStyle = computed(() => {
   const x = Math.min(props.position.x, window.innerWidth - 380);
   const y = Math.min(props.position.y + 20, window.innerHeight - 150);
@@ -23,14 +30,71 @@ const inputStyle = computed(() => {
     top: `${Math.max(10, y)}px`
   };
 });
+function autoResize() {
+  const el = inputEl.value;
+  if (!el)
+    return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+function getComment() {
+  const el = inputEl.value;
+  if (!el)
+    return "";
+  return serializeMentions(el);
+}
+function onInput() {
+  commentText.value = getComment();
+  autoResize();
+  mention.checkForTrigger();
+}
+function onKeyDown(e) {
+  if (mention.onKeyDown(e))
+    return;
+  if (e.key === "Enter" && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    onAdd();
+  } else if (e.key === "Escape") {
+    if (mention.isOpen.value) {
+      e.preventDefault();
+      mention.close();
+    } else {
+      emit("cancel");
+    }
+  }
+}
 function onAdd() {
-  const text = comment.value.trim();
+  const text = getComment().trim();
   if (!text)
     return;
   emit("add", text);
 }
+function onPaste(e) {
+  e.preventDefault();
+  const text = e.clipboardData?.getData("text/plain") || "";
+  document.execCommand("insertText", false, text);
+}
+function onSelectCandidate(candidate) {
+  mention.selectCandidate(candidate);
+}
 onMounted(() => {
-  inputEl.value?.focus();
+  const el = inputEl.value;
+  if (!el)
+    return;
+  if (props.initialComment) {
+    const html = hydrateMentions(props.initialComment, safeCandidates.value);
+    el.innerHTML = html;
+  }
+  el.focus();
+  const sel = window.getSelection();
+  if (sel && el.childNodes.length > 0) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+  autoResize();
 });
 </script>
 
@@ -66,13 +130,24 @@ onMounted(() => {
       <ComponentChain :chain="componentChain" variant="light" truncate="leaf" />
     </div>
     <span v-else class="__va-input-label">{{ elementName || "Annotation" }}</span>
-    <input
+    <div
       ref="inputEl"
-      v-model="comment"
-      placeholder="Add a comment..."
-      @keydown.enter="onAdd"
-      @keydown.escape="$emit('cancel')"
-    >
+      class="__va-input-editable"
+      contenteditable="true"
+      role="textbox"
+      aria-multiline="true"
+      data-placeholder="Add a comment..."
+      @input="onInput"
+      @keydown="onKeyDown"
+      @paste="onPaste"
+    />
+    <MentionDropdown
+      :open="mention.isOpen.value"
+      :candidates="mention.filteredCandidates.value"
+      :active-index="mention.activeIndex.value"
+      :position="mention.dropdownPosition.value"
+      @select="onSelectCandidate"
+    />
     <div class="__va-input-actions">
       <button
         v-if="isEditing"
@@ -86,7 +161,7 @@ onMounted(() => {
         <VaButton variant="secondary" @click="$emit('cancel')">
           Cancel
         </VaButton>
-        <VaButton :disabled="!comment.trim()" @click="onAdd">
+        <VaButton :disabled="!commentText.trim()" @click="onAdd">
           {{ isEditing ? "Save" : "Add" }}
         </VaButton>
       </div>

package/dist/components/AnnotationInput.vue.d.ts

@@ -1,3 +1,4 @@
+import type { MentionCandidate } from '../utils/mention';
 type __VLS_Props = {
     position: {
         x: number;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     computedStyles?: Record<string, string>;
     initialComment?: string;
     isEditing?: boolean;
+    mentionCandidates?: MentionCandidate[];
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/components/MentionDropdown.d.vue.ts

@@ -0,0 +1,16 @@
+import type { MentionCandidate } from '../utils/mention';
+type __VLS_Props = {
+    open: boolean;
+    candidates: MentionCandidate[];
+    activeIndex: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    select: (candidate: MentionCandidate) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((candidate: MentionCandidate) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MentionDropdown.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue-demi";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  candidates: { type: Array, required: true },
+  activeIndex: { type: Number, required: true },
+  position: { type: Object, required: true }
+});
+defineEmits(["select"]);
+const dropdownStyle = computed(() => {
+  if (!props.open)
+    return { display: "none" };
+  return {
+    left: `${props.position.x}px`,
+    top: `${props.position.y}px`
+  };
+});
+</script>
+
+<template>
+  <div
+    v-show="open && candidates.length > 0"
+    class="__va-mention-dropdown"
+    :style="dropdownStyle"
+    role="listbox"
+    data-agentation-vue
+  >
+    <div
+      v-for="(candidate, i) in candidates"
+      :key="candidate.id"
+      class="__va-mention-option"
+      :class="{ '__va-mention-option--active': i === activeIndex }"
+      role="option"
+      :aria-selected="i === activeIndex"
+      @mousedown.prevent="$emit('select', candidate)"
+    >
+      <span class="__va-mention-option-number">{{ candidate.displayNumber }}</span>
+      <span class="__va-mention-option-preview">{{ candidate.commentPreview }}</span>
+    </div>
+  </div>
+</template>

package/dist/components/MentionDropdown.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MentionCandidate } from '../utils/mention';
+type __VLS_Props = {
+    open: boolean;
+    candidates: MentionCandidate[];
+    activeIndex: number;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    select: (candidate: MentionCandidate) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((candidate: MentionCandidate) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/SettingsPanel.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, toRef } from "vue-demi";
+import { VA_VERSION } from "../constants.mjs";
 import { vaTooltipDirective } from "../directives/vaTooltip.mjs";
 import VaIcon from "./VaIcon.vue";
 import VaToggle from "./VaToggle.vue";
@@ -36,6 +37,7 @@ function toggleTheme() {
 <template>
   <div class="__va-settings" data-agentation-vue @click.stop>
     <div class="__va-settings-top">
+      <span class="__va-settings-title">Agentation vue <span class="__va-settings-version">v{{ VA_VERSION }}</span></span>
       <button v-va-tooltip="'Toggle theme'" type="button" class="__va-theme-toggle" @click="toggleTheme">
         <VaIcon :name="themeIcon" />
       </button>

package/dist/components/SettingsPopover.vue

@@ -138,12 +138,10 @@ function schedulePositionUpdate() {
 function onDocumentPointerDown(e) {
   if (!props.open)
     return;
-  const target = e.target;
-  if (!target)
+  const path = e.composedPath();
+  if (panelEl.value && path.includes(panelEl.value))
     return;
-  if (panelEl.value?.contains(target))
-    return;
-  if (props.anchorEl?.contains(target))
+  if (props.anchorEl && path.includes(props.anchorEl))
     return;
   emit("close");
 }

package/dist/composables/useAnnotations.d.ts

@@ -4,6 +4,7 @@ declare function addAnnotation(annotation: Omit<Annotation, 'id' | 'timestamp'>)
 declare function removeAnnotation(id: string): Annotation | undefined;
 declare function updateAnnotation(id: string, updates: Partial<Annotation>): Annotation | undefined;
 declare function clearAnnotations(): Annotation[];
+declare function restoreAnnotations(items: Annotation[]): void;
 export declare function setAnnotationStorage(adapter: StorageAdapter): void;
 export declare function resetAnnotationStorage(): void;
 export declare function useAnnotations(initialUrl?: string): {
@@ -102,6 +103,7 @@ export declare function useAnnotations(initialUrl?: string): {
     removeAnnotation: typeof removeAnnotation;
     updateAnnotation: typeof updateAnnotation;
     clearAnnotations: typeof clearAnnotations;
+    restoreAnnotations: typeof restoreAnnotations;
     setScopeUrl: typeof setScopeUrl;
 };
 export {};

package/dist/composables/useAnnotations.mjs

@@ -110,6 +110,11 @@ function clearAnnotations() {
   save();
   return cleared;
 }
+function restoreAnnotations(items) {
+  annotations.value.push(...items);
+  counter = getCounterSeed(annotations.value);
+  save();
+}
 setScopeUrl(scopedUrl);
 export function setAnnotationStorage(adapter) {
   annotationStorage = adapter;
@@ -121,5 +126,5 @@ export function resetAnnotationStorage() {
 }
 export function useAnnotations(initialUrl = getCurrentUrl()) {
   setScopeUrl(initialUrl);
-  return { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl };
+  return { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, restoreAnnotations, setScopeUrl };
 }

package/dist/composables/useKeyboardShortcuts.mjs

@@ -50,6 +50,7 @@ export function useKeyboardShortcuts(options) {
   let lastActivationKeyUpTime = 0;
   let listenerAttached = false;
   let mergedKeymap = { ...DEFAULT_KEYMAP, ...options.config.value.keymap };
+  const suppressedKeyUps = /* @__PURE__ */ new Set();
   watch(options.config, (cfg2) => {
     mergedKeymap = { ...DEFAULT_KEYMAP, ...cfg2.keymap };
   });
@@ -129,9 +130,15 @@ export function useKeyboardShortcuts(options) {
         break;
     }
   }
-  function consume(e) {
+  function normalizeKey(key) {
+    return key.length === 1 ? key.toLowerCase() : key;
+  }
+  function consume(e, suppressKeyUp = false) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     e.stopPropagation();
+    if (suppressKeyUp)
+      suppressedKeyUps.add(normalizeKey(e.key));
   }
   function onKeyDown(e) {
     if (e.repeat)
@@ -145,14 +152,14 @@ export function useKeyboardShortcuts(options) {
     }
     if (scope === "settings") {
       if (e.key === "Escape") {
-        consume(e);
+        consume(e, true);
         actions.closeSettings();
       }
       return;
     }
     if (scope === "input") {
       if (e.key === "Escape") {
-        consume(e);
+        consume(e, true);
         actions.inputCancel();
       }
       return;
@@ -167,11 +174,17 @@ export function useKeyboardShortcuts(options) {
     if (!action)
       return;
     if (cfg().priorityWhenOpen) {
-      consume(e);
+      consume(e, true);
     }
     executeAction(action);
   }
   function onKeyUp(e) {
+    const normalizedKey = normalizeKey(e.key);
+    if (suppressedKeyUps.has(normalizedKey)) {
+      suppressedKeyUps.delete(normalizedKey);
+      consume(e);
+      return;
+    }
     const { doubleTap } = cfg();
     if (!doubleTap.enabled)
       return;
@@ -198,13 +211,14 @@ export function useKeyboardShortcuts(options) {
   }
   function onBlurOrVisibility() {
     lastActivationKeyUpTime = 0;
+    suppressedKeyUps.clear();
   }
   function attach() {
     if (listenerAttached)
       return;
     listenerAttached = true;
-    document.addEventListener("keydown", onKeyDown, true);
-    document.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("keyup", onKeyUp, true);
     window.addEventListener("blur", onBlurOrVisibility);
     document.addEventListener("visibilitychange", onBlurOrVisibility);
   }
@@ -212,8 +226,8 @@ export function useKeyboardShortcuts(options) {
     if (!listenerAttached)
       return;
     listenerAttached = false;
-    document.removeEventListener("keydown", onKeyDown, true);
-    document.removeEventListener("keyup", onKeyUp, true);
+    window.removeEventListener("keydown", onKeyDown, true);
+    window.removeEventListener("keyup", onKeyUp, true);
     window.removeEventListener("blur", onBlurOrVisibility);
     document.removeEventListener("visibilitychange", onBlurOrVisibility);
   }

package/dist/composables/useMentionDropdown.d.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue-demi';
+import type { MentionCandidate } from '../utils/mention';
+export declare function useMentionDropdown(inputEl: Ref<HTMLElement | null>, candidates: Ref<MentionCandidate[]>): {
+    isOpen: Ref<boolean, boolean>;
+    filteredCandidates: import("vue-demi").ComputedRef<MentionCandidate[]>;
+    activeIndex: Ref<number, number>;
+    dropdownPosition: Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    checkForTrigger: () => void;
+    selectCandidate: (candidate: MentionCandidate) => void;
+    onKeyDown: (e: KeyboardEvent) => boolean;
+    close: () => void;
+};

package/dist/composables/useMentionDropdown.mjs

@@ -0,0 +1,162 @@
+import { computed, ref } from "vue-demi";
+function getSelection(el) {
+  const root = el.getRootNode();
+  if (root instanceof ShadowRoot && typeof root.getSelection === "function")
+    return root.getSelection();
+  return window.getSelection();
+}
+function findTrigger(el) {
+  const sel = getSelection(el);
+  if (!sel || sel.rangeCount === 0)
+    return null;
+  const range = sel.getRangeAt(0);
+  if (!range.collapsed)
+    return null;
+  const { startContainer, startOffset } = range;
+  if (startContainer.nodeType !== Node.TEXT_NODE)
+    return null;
+  const textNode = startContainer;
+  const text = textNode.textContent || "";
+  const beforeCursor = text.slice(0, startOffset);
+  for (let i = beforeCursor.length - 1; i >= 0; i--) {
+    const ch = beforeCursor[i];
+    if (ch === " " || ch === "\n")
+      return null;
+    if (ch === "@") {
+      if (i === 0 || beforeCursor[i - 1] === " " || beforeCursor[i - 1] === "\n") {
+        return {
+          textNode,
+          atIndex: i,
+          query: beforeCursor.slice(i + 1)
+        };
+      }
+      return null;
+    }
+  }
+  return null;
+}
+export function useMentionDropdown(inputEl, candidates) {
+  const isOpen = ref(false);
+  const query = ref("");
+  const activeIndex = ref(0);
+  const dropdownPosition = ref({ x: 0, y: 0 });
+  let currentTrigger = null;
+  const filteredCandidates = computed(() => {
+    if (!isOpen.value)
+      return [];
+    const q = query.value.toLowerCase();
+    return candidates.value.filter((c) => {
+      if (!q)
+        return true;
+      return String(c.displayNumber).startsWith(q) || c.commentPreview.toLowerCase().includes(q);
+    });
+  });
+  function checkForTrigger() {
+    const el = inputEl.value;
+    if (!el)
+      return;
+    const trigger = findTrigger(el);
+    if (trigger) {
+      currentTrigger = trigger;
+      query.value = trigger.query;
+      activeIndex.value = 0;
+      isOpen.value = true;
+      updatePosition();
+    } else {
+      close();
+    }
+  }
+  function updatePosition() {
+    const el = inputEl.value;
+    if (!el || !currentTrigger)
+      return;
+    const sel = getSelection(el);
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.setStart(currentTrigger.textNode, currentTrigger.atIndex);
+    const rect = range.getBoundingClientRect();
+    const containerRect = el.closest(".__va-input")?.getBoundingClientRect();
+    if (!containerRect)
+      return;
+    const x = rect.left - containerRect.left;
+    const y = rect.bottom - containerRect.top + 4;
+    const viewportBottom = window.innerHeight;
+    const estimatedDropdownHeight = Math.min(filteredCandidates.value.length * 36 + 8, 200);
+    if (rect.bottom + estimatedDropdownHeight > viewportBottom) {
+      dropdownPosition.value = { x, y: rect.top - containerRect.top - estimatedDropdownHeight - 4 };
+    } else {
+      dropdownPosition.value = { x, y };
+    }
+  }
+  function selectCandidate(candidate) {
+    const el = inputEl.value;
+    if (!el || !currentTrigger)
+      return;
+    const sel = getSelection(el);
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const { textNode, atIndex } = currentTrigger;
+    const cursorOffset = sel.getRangeAt(0).startOffset;
+    const range = document.createRange();
+    range.setStart(textNode, atIndex);
+    range.setEnd(textNode, cursorOffset);
+    range.deleteContents();
+    const chip = document.createElement("span");
+    chip.contentEditable = "false";
+    chip.className = "__va-mention";
+    chip.dataset.mentionId = candidate.id;
+    chip.textContent = `@${candidate.displayNumber}`;
+    range.insertNode(chip);
+    const space = document.createTextNode("\xA0");
+    chip.after(space);
+    const newRange = document.createRange();
+    newRange.setStartAfter(space);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+    close();
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  function onKeyDown(e) {
+    if (!isOpen.value || filteredCandidates.value.length === 0)
+      return false;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      activeIndex.value = (activeIndex.value + 1) % filteredCandidates.value.length;
+      return true;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      activeIndex.value = (activeIndex.value - 1 + filteredCandidates.value.length) % filteredCandidates.value.length;
+      return true;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      selectCandidate(filteredCandidates.value[activeIndex.value]);
+      return true;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      return true;
+    }
+    return false;
+  }
+  function close() {
+    isOpen.value = false;
+    query.value = "";
+    activeIndex.value = 0;
+    currentTrigger = null;
+  }
+  return {
+    isOpen,
+    filteredCandidates,
+    activeIndex,
+    dropdownPosition,
+    checkForTrigger,
+    selectCandidate,
+    onKeyDown,
+    close
+  };
+}

package/dist/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const VA_DATA_ATTR = "data-agentation-vue";
 export declare const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";
+export declare const VA_VERSION = "0.2.10";

package/dist/constants.mjs

@@ -1,2 +1,3 @@
 export const VA_DATA_ATTR = "data-agentation-vue";
 export const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";
+export const VA_VERSION = "0.2.10";

package/dist/styles/agentation.css

@@ -1 +1 @@
-[data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}[data-agentation-vue]:not([data-agentation-vue] [data-agentation-vue]){--va-accent:#42b883;--va-accent-rgb:66,184,131}@media (prefers-color-scheme:dark){[data-agentation-vue]:not([data-va-theme=light]){--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}}[data-agentation-vue][data-va-theme=dark],[data-agentation-vue][data-va-theme=dark] [data-agentation-vue]{--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}[data-agentation-vue][data-va-theme=light],[data-agentation-vue][data-va-theme=light] [data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}:where([data-agentation-vue],[data-agentation-vue] *){border:none;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;list-style:none;margin:0;padding:0;text-decoration:none}.__va-intercept{background:transparent;cursor:crosshair;inset:0;position:fixed;z-index:2147483646}.__va-intercept--input-open{pointer-events:none}.__va-toolbar{position:fixed;--va-toolbar-base-transform:translate(0);--va-toolbar-auto-hide-transform:translate(0);--va-toolbar-size:42px;--va-toolbar-edge-offset:20px;--va-toolbar-auto-hide-peek:8px;--va-toolbar-auto-hide-corner-peek:16px;--va-toolbar-auto-hide-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-peek));--va-toolbar-auto-hide-corner-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-corner-peek));display:block;max-width:42px;min-height:42px;z-index:2147483647;--va-toolbar-resize-delay:0ms;background:var(--va-bg);border:1px solid var(--va-border);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:0;transform:var(--va-toolbar-base-transform) var(--va-toolbar-auto-hide-transform);transition:border-radius .12s cubic-bezier(.32,.72,0,1),padding .12s cubic-bezier(.32,.72,0,1),max-width .24s cubic-bezier(.22,1,.36,1) var(--va-toolbar-resize-delay),transform .15s ease,opacity .15s ease,box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-toolbar--place-bottom-right{bottom:20px;right:20px}.__va-toolbar--place-bottom-center{bottom:20px;left:50%;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-bottom-left{bottom:20px;left:20px}.__va-toolbar--place-top-right{right:20px;top:20px}.__va-toolbar--place-top-center{left:50%;top:20px;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-top-left{left:20px;top:20px}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-center{--va-toolbar-auto-hide-transform:translateY(calc(var(--va-toolbar-auto-hide-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-center{--va-toolbar-auto-hide-transform:translateY(var(--va-toolbar-auto-hide-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--collapsed{cursor:pointer;max-width:42px;min-height:42px}.__va-toolbar--expanded{--va-toolbar-resize-delay:110ms;border-radius:10px;max-width:520px;padding:4px}.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide):hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}.__va-toolbar--dragging{bottom:auto;left:0;right:auto;top:0;transform:none;transition:none}.__va-toolbar--dragging.__va-toolbar--collapsed:hover{transform:none}.__va-toolbar-stage{align-items:center;display:flex;gap:4px}.__va-toolbar-stage--toggle{inset:0;justify-content:center;opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition:opacity .11s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;visibility:visible}.__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:8px;filter:blur(4px);opacity:0;overflow:hidden;pointer-events:none;transform:translateX(var(--va-toolbar-menu-enter-x));transition:opacity .14s ease 0s,transform .22s cubic-bezier(.22,1,.36,1) 0s,visibility 0s linear .14s,filter 80ms ease 0s;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--toggle{opacity:0;pointer-events:none;transform:scale(.94);transition:opacity 90ms ease,transform .12s ease,visibility 0s linear 90ms;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--menu{filter:blur(0);opacity:1;pointer-events:auto;transform:translateX(0);transition:opacity .15s ease .15s,transform .24s cubic-bezier(.22,1,.36,1) .12s,visibility 0s linear 0s,filter .15s ease .2s;visibility:visible}.__va-toolbar--place-bottom-right .__va-toolbar-stage--menu,.__va-toolbar--place-top-right .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:-8px}.__va-toolbar--place-bottom-center .__va-toolbar-stage--menu,.__va-toolbar--place-top-center .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:0px}.__va-snap-zones{inset:0;pointer-events:none;position:fixed;z-index:2147483646}.__va-snap-zone{background:rgba(var(--va-accent-rgb),.035);border:1.5px dashed rgba(var(--va-accent-rgb),.18);border-radius:999px;box-shadow:0 0 0 1px rgba(var(--va-accent-rgb),.04);height:42px;position:fixed;transform:translate(-50%,-50%);transition:all .12s ease;width:42px}.__va-snap-zone--active{background:rgba(var(--va-accent-rgb),.09);border-color:rgba(var(--va-accent-rgb),.4)}.__va-snap-zone--rect{border-radius:8px;transform:none}.__va-snap-zone--rect.__va-snap-zone--active{transform:none}.__va-icon-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:background .15s ease,color .15s ease;width:32px}.__va-icon-btn:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-icon-btn--active{background:rgba(var(--va-accent-rgb),.15);color:var(--va-accent)}.__va-icon-btn--active:hover{background:rgba(var(--va-accent-rgb),.25)}.__va-icon-btn:disabled{cursor:not-allowed;opacity:.3}.__va-icon-btn:disabled:hover{background:transparent}.__va-icon-btn svg{height:18px;width:18px}.__va-toolbar-toggle{align-items:center;background:transparent;border:none;color:var(--va-accent);cursor:pointer;display:flex;height:100%;justify-content:center;line-height:0;outline:none;padding:0;position:relative;width:100%}.__va-toolbar-toggle svg{flex-shrink:0;height:22px;width:22px}.__va-toolbar-sep{background:var(--va-border);flex-shrink:0;height:20px;width:1px}.__va-drag-handle{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:grab;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:24px}.__va-drag-handle:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-drag-handle:active{cursor:grabbing}.__va-drag-handle-dots{display:grid;gap:2.5px;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px)}.__va-drag-handle-dots span{background:currentColor;border-radius:50%;height:3px;opacity:.6;width:3px}.__va-toolbar-badge{align-items:center;background:var(--va-accent);border-radius:9px;color:#fff;display:flex;font-size:11px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-6px;top:-6px}.__va-tooltip{align-items:center;background:#131518;border:1px solid hsla(0,0%,100%,.08);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.28);color:#dce1e7;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px;font-weight:500;gap:6px;left:0;line-height:1.15;max-width:min(360px,calc(100vw - 16px));opacity:0;padding:6px 9px;pointer-events:none;position:fixed;top:0;transform:translateY(4px) scale(.98);transform-origin:center bottom;transition:opacity .12s ease,transform .12s ease;white-space:nowrap;z-index:2147483647}.__va-tooltip[data-placement=bottom]{transform:translateY(-4px) scale(.98);transform-origin:center top}.__va-tooltip.__va-tooltip--visible{opacity:1}.__va-tooltip.__va-tooltip--visible[data-placement=bottom],.__va-tooltip.__va-tooltip--visible[data-placement=top]{transform:translateY(0) scale(1)}.__va-tooltip-label{overflow:hidden;text-overflow:ellipsis}.__va-tooltip-shortcut{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.18);border-radius:6px;color:#b5bec8;display:inline-flex;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1;min-height:18px;padding:2px 6px}.__va-tooltip-arrow{background:#131518;border:1px solid hsla(0,0%,100%,.08);border-left:none;border-top:none;height:10px;left:50%;position:absolute;transform:translateX(-50%) rotate(45deg);width:10px}.__va-tooltip[data-placement=top] .__va-tooltip-arrow{bottom:-5px}.__va-tooltip[data-placement=bottom] .__va-tooltip-arrow{top:-5px;transform:translateX(-50%) rotate(225deg)}.__va-highlight{background:rgba(var(--va-accent-rgb),.08);border:2px solid var(--va-accent);border-radius:4px;pointer-events:none;position:fixed;transition:all 80ms ease;z-index:2147483645}.__va-highlight-label{background:var(--va-accent);border-radius:4px;color:#fff;font-size:11px;font-weight:500;left:0;max-width:300px;overflow:hidden;padding:2px 8px;position:absolute;text-overflow:ellipsis;top:-28px;white-space:nowrap}.__va-highlight-label--chain{background:#1a1a1a;max-width:500px;overflow:visible;padding:4px 10px}.__va-marker{align-items:center;background:var(--va-accent);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;position:absolute;transform:translate(-50%,-50%);transition:all .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:24px;z-index:2147483647}.__va-marker:hover{box-shadow:0 3px 10px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(1.2)}.__va-marker--fixed{position:fixed}.__va-marker--stale{opacity:.5}.__va-marker-plus{height:14px;stroke-width:3;width:14px}.__va-marker-pencil{display:none;height:12px;width:12px}.__va-marker:not(.__va-marker--pending):hover .__va-marker-number{display:none}.__va-marker:not(.__va-marker--pending):hover .__va-marker-pencil{display:block}.__va-marker--pending{animation:__va-pulse 1.5s ease-in-out infinite}.__va-marker--selection{border-radius:6px;height:26px;width:26px}@keyframes __va-pulse{0%,to{box-shadow:0 2px 6px rgba(0,0,0,.3)}50%{box-shadow:0 2px 12px rgba(var(--va-accent-rgb),.5)}}.__va-input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:360px;min-width:280px;padding:12px;position:fixed;z-index:2147483647}.__va-input-label{color:var(--va-text-secondary);display:block;font-size:12px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-chain{margin-bottom:8px}.__va-input-styles{margin-bottom:10px}.__va-input-styles-summary{align-items:center;color:var(--va-text-secondary);cursor:pointer;display:flex;font-size:12px;gap:6px;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-input-styles-summary::-webkit-details-marker{display:none}.__va-input-styles-summary:before{content:"▸";flex-shrink:0;font-size:11px;transition:transform .16s ease}.__va-input-styles[open] .__va-input-styles-summary:before{transform:rotate(90deg)}.__va-input-styles-block{background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;line-height:1.55;margin-top:8px;padding:8px 10px}.__va-input-styles-element{color:var(--va-text-secondary);display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-style-line{color:var(--va-text);word-break:break-word}.__va-input-style-prop{color:#a855f7}.__va-input-style-value{color:var(--va-text)}.__va-comp-chain{align-items:center;display:inline-flex;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;gap:6px}.__va-comp,.__va-comp-chain{white-space:nowrap}.__va-comp-bracket{opacity:.4}.__va-comp-chain--dark{color:#fff}.__va-comp-chain--light{color:var(--va-accent)}.__va-comp-ellipsis{font-size:11px;letter-spacing:1px;opacity:.5}.__va-comp-chain--collapsible{cursor:pointer;flex-wrap:wrap}.__va-comp-toggle{flex-shrink:0;font-size:10px;opacity:.6;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:10px}.__va-input input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;color:var(--va-text);font-size:13px;outline:none;padding:8px 10px;transition:border-color .15s ease;width:100%}.__va-input input:focus{border-color:var(--va-accent)}.__va-input-actions{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.__va-input-actions-right{display:flex;gap:8px;margin-left:auto}.__va-input-delete-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:32px}.__va-input-delete-btn svg{height:16px;width:16px}.__va-input-delete-btn:hover{background:var(--va-bg-secondary);color:#ef4444}.__va-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;outline:none;padding:6px 14px;transition:all .15s ease}.__va-btn--secondary{background:var(--va-bg-secondary);color:var(--va-text-secondary)}.__va-btn--secondary:hover{background:var(--va-border)}.__va-btn--primary{background:var(--va-accent);color:#fff}.__va-btn--primary:hover{opacity:.9}.__va-btn:disabled{cursor:not-allowed;opacity:.4}.__va-settings-popover{position:fixed;z-index:2147483647}.__va-settings{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:min(340px,calc(100vw - 16px));min-width:260px;padding:16px;position:relative}.__va-settings-top{border-bottom:1px solid var(--va-border);display:flex;justify-content:flex-end;margin-bottom:12px;padding-bottom:10px}.__va-theme-toggle{align-items:center;background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:999px;color:var(--va-text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;transition:all .15s ease;width:28px}.__va-theme-toggle:hover{border-color:var(--va-text-secondary);color:var(--va-text)}.__va-theme-toggle svg{height:15px;width:15px}.__va-settings-row{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.__va-settings-label{color:var(--va-text-secondary);font-size:12px;white-space:nowrap}.__va-settings-row--stack{display:block}.__va-settings-row--stack .__va-settings-label{display:block;margin-bottom:8px}.__va-settings-row:last-child{margin-bottom:0}.__va-settings-divider{background:var(--va-border);height:1px;margin:8px 0 12px}.__va-settings select{background:var(--va-bg);border:1px solid var(--va-border);border-radius:4px;color:var(--va-text);font-size:12px;outline:none;padding:4px 8px}.__va-color-swatches{align-items:center;display:flex;gap:6px}.__va-color-swatch{border:2px solid var(--va-border);border-radius:50%;cursor:pointer;flex-shrink:0;height:22px;outline:none;padding:0;transition:all .15s ease;width:22px}.__va-color-swatch:hover{transform:scale(1.15)}.__va-color-swatch--active{border-color:var(--va-text);transform:scale(1.15)}.__va-toggle{background:var(--va-border);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;height:20px;outline:none;padding:0;position:relative;transition:background .15s ease;width:36px}.__va-toggle--active{background:var(--va-accent)}.__va-toggle:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .15s ease;width:16px}.__va-toggle--active:after{transform:translateX(16px)}.__va-selection-rect{background:rgba(var(--va-accent-rgb),.06);border:2px dashed var(--va-accent);border-radius:2px;pointer-events:none;position:fixed;z-index:2147483645}.__va-copy-feedback{animation:__va-fadeIn .15s ease;background:var(--va-accent);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;font-size:13px;font-weight:500;padding:8px 16px;position:fixed;right:20px;z-index:2147483647}@keyframes __va-fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+[data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}[data-agentation-vue]:not([data-agentation-vue] [data-agentation-vue]){--va-accent:#42b883;--va-accent-rgb:66,184,131}@media (prefers-color-scheme:dark){[data-agentation-vue]:not([data-va-theme=light]){--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}}[data-agentation-vue][data-va-theme=dark],[data-agentation-vue][data-va-theme=dark] [data-agentation-vue]{--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}[data-agentation-vue][data-va-theme=light],[data-agentation-vue][data-va-theme=light] [data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}:where([data-agentation-vue],[data-agentation-vue] *){border:none;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;list-style:none;margin:0;padding:0;text-decoration:none}.__va-intercept{background:transparent;cursor:crosshair;inset:0;position:fixed;z-index:2147483646}.__va-intercept--input-open{pointer-events:none}.__va-toolbar{position:fixed;--va-toolbar-base-transform:translate(0);--va-toolbar-auto-hide-transform:translate(0);--va-toolbar-size:42px;--va-toolbar-edge-offset:20px;--va-toolbar-auto-hide-peek:8px;--va-toolbar-auto-hide-corner-peek:16px;--va-toolbar-auto-hide-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-peek));--va-toolbar-auto-hide-corner-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-corner-peek));display:block;max-width:42px;min-height:42px;z-index:2147483647;--va-toolbar-resize-delay:0ms;background:var(--va-bg);border:1px solid var(--va-border);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:0;transform:var(--va-toolbar-base-transform) var(--va-toolbar-auto-hide-transform);transition:border-radius .12s cubic-bezier(.32,.72,0,1),padding .12s cubic-bezier(.32,.72,0,1),max-width .24s cubic-bezier(.22,1,.36,1) var(--va-toolbar-resize-delay),transform .15s ease,opacity .15s ease,box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-toolbar--place-bottom-right{bottom:20px;right:20px}.__va-toolbar--place-bottom-center{bottom:20px;left:50%;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-bottom-left{bottom:20px;left:20px}.__va-toolbar--place-top-right{right:20px;top:20px}.__va-toolbar--place-top-center{left:50%;top:20px;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-top-left{left:20px;top:20px}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-center{--va-toolbar-auto-hide-transform:translateY(calc(var(--va-toolbar-auto-hide-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-center{--va-toolbar-auto-hide-transform:translateY(var(--va-toolbar-auto-hide-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--collapsed{cursor:pointer;max-width:42px;min-height:42px}.__va-toolbar--expanded{--va-toolbar-resize-delay:110ms;border-radius:10px;max-width:520px;padding:4px}.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide):hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}.__va-toolbar--dragging{bottom:auto;left:0;right:auto;top:0;transform:none;transition:none}.__va-toolbar--dragging.__va-toolbar--collapsed:hover{transform:none}.__va-toolbar-stage{align-items:center;display:flex;gap:4px}.__va-toolbar-stage--toggle{inset:0;justify-content:center;opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition:opacity .11s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;visibility:visible}.__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:8px;filter:blur(4px);opacity:0;overflow:hidden;pointer-events:none;transform:translateX(var(--va-toolbar-menu-enter-x));transition:opacity .14s ease 0s,transform .22s cubic-bezier(.22,1,.36,1) 0s,visibility 0s linear .14s,filter 80ms ease 0s;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--toggle{opacity:0;pointer-events:none;transform:scale(.94);transition:opacity 90ms ease,transform .12s ease,visibility 0s linear 90ms;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--menu{filter:blur(0);opacity:1;pointer-events:auto;transform:translateX(0);transition:opacity .15s ease .15s,transform .24s cubic-bezier(.22,1,.36,1) .12s,visibility 0s linear 0s,filter .15s ease .2s;visibility:visible}.__va-toolbar--place-bottom-right .__va-toolbar-stage--menu,.__va-toolbar--place-top-right .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:-8px}.__va-toolbar--place-bottom-center .__va-toolbar-stage--menu,.__va-toolbar--place-top-center .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:0px}.__va-snap-zones{inset:0;pointer-events:none;position:fixed;z-index:2147483646}.__va-snap-zone{background:rgba(var(--va-accent-rgb),.035);border:1.5px dashed rgba(var(--va-accent-rgb),.18);border-radius:999px;box-shadow:0 0 0 1px rgba(var(--va-accent-rgb),.04);height:42px;position:fixed;transform:translate(-50%,-50%);transition:all .12s ease;width:42px}.__va-snap-zone--active{background:rgba(var(--va-accent-rgb),.09);border-color:rgba(var(--va-accent-rgb),.4)}.__va-snap-zone--rect{border-radius:8px;transform:none}.__va-snap-zone--rect.__va-snap-zone--active{transform:none}.__va-icon-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:background .15s ease,color .15s ease;width:32px}.__va-icon-btn:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-icon-btn--active{background:rgba(var(--va-accent-rgb),.15);color:var(--va-accent)}.__va-icon-btn--active:hover{background:rgba(var(--va-accent-rgb),.25)}.__va-icon-btn:disabled{cursor:not-allowed;opacity:.3}.__va-icon-btn:disabled:hover{background:transparent}.__va-icon-btn svg{height:18px;width:18px}.__va-toolbar-toggle{align-items:center;background:transparent;border:none;color:var(--va-accent);cursor:pointer;display:flex;height:100%;justify-content:center;line-height:0;outline:none;padding:0;position:relative;width:100%}.__va-toolbar-toggle svg{flex-shrink:0;height:22px;width:22px}.__va-toolbar-sep{background:var(--va-border);flex-shrink:0;height:20px;width:1px}.__va-drag-handle{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:grab;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:24px}.__va-drag-handle:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-drag-handle:active{cursor:grabbing}.__va-drag-handle-dots{display:grid;gap:2.5px;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px)}.__va-drag-handle-dots span{background:currentColor;border-radius:50%;height:3px;opacity:.6;width:3px}.__va-toolbar-badge{align-items:center;background:var(--va-accent);border-radius:9px;color:#fff;display:flex;font-size:11px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-6px;top:-6px}.__va-tooltip{align-items:center;background:#131518;border:1px solid hsla(0,0%,100%,.08);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.28);color:#dce1e7;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px;font-weight:500;gap:6px;left:0;line-height:1.15;max-width:min(360px,calc(100vw - 16px));opacity:0;padding:6px 9px;pointer-events:none;position:fixed;top:0;transform:translateY(4px) scale(.98);transform-origin:center bottom;transition:opacity .12s ease,transform .12s ease;white-space:nowrap;z-index:2147483647}.__va-tooltip[data-placement=bottom]{transform:translateY(-4px) scale(.98);transform-origin:center top}.__va-tooltip.__va-tooltip--visible{opacity:1}.__va-tooltip.__va-tooltip--visible[data-placement=bottom],.__va-tooltip.__va-tooltip--visible[data-placement=top]{transform:translateY(0) scale(1)}.__va-tooltip-label{overflow:hidden;text-overflow:ellipsis}.__va-tooltip-shortcut{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.18);border-radius:6px;color:#b5bec8;display:inline-flex;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1;min-height:18px;padding:2px 6px}.__va-tooltip-arrow{background:#131518;border:1px solid hsla(0,0%,100%,.08);border-left:none;border-top:none;height:10px;left:50%;position:absolute;transform:translateX(-50%) rotate(45deg);width:10px}.__va-tooltip[data-placement=top] .__va-tooltip-arrow{bottom:-5px}.__va-tooltip[data-placement=bottom] .__va-tooltip-arrow{top:-5px;transform:translateX(-50%) rotate(225deg)}.__va-highlight{background:rgba(var(--va-accent-rgb),.08);border:2px solid var(--va-accent);border-radius:4px;pointer-events:none;position:fixed;transition:all 80ms ease;z-index:2147483645}.__va-highlight-label{background:var(--va-accent);border-radius:4px;color:#fff;font-size:11px;font-weight:500;left:0;max-width:300px;overflow:hidden;padding:2px 8px;position:absolute;text-overflow:ellipsis;top:-28px;white-space:nowrap}.__va-highlight-label--chain{background:#1a1a1a;max-width:500px;overflow:visible;padding:4px 10px}.__va-marker{align-items:center;background:var(--va-accent);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;position:absolute;transform:translate(-50%,-50%);transition:all .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:24px;z-index:2147483647}.__va-marker:hover{box-shadow:0 3px 10px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(1.2)}.__va-marker--fixed{position:fixed}.__va-marker--stale{opacity:.5}.__va-marker-plus{height:14px;stroke-width:3;width:14px}.__va-marker-pencil{display:none;height:12px;width:12px}.__va-marker:not(.__va-marker--pending):hover .__va-marker-number{display:none}.__va-marker:not(.__va-marker--pending):hover .__va-marker-pencil{display:block}.__va-marker--pending{animation:__va-pulse 1.5s ease-in-out infinite}.__va-marker--selection{border-radius:6px;height:26px;width:26px}@keyframes __va-pulse{0%,to{box-shadow:0 2px 6px rgba(0,0,0,.3)}50%{box-shadow:0 2px 12px rgba(var(--va-accent-rgb),.5)}}.__va-input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:360px;min-width:280px;padding:12px;position:fixed;z-index:2147483647}.__va-input-label{color:var(--va-text-secondary);display:block;font-size:12px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-chain{margin-bottom:8px}.__va-input-styles{margin-bottom:10px}.__va-input-styles-summary{align-items:center;color:var(--va-text-secondary);cursor:pointer;display:flex;font-size:12px;gap:6px;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-input-styles-summary::-webkit-details-marker{display:none}.__va-input-styles-summary:before{content:"▸";flex-shrink:0;font-size:11px;transition:transform .16s ease}.__va-input-styles[open] .__va-input-styles-summary:before{transform:rotate(90deg)}.__va-input-styles-block{background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;line-height:1.55;margin-top:8px;padding:8px 10px}.__va-input-styles-element{color:var(--va-text-secondary);display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-style-line{color:var(--va-text);word-break:break-word}.__va-input-style-prop{color:#a855f7}.__va-input-style-value{color:var(--va-text)}.__va-comp-chain{align-items:center;display:inline-flex;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;gap:6px}.__va-comp,.__va-comp-chain{white-space:nowrap}.__va-comp-bracket{opacity:.4}.__va-comp-chain--dark{color:#fff}.__va-comp-chain--light{color:var(--va-accent)}.__va-comp-ellipsis{font-size:11px;letter-spacing:1px;opacity:.5}.__va-comp-chain--collapsible{cursor:pointer;flex-wrap:wrap}.__va-comp-toggle{flex-shrink:0;font-size:10px;opacity:.6;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:10px}.__va-input-editable{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;color:var(--va-text);font-family:inherit;font-size:13px;line-height:1.4;min-height:1.4em;outline:none;overflow:hidden;padding:8px 10px;transition:border-color .15s ease;white-space:pre-wrap;width:100%;word-break:break-word}.__va-input-editable:focus{border-color:var(--va-accent)}.__va-input-editable:empty:before{color:var(--va-text-secondary);content:attr(data-placeholder);pointer-events:none}.__va-mention{background:rgba(var(--va-accent-rgb),.15);border-radius:4px;color:var(--va-accent);cursor:default;display:inline;font-size:12px;font-weight:600;padding:1px 6px;-webkit-user-select:all;-moz-user-select:all;user-select:all;white-space:nowrap}.__va-mention--deleted{opacity:.45;text-decoration:line-through}.__va-mention-dropdown{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:200px;max-width:280px;min-width:180px;overflow-y:auto;padding:4px;position:absolute;z-index:1}.__va-mention-option{align-items:center;border-radius:4px;color:var(--va-text);cursor:pointer;display:flex;font-size:12px;gap:8px;padding:6px 8px}.__va-mention-option--active,.__va-mention-option:hover{background:var(--va-bg-secondary)}.__va-mention-option-number{align-items:center;background:var(--va-accent);border-radius:50%;color:#fff;display:inline-flex;flex-shrink:0;font-size:11px;font-weight:700;height:20px;justify-content:center;width:20px}.__va-mention-option-preview{color:var(--va-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-actions{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.__va-input-actions-right{display:flex;gap:8px;margin-left:auto}.__va-input-delete-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:32px}.__va-input-delete-btn svg{height:16px;width:16px}.__va-input-delete-btn:hover{background:var(--va-bg-secondary);color:#ef4444}.__va-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;outline:none;padding:6px 14px;transition:all .15s ease}.__va-btn--secondary{background:var(--va-bg-secondary);color:var(--va-text-secondary)}.__va-btn--secondary:hover{background:var(--va-border)}.__va-btn--primary{background:var(--va-accent);color:#fff}.__va-btn--primary:hover{opacity:.9}.__va-btn:disabled{cursor:not-allowed;opacity:.4}.__va-settings-popover{position:fixed;z-index:2147483647}.__va-settings{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:min(340px,calc(100vw - 16px));min-width:260px;padding:16px;position:relative}.__va-settings-top{align-items:center;border-bottom:1px solid var(--va-border);display:flex;justify-content:space-between;margin-bottom:12px;padding-bottom:10px}.__va-settings-title{color:var(--va-text);font-size:13px;font-weight:600}.__va-settings-version{color:var(--va-text-secondary);font-size:11px;font-weight:400}.__va-theme-toggle{align-items:center;background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:999px;color:var(--va-text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;transition:all .15s ease;width:28px}.__va-theme-toggle:hover{border-color:var(--va-text-secondary);color:var(--va-text)}.__va-theme-toggle svg{height:15px;width:15px}.__va-settings-row{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.__va-settings-label{color:var(--va-text-secondary);font-size:12px;white-space:nowrap}.__va-settings-row--stack{display:block}.__va-settings-row--stack .__va-settings-label{display:block;margin-bottom:8px}.__va-settings-row:last-child{margin-bottom:0}.__va-settings-divider{background:var(--va-border);height:1px;margin:8px 0 12px}.__va-settings select{background:var(--va-bg);border:1px solid var(--va-border);border-radius:4px;color:var(--va-text);font-size:12px;outline:none;padding:4px 8px}.__va-color-swatches{align-items:center;display:flex;gap:6px}.__va-color-swatch{border:2px solid var(--va-border);border-radius:50%;cursor:pointer;flex-shrink:0;height:22px;outline:none;padding:0;transition:all .15s ease;width:22px}.__va-color-swatch:hover{transform:scale(1.15)}.__va-color-swatch--active{border-color:var(--va-text);transform:scale(1.15)}.__va-toggle{background:var(--va-border);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;height:20px;outline:none;padding:0;position:relative;transition:background .15s ease;width:36px}.__va-toggle--active{background:var(--va-accent)}.__va-toggle:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .15s ease;width:16px}.__va-toggle--active:after{transform:translateX(16px)}.__va-selection-rect{background:rgba(var(--va-accent-rgb),.06);border:2px dashed var(--va-accent);border-radius:2px;pointer-events:none;position:fixed;z-index:2147483645}.__va-copy-feedback{animation:__va-fadeIn .15s ease;background:var(--va-accent);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;font-size:13px;font-weight:500;padding:8px 16px;position:fixed;right:20px;z-index:2147483647}@keyframes __va-fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.__va-undo-feedback{align-items:center;animation:__va-fadeIn .15s ease;background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--va-text);display:flex;font-size:13px;font-weight:500;gap:12px;padding:8px 12px 8px 16px;position:fixed;right:20px;z-index:2147483647}.__va-undo-feedback--shifted{bottom:112px}.__va-undo-btn{background:var(--va-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;outline:none;padding:4px 10px;transition:opacity .15s ease}.__va-undo-btn:hover{opacity:.85}

package/dist/utils/mention.d.ts

@@ -0,0 +1,13 @@
+export interface MentionCandidate {
+    id: string;
+    displayNumber: number;
+    commentPreview: string;
+}
+export declare function createMentionChipHTML(id: string, displayNumber: number): string;
+export declare function createDeletedMentionChipHTML(id: string): string;
+export declare function serializeMentions(el: HTMLElement): string;
+export declare function hydrateMentions(text: string, annotations: {
+    id: string;
+    displayNumber: number;
+}[]): string;
+export declare function extractMentionIds(text: string): string[];

package/dist/utils/mention.mjs

@@ -0,0 +1,46 @@
+const MENTION_REGEX = /@\[(\d+)\]/g;
+export function createMentionChipHTML(id, displayNumber) {
+  return `<span contenteditable="false" class="__va-mention" data-mention-id="${id}">@${displayNumber}</span>`;
+}
+export function createDeletedMentionChipHTML(id) {
+  return `<span contenteditable="false" class="__va-mention __va-mention--deleted" data-mention-id="${id}">@?</span>`;
+}
+export function serializeMentions(el) {
+  let result = "";
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      result += node.textContent || "";
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      if (element.classList.contains("__va-mention") && element.dataset.mentionId) {
+        result += `@[${element.dataset.mentionId}]`;
+      } else if (element.tagName === "BR") {
+        result += "\n";
+      } else {
+        const inner = serializeMentions(element);
+        if (element.tagName === "DIV" && result.length > 0 && !result.endsWith("\n"))
+          result += "\n";
+        result += inner;
+      }
+    }
+  }
+  return result;
+}
+export function hydrateMentions(text, annotations) {
+  const lookup = new Map(annotations.map((a) => [a.id, a.displayNumber]));
+  return escapeHTML(text).replace(
+    /@\[(\d+)\]/g,
+    (_, id) => {
+      const displayNumber = lookup.get(id);
+      if (displayNumber != null)
+        return createMentionChipHTML(id, displayNumber);
+      return createDeletedMentionChipHTML(id);
+    }
+  );
+}
+export function extractMentionIds(text) {
+  return [...new Set(Array.from(text.matchAll(MENTION_REGEX), (m) => m[1]))];
+}
+function escapeHTML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentation-vue",
-  "version": "0.2.6",
+  "version": "0.2.10",
   "description": "Visual feedback tool for AI coding agents — Vue 2.7 & 3",
   "author": "Dorian Becker",
   "license": "PolyForm-Shield-1.0.0",