agentation-vue 0.2.3 → 0.2.5

package/dist/AgentationVue.vue

@@ -5,23 +5,23 @@ import AnnotationInput from "./components/AnnotationInput.vue";
 import AnnotationMarker from "./components/AnnotationMarker.vue";
 import ElementHighlight from "./components/ElementHighlight.vue";
 import SettingsPopover from "./components/SettingsPopover.vue";
-import { useAnimationPause } from "./composables/useAnimationPause";
-import { useAnnotations } from "./composables/useAnnotations";
-import { useAreaSelect } from "./composables/useAreaSelect";
-import { useElementDetection } from "./composables/useElementDetection";
-import { useInteractionMode } from "./composables/useInteractionMode";
-import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts";
-import { useMarkerPositions } from "./composables/useMarkerPositions";
-import { useMultiSelect } from "./composables/useMultiSelect";
-import { useOutputFormatter } from "./composables/useOutputFormatter";
-import { useSettings } from "./composables/useSettings";
-import { useTextSelection } from "./composables/useTextSelection";
-import { VA_DATA_ATTR_SELECTOR } from "./constants";
-import { copyToClipboard } from "./utils/clipboard";
-import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector";
-import { createPortalContainer, destroyPortalContainer } from "./utils/portal";
-import { getElementName, getElementPath } from "./utils/selectors";
-import { boundingBoxToStyle } from "./utils/style";
+import { useAnimationPause } from "./composables/useAnimationPause.mjs";
+import { useAnnotations } from "./composables/useAnnotations.mjs";
+import { useAreaSelect } from "./composables/useAreaSelect.mjs";
+import { useElementDetection } from "./composables/useElementDetection.mjs";
+import { useInteractionMode } from "./composables/useInteractionMode.mjs";
+import { DEFAULT_SHORTCUT_CONFIG, useKeyboardShortcuts } from "./composables/useKeyboardShortcuts.mjs";
+import { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
+import { useMultiSelect } from "./composables/useMultiSelect.mjs";
+import { useOutputFormatter } from "./composables/useOutputFormatter.mjs";
+import { useSettings } from "./composables/useSettings.mjs";
+import { useTextSelection } from "./composables/useTextSelection.mjs";
+import { VA_DATA_ATTR_SELECTOR } from "./constants.mjs";
+import { copyToClipboard } from "./utils/clipboard.mjs";
+import { isFixed as checkIsFixed, detectVueComponents, getAccessibilityInfo, getComputedStylesSummary, getNearbyElements, getNearbyText, getRelevantComputedStyles } from "./utils/dom-inspector.mjs";
+import { createPortalContainer, destroyPortalContainer } from "./utils/portal.mjs";
+import { getElementName, getElementPath } from "./utils/selectors.mjs";
+import { boundingBoxToStyle } from "./utils/style.mjs";
 const props = defineProps({
   outputDetail: { type: String, required: false },
   markerColor: { type: String, required: false },
@@ -618,12 +618,8 @@ onBeforeUnmount(() => {
         v-if="mode !== 'idle'"
         ref="overlayEl"
         class="__va-intercept"
-        :class="{
-  '__va-intercept--input-open': mode === 'input-open'
-}"
-        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? {
-  pointerEvents: 'none'
-} : void 0"
+        :class="{ '__va-intercept--input-open': mode === 'input-open' }"
+        :style="mode === 'inspect' && !effectiveBlockPageInteractions ? { pointerEvents: 'none' } : void 0"
         @mousemove="onOverlayMouseMove"
         @mousedown="onOverlayMouseDown"
         @mouseup="onOverlayMouseUp"

package/dist/components/AgentationToolbar.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, toRef, watch } from "vue-demi";
-import { useToolbarAutoHide } from "../composables/useToolbarAutoHide";
-import { useToolbarDragSnap } from "../composables/useToolbarDragSnap";
+import { useToolbarAutoHide } from "../composables/useToolbarAutoHide.mjs";
+import { useToolbarDragSnap } from "../composables/useToolbarDragSnap.mjs";
 import VaIcon from "./VaIcon.vue";
 import VaIconButton from "./VaIconButton.vue";
 const props = defineProps({

package/dist/components/AnnotationInput.vue

@@ -50,7 +50,7 @@ onMounted(() => {
     >
       <summary class="__va-input-styles-summary">
         <ComponentChain v-if="componentChain" :chain="componentChain" variant="light" truncate="leaf" />
-        <span v-else class="__va-input-styles-element">{{ elementName || 'Annotation' }}</span>
+        <span v-else class="__va-input-styles-element">{{ elementName || "Annotation" }}</span>
       </summary>
       <div class="__va-input-styles-block">
         <div
@@ -65,7 +65,7 @@ onMounted(() => {
     <div v-else-if="componentChain" class="__va-input-chain">
       <ComponentChain :chain="componentChain" variant="light" truncate="leaf" />
     </div>
-    <span v-else class="__va-input-label">{{ elementName || 'Annotation' }}</span>
+    <span v-else class="__va-input-label">{{ elementName || "Annotation" }}</span>
     <input
       ref="inputEl"
       v-model="comment"

package/dist/components/AnnotationMarker.vue

@@ -21,11 +21,11 @@ const markerStyle = computed(() => ({
   <div
     class="__va-marker"
     :class="{
-      '__va-marker--fixed': isFixed,
-      '__va-marker--stale': isStale,
-      '__va-marker--pending': isPending,
-      '__va-marker--selection': isSelection,
-    }"
+  '__va-marker--fixed': isFixed,
+  '__va-marker--stale': isStale,
+  '__va-marker--pending': isPending,
+  '__va-marker--selection': isSelection
+}"
     :style="markerStyle"
     data-agentation-vue
     @click.stop="$emit('click')"

package/dist/components/ComponentChain.vue

@@ -45,7 +45,10 @@ const leafExpanded = ref(false);
   <span
     v-else-if="truncate === 'leaf'"
     class="__va-comp-chain"
-    :class="[`__va-comp-chain--${variant}`, shouldTruncate ? '__va-comp-chain--collapsible' : '']"
+    :class="[
+  `__va-comp-chain--${variant}`,
+  shouldTruncate ? '__va-comp-chain--collapsible' : ''
+]"
     @click.stop="shouldTruncate ? leafExpanded = !leafExpanded : void 0"
   >
     <template v-if="!shouldTruncate || leafExpanded">

package/dist/components/ElementHighlight.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from "vue-demi";
-import { boundingBoxToStyle } from "../utils/style";
+import { boundingBoxToStyle } from "../utils/style.mjs";
 import ComponentChain from "./ComponentChain.vue";
 const props = defineProps({
   rect: { type: [Object, null], required: true },

package/dist/components/SettingsPanel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, toRef } from "vue-demi";
-import { vaTooltipDirective } from "../directives/vaTooltip";
+import { vaTooltipDirective } from "../directives/vaTooltip.mjs";
 import VaIcon from "./VaIcon.vue";
 import VaToggle from "./VaToggle.vue";
 const props = defineProps({
@@ -72,12 +72,8 @@ function toggleTheme() {
           :key="color"
           type="button"
           class="__va-color-swatch"
-          :class="{
-  '__va-color-swatch--active': settings.markerColor === color
-}"
-          :style="{
-  background: color
-}"
+          :class="{ '__va-color-swatch--active': settings.markerColor === color }"
+          :style="{ background: color }"
           @click="update('markerColor', color)"
         />
       </div>

package/dist/components/SettingsPopover.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { nextTick, onBeforeUnmount, ref, watch } from "vue-demi";
-import { clamp } from "../utils/math";
+import { clamp } from "../utils/math.mjs";
 import SettingsPanel from "./SettingsPanel.vue";
 const props = defineProps({
   open: { type: Boolean, required: true },

package/dist/components/VaIcon.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { icons } from "../icons";
+import { icons } from "../icons.mjs";
 defineProps({
   name: { type: null, required: true }
 });

package/dist/components/VaIconButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from "vue-demi";
-import { vaTooltipDirective } from "../directives/vaTooltip";
+import { vaTooltipDirective } from "../directives/vaTooltip.mjs";
 const props = defineProps({
   active: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentation-vue",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Visual feedback tool for AI coding agents — Vue 2.7 & 3",
   "author": "Dorian Becker",
   "license": "PolyForm-Shield-1.0.0",
@@ -23,18 +23,12 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
     },
     "./style.css": "./dist/styles/agentation.css"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [

package/dist/composables/useAnimationPause.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAnimationPause = useAnimationPause;
-var _vueDemi = require("vue-demi");
-function useAnimationPause() {
-  const isPaused = (0, _vueDemi.ref)(false);
-  let styleEl = null;
-  function pause() {
-    if (styleEl) return;
-    styleEl = document.createElement("style");
-    styleEl.setAttribute("data-agentation-pause", "");
-    styleEl.textContent = `
-      *, *::before, *::after {
-        animation-play-state: paused !important;
-        transition: none !important;
-      }
-    `;
-    document.head.appendChild(styleEl);
-    document.querySelectorAll("video").forEach(v => v.pause());
-    isPaused.value = true;
-  }
-  function resume() {
-    if (styleEl) {
-      styleEl.remove();
-      styleEl = null;
-    }
-    document.querySelectorAll("video").forEach(v => {
-      v.play().catch(() => {});
-    });
-    isPaused.value = false;
-  }
-  function toggle() {
-    if (isPaused.value) {
-      resume();
-    } else {
-      pause();
-    }
-  }
-  function cleanup() {
-    if (isPaused.value) resume();
-  }
-  return {
-    isPaused,
-    toggle,
-    pause,
-    resume,
-    cleanup
-  };
-}

package/dist/composables/useAnnotations.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAnnotations = useAnnotations;
-var _vueDemi = require("vue-demi");
-const STORAGE_KEY = "agentation-vue-annotations";
-function serializeAnnotations(annotations2) {
-  return JSON.stringify(annotations2.map(({
-    _targetRef,
-    ...rest
-  }) => rest));
-}
-function getCurrentUrl() {
-  return typeof window !== "undefined" ? window.location.href : "";
-}
-function parseStore(raw, currentUrl) {
-  if (!raw) return {};
-  try {
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed)) return {
-      [currentUrl]: parsed
-    };
-    if (!parsed || typeof parsed !== "object") return {};
-    return Object.fromEntries(Object.entries(parsed).filter(([, value]) => Array.isArray(value)));
-  } catch {}
-  return {};
-}
-function loadAnnotations(url) {
-  try {
-    const stored = sessionStorage.getItem(STORAGE_KEY);
-    const store = parseStore(stored, url);
-    const annotations2 = store[url];
-    return Array.isArray(annotations2) ? annotations2 : [];
-  } catch {}
-  return [];
-}
-function getCounterSeed(annotations2) {
-  return annotations2.reduce((max, annotation) => {
-    const parsed = Number.parseInt(annotation.id, 10);
-    return Number.isFinite(parsed) ? Math.max(max, parsed) : max;
-  }, 0);
-}
-const annotations = (0, _vueDemi.ref)([]);
-let scopedUrl = getCurrentUrl();
-let counter = 0;
-function setScopeUrl(url) {
-  scopedUrl = url || getCurrentUrl();
-  annotations.value = loadAnnotations(scopedUrl);
-  counter = getCounterSeed(annotations.value);
-}
-function save() {
-  try {
-    const stored = sessionStorage.getItem(STORAGE_KEY);
-    const store = parseStore(stored, scopedUrl);
-    if (annotations.value.length > 0) store[scopedUrl] = annotations.value;else delete store[scopedUrl];
-    const serialized = JSON.stringify(Object.fromEntries(Object.entries(store).map(([url, scopedAnnotations]) => [url, JSON.parse(serializeAnnotations(scopedAnnotations))])));
-    sessionStorage.setItem(STORAGE_KEY, serialized);
-  } catch {}
-}
-function addAnnotation(annotation) {
-  counter++;
-  const full = {
-    ...annotation,
-    url: annotation.url || scopedUrl,
-    id: String(counter),
-    timestamp: Date.now()
-  };
-  annotations.value.push(full);
-  save();
-  return full;
-}
-function removeAnnotation(id) {
-  const index = annotations.value.findIndex(a => a.id === id);
-  if (index === -1) return void 0;
-  const [removed] = annotations.value.splice(index, 1);
-  save();
-  return removed;
-}
-function updateAnnotation(id, updates) {
-  const ann = annotations.value.find(a => a.id === id);
-  if (!ann) return void 0;
-  Object.assign(ann, updates);
-  save();
-  return ann;
-}
-function clearAnnotations() {
-  const cleared = [...annotations.value];
-  annotations.value.splice(0);
-  counter = 0;
-  save();
-  return cleared;
-}
-setScopeUrl(scopedUrl);
-function useAnnotations(initialUrl = getCurrentUrl()) {
-  setScopeUrl(initialUrl);
-  return {
-    annotations,
-    addAnnotation,
-    removeAnnotation,
-    updateAnnotation,
-    clearAnnotations,
-    setScopeUrl
-  };
-}

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