saccade 0.0.3 → 0.2.0

package/dist/install.mjs

@@ -0,0 +1,1819 @@
+// src/core/timing.ts
+var MEDIA_RATE_MIN = 0.0625;
+var MEDIA_RATE_MAX = 16;
+var ZERO_SPEED_DIVISOR = 1e-4;
+var TimingController = class {
+  constructor() {
+    this.speed = 1;
+    this.virtualBaseline = 0;
+    this.intervalMap = /* @__PURE__ */ new Map();
+    this.nextIntervalId = 1e6;
+    this._origAnimate = null;
+    this.installed = false;
+    this.animPollId = 0;
+    this.gsapInstance = null;
+    // WeakMap tracking for animations and media
+    this.trackedAnims = /* @__PURE__ */ new WeakMap();
+    this.trackedMedia = /* @__PURE__ */ new WeakMap();
+    this._raf = requestAnimationFrame.bind(window);
+    this._caf = cancelAnimationFrame.bind(window);
+    this._setTimeout = setTimeout.bind(window);
+    this._clearTimeout = clearTimeout.bind(window);
+    this._setInterval = setInterval.bind(window);
+    this._clearInterval = clearInterval.bind(window);
+    this._perfNow = performance.now.bind(performance);
+    this._dateNow = Date.now;
+    this.realBaseline = this._perfNow();
+    this.dateRealBaseline = this._dateNow();
+    this.dateVirtualBaseline = this.dateRealBaseline;
+  }
+  getVirtualTime() {
+    const realElapsed = this._perfNow() - this.realBaseline;
+    return this.virtualBaseline + realElapsed * this.speed;
+  }
+  getVirtualDateNow() {
+    const realElapsed = this._dateNow() - this.dateRealBaseline;
+    return this.dateVirtualBaseline + realElapsed * this.speed;
+  }
+  reanchor() {
+    const virtualNow = this.getVirtualTime();
+    this.realBaseline = this._perfNow();
+    this.virtualBaseline = virtualNow;
+    const virtualDateNow = this.getVirtualDateNow();
+    this.dateRealBaseline = this._dateNow();
+    this.dateVirtualBaseline = virtualDateNow;
+  }
+  /** Effective speed divisor — avoids division by zero at speed=0. */
+  get speedDivisor() {
+    return this.speed || ZERO_SPEED_DIVISOR;
+  }
+  /** Install timing patches. Safe to call multiple times. */
+  install() {
+    if (this.installed) return;
+    if (window.__saccadeInstalled) return;
+    window.__saccadeInstalled = true;
+    this.installed = true;
+    const self = this;
+    window.__LAPSE_ORIGINAL_RAF__ = this._raf;
+    const origAnimate = Element.prototype.animate;
+    this._origAnimate = origAnimate;
+    Element.prototype.animate = function(...args) {
+      const anim = origAnimate.apply(this, args);
+      if (self.speed !== 1) {
+        const originalRate = anim.playbackRate;
+        const applied = originalRate * (self.speed || 1e-3);
+        anim.playbackRate = applied;
+        self.trackedAnims.set(anim, { original: originalRate, applied });
+      }
+      return anim;
+    };
+    performance.now = () => self.getVirtualTime();
+    Date.now = () => self.getVirtualDateNow();
+    window.requestAnimationFrame = (callback) => {
+      return self._raf(() => {
+        if (self.speed === 0) {
+          window.requestAnimationFrame(callback);
+          return;
+        }
+        callback(self.getVirtualTime());
+      });
+    };
+    window.cancelAnimationFrame = this._caf;
+    window.setTimeout = ((handler, delay, ...args) => {
+      const scaledDelay = (delay ?? 0) / self.speedDivisor;
+      return self._setTimeout(handler, scaledDelay, ...args);
+    });
+    window.clearTimeout = this._clearTimeout;
+    window.setInterval = ((handler, delay, ...args) => {
+      const id = self.nextIntervalId++;
+      const baseDelay = delay ?? 0;
+      function tick() {
+        const scaledDelay = baseDelay / self.speedDivisor;
+        const realId = self._setTimeout(() => {
+          if (typeof handler === "function") {
+            ;
+            handler(...args);
+          }
+          if (self.intervalMap.has(id)) tick();
+        }, scaledDelay);
+        const entry = self.intervalMap.get(id);
+        if (entry) entry.realId = realId;
+      }
+      self.intervalMap.set(id, { handler, delay: baseDelay, realId: 0 });
+      tick();
+      return id;
+    });
+    window.clearInterval = ((id) => {
+      if (id == null) return;
+      const entry = self.intervalMap.get(id);
+      if (entry) {
+        self._clearTimeout(entry.realId);
+        self.intervalMap.delete(id);
+      } else {
+        self._clearInterval(id);
+      }
+    });
+    this.startAnimationPoll();
+  }
+  /** Set playback speed. Requires install() first. */
+  setSpeed(newSpeed) {
+    if (!this.installed) this.install();
+    this.reanchor();
+    this.speed = newSpeed;
+    this.patchAnimations();
+    this.patchMedia();
+    this.patchGSAP();
+  }
+  getSpeed() {
+    return this.speed;
+  }
+  // ---------------------------------------------------------------------------
+  // Animation polling — per-frame via original rAF
+  // ---------------------------------------------------------------------------
+  startAnimationPoll() {
+    const poll = () => {
+      if (!this.installed) return;
+      this.patchAnimations();
+      this.patchMedia();
+      this.animPollId = this._raf(poll);
+    };
+    this.animPollId = this._raf(poll);
+  }
+  /** Patch playbackRate on all active animations via WAAPI. */
+  patchAnimations() {
+    try {
+      const anims = document.getAnimations();
+      for (const anim of anims) {
+        const target = anim.effect?.target;
+        if (target?.closest?.("[data-lapse-panel]")) continue;
+        if (target?.closest?.("[data-saccade-exclude]")) continue;
+        const effectiveSpeed = this.speed || 1e-3;
+        let tracked = this.trackedAnims.get(anim);
+        if (!tracked) {
+          tracked = { original: anim.playbackRate, applied: anim.playbackRate };
+          this.trackedAnims.set(anim, tracked);
+        } else if (anim.playbackRate !== tracked.applied) {
+          tracked.original = anim.playbackRate;
+        }
+        const desired = tracked.original * effectiveSpeed;
+        if (anim.playbackRate !== desired) {
+          anim.playbackRate = desired;
+          tracked.applied = desired;
+        }
+      }
+    } catch {
+    }
+  }
+  /** Patch playbackRate on all video/audio elements. */
+  patchMedia() {
+    try {
+      document.querySelectorAll("video, audio").forEach((node) => {
+        const el = node;
+        if (el.closest?.("[data-lapse-panel]")) return;
+        if (el.closest?.("[data-saccade-exclude]")) return;
+        let tracked = this.trackedMedia.get(el);
+        if (!tracked) {
+          tracked = { original: el.playbackRate, applied: el.playbackRate };
+          this.trackedMedia.set(el, tracked);
+        } else if (el.playbackRate !== tracked.applied) {
+          tracked.original = el.playbackRate;
+        }
+        const desired = Math.min(MEDIA_RATE_MAX, Math.max(MEDIA_RATE_MIN, tracked.original * (this.speed || MEDIA_RATE_MIN)));
+        if (el.playbackRate !== desired) {
+          el.playbackRate = desired;
+          tracked.applied = desired;
+        }
+      });
+    } catch {
+    }
+  }
+  /**
+   * Register a GSAP instance (for ES-module imports where window.gsap is
+   * undefined). Applies the current timeScale immediately if speed !== 1.
+   */
+  registerGSAP(gsap) {
+    this.gsapInstance = gsap;
+    if (this.speed !== 1) this.patchGSAP();
+  }
+  /** Sync GSAP's global timeline if present. */
+  patchGSAP() {
+    try {
+      const gsap = this.gsapInstance ?? window.gsap;
+      gsap?.globalTimeline?.timeScale(this.speed || 1e-3);
+    } catch {
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Cleanup
+  // ---------------------------------------------------------------------------
+  /** Restore all patched APIs to originals. */
+  destroy() {
+    if (!this.installed) return;
+    performance.now = this._perfNow;
+    Date.now = this._dateNow;
+    window.requestAnimationFrame = this._raf;
+    window.cancelAnimationFrame = this._caf;
+    window.setTimeout = this._setTimeout;
+    window.clearTimeout = this._clearTimeout;
+    window.setInterval = this._setInterval;
+    window.clearInterval = this._clearInterval;
+    for (const [, entry] of this.intervalMap) {
+      this._clearTimeout(entry.realId);
+    }
+    this.intervalMap.clear();
+    if (this._origAnimate) {
+      Element.prototype.animate = this._origAnimate;
+      this._origAnimate = null;
+    }
+    if (this.animPollId) {
+      this._caf(this.animPollId);
+      this.animPollId = 0;
+    }
+    try {
+      for (const anim of document.getAnimations()) {
+        const tracked = this.trackedAnims.get(anim);
+        anim.playbackRate = tracked?.original ?? 1;
+      }
+    } catch {
+    }
+    try {
+      document.querySelectorAll("video, audio").forEach((node) => {
+        const el = node;
+        const tracked = this.trackedMedia.get(el);
+        el.playbackRate = tracked?.original ?? 1;
+      });
+    } catch {
+    }
+    try {
+      const gsap = this.gsapInstance ?? window.gsap;
+      gsap?.globalTimeline?.timeScale(1);
+    } catch {
+    }
+    this.gsapInstance = null;
+    delete window.__LAPSE_ORIGINAL_RAF__;
+    delete window.__saccadeInstalled;
+    this.installed = false;
+  }
+};
+
+// src/core/recorder.ts
+var SAFE_PROPS = [
+  "opacity",
+  "transform",
+  "background-color",
+  "color",
+  "border-color",
+  "box-shadow",
+  "border-radius",
+  "filter",
+  "clip-path",
+  "scale",
+  "rotate",
+  "translate",
+  "outline-color",
+  "outline-width",
+  "outline-offset",
+  "outline-style",
+  "text-decoration-color",
+  "fill",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "visibility",
+  "pointer-events"
+];
+var LAYOUT_PROPS = [
+  "width",
+  "height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "max-height",
+  "max-width",
+  "min-height",
+  "min-width",
+  "display"
+];
+var SNAPSHOT_PROPS = [...SAFE_PROPS, ...LAYOUT_PROPS];
+var SAFE_PROPS_SET = new Set(SAFE_PROPS);
+var SNAPSHOT_ATTRS = [
+  "data-state",
+  "data-checked",
+  "data-disabled",
+  "data-highlighted",
+  "data-orientation",
+  "data-active",
+  "data-selected",
+  "data-open",
+  "data-closed",
+  "data-side",
+  "data-align",
+  "data-focus",
+  "data-hover",
+  "data-at-boundary",
+  "data-scrubbing",
+  "data-starting-style",
+  "data-ending-style",
+  "data-panel-open",
+  "data-hidden",
+  "aria-checked",
+  "aria-selected",
+  "aria-expanded",
+  "aria-pressed",
+  "aria-hidden",
+  "aria-disabled",
+  "aria-valuenow",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-invalid",
+  "checked",
+  "disabled",
+  "hidden",
+  "inert",
+  "value",
+  "class",
+  "style"
+];
+var STATE_SELECTORS = [
+  "[data-state]",
+  "[aria-checked]",
+  "[aria-selected]",
+  "[aria-expanded]",
+  "[aria-pressed]",
+  '[role="radio"]',
+  '[role="checkbox"]',
+  '[role="switch"]',
+  '[role="tab"]',
+  '[role="tabpanel"]',
+  '[role="option"]',
+  '[role="slider"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  '[type="radio"]',
+  '[type="checkbox"]',
+  '[type="range"]',
+  "input",
+  "button",
+  "select",
+  "textarea",
+  "[data-radix-collection-item]",
+  '[data-slot="slider-thumb"]',
+  '[data-slot="slider-track"]'
+].join(",");
+function getSelector(el) {
+  if (!el || !el.tagName) return null;
+  const parts = [];
+  let current = el;
+  for (let i = 0; i < 5 && current && current.tagName && current.tagName !== "HTML"; i++) {
+    const tag = current.tagName.toLowerCase();
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children);
+      const idx = siblings.indexOf(current) + 1;
+      parts.unshift(tag + ":nth-child(" + idx + ")");
+    } else {
+      parts.unshift(tag);
+    }
+    current = parent;
+  }
+  return parts.join(" > ");
+}
+function getReadableSelector(el) {
+  if (!el || !el.tagName) return "unknown";
+  if (el.id) return "#" + el.id;
+  const tag = el.tagName.toLowerCase();
+  const classes = Array.from(el.classList || []).slice(0, 3).map((c) => "." + c).join("");
+  return tag + classes;
+}
+function getElementLabel(el) {
+  if (!el) return "unknown";
+  const ariaLabel = el.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const text = (el.textContent || "").trim();
+  if (text && text.length < 40 && text.length > 0) return text;
+  const label = el.closest("label") || el.closest("[aria-label]");
+  if (label) {
+    const lt = label.getAttribute("aria-label") || (label.textContent || "").trim();
+    if (lt && lt.length < 40) return lt;
+  }
+  const state = el.getAttribute("data-state");
+  const role = el.getAttribute("role");
+  if (role && state) return role + " (" + state + ")";
+  if (role) return role;
+  return getReadableSelector(el);
+}
+function cssSplit(str) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === "(") depth++;
+    else if (str[i] === ")") depth--;
+    else if (str[i] === "," && depth === 0) {
+      parts.push(str.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  parts.push(str.slice(start).trim());
+  return parts;
+}
+var _TimelineRecorder = class _TimelineRecorder {
+  constructor() {
+    // ---- Recording state ----------------------------------------------------
+    this.recording = false;
+    this.startTime = 0;
+    this.boundingBox = null;
+    /** Structural-selector -> live DOM element. */
+    this.elements = /* @__PURE__ */ new Map();
+    /** Animation id -> info. */
+    this.animations = /* @__PURE__ */ new Map();
+    /** Original inline style per element (captured on first encounter). */
+    this.originalStyles = /* @__PURE__ */ new Map();
+    /** Captured frames. */
+    this.frames = [];
+    // ---- Portal management --------------------------------------------------
+    this.activePortals = /* @__PURE__ */ new Map();
+    this.portalIdCounter = 0;
+    this.currentPortalIds = /* @__PURE__ */ new Set();
+    this.capturedPortals = /* @__PURE__ */ new Set();
+    // ---- JS animation detection (Phase 2) -----------------------------------
+    this.prevInlineStyles = /* @__PURE__ */ new Map();
+    this.jsAnimStartTimes = /* @__PURE__ */ new Map();
+    this.jsAnimLastSeen = /* @__PURE__ */ new Map();
+    this.jsAnimFromValues = /* @__PURE__ */ new Map();
+    this.jsAnimChangeCount = /* @__PURE__ */ new Map();
+    // ---- Interaction state --------------------------------------------------
+    this.currentHoverEls = /* @__PURE__ */ new Set();
+    this.currentFocusSel = null;
+    this.currentPointer = { x: 0, y: 0, buttons: 0 };
+    // ---- Observers & listeners ----------------------------------------------
+    this.attrObserver = null;
+    this.portalObserver = null;
+    this.exitObserver = null;
+    this.onMouseOver = null;
+    this.onMouseOut = null;
+    this.onFocusIn = null;
+    this.onFocusOut = null;
+    this.onPointerMove = null;
+    this.onPointerDown = null;
+    this.onPointerUp = null;
+    // ---- WAAPI interception --------------------------------------------------
+    /** Animations captured via Element.prototype.animate monkey-patch. */
+    this.interceptedAnimations = [];
+    // ---- Seekable WAAPI clones (created in stopRecording for scrubbing) -----
+    this.seekableClones = /* @__PURE__ */ new Map();
+    this.hiddenSince = null;
+    this.onVisibilityChange = null;
+    /** Set to true when the capture loop self-terminates due to limits. */
+    this.autoStopped = false;
+    /** Called when recording auto-stops. Set by the engine. */
+    this.onAutoStop = null;
+    // ---- Saved originals (for restoration) ----------------------------------
+    this._removeChild = null;
+    this._remove = null;
+    this._elementAnimate = null;
+    // ---- DOM elements injected during stop ----------------------------------
+    /** `<style>` that disables all transitions/animations after recording. */
+    this.noTransitionsEl = null;
+    /** Full-screen overlay blocking interaction during scrub. */
+    this.blockerEl = null;
+    /** `<style>` with cloned :hover / :focus rules rewritten as `[data-lapse-*]`. */
+    this.lapseStyleEl = null;
+    // =========================================================================
+    // Public API — helpers exposed for the scrubber
+    // =========================================================================
+    this.getSelector = getSelector;
+  }
+  // ---- Unpatched rAF reference --------------------------------------------
+  get _raf() {
+    return window.__LAPSE_ORIGINAL_RAF__ || requestAnimationFrame;
+  }
+  get SAFE_PROPS_SET() {
+    return SAFE_PROPS_SET;
+  }
+  get capturedPortalIds() {
+    return this.capturedPortals;
+  }
+  // =========================================================================
+  // startRecording
+  // =========================================================================
+  startRecording(boundingBox) {
+    if (this.recording) return;
+    this.recording = true;
+    this.autoStopped = false;
+    this.hiddenSince = null;
+    this.startTime = performance.now();
+    this.frames = [];
+    this.animations.clear();
+    this.elements.clear();
+    this.originalStyles.clear();
+    this.boundingBox = boundingBox || null;
+    this.activePortals.clear();
+    this.portalIdCounter = 0;
+    this.currentPortalIds.clear();
+    this.capturedPortals.clear();
+    this.seekableClones.clear();
+    this.prevInlineStyles.clear();
+    this.jsAnimStartTimes.clear();
+    this.jsAnimLastSeen.clear();
+    this.jsAnimFromValues.clear();
+    this.jsAnimChangeCount.clear();
+    this.currentHoverEls.clear();
+    this.currentFocusSel = null;
+    this.currentPointer = { x: 0, y: 0, buttons: 0 };
+    this.onVisibilityChange = () => {
+      if (!this.recording) return;
+      if (document.hidden) {
+        this.hiddenSince = performance.now();
+      } else {
+        this.hiddenSince = null;
+      }
+    };
+    document.addEventListener("visibilitychange", this.onVisibilityChange);
+    const trackElement = (el) => {
+      if (!el || !el.tagName) return;
+      if (el.closest?.("[data-lapse-panel]")) return;
+      const sel = getSelector(el);
+      if (!sel) return;
+      const isNew = !this.elements.has(sel);
+      this.elements.set(sel, el);
+      if (isNew) {
+        this.originalStyles.set(sel, el.getAttribute("style") || "");
+      }
+    };
+    const trackTree = (root) => {
+      if (!root || !root.querySelectorAll) return;
+      trackElement(root);
+      for (const child of root.querySelectorAll("*")) {
+        trackElement(child);
+      }
+    };
+    const isInBounds = (el) => {
+      if (el.closest?.("[data-lapse-panel]")) return false;
+      if (!this.boundingBox) return true;
+      const r = el.getBoundingClientRect();
+      const bb = this.boundingBox;
+      return r.x < bb.x + bb.width && r.x + r.width > bb.x && r.y < bb.y + bb.height && r.y + r.height > bb.y;
+    };
+    try {
+      const stateEls = document.querySelectorAll(STATE_SELECTORS);
+      for (const el of stateEls) {
+        if (!isInBounds(el)) continue;
+        trackElement(el);
+        for (const child of el.querySelectorAll("*")) {
+          trackElement(child);
+        }
+        const parent = el.parentElement;
+        if (parent) {
+          trackElement(parent);
+          for (const sibling of parent.children) {
+            trackElement(sibling);
+            for (const child of sibling.querySelectorAll("*")) {
+              trackElement(child);
+            }
+          }
+        }
+      }
+    } catch (_) {
+    }
+    this.attrObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.target instanceof HTMLElement) {
+          trackElement(m.target);
+          const parent = m.target.parentElement;
+          if (parent) {
+            for (const sibling of parent.children) {
+              trackElement(sibling);
+              for (const child of sibling.querySelectorAll("*")) {
+                trackElement(child);
+              }
+            }
+          }
+        }
+      }
+    });
+    this.attrObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: [
+        "data-state",
+        "data-highlighted",
+        "data-hover",
+        "data-focus",
+        "data-active",
+        "data-selected",
+        "data-open",
+        "data-closed",
+        "data-at-boundary",
+        "data-scrubbing",
+        "aria-checked",
+        "aria-selected",
+        "aria-expanded",
+        "aria-valuenow",
+        "aria-invalid",
+        "class",
+        "style"
+      ],
+      subtree: true
+    });
+    this._removeChild = Node.prototype.removeChild;
+    const savedRemoveChild = this._removeChild;
+    const self = this;
+    Node.prototype.removeChild = function(child) {
+      if (self.recording && child instanceof HTMLElement && child.hasAttribute("data-lapse-portal-id")) {
+        child.style.display = "none";
+        child.setAttribute("data-lapse-portal-hidden", "");
+        const id = child.getAttribute("data-lapse-portal-id");
+        if (id) self.currentPortalIds.delete(id);
+        return child;
+      }
+      return savedRemoveChild.call(this, child);
+    };
+    this._remove = Element.prototype.remove;
+    const savedRemove = this._remove;
+    Element.prototype.remove = function() {
+      if (self.recording && this instanceof HTMLElement && this.hasAttribute("data-lapse-portal-id")) {
+        this.style.display = "none";
+        this.setAttribute("data-lapse-portal-hidden", "");
+        const id = this.getAttribute("data-lapse-portal-id");
+        if (id) self.currentPortalIds.delete(id);
+        return;
+      }
+      return savedRemove.call(this);
+    };
+    this._elementAnimate = Element.prototype.animate;
+    const savedAnimate = this._elementAnimate;
+    Element.prototype.animate = function(keyframes, options) {
+      const anim = savedAnimate.call(this, keyframes, options);
+      if (self.recording && this instanceof HTMLElement && isInBounds(this)) {
+        trackElement(this);
+        self.interceptedAnimations.push({ animation: anim, target: this });
+      }
+      return anim;
+    };
+    this.portalObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (!(node instanceof HTMLElement)) continue;
+          if (node.parentElement !== document.body) continue;
+          if (node.hasAttribute("data-lapse-portal-id")) continue;
+          const isPortal = node.hasAttribute("data-radix-popper-content-wrapper") || node.hasAttribute("data-radix-portal") || node.getAttribute("role") === "dialog" || node.getAttribute("role") === "alertdialog" || node.querySelector(
+            '[role="menu"], [role="dialog"], [role="alertdialog"], [role="listbox"], [role="tooltip"], [data-radix-popper-content-wrapper]'
+          ) || node.hasAttribute("data-state") || node.style && (node.style.position === "fixed" || node.style.position === "absolute") || getComputedStyle(node).position === "fixed";
+          if (!isPortal) continue;
+          const id = "__lapse_portal_" + this.portalIdCounter++;
+          node.setAttribute("data-lapse-portal-id", id);
+          this.activePortals.set(id, { element: node });
+          this.currentPortalIds.add(id);
+          this.capturedPortals.add(id);
+          trackTree(node);
+        }
+      }
+    });
+    this.portalObserver.observe(document.body, { childList: true });
+    this.exitObserver = new MutationObserver((mutations) => {
+      if (!this.recording) return;
+      for (const m of mutations) {
+        for (const node of m.removedNodes) {
+          if (!(node instanceof HTMLElement)) continue;
+          const sel = getSelector(node);
+          if (sel && this.elements.has(sel)) {
+            if (!node.isConnected) {
+              node.style.display = "none";
+              node.setAttribute("data-lapse-exit-captured", "");
+              (m.target || document.body).appendChild(node);
+            }
+          }
+        }
+      }
+    });
+    this.exitObserver.observe(document.body, { childList: true, subtree: true });
+    this.onMouseOver = (e) => {
+      if (!this.recording) return;
+      this.currentHoverEls.clear();
+      let el = e.target;
+      while (el && el !== document.body) {
+        const sel = getSelector(el);
+        if (sel) {
+          this.currentHoverEls.add(sel);
+          trackElement(el);
+        }
+        el = el.parentElement;
+      }
+    };
+    this.onMouseOut = (e) => {
+      if (!this.recording) return;
+      if (!e.relatedTarget || !document.body.contains(e.relatedTarget)) {
+        this.currentHoverEls.clear();
+      }
+    };
+    document.addEventListener("mouseover", this.onMouseOver, true);
+    document.addEventListener("mouseout", this.onMouseOut, true);
+    this.onFocusIn = (e) => {
+      if (!this.recording) return;
+      const el = e.target;
+      if (el && el !== document.body) {
+        const sel = getSelector(el);
+        this.currentFocusSel = sel;
+        trackElement(el);
+        let parent = el.parentElement;
+        while (parent && parent !== document.body) {
+          trackElement(parent);
+          parent = parent.parentElement;
+        }
+      }
+    };
+    this.onFocusOut = () => {
+      if (!this.recording) return;
+      this.currentFocusSel = null;
+    };
+    document.addEventListener("focusin", this.onFocusIn, true);
+    document.addEventListener("focusout", this.onFocusOut, true);
+    this.onPointerMove = (e) => {
+      if (!this.recording) return;
+      this.currentPointer = { x: e.clientX, y: e.clientY, buttons: e.buttons };
+    };
+    this.onPointerDown = (e) => {
+      if (!this.recording) return;
+      this.currentPointer = { x: e.clientX, y: e.clientY, buttons: e.buttons };
+    };
+    this.onPointerUp = (e) => {
+      if (!this.recording) return;
+      this.currentPointer = { x: e.clientX, y: e.clientY, buttons: 0 };
+    };
+    document.addEventListener("pointermove", this.onPointerMove, true);
+    document.addEventListener("pointerdown", this.onPointerDown, true);
+    document.addEventListener("pointerup", this.onPointerUp, true);
+    const captureFrame = () => {
+      if (!this.recording) return;
+      const time = performance.now() - this.startTime;
+      if (time >= _TimelineRecorder.MAX_DURATION_MS || this.frames.length >= _TimelineRecorder.MAX_FRAMES || this.hiddenSince && performance.now() - this.hiddenSince > 5e3) {
+        this.recording = false;
+        this.autoStopped = true;
+        this.onAutoStop?.();
+        return;
+      }
+      const anims = document.getAnimations();
+      const frameAnims = [];
+      for (const a of anims) {
+        const target = a.effect?.target;
+        if (!target) continue;
+        if (!isInBounds(target)) continue;
+        const uniqueSelector = getSelector(target);
+        if (!uniqueSelector) continue;
+        const readableSelector = getReadableSelector(target);
+        trackElement(target);
+        const timing = a.effect?.getTiming?.() || {};
+        const duration = typeof timing.duration === "number" ? timing.duration : 0;
+        const delay = timing.delay || 0;
+        const easing = timing.easing || "linear";
+        let name = "";
+        let type = "WebAnimation";
+        if (a.constructor.name === "CSSTransition" || a.transitionProperty) {
+          name = a.transitionProperty || "";
+          type = "CSSTransition";
+        } else if (a.constructor.name === "CSSAnimation" || a.animationName) {
+          name = a.animationName || "";
+          type = "CSSAnimation";
+        }
+        const id = type + ":" + name + ":" + uniqueSelector;
+        if (!this.animations.has(id)) {
+          const keyframes2 = a.effect?.getKeyframes?.() || [];
+          let source = null;
+          if (type === "CSSAnimation" && keyframes2.length > 0) {
+            const kfLines = keyframes2.map((kf) => {
+              const offset = Math.round((kf.offset ?? 0) * 100) + "%";
+              const props = Object.entries(kf).filter(
+                ([k]) => !["offset", "easing", "composite", "computedOffset"].includes(k)
+              ).map(
+                ([k, v]) => k.replace(/([A-Z])/g, "-$1").toLowerCase() + ": " + v
+              ).join("; ");
+              return "  " + offset + " { " + props + " }";
+            }).join("\n");
+            source = "@keyframes " + (name || "anonymous") + " {\n" + kfLines + "\n}";
+          } else if (type === "CSSTransition") {
+            source = "transition: " + name + " " + duration + "ms " + easing;
+          }
+          const resolvedVars = {};
+          try {
+            const cs = getComputedStyle(target);
+            const style = target.getAttribute("style") || "";
+            const allRules = [];
+            for (const sheet of document.styleSheets) {
+              try {
+                for (const rule of sheet.cssRules) {
+                  if (rule.selectorText && target.matches(rule.selectorText)) {
+                    allRules.push(rule.cssText);
+                  }
+                }
+              } catch (_) {
+              }
+            }
+            const allCssText = allRules.join(" ") + " " + style;
+            const varRegex = /var\(\s*(--[a-zA-Z0-9-]+)/g;
+            let varMatch;
+            while ((varMatch = varRegex.exec(allCssText)) !== null) {
+              const varName = varMatch[1];
+              const resolved = cs.getPropertyValue(varName).trim();
+              if (resolved) {
+                resolvedVars[varName] = resolved;
+              }
+            }
+          } catch (_) {
+          }
+          let conflicts = null;
+          if (type === "CSSTransition") {
+            try {
+              const cs = getComputedStyle(target);
+              const tProps = cssSplit(cs.transitionProperty);
+              const tDurations = cssSplit(cs.transitionDuration).map(
+                (s) => parseFloat(s) * 1e3
+              );
+              const tEasings = cssSplit(cs.transitionTimingFunction);
+              const tDelays = cssSplit(cs.transitionDelay).map(
+                (s) => parseFloat(s) * 1e3
+              );
+              let idx = tProps.indexOf(name);
+              if (idx === -1 && tProps.includes("all"))
+                idx = tProps.indexOf("all");
+              if (idx >= 0) {
+                const declaredDuration = tDurations[idx % tDurations.length] || 0;
+                const declaredEasing = tEasings[idx % tEasings.length] || "ease";
+                const declaredDelay = tDelays[idx % tDelays.length] || 0;
+                const diffs = [];
+                if (Math.abs(declaredDuration - duration) > 1) {
+                  diffs.push(
+                    "duration: declared " + declaredDuration + "ms, actual " + duration + "ms"
+                  );
+                }
+                if (declaredEasing !== easing) {
+                  const normDeclared = declaredEasing.replace(/\s/g, "");
+                  const normActual = easing.replace(/\s/g, "");
+                  if (normDeclared !== normActual) {
+                    diffs.push(
+                      "easing: declared " + declaredEasing + ", actual " + easing
+                    );
+                  }
+                }
+                if (Math.abs(declaredDelay - delay) > 1) {
+                  diffs.push(
+                    "delay: declared " + declaredDelay + "ms, actual " + delay + "ms"
+                  );
+                }
+                if (diffs.length > 0) {
+                  conflicts = diffs;
+                }
+              }
+            } catch (_) {
+            }
+          }
+          const cleanedKeyframes = keyframes2.map((kf) => {
+            const clean = {};
+            for (const [k, v] of Object.entries(kf)) {
+              if (k !== "computedOffset" && k !== "composite") clean[k] = v;
+            }
+            return clean;
+          });
+          this.animations.set(id, {
+            id,
+            name,
+            selector: readableSelector,
+            elementLabel: getElementLabel(target),
+            duration,
+            delay,
+            easing,
+            type,
+            source,
+            resolvedVars: Object.keys(resolvedVars).length > 0 ? resolvedVars : null,
+            conflicts,
+            rawKeyframes: cleanedKeyframes,
+            rawTiming: { ...timing, fill: "both" }
+          });
+        }
+        const keyframes = a.effect?.getKeyframes?.() || [];
+        const animatedProps = /* @__PURE__ */ new Set();
+        for (const kf of keyframes) {
+          for (const key of Object.keys(kf)) {
+            if (!["offset", "easing", "composite", "computedOffset"].includes(key)) {
+              animatedProps.add(key);
+            }
+          }
+        }
+        const computedStyle = getComputedStyle(target);
+        const properties = [];
+        for (const prop of animatedProps) {
+          const kebab = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+          const value = computedStyle.getPropertyValue(kebab) || "";
+          if (value) {
+            const from = keyframes[0]?.[prop] || null;
+            const to = keyframes[keyframes.length - 1]?.[prop] || null;
+            properties.push({ property: kebab, value, from, to });
+          }
+        }
+        const currentTime = a.currentTime ?? 0;
+        const progress = duration > 0 ? Math.max(0, Math.min(1, currentTime / duration)) : 0;
+        frameAnims.push({ animationId: id, currentTime, progress, properties });
+      }
+      const waapiAnimatedIds = /* @__PURE__ */ new Set();
+      for (const fa of frameAnims) {
+        const parts = fa.animationId.split(":");
+        waapiAnimatedIds.add(parts[parts.length - 1]);
+      }
+      const JS_TRACK_PROPS = ["transform", "opacity", "left", "top", "right", "bottom", "background"];
+      const waapiAnimatedProps = /* @__PURE__ */ new Map();
+      for (const fa of frameAnims) {
+        const parts = fa.animationId.split(":");
+        const elKey = parts[parts.length - 1];
+        if (!waapiAnimatedProps.has(elKey)) waapiAnimatedProps.set(elKey, /* @__PURE__ */ new Set());
+        const propName = parts[1];
+        if (propName) waapiAnimatedProps.get(elKey).add(propName);
+      }
+      for (const [elId, el] of this.elements) {
+        if (!el.isConnected) continue;
+        const hasWaapi = waapiAnimatedIds.has(elId);
+        const waapiProps = waapiAnimatedProps.get(elId);
+        const currentInline = {};
+        let hasAnyInline = false;
+        for (const prop of JS_TRACK_PROPS) {
+          const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+          const val = el.style[camel];
+          if (val) {
+            currentInline[prop] = val;
+            hasAnyInline = true;
+          }
+        }
+        if (!hasAnyInline) {
+          this.prevInlineStyles.set(elId, currentInline);
+          continue;
+        }
+        const prevInline = this.prevInlineStyles.get(elId) || {};
+        this.prevInlineStyles.set(elId, currentInline);
+        for (const p of JS_TRACK_PROPS) {
+          const cur = currentInline[p] || "";
+          const prev = prevInline[p] || "";
+          const propCoveredByWaapi = waapiProps?.has(p) || waapiProps?.has(p.replace(/-([a-z])/g, (_, c) => c.toUpperCase()));
+          if (cur && cur !== prev && !propCoveredByWaapi) {
+            const jsId = "JSAnimation:" + p + ":" + elId;
+            this.jsAnimChangeCount.set(jsId, (this.jsAnimChangeCount.get(jsId) || 0) + 1);
+            if (!this.jsAnimStartTimes.has(jsId)) {
+              this.jsAnimStartTimes.set(jsId, time);
+              this.jsAnimFromValues.set(jsId, prev || cur);
+            }
+            this.jsAnimLastSeen.set(jsId, time);
+            if (this.jsAnimChangeCount.get(jsId) < 3) continue;
+            if (!this.animations.has(jsId)) {
+              const readableSel = getReadableSelector(el);
+              this.animations.set(jsId, {
+                id: jsId,
+                name: p,
+                selector: readableSel,
+                elementLabel: getElementLabel(el),
+                duration: 0,
+                delay: 0,
+                easing: "JS-driven",
+                type: "JSAnimation",
+                source: "Detected: inline style animation (JS library or requestAnimationFrame)",
+                resolvedVars: null,
+                conflicts: null
+              });
+            }
+            const startT = this.jsAnimStartTimes.get(jsId);
+            const anim = this.animations.get(jsId);
+            anim.duration = time - startT;
+            const fromVal = this.jsAnimFromValues.get(jsId) || "";
+            const elapsed = time - startT;
+            const estimatedDuration = Math.max(anim.duration, 300);
+            const prog = Math.min(1, elapsed / estimatedDuration);
+            frameAnims.push({
+              animationId: jsId,
+              currentTime: elapsed,
+              progress: prog,
+              properties: [{
+                property: p,
+                value: cur,
+                from: fromVal,
+                to: cur
+              }]
+            });
+          }
+        }
+      }
+      const elementSnapshots = {};
+      for (const [sel, el] of this.elements) {
+        if (!el.isConnected) continue;
+        const cs = getComputedStyle(el);
+        const snap = { __styles: {}, __attrs: {} };
+        for (const prop of SNAPSHOT_PROPS) {
+          snap.__styles[prop] = cs.getPropertyValue(prop);
+        }
+        for (const attr of SNAPSHOT_ATTRS) {
+          if (attr === "checked") {
+            snap.__attrs[attr] = el.checked ? "true" : null;
+          } else if (attr === "class") {
+            snap.__attrs[attr] = el.className;
+          } else if (attr === "style") {
+            snap.__attrs[attr] = el.getAttribute("style") || "";
+          } else if (attr === "value") {
+            snap.__attrs[attr] = el.value !== void 0 ? String(el.value) : null;
+          } else {
+            snap.__attrs[attr] = el.getAttribute(attr);
+          }
+        }
+        try {
+          snap.__afterOpacity = getComputedStyle(el, "::after").getPropertyValue(
+            "opacity"
+          );
+          snap.__beforeOpacity = getComputedStyle(
+            el,
+            "::before"
+          ).getPropertyValue("opacity");
+        } catch (_) {
+        }
+        elementSnapshots[sel] = snap;
+      }
+      for (const [id, portal] of this.activePortals) {
+        if (portal.element?.isConnected && !portal.element.hasAttribute("data-lapse-portal-hidden")) {
+          this.currentPortalIds.add(id);
+        }
+      }
+      this.frames.push({
+        time,
+        animations: frameAnims,
+        elementSnapshots,
+        activePortalIds: [...this.currentPortalIds],
+        hoveredSels: [...this.currentHoverEls],
+        focusSel: this.currentFocusSel,
+        pointer: { ...this.currentPointer },
+        scrollPositions: {}
+      });
+      this._raf(captureFrame);
+    };
+    this._raf(captureFrame);
+  }
+  // =========================================================================
+  // stopRecording
+  // =========================================================================
+  stopRecording() {
+    if (!this.recording) {
+      return {
+        startTime: 0,
+        endTime: 0,
+        duration: 0,
+        animations: [],
+        frames: [],
+        boundingBox: null
+      };
+    }
+    this.recording = false;
+    if (this._removeChild) Node.prototype.removeChild = this._removeChild;
+    if (this._remove) Element.prototype.remove = this._remove;
+    if (this._elementAnimate) Element.prototype.animate = this._elementAnimate;
+    this.attrObserver?.disconnect();
+    this.portalObserver?.disconnect();
+    this.exitObserver?.disconnect();
+    if (this.onVisibilityChange) {
+      document.removeEventListener("visibilitychange", this.onVisibilityChange);
+      this.onVisibilityChange = null;
+    }
+    if (this.onMouseOver)
+      document.removeEventListener("mouseover", this.onMouseOver, true);
+    if (this.onMouseOut)
+      document.removeEventListener("mouseout", this.onMouseOut, true);
+    if (this.onFocusIn)
+      document.removeEventListener("focusin", this.onFocusIn, true);
+    if (this.onFocusOut)
+      document.removeEventListener("focusout", this.onFocusOut, true);
+    if (this.onPointerMove)
+      document.removeEventListener("pointermove", this.onPointerMove, true);
+    if (this.onPointerDown)
+      document.removeEventListener("pointerdown", this.onPointerDown, true);
+    if (this.onPointerUp)
+      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 (_) {
+    }
+    const noTransitions = document.createElement("style");
+    noTransitions.id = "__lapse-no-transitions";
+    noTransitions.textContent = "*, *::before, *::after { transition: none !important; animation: none !important; }";
+    document.head.appendChild(noTransitions);
+    this.noTransitionsEl = noTransitions;
+    const blocker = document.createElement("div");
+    blocker.id = "__lapse-scrub-blocker";
+    blocker.style.cssText = "position:fixed;inset:0;z-index:999999;cursor:not-allowed;background:transparent;";
+    blocker.title = "Clear the timeline to interact with the page";
+    document.body.appendChild(blocker);
+    this.blockerEl = blocker;
+    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);
+                }
+              }
+            };
+            walk(sheet.cssRules);
+          } catch (_) {
+          }
+        }
+        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 (_) {
+      }
+    }, 0);
+    this.seekableClones.clear();
+    for (const [animId, animInfo] of this.animations) {
+      if (!animInfo.rawKeyframes?.length || !animInfo.rawTiming) continue;
+      if (animInfo.type === "JSAnimation") continue;
+      const firstColon = animId.indexOf(":");
+      const secondColon = animId.indexOf(":", firstColon + 1);
+      const elSelector = secondColon >= 0 ? animId.substring(secondColon + 1) : "";
+      const el = this.elements.get(elSelector);
+      if (!el?.isConnected) continue;
+      try {
+        const clone = el.animate(animInfo.rawKeyframes, {
+          ...animInfo.rawTiming,
+          fill: "both"
+        });
+        clone.pause();
+        clone.currentTime = 0;
+        this.seekableClones.set(animId, {
+          animation: clone,
+          element: el,
+          effect: clone.effect
+        });
+      } catch (_) {
+      }
+    }
+    const duration = this.frames.length > 0 ? this.frames[this.frames.length - 1].time : 0;
+    const capture = {
+      startTime: this.startTime,
+      endTime: performance.now(),
+      duration,
+      animations: Array.from(this.animations.values()),
+      frames: this.frames,
+      boundingBox: this.boundingBox
+    };
+    return capture;
+  }
+};
+// ---- Recording limits ---------------------------------------------------
+_TimelineRecorder.MAX_DURATION_MS = 6e4;
+_TimelineRecorder.MAX_FRAMES = 3600;
+var TimelineRecorder = _TimelineRecorder;
+
+// src/core/scrubber.ts
+var TimelineScrubber = class {
+  constructor(state) {
+    /** Precomputed frame range per animation for O(1) before/after lookup. */
+    this.animFrameRanges = /* @__PURE__ */ new Map();
+    /** Saved originals for restore on release */
+    this._originalAnimate = null;
+    this._originalRaf = null;
+    this._originalRemoveChild = null;
+    this._originalRemove = null;
+    this.elements = state.elements;
+    this.frames = state.frames;
+    this.capturedPortals = state.capturedPortals;
+    this.interceptedAnimations = state.interceptedAnimations;
+    this.seekableClones = state.seekableClones;
+    this._originalAnimate = window.__LAPSE_ORIGINAL_ANIMATE__ ?? null;
+    this._originalRaf = window.__LAPSE_ORIGINAL_RAF__ ?? null;
+    this._originalRemoveChild = window.__LAPSE_TIMELINE__?._removeChild ?? null;
+    this._originalRemove = window.__LAPSE_TIMELINE__?._remove ?? null;
+    for (let i = 0; i < this.frames.length; i++) {
+      for (const fa of this.frames[i].animations) {
+        const range = this.animFrameRanges.get(fa.animationId);
+        if (!range) {
+          this.animFrameRanges.set(fa.animationId, { first: i, last: i });
+        } else {
+          range.last = i;
+        }
+      }
+    }
+  }
+  // ---------------------------------------------------------------------------
+  //  seekTo — scrub to a specific timestamp using WAAPI-native seeking
+  // ---------------------------------------------------------------------------
+  seekTo(timeMs) {
+    if (!this.frames.length) return;
+    let lo = 0;
+    let hi = this.frames.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (this.frames[mid].time < timeMs) lo = mid + 1;
+      else hi = mid;
+    }
+    const frame = this.frames[lo];
+    if (!frame || !frame.elementSnapshots) return;
+    document.querySelectorAll("[data-lapse-hover]").forEach((el) => {
+      el.removeAttribute("data-lapse-hover");
+    });
+    document.querySelectorAll("[data-lapse-focus]").forEach((el) => {
+      el.removeAttribute("data-lapse-focus");
+    });
+    const activeIds = new Set(frame.activePortalIds || []);
+    for (const id of this.capturedPortals) {
+      const portalEl = document.querySelector(
+        `[data-lapse-portal-id="${id}"]`
+      );
+      if (!portalEl) continue;
+      if (activeIds.has(id)) {
+        portalEl.style.removeProperty("display");
+        portalEl.removeAttribute("data-lapse-portal-hidden");
+      } else {
+        portalEl.style.setProperty("display", "none", "important");
+      }
+    }
+    const hoveredSels = frame.hoveredSels || [];
+    for (const sel of hoveredSels) {
+      const el = this.elements.get(sel);
+      if (el && el.isConnected) el.setAttribute("data-lapse-hover", "");
+    }
+    if (frame.focusSel) {
+      const focusEl = this.elements.get(frame.focusSel);
+      if (focusEl && focusEl.isConnected) {
+        focusEl.setAttribute("data-lapse-focus", "");
+        let parent = focusEl.parentElement;
+        while (parent && parent !== document.body) {
+          parent.setAttribute("data-lapse-focus", "");
+          parent = parent.parentElement;
+        }
+      }
+    }
+    const activeAnimIds = /* @__PURE__ */ new Map();
+    for (const fa of frame.animations || []) {
+      activeAnimIds.set(fa.animationId, fa);
+    }
+    for (const [animId, clone] of this.seekableClones) {
+      const frameAnim = activeAnimIds.get(animId);
+      try {
+        if (frameAnim) {
+          if (!clone.animation.effect) {
+            clone.animation.effect = clone.effect;
+          }
+          clone.animation.currentTime = frameAnim.currentTime;
+        } else {
+          const range = this.animFrameRanges.get(animId);
+          if (!range || lo < range.first) {
+            clone.animation.effect = null;
+          } else {
+            if (!clone.animation.effect) {
+              clone.animation.effect = clone.effect;
+            }
+            const timing = clone.effect.getTiming();
+            const endTime = (typeof timing.duration === "number" ? timing.duration : 0) + (timing.delay || 0);
+            clone.animation.currentTime = endTime;
+          }
+        }
+      } catch {
+      }
+    }
+    for (const entry of this.interceptedAnimations) {
+      try {
+        const anim = entry.animation;
+        if (anim.playState !== "finished") {
+          anim.pause();
+        }
+        anim.currentTime = timeMs;
+      } catch {
+      }
+    }
+    for (const [sel, snap] of Object.entries(frame.elementSnapshots)) {
+      const el = this.elements.get(sel);
+      if (!el || !el.isConnected) continue;
+      if (el.closest?.("[data-lapse-panel]")) continue;
+      const snapTyped = snap;
+      if (snapTyped.__attrs) {
+        for (const [attr, value] of Object.entries(snapTyped.__attrs)) {
+          if (attr === "class" || attr === "style") continue;
+          if (attr === "checked") {
+            ;
+            el.checked = value === "true";
+          } else if (attr === "value") {
+            if (value != null) el.value = value;
+          } else if (value == null) {
+            el.removeAttribute(attr);
+          } else {
+            el.setAttribute(attr, value);
+          }
+        }
+      }
+    }
+    for (const fa of frame.animations || []) {
+      if (!fa.animationId.startsWith("JSAnimation:")) continue;
+      const firstColon = fa.animationId.indexOf(":");
+      const secondColon = fa.animationId.indexOf(":", firstColon + 1);
+      const elSel = secondColon >= 0 ? fa.animationId.substring(secondColon + 1) : "";
+      const el = this.elements.get(elSel);
+      if (!el || !el.isConnected) continue;
+      for (const prop of fa.properties) {
+        if (prop.value) {
+          el.style.setProperty(prop.property, prop.value, "important");
+        }
+      }
+    }
+  }
+  // ---------------------------------------------------------------------------
+  //  release — tear down all scrub state and restore the page to normal
+  // ---------------------------------------------------------------------------
+  release() {
+    for (const [, clone] of this.seekableClones) {
+      try {
+        clone.animation.cancel();
+      } catch {
+      }
+    }
+    this.seekableClones.clear();
+    for (const entry of this.interceptedAnimations) {
+      try {
+        entry.animation.cancel();
+      } catch {
+      }
+    }
+    this.interceptedAnimations.length = 0;
+    if (this._originalAnimate) {
+      Element.prototype.animate = this._originalAnimate;
+      this._originalAnimate = null;
+      delete window.__LAPSE_ORIGINAL_ANIMATE__;
+    }
+    if (this._originalRaf) {
+      window.requestAnimationFrame = this._originalRaf;
+      this._originalRaf = null;
+      delete window.__LAPSE_ORIGINAL_RAF__;
+    }
+    const tl = window.__LAPSE_TIMELINE__;
+    if (tl?.noTransitionsEl) {
+      tl.noTransitionsEl.remove();
+    }
+    const noTrans = document.getElementById("__lapse-no-transitions");
+    if (noTrans) noTrans.remove();
+    const blocker = document.getElementById("__lapse-scrub-blocker");
+    if (blocker) blocker.remove();
+    if (tl?.blockerEl) tl.blockerEl.remove();
+    const stateRules = document.getElementById("__lapse-state-rules");
+    if (stateRules) stateRules.remove();
+    if (tl?.lapseStyleEl) tl.lapseStyleEl.remove();
+    if (this._originalRemoveChild) {
+      Node.prototype.removeChild = this._originalRemoveChild;
+      this._originalRemoveChild = null;
+    } else if (tl?._removeChild) {
+      Node.prototype.removeChild = tl._removeChild;
+    }
+    if (this._originalRemove) {
+      Element.prototype.remove = this._originalRemove;
+      this._originalRemove = null;
+    } else if (tl?._remove) {
+      Element.prototype.remove = tl._remove;
+    }
+    document.querySelectorAll("[data-lapse-exit-captured]").forEach((el) => {
+      el.remove();
+    });
+    document.querySelectorAll("[data-lapse-id]").forEach((el) => {
+      el.removeAttribute("data-lapse-id");
+    });
+    document.querySelectorAll("[data-lapse-hover]").forEach((el) => {
+      el.removeAttribute("data-lapse-hover");
+    });
+    document.querySelectorAll("[data-lapse-focus]").forEach((el) => {
+      el.removeAttribute("data-lapse-focus");
+    });
+    document.querySelectorAll("[data-lapse-portal-id]").forEach((el) => {
+      el.removeAttribute("data-lapse-portal-id");
+      el.removeAttribute("data-lapse-portal-hidden");
+    });
+    delete window.__LAPSE_TIMELINE__;
+    this.elements.clear();
+    this.frames.length = 0;
+    this.capturedPortals.clear();
+    this.animFrameRanges.clear();
+  }
+};
+
+// src/core/export.ts
+function getFrameAtTime(frames, timeMs) {
+  if (frames.length === 0) return null;
+  let lo = 0;
+  let hi = frames.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (frames[mid].time < timeMs) lo = mid + 1;
+    else hi = mid;
+  }
+  return frames[lo];
+}
+function generateExport(animations, frames, timeMs, filter = "active") {
+  const frame = getFrameAtTime(frames, timeMs);
+  const duration = frames.at(-1)?.time ?? 0;
+  const filteredAnims = animations.filter((anim) => {
+    if (filter === "all-animations") return true;
+    if (filter === "active") {
+      const frameAnim = frame?.animations.find((a) => a.animationId === anim.id);
+      if (!frameAnim || frameAnim.progress <= 0 || frameAnim.progress >= 1) return false;
+      if (frameAnim.properties.length > 0) {
+        const hasRealChange = frameAnim.properties.some(
+          (p) => p.from && p.to && p.from !== p.to
+        );
+        if (!hasRealChange) return false;
+      }
+      return true;
+    }
+    return true;
+  });
+  const animExports = filteredAnims.map((anim) => {
+    let frameAnim = frame?.animations.find((a) => a.animationId === anim.id);
+    let status = frameAnim ? "active" : "completed";
+    if (!frameAnim) {
+      for (let i = frames.length - 1; i >= 0; i--) {
+        if (frames[i].time > timeMs) continue;
+        const found = frames[i].animations.find((a) => a.animationId === anim.id);
+        if (found) {
+          frameAnim = found;
+          break;
+        }
+      }
+      if (!frameAnim) {
+        for (let i = 0; i < frames.length; i++) {
+          if (frames[i].time < timeMs) continue;
+          const found = frames[i].animations.find((a) => a.animationId === anim.id);
+          if (found) {
+            frameAnim = found;
+            status = "upcoming";
+            break;
+          }
+        }
+      }
+    }
+    const progressLabel = status === "active" ? `${Math.round((frameAnim?.progress ?? 0) * 100)}%` : status === "completed" ? "done" : "upcoming";
+    return {
+      element: anim.selector,
+      elementLabel: anim.elementLabel || anim.selector,
+      name: anim.name || anim.type,
+      type: anim.type,
+      timing: `${Math.round(anim.duration)}ms ${anim.easing}${anim.delay ? ` (delay: ${Math.round(anim.delay)}ms)` : ""}`,
+      progress: progressLabel,
+      properties: (frameAnim?.properties ?? []).map((p) => ({
+        property: p.property,
+        value: p.value,
+        range: p.from && p.to ? `${p.from} \u2192 ${p.to}` : ""
+      })),
+      source: anim.source,
+      resolvedVars: anim.resolvedVars,
+      conflicts: anim.conflicts
+    };
+  });
+  const hoveredElements = Array.isArray(frame?.hoveredSels) ? frame.hoveredSels.map(String) : [];
+  const focusedElement = frame?.focusSel ? String(frame.focusSel) : null;
+  return {
+    timestamp: `${Math.round(timeMs)}ms into ${Math.round(duration)}ms recording`,
+    duration: `${Math.round(duration)}ms`,
+    scrubPosition: timeMs,
+    hoveredElements,
+    focusedElement,
+    animations: animExports
+  };
+}
+function formatExportForLLM(exp, detail = "moderate") {
+  const lines = [];
+  const grouped = /* @__PURE__ */ new Map();
+  for (const anim of exp.animations) {
+    const key = (anim.elementLabel || "") + "|||" + anim.element;
+    if (!grouped.has(key)) {
+      grouped.set(key, { label: anim.elementLabel || "", selector: anim.element, anims: [] });
+    }
+    grouped.get(key).anims.push(anim);
+  }
+  function isRealChange(prop) {
+    if (!prop.range) return true;
+    const [from, to] = prop.range.split(" \u2192 ");
+    return !(from && to && from.trim() === to.trim());
+  }
+  if (detail === "brief") {
+    lines.push(`# Animation State at ${exp.timestamp}`);
+    lines.push("");
+    for (const [, group] of grouped) {
+      const label = group.label && group.label !== group.selector ? `**${group.label}** \`${group.selector}\`` : `\`${group.selector}\``;
+      const cssAnims = group.anims.filter((a) => a.type !== "JSAnimation");
+      const jsAnims = group.anims.filter((a) => a.type === "JSAnimation");
+      if (cssAnims.length > 0) {
+        const props = /* @__PURE__ */ new Set();
+        for (const a of cssAnims) a.properties.filter(isRealChange).forEach((p) => props.add(p.property));
+        const timing = cssAnims[0]?.timing || "";
+        const progress = cssAnims[0]?.progress || "";
+        const progressStr = progress && progress !== "unknown" ? ` @ ${progress}` : "";
+        lines.push(`- ${label}: ${[...props].join(", ")} (${timing}${progressStr})`);
+      }
+      if (jsAnims.length > 0) {
+        const props = /* @__PURE__ */ new Set();
+        for (const a of jsAnims) a.properties.filter(isRealChange).forEach((p) => props.add(p.property));
+        if (props.size > 0) lines.push(`- ${label}: ${[...props].join(", ")} (JS)`);
+      }
+    }
+    return lines.join("\n");
+  }
+  lines.push(`# Animation State at ${exp.timestamp}`);
+  lines.push("");
+  if (detail === "granular") {
+    lines.push("**Environment:**");
+    lines.push(`- Viewport: ${window.innerWidth}\xD7${window.innerHeight}`);
+    lines.push(`- URL: ${window.location.href}`);
+    lines.push(`- User Agent: ${navigator.userAgent}`);
+    lines.push(`- Timestamp: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+    lines.push(`- Device Pixel Ratio: ${window.devicePixelRatio}`);
+    lines.push("");
+  }
+  if (exp.hoveredElements.length > 0 || exp.focusedElement) {
+    lines.push("**Interaction state:**");
+    if (exp.hoveredElements.length > 0) {
+      const deepest = exp.hoveredElements[exp.hoveredElements.length - 1] || exp.hoveredElements[0];
+      lines.push(`- Hovered: \`${deepest}\``);
+    }
+    if (exp.focusedElement) {
+      lines.push(`- Focused: \`${exp.focusedElement}\``);
+    }
+    lines.push("");
+  }
+  if (exp.animations.length === 0 && exp.hoveredElements.length === 0 && !exp.focusedElement) {
+    lines.push("No active animations or interactions at this position.");
+    return lines.join("\n");
+  }
+  if (exp.animations.length === 0) {
+    return lines.join("\n");
+  }
+  for (const [, group] of grouped) {
+    const label = group.label && group.label !== group.selector ? `"${group.label}" ` : "";
+    const cssAnims = group.anims.filter((a) => a.type !== "JSAnimation");
+    const jsAnims = group.anims.filter((a) => a.type === "JSAnimation");
+    const cssPropLines = [];
+    if (cssAnims.length > 0) {
+      const seenProps = /* @__PURE__ */ new Set();
+      for (const anim of cssAnims) {
+        const progressStr = anim.progress !== "unknown" ? ` @ ${anim.progress}` : "";
+        for (const prop of anim.properties) {
+          if (seenProps.has(prop.property)) continue;
+          if (!isRealChange(prop)) continue;
+          seenProps.add(prop.property);
+          let line = `- \`${prop.property}\`: ${prop.value}`;
+          if (prop.range) line += `  [${prop.range}]`;
+          line += `  (${anim.timing}${progressStr})`;
+          cssPropLines.push(line);
+        }
+      }
+    }
+    const jsPropLines = [];
+    if (jsAnims.length > 0) {
+      const seenProps = /* @__PURE__ */ new Set();
+      for (const anim of jsAnims) {
+        for (const prop of anim.properties) {
+          if (seenProps.has(prop.property)) continue;
+          if (!isRealChange(prop)) continue;
+          seenProps.add(prop.property);
+          jsPropLines.push(`- \`${prop.property}\`: ${prop.value}`);
+        }
+      }
+    }
+    if (cssPropLines.length === 0 && jsPropLines.length === 0) continue;
+    lines.push(`## ${label}\`${group.selector}\``);
+    lines.push("");
+    if (cssPropLines.length > 0) {
+      const transitionSet = new Set(cssAnims.map((a) => `${a.name} ${a.timing}`));
+      lines.push(`Transitions: ${[...transitionSet].join(", ")}`);
+      lines.push("");
+      for (const line of cssPropLines) lines.push(line);
+      if (detail === "detailed" || detail === "granular") {
+        const allVars = {};
+        for (const anim of cssAnims) {
+          if (anim.resolvedVars) Object.assign(allVars, anim.resolvedVars);
+        }
+        if (Object.keys(allVars).length > 0) {
+          lines.push("");
+          lines.push("CSS variables:");
+          for (const [name, value] of Object.entries(allVars)) {
+            lines.push(`- \`${name}\`: ${value}`);
+          }
+        }
+        for (const anim of cssAnims) {
+          if (anim.source) {
+            lines.push("");
+            lines.push("```css");
+            lines.push(anim.source);
+            lines.push("```");
+            break;
+          }
+        }
+      }
+    }
+    if (jsPropLines.length > 0) {
+      if (cssPropLines.length > 0) lines.push("");
+      for (const line of jsPropLines) lines.push(line);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+
+// src/core/engine.ts
+var SaccadeEngine = class {
+  constructor() {
+    this.timing = new TimingController();
+    this.recorder = new TimelineRecorder();
+    this.scrubber = null;
+    this.capture = null;
+    this._state = "idle";
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  get state() {
+    return this._state;
+  }
+  getCapture() {
+    return this.capture;
+  }
+  // -- Speed control --------------------------------------------------------
+  setSpeed(speed) {
+    this.timing.setSpeed(speed);
+  }
+  getSpeed() {
+    return this.timing.getSpeed();
+  }
+  /**
+   * Install the timing patches immediately, without changing speed.
+   *
+   * Call this as early as possible (before app code, GSAP, or Framer Motion
+   * run) so they capture the patched time functions rather than the originals.
+   * Idempotent and harmless to call more than once. `setSpeed` and
+   * `startRecording` also install on demand, so this is only needed to win the
+   * early-load race against libraries that cache `Date.now`/`performance.now`.
+   */
+  install() {
+    this.timing.install();
+  }
+  /** Register a module-imported GSAP instance so saccade can slow it. */
+  registerGSAP(gsap) {
+    this.timing.registerGSAP(gsap);
+  }
+  // -- Timeline recording ---------------------------------------------------
+  startRecording(boundingBox) {
+    if (this._state !== "idle") return;
+    this.timing.install();
+    this.recorder.onAutoStop = () => this.stopRecording();
+    this.recorder.startRecording(boundingBox);
+    this._state = "recording";
+    this.notify();
+  }
+  stopRecording() {
+    if (this._state !== "recording") {
+      return {
+        startTime: 0,
+        endTime: 0,
+        duration: 0,
+        animations: [],
+        frames: [],
+        boundingBox: null
+      };
+    }
+    let capture;
+    try {
+      capture = this.recorder.stopRecording();
+    } catch (e) {
+      if (typeof console !== "undefined") 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,
+      frames: capture.frames,
+      capturedPortals: this.recorder.capturedPortalIds,
+      interceptedAnimations: this.recorder.interceptedAnimations,
+      SAFE_PROPS_SET: this.recorder.SAFE_PROPS_SET,
+      seekableClones: this.recorder.seekableClones
+    };
+    this.scrubber = new TimelineScrubber(scrubberState);
+    this._state = "scrubbing";
+    this.notify();
+    return capture;
+  }
+  // -- Scrubbing ------------------------------------------------------------
+  seekTo(timeMs) {
+    this.scrubber?.seekTo(timeMs);
+  }
+  release() {
+    this.scrubber?.release();
+    this.scrubber = null;
+    this.capture = null;
+    this._state = "idle";
+    this.notify();
+  }
+  // -- Export ---------------------------------------------------------------
+  generateExport(timeMs, filter = "active") {
+    if (!this.capture) return null;
+    return generateExport(
+      this.capture.animations,
+      this.capture.frames,
+      timeMs,
+      filter
+    );
+  }
+  exportForLLM(timeMs, filter = "active", detail = "moderate") {
+    const exp = this.generateExport(timeMs, filter);
+    if (!exp) return "";
+    return formatExportForLLM(exp, detail);
+  }
+  // -- State subscription ---------------------------------------------------
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  // -- Cleanup --------------------------------------------------------------
+  destroy() {
+    this.scrubber?.release();
+    this.scrubber = null;
+    this.capture = null;
+    this.timing.destroy();
+    this._state = "idle";
+  }
+};
+
+// src/core/shared.ts
+var KEY = "__saccadeSharedEngine__";
+function getSharedEngine() {
+  const g = globalThis;
+  if (!g[KEY]) g[KEY] = new SaccadeEngine();
+  return g[KEY];
+}
+
+// src/install.ts
+if (typeof window !== "undefined") {
+  getSharedEngine().install();
+}
+export {
+  getSharedEngine
+};
+//# sourceMappingURL=install.mjs.map