saccade 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -2,12 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-type LapsePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type LapseProps = {
+type SaccadePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type SaccadeProps = {
     /** Panel position. Default: 'bottom-left' */
-    position?: LapsePosition;
+    position?: SaccadePosition;
 };
-declare function Lapse({ position }: LapseProps): react_jsx_runtime.JSX.Element;
+declare function Saccade({ position }: SaccadeProps): react_jsx_runtime.JSX.Element;
 
 type ExportFilter = 'active' | 'all-animations' | 'all-elements';
 type OutputDetailLevel = 'compact' | 'standard' | 'detailed' | 'forensic';
@@ -98,15 +98,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;
@@ -121,13 +121,13 @@ declare class LapseEngine {
     destroy(): void;
 }
 
-declare function LapseProvider({ children }: {
+declare function SaccadeProvider({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function useLapseEngine(): LapseEngine;
+declare function useSaccadeEngine(): SaccadeEngine;
 
 declare function useTimeline(): {
-    state: LapseState;
+    state: SaccadeState;
     capture: TimelineCapture | null;
     scrubTime: number;
     copied: boolean;
@@ -149,4 +149,4 @@ declare function useSpeed(): {
     togglePause: () => void;
 };
 
-export { type AnimationInfo, type ExportFilter, type FrameSnapshot, Lapse, LapseEngine, type LapsePosition, type LapseProps, LapseProvider, type LapseState, type OutputDetailLevel, type Rect, type TimelineCapture, type TimelineExport, useLapseEngine, useSpeed, useTimeline };
+export { type AnimationInfo, type ExportFilter, type FrameSnapshot, type OutputDetailLevel, type Rect, Saccade, SaccadeEngine, type SaccadePosition, type SaccadeProps, SaccadeProvider, type SaccadeState, type TimelineCapture, type TimelineExport, useSaccadeEngine, useSpeed, useTimeline };

package/dist/index.d.ts

@@ -2,12 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-type LapsePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type LapseProps = {
+type SaccadePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type SaccadeProps = {
     /** Panel position. Default: 'bottom-left' */
-    position?: LapsePosition;
+    position?: SaccadePosition;
 };
-declare function Lapse({ position }: LapseProps): react_jsx_runtime.JSX.Element;
+declare function Saccade({ position }: SaccadeProps): react_jsx_runtime.JSX.Element;
 
 type ExportFilter = 'active' | 'all-animations' | 'all-elements';
 type OutputDetailLevel = 'compact' | 'standard' | 'detailed' | 'forensic';
@@ -98,15 +98,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;
@@ -121,13 +121,13 @@ declare class LapseEngine {
     destroy(): void;
 }
 
-declare function LapseProvider({ children }: {
+declare function SaccadeProvider({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function useLapseEngine(): LapseEngine;
+declare function useSaccadeEngine(): SaccadeEngine;
 
 declare function useTimeline(): {
-    state: LapseState;
+    state: SaccadeState;
     capture: TimelineCapture | null;
     scrubTime: number;
     copied: boolean;
@@ -149,4 +149,4 @@ declare function useSpeed(): {
     togglePause: () => void;
 };
 
-export { type AnimationInfo, type ExportFilter, type FrameSnapshot, Lapse, LapseEngine, type LapsePosition, type LapseProps, LapseProvider, type LapseState, type OutputDetailLevel, type Rect, type TimelineCapture, type TimelineExport, useLapseEngine, useSpeed, useTimeline };
+export { type AnimationInfo, type ExportFilter, type FrameSnapshot, type OutputDetailLevel, type Rect, Saccade, SaccadeEngine, type SaccadePosition, type SaccadeProps, SaccadeProvider, type SaccadeState, type TimelineCapture, type TimelineExport, useSaccadeEngine, useSpeed, useTimeline };

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 
-// src/react/Lapse.tsx
+// src/react/Saccade.tsx
 import { useRef as useRef6, useState as useState4, useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
 
-// src/react/LapseContext.tsx
+// src/react/SaccadeContext.tsx
 import { createContext, useContext, useRef } from "react";
 
 // src/core/timing.ts
@@ -1013,11 +1013,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; }";
@@ -1029,64 +1030,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) {
@@ -1599,7 +1597,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();
@@ -1641,7 +1639,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,
@@ -1701,23 +1717,23 @@ var LapseEngine = class {
   }
 };
 
-// src/react/LapseContext.tsx
+// src/react/SaccadeContext.tsx
 import { jsx } from "react/jsx-runtime";
-var LapseContext = createContext(null);
-function LapseProvider({ children }) {
+var SaccadeContext = createContext(null);
+function SaccadeProvider({ children }) {
   const engineRef = useRef(null);
   if (!engineRef.current) {
-    engineRef.current = new LapseEngine();
+    engineRef.current = new SaccadeEngine();
   }
-  return /* @__PURE__ */ jsx(LapseContext.Provider, { value: engineRef.current, children });
+  return /* @__PURE__ */ jsx(SaccadeContext.Provider, { value: engineRef.current, children });
 }
-function useLapseEngine() {
-  const engine = useContext(LapseContext);
-  if (!engine) throw new Error("useLapseEngine must be used within <LapseProvider>");
+function useSaccadeEngine() {
+  const engine = useContext(SaccadeContext);
+  if (!engine) throw new Error("useSaccadeEngine must be used within <SaccadeProvider>");
   return engine;
 }
 
-// src/react/LapsePanel.tsx
+// src/react/SaccadePanel.tsx
 import { useRef as useRef5, useCallback as useCallback5 } from "react";
 
 // src/react/Timeline.tsx
@@ -2111,7 +2127,7 @@ function SpeedControl({ speed, isPaused, onSetSpeed, onTogglePause }) {
 import { useState as useState2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef4, useSyncExternalStore } from "react";
 var DETAIL_LEVELS = ["compact", "standard", "detailed", "forensic"];
 function useTimeline() {
-  const engine = useLapseEngine();
+  const engine = useSaccadeEngine();
   const state = useSyncExternalStore(
     (cb) => engine.subscribe(cb),
     () => engine.state
@@ -2145,9 +2161,13 @@ function useTimeline() {
     [engine]
   );
   const stopRecording = useCallback3(() => {
-    const result = engine.stopRecording();
-    setCapture(result);
-    setScrubTime(0);
+    try {
+      const result = engine.stopRecording();
+      setCapture(result);
+      setScrubTime(0);
+    } catch (e) {
+      console.error("[Saccade] stopRecording failed:", e);
+    }
   }, [engine]);
   const seek = useCallback3(
     (timeMs) => {
@@ -2216,7 +2236,7 @@ function useTimeline() {
 // src/react/useSpeed.ts
 import { useState as useState3, useCallback as useCallback4, useEffect as useEffect3 } from "react";
 function useSpeed() {
-  const engine = useLapseEngine();
+  const engine = useSaccadeEngine();
   const [speed, setSpeedState] = useState3(1);
   const [previousSpeed, setPreviousSpeed] = useState3(1);
   const [isPaused, setIsPaused] = useState3(false);
@@ -2279,9 +2299,9 @@ function useSpeed() {
   return { speed, isPaused, setSpeed, togglePause };
 }
 
-// src/react/LapsePanel.tsx
+// src/react/SaccadePanel.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function LapsePanel() {
+function SaccadePanel() {
   const timeline = useTimeline();
   const { speed, isPaused, setSpeed, togglePause } = useSpeed();
   const panelRef = useRef5(null);
@@ -2741,9 +2761,9 @@ var PANEL_STYLES = (
 `
 );
 
-// src/react/Lapse.tsx
+// src/react/Saccade.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-function Lapse({ position = "bottom-left" }) {
+function Saccade({ position = "bottom-left" }) {
   const hostRef = useRef6(null);
   const [shadowRoot, setShadowRoot] = useState4(null);
   useEffect4(() => {
@@ -2774,17 +2794,17 @@ function Lapse({ position = "bottom-left" }) {
         ...positionOffset
       },
       children: shadowRoot && createPortal(
-        /* @__PURE__ */ jsx5(LapseProvider, { children: /* @__PURE__ */ jsx5(LapsePanel, {}) }),
+        /* @__PURE__ */ jsx5(SaccadeProvider, { children: /* @__PURE__ */ jsx5(SaccadePanel, {}) }),
         shadowRoot.lastElementChild || shadowRoot
       )
     }
   );
 }
 export {
-  Lapse,
-  LapseEngine,
-  LapseProvider,
-  useLapseEngine,
+  Saccade,
+  SaccadeEngine,
+  SaccadeProvider,
+  useSaccadeEngine,
   useSpeed,
   useTimeline
 };