agentation-vue 0.2.0

package/dist/composables/useElementDetection.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useElementDetection = useElementDetection;
+var _vueDemi = require("vue-demi");
+var _constants = require("../constants");
+var _domInspector = require("../utils/dom-inspector");
+var _selectors = require("../utils/selectors");
+function useElementDetection(overlayRef, showComponentTree) {
+  const hoveredElement = (0, _vueDemi.ref)(null);
+  const hoveredRect = (0, _vueDemi.ref)(null);
+  const hoveredName = (0, _vueDemi.ref)("");
+  const hoveredComponentChain = (0, _vueDemi.ref)();
+  let lastElement = null;
+  let rafId = null;
+  function getElementUnderOverlay(e) {
+    const overlay = overlayRef.value;
+    if (!overlay) return document.elementFromPoint(e.clientX, e.clientY);
+    const previousPointerEvents = overlay.style.pointerEvents;
+    overlay.style.pointerEvents = "none";
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    overlay.style.pointerEvents = previousPointerEvents;
+    return el;
+  }
+  function clearHighlight() {
+    hoveredElement.value = null;
+    hoveredRect.value = null;
+    hoveredName.value = "";
+    hoveredComponentChain.value = void 0;
+    lastElement = null;
+  }
+  function updateHighlight(el) {
+    const rect = el.getBoundingClientRect();
+    hoveredElement.value = el;
+    hoveredRect.value = {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    };
+    hoveredName.value = (0, _selectors.getElementName)(el);
+    if (showComponentTree?.()) {
+      hoveredComponentChain.value = (0, _domInspector.detectVueComponents)(el);
+    } else {
+      hoveredComponentChain.value = void 0;
+    }
+  }
+  function onMouseMove(e) {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      const el = getElementUnderOverlay(e);
+      if (el === lastElement) return;
+      if (el?.closest(_constants.VA_DATA_ATTR_SELECTOR)) {
+        clearHighlight();
+        return;
+      }
+      lastElement = el;
+      if (el) {
+        updateHighlight(el);
+      } else {
+        clearHighlight();
+      }
+    });
+  }
+  function cleanup() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    clearHighlight();
+  }
+  return {
+    hoveredElement,
+    hoveredRect,
+    hoveredName,
+    hoveredComponentChain,
+    onMouseMove,
+    clearHighlight,
+    getElementUnderOverlay,
+    cleanup
+  };
+}

package/dist/composables/useElementDetection.mjs

@@ -0,0 +1,82 @@
+import { ref } from "vue-demi";
+import { VA_DATA_ATTR_SELECTOR } from "../constants.mjs";
+import { detectVueComponents } from "../utils/dom-inspector.mjs";
+import { getElementName } from "../utils/selectors.mjs";
+export function useElementDetection(overlayRef, showComponentTree) {
+  const hoveredElement = ref(null);
+  const hoveredRect = ref(null);
+  const hoveredName = ref("");
+  const hoveredComponentChain = ref();
+  let lastElement = null;
+  let rafId = null;
+  function getElementUnderOverlay(e) {
+    const overlay = overlayRef.value;
+    if (!overlay)
+      return document.elementFromPoint(e.clientX, e.clientY);
+    const previousPointerEvents = overlay.style.pointerEvents;
+    overlay.style.pointerEvents = "none";
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    overlay.style.pointerEvents = previousPointerEvents;
+    return el;
+  }
+  function clearHighlight() {
+    hoveredElement.value = null;
+    hoveredRect.value = null;
+    hoveredName.value = "";
+    hoveredComponentChain.value = void 0;
+    lastElement = null;
+  }
+  function updateHighlight(el) {
+    const rect = el.getBoundingClientRect();
+    hoveredElement.value = el;
+    hoveredRect.value = {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    };
+    hoveredName.value = getElementName(el);
+    if (showComponentTree?.()) {
+      hoveredComponentChain.value = detectVueComponents(el);
+    } else {
+      hoveredComponentChain.value = void 0;
+    }
+  }
+  function onMouseMove(e) {
+    if (rafId !== null)
+      return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      const el = getElementUnderOverlay(e);
+      if (el === lastElement)
+        return;
+      if (el?.closest(VA_DATA_ATTR_SELECTOR)) {
+        clearHighlight();
+        return;
+      }
+      lastElement = el;
+      if (el) {
+        updateHighlight(el);
+      } else {
+        clearHighlight();
+      }
+    });
+  }
+  function cleanup() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    clearHighlight();
+  }
+  return {
+    hoveredElement,
+    hoveredRect,
+    hoveredName,
+    hoveredComponentChain,
+    onMouseMove,
+    clearHighlight,
+    getElementUnderOverlay,
+    cleanup
+  };
+}

package/dist/composables/useInteractionMode.d.ts

@@ -0,0 +1,5 @@
+import type { InteractionMode } from '../types';
+export declare function useInteractionMode(): {
+    mode: import("vue-demi").Ref<InteractionMode, InteractionMode>;
+    transition: (to: InteractionMode) => boolean;
+};

package/dist/composables/useInteractionMode.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractionMode = useInteractionMode;
+var _vueDemi = require("vue-demi");
+function useInteractionMode() {
+  const mode = (0, _vueDemi.ref)("idle");
+  const allowedTransitions = {
+    "idle": ["inspect"],
+    "inspect": ["idle", "input-open", "multi-selecting", "area-selecting"],
+    "multi-selecting": ["input-open", "inspect"],
+    "area-selecting": ["input-open", "inspect"],
+    "input-open": ["inspect", "idle"]
+  };
+  function transition(to) {
+    if (allowedTransitions[mode.value]?.includes(to)) {
+      mode.value = to;
+      return true;
+    }
+    console.warn(`[agentation-vue] Invalid transition: ${mode.value} \u2192 ${to}`);
+    return false;
+  }
+  return {
+    mode,
+    transition
+  };
+}

package/dist/composables/useInteractionMode.mjs

@@ -0,0 +1,20 @@
+import { ref } from "vue-demi";
+export function useInteractionMode() {
+  const mode = ref("idle");
+  const allowedTransitions = {
+    "idle": ["inspect"],
+    "inspect": ["idle", "input-open", "multi-selecting", "area-selecting"],
+    "multi-selecting": ["input-open", "inspect"],
+    "area-selecting": ["input-open", "inspect"],
+    "input-open": ["inspect", "idle"]
+  };
+  function transition(to) {
+    if (allowedTransitions[mode.value]?.includes(to)) {
+      mode.value = to;
+      return true;
+    }
+    console.warn(`[agentation-vue] Invalid transition: ${mode.value} \u2192 ${to}`);
+    return false;
+  }
+  return { mode, transition };
+}

package/dist/composables/useKeyboardShortcuts.d.ts

@@ -0,0 +1,43 @@
+import type { ComputedRef, Ref } from 'vue-demi';
+import type { InteractionMode } from '../types';
+export type ShortcutAction = 'activate' | 'element-select' | 'area-select' | 'pause-animations' | 'copy' | 'clear' | 'settings' | 'minimize';
+export interface DoubleTapConfig {
+    enabled: boolean;
+    key: string;
+    thresholdMs: number;
+}
+export interface KeyboardShortcutConfig {
+    enabledWhenClosed: boolean;
+    priorityWhenOpen: boolean;
+    doubleTap: DoubleTapConfig;
+    keymap: Partial<Record<ShortcutAction, string>>;
+    conflictPolicy: 'ignore-editables' | 'always-capture';
+}
+export interface ShortcutActionHandlers {
+    activate: () => void;
+    deactivate: () => void;
+    elementSelect: () => void;
+    areaSelect: () => void;
+    pauseAnimations: () => void;
+    copy: () => void;
+    clear: () => void;
+    openSettings: () => void;
+    inputCancel: () => void;
+    closeSettings: () => void;
+}
+export interface UseKeyboardShortcutsOptions {
+    mode: Ref<InteractionMode>;
+    settingsOpen: Ref<boolean>;
+    toolbarDragging: Ref<boolean>;
+    toolbarRef: Ref<{
+        expanded: boolean;
+    } | null>;
+    isInteractionLocked: () => boolean;
+    config: ComputedRef<KeyboardShortcutConfig>;
+    actions: ShortcutActionHandlers;
+}
+export interface KeyboardShortcutState {
+    cleanup: () => void;
+}
+export declare const DEFAULT_SHORTCUT_CONFIG: KeyboardShortcutConfig;
+export declare function useKeyboardShortcuts(options: UseKeyboardShortcutsOptions): KeyboardShortcutState;

package/dist/composables/useKeyboardShortcuts.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_SHORTCUT_CONFIG = void 0;
+exports.useKeyboardShortcuts = useKeyboardShortcuts;
+var _vueDemi = require("vue-demi");
+var _constants = require("../constants");
+const DEFAULT_KEYMAP = {
+  "activate": "",
+  "element-select": "v",
+  "area-select": "a",
+  "pause-animations": "p",
+  "copy": "c",
+  "clear": "Backspace",
+  "settings": "",
+  "minimize": "Escape"
+};
+const DEFAULT_SHORTCUT_CONFIG = exports.DEFAULT_SHORTCUT_CONFIG = {
+  enabledWhenClosed: true,
+  priorityWhenOpen: true,
+  doubleTap: {
+    enabled: true,
+    key: "Shift",
+    thresholdMs: 280
+  },
+  keymap: {},
+  conflictPolicy: "ignore-editables"
+};
+const BROWSER_BLACKLIST = /* @__PURE__ */new Set(["Meta+l", "Meta+t", "Meta+w", "Meta+r", "Meta+n", "Meta+q", "Meta+Shift+t", "Meta+Shift+n", "Control+l", "Control+t", "Control+w", "Control+r", "Control+n", "Control+q", "Control+Shift+t", "Control+Shift+n", "Meta+c", "Meta+v", "Meta+x", "Meta+a", "Meta+z", "Control+c", "Control+v", "Control+x", "Control+a", "Control+z"]);
+function useKeyboardShortcuts(options) {
+  const {
+    mode,
+    settingsOpen,
+    toolbarRef,
+    isInteractionLocked,
+    actions
+  } = options;
+  let lastActivationKeyUpTime = 0;
+  let listenerAttached = false;
+  let mergedKeymap = {
+    ...DEFAULT_KEYMAP,
+    ...options.config.value.keymap
+  };
+  (0, _vueDemi.watch)(options.config, cfg2 => {
+    mergedKeymap = {
+      ...DEFAULT_KEYMAP,
+      ...cfg2.keymap
+    };
+  });
+  function cfg() {
+    return options.config.value;
+  }
+  function getCurrentScope() {
+    if (mode.value === "idle" && (!toolbarRef.value || !toolbarRef.value.expanded)) {
+      return "closed";
+    }
+    if (settingsOpen.value) {
+      return "settings";
+    }
+    if (mode.value === "input-open") {
+      return "input";
+    }
+    return "open";
+  }
+  function isForeignEditable() {
+    const active = document.activeElement;
+    if (!active) return false;
+    const tag = active.tagName.toLowerCase();
+    const isEditable = tag === "input" || tag === "textarea" || active.isContentEditable;
+    if (!isEditable) return false;
+    return !active.closest(_constants.VA_DATA_ATTR_SELECTOR);
+  }
+  function isBrowserCombo(e) {
+    if (!e.metaKey && !e.ctrlKey) return false;
+    const parts = [];
+    if (e.metaKey) parts.push("Meta");
+    if (e.ctrlKey) parts.push("Control");
+    if (e.shiftKey) parts.push("Shift");
+    parts.push(e.key);
+    return BROWSER_BLACKLIST.has(parts.join("+"));
+  }
+  function findActionForKey(key) {
+    const normalized = key.toLowerCase();
+    for (const [action, mappedKey] of Object.entries(mergedKeymap)) {
+      if (!mappedKey) continue;
+      if (mappedKey.toLowerCase() === normalized || mappedKey === key) {
+        return action;
+      }
+    }
+    return null;
+  }
+  function executeAction(action) {
+    switch (action) {
+      case "element-select":
+        actions.elementSelect();
+        break;
+      case "area-select":
+        actions.areaSelect();
+        break;
+      case "pause-animations":
+        actions.pauseAnimations();
+        break;
+      case "copy":
+        actions.copy();
+        break;
+      case "clear":
+        actions.clear();
+        break;
+      case "settings":
+        actions.openSettings();
+        break;
+      case "minimize":
+        actions.deactivate();
+        if (toolbarRef.value) toolbarRef.value.expanded = false;
+        break;
+    }
+  }
+  function consume(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function onKeyDown(e) {
+    if (e.repeat) return;
+    if (isBrowserCombo(e)) return;
+    const hasModifier = e.metaKey || e.ctrlKey || e.altKey;
+    const scope = getCurrentScope();
+    if (scope === "closed") {
+      return;
+    }
+    if (scope === "settings") {
+      if (e.key === "Escape") {
+        consume(e);
+        actions.closeSettings();
+      }
+      return;
+    }
+    if (scope === "input") {
+      if (e.key === "Escape") {
+        consume(e);
+        actions.inputCancel();
+      }
+      return;
+    }
+    if (cfg().conflictPolicy === "ignore-editables" && isForeignEditable()) return;
+    if (isInteractionLocked()) return;
+    if (hasModifier) return;
+    const action = findActionForKey(e.key);
+    if (!action) return;
+    if (cfg().priorityWhenOpen) {
+      consume(e);
+    }
+    executeAction(action);
+  }
+  function onKeyUp(e) {
+    const {
+      doubleTap
+    } = cfg();
+    if (!doubleTap.enabled) return;
+    if (e.key !== doubleTap.key) return;
+    if (e.repeat) return;
+    const now = Date.now();
+    const delta = now - lastActivationKeyUpTime;
+    lastActivationKeyUpTime = now;
+    if (delta < doubleTap.thresholdMs && delta > 50) {
+      lastActivationKeyUpTime = 0;
+      const scope = getCurrentScope();
+      if (scope === "closed") {
+        actions.activate();
+        if (toolbarRef.value) toolbarRef.value.expanded = true;
+      } else if (scope === "open") {
+        actions.deactivate();
+        if (toolbarRef.value) toolbarRef.value.expanded = false;
+      }
+    }
+  }
+  function onBlurOrVisibility() {
+    lastActivationKeyUpTime = 0;
+  }
+  function attach() {
+    if (listenerAttached) return;
+    listenerAttached = true;
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("blur", onBlurOrVisibility);
+    document.addEventListener("visibilitychange", onBlurOrVisibility);
+  }
+  function detach() {
+    if (!listenerAttached) return;
+    listenerAttached = false;
+    document.removeEventListener("keydown", onKeyDown, true);
+    document.removeEventListener("keyup", onKeyUp, true);
+    window.removeEventListener("blur", onBlurOrVisibility);
+    document.removeEventListener("visibilitychange", onBlurOrVisibility);
+  }
+  (0, _vueDemi.onMounted)(attach);
+  (0, _vueDemi.onBeforeUnmount)(detach);
+  return {
+    cleanup: detach
+  };
+}

package/dist/composables/useKeyboardShortcuts.mjs

@@ -0,0 +1,223 @@
+import { onBeforeUnmount, onMounted, watch } from "vue-demi";
+import { VA_DATA_ATTR_SELECTOR } from "../constants.mjs";
+const DEFAULT_KEYMAP = {
+  "activate": "",
+  "element-select": "v",
+  "area-select": "a",
+  "pause-animations": "p",
+  "copy": "c",
+  "clear": "Backspace",
+  "settings": "",
+  "minimize": "Escape"
+};
+export const DEFAULT_SHORTCUT_CONFIG = {
+  enabledWhenClosed: true,
+  priorityWhenOpen: true,
+  doubleTap: { enabled: true, key: "Shift", thresholdMs: 280 },
+  keymap: {},
+  conflictPolicy: "ignore-editables"
+};
+const BROWSER_BLACKLIST = /* @__PURE__ */ new Set([
+  "Meta+l",
+  "Meta+t",
+  "Meta+w",
+  "Meta+r",
+  "Meta+n",
+  "Meta+q",
+  "Meta+Shift+t",
+  "Meta+Shift+n",
+  "Control+l",
+  "Control+t",
+  "Control+w",
+  "Control+r",
+  "Control+n",
+  "Control+q",
+  "Control+Shift+t",
+  "Control+Shift+n",
+  "Meta+c",
+  "Meta+v",
+  "Meta+x",
+  "Meta+a",
+  "Meta+z",
+  "Control+c",
+  "Control+v",
+  "Control+x",
+  "Control+a",
+  "Control+z"
+]);
+export function useKeyboardShortcuts(options) {
+  const { mode, settingsOpen, toolbarRef, isInteractionLocked, actions } = options;
+  let lastActivationKeyUpTime = 0;
+  let listenerAttached = false;
+  let mergedKeymap = { ...DEFAULT_KEYMAP, ...options.config.value.keymap };
+  watch(options.config, (cfg2) => {
+    mergedKeymap = { ...DEFAULT_KEYMAP, ...cfg2.keymap };
+  });
+  function cfg() {
+    return options.config.value;
+  }
+  function getCurrentScope() {
+    if (mode.value === "idle" && (!toolbarRef.value || !toolbarRef.value.expanded)) {
+      return "closed";
+    }
+    if (settingsOpen.value) {
+      return "settings";
+    }
+    if (mode.value === "input-open") {
+      return "input";
+    }
+    return "open";
+  }
+  function isForeignEditable() {
+    const active = document.activeElement;
+    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);
+  }
+  function isBrowserCombo(e) {
+    if (!e.metaKey && !e.ctrlKey)
+      return false;
+    const parts = [];
+    if (e.metaKey)
+      parts.push("Meta");
+    if (e.ctrlKey)
+      parts.push("Control");
+    if (e.shiftKey)
+      parts.push("Shift");
+    parts.push(e.key);
+    return BROWSER_BLACKLIST.has(parts.join("+"));
+  }
+  function findActionForKey(key) {
+    const normalized = key.toLowerCase();
+    for (const [action, mappedKey] of Object.entries(mergedKeymap)) {
+      if (!mappedKey)
+        continue;
+      if (mappedKey.toLowerCase() === normalized || mappedKey === key) {
+        return action;
+      }
+    }
+    return null;
+  }
+  function executeAction(action) {
+    switch (action) {
+      case "element-select":
+        actions.elementSelect();
+        break;
+      case "area-select":
+        actions.areaSelect();
+        break;
+      case "pause-animations":
+        actions.pauseAnimations();
+        break;
+      case "copy":
+        actions.copy();
+        break;
+      case "clear":
+        actions.clear();
+        break;
+      case "settings":
+        actions.openSettings();
+        break;
+      case "minimize":
+        actions.deactivate();
+        if (toolbarRef.value)
+          toolbarRef.value.expanded = false;
+        break;
+    }
+  }
+  function consume(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function onKeyDown(e) {
+    if (e.repeat)
+      return;
+    if (isBrowserCombo(e))
+      return;
+    const hasModifier = e.metaKey || e.ctrlKey || e.altKey;
+    const scope = getCurrentScope();
+    if (scope === "closed") {
+      return;
+    }
+    if (scope === "settings") {
+      if (e.key === "Escape") {
+        consume(e);
+        actions.closeSettings();
+      }
+      return;
+    }
+    if (scope === "input") {
+      if (e.key === "Escape") {
+        consume(e);
+        actions.inputCancel();
+      }
+      return;
+    }
+    if (cfg().conflictPolicy === "ignore-editables" && isForeignEditable())
+      return;
+    if (isInteractionLocked())
+      return;
+    if (hasModifier)
+      return;
+    const action = findActionForKey(e.key);
+    if (!action)
+      return;
+    if (cfg().priorityWhenOpen) {
+      consume(e);
+    }
+    executeAction(action);
+  }
+  function onKeyUp(e) {
+    const { doubleTap } = cfg();
+    if (!doubleTap.enabled)
+      return;
+    if (e.key !== doubleTap.key)
+      return;
+    if (e.repeat)
+      return;
+    const now = Date.now();
+    const delta = now - lastActivationKeyUpTime;
+    lastActivationKeyUpTime = now;
+    if (delta < doubleTap.thresholdMs && delta > 50) {
+      lastActivationKeyUpTime = 0;
+      const scope = getCurrentScope();
+      if (scope === "closed") {
+        actions.activate();
+        if (toolbarRef.value)
+          toolbarRef.value.expanded = true;
+      } else if (scope === "open") {
+        actions.deactivate();
+        if (toolbarRef.value)
+          toolbarRef.value.expanded = false;
+      }
+    }
+  }
+  function onBlurOrVisibility() {
+    lastActivationKeyUpTime = 0;
+  }
+  function attach() {
+    if (listenerAttached)
+      return;
+    listenerAttached = true;
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("blur", onBlurOrVisibility);
+    document.addEventListener("visibilitychange", onBlurOrVisibility);
+  }
+  function detach() {
+    if (!listenerAttached)
+      return;
+    listenerAttached = false;
+    document.removeEventListener("keydown", onKeyDown, true);
+    document.removeEventListener("keyup", onKeyUp, true);
+    window.removeEventListener("blur", onBlurOrVisibility);
+    document.removeEventListener("visibilitychange", onBlurOrVisibility);
+  }
+  onMounted(attach);
+  onBeforeUnmount(detach);
+  return { cleanup: detach };
+}

package/dist/composables/useMarkerPositions.d.ts

@@ -0,0 +1,5 @@
+import type { Ref } from 'vue-demi';
+import type { Annotation } from '../types';
+export declare function useMarkerPositions(annotations: Ref<Annotation[]>): {
+    recalculatePositions: () => void;
+};