agentation-vue 0.2.3 → 0.2.4

package/dist/AgentationVue.vue

@@ -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/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/SettingsPanel.vue

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentation-vue",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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
-  };
-}

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