saccade 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -21,20 +21,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Lapse: () => Lapse,
-  LapseEngine: () => LapseEngine,
-  LapseProvider: () => LapseProvider,
-  useLapseEngine: () => useLapseEngine,
+  Saccade: () => Saccade,
+  SaccadeEngine: () => SaccadeEngine,
+  SaccadeProvider: () => SaccadeProvider,
+  useSaccadeEngine: () => useSaccadeEngine,
   useSpeed: () => useSpeed,
   useTimeline: () => useTimeline
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/react/Lapse.tsx
+// src/react/Saccade.tsx
 var import_react7 = require("react");
 var import_react_dom = require("react-dom");
 
-// src/react/LapseContext.tsx
+// src/react/SaccadeContext.tsx
 var import_react = require("react");
 
 // src/core/timing.ts
@@ -1043,11 +1043,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; }";
@@ -1059,64 +1060,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) {
@@ -1629,7 +1627,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();
@@ -1671,7 +1669,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,
@@ -1731,23 +1747,23 @@ var LapseEngine = class {
   }
 };
 
-// src/react/LapseContext.tsx
+// src/react/SaccadeContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var LapseContext = (0, import_react.createContext)(null);
-function LapseProvider({ children }) {
+var SaccadeContext = (0, import_react.createContext)(null);
+function SaccadeProvider({ children }) {
   const engineRef = (0, import_react.useRef)(null);
   if (!engineRef.current) {
-    engineRef.current = new LapseEngine();
+    engineRef.current = new SaccadeEngine();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LapseContext.Provider, { value: engineRef.current, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaccadeContext.Provider, { value: engineRef.current, children });
 }
-function useLapseEngine() {
-  const engine = (0, import_react.useContext)(LapseContext);
-  if (!engine) throw new Error("useLapseEngine must be used within <LapseProvider>");
+function useSaccadeEngine() {
+  const engine = (0, import_react.useContext)(SaccadeContext);
+  if (!engine) throw new Error("useSaccadeEngine must be used within <SaccadeProvider>");
   return engine;
 }
 
-// src/react/LapsePanel.tsx
+// src/react/SaccadePanel.tsx
 var import_react6 = require("react");
 
 // src/react/Timeline.tsx
@@ -2141,7 +2157,7 @@ function SpeedControl({ speed, isPaused, onSetSpeed, onTogglePause }) {
 var import_react4 = require("react");
 var DETAIL_LEVELS = ["compact", "standard", "detailed", "forensic"];
 function useTimeline() {
-  const engine = useLapseEngine();
+  const engine = useSaccadeEngine();
   const state = (0, import_react4.useSyncExternalStore)(
     (cb) => engine.subscribe(cb),
     () => engine.state
@@ -2175,9 +2191,13 @@ function useTimeline() {
     [engine]
   );
   const stopRecording = (0, import_react4.useCallback)(() => {
-    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 = (0, import_react4.useCallback)(
     (timeMs) => {
@@ -2246,7 +2266,7 @@ function useTimeline() {
 // src/react/useSpeed.ts
 var import_react5 = require("react");
 function useSpeed() {
-  const engine = useLapseEngine();
+  const engine = useSaccadeEngine();
   const [speed, setSpeedState] = (0, import_react5.useState)(1);
   const [previousSpeed, setPreviousSpeed] = (0, import_react5.useState)(1);
   const [isPaused, setIsPaused] = (0, import_react5.useState)(false);
@@ -2309,9 +2329,9 @@ function useSpeed() {
   return { speed, isPaused, setSpeed, togglePause };
 }
 
-// src/react/LapsePanel.tsx
+// src/react/SaccadePanel.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function LapsePanel() {
+function SaccadePanel() {
   const timeline = useTimeline();
   const { speed, isPaused, setSpeed, togglePause } = useSpeed();
   const panelRef = (0, import_react6.useRef)(null);
@@ -2771,9 +2791,9 @@ var PANEL_STYLES = (
 `
 );
 
-// src/react/Lapse.tsx
+// src/react/Saccade.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Lapse({ position = "bottom-left" }) {
+function Saccade({ position = "bottom-left" }) {
   const hostRef = (0, import_react7.useRef)(null);
   const [shadowRoot, setShadowRoot] = (0, import_react7.useState)(null);
   (0, import_react7.useEffect)(() => {
@@ -2804,7 +2824,7 @@ function Lapse({ position = "bottom-left" }) {
         ...positionOffset
       },
       children: shadowRoot && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LapseProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LapsePanel, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SaccadeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SaccadePanel, {}) }),
         shadowRoot.lastElementChild || shadowRoot
       )
     }
@@ -2812,10 +2832,10 @@ function Lapse({ position = "bottom-left" }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Lapse,
-  LapseEngine,
-  LapseProvider,
-  useLapseEngine,
+  Saccade,
+  SaccadeEngine,
+  SaccadeProvider,
+  useSaccadeEngine,
   useSpeed,
   useTimeline
 });