agentation-vue 0.2.10 → 0.2.13

package/README.md

@@ -0,0 +1,94 @@
+# agentation-vue
+
+[![npm version](https://img.shields.io/npm/v/agentation-vue)](https://www.npmjs.com/package/agentation-vue)
+[![npm downloads](https://img.shields.io/npm/dm/agentation-vue)](https://www.npmjs.com/package/agentation-vue)
+
+Visual feedback tool for AI coding agents. Drop a single component into your Vue app and let your AI agent see and annotate UI elements.
+
+Compatible with **Vue 3.3+** and **Vue 2.7**.
+
+> **Note:** This is an unofficial, community-maintained Vue adaptation of [Agentation](https://github.com/benjitaylor/agentation). It is not affiliated with or endorsed by the original project.
+
+## Installation
+
+```bash
+npm install agentation-vue
+```
+
+## Setup — Vue 3
+
+```ts
+import { AgentationVuePlugin } from 'agentation-vue'
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'agentation-vue/style.css'
+
+createApp(App)
+  .use(AgentationVuePlugin)
+  .mount('#app')
+```
+
+Then place the component once in your root `App.vue`:
+
+```vue
+<template>
+  <router-view />
+  <agentation-vue />
+</template>
+```
+
+## Setup — Vue 2.7
+
+```ts
+import { AgentationVuePlugin } from 'agentation-vue'
+// main.ts
+import Vue from 'vue'
+import App from './App.vue'
+import 'agentation-vue/style.css'
+
+Vue.use(AgentationVuePlugin)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+Then place the component once in your root `App.vue`:
+
+```vue
+<template>
+  <div>
+    <router-view />
+    <agentation-vue />
+  </div>
+</template>
+```
+
+> Vue 2 templates require a single root element — wrap your content in a `<div>`.
+
+## Chrome extension
+
+This repo also contains a Chrome extension for injecting Agentation without modifying the target app code.
+
+## Features
+
+- **Click-to-annotate** — click any element to pin a numbered marker and leave a comment
+- **Multi-select** — `Shift+drag` to rubber-band select multiple elements at once
+- **Area select** — `Alt+drag` to annotate a screen region
+- **Text selection** — highlight text to annotate it
+- **Vue component tree** — automatically detects and reports the Vue component hierarchy for each annotated element
+- **Markdown output** — copies all annotations as structured Markdown, ready to paste into an AI chat
+- **Forensic mode** — captures bounding boxes, computed styles, CSS classes, and accessibility attributes
+- **Themes** — light, dark, or auto (follows system preference)
+- **Auto-hide launcher** — optionally tucks the collapsed floating button near screen edges and reveals it on approach
+- **Session persistence** — annotations survive refreshes and are scoped per page URL via `sessionStorage`
+- **Custom tooltip directive** — `v-va-tooltip` with optional keyboard shortcut badge
+
+## Acknowledgments
+
+This project is inspired by and based on [Agentation](https://github.com/benjitaylor/agentation) by [Ben Taylor](https://github.com/benjitaylor). Thank you for the original concept and implementation.
+
+## License
+
+[PolyForm Shield 1.0.0](./LICENSE) — Copyright (c) 2026 Dorian Becker

package/dist/AgentationVue.vue

@@ -25,8 +25,10 @@ import {
 import { useMarkerPositions } from "./composables/useMarkerPositions.mjs";
 import { useMultiSelect } from "./composables/useMultiSelect.mjs";
 import { useOutputFormatter } from "./composables/useOutputFormatter.mjs";
+import { usePeekMode } from "./composables/usePeekMode.mjs";
 import { useSettings } from "./composables/useSettings.mjs";
 import { useTextSelection } from "./composables/useTextSelection.mjs";
+import { PEEK_HOLD_DURATION_MS } from "./constants.mjs";
 import { isInsideAgentationTree } from "./utils/agentation-tree.mjs";
 import { copyToClipboard } from "./utils/clipboard.mjs";
 import {
@@ -103,6 +105,25 @@ const areaSelect = useAreaSelect(mode, transition);
 const animPause = useAnimationPause();
 const { recalculatePositions: _recalculatePositions } = useMarkerPositions(annotations);
 const { formatAnnotations } = useOutputFormatter();
+const peekActive = ref(false);
+const peekMode = usePeekMode({
+  peekKey: () => settings.peekKey,
+  enabled: () => mode.value === "idle" && (!toolbarRef.value || !toolbarRef.value.expanded),
+  isInputOpen: () => mode.value === "input-open",
+  onActivate() {
+    peekActive.value = true;
+    transition("inspect");
+  },
+  onDeactivate() {
+    peekActive.value = false;
+    if (mode.value === "input-open")
+      return;
+    if (mode.value !== "idle") {
+      transition("idle");
+      clearHighlight();
+    }
+  }
+});
 const pendingPosition = ref(null);
 const pendingElementName = ref("");
 const pendingTarget = ref(null);
@@ -240,6 +261,17 @@ watch(
   },
   { immediate: true }
 );
+let crosshairStyle = null;
+watch(mode, (current, previous) => {
+  if (current !== "idle" && previous === "idle") {
+    crosshairStyle = document.createElement("style");
+    crosshairStyle.textContent = "* { cursor: crosshair !important; }";
+    document.head.appendChild(crosshairStyle);
+  } else if (current === "idle" && previous !== "idle") {
+    crosshairStyle?.remove();
+    crosshairStyle = null;
+  }
+});
 function onActivate() {
   transition("inspect");
 }
@@ -262,8 +294,6 @@ function onOverlayMouseMove(e) {
 function onOverlayMouseDown(e) {
   if (isInteractionLocked())
     return;
-  if (multiSelect.onMouseDown(e))
-    return;
   areaSelect.onMouseDown(e);
 }
 function onOverlayMouseUp(e) {
@@ -579,13 +609,24 @@ function onInputAdd(comment) {
     emit("annotation-add", ann);
   }
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("inspect");
+    peekMode.scheduleExit();
+  } else {
+    transition("inspect");
+  }
 }
 function onInputCancel() {
   resetPendingState();
-  multiSelect.reset();
   areaSelect.reset();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("idle");
+    peekMode.deactivate();
+  } else {
+    transition("inspect");
+  }
 }
 async function onCopy() {
   const markdown = formatAnnotations(
@@ -663,7 +704,13 @@ function onInputDelete() {
   if (removed)
     emit("annotation-delete", removed);
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("idle");
+    peekMode.deactivate();
+  } else {
+    transition("inspect");
+  }
 }
 function onInputSave(comment) {
   if (!editingAnnotation.value)
@@ -672,7 +719,13 @@ function onInputSave(comment) {
   if (updated)
     emit("annotation-update", updated);
   resetPendingState();
-  transition("inspect");
+  clearHighlight();
+  if (peekActive.value) {
+    transition("inspect");
+    peekMode.scheduleExit();
+  } else {
+    transition("inspect");
+  }
 }
 function onToggleArea(value) {
   areaSelect.isAreaMode.value = value;
@@ -788,10 +841,11 @@ onBeforeUnmount(() => {
         :style="boundingBoxToStyle(areaSelect.areaRect.value)"
       />
 
-      <!-- Annotation markers -->
+      <!-- Annotation markers (hidden when toolbar is collapsed) -->
       <AnnotationMarker
         v-for="(ann, i) in annotations"
         :key="ann.id"
+        :hidden="mode === 'idle'"
         :number="i + 1"
         :x="ann.x"
         :y="ann.y"
@@ -861,6 +915,8 @@ onBeforeUnmount(() => {
         :is-area-mode="areaSelect.isAreaMode.value"
         :auto-hide-enabled="settings.autoHideToolbar"
         :placement="settings.toolbarPlacement"
+        :is-peek-charging="peekMode.isCharging.value"
+        :peek-duration-ms="PEEK_HOLD_DURATION_MS"
         @activate="onActivate"
         @deactivate="onDeactivate"
         @copy="onCopy"

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

@@ -6,6 +6,8 @@ type __VLS_Props = {
     isAreaMode: boolean;
     autoHideEnabled: boolean;
     placement: ToolbarAnchor;
+    isPeekCharging: boolean;
+    peekDurationMs: number;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
     expanded: import("vue-demi").Ref<boolean, boolean>;

package/dist/components/AgentationToolbar.vue

@@ -10,7 +10,9 @@ const props = defineProps({
   isPaused: { type: Boolean, required: true },
   isAreaMode: { type: Boolean, required: true },
   autoHideEnabled: { type: Boolean, required: true },
-  placement: { type: String, required: true }
+  placement: { type: String, required: true },
+  isPeekCharging: { type: Boolean, required: true },
+  peekDurationMs: { type: Number, 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);
@@ -133,6 +135,14 @@ defineExpose({ expanded, placement });
         >
           <VaIcon name="cursor" />
           <span v-if="annotationCount > 0" class="__va-toolbar-badge">{{ annotationCount }}</span>
+          <svg
+            v-if="isPeekCharging"
+            class="__va-peek-ring"
+            viewBox="0 0 46 46"
+            aria-hidden="true"
+          >
+            <circle cx="23" cy="23" r="21" :style="{ animationDuration: `${peekDurationMs}ms` }" />
+          </svg>
         </button>
       </div>
 

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

@@ -6,6 +6,8 @@ type __VLS_Props = {
     isAreaMode: boolean;
     autoHideEnabled: boolean;
     placement: ToolbarAnchor;
+    isPeekCharging: boolean;
+    peekDurationMs: number;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
     expanded: import("vue-demi").Ref<boolean, boolean>;

package/dist/components/AnnotationInput.vue

@@ -64,10 +64,7 @@ function onKeyDown(e) {
   }
 }
 function onAdd() {
-  const text = getComment().trim();
-  if (!text)
-    return;
-  emit("add", text);
+  emit("add", getComment().trim());
 }
 function onPaste(e) {
   e.preventDefault();
@@ -161,8 +158,8 @@ onMounted(() => {
         <VaButton variant="secondary" @click="$emit('cancel')">
           Cancel
         </VaButton>
-        <VaButton :disabled="!commentText.trim()" @click="onAdd">
-          {{ isEditing ? "Save" : "Add" }}
+        <VaButton @click="onAdd">
+          {{ isEditing ? "Save" : commentText.trim() ? "Add" : "Pin" }}
         </VaButton>
       </div>
     </div>

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     isStale?: boolean;
     isPending?: boolean;
     isSelection?: boolean;
+    hidden?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     click: () => any;

package/dist/components/AnnotationMarker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue-demi";
+import { computed, onMounted, ref } from "vue-demi";
 import VaIcon from "./VaIcon.vue";
 const props = defineProps({
   number: { type: Number, required: true },
@@ -8,9 +8,16 @@ const props = defineProps({
   isFixed: { type: Boolean, required: false },
   isStale: { type: Boolean, required: false },
   isPending: { type: Boolean, required: false },
-  isSelection: { type: Boolean, required: false }
+  isSelection: { type: Boolean, required: false },
+  hidden: { type: Boolean, required: false }
 });
 defineEmits(["click"]);
+const entering = ref(true);
+onMounted(() => {
+  requestAnimationFrame(() => {
+    entering.value = false;
+  });
+});
 const markerStyle = computed(() => ({
   left: `${props.x}%`,
   top: `${props.y}px`
@@ -24,7 +31,9 @@ const markerStyle = computed(() => ({
   '__va-marker--fixed': isFixed,
   '__va-marker--stale': isStale,
   '__va-marker--pending': isPending,
-  '__va-marker--selection': isSelection
+  '__va-marker--selection': isSelection,
+  '__va-marker--hidden': hidden,
+  '__va-marker--entering': entering
 }"
     :style="markerStyle"
     data-agentation-vue

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     isStale?: boolean;
     isPending?: boolean;
     isSelection?: boolean;
+    hidden?: boolean;
 };
 declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     click: () => any;

package/dist/components/SettingsPanel.vue

@@ -84,10 +84,10 @@ function toggleTheme() {
     <div class="__va-settings-divider" />
 
     <div class="__va-settings-row">
-      <span class="__va-settings-label">Clear on copy/send</span>
+      <span class="__va-settings-label">Clear After Copy</span>
       <VaToggle
         :model-value="settings.clearAfterCopy"
-        aria-label="Clear on copy/send"
+        aria-label="Clear After Copy"
         @update:model-value="update('clearAfterCopy', $event)"
       />
     </div>
@@ -125,7 +125,28 @@ function toggleTheme() {
           {{ isMac ? "\u2325 Option" : "Alt" }}
         </option>
         <option value="Shift">
-          Shift
+          ⇧ Shift
+        </option>
+      </select>
+    </div>
+
+    <div class="__va-settings-row">
+      <span class="__va-settings-label">Peek inspect (hold key)</span>
+      <select :value="settings.peekKey" @change="onSelectChange('peekKey', $event)">
+        <option value="none">
+          Off
+        </option>
+        <option value="Meta">
+          {{ isMac ? "\u2318 Cmd" : "Ctrl" }}
+        </option>
+        <option value="Alt">
+          {{ isMac ? "\u2325 Option" : "Alt" }}
+        </option>
+        <option value="Shift">
+          ⇧ Shift
+        </option>
+        <option value="Control">
+          {{ isMac ? "\u2303 Control" : "Ctrl" }}
         </option>
       </select>
     </div>

package/dist/composables/useOutputFormatter.mjs

@@ -27,7 +27,8 @@ export function formatAnnotations(annotations, detail, pageUrl) {
     } else {
       lines.push(`### ${num}. \`${ann.element}\` \u2014 ${ann.elementPath}`);
     }
-    lines.push(`- **Comment:** ${ann.comment}`);
+    if (ann.comment)
+      lines.push(`- **Comment:** ${ann.comment}`);
     if (ann.selectedText) {
       lines.push(`- **In element:** \`${ann.element}\` \u2014 ${ann.elementPath}`);
     }

package/dist/composables/usePeekMode.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue-demi';
+export interface UsePeekModeOptions {
+    peekKey: () => string;
+    enabled: () => boolean;
+    isInputOpen: () => boolean;
+    onActivate: () => void;
+    onDeactivate: () => void;
+}
+export declare function usePeekMode(options: UsePeekModeOptions): {
+    isCharging: Ref<boolean>;
+    isActive: Ref<boolean>;
+    deactivate: () => void;
+    scheduleExit: () => void;
+};

package/dist/composables/usePeekMode.mjs

@@ -0,0 +1,119 @@
+import { onBeforeUnmount, onMounted, ref } from "vue-demi";
+import { PEEK_HOLD_DURATION_MS } from "../constants.mjs";
+export function usePeekMode(options) {
+  const isCharging = ref(false);
+  const isActive = ref(false);
+  let holdTimer = null;
+  let exitTimer = null;
+  let listenerAttached = false;
+  function clearHoldTimer() {
+    if (holdTimer) {
+      clearTimeout(holdTimer);
+      holdTimer = null;
+    }
+  }
+  function clearExitTimer() {
+    if (exitTimer) {
+      clearTimeout(exitTimer);
+      exitTimer = null;
+    }
+  }
+  function clearTimers() {
+    clearHoldTimer();
+    clearExitTimer();
+  }
+  function resetAll() {
+    clearTimers();
+    const wasActive = isActive.value;
+    isCharging.value = false;
+    isActive.value = false;
+    if (wasActive)
+      options.onDeactivate();
+  }
+  function deactivate() {
+    clearExitTimer();
+    isActive.value = false;
+    options.onDeactivate();
+  }
+  function scheduleExit() {
+    clearExitTimer();
+    exitTimer = setTimeout(() => {
+      exitTimer = null;
+      deactivate();
+    }, PEEK_HOLD_DURATION_MS);
+  }
+  function matchesKey(e) {
+    const key = options.peekKey();
+    if (key === "none")
+      return false;
+    return e.key === key;
+  }
+  function onKeyDown(e) {
+    if (e.repeat)
+      return;
+    if (isCharging.value && !matchesKey(e)) {
+      clearHoldTimer();
+      isCharging.value = false;
+      return;
+    }
+    if (!matchesKey(e))
+      return;
+    if (isActive.value && exitTimer) {
+      clearExitTimer();
+      return;
+    }
+    if (!options.enabled())
+      return;
+    if (isCharging.value || isActive.value)
+      return;
+    isCharging.value = true;
+    holdTimer = setTimeout(() => {
+      holdTimer = null;
+      isCharging.value = false;
+      isActive.value = true;
+      options.onActivate();
+    }, PEEK_HOLD_DURATION_MS);
+  }
+  function onKeyUp(e) {
+    if (!matchesKey(e))
+      return;
+    clearHoldTimer();
+    isCharging.value = false;
+    if (isActive.value) {
+      if (options.isInputOpen()) {
+        return;
+      }
+      deactivate();
+    }
+  }
+  function onBlurOrVisibility() {
+    resetAll();
+  }
+  function attach() {
+    if (listenerAttached)
+      return;
+    listenerAttached = true;
+    window.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("blur", onBlurOrVisibility);
+    document.addEventListener("visibilitychange", onBlurOrVisibility);
+  }
+  function detach() {
+    if (!listenerAttached)
+      return;
+    listenerAttached = false;
+    window.removeEventListener("keydown", onKeyDown, true);
+    window.removeEventListener("keyup", onKeyUp, true);
+    window.removeEventListener("blur", onBlurOrVisibility);
+    document.removeEventListener("visibilitychange", onBlurOrVisibility);
+    resetAll();
+  }
+  onMounted(attach);
+  onBeforeUnmount(detach);
+  return {
+    isCharging,
+    isActive,
+    deactivate,
+    scheduleExit
+  };
+}

package/dist/composables/useSettings.d.ts

@@ -12,6 +12,7 @@ export declare function useSettings(): {
         showComponentTree: boolean;
         theme: "light" | "dark" | "auto";
         activationKey: "none" | "Meta" | "Alt" | "Shift";
+        peekKey: "none" | "Meta" | "Alt" | "Shift" | "Control";
     };
     resetSettings: () => void;
 };

package/dist/composables/useSettings.mjs

@@ -18,7 +18,8 @@ const defaults = {
   clearAfterCopy: false,
   showComponentTree: true,
   theme: "auto",
-  activationKey: "Shift"
+  activationKey: "Shift",
+  peekKey: "none"
 };
 function loadSettings() {
   try {

package/dist/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const VA_DATA_ATTR = "data-agentation-vue";
 export declare const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";
-export declare const VA_VERSION = "0.2.10";
+export declare const VA_VERSION: any;
+export declare const PEEK_HOLD_DURATION_MS = 1000;

package/dist/constants.mjs

@@ -1,3 +1,5 @@
+import { version } from "../package.json";
 export const VA_DATA_ATTR = "data-agentation-vue";
 export const VA_DATA_ATTR_SELECTOR = "[data-agentation-vue]";
-export const VA_VERSION = "0.2.10";
+export const VA_VERSION = version;
+export const PEEK_HOLD_DURATION_MS = 1e3;

package/dist/directives/vaTooltip.mjs

@@ -43,6 +43,12 @@ function isHostDisabled(el) {
     return Boolean(el.disabled);
   return false;
 }
+function getTooltipContainer(el) {
+  const root = el.getRootNode();
+  if (root instanceof ShadowRoot)
+    return root;
+  return document.body;
+}
 function createTooltipElement(value) {
   const tooltipEl = document.createElement("div");
   tooltipEl.className = "__va-tooltip";
@@ -125,8 +131,9 @@ function showTooltipNow(el) {
     state.tooltipEl = createTooltipElement(state.value);
   else
     updateTooltipContent(state.tooltipEl, state.value);
-  if (!document.body.contains(state.tooltipEl))
-    document.body.appendChild(state.tooltipEl);
+  const container = getTooltipContainer(el);
+  if (state.tooltipEl.parentNode !== container)
+    container.appendChild(state.tooltipEl);
   positionTooltip(el);
   state.tooltipEl.classList.add("__va-tooltip--visible");
   attachWindowListeners(el);

package/dist/styles/agentation.css

@@ -1 +1 @@
-[data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}[data-agentation-vue]:not([data-agentation-vue] [data-agentation-vue]){--va-accent:#42b883;--va-accent-rgb:66,184,131}@media (prefers-color-scheme:dark){[data-agentation-vue]:not([data-va-theme=light]){--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}}[data-agentation-vue][data-va-theme=dark],[data-agentation-vue][data-va-theme=dark] [data-agentation-vue]{--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}[data-agentation-vue][data-va-theme=light],[data-agentation-vue][data-va-theme=light] [data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}:where([data-agentation-vue],[data-agentation-vue] *){border:none;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;list-style:none;margin:0;padding:0;text-decoration:none}.__va-intercept{background:transparent;cursor:crosshair;inset:0;position:fixed;z-index:2147483646}.__va-intercept--input-open{pointer-events:none}.__va-toolbar{position:fixed;--va-toolbar-base-transform:translate(0);--va-toolbar-auto-hide-transform:translate(0);--va-toolbar-size:42px;--va-toolbar-edge-offset:20px;--va-toolbar-auto-hide-peek:8px;--va-toolbar-auto-hide-corner-peek:16px;--va-toolbar-auto-hide-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-peek));--va-toolbar-auto-hide-corner-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-corner-peek));display:block;max-width:42px;min-height:42px;z-index:2147483647;--va-toolbar-resize-delay:0ms;background:var(--va-bg);border:1px solid var(--va-border);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:0;transform:var(--va-toolbar-base-transform) var(--va-toolbar-auto-hide-transform);transition:border-radius .12s cubic-bezier(.32,.72,0,1),padding .12s cubic-bezier(.32,.72,0,1),max-width .24s cubic-bezier(.22,1,.36,1) var(--va-toolbar-resize-delay),transform .15s ease,opacity .15s ease,box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-toolbar--place-bottom-right{bottom:20px;right:20px}.__va-toolbar--place-bottom-center{bottom:20px;left:50%;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-bottom-left{bottom:20px;left:20px}.__va-toolbar--place-top-right{right:20px;top:20px}.__va-toolbar--place-top-center{left:50%;top:20px;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-top-left{left:20px;top:20px}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-center{--va-toolbar-auto-hide-transform:translateY(calc(var(--va-toolbar-auto-hide-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-center{--va-toolbar-auto-hide-transform:translateY(var(--va-toolbar-auto-hide-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--collapsed{cursor:pointer;max-width:42px;min-height:42px}.__va-toolbar--expanded{--va-toolbar-resize-delay:110ms;border-radius:10px;max-width:520px;padding:4px}.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide):hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}.__va-toolbar--dragging{bottom:auto;left:0;right:auto;top:0;transform:none;transition:none}.__va-toolbar--dragging.__va-toolbar--collapsed:hover{transform:none}.__va-toolbar-stage{align-items:center;display:flex;gap:4px}.__va-toolbar-stage--toggle{inset:0;justify-content:center;opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition:opacity .11s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;visibility:visible}.__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:8px;filter:blur(4px);opacity:0;overflow:hidden;pointer-events:none;transform:translateX(var(--va-toolbar-menu-enter-x));transition:opacity .14s ease 0s,transform .22s cubic-bezier(.22,1,.36,1) 0s,visibility 0s linear .14s,filter 80ms ease 0s;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--toggle{opacity:0;pointer-events:none;transform:scale(.94);transition:opacity 90ms ease,transform .12s ease,visibility 0s linear 90ms;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--menu{filter:blur(0);opacity:1;pointer-events:auto;transform:translateX(0);transition:opacity .15s ease .15s,transform .24s cubic-bezier(.22,1,.36,1) .12s,visibility 0s linear 0s,filter .15s ease .2s;visibility:visible}.__va-toolbar--place-bottom-right .__va-toolbar-stage--menu,.__va-toolbar--place-top-right .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:-8px}.__va-toolbar--place-bottom-center .__va-toolbar-stage--menu,.__va-toolbar--place-top-center .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:0px}.__va-snap-zones{inset:0;pointer-events:none;position:fixed;z-index:2147483646}.__va-snap-zone{background:rgba(var(--va-accent-rgb),.035);border:1.5px dashed rgba(var(--va-accent-rgb),.18);border-radius:999px;box-shadow:0 0 0 1px rgba(var(--va-accent-rgb),.04);height:42px;position:fixed;transform:translate(-50%,-50%);transition:all .12s ease;width:42px}.__va-snap-zone--active{background:rgba(var(--va-accent-rgb),.09);border-color:rgba(var(--va-accent-rgb),.4)}.__va-snap-zone--rect{border-radius:8px;transform:none}.__va-snap-zone--rect.__va-snap-zone--active{transform:none}.__va-icon-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:background .15s ease,color .15s ease;width:32px}.__va-icon-btn:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-icon-btn--active{background:rgba(var(--va-accent-rgb),.15);color:var(--va-accent)}.__va-icon-btn--active:hover{background:rgba(var(--va-accent-rgb),.25)}.__va-icon-btn:disabled{cursor:not-allowed;opacity:.3}.__va-icon-btn:disabled:hover{background:transparent}.__va-icon-btn svg{height:18px;width:18px}.__va-toolbar-toggle{align-items:center;background:transparent;border:none;color:var(--va-accent);cursor:pointer;display:flex;height:100%;justify-content:center;line-height:0;outline:none;padding:0;position:relative;width:100%}.__va-toolbar-toggle svg{flex-shrink:0;height:22px;width:22px}.__va-toolbar-sep{background:var(--va-border);flex-shrink:0;height:20px;width:1px}.__va-drag-handle{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:grab;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:24px}.__va-drag-handle:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-drag-handle:active{cursor:grabbing}.__va-drag-handle-dots{display:grid;gap:2.5px;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px)}.__va-drag-handle-dots span{background:currentColor;border-radius:50%;height:3px;opacity:.6;width:3px}.__va-toolbar-badge{align-items:center;background:var(--va-accent);border-radius:9px;color:#fff;display:flex;font-size:11px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-6px;top:-6px}.__va-tooltip{align-items:center;background:#131518;border:1px solid hsla(0,0%,100%,.08);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.28);color:#dce1e7;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px;font-weight:500;gap:6px;left:0;line-height:1.15;max-width:min(360px,calc(100vw - 16px));opacity:0;padding:6px 9px;pointer-events:none;position:fixed;top:0;transform:translateY(4px) scale(.98);transform-origin:center bottom;transition:opacity .12s ease,transform .12s ease;white-space:nowrap;z-index:2147483647}.__va-tooltip[data-placement=bottom]{transform:translateY(-4px) scale(.98);transform-origin:center top}.__va-tooltip.__va-tooltip--visible{opacity:1}.__va-tooltip.__va-tooltip--visible[data-placement=bottom],.__va-tooltip.__va-tooltip--visible[data-placement=top]{transform:translateY(0) scale(1)}.__va-tooltip-label{overflow:hidden;text-overflow:ellipsis}.__va-tooltip-shortcut{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.18);border-radius:6px;color:#b5bec8;display:inline-flex;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1;min-height:18px;padding:2px 6px}.__va-tooltip-arrow{background:#131518;border:1px solid hsla(0,0%,100%,.08);border-left:none;border-top:none;height:10px;left:50%;position:absolute;transform:translateX(-50%) rotate(45deg);width:10px}.__va-tooltip[data-placement=top] .__va-tooltip-arrow{bottom:-5px}.__va-tooltip[data-placement=bottom] .__va-tooltip-arrow{top:-5px;transform:translateX(-50%) rotate(225deg)}.__va-highlight{background:rgba(var(--va-accent-rgb),.08);border:2px solid var(--va-accent);border-radius:4px;pointer-events:none;position:fixed;transition:all 80ms ease;z-index:2147483645}.__va-highlight-label{background:var(--va-accent);border-radius:4px;color:#fff;font-size:11px;font-weight:500;left:0;max-width:300px;overflow:hidden;padding:2px 8px;position:absolute;text-overflow:ellipsis;top:-28px;white-space:nowrap}.__va-highlight-label--chain{background:#1a1a1a;max-width:500px;overflow:visible;padding:4px 10px}.__va-marker{align-items:center;background:var(--va-accent);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;position:absolute;transform:translate(-50%,-50%);transition:all .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:24px;z-index:2147483647}.__va-marker:hover{box-shadow:0 3px 10px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(1.2)}.__va-marker--fixed{position:fixed}.__va-marker--stale{opacity:.5}.__va-marker-plus{height:14px;stroke-width:3;width:14px}.__va-marker-pencil{display:none;height:12px;width:12px}.__va-marker:not(.__va-marker--pending):hover .__va-marker-number{display:none}.__va-marker:not(.__va-marker--pending):hover .__va-marker-pencil{display:block}.__va-marker--pending{animation:__va-pulse 1.5s ease-in-out infinite}.__va-marker--selection{border-radius:6px;height:26px;width:26px}@keyframes __va-pulse{0%,to{box-shadow:0 2px 6px rgba(0,0,0,.3)}50%{box-shadow:0 2px 12px rgba(var(--va-accent-rgb),.5)}}.__va-input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:360px;min-width:280px;padding:12px;position:fixed;z-index:2147483647}.__va-input-label{color:var(--va-text-secondary);display:block;font-size:12px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-chain{margin-bottom:8px}.__va-input-styles{margin-bottom:10px}.__va-input-styles-summary{align-items:center;color:var(--va-text-secondary);cursor:pointer;display:flex;font-size:12px;gap:6px;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-input-styles-summary::-webkit-details-marker{display:none}.__va-input-styles-summary:before{content:"▸";flex-shrink:0;font-size:11px;transition:transform .16s ease}.__va-input-styles[open] .__va-input-styles-summary:before{transform:rotate(90deg)}.__va-input-styles-block{background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;line-height:1.55;margin-top:8px;padding:8px 10px}.__va-input-styles-element{color:var(--va-text-secondary);display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-style-line{color:var(--va-text);word-break:break-word}.__va-input-style-prop{color:#a855f7}.__va-input-style-value{color:var(--va-text)}.__va-comp-chain{align-items:center;display:inline-flex;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;gap:6px}.__va-comp,.__va-comp-chain{white-space:nowrap}.__va-comp-bracket{opacity:.4}.__va-comp-chain--dark{color:#fff}.__va-comp-chain--light{color:var(--va-accent)}.__va-comp-ellipsis{font-size:11px;letter-spacing:1px;opacity:.5}.__va-comp-chain--collapsible{cursor:pointer;flex-wrap:wrap}.__va-comp-toggle{flex-shrink:0;font-size:10px;opacity:.6;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:10px}.__va-input-editable{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;color:var(--va-text);font-family:inherit;font-size:13px;line-height:1.4;min-height:1.4em;outline:none;overflow:hidden;padding:8px 10px;transition:border-color .15s ease;white-space:pre-wrap;width:100%;word-break:break-word}.__va-input-editable:focus{border-color:var(--va-accent)}.__va-input-editable:empty:before{color:var(--va-text-secondary);content:attr(data-placeholder);pointer-events:none}.__va-mention{background:rgba(var(--va-accent-rgb),.15);border-radius:4px;color:var(--va-accent);cursor:default;display:inline;font-size:12px;font-weight:600;padding:1px 6px;-webkit-user-select:all;-moz-user-select:all;user-select:all;white-space:nowrap}.__va-mention--deleted{opacity:.45;text-decoration:line-through}.__va-mention-dropdown{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:200px;max-width:280px;min-width:180px;overflow-y:auto;padding:4px;position:absolute;z-index:1}.__va-mention-option{align-items:center;border-radius:4px;color:var(--va-text);cursor:pointer;display:flex;font-size:12px;gap:8px;padding:6px 8px}.__va-mention-option--active,.__va-mention-option:hover{background:var(--va-bg-secondary)}.__va-mention-option-number{align-items:center;background:var(--va-accent);border-radius:50%;color:#fff;display:inline-flex;flex-shrink:0;font-size:11px;font-weight:700;height:20px;justify-content:center;width:20px}.__va-mention-option-preview{color:var(--va-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-actions{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.__va-input-actions-right{display:flex;gap:8px;margin-left:auto}.__va-input-delete-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:32px}.__va-input-delete-btn svg{height:16px;width:16px}.__va-input-delete-btn:hover{background:var(--va-bg-secondary);color:#ef4444}.__va-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;outline:none;padding:6px 14px;transition:all .15s ease}.__va-btn--secondary{background:var(--va-bg-secondary);color:var(--va-text-secondary)}.__va-btn--secondary:hover{background:var(--va-border)}.__va-btn--primary{background:var(--va-accent);color:#fff}.__va-btn--primary:hover{opacity:.9}.__va-btn:disabled{cursor:not-allowed;opacity:.4}.__va-settings-popover{position:fixed;z-index:2147483647}.__va-settings{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:min(340px,calc(100vw - 16px));min-width:260px;padding:16px;position:relative}.__va-settings-top{align-items:center;border-bottom:1px solid var(--va-border);display:flex;justify-content:space-between;margin-bottom:12px;padding-bottom:10px}.__va-settings-title{color:var(--va-text);font-size:13px;font-weight:600}.__va-settings-version{color:var(--va-text-secondary);font-size:11px;font-weight:400}.__va-theme-toggle{align-items:center;background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:999px;color:var(--va-text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;transition:all .15s ease;width:28px}.__va-theme-toggle:hover{border-color:var(--va-text-secondary);color:var(--va-text)}.__va-theme-toggle svg{height:15px;width:15px}.__va-settings-row{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.__va-settings-label{color:var(--va-text-secondary);font-size:12px;white-space:nowrap}.__va-settings-row--stack{display:block}.__va-settings-row--stack .__va-settings-label{display:block;margin-bottom:8px}.__va-settings-row:last-child{margin-bottom:0}.__va-settings-divider{background:var(--va-border);height:1px;margin:8px 0 12px}.__va-settings select{background:var(--va-bg);border:1px solid var(--va-border);border-radius:4px;color:var(--va-text);font-size:12px;outline:none;padding:4px 8px}.__va-color-swatches{align-items:center;display:flex;gap:6px}.__va-color-swatch{border:2px solid var(--va-border);border-radius:50%;cursor:pointer;flex-shrink:0;height:22px;outline:none;padding:0;transition:all .15s ease;width:22px}.__va-color-swatch:hover{transform:scale(1.15)}.__va-color-swatch--active{border-color:var(--va-text);transform:scale(1.15)}.__va-toggle{background:var(--va-border);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;height:20px;outline:none;padding:0;position:relative;transition:background .15s ease;width:36px}.__va-toggle--active{background:var(--va-accent)}.__va-toggle:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .15s ease;width:16px}.__va-toggle--active:after{transform:translateX(16px)}.__va-selection-rect{background:rgba(var(--va-accent-rgb),.06);border:2px dashed var(--va-accent);border-radius:2px;pointer-events:none;position:fixed;z-index:2147483645}.__va-copy-feedback{animation:__va-fadeIn .15s ease;background:var(--va-accent);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;font-size:13px;font-weight:500;padding:8px 16px;position:fixed;right:20px;z-index:2147483647}@keyframes __va-fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.__va-undo-feedback{align-items:center;animation:__va-fadeIn .15s ease;background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--va-text);display:flex;font-size:13px;font-weight:500;gap:12px;padding:8px 12px 8px 16px;position:fixed;right:20px;z-index:2147483647}.__va-undo-feedback--shifted{bottom:112px}.__va-undo-btn{background:var(--va-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;outline:none;padding:4px 10px;transition:opacity .15s ease}.__va-undo-btn:hover{opacity:.85}
+[data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}[data-agentation-vue]:not([data-agentation-vue] [data-agentation-vue]){--va-accent:#42b883;--va-accent-rgb:66,184,131}@media (prefers-color-scheme:dark){[data-agentation-vue]:not([data-va-theme=light]){--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}}[data-agentation-vue][data-va-theme=dark],[data-agentation-vue][data-va-theme=dark] [data-agentation-vue]{--va-bg:#1a1a1a;--va-bg-secondary:#2a2a2a;--va-text:#f5f5f5;--va-text-secondary:#999;--va-border:#333}[data-agentation-vue][data-va-theme=light],[data-agentation-vue][data-va-theme=light] [data-agentation-vue]{--va-bg:#fff;--va-bg-secondary:#f5f5f5;--va-text:#1a1a1a;--va-text-secondary:#666;--va-border:#e5e5e5}:where([data-agentation-vue],[data-agentation-vue] *){border:none;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;list-style:none;margin:0;padding:0;text-decoration:none}.__va-intercept{background:transparent;cursor:crosshair;inset:0;position:fixed;z-index:2147483646}.__va-intercept--input-open{pointer-events:none}.__va-toolbar{position:fixed;--va-toolbar-base-transform:translate(0);--va-toolbar-auto-hide-transform:translate(0);--va-toolbar-size:42px;--va-toolbar-edge-offset:20px;--va-toolbar-auto-hide-peek:8px;--va-toolbar-auto-hide-corner-peek:16px;--va-toolbar-auto-hide-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-peek));--va-toolbar-auto-hide-corner-shift:calc(var(--va-toolbar-edge-offset) + var(--va-toolbar-size) - var(--va-toolbar-auto-hide-corner-peek));display:block;max-width:42px;min-height:42px;z-index:2147483647;--va-toolbar-resize-delay:0ms;background:var(--va-bg);border:1px solid var(--va-border);border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:0;transform:var(--va-toolbar-base-transform) var(--va-toolbar-auto-hide-transform);transition:border-radius .12s cubic-bezier(.32,.72,0,1),padding .12s cubic-bezier(.32,.72,0,1),max-width .24s cubic-bezier(.22,1,.36,1) var(--va-toolbar-resize-delay),transform .15s ease,opacity .15s ease,box-shadow .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-toolbar--place-bottom-right{bottom:20px;right:20px}.__va-toolbar--place-bottom-center{bottom:20px;left:50%;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-bottom-left{bottom:20px;left:20px}.__va-toolbar--place-top-right{right:20px;top:20px}.__va-toolbar--place-top-center{left:50%;top:20px;--va-toolbar-base-transform:translateX(-50%)}.__va-toolbar--place-top-left{left:20px;top:20px}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-center{--va-toolbar-auto-hide-transform:translateY(calc(var(--va-toolbar-auto-hide-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-top-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),calc(var(--va-toolbar-auto-hide-corner-shift)*-1))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-left{--va-toolbar-auto-hide-transform:translate(calc(var(--va-toolbar-auto-hide-corner-shift)*-1),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-center{--va-toolbar-auto-hide-transform:translateY(var(--va-toolbar-auto-hide-shift))}.__va-toolbar--auto-hide.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide-revealed).__va-toolbar--place-bottom-right{--va-toolbar-auto-hide-transform:translate(var(--va-toolbar-auto-hide-corner-shift),var(--va-toolbar-auto-hide-corner-shift))}.__va-toolbar--collapsed{cursor:pointer;max-width:42px;min-height:42px}.__va-toolbar--expanded{--va-toolbar-resize-delay:110ms;border-radius:10px;max-width:520px;padding:4px}.__va-toolbar--collapsed:not(.__va-toolbar--auto-hide):hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}.__va-toolbar--dragging{bottom:auto;left:0;right:auto;top:0;transform:none;transition:none}.__va-toolbar--dragging.__va-toolbar--collapsed:hover{transform:none}.__va-toolbar-stage{align-items:center;display:flex;gap:4px}.__va-toolbar-stage--toggle{inset:0;justify-content:center;opacity:1;pointer-events:auto;position:absolute;transform:scale(1);transition:opacity .11s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;visibility:visible}.__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:8px;filter:blur(4px);opacity:0;overflow:hidden;pointer-events:none;transform:translateX(var(--va-toolbar-menu-enter-x));transition:opacity .14s ease 0s,transform .22s cubic-bezier(.22,1,.36,1) 0s,visibility 0s linear .14s,filter 80ms ease 0s;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--toggle{opacity:0;pointer-events:none;transform:scale(.94);transition:opacity 90ms ease,transform .12s ease,visibility 0s linear 90ms;visibility:hidden}.__va-toolbar--expanded .__va-toolbar-stage--menu{filter:blur(0);opacity:1;pointer-events:auto;transform:translateX(0);transition:opacity .15s ease .15s,transform .24s cubic-bezier(.22,1,.36,1) .12s,visibility 0s linear 0s,filter .15s ease .2s;visibility:visible}.__va-toolbar--place-bottom-right .__va-toolbar-stage--menu,.__va-toolbar--place-top-right .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:-8px}.__va-toolbar--place-bottom-center .__va-toolbar-stage--menu,.__va-toolbar--place-top-center .__va-toolbar-stage--menu{--va-toolbar-menu-enter-x:0px}.__va-snap-zones{inset:0;pointer-events:none;position:fixed;z-index:2147483646}.__va-snap-zone{background:rgba(var(--va-accent-rgb),.035);border:1.5px dashed rgba(var(--va-accent-rgb),.18);border-radius:999px;box-shadow:0 0 0 1px rgba(var(--va-accent-rgb),.04);height:42px;position:fixed;transform:translate(-50%,-50%);transition:all .12s ease;width:42px}.__va-snap-zone--active{background:rgba(var(--va-accent-rgb),.09);border-color:rgba(var(--va-accent-rgb),.4)}.__va-snap-zone--rect{border-radius:8px;transform:none}.__va-snap-zone--rect.__va-snap-zone--active{transform:none}.__va-icon-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:background .15s ease,color .15s ease;width:32px}.__va-icon-btn:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-icon-btn--active{background:rgba(var(--va-accent-rgb),.15);color:var(--va-accent)}.__va-icon-btn--active:hover{background:rgba(var(--va-accent-rgb),.25)}.__va-icon-btn:disabled{cursor:not-allowed;opacity:.3}.__va-icon-btn:disabled:hover{background:transparent}.__va-icon-btn svg{height:18px;width:18px}.__va-toolbar-toggle{align-items:center;background:transparent;border:none;color:var(--va-accent);cursor:pointer;display:flex;height:100%;justify-content:center;line-height:0;outline:none;padding:0;position:relative;width:100%}.__va-toolbar-toggle svg:not(.__va-peek-ring){flex-shrink:0;height:22px;width:22px}.__va-peek-ring{height:calc(100% + 6px);inset:-3px;overflow:visible;pointer-events:none;position:absolute;width:calc(100% + 6px)}.__va-peek-ring circle{animation:va-peek-fill linear forwards;fill:none;stroke:var(--va-accent);stroke-dasharray:131.95;stroke-dashoffset:131.95;stroke-linecap:round;stroke-width:3;transform:rotate(-90deg);transform-origin:center}@keyframes va-peek-fill{to{stroke-dashoffset:0}}.__va-toolbar-sep{background:var(--va-border);flex-shrink:0;height:20px;width:1px}.__va-drag-handle{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:grab;display:flex;flex-shrink:0;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:24px}.__va-drag-handle:hover{background:var(--va-bg-secondary);color:var(--va-text)}.__va-drag-handle:active{cursor:grabbing}.__va-drag-handle-dots{display:grid;gap:2.5px;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px)}.__va-drag-handle-dots span{background:currentColor;border-radius:50%;height:3px;opacity:.6;width:3px}.__va-toolbar-badge{align-items:center;background:var(--va-accent);border-radius:9px;color:#fff;display:flex;font-size:11px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-6px;top:-6px;z-index:1}.__va-tooltip{align-items:center;background:#131518;border:1px solid hsla(0,0%,100%,.08);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.28);color:#dce1e7;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:11px;font-weight:500;gap:6px;left:0;line-height:1.15;max-width:min(360px,calc(100vw - 16px));opacity:0;padding:6px 9px;pointer-events:none;position:fixed;top:0;transform:translateY(4px) scale(.98);transform-origin:center bottom;transition:opacity .12s ease,transform .12s ease;white-space:nowrap;z-index:2147483647}.__va-tooltip[data-placement=bottom]{transform:translateY(-4px) scale(.98);transform-origin:center top}.__va-tooltip.__va-tooltip--visible{opacity:1}.__va-tooltip.__va-tooltip--visible[data-placement=bottom],.__va-tooltip.__va-tooltip--visible[data-placement=top]{transform:translateY(0) scale(1)}.__va-tooltip-label{overflow:hidden;text-overflow:ellipsis}.__va-tooltip-shortcut{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.18);border-radius:6px;color:#b5bec8;display:inline-flex;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1;min-height:18px;padding:2px 6px}.__va-tooltip-arrow{background:#131518;border:1px solid hsla(0,0%,100%,.08);border-left:none;border-top:none;height:10px;left:50%;position:absolute;transform:translateX(-50%) rotate(45deg);width:10px}.__va-tooltip[data-placement=top] .__va-tooltip-arrow{bottom:-5px}.__va-tooltip[data-placement=bottom] .__va-tooltip-arrow{top:-5px;transform:translateX(-50%) rotate(225deg)}.__va-highlight{background:rgba(var(--va-accent-rgb),.08);border:2px solid var(--va-accent);border-radius:4px;pointer-events:none;position:fixed;transition:all 80ms ease;z-index:2147483645}.__va-highlight-label{background:var(--va-accent);border-radius:4px;color:#fff;font-size:11px;font-weight:500;left:0;max-width:300px;overflow:hidden;padding:2px 8px;position:absolute;text-overflow:ellipsis;top:-28px;white-space:nowrap}.__va-highlight-label--chain{background:#1a1a1a;max-width:500px;overflow:visible;padding:4px 10px}.__va-marker{align-items:center;background:var(--va-accent);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;position:absolute;transform:translate(-50%,-50%) scale(1);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease,opacity .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:24px;z-index:2147483647}.__va-marker:hover{box-shadow:0 3px 10px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(1.2)}.__va-marker--entering,.__va-marker--hidden{pointer-events:none;transform:translate(-50%,-50%) scale(0)!important}.__va-marker--hidden{transition:transform .2s cubic-bezier(.55,0,1,.45),box-shadow .15s ease,opacity .15s ease}.__va-marker--fixed{position:fixed}.__va-marker--stale{opacity:.5}.__va-marker-plus{height:14px;stroke-width:3;width:14px}.__va-marker-pencil{display:none;height:12px;width:12px}.__va-marker:not(.__va-marker--pending):hover .__va-marker-number{display:none}.__va-marker:not(.__va-marker--pending):hover .__va-marker-pencil{display:block}.__va-marker--pending{animation:__va-pulse 1.5s ease-in-out infinite}.__va-marker--selection{border-radius:6px;height:26px;width:26px}@keyframes __va-pulse{0%,to{box-shadow:0 2px 6px rgba(0,0,0,.3)}50%{box-shadow:0 2px 12px rgba(var(--va-accent-rgb),.5)}}.__va-input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:360px;min-width:280px;padding:12px;position:fixed;z-index:2147483647}.__va-input-label{color:var(--va-text-secondary);display:block;font-size:12px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-chain{margin-bottom:8px}.__va-input-styles{margin-bottom:10px}.__va-input-styles-summary{align-items:center;color:var(--va-text-secondary);cursor:pointer;display:flex;font-size:12px;gap:6px;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.__va-input-styles-summary::-webkit-details-marker{display:none}.__va-input-styles-summary:before{content:"▸";flex-shrink:0;font-size:11px;transition:transform .16s ease}.__va-input-styles[open] .__va-input-styles-summary:before{transform:rotate(90deg)}.__va-input-styles-block{background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;line-height:1.55;margin-top:8px;padding:8px 10px}.__va-input-styles-element{color:var(--va-text-secondary);display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-style-line{color:var(--va-text);word-break:break-word}.__va-input-style-prop{color:#a855f7}.__va-input-style-value{color:var(--va-text)}.__va-comp-chain{align-items:center;display:inline-flex;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:11px;gap:6px}.__va-comp,.__va-comp-chain{white-space:nowrap}.__va-comp-bracket{opacity:.4}.__va-comp-chain--dark{color:#fff}.__va-comp-chain--light{color:var(--va-accent)}.__va-comp-ellipsis{font-size:11px;letter-spacing:1px;opacity:.5}.__va-comp-chain--collapsible{cursor:pointer;flex-wrap:wrap}.__va-comp-toggle{flex-shrink:0;font-size:10px;opacity:.6;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:10px}.__va-input-editable{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;color:var(--va-text);font-family:inherit;font-size:13px;line-height:1.4;min-height:1.4em;outline:none;overflow:hidden;padding:8px 10px;transition:border-color .15s ease;white-space:pre-wrap;width:100%;word-break:break-word}.__va-input-editable:focus{border-color:var(--va-accent)}.__va-input-editable:empty:before{color:var(--va-text-secondary);content:attr(data-placeholder);pointer-events:none}.__va-mention{background:rgba(var(--va-accent-rgb),.15);border-radius:4px;color:var(--va-accent);cursor:default;display:inline;font-size:12px;font-weight:600;padding:1px 6px;-webkit-user-select:all;-moz-user-select:all;user-select:all;white-space:nowrap}.__va-mention--deleted{opacity:.45;text-decoration:line-through}.__va-mention-dropdown{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:200px;max-width:280px;min-width:180px;overflow-y:auto;padding:4px;position:absolute;z-index:1}.__va-mention-option{align-items:center;border-radius:4px;color:var(--va-text);cursor:pointer;display:flex;font-size:12px;gap:8px;padding:6px 8px}.__va-mention-option--active,.__va-mention-option:hover{background:var(--va-bg-secondary)}.__va-mention-option-number{align-items:center;background:var(--va-accent);border-radius:50%;color:#fff;display:inline-flex;flex-shrink:0;font-size:11px;font-weight:700;height:20px;justify-content:center;width:20px}.__va-mention-option-preview{color:var(--va-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__va-input-actions{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.__va-input-actions-right{display:flex;gap:8px;margin-left:auto}.__va-input-delete-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--va-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;outline:none;padding:0;transition:all .15s ease;width:32px}.__va-input-delete-btn svg{height:16px;width:16px}.__va-input-delete-btn:hover{background:var(--va-bg-secondary);color:#ef4444}.__va-btn{border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;outline:none;padding:6px 14px;transition:all .15s ease}.__va-btn--secondary{background:var(--va-bg-secondary);color:var(--va-text-secondary)}.__va-btn--secondary:hover{background:var(--va-border)}.__va-btn--primary{background:var(--va-accent);color:#fff}.__va-btn--primary:hover{opacity:.9}.__va-btn:disabled{cursor:not-allowed;opacity:.4}.__va-settings-popover{position:fixed;z-index:2147483647}.__va-settings{background:var(--va-bg);border:1px solid var(--va-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:min(340px,calc(100vw - 16px));min-width:260px;padding:16px;position:relative}.__va-settings-top{align-items:center;border-bottom:1px solid var(--va-border);display:flex;justify-content:space-between;margin-bottom:12px;padding-bottom:10px}.__va-settings-title{color:var(--va-text);font-size:13px;font-weight:600}.__va-settings-version{color:var(--va-text-secondary);font-size:11px;font-weight:400}.__va-theme-toggle{align-items:center;background:var(--va-bg-secondary);border:1px solid var(--va-border);border-radius:999px;color:var(--va-text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;transition:all .15s ease;width:28px}.__va-theme-toggle:hover{border-color:var(--va-text-secondary);color:var(--va-text)}.__va-theme-toggle svg{height:15px;width:15px}.__va-settings-row{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.__va-settings-label{color:var(--va-text-secondary);font-size:12px;white-space:nowrap}.__va-settings-row--stack{display:block}.__va-settings-row--stack .__va-settings-label{display:block;margin-bottom:8px}.__va-settings-row:last-child{margin-bottom:0}.__va-settings-divider{background:var(--va-border);height:1px;margin:8px 0 12px}.__va-settings select{background:var(--va-bg);border:1px solid var(--va-border);border-radius:4px;color:var(--va-text);font-size:12px;outline:none;padding:4px 8px}.__va-color-swatches{align-items:center;display:flex;gap:6px}.__va-color-swatch{border:2px solid var(--va-border);border-radius:50%;cursor:pointer;flex-shrink:0;height:22px;outline:none;padding:0;transition:all .15s ease;width:22px}.__va-color-swatch:hover{transform:scale(1.15)}.__va-color-swatch--active{border-color:var(--va-text);transform:scale(1.15)}.__va-toggle{background:var(--va-border);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;height:20px;outline:none;padding:0;position:relative;transition:background .15s ease;width:36px}.__va-toggle--active{background:var(--va-accent)}.__va-toggle:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .15s ease;width:16px}.__va-toggle--active:after{transform:translateX(16px)}.__va-selection-rect{background:rgba(var(--va-accent-rgb),.06);border:2px dashed var(--va-accent);border-radius:2px;pointer-events:none;position:fixed;z-index:2147483645}.__va-copy-feedback{animation:__va-fadeIn .15s ease;background:var(--va-accent);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;font-size:13px;font-weight:500;padding:8px 16px;position:fixed;right:20px;z-index:2147483647}@keyframes __va-fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.__va-undo-feedback{align-items:center;animation:__va-fadeIn .15s ease;background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;bottom:72px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--va-text);display:flex;font-size:13px;font-weight:500;gap:12px;padding:8px 12px 8px 16px;position:fixed;right:20px;z-index:2147483647}.__va-undo-feedback--shifted{bottom:112px}.__va-undo-btn{background:var(--va-accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;outline:none;padding:4px 10px;transition:opacity .15s ease}.__va-undo-btn:hover{opacity:.85}

package/dist/types.d.ts

@@ -68,6 +68,7 @@ export interface Settings {
     showComponentTree: boolean;
     theme: 'light' | 'dark' | 'auto';
     activationKey: 'none' | 'Meta' | 'Alt' | 'Shift';
+    peekKey: 'none' | 'Meta' | 'Alt' | 'Shift' | 'Control';
 }
 export interface StorageAdapter {
     getItem: (key: string) => string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentation-vue",
-  "version": "0.2.10",
+  "version": "0.2.13",
   "description": "Visual feedback tool for AI coding agents — Vue 2.7 & 3",
   "author": "Dorian Becker",
   "license": "PolyForm-Shield-1.0.0",
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "prepack": "pnpm run build",
+    "prepack": "pnpm run build && cp ../../README.md .",
     "dev": "unbuild --stub",
     "typecheck": "vue-tsc --noEmit"
   },