saccade 0.0.1

package/dist/index.cjs

@@ -0,0 +1,2822 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Lapse: () => Lapse,
+  LapseEngine: () => LapseEngine,
+  LapseProvider: () => LapseProvider,
+  useLapseEngine: () => useLapseEngine,
+  useSpeed: () => useSpeed,
+  useTimeline: () => useTimeline
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/react/Lapse.tsx
+var import_react7 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/react/LapseContext.tsx
+var import_react = require("react");
+
+// src/core/timing.ts
+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._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();
+  }
+  getVirtualTime() {
+    const realElapsed = this._perfNow() - this.realBaseline;
+    return this.virtualBaseline + realElapsed * this.speed;
+  }
+  reanchor() {
+    const virtualNow = this.getVirtualTime();
+    this.realBaseline = this._perfNow();
+    this.virtualBaseline = virtualNow;
+  }
+  /** Install timing patches. Safe to call multiple times. */
+  install() {
+    if (this.installed) return;
+    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) {
+        anim.playbackRate = self.speed || 1e-3;
+      }
+      return anim;
+    };
+    performance.now = () => self.getVirtualTime();
+    const dateBaseline = this._dateNow();
+    Date.now = () => dateBaseline + self.getVirtualTime();
+    window.requestAnimationFrame = (callback) => {
+      return self._raf(() => {
+        callback(self.getVirtualTime());
+      });
+    };
+    window.cancelAnimationFrame = this._caf;
+    window.setTimeout = ((handler, delay, ...args) => {
+      const scaledDelay = (delay ?? 0) / (self.speed || 1);
+      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.speed || 1);
+        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.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 });
+    }
+  }
+  /** 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();
+  }
+  /** Patch playbackRate on all active CSS transitions/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;
+      }
+    } 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 {
+        }
+      }, 100);
+    }
+  }
+  getSpeed() {
+    return this.speed;
+  }
+  /** 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;
+    }
+    this.mediaObserver?.disconnect();
+    this.mediaObserver = null;
+    if (this.animObserver != null) {
+      this._clearInterval(this.animObserver);
+      this.animObserver = null;
+    }
+    try {
+      for (const anim of document.getAnimations()) {
+        anim.playbackRate = 1;
+      }
+    } catch {
+    }
+    delete window.__LAPSE_ORIGINAL_RAF__;
+    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",
+  "aria-checked",
+  "aria-selected",
+  "aria-expanded",
+  "aria-pressed",
+  "aria-hidden",
+  "aria-disabled",
+  "aria-valuenow",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-invalid",
+  "checked",
+  "disabled",
+  "hidden",
+  "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 = [];
+    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.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 (_) {
+            }
+          }
+          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
+          });
+        }
+        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()) {
+        anim.cancel();
+      }
+    } catch (_) {
+    }
+    window.requestAnimationFrame = () => 0;
+    const noTransitions = document.createElement("style");
+    noTransitions.id = "__lapse-no-transitions";
+    noTransitions.textContent = "*, *::before, *::after { transition: none !important; animation: none !important; }";
+    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;
+    try {
+      const lapseStyle = document.createElement("style");
+      lapseStyle.id = "__lapse-state-rules";
+      let allCss = "";
+      for (const style of document.querySelectorAll("style")) {
+        if (style.id === "__lapse-state-rules") continue;
+        allCss += style.textContent + "\n";
+      }
+      for (const sheet of document.styleSheets) {
+        try {
+          let walk2 = function(rules) {
+            for (const rule of rules) {
+              if (rule.cssRules) {
+                walk2(rule.cssRules);
+                continue;
+              }
+              const t = rule.cssText;
+              if (t && (t.includes(":hover") || t.includes(":focus"))) {
+                allCss += t + "\n";
+              }
+            }
+          };
+          var walk = walk2;
+          walk2(sheet.cssRules);
+        } catch (_) {
+        }
+      }
+      const stateRegex = /([^{}]*(?::hover|:focus-visible|:focus-within|:focus(?!-))[^{}]*)\{([^{}]*)\}/g;
+      let match;
+      while ((match = stateRegex.exec(allCss)) !== null) {
+        const selector = match[1].trim();
+        const body = match[2].trim();
+        if (!body) continue;
+        const newBody = body.replace(
+          /([^;:]+):\s*([^;]+)(;|$)/g,
+          (m, prop, val, end) => {
+            if (val.includes("!important")) return m;
+            return prop + ": " + val.trim() + " !important" + end;
+          }
+        );
+        if (selector.includes(":hover")) {
+          lapseStyle.textContent += selector.replace(/:hover/g, "[data-lapse-hover]") + " { " + newBody + " }\n";
+        }
+        if (selector.includes(":focus-visible")) {
+          lapseStyle.textContent += selector.replace(/:focus-visible/g, "[data-lapse-focus]") + " { " + newBody + " }\n";
+        } else if (selector.includes(":focus-within")) {
+          lapseStyle.textContent += selector.replace(
+            /:focus-within/g,
+            ":has([data-lapse-focus])"
+          ) + " { " + newBody + " }\n";
+        } else if (selector.includes(":focus")) {
+          lapseStyle.textContent += selector.replace(/:focus(?!-)/g, "[data-lapse-focus]") + " { " + newBody + " }\n";
+        }
+      }
+      document.head.appendChild(lapseStyle);
+      this.lapseStyleEl = lapseStyle;
+    } catch (_) {
+    }
+    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);
+              }
+            }
+          }
+        }
+      }
+    }
+    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) {
+    /** 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.SAFE_PROPS_SET = state.SAFE_PROPS_SET;
+    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);
+      }
+      current = parent;
+    }
+    return parts.join(" > ");
+  }
+  // ---------------------------------------------------------------------------
+  //  seekTo — scrub the DOM to match a specific timestamp
+  // ---------------------------------------------------------------------------
+  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;
+        }
+      }
+    }
+    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 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 === "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) {
+            el.removeAttribute(attr);
+          } else {
+            el.setAttribute(attr, value);
+          }
+        }
+      }
+    }
+    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 || []) {
+        if (prop.value) {
+          animEl.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 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();
+  }
+};
+
+// 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 = "standard") {
+  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 === "compact") {
+    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 === "forensic") {
+    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 === "forensic") {
+        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 LapseEngine = 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();
+  }
+  // -- 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
+      };
+    }
+    const capture = this.recorder.stopRecording();
+    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
+    };
+    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 = "standard") {
+    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/react/LapseContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LapseContext = (0, import_react.createContext)(null);
+function LapseProvider({ children }) {
+  const engineRef = (0, import_react.useRef)(null);
+  if (!engineRef.current) {
+    engineRef.current = new LapseEngine();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LapseContext.Provider, { value: engineRef.current, children });
+}
+function useLapseEngine() {
+  const engine = (0, import_react.useContext)(LapseContext);
+  if (!engine) throw new Error("useLapseEngine must be used within <LapseProvider>");
+  return engine;
+}
+
+// src/react/LapsePanel.tsx
+var import_react6 = require("react");
+
+// src/react/Timeline.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DETAIL_LABELS = {
+  compact: "Compact",
+  standard: "Standard",
+  detailed: "Detailed",
+  forensic: "Forensic"
+};
+function CopyCheckIcon({ copied }) {
+  const spring = "cubic-bezier(0.34, 1.15, 0.64, 1)";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        stroke: "currentColor",
+        strokeWidth: "2",
+        d: "M7 4v-.5A1.5 1.5 0 0 1 8.5 2h4A1.5 1.5 0 0 1 14 3.5v4A1.5 1.5 0 0 1 12.5 9H12",
+        style: {
+          opacity: copied ? 0 : 1,
+          transition: copied ? "opacity 0.1s ease-out" : "opacity 0.15s ease-out 0.18s"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "rect",
+      {
+        stroke: copied ? "#33C664" : "currentColor",
+        fill: "none",
+        style: {
+          x: copied ? 1.5 : 2,
+          y: copied ? 1.5 : 7,
+          width: copied ? 13 : 7,
+          height: copied ? 13 : 7,
+          rx: copied ? 6.5 : 1.5,
+          ry: copied ? 6.5 : 1.5,
+          strokeWidth: 2,
+          transition: copied ? `x 0.28s ${spring}, y 0.28s ${spring}, width 0.28s ${spring}, height 0.28s ${spring}, rx 0.28s ${spring}, ry 0.28s ${spring}` : "x 0.22s ease-in-out, y 0.22s ease-in-out, width 0.22s ease-in-out, height 0.22s ease-in-out, rx 0.22s ease-in-out, ry 0.22s ease-in-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "m5.5 8.5 2 1.5 2.75-3.75",
+        stroke: copied ? "#33C664" : "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none",
+        style: {
+          strokeDasharray: 12,
+          strokeDashoffset: copied ? 0 : 12,
+          opacity: copied ? 1 : 0,
+          transition: copied ? "stroke-dashoffset 0.25s ease-out 0.1s, opacity 0.08s ease-out 0.08s" : "stroke-dashoffset 0.12s ease-in, opacity 0.08s ease-in"
+        }
+      }
+    )
+  ] });
+}
+var DETAIL_BRIGHT_COUNT = {
+  compact: 1,
+  standard: 2,
+  detailed: 3,
+  forensic: 4
+};
+function DetailIcon({ level }) {
+  const bright = DETAIL_BRIGHT_COUNT[level];
+  const ys = [2, 6, 10, 14];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: ys.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "2",
+      d: "M2 0h12",
+      transform: `translate(0, ${y})`,
+      style: {
+        opacity: i < bright ? 1 : 0.4,
+        transition: "opacity 0.2s ease-out"
+      }
+    },
+    y
+  )) });
+}
+function Timeline({
+  state,
+  capture,
+  scrubTime,
+  copied,
+  onStartRecording,
+  onStopRecording,
+  onSeek,
+  onRelease,
+  onExportLLM,
+  detailLevel,
+  onCycleDetailLevel
+}) {
+  const scrubberRef = (0, import_react2.useRef)(null);
+  const isDragging = (0, import_react2.useRef)(false);
+  const [hasLeftRecord, setHasLeftRecord] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (state === "recording") setHasLeftRecord(false);
+  }, [state]);
+  const handleScrub = (0, import_react2.useCallback)(
+    (e) => {
+      if (!capture || !scrubberRef.current) return;
+      const rect = scrubberRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      onSeek(x * capture.duration);
+    },
+    [capture, onSeek]
+  );
+  const handleMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      isDragging.current = true;
+      handleScrub(e);
+      const handleMouseMove = (e2) => {
+        if (!isDragging.current || !capture || !scrubberRef.current) return;
+        const rect = scrubberRef.current.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width));
+        onSeek(x * capture.duration);
+      };
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [capture, handleScrub, onSeek]
+  );
+  const progress = capture && capture.duration > 0 ? scrubTime / capture.duration : 0;
+  const isScrubbing = state === "scrubbing";
+  const isRecording = state === "recording";
+  function handleMainClick() {
+    if (state === "idle") onStartRecording();
+    else if (state === "recording") onStopRecording();
+    else if (state === "scrubbing") onRelease();
+  }
+  const tooltip = state === "idle" ? "Record" : state === "recording" ? "Stop" : "Clear";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        onClick: handleMainClick,
+        className: `lapse-btn lapse-btn-icon lapse-main-btn ${isRecording ? "lapse-record-btn--active" : ""}`,
+        "data-tooltip": tooltip,
+        onMouseLeave: isRecording ? () => setHasLeftRecord(true) : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: `lapse-morph-icon ${state === "idle" ? "lapse-morph-icon--active" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: "M8 .5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: `lapse-morph-icon ${isRecording ? "lapse-morph-icon--active" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "rect",
+                {
+                  x: hasLeftRecord ? "1.5" : "0.5",
+                  y: hasLeftRecord ? "1.5" : "0.5",
+                  width: hasLeftRecord ? "13" : "15",
+                  height: hasLeftRecord ? "13" : "15",
+                  rx: hasLeftRecord ? "3" : "7.5",
+                  fill: "currentColor",
+                  className: "lapse-record-shape"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              className: `lapse-morph-icon ${isScrubbing ? "lapse-morph-icon--active" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m5.5 3-3 3m0 0h7a3.5 3.5 0 1 1 0 7h-2m-5-7 3 3" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `lapse-scrub-wrap ${isScrubbing ? "lapse-scrub-wrap--visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lapse-scrub-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          ref: scrubberRef,
+          onMouseDown: handleMouseDown,
+          className: "lapse-scrub-track",
+          children: [
+            capture && capture.duration > 0 && (() => {
+              const seen = /* @__PURE__ */ new Set();
+              const times = [];
+              for (const frame of capture.frames) {
+                if (!frame.animations) continue;
+                for (const fa of frame.animations) {
+                  if (!seen.has(fa.animationId)) {
+                    seen.add(fa.animationId);
+                    times.push(frame.time);
+                  }
+                }
+              }
+              times.sort((a, b) => a - b);
+              const clusters = [];
+              for (const t of times) {
+                const last = clusters[clusters.length - 1];
+                if (last && t - last.time < 200) {
+                  last.count++;
+                } else {
+                  clusters.push({ time: t, count: 1 });
+                }
+              }
+              return clusters.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: "lapse-scrub-marker",
+                  style: { left: `${c.time / capture.duration * 100}%` }
+                },
+                i
+              ));
+            })(),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lapse-scrub-fill", style: { width: `calc(${progress * 100}% + 4px)` } }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lapse-scrub-playhead", style: { left: `clamp(4px, ${progress * 100}%, calc(100% - 4px))` } }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lapse-scrub-label", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+              Math.round(scrubTime),
+              "ms / ",
+              Math.round(capture?.duration ?? 0),
+              "ms"
+            ] }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: onCycleDetailLevel,
+          className: "lapse-btn lapse-btn-icon",
+          "data-tooltip": DETAIL_LABELS[detailLevel],
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DetailIcon, { level: detailLevel })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: onExportLLM, className: "lapse-btn lapse-btn-icon", "data-tooltip": copied ? "Copied!" : "Copy", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyCheckIcon, { copied }) })
+    ] }) })
+  ] });
+}
+
+// src/react/SpeedControl.tsx
+var import_react3 = require("react");
+
+// src/react/constants.ts
+var SPEED_PRESETS = [0.1, 0.25, 0.5, 0.75, 1];
+var SPEED_MIN = 0.05;
+var SPEED_MAX = 5;
+function formatSpeed(speed) {
+  if (speed >= 0.1) return `${speed}\xD7`;
+  return `${speed.toFixed(2)}\xD7`;
+}
+
+// src/react/SpeedControl.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SPEEDS = [1, 0.75, 0.5, 0.25, 0.1];
+var SPEED_ANGLES = {
+  0.1: 225,
+  // 7 o'clock
+  0.25: 315,
+  // 10 o'clock
+  0.5: 0,
+  // 12 o'clock
+  0.75: 45,
+  // 2 o'clock
+  1: 135
+  // 4 o'clock
+};
+var HAND_PATHS = {
+  0.1: "M7.293 5.293a1 1 0 1 1 1.414 1.414l-1.5 1.5a1 1 0 1 1-1.414-1.414l1.5-1.5Z",
+  0.25: "M5.793 5.794a1 1 0 0 1 1.414 0l1.5 1.499a1 1 0 0 1-1.414 1.414l-1.5-1.499a1 1 0 0 1 0-1.414Z",
+  0.5: "M8 5a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1Z",
+  0.75: "M8.793 5.293a1 1 0 0 1 1.414 1.414l-1.5 1.5a1 1 0 0 1-1.414-1.414l1.5-1.5Z",
+  1: "M7.293 8.293a1 1 0 0 1 1.414 0l1.5 1.5a1 1 0 1 1-1.414 1.414l-1.5-1.5a1 1 0 0 1 0-1.414Z"
+};
+function SpeedControl({ speed, isPaused, onSetSpeed, onTogglePause }) {
+  const currentIndex = SPEEDS.findIndex((s) => Math.abs(speed - s) < 1e-3);
+  const activeIndex = currentIndex >= 0 ? currentIndex : 0;
+  const prevAngleRef = (0, import_react3.useRef)(SPEED_ANGLES[SPEEDS[activeIndex]]);
+  const cumulativeRef = (0, import_react3.useRef)(SPEED_ANGLES[SPEEDS[activeIndex]]);
+  const directionRef = (0, import_react3.useRef)(1);
+  const forceClockwiseRef = (0, import_react3.useRef)(false);
+  function cycle() {
+    if (isPaused) {
+      onTogglePause();
+      return;
+    }
+    let next = activeIndex + directionRef.current;
+    if (next >= SPEEDS.length) {
+      directionRef.current = -1;
+      next = activeIndex - 1;
+    } else if (next < 0) {
+      directionRef.current = 1;
+      next = activeIndex + 1;
+    }
+    onSetSpeed(SPEEDS[next]);
+  }
+  const targetAngle = isPaused ? 180 : SPEED_ANGLES[SPEEDS[activeIndex]] ?? 135;
+  if (targetAngle !== prevAngleRef.current) {
+    let delta = targetAngle - prevAngleRef.current;
+    if (isPaused) {
+      while (delta >= 0) delta -= 360;
+    } else if (forceClockwiseRef.current) {
+      while (delta <= 0) delta += 360;
+      forceClockwiseRef.current = false;
+    } else {
+      while (delta > 180) delta -= 360;
+      while (delta < -180) delta += 360;
+    }
+    cumulativeRef.current += delta;
+    prevAngleRef.current = targetAngle;
+  }
+  const holdTimerRef = (0, import_react3.useRef)(null);
+  const didHoldRef = (0, import_react3.useRef)(false);
+  const startHold = (0, import_react3.useCallback)(() => {
+    didHoldRef.current = false;
+    holdTimerRef.current = setTimeout(() => {
+      didHoldRef.current = true;
+      forceClockwiseRef.current = true;
+      directionRef.current = 1;
+      onSetSpeed(1);
+    }, 240);
+  }, [onSetSpeed]);
+  const endHold = (0, import_react3.useCallback)(() => {
+    if (holdTimerRef.current) clearTimeout(holdTimerRef.current);
+    holdTimerRef.current = null;
+  }, []);
+  const handleClick = (0, import_react3.useCallback)(() => {
+    if (didHoldRef.current) {
+      didHoldRef.current = false;
+      return;
+    }
+    cycle();
+  }, [cycle]);
+  const currentSpeed = SPEEDS[activeIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lapse-speed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        onClick: onTogglePause,
+        className: "lapse-btn lapse-btn-icon lapse-playpause",
+        "data-tooltip": isPaused ? "Play" : "Pause",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: `lapse-playpause-icon ${isPaused ? "lapse-playpause-icon--active" : ""}`, style: { marginLeft: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2", d: "M3 12.821V3.18a1 1 0 0 1 1.476-.88l8.9 4.822a1 1 0 0 1 0 1.758l-8.9 4.821A1 1 0 0 1 3 12.821Z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: `lapse-playpause-icon ${!isPaused ? "lapse-playpause-icon--active" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2", d: "M3.5 2.5v11m9-11v11" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        onClick: handleClick,
+        onMouseDown: startHold,
+        onMouseUp: endHold,
+        onMouseLeave: endHold,
+        className: "lapse-speed-cycle",
+        "data-tooltip": formatSpeed(speed),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "lapse-speed-clock", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "currentColor", d: "M8 .5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { style: { transform: `rotate(${cumulativeRef.current}deg)`, transformOrigin: "8px 8px", transition: "transform 0.4s cubic-bezier(0, 0.55, 0.45, 1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "currentColor", d: HAND_PATHS[0.5] }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/react/useTimeline.ts
+var import_react4 = require("react");
+var DETAIL_LEVELS = ["compact", "standard", "detailed", "forensic"];
+function useTimeline() {
+  const engine = useLapseEngine();
+  const state = (0, import_react4.useSyncExternalStore)(
+    (cb) => engine.subscribe(cb),
+    () => engine.state
+  );
+  const [capture, setCapture] = (0, import_react4.useState)(null);
+  const [scrubTime, setScrubTime] = (0, import_react4.useState)(0);
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [exportFilter, setExportFilter] = (0, import_react4.useState)("all-animations");
+  const [detailLevel, setDetailLevel] = (0, import_react4.useState)("standard");
+  const copiedTimeout = (0, import_react4.useRef)(null);
+  const pendingSeek = (0, import_react4.useRef)(null);
+  const rafId = (0, import_react4.useRef)(0);
+  (0, import_react4.useEffect)(() => {
+    if (state === "scrubbing" && !capture) {
+      const engineCapture = engine.getCapture();
+      if (engineCapture) {
+        setCapture(engineCapture);
+        setScrubTime(0);
+      }
+    } else if (state === "idle") {
+      setCapture(null);
+      setScrubTime(0);
+    }
+  }, [state, capture, engine]);
+  const startRecording = (0, import_react4.useCallback)(
+    (boundingBox) => {
+      setCapture(null);
+      setScrubTime(0);
+      engine.startRecording(boundingBox);
+    },
+    [engine]
+  );
+  const stopRecording = (0, import_react4.useCallback)(() => {
+    const result = engine.stopRecording();
+    setCapture(result);
+    setScrubTime(0);
+  }, [engine]);
+  const seek = (0, import_react4.useCallback)(
+    (timeMs) => {
+      setScrubTime(timeMs);
+      pendingSeek.current = timeMs;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(() => {
+          rafId.current = 0;
+          if (pendingSeek.current !== null) {
+            engine.seekTo(pendingSeek.current);
+            pendingSeek.current = null;
+          }
+        });
+      }
+    },
+    [engine]
+  );
+  const release = (0, import_react4.useCallback)(() => {
+    if (rafId.current) {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = 0;
+    }
+    pendingSeek.current = null;
+    engine.release();
+    setCapture(null);
+    setScrubTime(0);
+  }, [engine]);
+  const cycleDetailLevel = (0, import_react4.useCallback)(() => {
+    setDetailLevel((prev) => {
+      const idx = DETAIL_LEVELS.indexOf(prev);
+      return DETAIL_LEVELS[(idx + 1) % DETAIL_LEVELS.length];
+    });
+  }, []);
+  const exportLLM = (0, import_react4.useCallback)(
+    (filter) => {
+      if (!capture) return "";
+      const f = filter || exportFilter || "active";
+      const t = Number(scrubTime) || 0;
+      const text = engine.exportForLLM(t, f, detailLevel);
+      navigator.clipboard.writeText(text).catch(() => {
+      });
+      setCopied(true);
+      if (copiedTimeout.current) clearTimeout(copiedTimeout.current);
+      copiedTimeout.current = setTimeout(() => setCopied(false), 2e3);
+      return text;
+    },
+    [engine, capture, scrubTime, exportFilter, detailLevel]
+  );
+  return {
+    state,
+    capture,
+    scrubTime,
+    copied,
+    exportFilter,
+    setExportFilter,
+    detailLevel,
+    cycleDetailLevel,
+    startRecording,
+    stopRecording,
+    seek,
+    release,
+    exportLLM
+  };
+}
+
+// src/react/useSpeed.ts
+var import_react5 = require("react");
+function useSpeed() {
+  const engine = useLapseEngine();
+  const [speed, setSpeedState] = (0, import_react5.useState)(1);
+  const [previousSpeed, setPreviousSpeed] = (0, import_react5.useState)(1);
+  const [isPaused, setIsPaused] = (0, import_react5.useState)(false);
+  const setSpeed = (0, import_react5.useCallback)(
+    (value) => {
+      const clamped = Math.max(SPEED_MIN, Math.min(SPEED_MAX, value));
+      setSpeedState(clamped);
+      setIsPaused(false);
+      setPreviousSpeed(clamped);
+      engine.setSpeed(clamped);
+    },
+    [engine]
+  );
+  const togglePause = (0, import_react5.useCallback)(() => {
+    if (isPaused) {
+      setSpeedState(previousSpeed);
+      setIsPaused(false);
+      engine.setSpeed(previousSpeed);
+    } else {
+      setPreviousSpeed(speed);
+      setSpeedState(0);
+      setIsPaused(true);
+      engine.setSpeed(0);
+    }
+  }, [engine, isPaused, previousSpeed, speed]);
+  const stepDown = (0, import_react5.useCallback)(() => {
+    const currentIndex = SPEED_PRESETS.findIndex((p) => p >= speed);
+    const nextIndex = Math.max(0, (currentIndex <= 0 ? 1 : currentIndex) - 1);
+    setSpeed(SPEED_PRESETS[nextIndex]);
+  }, [speed, setSpeed]);
+  const stepUp = (0, import_react5.useCallback)(() => {
+    const currentIndex = SPEED_PRESETS.findIndex((p) => p > speed);
+    const nextIndex = Math.min(
+      SPEED_PRESETS.length - 1,
+      currentIndex < 0 ? SPEED_PRESETS.length - 1 : currentIndex
+    );
+    setSpeed(SPEED_PRESETS[nextIndex]);
+  }, [speed, setSpeed]);
+  (0, import_react5.useEffect)(() => {
+    function handleKeyDown(e) {
+      if (e.target instanceof HTMLInputElement) return;
+      switch (e.key) {
+        case "[":
+          stepDown();
+          break;
+        case "]":
+          stepUp();
+          break;
+        case "\\":
+          setSpeed(1);
+          break;
+        case "s":
+          togglePause();
+          break;
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [stepDown, stepUp, setSpeed, togglePause]);
+  return { speed, isPaused, setSpeed, togglePause };
+}
+
+// src/react/LapsePanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function LapsePanel() {
+  const timeline = useTimeline();
+  const { speed, isPaused, setSpeed, togglePause } = useSpeed();
+  const panelRef = (0, import_react6.useRef)(null);
+  const warmTimeout = (0, import_react6.useRef)(null);
+  const handleMouseOver = (0, import_react6.useCallback)((e) => {
+    const target = e.target.closest?.("[data-tooltip]");
+    if (target && panelRef.current) {
+      panelRef.current.classList.add("lapse-tooltip-warm");
+      if (warmTimeout.current) clearTimeout(warmTimeout.current);
+    }
+  }, []);
+  const handleMouseOut = (0, import_react6.useCallback)((e) => {
+    const related = e.relatedTarget;
+    const stillOnTooltip = related?.closest?.("[data-tooltip]");
+    if (!stillOnTooltip) {
+      warmTimeout.current = setTimeout(() => {
+        panelRef.current?.classList.remove("lapse-tooltip-warm");
+      }, 300);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: panelRef,
+      className: "lapse-panel",
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Timeline,
+          {
+            state: timeline.state,
+            capture: timeline.capture,
+            scrubTime: timeline.scrubTime,
+            copied: timeline.copied,
+            exportFilter: timeline.exportFilter,
+            onSetExportFilter: timeline.setExportFilter,
+            onStartRecording: () => timeline.startRecording(),
+            onStopRecording: timeline.stopRecording,
+            onSeek: timeline.seek,
+            onRelease: timeline.release,
+            onExportLLM: () => timeline.exportLLM(),
+            detailLevel: timeline.detailLevel,
+            onCycleDetailLevel: timeline.cycleDetailLevel
+          }
+        ),
+        timeline.state !== "scrubbing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `lapse-speed-wrap ${timeline.state === "recording" ? "lapse-speed-wrap--hidden" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          SpeedControl,
+          {
+            speed,
+            isPaused,
+            onSetSpeed: setSpeed,
+            onTogglePause: togglePause
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/react/styles.ts
+var PANEL_STYLES = (
+  /* css */
+  `
+  :host {
+    --lapse-bg: #1a1a1a;
+    --lapse-surface: #2a2a2a;
+    --lapse-border: #3a3a3a;
+    --lapse-text: #e5e5e5;
+    --lapse-text-muted: #888;
+    --lapse-accent: #6d9fff;
+    --lapse-speed-active: #5b8def;
+    --lapse-danger: #ff6b6b;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--lapse-text);
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Tooltips */
+  [data-tooltip] {
+    position: relative;
+  }
+  [data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%) translateY(2px) scale(0.96);
+    padding: 4px 10px;
+    border-radius: 6px;
+    background: #0d0d0d;
+    border: 0.5px solid var(--lapse-border);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    color: var(--lapse-text);
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease-out 0.65s, transform 0.15s ease-out 0.65s;
+  }
+  [data-tooltip]:hover::after {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  /* Warm: when panel already has a tooltip showing, new ones appear instantly */
+  .lapse-panel.lapse-tooltip-warm [data-tooltip]::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+
+  /* Panel container */
+  .lapse-panel {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    background: var(--lapse-bg);
+    border: 0.5px solid var(--lapse-border);
+    border-radius: 999px;
+    padding: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
+    overflow: visible;
+  }
+
+  /* Buttons */
+  .lapse-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, color 0.15s;
+  }
+
+  .lapse-btn-surface {
+    background: transparent;
+    color: var(--lapse-text-muted);
+  }
+  .lapse-btn-surface:hover {
+    background: var(--lapse-surface);
+    color: var(--lapse-text);
+  }
+
+  .lapse-btn-recording {
+    background: rgba(239, 68, 68, 0.1);
+    color: #f87171;
+  }
+  .lapse-btn-recording:hover { background: rgba(239, 68, 68, 0.2); }
+
+  .lapse-btn-accent {
+    background: rgba(109, 159, 255, 0.2);
+    color: var(--lapse-accent);
+    font-size: 13px;
+  }
+  .lapse-btn-accent:hover { background: rgba(109, 159, 255, 0.3); }
+
+  .lapse-btn-icon {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    justify-content: center;
+    background: transparent;
+    color: var(--lapse-text-muted);
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+  .lapse-btn-icon:hover {
+    background: var(--lapse-surface);
+    color: var(--lapse-text);
+  }
+  .lapse-record-btn--active:hover {
+    color: #ef4444;
+  }
+
+  /* Main button \u2014 icon morphing (record / recording / close) */
+  .lapse-main-btn {
+    position: relative;
+  }
+
+  .lapse-morph-icon {
+    position: absolute;
+    opacity: 0;
+    scale: 0.4;
+    filter: blur(6px);
+    transition: opacity 0.2s ease, scale 0.2s ease, filter 0.2s ease;
+    display: block;
+  }
+  .lapse-morph-icon--active {
+    opacity: 1;
+    scale: 1;
+    filter: blur(0);
+  }
+
+  .lapse-record-shape {
+    animation: lapse-pulse 1.5s ease-in-out infinite;
+    transition: x 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                y 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                width 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                height 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                rx 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .lapse-record-btn--active {
+    color: #ef4444;
+  }
+
+  @keyframes lapse-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  /* Scrub content \u2014 expands when entering scrubbing state */
+  .lapse-scrub-wrap {
+    display: grid;
+    grid-template-columns: 0fr;
+    margin-left: 0;
+    transition: grid-template-columns 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                margin-left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .lapse-scrub-wrap > * {
+    min-width: 0;
+  }
+  .lapse-scrub-wrap--visible {
+    grid-template-columns: 1fr;
+    margin-left: 6px;
+  }
+
+  .lapse-scrub-inner {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .lapse-scrub-inner > * {
+    transform-origin: left center;
+    transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.05s,
+                transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.05s,
+                filter 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
+  }
+  .lapse-scrub-wrap:not(.lapse-scrub-wrap--visible) .lapse-scrub-inner > * {
+    opacity: 0;
+    transform: scale(0.85);
+    filter: blur(10px);
+    transition-delay: 0ms;
+    transition-duration: 0.15s;
+  }
+
+  /* Spinner */
+  .lapse-spinner {
+    width: 10px;
+    height: 10px;
+    animation: lapse-spin 1s linear infinite;
+  }
+  .lapse-spinner-track { opacity: 0.25; }
+  .lapse-spinner-head { opacity: 0.75; }
+
+  @keyframes lapse-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Scrubber */
+  .lapse-scrub-track {
+    position: relative;
+    height: 32px;
+    width: 200px;
+    cursor: pointer;
+    border-radius: 6px;
+    background: var(--lapse-surface);
+    user-select: none;
+    overflow: hidden;
+  }
+
+  .lapse-scrub-marker {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: rgba(109, 159, 255, 0.5);
+    pointer-events: none;
+  }
+
+  .lapse-scrub-fill {
+    position: absolute;
+    inset: 0;
+    right: auto;
+    background: rgba(109, 159, 255, 0.1);
+    pointer-events: none;
+  }
+
+  .lapse-scrub-playhead {
+    position: absolute;
+    top: 4px;
+    bottom: 4px;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--lapse-accent);
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  .lapse-scrub-label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 2px;
+    pointer-events: none;
+  }
+  .lapse-scrub-label span {
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    color: var(--lapse-text-muted);
+  }
+
+  /* Filter buttons */
+  .lapse-filter-group {
+    display: flex;
+    border-radius: 6px;
+    background: var(--lapse-surface);
+    overflow: hidden;
+  }
+
+  .lapse-filter-btn {
+    height: 32px;
+    padding: 0 8px;
+    border: none;
+    background: transparent;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--lapse-text-muted);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+  }
+  .lapse-filter-btn:hover { color: var(--lapse-text); }
+  .lapse-filter-btn--active {
+    background: rgba(109, 159, 255, 0.2);
+    color: var(--lapse-accent);
+  }
+
+  /* Chevron */
+  .lapse-chevron {
+    transition: transform 0.2s;
+  }
+  .lapse-chevron--open {
+    transform: rotate(90deg);
+  }
+
+  /* Animation tags */
+  .lapse-anim-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .lapse-anim-tag {
+    background: rgba(109, 159, 255, 0.1);
+    color: var(--lapse-accent);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 13px;
+  }
+
+  /* Speed control wrapper \u2014 collapses when recording */
+  .lapse-speed-wrap {
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-left: 6px;
+    transition: grid-template-columns 0.4s cubic-bezier(0.19, 1, 0.22, 1),
+                margin-left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .lapse-speed-wrap > * {
+    min-width: 0;
+  }
+  .lapse-speed-wrap--hidden {
+    grid-template-columns: 0fr;
+    margin-left: 0;
+    pointer-events: none;
+  }
+  .lapse-speed-wrap .lapse-speed {
+    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
+                filter 0.8s cubic-bezier(0.19, 1, 0.22, 1),
+                opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .lapse-speed-wrap--hidden .lapse-speed {
+    transform: translateX(-8px) scale(0.4);
+    filter: blur(10px);
+    opacity: 0;
+  }
+
+  /* Speed control */
+  .lapse-speed {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* Speed cycle button */
+  .lapse-speed-cycle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 8px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--lapse-text-muted);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    white-space: nowrap;
+  }
+  .lapse-speed-cycle:hover {
+    background: var(--lapse-surface);
+    color: var(--lapse-text);
+  }
+
+  /* Play/pause transition */
+  .lapse-playpause {
+    position: relative;
+  }
+
+  .lapse-playpause-icon {
+    position: absolute;
+    opacity: 0;
+    scale: 0.4;
+    filter: blur(6px);
+    transition: opacity 0.2s ease, scale 0.2s ease, filter 0.2s ease;
+    display: block;
+  }
+
+  .lapse-playpause-icon--active {
+    opacity: 1;
+    scale: 1;
+    filter: blur(0);
+  }
+
+  .lapse-speed-cycle svg {
+    display: block;
+  }
+`
+);
+
+// src/react/Lapse.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Lapse({ position = "bottom-left" }) {
+  const hostRef = (0, import_react7.useRef)(null);
+  const [shadowRoot, setShadowRoot] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host || host.shadowRoot) {
+      if (host?.shadowRoot) setShadowRoot(host.shadowRoot);
+      return;
+    }
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = PANEL_STYLES;
+    shadow.appendChild(style);
+    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__ */ (0, import_jsx_runtime5.jsx)(
+    "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 && (0, import_react_dom.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LapseProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LapsePanel, {}) }),
+        shadowRoot.lastElementChild || shadowRoot
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Lapse,
+  LapseEngine,
+  LapseProvider,
+  useLapseEngine,
+  useSpeed,
+  useTimeline
+});
+//# sourceMappingURL=index.cjs.map