agentation-vue 0.2.3 → 0.2.4

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

package/dist/composables/useTextSelection.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTextSelection = useTextSelection;
-function useTextSelection(mode) {
-  function checkTextSelection(e) {
-    if (mode.value !== "inspect") return null;
-    if (e.shiftKey || e.altKey) return null;
-    const selection = window.getSelection();
-    const selectedText = selection?.toString().trim() ?? "";
-    if (selectedText.length >= 2 && selection?.rangeCount) {
-      const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
-      if (rect.width > 5) {
-        const anchorElement = range.commonAncestorContainer instanceof Element ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement;
-        if (anchorElement) {
-          return {
-            selectedText,
-            range,
-            rect,
-            anchorElement
-          };
-        }
-      }
-    }
-    return null;
-  }
-  return {
-    checkTextSelection
-  };
-}

package/dist/composables/useToolbarAutoHide.js

@@ -1,270 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useToolbarAutoHide = useToolbarAutoHide;
-var _vueDemi = require("vue-demi");
-const EDGE_OFFSET = 20;
-const DEFAULT_TOOLBAR_SIZE = 42;
-const ACTIVATION_EDGE_DEPTH = 16;
-const ACTIVATION_INLINE_PAD = 30;
-const ACTIVATION_CORNER_SIZE = 32;
-const KEEP_ALIVE_PADDING = 56;
-const HIDE_DELAY_MS = 140;
-const ENTER_LOCK_MS = 220;
-const CLICK_LOCK_MS = 320;
-function useToolbarAutoHide(options) {
-  const {
-    enabled,
-    expanded,
-    isDragging,
-    placement,
-    toolbarEl
-  } = options;
-  const isAutoHideRevealed = (0, _vueDemi.ref)(false);
-  const isAutoHideActive = (0, _vueDemi.computed)(() => enabled.value && !expanded.value && !isDragging.value);
-  let hideTimer = null;
-  let revealLockUntil = 0;
-  let listenersAttached = false;
-  function clearHideTimer() {
-    if (!hideTimer) {
-      return;
-    }
-    clearTimeout(hideTimer);
-    hideTimer = null;
-  }
-  function reveal() {
-    isAutoHideRevealed.value = true;
-    clearHideTimer();
-  }
-  function lockReveal(durationMs) {
-    revealLockUntil = Math.max(revealLockUntil, Date.now() + durationMs);
-    reveal();
-  }
-  function hideNow() {
-    clearHideTimer();
-    revealLockUntil = 0;
-    isAutoHideRevealed.value = false;
-  }
-  function scheduleHide() {
-    clearHideTimer();
-    hideTimer = setTimeout(() => {
-      if (Date.now() < revealLockUntil) {
-        scheduleHide();
-        return;
-      }
-      isAutoHideRevealed.value = false;
-      hideTimer = null;
-    }, HIDE_DELAY_MS);
-  }
-  function getToolbarSize() {
-    const el = toolbarEl.value;
-    return {
-      width: el?.offsetWidth ?? DEFAULT_TOOLBAR_SIZE,
-      height: el?.offsetHeight ?? DEFAULT_TOOLBAR_SIZE
-    };
-  }
-  function getCollapsedRect(anchor, size) {
-    const left = EDGE_OFFSET;
-    const top = EDGE_OFFSET;
-    const right = window.innerWidth - EDGE_OFFSET - size.width;
-    const bottom = window.innerHeight - EDGE_OFFSET - size.height;
-    const centerX = (window.innerWidth - size.width) / 2;
-    switch (anchor) {
-      case "top-left":
-        return {
-          left,
-          top,
-          right: left + size.width,
-          bottom: top + size.height
-        };
-      case "top-center":
-        return {
-          left: centerX,
-          top,
-          right: centerX + size.width,
-          bottom: top + size.height
-        };
-      case "top-right":
-        return {
-          left: right,
-          top,
-          right: right + size.width,
-          bottom: top + size.height
-        };
-      case "bottom-left":
-        return {
-          left,
-          top: bottom,
-          right: left + size.width,
-          bottom: bottom + size.height
-        };
-      case "bottom-center":
-        return {
-          left: centerX,
-          top: bottom,
-          right: centerX + size.width,
-          bottom: bottom + size.height
-        };
-      case "bottom-right":
-      default:
-        return {
-          left: right,
-          top: bottom,
-          right: right + size.width,
-          bottom: bottom + size.height
-        };
-    }
-  }
-  function getActivationRect(anchor, size) {
-    const W = window.innerWidth;
-    const H = window.innerHeight;
-    const centerX = W / 2;
-    switch (anchor) {
-      case "top-left":
-        return {
-          left: 0,
-          top: 0,
-          right: ACTIVATION_CORNER_SIZE,
-          bottom: ACTIVATION_CORNER_SIZE
-        };
-      case "top-center":
-        return {
-          left: centerX - size.width / 2 - ACTIVATION_INLINE_PAD,
-          top: 0,
-          right: centerX + size.width / 2 + ACTIVATION_INLINE_PAD,
-          bottom: ACTIVATION_EDGE_DEPTH
-        };
-      case "top-right":
-        return {
-          left: W - ACTIVATION_CORNER_SIZE,
-          top: 0,
-          right: W,
-          bottom: ACTIVATION_CORNER_SIZE
-        };
-      case "bottom-left":
-        return {
-          left: 0,
-          top: H - ACTIVATION_CORNER_SIZE,
-          right: ACTIVATION_CORNER_SIZE,
-          bottom: H
-        };
-      case "bottom-center":
-        return {
-          left: centerX - size.width / 2 - ACTIVATION_INLINE_PAD,
-          top: H - ACTIVATION_EDGE_DEPTH,
-          right: centerX + size.width / 2 + ACTIVATION_INLINE_PAD,
-          bottom: H
-        };
-      case "bottom-right":
-      default:
-        return {
-          left: W - ACTIVATION_CORNER_SIZE,
-          top: H - ACTIVATION_CORNER_SIZE,
-          right: W,
-          bottom: H
-        };
-    }
-  }
-  function inflateRect(rect, padding) {
-    return {
-      left: rect.left - padding,
-      top: rect.top - padding,
-      right: rect.right + padding,
-      bottom: rect.bottom + padding
-    };
-  }
-  function isInside(point, rect) {
-    return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
-  }
-  function isInActivationZone(point, anchor, size) {
-    return isInside(point, getActivationRect(anchor, size));
-  }
-  function onGlobalPointerMove(e) {
-    if (!isAutoHideActive.value) {
-      return;
-    }
-    const size = getToolbarSize();
-    const point = {
-      x: e.clientX,
-      y: e.clientY
-    };
-    const keepAliveRect = inflateRect(getCollapsedRect(placement.value, size), KEEP_ALIVE_PADDING);
-    if (isInActivationZone(point, placement.value, size) || isAutoHideRevealed.value && isInside(point, keepAliveRect)) {
-      reveal();
-      return;
-    }
-    scheduleHide();
-  }
-  function onWindowBlur() {
-    if (isAutoHideActive.value) {
-      hideNow();
-    }
-  }
-  function addGlobalListeners() {
-    if (listenersAttached || typeof window === "undefined") {
-      return;
-    }
-    listenersAttached = true;
-    window.addEventListener("pointermove", onGlobalPointerMove, true);
-    window.addEventListener("blur", onWindowBlur);
-  }
-  function removeGlobalListeners() {
-    if (!listenersAttached || typeof window === "undefined") {
-      return;
-    }
-    listenersAttached = false;
-    window.removeEventListener("pointermove", onGlobalPointerMove, true);
-    window.removeEventListener("blur", onWindowBlur);
-  }
-  function onToolbarPointerEnter() {
-    if (!isAutoHideActive.value) {
-      return;
-    }
-    lockReveal(ENTER_LOCK_MS);
-  }
-  function onToolbarPointerLeave() {}
-  function onToolbarPointerDown() {
-    if (!isAutoHideActive.value) {
-      return;
-    }
-    lockReveal(CLICK_LOCK_MS);
-  }
-  function onToolbarFocusIn() {
-    if (!isAutoHideActive.value) {
-      return;
-    }
-    lockReveal(CLICK_LOCK_MS);
-  }
-  function onToolbarFocusOut() {
-    if (!isAutoHideActive.value) {
-      return;
-    }
-    scheduleHide();
-  }
-  (0, _vueDemi.watch)(isAutoHideActive, active => {
-    if (!active) {
-      removeGlobalListeners();
-      hideNow();
-      return;
-    }
-    addGlobalListeners();
-    isAutoHideRevealed.value = false;
-  }, {
-    immediate: true
-  });
-  (0, _vueDemi.onBeforeUnmount)(() => {
-    removeGlobalListeners();
-    clearHideTimer();
-  });
-  return {
-    isAutoHideActive,
-    isAutoHideRevealed,
-    onToolbarPointerEnter,
-    onToolbarPointerLeave,
-    onToolbarPointerDown,
-    onToolbarFocusIn,
-    onToolbarFocusOut
-  };
-}