agentation-vue 0.2.6 → 0.2.12

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,68 @@ const inputStyle = computed(() => {
     top: `${Math.max(10, y)}px`
   };
 });
-function onAdd() {
-  const text = comment.value.trim();
-  if (!text)
+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;
-  emit("add", text);
+  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() {
+  emit("add", getComment().trim());
+}
+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 +127,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,8 +158,8 @@ onMounted(() => {
         <VaButton variant="secondary" @click="$emit('cancel')">
           Cancel
         </VaButton>
-        <VaButton :disabled="!comment.trim()" @click="onAdd">
-          {{ isEditing ? "Save" : "Add" }}
+        <VaButton @click="onAdd">
+          {{ isEditing ? "Save" : commentText.trim() ? "Add" : "Pin" }}
         </VaButton>
       </div>
     </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/AnnotationMarker.d.vue.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     isStale?: boolean;
     isPending?: boolean;
     isSelection?: boolean;
+    hidden?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     click: () => any;

package/dist/components/AnnotationMarker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue-demi";
+import { computed, onMounted, ref } from "vue-demi";
 import VaIcon from "./VaIcon.vue";
 const props = defineProps({
   number: { type: Number, required: true },
@@ -8,9 +8,16 @@ const props = defineProps({
   isFixed: { type: Boolean, required: false },
   isStale: { type: Boolean, required: false },
   isPending: { type: Boolean, required: false },
-  isSelection: { type: Boolean, required: false }
+  isSelection: { type: Boolean, required: false },
+  hidden: { type: Boolean, required: false }
 });
 defineEmits(["click"]);
+const entering = ref(true);
+onMounted(() => {
+  requestAnimationFrame(() => {
+    entering.value = false;
+  });
+});
 const markerStyle = computed(() => ({
   left: `${props.x}%`,
   top: `${props.y}px`
@@ -24,7 +31,9 @@ const markerStyle = computed(() => ({
   '__va-marker--fixed': isFixed,
   '__va-marker--stale': isStale,
   '__va-marker--pending': isPending,
-  '__va-marker--selection': isSelection
+  '__va-marker--selection': isSelection,
+  '__va-marker--hidden': hidden,
+  '__va-marker--entering': entering
 }"
     :style="markerStyle"
     data-agentation-vue

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     isStale?: boolean;
     isPending?: boolean;
     isSelection?: boolean;
+    hidden?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     click: () => 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>
@@ -82,10 +84,10 @@ function toggleTheme() {
     <div class="__va-settings-divider" />
 
     <div class="__va-settings-row">
-      <span class="__va-settings-label">Clear on copy/send</span>
+      <span class="__va-settings-label">Clear After Copy</span>
       <VaToggle
         :model-value="settings.clearAfterCopy"
-        aria-label="Clear on copy/send"
+        aria-label="Clear After Copy"
         @update:model-value="update('clearAfterCopy', $event)"
       />
     </div>
@@ -123,7 +125,28 @@ function toggleTheme() {
           {{ isMac ? "\u2325 Option" : "Alt" }}
         </option>
         <option value="Shift">
-          Shift
+          ⇧ Shift
+        </option>
+      </select>
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Peek inspect (hold key)</span>
+      <select :value="settings.peekKey" @change="onSelectChange('peekKey', $event)">
+        <option value="none">
+          Off
+        </option>
+        <option value="Meta">
+          {{ isMac ? "\u2318 Cmd" : "Ctrl" }}
+        </option>
+        <option value="Alt">
+          {{ isMac ? "\u2325 Option" : "Alt" }}
+        </option>
+        <option value="Shift">
+          ⇧ Shift
+        </option>
+        <option value="Control">
+          {{ isMac ? "\u2303 Control" : "Ctrl" }}
         </option>
       </select>
     </div>

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;
+};