agentation 2.1.1 → 2.2.0

package/README.md

@@ -34,7 +34,7 @@ The toolbar appears in the bottom-right corner. Click to activate, then click an
 - **Text selection** – Select text to annotate specific content
 - **Multi-select** – Drag to select multiple elements at once
 - **Area selection** – Drag to annotate any region, even empty space
-- **Animation pause** – Freeze CSS animations to capture specific states
+- **Animation pause** – Freeze all animations (CSS, JS, videos) to capture specific states
 - **Structured output** – Copy markdown with selectors, positions, and context
 - **Programmatic access** – Callback prop for direct integration with tools
 - **Dark/light mode** – Toggle in settings, persists to localStorage

package/dist/index.js

@@ -1039,6 +1039,181 @@ var AnimatedBunny = ({
   }
 );
 
+// src/utils/freeze-animations.ts
+var EXCLUDE_ATTRS = [
+  "data-feedback-toolbar",
+  "data-annotation-popup",
+  "data-annotation-marker"
+];
+var NOT_SELECTORS = EXCLUDE_ATTRS.flatMap((a) => [`:not([${a}])`, `:not([${a}] *)`]).join("");
+var STYLE_ID = "feedback-freeze-styles";
+var STATE_KEY = "__agentation_freeze";
+function getState() {
+  if (typeof window === "undefined") {
+    return {
+      frozen: false,
+      installed: true,
+      // prevent patching on server
+      origSetTimeout: setTimeout,
+      origSetInterval: setInterval,
+      origRAF: (cb) => 0,
+      pausedAnimations: [],
+      frozenTimeoutQueue: [],
+      frozenRAFQueue: []
+    };
+  }
+  const w = window;
+  if (!w[STATE_KEY]) {
+    w[STATE_KEY] = {
+      frozen: false,
+      installed: false,
+      origSetTimeout: null,
+      origSetInterval: null,
+      origRAF: null,
+      pausedAnimations: [],
+      frozenTimeoutQueue: [],
+      frozenRAFQueue: []
+    };
+  }
+  return w[STATE_KEY];
+}
+var _s = getState();
+if (typeof window !== "undefined" && !_s.installed) {
+  _s.origSetTimeout = window.setTimeout.bind(window);
+  _s.origSetInterval = window.setInterval.bind(window);
+  _s.origRAF = window.requestAnimationFrame.bind(window);
+  window.setTimeout = (handler, timeout, ...args) => {
+    if (typeof handler === "string") {
+      return _s.origSetTimeout(handler, timeout);
+    }
+    return _s.origSetTimeout(
+      (...a) => {
+        if (_s.frozen) {
+          _s.frozenTimeoutQueue.push(() => handler(...a));
+        } else {
+          handler(...a);
+        }
+      },
+      timeout,
+      ...args
+    );
+  };
+  window.setInterval = (handler, timeout, ...args) => {
+    if (typeof handler === "string") {
+      return _s.origSetInterval(handler, timeout);
+    }
+    return _s.origSetInterval(
+      (...a) => {
+        if (!_s.frozen) handler(...a);
+      },
+      timeout,
+      ...args
+    );
+  };
+  window.requestAnimationFrame = (callback) => {
+    return _s.origRAF((timestamp) => {
+      if (_s.frozen) {
+        _s.frozenRAFQueue.push(callback);
+      } else {
+        callback(timestamp);
+      }
+    });
+  };
+  _s.installed = true;
+}
+var originalSetTimeout = _s.origSetTimeout;
+var originalSetInterval = _s.origSetInterval;
+function isAgentationElement(el) {
+  if (!el) return false;
+  return EXCLUDE_ATTRS.some((attr) => !!el.closest?.(`[${attr}]`));
+}
+function freeze() {
+  if (typeof document === "undefined") return;
+  if (_s.frozen) return;
+  _s.frozen = true;
+  _s.frozenTimeoutQueue = [];
+  _s.frozenRAFQueue = [];
+  let style = document.getElementById(STYLE_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = STYLE_ID;
+  }
+  style.textContent = `
+    *${NOT_SELECTORS},
+    *${NOT_SELECTORS}::before,
+    *${NOT_SELECTORS}::after {
+      animation-play-state: paused !important;
+      transition: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+  _s.pausedAnimations = [];
+  try {
+    document.getAnimations().forEach((anim) => {
+      if (anim.playState !== "running") return;
+      const target = anim.effect?.target;
+      if (!isAgentationElement(target)) {
+        anim.pause();
+        _s.pausedAnimations.push(anim);
+      }
+    });
+  } catch {
+  }
+  document.querySelectorAll("video").forEach((video) => {
+    if (!video.paused) {
+      video.dataset.wasPaused = "false";
+      video.pause();
+    }
+  });
+}
+function unfreeze() {
+  if (typeof document === "undefined") return;
+  if (!_s.frozen) return;
+  _s.frozen = false;
+  const timeoutQueue = _s.frozenTimeoutQueue;
+  _s.frozenTimeoutQueue = [];
+  for (const cb of timeoutQueue) {
+    _s.origSetTimeout(() => {
+      if (_s.frozen) {
+        _s.frozenTimeoutQueue.push(cb);
+        return;
+      }
+      try {
+        cb();
+      } catch (e) {
+        console.warn("[agentation] Error replaying queued timeout:", e);
+      }
+    }, 0);
+  }
+  const rafQueue = _s.frozenRAFQueue;
+  _s.frozenRAFQueue = [];
+  for (const cb of rafQueue) {
+    _s.origRAF((ts) => {
+      if (_s.frozen) {
+        _s.frozenRAFQueue.push(cb);
+        return;
+      }
+      cb(ts);
+    });
+  }
+  for (const anim of _s.pausedAnimations) {
+    try {
+      anim.play();
+    } catch (e) {
+      console.warn("[agentation] Error resuming animation:", e);
+    }
+  }
+  _s.pausedAnimations = [];
+  document.getElementById(STYLE_ID)?.remove();
+  document.querySelectorAll("video").forEach((video) => {
+    if (video.dataset.wasPaused === "false") {
+      video.play().catch(() => {
+      });
+      delete video.dataset.wasPaused;
+    }
+  });
+}
+
 // src/components/annotation-popup-css/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AnnotationPopupCSS = (0, import_react.forwardRef)(
@@ -1065,19 +1240,21 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
     const [isStylesExpanded, setIsStylesExpanded] = (0, import_react.useState)(false);
     const textareaRef = (0, import_react.useRef)(null);
     const popupRef = (0, import_react.useRef)(null);
+    const cancelTimerRef = (0, import_react.useRef)(null);
+    const shakeTimerRef = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
       if (isExiting && animState !== "exit") {
         setAnimState("exit");
       }
     }, [isExiting, animState]);
     (0, import_react.useEffect)(() => {
-      requestAnimationFrame(() => {
+      originalSetTimeout(() => {
         setAnimState("enter");
-      });
-      const enterTimer = setTimeout(() => {
+      }, 0);
+      const enterTimer = originalSetTimeout(() => {
         setAnimState("entered");
       }, 200);
-      const focusTimer = setTimeout(() => {
+      const focusTimer = originalSetTimeout(() => {
         const textarea = textareaRef.current;
         if (textarea) {
           textarea.focus();
@@ -1088,11 +1265,14 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
       return () => {
         clearTimeout(enterTimer);
         clearTimeout(focusTimer);
+        if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current);
+        if (shakeTimerRef.current) clearTimeout(shakeTimerRef.current);
       };
     }, []);
     const shake = (0, import_react.useCallback)(() => {
+      if (shakeTimerRef.current) clearTimeout(shakeTimerRef.current);
       setIsShaking(true);
-      setTimeout(() => {
+      shakeTimerRef.current = originalSetTimeout(() => {
         setIsShaking(false);
         textareaRef.current?.focus();
       }, 250);
@@ -1102,7 +1282,7 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
     }), [shake]);
     const handleCancel = (0, import_react.useCallback)(() => {
       setAnimState("exit");
-      setTimeout(() => {
+      cancelTimerRef.current = originalSetTimeout(() => {
         onCancel();
       }, 150);
     }, [onCancel]);
@@ -1149,7 +1329,7 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
                   const wasExpanded = isStylesExpanded;
                   setIsStylesExpanded(!isStylesExpanded);
                   if (wasExpanded) {
-                    setTimeout(() => textareaRef.current?.focus(), 0);
+                    originalSetTimeout(() => textareaRef.current?.focus(), 0);
                   }
                 },
                 type: "button",
@@ -2484,7 +2664,7 @@ function PageFeedbackToolbarCSS({
         exitTimeoutRef.current = null;
       }
       updatePosition();
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = originalSetTimeout(() => {
         setVisible(true);
       }, 500);
     };
@@ -2495,7 +2675,7 @@ function PageFeedbackToolbarCSS({
         timeoutRef.current = null;
       }
       setVisible(false);
-      exitTimeoutRef.current = setTimeout(() => {
+      exitTimeoutRef.current = originalSetTimeout(() => {
         setShouldRender(false);
       }, 150);
     };
@@ -2519,6 +2699,7 @@ function PageFeedbackToolbarCSS({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
+            "data-feedback-toolbar": true,
             style: {
               position: "fixed",
               top: position.top,
@@ -2588,13 +2769,13 @@ function PageFeedbackToolbarCSS({
     } else {
       setTooltipsHidden(false);
       setSettingsPage("main");
-      const timer = setTimeout(() => setShowSettingsVisible(false), 0);
+      const timer = originalSetTimeout(() => setShowSettingsVisible(false), 0);
       return () => clearTimeout(timer);
     }
   }, [showSettings]);
   (0, import_react2.useEffect)(() => {
     setIsTransitioning(true);
-    const timer = setTimeout(() => setIsTransitioning(false), 350);
+    const timer = originalSetTimeout(() => setIsTransitioning(false), 350);
     return () => clearTimeout(timer);
   }, [settingsPage]);
   const shouldShowMarkers = isActive && showMarkers;
@@ -2603,7 +2784,7 @@ function PageFeedbackToolbarCSS({
       setMarkersExiting(false);
       setMarkersVisible(true);
       setAnimatedMarkers(/* @__PURE__ */ new Set());
-      const timer = setTimeout(() => {
+      const timer = originalSetTimeout(() => {
         setAnimatedMarkers((prev) => {
           const newSet = new Set(prev);
           annotations.forEach((a) => newSet.add(a.id));
@@ -2613,7 +2794,7 @@ function PageFeedbackToolbarCSS({
       return () => clearTimeout(timer);
     } else if (markersVisible) {
       setMarkersExiting(true);
-      const timer = setTimeout(() => {
+      const timer = originalSetTimeout(() => {
         setMarkersVisible(false);
         setMarkersExiting(false);
       }, 250);
@@ -2628,7 +2809,7 @@ function PageFeedbackToolbarCSS({
     if (!hasPlayedEntranceAnimation) {
       setShowEntranceAnimation(true);
       hasPlayedEntranceAnimation = true;
-      setTimeout(() => setShowEntranceAnimation(false), 750);
+      originalSetTimeout(() => setShowEntranceAnimation(false), 750);
     }
     try {
       const storedSettings = localStorage.getItem("feedback-toolbar-settings");
@@ -2844,7 +3025,7 @@ function PageFeedbackToolbarCSS({
       }
     };
     checkHealth();
-    const interval = setInterval(checkHealth, 1e4);
+    const interval = originalSetInterval(checkHealth, 1e4);
     return () => clearInterval(interval);
   }, [endpoint, mounted]);
   (0, import_react2.useEffect)(() => {
@@ -2859,7 +3040,7 @@ function PageFeedbackToolbarCSS({
         if (removedStatuses.includes(event.payload?.status)) {
           const id = event.payload.id;
           setExitingMarkers((prev) => new Set(prev).add(id));
-          setTimeout(() => {
+          originalSetTimeout(() => {
             setAnnotations((prev) => prev.filter((a) => a.id !== id));
             setExitingMarkers((prev) => {
               const next = new Set(prev);
@@ -2941,14 +3122,14 @@ function PageFeedbackToolbarCSS({
     if (annotations.length > 0) return;
     const timeoutIds = [];
     timeoutIds.push(
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setIsActive(true);
       }, demoDelay - 200)
     );
     demoAnnotations.forEach((demo, index) => {
       const annotationDelay = demoDelay + index * 300;
       timeoutIds.push(
-        setTimeout(() => {
+        originalSetTimeout(() => {
           const element = document.querySelector(demo.selector);
           if (!element) return;
           const rect = element.getBoundingClientRect();
@@ -2986,7 +3167,7 @@ function PageFeedbackToolbarCSS({
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current);
       }
-      scrollTimeoutRef.current = setTimeout(() => {
+      scrollTimeoutRef.current = originalSetTimeout(() => {
         setIsScrolling(false);
       }, 150);
     };
@@ -3011,35 +3192,12 @@ function PageFeedbackToolbarCSS({
   }, [annotations, pathname, mounted, currentSessionId]);
   const freezeAnimations = (0, import_react2.useCallback)(() => {
     if (isFrozen) return;
-    const style = document.createElement("style");
-    style.id = "feedback-freeze-styles";
-    style.textContent = `
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *),
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::before,
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::after {
-        animation-play-state: paused !important;
-        transition: none !important;
-      }
-    `;
-    document.head.appendChild(style);
-    document.querySelectorAll("video").forEach((video) => {
-      if (!video.paused) {
-        video.dataset.wasPaused = "false";
-        video.pause();
-      }
-    });
+    freeze();
     setIsFrozen(true);
   }, [isFrozen]);
   const unfreezeAnimations = (0, import_react2.useCallback)(() => {
     if (!isFrozen) return;
-    const style = document.getElementById("feedback-freeze-styles");
-    if (style) style.remove();
-    document.querySelectorAll("video").forEach((video) => {
-      if (video.dataset.wasPaused === "false") {
-        video.play();
-        delete video.dataset.wasPaused;
-      }
-    });
+    unfreeze();
     setIsFrozen(false);
   }, [isFrozen]);
   const toggleFreeze = (0, import_react2.useCallback)(() => {
@@ -3148,6 +3306,11 @@ function PageFeedbackToolbarCSS({
       }
     }
   }, [isActive, isFrozen, unfreezeAnimations]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      unfreeze();
+    };
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (!isActive) return;
     const style = document.createElement("style");
@@ -3733,16 +3896,16 @@ function PageFeedbackToolbarCSS({
       };
       setAnnotations((prev) => [...prev, newAnnotation]);
       recentlyAddedIdRef.current = newAnnotation.id;
-      setTimeout(() => {
+      originalSetTimeout(() => {
         recentlyAddedIdRef.current = null;
       }, 300);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setAnimatedMarkers((prev) => new Set(prev).add(newAnnotation.id));
       }, 250);
       onAnnotationAdd?.(newAnnotation);
       fireWebhook("annotation.add", { annotation: newAnnotation });
       setPendingExiting(true);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setPendingAnnotation(null);
         setPendingExiting(false);
       }, 150);
@@ -3777,7 +3940,7 @@ function PageFeedbackToolbarCSS({
   );
   const cancelAnnotation = (0, import_react2.useCallback)(() => {
     setPendingExiting(true);
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setPendingAnnotation(null);
       setPendingExiting(false);
     }, 150);
@@ -3788,7 +3951,7 @@ function PageFeedbackToolbarCSS({
       const deletedAnnotation = annotations[deletedIndex];
       if (editingAnnotation?.id === id) {
         setEditExiting(true);
-        setTimeout(() => {
+        originalSetTimeout(() => {
           setEditingAnnotation(null);
           setEditingTargetElement(null);
           setEditingTargetElements([]);
@@ -3809,7 +3972,7 @@ function PageFeedbackToolbarCSS({
           );
         });
       }
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setAnnotations((prev) => prev.filter((a) => a.id !== id));
         setExitingMarkers((prev) => {
           const next = new Set(prev);
@@ -3819,7 +3982,7 @@ function PageFeedbackToolbarCSS({
         setDeletingMarkerId(null);
         if (deletedIndex < annotations.length - 1) {
           setRenumberFrom(deletedIndex);
-          setTimeout(() => setRenumberFrom(null), 200);
+          originalSetTimeout(() => setRenumberFrom(null), 200);
         }
       }, 150);
     },
@@ -3932,7 +4095,7 @@ function PageFeedbackToolbarCSS({
         });
       }
       setEditExiting(true);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setEditingAnnotation(null);
         setEditingTargetElement(null);
         setEditingTargetElements([]);
@@ -3943,7 +4106,7 @@ function PageFeedbackToolbarCSS({
   );
   const cancelEditAnnotation = (0, import_react2.useCallback)(() => {
     setEditExiting(true);
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setEditingAnnotation(null);
       setEditingTargetElement(null);
       setEditingTargetElements([]);
@@ -3970,13 +4133,13 @@ function PageFeedbackToolbarCSS({
     setIsClearing(true);
     setCleared(true);
     const totalAnimationTime = count * 30 + 200;
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setAnnotations([]);
       setAnimatedMarkers(/* @__PURE__ */ new Set());
       localStorage.removeItem(getStorageKey(pathname));
       setIsClearing(false);
     }, totalAnimationTime);
-    setTimeout(() => setCleared(false), 1500);
+    originalSetTimeout(() => setCleared(false), 1500);
   }, [pathname, annotations, onAnnotationsClear, fireWebhook, endpoint]);
   const copyOutput = (0, import_react2.useCallback)(async () => {
     const displayUrl = typeof window !== "undefined" ? window.location.pathname + window.location.search + window.location.hash : pathname;
@@ -3995,9 +4158,9 @@ function PageFeedbackToolbarCSS({
     }
     onCopy?.(output);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
+    originalSetTimeout(() => setCopied(false), 2e3);
     if (settings.autoClearAfterCopy) {
-      setTimeout(() => clearAll(), 500);
+      originalSetTimeout(() => clearAll(), 500);
     }
   }, [
     annotations,
@@ -4022,12 +4185,12 @@ function PageFeedbackToolbarCSS({
       onSubmit(output, annotations);
     }
     setSendState("sending");
-    await new Promise((resolve) => setTimeout(resolve, 150));
+    await new Promise((resolve) => originalSetTimeout(resolve, 150));
     const success = await fireWebhook("submit", { output, annotations }, true);
     setSendState(success ? "sent" : "failed");
-    setTimeout(() => setSendState("idle"), 2500);
+    originalSetTimeout(() => setSendState("idle"), 2500);
     if (success && settings.autoClearAfterCopy) {
-      setTimeout(() => clearAll(), 500);
+      originalSetTimeout(() => clearAll(), 500);
     }
   }, [
     onSubmit,
@@ -4502,7 +4665,7 @@ function PageFeedbackToolbarCSS({
                                   ] }),
                                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsVersion, children: [
                                     "v",
-                                    "2.1.1"
+                                    "2.2.0"
                                   ] }),
                                   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                                     "button",