agentation-vue 0.2.2 → 0.2.4

package/dist/components/AgentationToolbar.vue

@@ -1,34 +1,19 @@
-<script setup lang="ts">
-import type { InteractionMode, ToolbarAnchor } from '../types'
-import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue-demi'
-import { useToolbarAutoHide } from '../composables/useToolbarAutoHide'
-import { useToolbarDragSnap } from '../composables/useToolbarDragSnap'
-import VaIcon from './VaIcon.vue'
-import VaIconButton from './VaIconButton.vue'
-
-const props = defineProps<{
-  mode: InteractionMode
-  annotationCount: number
-  isPaused: boolean
-  isAreaMode: boolean
-  autoHideEnabled: boolean
-  placement: ToolbarAnchor
-}>()
-
-const emit = defineEmits<{
-  'activate': []
-  'deactivate': []
-  'copy': []
-  'clear': []
-  'toggle-pause': []
-  'toggle-area': [value: boolean]
-  'update:placement': [value: ToolbarAnchor]
-  'open-settings': [anchorEl: HTMLElement | null]
-  'drag-start': []
-  'drag-end': []
-}>()
-
-const expanded = ref(false)
+<script setup>
+import { computed, onBeforeUnmount, ref, toRef, watch } from "vue-demi";
+import { useToolbarAutoHide } from "../composables/useToolbarAutoHide";
+import { useToolbarDragSnap } from "../composables/useToolbarDragSnap";
+import VaIcon from "./VaIcon.vue";
+import VaIconButton from "./VaIconButton.vue";
+const props = defineProps({
+  mode: { type: String, required: true },
+  annotationCount: { type: Number, required: true },
+  isPaused: { type: Boolean, required: true },
+  isAreaMode: { type: Boolean, required: true },
+  autoHideEnabled: { type: Boolean, required: true },
+  placement: { type: String, required: true }
+});
+const emit = defineEmits(["activate", "deactivate", "copy", "clear", "toggle-pause", "toggle-area", "update:placement", "open-settings", "drag-start", "drag-end"]);
+const expanded = ref(false);
 const {
   placement,
   isDragging,
@@ -44,15 +29,14 @@ const {
   onPointerUp,
   onPointerCancel,
   consumeToggleClickSuppression,
-  cleanup,
+  cleanup
 } = useToolbarDragSnap({
   expanded,
   initialPlacement: props.placement,
-  onDragStart: () => emit('drag-start'),
-  onDragEnd: () => emit('drag-end'),
-})
-
-const autoHideEnabled = toRef(props, 'autoHideEnabled')
+  onDragStart: () => emit("drag-start"),
+  onDragEnd: () => emit("drag-end")
+});
+const autoHideEnabled = toRef(props, "autoHideEnabled");
 const {
   isAutoHideActive,
   isAutoHideRevealed,
@@ -60,69 +44,58 @@ const {
   onToolbarPointerLeave,
   onToolbarPointerDown,
   onToolbarFocusIn,
-  onToolbarFocusOut,
+  onToolbarFocusOut
 } = useToolbarAutoHide({
   enabled: autoHideEnabled,
   expanded,
   isDragging,
   placement,
-  toolbarEl,
-})
-
+  toolbarEl
+});
 const toolbarClass = computed(() => [
   `__va-toolbar--place-${placement.value}`,
   {
-    '__va-toolbar--collapsed': !expanded.value,
-    '__va-toolbar--expanded': expanded.value,
-    '__va-toolbar--dragging': isDragging.value,
-    '__va-toolbar--auto-hide': isAutoHideActive.value,
-    '__va-toolbar--auto-hide-revealed': isAutoHideRevealed.value,
-  },
-])
-
+    "__va-toolbar--collapsed": !expanded.value,
+    "__va-toolbar--expanded": expanded.value,
+    "__va-toolbar--dragging": isDragging.value,
+    "__va-toolbar--auto-hide": isAutoHideActive.value,
+    "__va-toolbar--auto-hide-revealed": isAutoHideRevealed.value
+  }
+]);
 function onToggleClick() {
   if (consumeToggleClickSuppression()) {
-    return
+    return;
   }
-  onActivate()
+  onActivate();
 }
-
 function onActivate() {
-  expanded.value = true
-  emit('activate')
+  expanded.value = true;
+  emit("activate");
 }
-
 function onDeactivate() {
-  expanded.value = false
-  emit('deactivate')
+  expanded.value = false;
+  emit("deactivate");
 }
-
 function onClear() {
-  // eslint-disable-next-line no-alert
-  if (confirm('Clear all annotations?'))
-    emit('clear')
+  if (confirm("Clear all annotations?"))
+    emit("clear");
 }
-
-function onOpenSettings(e: MouseEvent) {
-  const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null
-  emit('open-settings', anchorEl)
+function onOpenSettings(e) {
+  const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;
+  emit("open-settings", anchorEl);
 }
-
 onBeforeUnmount(() => {
-  cleanup()
-})
-
+  cleanup();
+});
 watch(
   () => props.placement,
   (value) => {
     if (placement.value !== value)
-      placement.value = value
-  },
-)
-
-watch(placement, value => emit('update:placement', value))
-
-defineExpose({ expanded, placement })
+      placement.value = value;
+  }
+);
+watch(placement, (value) => emit("update:placement", value));
+defineExpose({ expanded, placement });
 </script>
 
 <template>

package/dist/components/AnnotationInput.vue

@@ -1,47 +1,37 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue-demi'
-import ComponentChain from './ComponentChain.vue'
-import VaButton from './VaButton.vue'
-import VaIcon from './VaIcon.vue'
-
-const props = defineProps<{
-  position: { x: number, y: number }
-  elementName?: string
-  componentChain?: string
-  computedStyles?: Record<string, string>
-  initialComment?: string
-  isEditing?: boolean
-}>()
-
-const emit = defineEmits<{
-  add: [comment: string]
-  cancel: []
-  delete: []
-}>()
-
-const comment = ref(props.initialComment || '')
-const inputEl = ref<HTMLInputElement | null>(null)
-const computedStyleEntries = computed(() => Object.entries(props.computedStyles || {}))
-
+<script setup>
+import { computed, onMounted, ref } from "vue-demi";
+import ComponentChain from "./ComponentChain.vue";
+import VaButton from "./VaButton.vue";
+import VaIcon from "./VaIcon.vue";
+const props = defineProps({
+  position: { type: Object, required: true },
+  elementName: { type: String, required: false },
+  componentChain: { type: String, required: false },
+  computedStyles: { type: Object, required: false },
+  initialComment: { type: String, required: false },
+  isEditing: { type: Boolean, required: false }
+});
+const emit = defineEmits(["add", "cancel", "delete"]);
+const comment = ref(props.initialComment || "");
+const inputEl = ref(null);
+const computedStyleEntries = computed(() => Object.entries(props.computedStyles || {}));
 const inputStyle = computed(() => {
-  const x = Math.min(props.position.x, window.innerWidth - 380)
-  const y = Math.min(props.position.y + 20, window.innerHeight - 150)
+  const x = Math.min(props.position.x, window.innerWidth - 380);
+  const y = Math.min(props.position.y + 20, window.innerHeight - 150);
   return {
     left: `${Math.max(10, x)}px`,
-    top: `${Math.max(10, y)}px`,
-  }
-})
-
+    top: `${Math.max(10, y)}px`
+  };
+});
 function onAdd() {
-  const text = comment.value.trim()
+  const text = comment.value.trim();
   if (!text)
-    return
-  emit('add', text)
+    return;
+  emit("add", text);
 }
-
 onMounted(() => {
-  inputEl.value?.focus()
-})
+  inputEl.value?.focus();
+});
 </script>
 
 <template>
@@ -60,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
@@ -75,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"
@@ -97,7 +87,7 @@ onMounted(() => {
           Cancel
         </VaButton>
         <VaButton :disabled="!comment.trim()" @click="onAdd">
-          {{ isEditing ? 'Save' : 'Add' }}
+          {{ isEditing ? "Save" : "Add" }}
         </VaButton>
       </div>
     </div>

package/dist/components/AnnotationMarker.vue

@@ -1,36 +1,31 @@
-<script setup lang="ts">
-import { computed } from 'vue-demi'
-import VaIcon from './VaIcon.vue'
-
-const props = defineProps<{
-  number: number
-  x: number
-  y: number
-  isFixed?: boolean
-  isStale?: boolean
-  isPending?: boolean
-  isSelection?: boolean
-}>()
-
-defineEmits<{
-  click: []
-}>()
-
+<script setup>
+import { computed } from "vue-demi";
+import VaIcon from "./VaIcon.vue";
+const props = defineProps({
+  number: { type: Number, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  isFixed: { type: Boolean, required: false },
+  isStale: { type: Boolean, required: false },
+  isPending: { type: Boolean, required: false },
+  isSelection: { type: Boolean, required: false }
+});
+defineEmits(["click"]);
 const markerStyle = computed(() => ({
   left: `${props.x}%`,
-  top: `${props.y}px`,
-}))
+  top: `${props.y}px`
+}));
 </script>
 
 <template>
   <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

@@ -1,30 +1,20 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue-demi'
-
-const props = withDefaults(defineProps<{
-  chain: string
-  variant?: 'dark' | 'light'
-  truncate?: 'none' | 'auto' | 'leaf'
-}>(), {
-  variant: 'light',
-  truncate: 'none',
-})
-
-const TRUNCATE_THRESHOLD = 4
-
-const components = computed(() => props.chain.split(' > '))
-const shouldTruncate = computed(() => components.value.length >= TRUNCATE_THRESHOLD)
-
-// For 'auto' mode: first + ellipsis + last 2
+<script setup>
+import { computed, ref } from "vue-demi";
+const props = defineProps({
+  chain: { type: String, required: true },
+  variant: { type: String, required: false, default: "light" },
+  truncate: { type: String, required: false, default: "none" }
+});
+const TRUNCATE_THRESHOLD = 4;
+const components = computed(() => props.chain.split(" > "));
+const shouldTruncate = computed(() => components.value.length >= TRUNCATE_THRESHOLD);
 const autoTruncated = computed(() => {
   if (!shouldTruncate.value)
-    return components.value
-  const all = components.value
-  return [all[0], null, all[all.length - 2], all[all.length - 1]] as (string | null)[]
-})
-
-// For 'leaf' mode
-const leafExpanded = ref(false)
+    return components.value;
+  const all = components.value;
+  return [all[0], null, all[all.length - 2], all[all.length - 1]];
+});
+const leafExpanded = ref(false);
 </script>
 
 <template>
@@ -56,10 +46,10 @@ const leafExpanded = ref(false)
     v-else-if="truncate === 'leaf'"
     class="__va-comp-chain"
     :class="[
-      `__va-comp-chain--${variant}`,
-      shouldTruncate ? '__va-comp-chain--collapsible' : '',
-    ]"
-    @click.stop="shouldTruncate ? (leafExpanded = !leafExpanded) : undefined"
+  `__va-comp-chain--${variant}`,
+  shouldTruncate ? '__va-comp-chain--collapsible' : ''
+]"
+    @click.stop="shouldTruncate ? leafExpanded = !leafExpanded : void 0"
   >
     <template v-if="!shouldTruncate || leafExpanded">
       <span v-for="comp in components" :key="comp" class="__va-comp">

package/dist/components/ElementHighlight.vue

@@ -1,21 +1,18 @@
-<script setup lang="ts">
-import type { BoundingBox } from '../types'
-import { computed } from 'vue-demi'
-import { boundingBoxToStyle } from '../utils/style'
-import ComponentChain from './ComponentChain.vue'
-
-const props = defineProps<{
-  rect: BoundingBox | null
-  elementName: string
-  visible: boolean
-  componentChain?: string
-}>()
-
+<script setup>
+import { computed } from "vue-demi";
+import { boundingBoxToStyle } from "../utils/style";
+import ComponentChain from "./ComponentChain.vue";
+const props = defineProps({
+  rect: { type: [Object, null], required: true },
+  elementName: { type: String, required: true },
+  visible: { type: Boolean, required: true },
+  componentChain: { type: String, required: false }
+});
 const highlightStyle = computed(() => {
   if (!props.rect)
-    return {}
-  return boundingBoxToStyle(props.rect)
-})
+    return {};
+  return boundingBoxToStyle(props.rect);
+});
 </script>
 
 <template>

package/dist/components/SettingsPanel.vue

@@ -1,47 +1,35 @@
-<script setup lang="ts">
-import type { Settings } from '../types'
-import { computed, toRef } from 'vue-demi'
-import { vaTooltipDirective } from '../directives/vaTooltip'
-import VaIcon from './VaIcon.vue'
-import VaToggle from './VaToggle.vue'
-
-const props = defineProps<{
-  settings: Settings
-}>()
-const emit = defineEmits<{
-  update: [settings: Partial<Settings>]
-}>()
-const settings = toRef(props, 'settings')
-
-const presetColors = ['#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#EAB308', '#FF5C00', '#EF4444']
-const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
-
-function update(key: keyof Settings, value: any) {
-  emit('update', { [key]: value })
+<script setup>
+import { computed, toRef } from "vue-demi";
+import { vaTooltipDirective } from "../directives/vaTooltip";
+import VaIcon from "./VaIcon.vue";
+import VaToggle from "./VaToggle.vue";
+const props = defineProps({
+  settings: { type: Object, required: true }
+});
+const emit = defineEmits(["update"]);
+const settings = toRef(props, "settings");
+const presetColors = ["#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#EAB308", "#FF5C00", "#EF4444"];
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+function update(key, value) {
+  emit("update", { [key]: value });
 }
-
-function onSelectChange(key: keyof Settings, event: Event) {
-  const target = event.currentTarget as HTMLSelectElement | null
+function onSelectChange(key, event) {
+  const target = event.currentTarget;
   if (!target)
-    return
-  update(key, target.value)
+    return;
+  update(key, target.value);
 }
-
 const isDarkTheme = computed(() => {
-  if (settings.value.theme === 'dark')
-    return true
-  if (settings.value.theme === 'light')
-    return false
-  return typeof window !== 'undefined'
-    && typeof window.matchMedia === 'function'
-    && window.matchMedia('(prefers-color-scheme: dark)').matches
-})
-
-const themeIcon = computed(() => (isDarkTheme.value ? 'sun' : 'moon'))
-const vVaTooltip = vaTooltipDirective
-
+  if (settings.value.theme === "dark")
+    return true;
+  if (settings.value.theme === "light")
+    return false;
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+});
+const themeIcon = computed(() => isDarkTheme.value ? "sun" : "moon");
+const vVaTooltip = vaTooltipDirective;
 function toggleTheme() {
-  update('theme', isDarkTheme.value ? 'light' : 'dark')
+  update("theme", isDarkTheme.value ? "light" : "dark");
 }
 </script>
 
@@ -129,10 +117,10 @@ function toggleTheme() {
           Off
         </option>
         <option value="Meta">
-          {{ isMac ? '&#8984; Cmd' : 'Ctrl' }}
+          {{ isMac ? "\u2318 Cmd" : "Ctrl" }}
         </option>
         <option value="Alt">
-          {{ isMac ? '&#8997; Option' : 'Alt' }}
+          {{ isMac ? "\u2325 Option" : "Alt" }}
         </option>
         <option value="Shift">
           Shift