agentation-vue 0.2.6 → 0.2.12

package/dist/composables/useMentionDropdown.mjs

@@ -0,0 +1,162 @@
+import { computed, ref } from "vue-demi";
+function getSelection(el) {
+  const root = el.getRootNode();
+  if (root instanceof ShadowRoot && typeof root.getSelection === "function")
+    return root.getSelection();
+  return window.getSelection();
+}
+function findTrigger(el) {
+  const sel = getSelection(el);
+  if (!sel || sel.rangeCount === 0)
+    return null;
+  const range = sel.getRangeAt(0);
+  if (!range.collapsed)
+    return null;
+  const { startContainer, startOffset } = range;
+  if (startContainer.nodeType !== Node.TEXT_NODE)
+    return null;
+  const textNode = startContainer;
+  const text = textNode.textContent || "";
+  const beforeCursor = text.slice(0, startOffset);
+  for (let i = beforeCursor.length - 1; i >= 0; i--) {
+    const ch = beforeCursor[i];
+    if (ch === " " || ch === "\n")
+      return null;
+    if (ch === "@") {
+      if (i === 0 || beforeCursor[i - 1] === " " || beforeCursor[i - 1] === "\n") {
+        return {
+          textNode,
+          atIndex: i,
+          query: beforeCursor.slice(i + 1)
+        };
+      }
+      return null;
+    }
+  }
+  return null;
+}
+export function useMentionDropdown(inputEl, candidates) {
+  const isOpen = ref(false);
+  const query = ref("");
+  const activeIndex = ref(0);
+  const dropdownPosition = ref({ x: 0, y: 0 });
+  let currentTrigger = null;
+  const filteredCandidates = computed(() => {
+    if (!isOpen.value)
+      return [];
+    const q = query.value.toLowerCase();
+    return candidates.value.filter((c) => {
+      if (!q)
+        return true;
+      return String(c.displayNumber).startsWith(q) || c.commentPreview.toLowerCase().includes(q);
+    });
+  });
+  function checkForTrigger() {
+    const el = inputEl.value;
+    if (!el)
+      return;
+    const trigger = findTrigger(el);
+    if (trigger) {
+      currentTrigger = trigger;
+      query.value = trigger.query;
+      activeIndex.value = 0;
+      isOpen.value = true;
+      updatePosition();
+    } else {
+      close();
+    }
+  }
+  function updatePosition() {
+    const el = inputEl.value;
+    if (!el || !currentTrigger)
+      return;
+    const sel = getSelection(el);
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.setStart(currentTrigger.textNode, currentTrigger.atIndex);
+    const rect = range.getBoundingClientRect();
+    const containerRect = el.closest(".__va-input")?.getBoundingClientRect();
+    if (!containerRect)
+      return;
+    const x = rect.left - containerRect.left;
+    const y = rect.bottom - containerRect.top + 4;
+    const viewportBottom = window.innerHeight;
+    const estimatedDropdownHeight = Math.min(filteredCandidates.value.length * 36 + 8, 200);
+    if (rect.bottom + estimatedDropdownHeight > viewportBottom) {
+      dropdownPosition.value = { x, y: rect.top - containerRect.top - estimatedDropdownHeight - 4 };
+    } else {
+      dropdownPosition.value = { x, y };
+    }
+  }
+  function selectCandidate(candidate) {
+    const el = inputEl.value;
+    if (!el || !currentTrigger)
+      return;
+    const sel = getSelection(el);
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const { textNode, atIndex } = currentTrigger;
+    const cursorOffset = sel.getRangeAt(0).startOffset;
+    const range = document.createRange();
+    range.setStart(textNode, atIndex);
+    range.setEnd(textNode, cursorOffset);
+    range.deleteContents();
+    const chip = document.createElement("span");
+    chip.contentEditable = "false";
+    chip.className = "__va-mention";
+    chip.dataset.mentionId = candidate.id;
+    chip.textContent = `@${candidate.displayNumber}`;
+    range.insertNode(chip);
+    const space = document.createTextNode("\xA0");
+    chip.after(space);
+    const newRange = document.createRange();
+    newRange.setStartAfter(space);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+    close();
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  function onKeyDown(e) {
+    if (!isOpen.value || filteredCandidates.value.length === 0)
+      return false;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      activeIndex.value = (activeIndex.value + 1) % filteredCandidates.value.length;
+      return true;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      activeIndex.value = (activeIndex.value - 1 + filteredCandidates.value.length) % filteredCandidates.value.length;
+      return true;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      selectCandidate(filteredCandidates.value[activeIndex.value]);
+      return true;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      return true;
+    }
+    return false;
+  }
+  function close() {
+    isOpen.value = false;
+    query.value = "";
+    activeIndex.value = 0;
+    currentTrigger = null;
+  }
+  return {
+    isOpen,
+    filteredCandidates,
+    activeIndex,
+    dropdownPosition,
+    checkForTrigger,
+    selectCandidate,
+    onKeyDown,
+    close
+  };
+}

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,2 +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: any;
+export declare const PEEK_HOLD_DURATION_MS = 1000;

package/dist/constants.mjs

@@ -1,2 +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 = version;
+export const PEEK_HOLD_DURATION_MS = 1e3;

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 input{background:var(--va-bg);border:1px solid var(--va-border);border-radius:6px;color:var(--va-text);font-size:13px;outline:none;padding:8px 10px;transition:border-color .15s ease;width:100%}.__va-input input:focus{border-color:var(--va-accent)}.__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{border-bottom:1px solid var(--va-border);display:flex;justify-content:flex-end;margin-bottom:12px;padding-bottom:10px}.__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)}}
+[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/dist/utils/mention.d.ts

@@ -0,0 +1,13 @@
+export interface MentionCandidate {
+    id: string;
+    displayNumber: number;
+    commentPreview: string;
+}
+export declare function createMentionChipHTML(id: string, displayNumber: number): string;
+export declare function createDeletedMentionChipHTML(id: string): string;
+export declare function serializeMentions(el: HTMLElement): string;
+export declare function hydrateMentions(text: string, annotations: {
+    id: string;
+    displayNumber: number;
+}[]): string;
+export declare function extractMentionIds(text: string): string[];

package/dist/utils/mention.mjs

@@ -0,0 +1,46 @@
+const MENTION_REGEX = /@\[(\d+)\]/g;
+export function createMentionChipHTML(id, displayNumber) {
+  return `<span contenteditable="false" class="__va-mention" data-mention-id="${id}">@${displayNumber}</span>`;
+}
+export function createDeletedMentionChipHTML(id) {
+  return `<span contenteditable="false" class="__va-mention __va-mention--deleted" data-mention-id="${id}">@?</span>`;
+}
+export function serializeMentions(el) {
+  let result = "";
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      result += node.textContent || "";
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      if (element.classList.contains("__va-mention") && element.dataset.mentionId) {
+        result += `@[${element.dataset.mentionId}]`;
+      } else if (element.tagName === "BR") {
+        result += "\n";
+      } else {
+        const inner = serializeMentions(element);
+        if (element.tagName === "DIV" && result.length > 0 && !result.endsWith("\n"))
+          result += "\n";
+        result += inner;
+      }
+    }
+  }
+  return result;
+}
+export function hydrateMentions(text, annotations) {
+  const lookup = new Map(annotations.map((a) => [a.id, a.displayNumber]));
+  return escapeHTML(text).replace(
+    /@\[(\d+)\]/g,
+    (_, id) => {
+      const displayNumber = lookup.get(id);
+      if (displayNumber != null)
+        return createMentionChipHTML(id, displayNumber);
+      return createDeletedMentionChipHTML(id);
+    }
+  );
+}
+export function extractMentionIds(text) {
+  return [...new Set(Array.from(text.matchAll(MENTION_REGEX), (m) => m[1]))];
+}
+function escapeHTML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/package.json

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