agentation-vue 0.2.0

package/dist/components/VaIconButton.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    active?: boolean;
+    disabled?: boolean;
+    title?: string;
+    shortcut?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VaToggle.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    ariaLabel?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model-value": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/VaToggle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean
+  ariaLabel?: string
+}>()
+const emit = defineEmits<{ 'update:model-value': [value: boolean] }>()
+
+function toggle() {
+  emit('update:model-value', !props.modelValue)
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="__va-toggle"
+    :class="{ '__va-toggle--active': modelValue }"
+    role="switch"
+    :aria-checked="modelValue"
+    :aria-label="ariaLabel"
+    @click="toggle"
+  />
+</template>

package/dist/components/VaToggle.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    ariaLabel?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model-value": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/composables/useAnimationPause.d.ts

@@ -0,0 +1,7 @@
+export declare function useAnimationPause(): {
+    isPaused: import("vue-demi").Ref<boolean, boolean>;
+    toggle: () => void;
+    pause: () => void;
+    resume: () => void;
+    cleanup: () => void;
+};

package/dist/composables/useAnimationPause.js

@@ -0,0 +1,52 @@
+"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/useAnimationPause.mjs

@@ -0,0 +1,43 @@
+import { ref } from "vue-demi";
+export function useAnimationPause() {
+  const isPaused = 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.d.ts

@@ -0,0 +1,105 @@
+import type { Annotation } from '../types';
+declare function setScopeUrl(url: string): void;
+declare function addAnnotation(annotation: Omit<Annotation, 'id' | 'timestamp'>): Annotation;
+declare function removeAnnotation(id: string): Annotation | undefined;
+declare function updateAnnotation(id: string, updates: Partial<Annotation>): Annotation | undefined;
+declare function clearAnnotations(): Annotation[];
+export declare function useAnnotations(initialUrl?: string): {
+    annotations: import("vue-demi").Ref<{
+        id: string;
+        x: number;
+        y: number;
+        comment: string;
+        element: string;
+        elementPath: string;
+        timestamp: number;
+        _targetRef?: WeakRef<Element>;
+        url?: string | undefined;
+        selectedText?: string | undefined;
+        boundingBox?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+        nearbyText?: string | undefined;
+        cssClasses?: string | undefined;
+        nearbyElements?: string | undefined;
+        computedStyles?: string | undefined;
+        fullPath?: string | undefined;
+        accessibility?: string | undefined;
+        isFixed?: boolean | undefined;
+        vueComponents?: string | undefined;
+        isMultiSelect?: boolean | undefined;
+        elements?: {
+            element: string;
+            elementPath: string;
+            cssClasses?: string | undefined;
+            boundingBox?: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | undefined;
+            vueComponents?: string | undefined;
+        }[] | undefined;
+        isAreaSelect?: boolean | undefined;
+        area?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+    }[], Annotation[] | {
+        id: string;
+        x: number;
+        y: number;
+        comment: string;
+        element: string;
+        elementPath: string;
+        timestamp: number;
+        _targetRef?: WeakRef<Element>;
+        url?: string | undefined;
+        selectedText?: string | undefined;
+        boundingBox?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+        nearbyText?: string | undefined;
+        cssClasses?: string | undefined;
+        nearbyElements?: string | undefined;
+        computedStyles?: string | undefined;
+        fullPath?: string | undefined;
+        accessibility?: string | undefined;
+        isFixed?: boolean | undefined;
+        vueComponents?: string | undefined;
+        isMultiSelect?: boolean | undefined;
+        elements?: {
+            element: string;
+            elementPath: string;
+            cssClasses?: string | undefined;
+            boundingBox?: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | undefined;
+            vueComponents?: string | undefined;
+        }[] | undefined;
+        isAreaSelect?: boolean | undefined;
+        area?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+    }[]>;
+    addAnnotation: typeof addAnnotation;
+    removeAnnotation: typeof removeAnnotation;
+    updateAnnotation: typeof updateAnnotation;
+    clearAnnotations: typeof clearAnnotations;
+    setScopeUrl: typeof setScopeUrl;
+};
+export {};

package/dist/composables/useAnnotations.js

@@ -0,0 +1,106 @@
+"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/useAnnotations.mjs

@@ -0,0 +1,108 @@
+import { ref } from "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 = 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);
+export function useAnnotations(initialUrl = getCurrentUrl()) {
+  setScopeUrl(initialUrl);
+  return { annotations, addAnnotation, removeAnnotation, updateAnnotation, clearAnnotations, setScopeUrl };
+}

package/dist/composables/useAreaSelect.d.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue-demi';
+import type { BoundingBox, InteractionMode } from '../types';
+export declare function useAreaSelect(mode: Ref<InteractionMode>, transitionFn: (to: InteractionMode) => boolean): {
+    areaRect: Ref<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null, BoundingBox | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    isAreaMode: Ref<boolean, boolean>;
+    toggleAreaMode: () => void;
+    onMouseDown: (e: MouseEvent) => boolean;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: () => void;
+    reset: () => void;
+};

package/dist/composables/useAreaSelect.js

@@ -0,0 +1,62 @@
+"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/useAreaSelect.mjs

@@ -0,0 +1,41 @@
+import { ref } from "vue-demi";
+export function useAreaSelect(mode, transitionFn) {
+  const areaRect = ref(null);
+  const isAreaMode = 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.d.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue-demi';
+import type { BoundingBox } from '../types';
+export declare function useElementDetection(overlayRef: Ref<HTMLElement | null>, showComponentTree?: () => boolean): {
+    hoveredElement: Ref<Element | null, Element | null>;
+    hoveredRect: Ref<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null, BoundingBox | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    hoveredName: Ref<string, string>;
+    hoveredComponentChain: Ref<string | undefined, string | undefined>;
+    onMouseMove: (e: MouseEvent) => void;
+    clearHighlight: () => void;
+    getElementUnderOverlay: (e: MouseEvent) => Element | null;
+    cleanup: () => void;
+};