agentation-vue 0.2.5 → 0.2.10

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

@@ -1,9 +1,12 @@
-import type { Annotation } from '../types';
+import type { Annotation, StorageAdapter } from '../types';
 declare function setScopeUrl(url: string): void;
 declare function addAnnotation(annotation: Omit<Annotation, 'id' | 'timestamp'>): Annotation;
 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): {
     annotations: import("vue-demi").Ref<{
         id: string;
@@ -100,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

@@ -1,5 +1,14 @@
 import { ref } from "vue-demi";
 const STORAGE_KEY = "agentation-vue-annotations";
+const fallbackAnnotationStorage = {
+  getItem(key) {
+    return sessionStorage.getItem(key);
+  },
+  setItem(key, value) {
+    sessionStorage.setItem(key, value);
+  }
+};
+let annotationStorage = fallbackAnnotationStorage;
 function serializeAnnotations(annotations2) {
   return JSON.stringify(annotations2.map(({ _targetRef, ...rest }) => rest));
 }
@@ -24,7 +33,7 @@ function parseStore(raw, currentUrl) {
 }
 function loadAnnotations(url) {
   try {
-    const stored = sessionStorage.getItem(STORAGE_KEY);
+    const stored = annotationStorage.getItem(STORAGE_KEY);
     const store = parseStore(stored, url);
     const annotations2 = store[url];
     return Array.isArray(annotations2) ? annotations2 : [];
@@ -48,7 +57,7 @@ function setScopeUrl(url) {
 }
 function save() {
   try {
-    const stored = sessionStorage.getItem(STORAGE_KEY);
+    const stored = annotationStorage.getItem(STORAGE_KEY);
     const store = parseStore(stored, scopedUrl);
     if (annotations.value.length > 0)
       store[scopedUrl] = annotations.value;
@@ -62,7 +71,7 @@ function save() {
         ])
       )
     );
-    sessionStorage.setItem(STORAGE_KEY, serialized);
+    annotationStorage.setItem(STORAGE_KEY, serialized);
   } catch {
   }
 }
@@ -101,8 +110,21 @@ 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;
+  setScopeUrl(scopedUrl);
+}
+export function resetAnnotationStorage() {
+  annotationStorage = fallbackAnnotationStorage;
+  setScopeUrl(scopedUrl);
+}
 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/useElementDetection.mjs

@@ -1,5 +1,5 @@
 import { ref } from "vue-demi";
-import { VA_DATA_ATTR_SELECTOR } from "../constants.mjs";
+import { isInsideAgentationTree } from "../utils/agentation-tree.mjs";
 import { detectVueComponents } from "../utils/dom-inspector.mjs";
 import { getElementName } from "../utils/selectors.mjs";
 export function useElementDetection(overlayRef, showComponentTree) {
@@ -50,7 +50,7 @@ export function useElementDetection(overlayRef, showComponentTree) {
       const el = getElementUnderOverlay(e);
       if (el === lastElement)
         return;
-      if (el?.closest(VA_DATA_ATTR_SELECTOR)) {
+      if (el && isInsideAgentationTree(el)) {
         clearHighlight();
         return;
       }

package/dist/composables/useKeyboardShortcuts.mjs

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, watch } from "vue-demi";
-import { VA_DATA_ATTR_SELECTOR } from "../constants.mjs";
+import { getDeepActiveElement, isInsideAgentationTree } from "../utils/agentation-tree.mjs";
 const DEFAULT_KEYMAP = {
   "activate": "",
   "element-select": "v",
@@ -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 };
   });
@@ -69,14 +70,14 @@ export function useKeyboardShortcuts(options) {
     return "open";
   }
   function isForeignEditable() {
-    const active = document.activeElement;
+    const active = getDeepActiveElement();
     if (!active)
       return false;
     const tag = active.tagName.toLowerCase();
     const isEditable = tag === "input" || tag === "textarea" || active.isContentEditable;
     if (!isEditable)
       return false;
-    return !active.closest(VA_DATA_ATTR_SELECTOR);
+    return !isInsideAgentationTree(active);
   }
   function isBrowserCombo(e) {
     if (!e.metaKey && !e.ctrlKey)
@@ -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/composables/useMultiSelect.mjs

@@ -1,5 +1,5 @@
 import { ref } from "vue-demi";
-import { VA_DATA_ATTR_SELECTOR } from "../constants.mjs";
+import { isInsideAgentationTree } from "../utils/agentation-tree.mjs";
 const LEAF_TAGS = /* @__PURE__ */ new Set(["button", "a", "input", "img"]);
 export function useMultiSelect(mode, transitionFn) {
   const selectionRect = ref(null);
@@ -11,7 +11,7 @@ export function useMultiSelect(mode, transitionFn) {
   function cacheElements() {
     cachedElements = [];
     for (const el of document.querySelectorAll("body *")) {
-      if (el.closest(VA_DATA_ATTR_SELECTOR))
+      if (isInsideAgentationTree(el))
         continue;
       const rect = el.getBoundingClientRect();
       if (rect.width === 0 || rect.height === 0)

package/dist/composables/useSettings.d.ts

@@ -1,3 +1,6 @@
+import type { StorageAdapter } from '../types';
+export declare function setSettingsStorage(adapter: StorageAdapter): void;
+export declare function resetSettingsStorage(): void;
 export declare function useSettings(): {
     settings: {
         outputDetail: import("../types").OutputDetail;

package/dist/composables/useSettings.mjs

@@ -1,5 +1,14 @@
 import { reactive, watch } from "vue-demi";
 const STORAGE_KEY = "agentation-vue-settings";
+const fallbackSettingsStorage = {
+  getItem(key) {
+    return localStorage.getItem(key);
+  },
+  setItem(key, value) {
+    localStorage.setItem(key, value);
+  }
+};
+let settingsStorage = fallbackSettingsStorage;
 const defaults = {
   outputDetail: "standard",
   markerColor: "#42B883",
@@ -13,7 +22,7 @@ const defaults = {
 };
 function loadSettings() {
   try {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = settingsStorage.getItem(STORAGE_KEY);
     if (stored)
       return { ...defaults, ...JSON.parse(stored) };
   } catch {
@@ -25,11 +34,19 @@ watch(
   () => ({ ...settings }),
   (val) => {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(val));
+      settingsStorage.setItem(STORAGE_KEY, JSON.stringify(val));
     } catch {
     }
   }
 );
+export function setSettingsStorage(adapter) {
+  settingsStorage = adapter;
+  Object.assign(settings, loadSettings());
+}
+export function resetSettingsStorage() {
+  settingsStorage = fallbackSettingsStorage;
+  Object.assign(settings, loadSettings());
+}
 export function useSettings() {
   function resetSettings() {
     Object.assign(settings, defaults);

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/index.d.ts

@@ -13,7 +13,7 @@ export { default as VaIconButton } from './components/VaIconButton.vue';
 export { default as VaToggle } from './components/VaToggle.vue';
 export { vaTooltipDirective };
 export { useAnimationPause } from './composables/useAnimationPause';
-export { useAnnotations } from './composables/useAnnotations';
+export { resetAnnotationStorage, setAnnotationStorage, useAnnotations, } from './composables/useAnnotations';
 export { useAreaSelect } from './composables/useAreaSelect';
 export { useElementDetection } from './composables/useElementDetection';
 export { useInteractionMode } from './composables/useInteractionMode';
@@ -22,10 +22,12 @@ export type { DoubleTapConfig, KeyboardShortcutConfig, KeyboardShortcutState, Sh
 export { useMarkerPositions } from './composables/useMarkerPositions';
 export { useMultiSelect } from './composables/useMultiSelect';
 export { formatAnnotations, useOutputFormatter } from './composables/useOutputFormatter';
-export { useSettings } from './composables/useSettings';
+export { resetSettingsStorage, setSettingsStorage, useSettings, } from './composables/useSettings';
 export { useTextSelection } from './composables/useTextSelection';
 export { useToolbarAutoHide } from './composables/useToolbarAutoHide';
 export type { VaTooltipOptions, VaTooltipPlacement, VaTooltipValue } from './directives/vaTooltip';
 export { icons } from './icons';
 export type { IconName } from './icons';
-export type { AgentationEmits, AgentationProps, Annotation, BoundingBox, ElementRef, InteractionMode, OutputDetail, Settings, } from './types';
+export type { AgentationEmits, AgentationProps, Annotation, BoundingBox, ElementRef, InteractionMode, OutputDetail, Settings, StorageAdapter, } from './types';
+export { resetVueDetector, setVueDetector } from './utils/dom-inspector';
+export type { VueDetector } from './utils/dom-inspector';

package/dist/index.mjs

@@ -16,7 +16,11 @@ export { default as VaIconButton } from "./components/VaIconButton.vue";
 export { default as VaToggle } from "./components/VaToggle.vue";
 export { vaTooltipDirective };
 export { useAnimationPause } from "./composables/useAnimationPause.mjs";
-export { useAnnotations } from "./composables/useAnnotations.mjs";
+export {
+  resetAnnotationStorage,
+  setAnnotationStorage,
+  useAnnotations
+} from "./composables/useAnnotations.mjs";
 export { useAreaSelect } from "./composables/useAreaSelect.mjs";
 export { useElementDetection } from "./composables/useElementDetection.mjs";
 export { useInteractionMode } from "./composables/useInteractionMode.mjs";
@@ -24,7 +28,12 @@ export { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/use
 export { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
 export { useMultiSelect } from "./composables/useMultiSelect.mjs";
 export { formatAnnotations, useOutputFormatter } from "./composables/useOutputFormatter.mjs";
-export { useSettings } from "./composables/useSettings.mjs";
+export {
+  resetSettingsStorage,
+  setSettingsStorage,
+  useSettings
+} from "./composables/useSettings.mjs";
 export { useTextSelection } from "./composables/useTextSelection.mjs";
 export { useToolbarAutoHide } from "./composables/useToolbarAutoHide.mjs";
 export { icons } from "./icons.mjs";
+export { resetVueDetector, setVueDetector } from "./utils/dom-inspector.mjs";