saccade 0.0.1 → 0.0.3

package/dist/core.d.cts

@@ -87,15 +87,15 @@ type TimelineExport = {
     }[];
 };
 
-type LapseState = 'idle' | 'recording' | 'scrubbing';
-declare class LapseEngine {
+type SaccadeState = 'idle' | 'recording' | 'scrubbing';
+declare class SaccadeEngine {
     private timing;
     private recorder;
     private scrubber;
     private capture;
     private _state;
     private listeners;
-    get state(): LapseState;
+    get state(): SaccadeState;
     getCapture(): TimelineCapture | null;
     setSpeed(speed: number): void;
     getSpeed(): number;
@@ -273,4 +273,4 @@ declare function getFrameAtTime(frames: FrameSnapshot[], timeMs: number): FrameS
 declare function generateExport(animations: AnimationInfo[], frames: FrameSnapshot[], timeMs: number, filter?: ExportFilter): TimelineExport;
 declare function formatExportForLLM(exp: TimelineExport, detail?: OutputDetailLevel): string;
 
-export { type AnimationInfo, type ElementSnapshot, type ExportFilter, type FrameAnimation, type FrameSnapshot, type InterceptedAnimation, LapseEngine, type LapseState, type OutputDetailLevel, type PropertySnapshot, type Rect, type ScrubberState, type TimelineCapture, type TimelineExport, TimelineRecorder, TimelineScrubber, TimingController, formatExportForLLM, generateExport, getFrameAtTime };
+export { type AnimationInfo, type ElementSnapshot, type ExportFilter, type FrameAnimation, type FrameSnapshot, type InterceptedAnimation, type OutputDetailLevel, type PropertySnapshot, type Rect, SaccadeEngine, type SaccadeState, type ScrubberState, type TimelineCapture, type TimelineExport, TimelineRecorder, TimelineScrubber, TimingController, formatExportForLLM, generateExport, getFrameAtTime };

package/dist/core.d.ts

@@ -87,15 +87,15 @@ type TimelineExport = {
     }[];
 };
 
-type LapseState = 'idle' | 'recording' | 'scrubbing';
-declare class LapseEngine {
+type SaccadeState = 'idle' | 'recording' | 'scrubbing';
+declare class SaccadeEngine {
     private timing;
     private recorder;
     private scrubber;
     private capture;
     private _state;
     private listeners;
-    get state(): LapseState;
+    get state(): SaccadeState;
     getCapture(): TimelineCapture | null;
     setSpeed(speed: number): void;
     getSpeed(): number;
@@ -273,4 +273,4 @@ declare function getFrameAtTime(frames: FrameSnapshot[], timeMs: number): FrameS
 declare function generateExport(animations: AnimationInfo[], frames: FrameSnapshot[], timeMs: number, filter?: ExportFilter): TimelineExport;
 declare function formatExportForLLM(exp: TimelineExport, detail?: OutputDetailLevel): string;
 
-export { type AnimationInfo, type ElementSnapshot, type ExportFilter, type FrameAnimation, type FrameSnapshot, type InterceptedAnimation, LapseEngine, type LapseState, type OutputDetailLevel, type PropertySnapshot, type Rect, type ScrubberState, type TimelineCapture, type TimelineExport, TimelineRecorder, TimelineScrubber, TimingController, formatExportForLLM, generateExport, getFrameAtTime };
+export { type AnimationInfo, type ElementSnapshot, type ExportFilter, type FrameAnimation, type FrameSnapshot, type InterceptedAnimation, type OutputDetailLevel, type PropertySnapshot, type Rect, SaccadeEngine, type SaccadeState, type ScrubberState, type TimelineCapture, type TimelineExport, TimelineRecorder, TimelineScrubber, TimingController, formatExportForLLM, generateExport, getFrameAtTime };

package/dist/core.mjs

@@ -1004,11 +1004,12 @@ var _TimelineRecorder = class _TimelineRecorder {
       document.removeEventListener("pointerup", this.onPointerUp, true);
     try {
       for (const anim of document.getAnimations()) {
+        const target = anim.effect?.target;
+        if (target?.closest?.("[data-lapse-panel]")) continue;
         anim.cancel();
       }
     } catch (_) {
     }
-    window.requestAnimationFrame = () => 0;
     const noTransitions = document.createElement("style");
     noTransitions.id = "__lapse-no-transitions";
     noTransitions.textContent = "*, *::before, *::after { transition: none !important; animation: none !important; }";
@@ -1020,64 +1021,61 @@ var _TimelineRecorder = class _TimelineRecorder {
     blocker.title = "Clear the timeline to interact with the page";
     document.body.appendChild(blocker);
     this.blockerEl = blocker;
-    try {
-      const lapseStyle = document.createElement("style");
-      lapseStyle.id = "__lapse-state-rules";
-      let allCss = "";
-      for (const style of document.querySelectorAll("style")) {
-        if (style.id === "__lapse-state-rules") continue;
-        allCss += style.textContent + "\n";
-      }
-      for (const sheet of document.styleSheets) {
-        try {
-          let walk2 = function(rules) {
-            for (const rule of rules) {
-              if (rule.cssRules) {
-                walk2(rule.cssRules);
-                continue;
-              }
-              const t = rule.cssText;
-              if (t && (t.includes(":hover") || t.includes(":focus"))) {
-                allCss += t + "\n";
+    setTimeout(() => {
+      try {
+        const lapseStyle = document.createElement("style");
+        lapseStyle.id = "__lapse-state-rules";
+        const hoverFocusRules = [];
+        for (const sheet of document.styleSheets) {
+          try {
+            const walk = (rules) => {
+              for (const rule of rules) {
+                if (rule.cssRules) {
+                  walk(rule.cssRules);
+                  continue;
+                }
+                const t = rule.cssText;
+                if (t && (t.includes(":hover") || t.includes(":focus"))) {
+                  hoverFocusRules.push(t);
+                }
               }
-            }
-          };
-          var walk = walk2;
-          walk2(sheet.cssRules);
-        } catch (_) {
-        }
-      }
-      const stateRegex = /([^{}]*(?::hover|:focus-visible|:focus-within|:focus(?!-))[^{}]*)\{([^{}]*)\}/g;
-      let match;
-      while ((match = stateRegex.exec(allCss)) !== null) {
-        const selector = match[1].trim();
-        const body = match[2].trim();
-        if (!body) continue;
-        const newBody = body.replace(
-          /([^;:]+):\s*([^;]+)(;|$)/g,
-          (m, prop, val, end) => {
-            if (val.includes("!important")) return m;
-            return prop + ": " + val.trim() + " !important" + end;
+            };
+            walk(sheet.cssRules);
+          } catch (_) {
           }
-        );
-        if (selector.includes(":hover")) {
-          lapseStyle.textContent += selector.replace(/:hover/g, "[data-lapse-hover]") + " { " + newBody + " }\n";
         }
-        if (selector.includes(":focus-visible")) {
-          lapseStyle.textContent += selector.replace(/:focus-visible/g, "[data-lapse-focus]") + " { " + newBody + " }\n";
-        } else if (selector.includes(":focus-within")) {
-          lapseStyle.textContent += selector.replace(
-            /:focus-within/g,
-            ":has([data-lapse-focus])"
-          ) + " { " + newBody + " }\n";
-        } else if (selector.includes(":focus")) {
-          lapseStyle.textContent += selector.replace(/:focus(?!-)/g, "[data-lapse-focus]") + " { " + newBody + " }\n";
+        const parts = [];
+        for (const ruleText of hoverFocusRules) {
+          const braceIdx = ruleText.indexOf("{");
+          if (braceIdx === -1) continue;
+          const selector = ruleText.slice(0, braceIdx).trim();
+          const bodyEnd = ruleText.lastIndexOf("}");
+          const body = ruleText.slice(braceIdx + 1, bodyEnd).trim();
+          if (!body) continue;
+          const newBody = body.replace(
+            /([^;:]+):\s*([^;]+)(;|$)/g,
+            (m, prop, val, end) => {
+              if (val.includes("!important")) return m;
+              return prop + ": " + val.trim() + " !important" + end;
+            }
+          );
+          if (selector.includes(":hover")) {
+            parts.push(selector.replace(/:hover/g, "[data-lapse-hover]") + " { " + newBody + " }");
+          }
+          if (selector.includes(":focus-visible")) {
+            parts.push(selector.replace(/:focus-visible/g, "[data-lapse-focus]") + " { " + newBody + " }");
+          } else if (selector.includes(":focus-within")) {
+            parts.push(selector.replace(/:focus-within/g, ":has([data-lapse-focus])") + " { " + newBody + " }");
+          } else if (selector.includes(":focus")) {
+            parts.push(selector.replace(/:focus(?!-)/g, "[data-lapse-focus]") + " { " + newBody + " }");
+          }
         }
+        lapseStyle.textContent = parts.join("\n");
+        document.head.appendChild(lapseStyle);
+        this.lapseStyleEl = lapseStyle;
+      } catch (_) {
       }
-      document.head.appendChild(lapseStyle);
-      this.lapseStyleEl = lapseStyle;
-    } catch (_) {
-    }
+    }, 0);
     if (this.frames.length > 0) {
       const frame0 = this.frames[0];
       if (frame0.elementSnapshots) {
@@ -1590,7 +1588,7 @@ function formatExportForLLM(exp, detail = "standard") {
 }
 
 // src/core/engine.ts
-var LapseEngine = class {
+var SaccadeEngine = class {
   constructor() {
     this.timing = new TimingController();
     this.recorder = new TimelineRecorder();
@@ -1632,7 +1630,25 @@ var LapseEngine = class {
         boundingBox: null
       };
     }
-    const capture = this.recorder.stopRecording();
+    let capture;
+    try {
+      capture = this.recorder.stopRecording();
+    } catch (e) {
+      console.error("[Saccade] stopRecording failed:", e);
+      document.getElementById("__lapse-scrub-blocker")?.remove();
+      document.getElementById("__lapse-no-transitions")?.remove();
+      document.getElementById("__lapse-state-rules")?.remove();
+      this._state = "idle";
+      this.notify();
+      return {
+        startTime: 0,
+        endTime: 0,
+        duration: 0,
+        animations: [],
+        frames: [],
+        boundingBox: null
+      };
+    }
     this.capture = capture;
     const scrubberState = {
       elements: this.recorder.elements,
@@ -1692,7 +1708,7 @@ var LapseEngine = class {
   }
 };
 export {
-  LapseEngine,
+  SaccadeEngine,
   TimelineRecorder,
   TimelineScrubber,
   TimingController,