saccade 0.0.3 → 0.1.0

package/dist/index.mjs

@@ -8,16 +8,21 @@ import { createPortal } from "react-dom";
 import { createContext, useContext, useRef } from "react";
 
 // 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.mediaObserver = null;
-    this.animObserver = null;
     this._origAnimate = null;
     this.installed = false;
+    this.animPollId = 0;
+    // 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);
@@ -27,19 +32,34 @@ var TimingController = class {
     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;
@@ -48,21 +68,27 @@ var TimingController = class {
     Element.prototype.animate = function(...args) {
       const anim = origAnimate.apply(this, args);
       if (self.speed !== 1) {
-        anim.playbackRate = self.speed || 1e-3;
+        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();
-    const dateBaseline = this._dateNow();
-    Date.now = () => dateBaseline + 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.speed || 1);
+      const scaledDelay = (delay ?? 0) / self.speedDivisor;
       return self._setTimeout(handler, scaledDelay, ...args);
     });
     window.clearTimeout = this._clearTimeout;
@@ -70,7 +96,7 @@ var TimingController = class {
       const id = self.nextIntervalId++;
       const baseDelay = delay ?? 0;
       function tick() {
-        const scaledDelay = baseDelay / (self.speed || 1);
+        const scaledDelay = baseDelay / self.speedDivisor;
         const realId = self._setTimeout(() => {
           if (typeof handler === "function") {
             ;
@@ -95,61 +121,93 @@ var TimingController = class {
         self._clearInterval(id);
       }
     });
-    this.mediaObserver = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node of mutation.addedNodes) {
-          if (node instanceof HTMLVideoElement || node instanceof HTMLAudioElement) {
-            node.playbackRate = self.speed;
-          }
-        }
-      }
-    });
-    if (document.body) {
-      this.mediaObserver.observe(document.body, { childList: true, subtree: true });
-    }
+    this.startAnimationPoll();
   }
   /** Set playback speed. Requires install() first. */
   setSpeed(newSpeed) {
     if (!this.installed) this.install();
     this.reanchor();
     this.speed = newSpeed;
-    document.querySelectorAll("video, audio").forEach((el) => {
-      ;
-      el.playbackRate = newSpeed;
-    });
     this.patchAnimations();
+    this.patchMedia();
+    this.patchGSAP();
+  }
+  getSpeed() {
+    return this.speed;
   }
-  /** Patch playbackRate on all active CSS transitions/animations via WAAPI. */
+  // ---------------------------------------------------------------------------
+  // 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;
-        anim.playbackRate = this.speed || 1e-3;
+        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 {
     }
-    if (!this.animObserver) {
-      this.animObserver = this._setInterval(() => {
-        if (!this.installed) return;
-        try {
-          const anims = document.getAnimations();
-          for (const anim of anims) {
-            const target = anim.effect?.target;
-            if (target?.closest?.("[data-lapse-panel]")) continue;
-            if (anim.playbackRate !== this.speed) {
-              anim.playbackRate = this.speed || 1e-3;
-            }
-          }
-        } 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;
         }
-      }, 100);
+      });
+    } catch {
     }
   }
-  getSpeed() {
-    return this.speed;
+  /** Sync GSAP's global timeline if present. */
+  patchGSAP() {
+    try {
+      const gsap = window.gsap;
+      if (gsap?.globalTimeline) {
+        gsap.globalTimeline.timeScale(this.speed || 1e-3);
+      }
+    } catch {
+    }
   }
+  // ---------------------------------------------------------------------------
+  // Cleanup
+  // ---------------------------------------------------------------------------
   /** Restore all patched APIs to originals. */
   destroy() {
     if (!this.installed) return;
@@ -169,19 +227,32 @@ var TimingController = class {
       Element.prototype.animate = this._origAnimate;
       this._origAnimate = null;
     }
-    this.mediaObserver?.disconnect();
-    this.mediaObserver = null;
-    if (this.animObserver != null) {
-      this._clearInterval(this.animObserver);
-      this.animObserver = null;
+    if (this.animPollId) {
+      this._caf(this.animPollId);
+      this.animPollId = 0;
     }
     try {
       for (const anim of document.getAnimations()) {
-        anim.playbackRate = 1;
+        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 = window.gsap;
+      if (gsap?.globalTimeline) gsap.globalTimeline.timeScale(1);
+    } catch {
+    }
     delete window.__LAPSE_ORIGINAL_RAF__;
+    delete window.__saccadeInstalled;
     this.installed = false;
   }
 };
@@ -251,6 +322,10 @@ var SNAPSHOT_ATTRS = [
   "data-hover",
   "data-at-boundary",
   "data-scrubbing",
+  "data-starting-style",
+  "data-ending-style",
+  "data-panel-open",
+  "data-hidden",
   "aria-checked",
   "aria-selected",
   "aria-expanded",
@@ -264,6 +339,7 @@ var SNAPSHOT_ATTRS = [
   "checked",
   "disabled",
   "hidden",
+  "inert",
   "value",
   "class",
   "style"
@@ -395,6 +471,8 @@ var _TimelineRecorder = class _TimelineRecorder {
     // ---- 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. */
@@ -445,6 +523,7 @@ var _TimelineRecorder = class _TimelineRecorder {
     this.portalIdCounter = 0;
     this.currentPortalIds.clear();
     this.capturedPortals.clear();
+    this.seekableClones.clear();
     this.prevInlineStyles.clear();
     this.jsAnimStartTimes.clear();
     this.jsAnimLastSeen.clear();
@@ -798,6 +877,13 @@ var _TimelineRecorder = class _TimelineRecorder {
             } 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,
@@ -809,7 +895,9 @@ var _TimelineRecorder = class _TimelineRecorder {
             type,
             source,
             resolvedVars: Object.keys(resolvedVars).length > 0 ? resolvedVars : null,
-            conflicts
+            conflicts,
+            rawKeyframes: cleanedKeyframes,
+            rawTiming: { ...timing, fill: "both" }
           });
         }
         const keyframes = a.effect?.getKeyframes?.() || [];
@@ -1085,38 +1173,28 @@ var _TimelineRecorder = class _TimelineRecorder {
       } catch (_) {
       }
     }, 0);
-    if (this.frames.length > 0) {
-      const frame0 = this.frames[0];
-      if (frame0.elementSnapshots) {
-        for (const [sel, snap] of Object.entries(frame0.elementSnapshots)) {
-          const el = this.elements.get(sel);
-          if (!el || !el.isConnected) continue;
-          if (snap.__styles) {
-            for (const [prop, value] of Object.entries(snap.__styles)) {
-              if (SAFE_PROPS_SET.has(prop)) {
-                el.style.setProperty(prop, value, "important");
-              }
-            }
-          }
-          if (snap.__attrs) {
-            for (const [attr, value] of Object.entries(snap.__attrs)) {
-              if (attr === "checked") {
-                ;
-                el.checked = value === "true";
-              } else if (attr === "class" && value != null) {
-                el.className = value;
-              } else if (attr === "style") {
-              } else if (attr === "value" && value != null) {
-                ;
-                el.value = value;
-              } else if (value == null) {
-                el.removeAttribute(attr);
-              } else {
-                el.setAttribute(attr, value);
-              }
-            }
-          }
-        }
+    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;
@@ -1139,6 +1217,8 @@ 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;
@@ -1148,36 +1228,24 @@ var TimelineScrubber = class {
     this.frames = state.frames;
     this.capturedPortals = state.capturedPortals;
     this.interceptedAnimations = state.interceptedAnimations;
-    this.SAFE_PROPS_SET = state.SAFE_PROPS_SET;
+    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;
-  }
-  // ---------------------------------------------------------------------------
-  //  Selector helper — mirrors the recorder's getSelector so we can look up
-  //  elements by the same key the recorder used in frame.animations[].animationId
-  // ---------------------------------------------------------------------------
-  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);
+    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;
+        }
       }
-      current = parent;
     }
-    return parts.join(" > ");
   }
   // ---------------------------------------------------------------------------
-  //  seekTo — scrub the DOM to match a specific timestamp
+  //  seekTo — scrub to a specific timestamp using WAAPI-native seeking
   // ---------------------------------------------------------------------------
   seekTo(timeMs) {
     if (!this.frames.length) return;
@@ -1225,6 +1293,34 @@ var TimelineScrubber = class {
         }
       }
     }
+    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;
@@ -1239,34 +1335,13 @@ var TimelineScrubber = class {
       const el = this.elements.get(sel);
       if (!el || !el.isConnected) continue;
       if (el.closest?.("[data-lapse-panel]")) continue;
-      const hasAnimation = (frame.animations || []).some(
-        (a) => a.animationId.endsWith(":" + sel) || a.animationId.includes(":" + sel.split(" > ").pop())
-      );
       const snapTyped = snap;
-      if (snapTyped.__styles) {
-        for (const [prop, value] of Object.entries(snapTyped.__styles)) {
-          if (this.SAFE_PROPS_SET.has(prop) || hasAnimation) {
-            el.style.setProperty(prop, value, "important");
-          }
-        }
-      }
       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 === "class") {
-            if (value != null) el.className = value;
-          } else if (attr === "style") {
-            if (value) {
-              el.setAttribute("style", value);
-              el.style.transition = "none";
-              if (snapTyped.__styles) {
-                for (const [prop, val] of Object.entries(snapTyped.__styles)) {
-                  el.style.setProperty(prop, val, "important");
-                }
-              }
-            }
           } else if (attr === "value") {
             if (value != null) el.value = value;
           } else if (value == null) {
@@ -1277,39 +1352,31 @@ var TimelineScrubber = class {
         }
       }
     }
-    for (const anim of frame.animations || []) {
-      const firstColon = anim.animationId.indexOf(":");
-      const secondColon = anim.animationId.indexOf(":", firstColon + 1);
-      const animSel = secondColon >= 0 ? anim.animationId.substring(secondColon + 1) : "";
-      const animEl = this.elements.get(animSel);
-      if (!animEl || !animEl.isConnected) continue;
-      for (const prop of anim.properties || []) {
+    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) {
-          animEl.style.setProperty(prop.property, prop.value, "important");
+          el.style.setProperty(prop.property, prop.value, "important");
         }
       }
     }
-    const animatedSels = /* @__PURE__ */ new Set();
-    for (const anim of frame.animations || []) {
-      const fc = anim.animationId.indexOf(":");
-      const sc = anim.animationId.indexOf(":", fc + 1);
-      if (sc >= 0) animatedSels.add(anim.animationId.substring(sc + 1));
-    }
-    document.querySelectorAll(".checkbox-indicator, .radio-indicator").forEach((rawEl) => {
-      const el = rawEl;
-      const sel = this.getSelector(el);
-      if (sel && !animatedSels.has(sel)) {
-        el.style.removeProperty("opacity");
-        el.style.removeProperty("transform");
-        el.style.removeProperty("filter");
-        el.style.removeProperty("stroke-dashoffset");
-      }
-    });
   }
   // ---------------------------------------------------------------------------
   //  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();
@@ -1371,6 +1438,7 @@ var TimelineScrubber = class {
     this.elements.clear();
     this.frames.length = 0;
     this.capturedPortals.clear();
+    this.animFrameRanges.clear();
   }
 };
 
@@ -1643,7 +1711,7 @@ var SaccadeEngine = class {
     try {
       capture = this.recorder.stopRecording();
     } catch (e) {
-      console.error("[Saccade] stopRecording failed:", 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();
@@ -1664,7 +1732,8 @@ var SaccadeEngine = class {
       frames: capture.frames,
       capturedPortals: this.recorder.capturedPortalIds,
       interceptedAnimations: this.recorder.interceptedAnimations,
-      SAFE_PROPS_SET: this.recorder.SAFE_PROPS_SET
+      SAFE_PROPS_SET: this.recorder.SAFE_PROPS_SET,
+      seekableClones: this.recorder.seekableClones
     };
     this.scrubber = new TimelineScrubber(scrubberState);
     this._state = "scrubbing";
@@ -2764,14 +2833,15 @@ var PANEL_STYLES = (
 // src/react/Saccade.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Saccade({ position = "bottom-left" }) {
-  const hostRef = useRef6(null);
   const [shadowRoot, setShadowRoot] = useState4(null);
+  const hostRef = useRef6(null);
   useEffect4(() => {
-    const host = hostRef.current;
-    if (!host || host.shadowRoot) {
-      if (host?.shadowRoot) setShadowRoot(host.shadowRoot);
-      return;
-    }
+    const host = document.createElement("div");
+    host.setAttribute("data-lapse-panel", "");
+    const positionOffset = position === "top-left" ? "top:20px;left:20px" : position === "top-right" ? "top:20px;right:20px" : position === "bottom-left" ? "bottom:20px;left:20px" : "bottom:20px;right:20px";
+    host.style.cssText = `position:fixed;z-index:2147483647;pointer-events:auto;${positionOffset}`;
+    document.body.appendChild(host);
+    hostRef.current = host;
     const shadow = host.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = PANEL_STYLES;
@@ -2779,25 +2849,15 @@ function Saccade({ position = "bottom-left" }) {
     const mount = document.createElement("div");
     shadow.appendChild(mount);
     setShadowRoot(shadow);
-  }, []);
-  const positionOffset = position === "top-left" ? { top: 20, left: 20 } : position === "top-right" ? { top: 20, right: 20 } : position === "bottom-left" ? { bottom: 20, left: 20 } : { bottom: 20, right: 20 };
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      ref: hostRef,
-      "data-lapse-panel": "",
-      style: {
-        position: "fixed",
-        zIndex: 2147483647,
-        // max int — must sit above the scrub blocker (z-index: 999999)
-        pointerEvents: "auto",
-        ...positionOffset
-      },
-      children: shadowRoot && createPortal(
-        /* @__PURE__ */ jsx5(SaccadeProvider, { children: /* @__PURE__ */ jsx5(SaccadePanel, {}) }),
-        shadowRoot.lastElementChild || shadowRoot
-      )
-    }
+    return () => {
+      host.remove();
+      hostRef.current = null;
+    };
+  }, [position]);
+  if (!shadowRoot) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx5(SaccadeProvider, { children: /* @__PURE__ */ jsx5(SaccadePanel, {}) }),
+    shadowRoot.lastElementChild || shadowRoot
   );
 }
 export {