agentation-vue 0.2.2 → 0.2.4

package/dist/composables/useAreaSelect.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAreaSelect = useAreaSelect;
-var _vueDemi = require("vue-demi");
-function useAreaSelect(mode, transitionFn) {
-  const areaRect = (0, _vueDemi.ref)(null);
-  const isAreaMode = (0, _vueDemi.ref)(false);
-  let startX = 0;
-  let startY = 0;
-  function toggleAreaMode() {
-    isAreaMode.value = !isAreaMode.value;
-  }
-  function onMouseDown(e) {
-    const shouldActivate = mode.value === "inspect" && e.altKey || mode.value === "inspect" && isAreaMode.value;
-    if (!shouldActivate) return false;
-    e.preventDefault();
-    document.documentElement.style.userSelect = "none";
-    startX = e.clientX;
-    startY = e.clientY;
-    areaRect.value = {
-      x: startX,
-      y: startY,
-      width: 0,
-      height: 0
-    };
-    transitionFn("area-selecting");
-    return true;
-  }
-  function onMouseMove(e) {
-    if (mode.value !== "area-selecting") return;
-    const x = Math.min(startX, e.clientX);
-    const y = Math.min(startY, e.clientY);
-    const width = Math.abs(e.clientX - startX);
-    const height = Math.abs(e.clientY - startY);
-    areaRect.value = {
-      x,
-      y,
-      width,
-      height
-    };
-  }
-  function onMouseUp() {
-    if (mode.value !== "area-selecting") return;
-    document.documentElement.style.userSelect = "";
-  }
-  function reset() {
-    areaRect.value = null;
-    document.documentElement.style.userSelect = "";
-  }
-  return {
-    areaRect,
-    isAreaMode,
-    toggleAreaMode,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp,
-    reset
-  };
-}

package/dist/composables/useElementDetection.js

@@ -1,85 +0,0 @@
-"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/useInteractionMode.js

@@ -1,29 +0,0 @@
-"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/useKeyboardShortcuts.js

@@ -1,202 +0,0 @@
-"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/useMarkerPositions.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMarkerPositions = useMarkerPositions;
-var _vueDemi = require("vue-demi");
-function useMarkerPositions(annotations) {
-  let resizeObserver = null;
-  let rafId = null;
-  function recalculatePositions() {
-    if (rafId !== null) return;
-    rafId = requestAnimationFrame(() => {
-      rafId = null;
-      for (const annotation of annotations.value) {
-        const el = annotation._targetRef?.deref();
-        if (!el) continue;
-        const rect = el.getBoundingClientRect();
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        annotation.x = (rect.left + rect.width / 2) / window.innerWidth * 100;
-        annotation.y = annotation.isFixed ? rect.top + rect.height / 2 : rect.top + rect.height / 2 + scrollTop;
-      }
-    });
-  }
-  (0, _vueDemi.onMounted)(() => {
-    window.addEventListener("resize", recalculatePositions, {
-      passive: true
-    });
-    window.addEventListener("scroll", recalculatePositions, {
-      passive: true
-    });
-    resizeObserver = new ResizeObserver(recalculatePositions);
-    const appRoot = document.querySelector("#app") || document.body;
-    resizeObserver.observe(appRoot);
-  });
-  (0, _vueDemi.onBeforeUnmount)(() => {
-    window.removeEventListener("resize", recalculatePositions);
-    window.removeEventListener("scroll", recalculatePositions);
-    resizeObserver?.disconnect();
-    if (rafId !== null) cancelAnimationFrame(rafId);
-  });
-  return {
-    recalculatePositions
-  };
-}

package/dist/composables/useMultiSelect.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMultiSelect = useMultiSelect;
-var _vueDemi = require("vue-demi");
-var _constants = require("../constants");
-const LEAF_TAGS = /* @__PURE__ */new Set(["button", "a", "input", "img"]);
-function useMultiSelect(mode, transitionFn) {
-  const selectionRect = (0, _vueDemi.ref)(null);
-  const selectedElements = (0, _vueDemi.ref)([]);
-  let startX = 0;
-  let startY = 0;
-  let cachedElements = [];
-  let rafId = null;
-  function cacheElements() {
-    cachedElements = [];
-    for (const el of document.querySelectorAll("body *")) {
-      if (el.closest(_constants.VA_DATA_ATTR_SELECTOR)) continue;
-      const rect = el.getBoundingClientRect();
-      if (rect.width === 0 || rect.height === 0) continue;
-      const isLeaf = el.children.length === 0 || LEAF_TAGS.has(el.tagName.toLowerCase());
-      if (isLeaf) {
-        cachedElements.push({
-          el,
-          rect,
-          isLeaf
-        });
-      }
-    }
-  }
-  function onMouseDown(e) {
-    if (mode.value !== "inspect" || !e.shiftKey) return false;
-    e.preventDefault();
-    document.documentElement.style.userSelect = "none";
-    startX = e.clientX;
-    startY = e.clientY;
-    selectionRect.value = {
-      x: startX,
-      y: startY,
-      width: 0,
-      height: 0
-    };
-    transitionFn("multi-selecting");
-    cacheElements();
-    return true;
-  }
-  function onMouseMove(e) {
-    if (mode.value !== "multi-selecting") return;
-    const x = Math.min(startX, e.clientX);
-    const y = Math.min(startY, e.clientY);
-    const width = Math.abs(e.clientX - startX);
-    const height = Math.abs(e.clientY - startY);
-    selectionRect.value = {
-      x,
-      y,
-      width,
-      height
-    };
-    if (rafId !== null) return;
-    rafId = requestAnimationFrame(() => {
-      rafId = null;
-      collectIntersectedElements();
-    });
-  }
-  function onMouseUp() {
-    if (mode.value !== "multi-selecting") return;
-    document.documentElement.style.userSelect = "";
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-    collectIntersectedElements();
-  }
-  function collectIntersectedElements() {
-    if (!selectionRect.value) return;
-    const rect = selectionRect.value;
-    const intersected = [];
-    for (const {
-      el,
-      rect: elRect
-    } of cachedElements) {
-      if (elRect.left < rect.x + rect.width && elRect.right > rect.x && elRect.top < rect.y + rect.height && elRect.bottom > rect.y) {
-        intersected.push(el);
-      }
-    }
-    selectedElements.value = intersected;
-  }
-  function reset() {
-    selectionRect.value = null;
-    selectedElements.value = [];
-    cachedElements = [];
-    document.documentElement.style.userSelect = "";
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-  }
-  return {
-    selectionRect,
-    selectedElements,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp,
-    reset
-  };
-}

package/dist/composables/useOutputFormatter.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.formatAnnotations = formatAnnotations;
-exports.useOutputFormatter = useOutputFormatter;
-function formatAnnotations(annotations, detail, pageUrl) {
-  const shortUrl = pageUrl.replace(/^https?:\/\//, "");
-  const lines = [];
-  lines.push(`## Feedback \u2014 ${shortUrl}`);
-  lines.push("");
-  if (detail === "forensic") {
-    const viewport = typeof window !== "undefined" ? `${window.innerWidth}x${window.innerHeight}` : "unknown";
-    const userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "unknown";
-    const dpr = typeof window !== "undefined" ? String(window.devicePixelRatio) : "unknown";
-    lines.push("### Environment");
-    lines.push(`- **Viewport:** ${viewport}`);
-    lines.push(`- **URL:** ${pageUrl}`);
-    lines.push(`- **User Agent:** ${userAgent}`);
-    lines.push(`- **Timestamp:** ${(/* @__PURE__ */new Date()).toISOString()}`);
-    lines.push(`- **Device Pixel Ratio:** ${dpr}`);
-    lines.push("");
-  }
-  for (let i = 0; i < annotations.length; i++) {
-    const ann = annotations[i];
-    const num = i + 1;
-    if (ann.selectedText) {
-      lines.push(`### ${num}. "${ann.selectedText}" (selected text)`);
-    } else if (ann.isMultiSelect) {
-      lines.push(`### ${num}. Multi-selection (${ann.elements?.length || 0} elements)`);
-    } else if (ann.isAreaSelect) {
-      lines.push(`### ${num}. Area selection`);
-    } else {
-      lines.push(`### ${num}. \`${ann.element}\` \u2014 ${ann.elementPath}`);
-    }
-    lines.push(`- **Comment:** ${ann.comment}`);
-    if (ann.selectedText) {
-      lines.push(`- **In element:** \`${ann.element}\` \u2014 ${ann.elementPath}`);
-    }
-    if (ann.isMultiSelect && ann.elements) {
-      lines.push(`- **Elements:**`);
-      for (const el of ann.elements) {
-        lines.push(`  - \`${el.element}\` \u2014 ${el.elementPath}`);
-      }
-    }
-    if (ann.isAreaSelect && ann.area) {
-      lines.push(`- **Area:** x: ${Math.round(ann.area.x)}, y: ${Math.round(ann.area.y)}, width: ${Math.round(ann.area.width)}, height: ${Math.round(ann.area.height)}`);
-    }
-    if ((ann.isAreaSelect || ann.isMultiSelect) && ann.elementPath) {
-      lines.push(`- **Selection path:** ${ann.elementPath}`);
-    }
-    if ((ann.isAreaSelect || ann.isMultiSelect) && ann.boundingBox) {
-      const b = ann.boundingBox;
-      lines.push(`- **Selection box:** x: ${Math.round(b.x)}, y: ${Math.round(b.y)}, width: ${Math.round(b.width)}, height: ${Math.round(b.height)}`);
-    }
-    if (ann.vueComponents) {
-      lines.push(`- **Components:** ${ann.vueComponents}`);
-    }
-    if (!ann.isMultiSelect && !ann.isAreaSelect && !ann.selectedText) {
-      if (ann.elementPath) {
-        lines.push(`- **Path:** ${ann.elementPath}`);
-      }
-    }
-    if (ann.nearbyElements) {
-      lines.push(`- **Nearby:** ${ann.nearbyElements}`);
-    }
-    if (ann.nearbyText && !ann.selectedText) {
-      lines.push(`- **Context:** ${ann.nearbyText}`);
-    }
-    if (detail === "forensic") {
-      if (ann.fullPath) {
-        lines.push(`- **Full path:** ${ann.fullPath}`);
-      }
-      if (ann.cssClasses) {
-        lines.push(`- **CSS classes:** ${ann.cssClasses}`);
-      }
-      if (ann.boundingBox) {
-        const b = ann.boundingBox;
-        lines.push(`- **Bounding box:** x: ${Math.round(b.x)}, y: ${Math.round(b.y)}, width: ${Math.round(b.width)}, height: ${Math.round(b.height)}`);
-      }
-      if (ann.computedStyles) {
-        lines.push(`- **Computed styles:**`);
-        for (const line of ann.computedStyles.split("\n")) {
-          lines.push(`  - ${line}`);
-        }
-      }
-      if (ann.accessibility) {
-        lines.push(`- **Accessibility:** ${ann.accessibility}`);
-      }
-    }
-    lines.push("");
-  }
-  return lines.join("\n");
-}
-function useOutputFormatter() {
-  return {
-    formatAnnotations
-  };
-}

package/dist/composables/useSettings.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSettings = useSettings;
-var _vueDemi = require("vue-demi");
-const STORAGE_KEY = "agentation-vue-settings";
-const defaults = {
-  outputDetail: "standard",
-  markerColor: "#42B883",
-  blockPageInteractions: false,
-  autoHideToolbar: false,
-  toolbarPlacement: "bottom-right",
-  clearAfterCopy: false,
-  showComponentTree: true,
-  theme: "auto",
-  activationKey: "Shift"
-};
-function loadSettings() {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) return {
-      ...defaults,
-      ...JSON.parse(stored)
-    };
-  } catch {}
-  return {
-    ...defaults
-  };
-}
-const settings = (0, _vueDemi.reactive)(loadSettings());
-(0, _vueDemi.watch)(() => ({
-  ...settings
-}), val => {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(val));
-  } catch {}
-});
-function useSettings() {
-  function resetSettings() {
-    Object.assign(settings, defaults);
-  }
-  return {
-    settings,
-    resetSettings
-  };
-}