@lvce-editor/renderer-process 30.60.0 → 30.60.2

package/dist/sessionReplayPlayer.js

@@ -1,40 +1,3 @@
-const createActivityChart = document => {
-  const namespace = 'http://www.w3.org/2000/svg';
-  const element = document.createElementNS(namespace, 'svg');
-  element.classList.add('SessionReplayActivity');
-  element.setAttribute('viewBox', '0 0 240 48');
-  element.setAttribute('preserveAspectRatio', 'none');
-  element.setAttribute('role', 'img');
-  element.setAttribute('aria-label', 'Session replay activity');
-  const title = document.createElementNS(namespace, 'title');
-  title.textContent = 'Recorded activity over time. Click to seek, or use the position slider with the keyboard.';
-  const path = document.createElementNS(namespace, 'path');
-  const cursor = document.createElementNS(namespace, 'line');
-  cursor.classList.add('SessionReplayActivityCursor');
-  cursor.setAttribute('y1', '0');
-  cursor.setAttribute('y2', '48');
-  cursor.setAttribute('vector-effect', 'non-scaling-stroke');
-  element.append(title, path, cursor);
-  return {
-    element,
-    setActivity(counts) {
-      const maximum = Math.max(1, ...counts);
-      const width = 240 / counts.length;
-      const segments = counts.map((count, index) => {
-        if (!count) return '';
-        const height = count / maximum * 44;
-        return `M${index * width} 48v-${height}h${width}v${height}z`;
-      });
-      path.setAttribute('d', segments.join(' '));
-    },
-    setPosition(fraction) {
-      const x = String(fraction * 240);
-      cursor.setAttribute('x1', x);
-      cursor.setAttribute('x2', x);
-    }
-  };
-};
-
 // Walk the structured-clone graph, including collections and shared buffer views.
 const getTransferrables = value => {
   const seen = [];
@@ -113,176 +76,6 @@ const createClient = url => {
   };
 };
 
-const playerStyles = `
-.SessionReplay > .SessionReplayControls {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  flex: none;
-  align-items: center;
-  gap: 0 18px;
-  margin: 12px 16px 16px;
-  padding: 10px 16px 10px 10px;
-  border: 1px solid #ffffff1f;
-  border-radius: 12px;
-  background: #181a1f;
-  color: #f4f4f5;
-  box-shadow: 0 4px 20px #00000040;
-  font: 13px/1.4 system-ui, sans-serif;
-  color-scheme: dark;
-}
-.SessionReplayControls > .SessionReplayPlay {
-  grid-column: 1;
-  grid-row: 2;
-  appearance: none;
-  display: grid;
-  place-items: center;
-  flex: none;
-  width: 52px;
-  height: 44px;
-  padding: 0;
-  border: 0;
-  border-radius: 8px;
-  background: #00adef;
-  color: #07141c;
-  cursor: pointer;
-}
-.SessionReplayControls > .SessionReplayPlay:hover:not(:disabled) {
-  background: #43caff;
-}
-.SessionReplayControls > .SessionReplayPlay:active:not(:disabled) {
-  background: #0095ce;
-}
-.SessionReplayPlay > svg {
-  display: block;
-  width: 22px;
-  height: 22px;
-  fill: currentColor;
-  pointer-events: none;
-}
-.SessionReplayControls > .SessionReplayPosition {
-  grid-column: 2;
-  grid-row: 2;
-  appearance: none;
-  box-sizing: border-box;
-  flex: 1;
-  min-width: 0;
-  width: 100%;
-  height: 28px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  --replay-progress: 0%;
-}
-.SessionReplayPosition::-webkit-slider-runnable-track {
-  height: 5px;
-  border-radius: 3px;
-  background: linear-gradient(to right, #00adef var(--replay-progress), #454950 var(--replay-progress));
-}
-.SessionReplayPosition::-moz-range-track {
-  height: 5px;
-  border-radius: 3px;
-  background: #454950;
-}
-.SessionReplayPosition::-moz-range-progress {
-  height: 5px;
-  border-radius: 3px;
-  background: #00adef;
-}
-.SessionReplayPosition::-webkit-slider-thumb {
-  appearance: none;
-  width: 13px;
-  height: 13px;
-  margin-top: -4px;
-  border: 0;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow: 0 1px 5px #00000066;
-}
-.SessionReplayPosition::-moz-range-thumb {
-  width: 13px;
-  height: 13px;
-  border: 0;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow: 0 1px 5px #00000066;
-}
-.SessionReplayControls > .SessionReplayActivity {
-  grid-column: 2;
-  grid-row: 1;
-  display: block;
-  width: calc(100% - 13px);
-  min-width: 0;
-  height: 48px;
-  margin: 0 6.5px;
-  border-bottom: 1px solid #454950;
-  fill: #00adef80;
-  cursor: pointer;
-}
-.SessionReplayControls > .SessionReplayActivity:hover {
-  fill: #00adefb3;
-}
-.SessionReplayActivityCursor {
-  stroke: #ffffff;
-  stroke-width: 1;
-  pointer-events: none;
-}
-.SessionReplayControls > :focus-visible {
-  outline: 2px solid #ffffff;
-  outline-offset: 4px;
-}
-.SessionReplayControls > :disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-.SessionReplayControls > .SessionReplayTime {
-  grid-column: 3;
-  grid-row: 2;
-  flex: none;
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-.SessionReplayControls > .SessionReplayTime[role='alert'] {
-  flex: 1;
-  min-width: 0;
-  color: #ffb4ab;
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
-@media (max-width: 480px) {
-  .SessionReplay > .SessionReplayControls {
-    column-gap: 12px;
-    margin: 8px;
-    padding: 8px;
-    font-size: 12px;
-  }
-  .SessionReplayControls > .SessionReplayPlay {
-    width: 44px;
-  }
-}
-@media (forced-colors: active) {
-  .SessionReplayControls > .SessionReplayActivity {
-    fill: Highlight;
-    border-color: CanvasText;
-  }
-  .SessionReplayActivityCursor {
-    stroke: CanvasText;
-  }
-  .SessionReplayControls > .SessionReplayPlay {
-    border: 1px solid ButtonText;
-    background: ButtonFace;
-    color: ButtonText;
-  }
-  .SessionReplayControls > .SessionReplayPosition {
-    appearance: auto;
-  }
-}
-`;
-
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -10986,7 +10779,7 @@ var walker_default = {
 };
 
 // ../../node_modules/css-tree/lib/syntax/index.js
-var syntax_default = create_default({
+create_default({
   ...lexer_default,
   ...parser_default,
   ...walker_default
@@ -11058,122 +10851,7 @@ function encode3(str) {
   return encoded;
 }
 
-// ../../node_modules/css-tree/lib/index.js
-var {
-  parse: parse51,
-  generate: generate51,
-  walk: walk2} = syntax_default;
-
-// ../session-replay-worker/src/parts/AssetUrls/AssetUrls.ts
-var resolveAssetUrl$1 = (value, assetBaseUrl) => {
-  if (!assetBaseUrl) return void 0;
-  value = value.replace("/extensions/builtin.vscode-icons/icons/", "/file-icons/");
-  const match = /\/(icons|fonts|file-icons)\/([\w./-]+)(?:[?#].*)?$/.exec(value);
-  if (!match || match[2].split("/").some(part => !part || part === "." || part === "..")) return void 0;
-  if (!/\.(svg|png|jpg|jpeg|gif|webp|woff2?|ttf|otf)$/.test(match[2])) return void 0;
-  return `${assetBaseUrl}${match[1]}/${match[2]}`;
-};
-
-// ../session-replay-worker/src/parts/ReplayCss/ReplayCss.ts
-var allowedRules = ["media", "supports", "container", "layer", "font-face", "keyframes", "-webkit-keyframes", "property"];
-var blockedFunctions = ["url", "image-set", "-webkit-image-set", "image", "src", "attr", "paint"];
-var replayCss = (css, assetBaseUrl, inline = false) => {
-  try {
-    const ast = parse51(css, {
-      context: inline ? "declarationList" : "stylesheet",
-      parseCustomProperty: true
-    });
-    walk2(ast, {
-      enter(node, item, list) {
-        if (node.type === "Atrule" && !allowedRules.includes(ident_exports.decode(node.name).toLowerCase())) {
-          list.remove(item);
-          return this.skip;
-        }
-        if (node.type === "Raw") {
-          list.remove(item);
-          return this.skip;
-        }
-        if (node.type !== "Declaration") return void 0;
-        let unsafe = false;
-        walk2(node.value, value => {
-          if (value.type === "Raw" || value.type === "Function" && blockedFunctions.includes(ident_exports.decode(value.name).toLowerCase())) unsafe = true;
-          if (value.type === "Url") {
-            const resolved = resolveAssetUrl$1(value.value, assetBaseUrl);
-            if (resolved) value.value = resolved;else if (!/^data:(?:image\/(?:png|jpeg|gif|webp)|font\/[\w-]+);base64,[a-z\d+/=\s]+$/i.test(value.value) && !/^#[\w-]+$/.test(value.value)) unsafe = true;
-          }
-        });
-        if (unsafe) list.remove(item);
-        return this.skip;
-      }
-    });
-    return generate51(ast);
-  } catch {
-    return "";
-  }
-};
-
-// Only known editor asset paths can be remapped into the host's trusted asset directory.
-const resolveAssetUrl = (value, assetBaseUrl) => {
-  if (!assetBaseUrl) return undefined;
-  value = value.replace('/extensions/builtin.vscode-icons/icons/', '/file-icons/');
-  const match = /\/(icons|fonts|file-icons)\/([\w./-]+)(?:[?#].*)?$/.exec(value);
-  if (!match || match[2].split('/').some(part => !part || part === '.' || part === '..')) return undefined;
-  if (!/\.(svg|png|jpg|jpeg|gif|webp|woff2?|ttf|otf)$/.test(match[2])) return undefined;
-  return `${assetBaseUrl}${match[1]}/${match[2]}`;
-};
-
-const tags = 'body div span p pre code main section article header footer nav aside h1 h2 h3 h4 h5 h6 ul ol li table thead tbody tr td th button input textarea select option label form fieldset legend a img br hr strong em b i u s small details summary svg path rect circle ellipse line polyline polygon g defs clipPath text tspan'.split(' ');
-const attributes = /^(class|style|id|title|role|type|checked|disabled|selected|placeholder|width|height|viewBox|d|fill|stroke|cx|cy|r|x|y|x1|x2|y1|y2|points|transform|xmlns|data-[\w-]+|aria-[\w-]+)$/i;
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const attributeValue = (name, value, assetBaseUrl) => {
-  if (name === 'style') return replayCss(value, assetBaseUrl, true);
-  if (name !== 'fill' && name !== 'stroke') return value;
-  const css = replayCss(`${name}:${value}`, assetBaseUrl, true);
-  return css ? css.slice(css.indexOf(':') + 1) : '';
-};
-const imageSource = (attrs, assetBaseUrl) => {
-  const value = attrs.src;
-  if (typeof value === 'string') {
-    if (/^data:image\/(png|jpeg|gif|webp);base64,/.test(value)) return value;
-    const src = resolveAssetUrl(value, assetBaseUrl);
-    if (src) return src;
-  }
-  // Older captures omitted image sources; the editor logo has a stable identity.
-  return attrs.class?.split(/\s+/).includes('TitleBarIconIcon') ? resolveAssetUrl('/icons/icon.svg', assetBaseUrl) : undefined;
-};
-const normalizeAttributes = (value, tag, assetBaseUrl) => {
-  const attrs = Object.create(null);
-  const entries = Object.entries(value.attrs || {});
-  for (const [key, val] of entries) {
-    if (typeof val !== 'string') continue;
-    if (attributes.test(key)) attrs[key] = attributeValue(key.toLowerCase(), val, assetBaseUrl);
-  }
-  if (tag === 'img') {
-    const src = imageSource(value.attrs || {}, assetBaseUrl);
-    if (src) attrs.src = src;
-  }
-  return attrs;
-};
-const normalizeDom = (root, assetBaseUrl) => {
-  let count = 0;
-  const visit = (value, depth) => {
-    if (++count > 100_000 || depth > 150 || !value || typeof value !== 'object') throw new Error('Invalid replay DOM');
-    if (typeof value.text === 'string') return {
-      text: value.text
-    };
-    const tag = value.tag && tags.includes(value.tag) ? value.tag : 'div';
-    return {
-      attrs: normalizeAttributes(value, tag, assetBaseUrl),
-      checked: value.checked === true,
-      children: (value.children || []).map(child => visit(child, depth + 1)),
-      scroll: Array.isArray(value.scroll) ? [value.scroll[0], value.scroll[1]] : [0, 0],
-      svg: value.svg === true,
-      tag,
-      value: typeof value.value === 'string' ? value.value : undefined
-    };
-  };
-  return visit(root, 0);
-};
 const key = value => value.attrs?.['data-uid'] || value.attrs?.id;
 const compatible = (before, after) => typeof before.text === typeof after.text && before.tag === after.tag && before.svg === after.svg;
 const createNode = (document, value) => {
@@ -11237,8 +10915,7 @@ const createDomRenderer = root => {
     patchAttributes(element, old?.value.attrs || {}, value.attrs);
     const children = patchChildren(element, old?.children || [], value.children);
     patchProperties(element, old?.value, value);
-    const [x, y] = value.scroll;
-    scrolls.push([element, x, y]);
+    if (value.scroll) scrolls.push([element, ...value.scroll]);
     return {
       children,
       node,
@@ -11272,30 +10949,30 @@ const createRenderer = target => {
   const render = createDomRenderer(surface);
   let sheets = [];
   let previousStyles = [];
-  let previousBase;
   let previousClass = originalClass;
   let previousTheme;
   let appliedTheme = originalTheme;
   const removeSheets = () => document.adoptedStyleSheets.filter(sheet => !sheets.includes(sheet));
-  const update = (frame, assetBaseUrl) => {
-    const dom = normalizeDom(frame.dom, assetBaseUrl);
+  const update = frame => {
+    const {
+      dom
+    } = frame;
     const styles = (frame.styles || []).filter(value => typeof value === 'string');
-    if (previousBase !== assetBaseUrl || styles.length !== previousStyles.length || styles.some((css, index) => css !== previousStyles[index])) {
+    if (styles.length !== previousStyles.length || styles.some((css, index) => css !== previousStyles[index])) {
       const others = removeSheets();
       sheets = styles.map((css, index) => {
-        if (previousBase === assetBaseUrl && css === previousStyles[index]) return sheets[index];
+        if (css === previousStyles[index]) return sheets[index];
         const sheet = new Sheet();
-        sheet.replaceSync(replayCss(css, assetBaseUrl));
+        sheet.replaceSync(css);
         return sheet;
       });
       document.adoptedStyleSheets = [...others, ...sheets];
       previousStyles = styles;
-      previousBase = assetBaseUrl;
     }
     const className = typeof frame.documentElement?.className === 'string' ? frame.documentElement.className : '';
     if (root.className !== className) root.className = className;
     previousClass = className;
-    const theme = replayCss(typeof frame.documentElement?.style === 'string' ? frame.documentElement.style : '', assetBaseUrl, true);
+    const theme = frame.documentElement?.style || '';
     if (theme !== previousTheme) root.style.cssText = theme;
     previousTheme = theme;
     appliedTheme = root.style.cssText;
@@ -11327,18 +11004,66 @@ const disposeFrame = target => {
   renderers.get(target)?.dispose();
   renderers.delete(target);
 };
-const renderFrame = (target, frame, assetBaseUrl) => {
+const renderPreparedFrame = (target, frame) => {
   let render = renderers.get(target);
   if (!render) {
     render = createRenderer(target);
     renderers.set(target, render);
   }
-  render.render(frame, assetBaseUrl);
+  render.render(frame);
 };
 
+const createTimelinePreview = container => {
+  const document = container.ownerDocument;
+  const view = document.defaultView;
+  const popup = container.querySelector(':scope > .SessionReplay > .SessionReplayPreview');
+  const image = popup.querySelector('.SessionReplayPreviewImage');
+  let frame;
+  const removeFrame = () => {
+    if (frame?.contentDocument) disposeFrame(frame.contentDocument);
+    frame?.remove();
+    frame = undefined;
+  };
+  return {
+    dispose() {
+      removeFrame();
+      popup.remove();
+    },
+    render(preview, enabled) {
+      if (!enabled) removeFrame();
+      if (!preview) return;
+      if (!frame) {
+        frame = document.createElement('iframe');
+        frame.title = 'Session replay preview';
+        frame.tabIndex = -1;
+        frame.setAttribute('sandbox', 'allow-same-origin');
+        image.append(frame);
+      }
+      const {
+        height,
+        scale,
+        width,
+        x,
+        y
+      } = preview;
+      frame.style.width = `${width}px`;
+      frame.style.height = `${height}px`;
+      frame.style.transform = `scale(${scale})`;
+      image.style.width = `${width * scale}px`;
+      image.style.height = `${height * scale}px`;
+      renderPreparedFrame(frame.contentDocument, preview.frame);
+      const bounds = popup.getBoundingClientRect();
+      popup.style.left = `${Math.max(8, Math.min(view.innerWidth - bounds.width - 8, x - bounds.width / 2))}px`;
+      popup.style.top = `${Math.max(8, y - bounds.height - 8)}px`;
+    }
+  };
+};
+
+const settingKey = 'sessionReplay.timelinePreviewEnabled';
 const mountPlayer = async (container, {
   assetBaseUrl,
   source,
+  timelinePreviewEnabled,
   workerUrl
 }) => {
   const {
@@ -11351,131 +11076,206 @@ const mountPlayer = async (container, {
     if (!assets.pathname.endsWith('/')) assets.pathname += '/';
   }
   const client = createClient(workerUrl);
+  const document = ownerDocument;
+  const view = document.defaultView;
+  let enabled = timelinePreviewEnabled ?? true;
+  if (timelinePreviewEnabled === undefined) {
+    try {
+      enabled = view.localStorage.getItem(settingKey) !== 'false';
+    } catch {
+      /* Storage may be unavailable in embedded players. */
+    }
+  }
   container.replaceChildren();
-  container.className = 'SessionReplay';
-  container.style.cssText = 'position:fixed;inset:0;margin:0;display:flex;flex-direction:column;background:#202020;color:white;z-index:2147483647';
-  const document = container.ownerDocument;
-  const style = document.createElement('style');
-  style.textContent = playerStyles;
-  const viewport = document.createElement('div');
-  viewport.style.cssText = 'flex:1;min-height:0;overflow:auto;position:relative';
-  const surface = createReplayRoot(document);
-  viewport.append(surface);
-  const controls = document.createElement('div');
-  controls.className = 'SessionReplayControls';
-  controls.setAttribute('role', 'group');
-  controls.setAttribute('aria-label', 'Session replay controls');
-  const play = document.createElement('button');
-  play.type = 'button';
-  play.className = 'SessionReplayPlay';
-  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  icon.setAttribute('viewBox', '0 0 24 24');
-  icon.setAttribute('aria-hidden', 'true');
-  icon.setAttribute('focusable', 'false');
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  icon.append(path);
-  play.append(icon);
-  const updatePlayButton = playing => {
-    const label = playing ? 'Pause' : 'Play';
-    play.setAttribute('aria-label', label);
-    play.title = label;
-    path.setAttribute('d', playing ? 'M6 4h4v16H6zM14 4h4v16h-4z' : 'M8 4v16l12-8z');
-  };
-  updatePlayButton(false);
-  const slider = document.createElement('input');
-  slider.type = 'range';
-  slider.min = '0';
-  slider.step = '1';
-  slider.value = '0';
-  slider.setAttribute('aria-label', 'Session replay position');
-  slider.className = 'SessionReplayPosition';
-  const status = document.createElement('output');
-  status.className = 'SessionReplayTime';
-  // Playback updates frequently; announce the position only when the slider is used.
-  status.setAttribute('aria-live', 'off');
-  const activity = createActivityChart(document);
-  controls.append(play, activity.element, slider, status);
-  container.append(style, viewport, controls);
+  const setDom = createDomRenderer(container);
+  let preview;
   let disposed = false;
-  let playing = false;
+  let sequence = 0;
   let timer;
-  let requestId = 0;
-  let position = 0;
-  let duration = 0;
-  const show = result => {
-    ({
-      duration,
-      position
-    } = result);
-    activity.setPosition(duration > 0 ? position / duration : 0);
-    slider.max = String(Math.ceil(duration));
-    slider.value = String(Math.round(position));
-    slider.style.setProperty('--replay-progress', `${duration > 0 ? position / duration * 100 : 0}%`);
-    const time = `${(position / 1000).toFixed(1)} / ${(duration / 1000).toFixed(1)} s`;
-    slider.ariaValueText = time;
-    status.textContent = time;
-    renderFrame(surface, result.frame, assets?.href);
-  };
-  const pause = () => {
-    playing = false;
-    clearTimeout(timer);
-    updatePlayButton(false);
-  };
-  const seek = async time => {
-    const id = ++requestId;
-    const result = await client.invoke('seek', time);
-    if (!disposed && id === requestId) show(result);
+  let previewsEnabled = enabled;
+  const apply = result => {
+    if (disposed) return;
+    setDom(result.dom);
+    if (result.frame) renderPreparedFrame(container.querySelector('.SessionReplaySurface'), result.frame);
+    previewsEnabled = result.previewEnabled;
+    preview ||= createTimelinePreview(container);
+    preview.render(result.preview, result.previewEnabled);
+    if (result.delay === undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    } else if (timer === undefined) {
+      timer = setTimeout(() => {
+        timer = undefined;
+        void send({
+          now: performance.now(),
+          type: 'tick'
+        });
+      }, result.delay);
+    }
   };
   const report = error => {
-    pause();
+    if (disposed) return;
+    clearTimeout(timer);
+    timer = undefined;
+    const status = container.querySelector(':scope > .SessionReplay > .SessionReplayControls > output') || document.createElement('output');
+    if (!status.parentNode) container.append(status);
     status.setAttribute('role', 'alert');
     status.setAttribute('aria-live', 'assertive');
     status.textContent = error instanceof Error ? error.message : String(error);
   };
-  slider.oninput = () => {
-    pause();
-    void seek(Number(slider.value)).catch(report);
-  };
-  activity.element.onclick = event => {
-    const bounds = activity.element.getBoundingClientRect();
-    if (!bounds.width || slider.disabled) return;
-    pause();
-    slider.focus();
-    const fraction = Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width));
-    void seek(fraction * duration).catch(report);
-  };
-  play.onclick = () => {
-    if (playing) {
-      pause();
-      return;
+  const send = async event => {
+    if (disposed) return;
+    try {
+      apply(await client.invoke('SessionReplay.dispatch', 1, event, ++sequence));
+    } catch (error) {
+      report(error);
     }
-    playing = true;
-    updatePlayButton(true);
-    const origin = performance.now() - (position >= duration ? 0 : position);
-    const tick = async () => {
-      if (!playing || disposed) return;
-      try {
-        await seek(performance.now() - origin);
-        if (position >= duration) pause();else if (playing) timer = setTimeout(() => {
-          void tick();
-        }, 50);
-      } catch (error) {
-        report(error);
-      }
-    };
-    void tick();
   };
   try {
-    const initial = await client.invoke('load', source);
-    activity.setActivity(initial.activity);
-    show(initial);
+    apply(await client.invoke('SessionReplay.create', 1, enabled, assets?.href));
+    apply(await client.invoke('SessionReplay.loadContent', 1, source));
   } catch (error) {
-    play.disabled = slider.disabled = true;
     report(error);
   }
+  if (!container.querySelector(':scope > .SessionReplay > .SessionReplayControls')) {
+    client.dispose();
+    return () => container.replaceChildren();
+  }
+  let previewTimer;
+  let pendingPreview;
+  let previewBusy = false;
+  let previewGeneration = 0;
+  const surface = container.querySelector('.SessionReplaySurface');
+  const controls = container.querySelector(':scope > .SessionReplay > .SessionReplayControls');
+  const slider = controls.querySelector('.SessionReplayPosition');
+  const chart = controls.querySelector('.SessionReplayActivity');
+  const play = controls.querySelector('.SessionReplayPlay');
+  const checkbox = controls.querySelector('[type="checkbox"]');
+  const seek = event => {
+    clearTimeout(timer);
+    timer = undefined;
+    void send(event);
+  };
+  play.onclick = () => seek({
+    now: performance.now(),
+    type: 'togglePlay'
+  });
+  slider.oninput = () => seek({
+    now: performance.now(),
+    position: Number(slider.value),
+    type: 'seek'
+  });
+  const point = event => {
+    const target = event.currentTarget;
+    const bounds = target.getBoundingClientRect();
+    return {
+      left: bounds.left,
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      slider: target === slider,
+      top: chart.getBoundingClientRect().top,
+      width: bounds.width,
+      windowWidth: view.innerWidth,
+      x: event.clientX
+    };
+  };
+  chart.onpointerdown = event => {
+    if (event.button !== 0 || !event.isPrimary || slider.disabled) return;
+    event.preventDefault();
+    chart.setPointerCapture(event.pointerId);
+    slider.focus();
+    seek({
+      now: performance.now(),
+      point: point(event),
+      type: 'pointerDown'
+    });
+  };
+  chart.onpointermove = event => {
+    if (chart.hasPointerCapture(event.pointerId)) seek({
+      now: performance.now(),
+      point: point(event),
+      type: 'pointerMove'
+    });
+  };
+  const endDrag = event => {
+    if (chart.hasPointerCapture(event.pointerId)) chart.releasePointerCapture(event.pointerId);
+    void send({
+      pointerId: event.pointerId,
+      type: 'pointerUp'
+    });
+  };
+  chart.onpointerup = endDrag;
+  chart.onpointercancel = endDrag;
+  chart.onlostpointercapture = endDrag;
+  const updatePreview = async () => {
+    previewTimer = undefined;
+    if (!pendingPreview || previewBusy || disposed) return;
+    const event = {
+      point: pendingPreview,
+      type: 'preview'
+    };
+    pendingPreview = undefined;
+    previewBusy = true;
+    const generation = previewGeneration;
+    const id = ++sequence;
+    try {
+      const result = await client.invoke('SessionReplay.dispatch', 1, event, id);
+      if (!disposed && generation === previewGeneration) apply(result);
+    } catch {
+      /* Preview errors must not interrupt playback. */
+    } finally {
+      previewBusy = false;
+      if (pendingPreview && !disposed) previewTimer = setTimeout(() => void updatePreview(), 60);
+    }
+  };
+  const hover = event => {
+    if (!previewsEnabled || slider.disabled || event.pointerType === 'touch') return;
+    previewGeneration++;
+    pendingPreview = point(event);
+    if (!previewBusy && previewTimer === undefined) previewTimer = setTimeout(() => void updatePreview(), 60);
+  };
+  const hide = () => {
+    previewGeneration++;
+    pendingPreview = undefined;
+    clearTimeout(previewTimer);
+    previewTimer = undefined;
+    void send({
+      type: 'hidePreview'
+    });
+  };
+  for (const target of [slider, chart]) {
+    target.addEventListener('pointermove', hover);
+    target.addEventListener('pointerleave', hide);
+    target.addEventListener('pointercancel', hide);
+  }
+  const keydown = event => {
+    if (event.key === 'Escape') hide();
+  };
+  view.addEventListener('resize', hide);
+  view.addEventListener('blur', hide);
+  document.addEventListener('keydown', keydown);
+  checkbox.onchange = () => {
+    hide();
+    const enabled = checkbox.checked;
+    void send({
+      enabled,
+      type: 'setPreviewEnabled'
+    });
+    try {
+      view.localStorage.setItem(settingKey, String(enabled));
+    } catch {
+      /* The setting still works without storage. */
+    }
+  };
   return () => {
     disposed = true;
-    pause();
+    clearTimeout(timer);
+    clearTimeout(previewTimer);
+    pendingPreview = undefined;
+    view.removeEventListener('resize', hide);
+    view.removeEventListener('blur', hide);
+    document.removeEventListener('keydown', keydown);
+    preview?.dispose();
     client.dispose();
     disposeFrame(surface);
     container.replaceChildren();