@brett_lamy/docstream 1.5.0 → 1.6.1

package/src/replay/ReplayStageImpl.tsx

@@ -0,0 +1,281 @@
+/* The headless rrweb stage: mounts rrweb's Replayer, fits the recorded viewport into its box
+   and exposes an imperative handle, with no controls of its own. Loaded on demand through
+   `ReplayStage` (and by `NativeReplay`), so rrweb and its stylesheet stay out of the eager graph. */
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { Replayer } from 'rrweb'
+import type { eventWithTime } from 'rrweb'
+import { getReplayMeta } from './markers'
+import { sanitizeReplayEvent } from './sanitize'
+import type { ReplayStageHandle, ReplayStageProps } from './stage-types'
+import { ReplayEventType } from './types'
+import 'rrweb/dist/style.css'
+
+const SKIP_IDLE_THRESHOLD_MS = 5_000
+
+const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
+const ReplayStageImpl = forwardRef<ReplayStageHandle, ReplayStageProps>(function ReplayStageImpl(
+  {
+    events,
+    autoplay = false,
+    loop = false,
+    speed = 1,
+    skipInactive = true,
+    initialTime = 0,
+    fit = 'width',
+    showMouse = true,
+    overlay,
+    className,
+    style,
+    onReady,
+    onTimeUpdate,
+    onPlayingChange,
+    onFinish,
+    onLayout,
+  },
+  ref,
+) {
+  const boxRef = useRef<HTMLDivElement>(null)
+  const playerRef = useRef<HTMLDivElement>(null)
+  const replayerRef = useRef<Replayer | null>(null)
+  const playingRef = useRef(false)
+  const fedCountRef = useRef(0)
+  const rafRef = useRef(0)
+  const callbacks = useRef({ onReady, onTimeUpdate, onPlayingChange, onFinish, onLayout })
+  callbacks.current = { onReady, onTimeUpdate, onPlayingChange, onFinish, onLayout }
+  const options = useRef({ autoplay, loop, speed, skipInactive, initialTime })
+  options.current = { autoplay, loop, speed, skipInactive, initialTime }
+
+  const prepared = useMemo(
+    () =>
+      events
+        .map((event) => sanitizeReplayEvent(event))
+        .sort((a, b) => a.timestamp - b.timestamp) as unknown as eventWithTime[],
+    [events],
+  )
+  const meta = useMemo(() => getReplayMeta(events), [events])
+  const [dims, setDims] = useState<{ w: number; h: number }>(() => ({ w: meta.width, h: meta.height }))
+  const [box, setBox] = useState<{ w: number; h: number }>({ w: 0, h: 0 })
+
+  const time = useCallback(() => {
+    try {
+      const replayer = replayerRef.current
+      if (!replayer) return 0
+      return Math.max(0, Math.min(replayer.getCurrentTime(), replayer.getMetaData().totalTime))
+    } catch {
+      return 0
+    }
+  }, [])
+
+  const setPlaying = useCallback((next: boolean) => {
+    if (playingRef.current === next) return
+    playingRef.current = next
+    callbacks.current.onPlayingChange?.(next)
+  }, [])
+
+  const tick = useCallback(() => {
+    cancelAnimationFrame(rafRef.current)
+    const step = () => {
+      callbacks.current.onTimeUpdate?.(time())
+      if (playingRef.current) rafRef.current = requestAnimationFrame(step)
+    }
+    rafRef.current = requestAnimationFrame(step)
+  }, [time])
+
+  const handle = useMemo<ReplayStageHandle>(
+    () => ({
+      play(offset) {
+        const replayer = replayerRef.current
+        if (!replayer) return
+        let from = offset ?? time()
+        try {
+          if (offset === undefined && from >= replayer.getMetaData().totalTime - 1) from = 0
+        } catch {
+          from = 0
+        }
+        replayer.play(from)
+        setPlaying(true)
+        tick()
+      },
+      pause(offset) {
+        const replayer = replayerRef.current
+        if (!replayer) return
+        if (offset === undefined) replayer.pause()
+        else replayer.pause(offset)
+        setPlaying(false)
+        callbacks.current.onTimeUpdate?.(offset ?? time())
+      },
+      seek(ms) {
+        const replayer = replayerRef.current
+        if (!replayer) return
+        let total = ms
+        try {
+          total = replayer.getMetaData().totalTime
+        } catch {
+          // keep ms
+        }
+        const next = Math.max(0, Math.min(ms, total))
+        if (playingRef.current) replayer.play(next)
+        else replayer.pause(next)
+        callbacks.current.onTimeUpdate?.(next)
+      },
+      toggle() {
+        if (playingRef.current) this.pause()
+        else this.play()
+      },
+      getCurrentTime: time,
+      isPlaying: () => playingRef.current,
+      getDuration() {
+        try {
+          return replayerRef.current?.getMetaData().totalTime ?? meta.duration
+        } catch {
+          return meta.duration
+        }
+      },
+    }),
+    [meta.duration, setPlaying, tick, time],
+  )
+  useImperativeHandle(ref, () => handle, [handle])
+
+  // Build / feed the Replayer. Appended events are fed live; a shorter list starts over.
+  useEffect(() => {
+    if (replayerRef.current && prepared.length < fedCountRef.current) {
+      try {
+        replayerRef.current.destroy()
+      } catch {
+        // Ignore stale player teardown.
+      }
+      replayerRef.current = null
+      fedCountRef.current = 0
+    }
+    const hasSnapshot = prepared.some((event) => event.type === ReplayEventType.FullSnapshot)
+    if (!hasSnapshot || !playerRef.current) return
+
+    if (!replayerRef.current) {
+      const { autoplay, speed, skipInactive, initialTime } = options.current
+      const replayer = new Replayer(prepared, {
+        root: playerRef.current,
+        liveMode: false,
+        speed,
+        skipInactive,
+        inactivePeriodThreshold: SKIP_IDLE_THRESHOLD_MS,
+        mouseTail: false,
+        showWarning: false,
+      })
+      replayer.on('resize', (payload) => {
+        const size = payload as { width?: number; height?: number }
+        if (size.width && size.height) setDims({ w: size.width, h: size.height })
+      })
+      replayer.on('finish', () => {
+        if (options.current.loop) {
+          replayer.play(0)
+          setPlaying(true)
+          tick()
+        } else {
+          setPlaying(false)
+          callbacks.current.onTimeUpdate?.(time())
+          callbacks.current.onFinish?.()
+        }
+      })
+      replayer.pause(initialTime)
+      replayerRef.current = replayer
+      fedCountRef.current = prepared.length
+      let duration = meta.duration
+      try {
+        duration = replayer.getMetaData().totalTime
+      } catch {
+        // keep the event-derived duration
+      }
+      callbacks.current.onReady?.({ duration, width: meta.width, height: meta.height })
+      callbacks.current.onTimeUpdate?.(initialTime)
+      if (autoplay) handle.play(initialTime)
+    } else if (prepared.length > fedCountRef.current) {
+      for (let i = fedCountRef.current; i < prepared.length; i++) replayerRef.current.addEvent(prepared[i]!)
+      fedCountRef.current = prepared.length
+    }
+  }, [prepared, meta, handle, setPlaying, tick, time])
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(rafRef.current)
+      try {
+        replayerRef.current?.destroy()
+      } catch {
+        // Ignore unmount teardown errors from rrweb.
+      }
+      replayerRef.current = null
+      fedCountRef.current = 0
+    },
+    [],
+  )
+
+  useEffect(() => {
+    replayerRef.current?.setConfig({ speed, skipInactive })
+  }, [speed, skipInactive])
+
+  // rrweb's own cursor element; hosts drawing their own pointer overlay hide it.
+  useEffect(() => {
+    const mouse = playerRef.current?.querySelector<HTMLElement>('.replayer-mouse')
+    if (mouse) mouse.style.visibility = showMouse ? '' : 'hidden'
+  })
+
+  useIsoLayoutEffect(() => {
+    const el = boxRef.current
+    if (!el) return
+    const measure = () => setBox({ w: el.clientWidth, h: el.clientHeight })
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  const w = dims.w || 1280
+  const h = dims.h || 720
+  const scale = box.w
+    ? fit === 'contain' && box.h
+      ? Math.min(box.w / w, box.h / h)
+      : Math.min(1, box.w / w)
+    : 0
+  const offsetX = scale ? Math.max(0, (box.w - w * scale) / 2) : 0
+  const offsetY = scale && fit === 'contain' ? Math.max(0, (box.h - h * scale) / 2) : 0
+
+  useEffect(() => {
+    if (scale) callbacks.current.onLayout?.({ width: w, height: h, scale, offsetX, offsetY })
+  }, [w, h, scale, offsetX, offsetY])
+
+  const rootStyle: CSSProperties = {
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+    ...(fit === 'contain' ? { height: '100%' } : { height: scale ? Math.round(h * scale) : undefined, aspectRatio: scale ? undefined : `${w} / ${h}` }),
+    ...style,
+  }
+
+  return (
+    <div ref={boxRef} className={className} style={rootStyle} data-replay-stage="">
+      <div
+        data-replay-stage-scaler=""
+        style={
+          {
+            position: 'absolute',
+            left: offsetX,
+            top: offsetY,
+            width: w,
+            height: h,
+            transform: `scale(${scale || 0.0001})`,
+            transformOrigin: 'top left',
+            visibility: scale ? 'visible' : 'hidden',
+            '--replay-scale': String(scale || 1),
+          } as CSSProperties
+        }
+      >
+        <div ref={playerRef} aria-hidden="true" style={{ position: 'relative', width: w, height: h, overflow: 'hidden' }} />
+        {overlay ? <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>{overlay}</div> : null}
+      </div>
+    </div>
+  )
+})
+
+export default ReplayStageImpl

package/src/replay/index.ts

@@ -6,5 +6,11 @@ export type {
   ReplayPreviewProps,
   ReplaySource,
 } from './ReplayPreview';
+export { ReplayStage, preloadReplayStage } from './ReplayStage';
+export type { ReplayStageHandle, ReplayStageLayout, ReplayStageProps } from './stage-types';
+export { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers';
+export type { ReplayMarker, ReplayMarkerKind, ReplayMeta, ReplayPointerPoint, ReplayPointerTrack } from './markers';
+export { ReplayEventType, ReplayIncrementalSource, ReplayMouseInteraction } from './types';
+export type { ReplayEvent } from './types';
 export { isReplayQaUrl, normalizeReplayEmbedUrl } from './url';
 export { sanitizeReplayEvent } from './sanitize';

package/src/replay/markers.ts

@@ -0,0 +1,213 @@
+/* Pure readers over an rrweb event list — no rrweb import, so custom player chrome (a
+   scrubber with event markers, a cursor overlay) can be drawn before the player chunk loads. */
+import { ReplayEventType, ReplayIncrementalSource, ReplayMouseInteraction, type ReplayEvent } from './types'
+
+export interface ReplayMeta {
+  /** Timestamp of the first event (ms since epoch). */
+  start: number
+  /** Timestamp of the last event. */
+  end: number
+  /** `end - start`: rrweb's `totalTime`. */
+  duration: number
+  /** Recorded viewport, from the first Meta / viewport-resize event (0 when unknown). */
+  width: number
+  height: number
+  /** The first recorded page URL, if any. */
+  href?: string
+  /** Whether a full DOM snapshot is present (rrweb can't play without one). */
+  playable: boolean
+}
+
+export type ReplayMarkerKind = 'click' | 'error' | 'network' | 'navigation' | 'custom'
+
+export interface ReplayMarker {
+  /** Stable id (`<kind>-<index>`), handy as a React key. */
+  id: string
+  kind: ReplayMarkerKind
+  /** Milliseconds from the start of the recording. */
+  time: number
+  label: string
+  detail?: string
+  /** Viewport coordinates, for clicks. */
+  x?: number
+  y?: number
+}
+
+export interface ReplayPointerPoint {
+  /** Milliseconds from the start of the recording. */
+  time: number
+  x: number
+  y: number
+}
+
+export interface ReplayPointerTrack {
+  moves: ReplayPointerPoint[]
+  clicks: ReplayPointerPoint[]
+}
+
+function sorted(events: readonly ReplayEvent[]): ReplayEvent[] {
+  return [...events].sort((a, b) => a.timestamp - b.timestamp)
+}
+
+function record(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
+}
+
+function text(value: unknown): string | undefined {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number') return String(value)
+  if (Array.isArray(value)) return value.map((v) => (typeof v === 'string' ? v.replace(/^"|"$/g, '') : JSON.stringify(v))).join(' ')
+  return undefined
+}
+
+export function getReplayMeta(events: readonly ReplayEvent[]): ReplayMeta {
+  const list = sorted(events)
+  const start = list[0]?.timestamp ?? 0
+  const end = list[list.length - 1]?.timestamp ?? start
+  let width = 0
+  let height = 0
+  let href: string | undefined
+  let playable = false
+  for (const event of list) {
+    const data = record(event.data)
+    if (event.type === ReplayEventType.FullSnapshot) playable = true
+    if (event.type === ReplayEventType.Meta) {
+      if (!width && typeof data.width === 'number') width = data.width
+      if (!height && typeof data.height === 'number') height = data.height
+      if (!href && typeof data.href === 'string') href = data.href
+    } else if (
+      !width &&
+      event.type === ReplayEventType.IncrementalSnapshot &&
+      data.source === ReplayIncrementalSource.ViewportResize &&
+      typeof data.width === 'number' &&
+      typeof data.height === 'number'
+    ) {
+      width = data.width
+      height = data.height
+    }
+  }
+  return { start, end, duration: end - start, width, height, href, playable }
+}
+
+const ERROR_TAGS = new Set(['error', 'exception', 'console.error', 'uncaught'])
+const NETWORK_TAGS = new Set(['network', 'network.error', 'request.failed', 'fetch.failed'])
+const NAVIGATION_TAGS = new Set(['navigation', 'navigate', 'route'])
+
+/**
+ * Timeline markers for a scrubber: clicks, console errors (rrweb console plugin), failed
+ * requests (rrweb network plugin, status 0 or ≥ 400), page navigations (Meta events after the
+ * first) and Custom events (`record.addCustomEvent(tag, payload)`; tags `error`, `network`,
+ * `navigation` map to those kinds, anything else is `custom` labelled by `payload.label`).
+ */
+export function getReplayMarkers(events: readonly ReplayEvent[]): ReplayMarker[] {
+  const list = sorted(events)
+  const start = list[0]?.timestamp ?? 0
+  const markers: ReplayMarker[] = []
+  let seenMeta = false
+  const push = (marker: Omit<ReplayMarker, 'id'>) =>
+    markers.push({ ...marker, id: `${marker.kind}-${markers.length}` })
+
+  for (const event of list) {
+    const time = event.timestamp - start
+    const data = record(event.data)
+    switch (event.type) {
+      case ReplayEventType.IncrementalSnapshot: {
+        if (
+          data.source === ReplayIncrementalSource.MouseInteraction &&
+          (data.type === ReplayMouseInteraction.Click || data.type === ReplayMouseInteraction.DblClick) &&
+          typeof data.x === 'number' &&
+          typeof data.y === 'number'
+        ) {
+          push({ kind: 'click', time, label: data.type === ReplayMouseInteraction.DblClick ? 'Double-click' : 'Click', x: data.x, y: data.y })
+        }
+        break
+      }
+      case ReplayEventType.Meta: {
+        if (seenMeta && typeof data.href === 'string') push({ kind: 'navigation', time, label: 'Navigated', detail: data.href })
+        seenMeta = true
+        break
+      }
+      case ReplayEventType.Plugin: {
+        const payload = record(data.payload)
+        if (data.plugin === 'rrweb/console@1' && (payload.level === 'error' || payload.level === 'assert')) {
+          push({ kind: 'error', time, label: 'Console error', detail: text(payload.payload) })
+        } else if (data.plugin === 'rrweb/network@1' && Array.isArray(payload.requests)) {
+          for (const raw of payload.requests) {
+            const request = record(raw)
+            const status = typeof request.status === 'number' ? request.status : typeof request.responseStatus === 'number' ? request.responseStatus : undefined
+            if (status === 0 || (status !== undefined && status >= 400) || request.error) {
+              const method = typeof request.method === 'string' ? request.method : 'GET'
+              push({ kind: 'network', time, label: `${method} ${status || 'failed'}`, detail: text(request.url ?? request.name) })
+            }
+          }
+        }
+        break
+      }
+      case ReplayEventType.Custom: {
+        const tag = typeof data.tag === 'string' ? data.tag : 'custom'
+        const payload = record(data.payload)
+        const detail = text(payload.detail ?? payload.message ?? payload.url)
+        const label = text(payload.label)
+        if (ERROR_TAGS.has(tag)) push({ kind: 'error', time, label: label ?? 'Error', detail })
+        else if (NETWORK_TAGS.has(tag)) {
+          const status = text(payload.status)
+          const method = text(payload.method) ?? 'GET'
+          push({ kind: 'network', time, label: label ?? `${method} ${status ?? 'failed'}`, detail })
+        } else if (NAVIGATION_TAGS.has(tag)) push({ kind: 'navigation', time, label: label ?? 'Navigated', detail })
+        else push({ kind: 'custom', time, label: label ?? tag, detail })
+        break
+      }
+    }
+  }
+  return markers
+}
+
+/** The recorded pointer path (mouse/touch moves and drags) and click points, in viewport px. */
+export function getReplayPointerTrack(events: readonly ReplayEvent[]): ReplayPointerTrack {
+  const list = sorted(events)
+  const start = list[0]?.timestamp ?? 0
+  const moves: ReplayPointerPoint[] = []
+  const clicks: ReplayPointerPoint[] = []
+  for (const event of list) {
+    if (event.type !== ReplayEventType.IncrementalSnapshot) continue
+    const data = record(event.data)
+    const source = data.source
+    if (
+      (source === ReplayIncrementalSource.MouseMove ||
+        source === ReplayIncrementalSource.TouchMove ||
+        source === ReplayIncrementalSource.Drag) &&
+      Array.isArray(data.positions)
+    ) {
+      for (const raw of data.positions) {
+        const p = record(raw)
+        if (typeof p.x !== 'number' || typeof p.y !== 'number') continue
+        const offset = typeof p.timeOffset === 'number' ? p.timeOffset : 0
+        moves.push({ time: Math.max(0, event.timestamp - start + offset), x: p.x, y: p.y })
+      }
+    } else if (source === ReplayIncrementalSource.MouseInteraction && typeof data.x === 'number' && typeof data.y === 'number') {
+      const point = { time: event.timestamp - start, x: data.x, y: data.y }
+      moves.push(point)
+      if (data.type === ReplayMouseInteraction.Click || data.type === ReplayMouseInteraction.DblClick) clicks.push(point)
+    }
+  }
+  moves.sort((a, b) => a.time - b.time)
+  return { moves, clicks }
+}
+
+/** The pointer position at `time` (linear between recorded points), or null before the first. */
+export function replayPointerAt(track: ReplayPointerTrack, time: number): { x: number; y: number } | null {
+  const { moves } = track
+  if (!moves.length || time < moves[0]!.time) return null
+  let lo = 0
+  let hi = moves.length - 1
+  if (time >= moves[hi]!.time) return { x: moves[hi]!.x, y: moves[hi]!.y }
+  while (hi - lo > 1) {
+    const mid = (lo + hi) >> 1
+    if (moves[mid]!.time <= time) lo = mid
+    else hi = mid
+  }
+  const a = moves[lo]!
+  const b = moves[hi]!
+  const k = b.time === a.time ? 1 : (time - a.time) / (b.time - a.time)
+  return { x: a.x + (b.x - a.x) * k, y: a.y + (b.y - a.y) * k }
+}

package/src/replay/sanitize.ts

@@ -1,5 +1,4 @@
-import { EventType, IncrementalSource } from 'rrweb';
-import type { eventWithTime } from 'rrweb';
+import { ReplayEventType as EventType, ReplayIncrementalSource as IncrementalSource, type ReplayEvent } from './types';
 
 const TRANSPARENT_PIXEL =
   'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
@@ -57,7 +56,7 @@ function walkNode(node: unknown): void {
 }
 
 /** Prevent a replay iframe from making the viewer fetch localhost/private assets. */
-export function sanitizeReplayEvent(event: eventWithTime): eventWithTime {
+export function sanitizeReplayEvent<T extends ReplayEvent>(event: T): T {
   try {
     if (event.type === EventType.FullSnapshot) {
       walkNode((event.data as { node?: unknown }).node);

package/src/replay/stage-types.ts

@@ -0,0 +1,63 @@
+import type { CSSProperties, ReactNode } from 'react'
+import type { ReplayEvent } from './types'
+
+/** Imperative control over a mounted `ReplayStage`. Times are ms from the recording's start. */
+export interface ReplayStageHandle {
+  /** Play from `offset` (default: the current time; from 0 when at the end). */
+  play(offset?: number): void
+  /** Pause, optionally jumping to `offset`. */
+  pause(offset?: number): void
+  /** Jump to `ms`, keeping the play state. */
+  seek(ms: number): void
+  toggle(): void
+  getCurrentTime(): number
+  getDuration(): number
+  isPlaying(): boolean
+}
+
+export interface ReplayStageLayout {
+  /** Recorded viewport size (px). */
+  width: number
+  height: number
+  /** How much the viewport is scaled to fit the stage box. */
+  scale: number
+  /** Where the scaled viewport sits inside the box. */
+  offsetX: number
+  offsetY: number
+}
+
+export interface ReplayStageProps {
+  /** rrweb events; appended events are fed to the running player. */
+  events: ReplayEvent[]
+  autoplay?: boolean
+  loop?: boolean
+  /** Playback rate (1 = real time). */
+  speed?: number
+  /** Fast-forward idle stretches longer than 5s (rrweb `skipInactive`). Default true. */
+  skipInactive?: boolean
+  /** Where the paused player starts (ms). */
+  initialTime?: number
+  /**
+   * `width` (default): scale down to the box width, height follows the recording's aspect.
+   * `contain`: fill the box (give it a height) and letterbox the viewport inside it.
+   */
+  fit?: 'width' | 'contain'
+  /** rrweb's own cursor. Hide it when drawing a pointer overlay. Default true. */
+  showMouse?: boolean
+  /**
+   * Rendered over the page, in recorded-viewport coordinates (a box of `width × height` px
+   * scaled with the page). `var(--replay-scale)` holds the scale, so an overlay can
+   * counter-scale elements that should keep their on-screen size.
+   */
+  overlay?: ReactNode
+  className?: string
+  style?: CSSProperties
+  /** Shown while the player chunk (rrweb) loads. */
+  fallback?: ReactNode
+  onReady?(info: { duration: number; width: number; height: number }): void
+  /** Every frame while playing, and after each seek/pause. */
+  onTimeUpdate?(ms: number): void
+  onPlayingChange?(playing: boolean): void
+  onFinish?(): void
+  onLayout?(layout: ReplayStageLayout): void
+}

package/src/replay/types.ts

@@ -0,0 +1,46 @@
+/* rrweb's event shape and the numeric enums the replay helpers read, declared locally so the
+   eager replay modules (and their published declarations) never import rrweb. rrweb is
+   lazy: only the player chunk (`ReplayStageImpl` / `NativeReplay`) imports it, so pages that
+   never play native events never download it. */
+
+/** One recorded rrweb event. rrweb's own `eventWithTime` is assignable to it. */
+export interface ReplayEvent {
+  type: number
+  data: unknown
+  timestamp: number
+  delay?: number
+}
+
+/** rrweb `EventType`. */
+export const ReplayEventType = {
+  DomContentLoaded: 0,
+  Load: 1,
+  FullSnapshot: 2,
+  IncrementalSnapshot: 3,
+  Meta: 4,
+  Custom: 5,
+  Plugin: 6,
+} as const
+
+/** rrweb `IncrementalSource` (the subset the helpers read). */
+export const ReplayIncrementalSource = {
+  Mutation: 0,
+  MouseMove: 1,
+  MouseInteraction: 2,
+  Scroll: 3,
+  ViewportResize: 4,
+  Input: 5,
+  TouchMove: 6,
+  Drag: 12,
+} as const
+
+/** rrweb `MouseInteractions` (the subset the helpers read). */
+export const ReplayMouseInteraction = {
+  MouseUp: 0,
+  MouseDown: 1,
+  Click: 2,
+  ContextMenu: 3,
+  DblClick: 4,
+  TouchStart: 7,
+  TouchEnd: 9,
+} as const