saccade 0.0.1 → 0.0.3

package/README.md

@@ -13,13 +13,13 @@ npm install saccade -D
 ## Usage
 
 ```tsx
-import { Lapse } from 'saccade'
+import { Saccade } from 'saccade'
 
 function App() {
   return (
     <>
       <YourApp />
-      <Lapse />
+      <Saccade />
     </>
   )
 }
@@ -51,9 +51,9 @@ Saccade patches timing APIs (`setTimeout`, `setInterval`, `requestAnimationFrame
 For non-React usage or programmatic control:
 
 ```ts
-import { LapseEngine } from 'saccade/core'
+import { SaccadeEngine } from 'saccade/core'
 
-const engine = new LapseEngine()
+const engine = new SaccadeEngine()
 
 // Speed control
 engine.setSpeed(0.25) // quarter speed
@@ -77,7 +77,7 @@ engine.destroy()
 ## React Hooks
 
 ```tsx
-import { LapseProvider, useLapseEngine, useTimeline, useSpeed } from 'saccade'
+import { SaccadeProvider, useSaccadeEngine, useTimeline, useSpeed } from 'saccade'
 ```
 
 ### `useSpeed`
@@ -127,7 +127,7 @@ import type {
 
 ## Requirements
 
-- React 18+ (for the `<Lapse>` component)
+- React 18+ (for the `<Saccade>` component)
 - No React dependency needed for `saccade/core`
 
 ## License

package/dist/core.cjs

@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/core/index.ts
 var core_exports = {};
 __export(core_exports, {
-  LapseEngine: () => LapseEngine,
+  SaccadeEngine: () => SaccadeEngine,
   TimelineRecorder: () => TimelineRecorder,
   TimelineScrubber: () => TimelineScrubber,
   TimingController: () => TimingController,
@@ -1036,11 +1036,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; }";
@@ -1052,64 +1053,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) {
@@ -1622,7 +1620,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();
@@ -1664,7 +1662,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,
@@ -1725,7 +1741,7 @@ var LapseEngine = class {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LapseEngine,
+  SaccadeEngine,
   TimelineRecorder,
   TimelineScrubber,
   TimingController,