@lvce-editor/renderer-process 30.56.0 → 30.57.1

package/dist/rendererProcessMain.js

@@ -1,3 +1,499 @@
+const omitted = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'BASE', 'NOSCRIPT']);
+const unsupported = new Set(['IFRAME', 'WEBVIEW', 'CANVAS', 'OBJECT', 'EMBED', 'VIDEO', 'AUDIO']);
+const attributes$1 = /^(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|aria-[\w-]+)$/i;
+const capture = document => {
+  const visit = node => {
+    if (node.nodeType === 3) return {
+      text: node.textContent
+    };
+    if (node.nodeType !== 1 || omitted.has(node.tagName)) return undefined;
+    if (node.hasAttribute('data-session-replay-ignore')) return undefined;
+    if (unsupported.has(node.tagName) || node.matches('.Terminal, .TerminalView, .xterm, [data-session-replay-placeholder]')) {
+      const {
+        width,
+        height
+      } = node.getBoundingClientRect();
+      return {
+        tag: 'div',
+        attrs: {
+          class: 'SessionReplayPlaceholder',
+          style: `background:#808080;color:white;width:${width}px;height:${height}px;overflow:hidden`
+        },
+        children: [{
+          text: 'Content unavailable in replay'
+        }]
+      };
+    }
+    if (node.matches('[data-session-replay-mask], input[type=password]')) return {
+      tag: 'span',
+      children: [{
+        text: '••••••••'
+      }]
+    };
+    const attrs = Object.fromEntries([...node.attributes].filter(({
+      name
+    }) => attributes$1.test(name)).map(({
+      name,
+      value
+    }) => [name, value]));
+    if (node.tagName === 'IMG' && node.src.startsWith('data:image/')) attrs.src = node.src;
+    return {
+      tag: node.localName,
+      attrs,
+      ...(node.namespaceURI === 'http://www.w3.org/2000/svg' ? {
+        svg: true
+      } : {}),
+      ...(typeof node.value === 'string' ? {
+        value: node.value
+      } : {}),
+      ...(typeof node.checked === 'boolean' ? {
+        checked: node.checked
+      } : {}),
+      ...(node.scrollTop || node.scrollLeft ? {
+        scroll: [node.scrollLeft, node.scrollTop]
+      } : {}),
+      children: [...node.childNodes].map(visit).filter(Boolean)
+    };
+  };
+  const styles = [];
+  const visitSheet = (sheet, seen = new Set()) => {
+    if (!sheet || seen.has(sheet)) return '';
+    seen.add(sheet);
+    try {
+      return [...sheet.cssRules].map(rule => {
+        if (rule.type !== 3) return rule.cssText;
+        const imported = visitSheet(rule.styleSheet, seen);
+        return rule.media.mediaText ? `@media ${rule.media.mediaText} { ${imported} }` : imported;
+      }).join('\n');
+    } catch {
+      return '';
+    }
+  };
+  for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) styles.push(visitSheet(sheet));
+  return {
+    dom: visit(document.body),
+    styles,
+    documentElement: {
+      className: document.documentElement.className,
+      style: document.documentElement.style.cssText
+    },
+    viewport: [document.defaultView.innerWidth, document.defaultView.innerHeight]
+  };
+};
+const observe = (document, record, onError) => {
+  let dirty = true;
+  let busy = false;
+  let stopped = false;
+  const mark = () => {
+    dirty = true;
+  };
+  const observer = new MutationObserver(mark);
+  observer.observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    characterData: true
+  });
+  for (const type of ['input', 'change', 'scroll']) document.addEventListener(type, mark, true);
+  document.defaultView.addEventListener('resize', mark);
+  let lastStyles = '';
+  const snapshot = async (force = false) => {
+    if (busy || stopped) return;
+    busy = true;
+    try {
+      // CSSStyleSheet.replaceSync/insertRule don't produce DOM mutation records.
+      const frame = capture(document);
+      const styles = frame.styles.join('\n');
+      if (force || dirty || styles !== lastStyles) {
+        dirty = false;
+        lastStyles = styles;
+        await record('frame', frame);
+      }
+    } catch (error) {
+      onError(error);
+    } finally {
+      busy = false;
+    }
+  };
+  void snapshot(true);
+  const timer = setInterval(snapshot, 100);
+  return () => {
+    stopped = true;
+    clearInterval(timer);
+    observer.disconnect();
+    for (const type of ['input', 'change', 'scroll']) document.removeEventListener(type, mark, true);
+    document.defaultView.removeEventListener('resize', mark);
+  };
+};
+const serializeMessage = message => {
+  const seen = new WeakSet();
+  return JSON.parse(JSON.stringify(message, (key, value) => {
+    if (/password|token|secret|authorization|cookie/i.test(key)) return '[redacted]';
+    if (typeof value === 'bigint') return String(value);
+    if (typeof value !== 'object' || value === null) return value;
+    if (seen.has(value)) return '[circular]';
+    seen.add(value);
+    if (value instanceof Error) return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack
+    };
+    if (value instanceof ArrayBuffer || ArrayBuffer.isView(value)) return {
+      type: value.constructor.name,
+      byteLength: value.byteLength
+    };
+    if (value.constructor?.name === 'MessagePort') return {
+      type: 'MessagePort'
+    };
+    return value;
+  }));
+};
+
+const createClient = url => {
+  const worker = new Worker(url, {
+    type: 'module',
+    name: 'Session Replay Worker'
+  });
+  const callbacks = new Map();
+  let nextId = 0;
+  let disposed = false;
+  const fail = error => {
+    for (const {
+      reject
+    } of callbacks.values()) reject(error);
+    callbacks.clear();
+  };
+  worker.onmessage = ({
+    data
+  }) => {
+    const callback = callbacks.get(data.id);
+    if (!callback) return;
+    callbacks.delete(data.id);
+    if (data.error) callback.reject(new Error(data.error));else callback.resolve(data.result);
+  };
+  worker.onerror = () => {
+    disposed = true;
+    worker.terminate();
+    fail(new Error('Session replay worker failed to load'));
+  };
+  return {
+    invoke(method, ...params) {
+      if (disposed) return Promise.reject(new Error('Session replay worker is closed'));
+      return new Promise((resolve, reject) => {
+        const id = nextId++;
+        callbacks.set(id, {
+          resolve,
+          reject
+        });
+        try {
+          worker.postMessage({
+            id,
+            method,
+            params
+          });
+        } catch (error) {
+          callbacks.delete(id);
+          reject(error);
+        }
+      });
+    },
+    dispose() {
+      disposed = true;
+      worker.terminate();
+      fail(new Error('Session replay worker is closed'));
+    }
+  };
+};
+
+const tags = new Set('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|aria-[\w-]+)$/i;
+const renderFrame = (document, frame) => {
+  let count = 0;
+  const scrolls = [];
+  const visit = (value, depth = 0) => {
+    if (++count > 100_000 || depth > 150 || !value || typeof value !== 'object') throw new Error('Invalid replay DOM');
+    if (typeof value.text === 'string') return document.createTextNode(value.text);
+    const tag = tags.has(value.tag) ? value.tag : 'div';
+    const node = value.svg ? document.createElementNS('http://www.w3.org/2000/svg', tag) : document.createElement(tag);
+    for (const [key, val] of Object.entries(value.attrs || {})) {
+      if (attributes.test(key) && typeof val === 'string') node.setAttribute(key, val);
+      if (key === 'src' && tag === 'img' && typeof val === 'string' && /^data:image\/(png|jpeg|gif|webp);base64,/.test(val)) node.setAttribute(key, val);
+    }
+    if (typeof value.value === 'string' && 'value' in node && node.type !== 'file') node.value = value.value;
+    if (typeof value.checked === 'boolean') node.checked = value.checked;
+    for (const child of value.children || []) node.append(visit(child, depth + 1));
+    if (Array.isArray(value.scroll)) scrolls.push([node, value.scroll]);
+    return node;
+  };
+  const root = visit(frame.dom);
+  const style = document.createElement('style');
+  style.textContent = (frame.styles || []).filter(value => typeof value === 'string').join('\n');
+  document.head.querySelectorAll('style').forEach(node => node.remove());
+  document.head.append(style);
+  document.documentElement.className = typeof frame.documentElement?.className === 'string' ? frame.documentElement.className : '';
+  document.documentElement.style.cssText = typeof frame.documentElement?.style === 'string' ? frame.documentElement.style : '';
+  if (root.nodeName === 'BODY') document.body.replaceWith(root);else document.body.replaceChildren(root);
+  for (const [node, [x, y]] of scrolls) node.scrollTo(x, y);
+};
+const mountPlayer = async (container, {
+  workerUrl,
+  source
+}) => {
+  const client = createClient(workerUrl);
+  container.replaceChildren();
+  container.className = 'SessionReplay';
+  container.style.cssText = 'position:fixed;inset:0;display:flex;flex-direction:column;background:#202020;color:white;z-index:2147483647';
+  const document = container.ownerDocument;
+  const viewport = document.createElement('div');
+  viewport.style.cssText = 'flex:1;min-height:0;overflow:auto;position:relative';
+  const iframe = document.createElement('iframe');
+  iframe.title = 'Recorded session';
+  iframe.setAttribute('sandbox', 'allow-same-origin');
+  iframe.style.cssText = 'border:0;pointer-events:none;display:block';
+  const loaded = new Promise(resolve => {
+    iframe.onload = resolve;
+  });
+  // An opaque, inert visual document: recorded markup cannot run scripts, submit forms or fetch URLs.
+  iframe.srcdoc = '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src &#39;none&#39;; style-src &#39;unsafe-inline&#39;; img-src data:; font-src data:"></head><body></body></html>';
+  viewport.append(iframe);
+  const controls = document.createElement('div');
+  controls.style.cssText = 'display:flex;gap:12px;align-items:center;padding:12px;font:14px sans-serif;background:#202020;color:white';
+  const play = document.createElement('button');
+  play.textContent = 'Play';
+  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.style.flex = '1';
+  const status = document.createElement('output');
+  status.setAttribute('aria-live', 'polite');
+  controls.append(play, slider, status);
+  container.append(viewport, controls);
+  let disposed = false;
+  let playing = false;
+  let timer;
+  let requestId = 0;
+  let position = 0;
+  let duration = 0;
+  const show = result => {
+    position = result.position;
+    duration = result.duration;
+    slider.max = String(Math.ceil(duration));
+    slider.value = String(Math.round(position));
+    status.textContent = `${(position / 1000).toFixed(1)} / ${(duration / 1000).toFixed(1)} s`;
+    const [width, height] = result.frame.viewport || [1280, 720];
+    iframe.style.width = `${Math.max(1, Math.min(16384, width))}px`;
+    iframe.style.height = `${Math.max(1, Math.min(16384, height))}px`;
+    renderFrame(iframe.contentDocument, result.frame);
+  };
+  const pause = () => {
+    playing = false;
+    clearTimeout(timer);
+    play.textContent = 'Play';
+  };
+  const seek = async time => {
+    const id = ++requestId;
+    const result = await client.invoke('seek', time);
+    if (!disposed && id === requestId) show(result);
+  };
+  const report = error => {
+    pause();
+    status.textContent = error.message;
+  };
+  slider.oninput = () => {
+    pause();
+    void seek(Number(slider.value)).catch(report);
+  };
+  play.onclick = () => {
+    if (playing) {
+      pause();
+      return;
+    }
+    playing = true;
+    play.textContent = 'Pause';
+    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(tick, 50);
+      } catch (error) {
+        report(error);
+      }
+    };
+    void tick();
+  };
+  try {
+    const [initial] = await Promise.all([client.invoke('load', source), loaded]);
+    show(initial);
+  } catch (error) {
+    play.disabled = slider.disabled = true;
+    report(error);
+  }
+  return () => {
+    disposed = true;
+    pause();
+    client.dispose();
+    container.replaceChildren();
+  };
+};
+
+const state$h = {
+  client: undefined,
+  inFlight: 0,
+  lastError: '',
+  stopObserving: undefined
+};
+const attached = new WeakSet();
+const workerUrl = new URL('sessionReplayWorkerMain.js', import.meta.url);
+const report = error => {
+  state$h.lastError = error.message;
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  console.warn(`Session replay: ${error.message}`);
+};
+const record$1 = (direction, message) => {
+  if (!state$h.client || state$h.lastError) return;
+  if (state$h.inFlight >= 500) {
+    report(new Error('Recording cannot keep up with renderer messages'));
+    return;
+  }
+  try {
+    const value = serializeMessage({
+      direction,
+      message
+    });
+    state$h.inFlight++;
+    void state$h.client.invoke('record', 'message', value).catch(report).finally(() => {
+      state$h.inFlight--;
+    });
+  } catch (error) {
+    report(error);
+  }
+};
+
+// Observe the actual transports, including messages on direct view-worker ports.
+// The recording path never changes or delays the original message or transfer list.
+const attach = rpc => {
+  const ipc = rpc.ipc;
+  if (!ipc || attached.has(ipc)) return;
+  attached.add(ipc);
+  const ignoredReplies = {
+    received: new Set(),
+    sent: new Set()
+  };
+  const trace = (direction, message) => {
+    if (message?.method?.startsWith('SessionReplay.')) {
+      if (message.id !== undefined) ignoredReplies[direction === 'received' ? 'sent' : 'received'].add(message.id);
+      return;
+    }
+    if (message && ('result' in message || 'error' in message) && ignoredReplies[direction].delete(message.id)) return;
+    record$1(direction, message);
+  };
+  if (typeof ipc.addEventListener === 'function') {
+    ipc.addEventListener('message', event => trace('received', ipc.getData ? ipc.getData(event) : event.data));
+  }
+  for (const name of ['send', 'sendAndTransfer']) {
+    if (typeof ipc[name] !== 'function') continue;
+    const original = ipc[name].bind(ipc);
+    ipc[name] = (...args) => {
+      trace('sent', args[0]);
+      return original(...args);
+    };
+  }
+};
+const configure = async options => {
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  if (state$h.client) {
+    try {
+      await state$h.client.invoke('stop');
+    } catch {
+      /* Preserve already saved local data when an upload is unavailable. */
+    }
+    state$h.client.dispose();
+    state$h.client = undefined;
+  }
+  state$h.lastError = '';
+  if (!options.local && !options.upload) return '';
+  const next = createClient(workerUrl);
+  try {
+    const id = await next.invoke('start', options);
+    state$h.client = next;
+    state$h.stopObserving = observe(document, (type, data) => next.invoke('record', type, data), report);
+    return id;
+  } catch (error) {
+    next.dispose();
+    throw error;
+  }
+};
+const getSession = async () => {
+  if (!state$h.client) throw new Error('Session replay is disabled in settings');
+  return state$h.client.invoke('export');
+};
+const getStatus = async () => {
+  if (!state$h.client) return {
+    enabled: false,
+    error: state$h.lastError
+  };
+  return {
+    enabled: true,
+    ...(await state$h.client.invoke('status')),
+    captureError: state$h.lastError
+  };
+};
+const flush = async () => state$h.client?.invoke('flush');
+const openLocalFile = async () => {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.json,application/json';
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    try {
+      if (file.size > 64 * 1024 * 1024) throw new Error('Session replay file is too large');
+      const session = JSON.parse(await file.text());
+      await configure({
+        endpoint: '',
+        local: false,
+        upload: false
+      });
+      await mountPlayer(document.body, {
+        source: {
+          session
+        },
+        workerUrl
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  input.click();
+};
+
+// Replay gets its own layout before any editor, extension or shared worker starts.
+const initializeLayout = async href => {
+  const url = new URL(href);
+  const localId = url.searchParams.get('replayId');
+  if (!localId && !url.searchParams.has('sessionReplay')) return false;
+  if (localId) await mountPlayer(document.body, {
+    source: {
+      localId
+    },
+    workerUrl
+  });else {
+    const button = document.createElement('button');
+    button.textContent = 'Open session replay file';
+    button.onclick = () => {
+      void openLocalFile();
+    };
+    document.body.replaceChildren(button);
+  }
+  return true;
+};
+
 const play = async src => {
   const audio = new Audio(src);
   await audio.play();
@@ -2094,6 +2590,7 @@ const registerRpc = (rpcId, rpc) => {
   if (previous && previous !== rpc) {
     previous.dispose();
   }
+  attach(rpc);
   rpcs.set(rpcId, rpc);
 };
 const registerView = (uid, rpcId) => {
@@ -2797,6 +3294,9 @@ const restoreExistingError = (error, currentStack) => {
 };
 const restoreMethodNotFoundError = (error, currentStack) => {
   const restoredError = new JsonRpcError(error.message);
+  Object.assign(restoredError, {
+    code: error.code
+  });
   const parentStack = getParentStack(error);
   setStack(restoredError, `${parentStack}${NewLine$1}${currentStack}`);
   return restoredError;
@@ -2816,9 +3316,13 @@ const applyDataProperties = (restoredError, error) => {
     // @ts-ignore
     restoredError.codeFrame = error.data.codeFrame;
   }
-  if (error.data.code) {
+  if (typeof error.data.code === 'string' || typeof error.data.code === 'number') {
     // @ts-ignore
-    restoredError.code = error.data.code;
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.data.code,
+      writable: true
+    });
   }
   if (error.data.type) {
     // @ts-ignore
@@ -2840,6 +3344,13 @@ const applyDirectProperties = (restoredError, error) => {
 };
 const restoreMessageError = (error, _currentStack) => {
   const restoredError = constructError(error.message, error.type, error.name);
+  if (typeof error.code === 'string' || typeof error.code === 'number') {
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.code,
+      writable: true
+    });
+  }
   if (error.data) {
     applyDataProperties(restoredError, error);
   } else {
@@ -2918,7 +3429,7 @@ const getErrorProperty = (error, prettyError) => {
   return {
     code: Custom,
     data: {
-      code: prettyError.code,
+      code: prettyError.code ?? error?.code,
       codeFrame: prettyError.codeFrame,
       name: prettyError.name,
       stack: getStack(prettyError),
@@ -2955,7 +3466,12 @@ const getErrorResponseSimple = (id, error) => {
   return {
     error: {
       code: Custom,
-      data: error,
+      data: error instanceof Error ? {
+        ...error,
+        code: 'code' in error ? error.code : undefined,
+        stack: error.stack,
+        type: error.name
+      } : error,
       // @ts-ignore
       message: error.message
     },
@@ -3343,6 +3859,7 @@ const launchDragAndDropWorker = async () => {
       commandMap: commandMapRef,
       messagePort: port2
     });
+    attach(rpc);
     return success(rpc);
   } catch (error$1) {
     return error(error$1);
@@ -3521,6 +4038,7 @@ const launchWorker = async ({
       name,
       url
     });
+    attach(rpc);
     return success(rpc);
   } catch (error$1) {
     return error(error$1);
@@ -4084,6 +4602,7 @@ const create$v = async ({
     commandMap: {},
     window
   });
+  attach(rpc);
   const webContentsIds = await rpc.invokeAndTransfer('CreateMessagePort.createMessagePort', ipcId, port);
   return webContentsIds;
 };
@@ -10410,6 +10929,7 @@ const handleMessagePort = async (port, rpcId) => {
     },
     messagePort: port
   });
+  attach(rpc);
   if (rpcId !== undefined) {
     registerRpc(rpcId, rpc);
   }
@@ -10789,6 +11309,11 @@ const commandMap = {
   'PointerCapture.unmock': unmock,
   'Prompt.prompt': prompt,
   'ScreenCapture.start': start,
+  'SessionReplay.configure': configure,
+  'SessionReplay.flush': flush,
+  'SessionReplay.getSession': getSession,
+  'SessionReplay.getStatus': getStatus,
+  'SessionReplay.openLocalFile': openLocalFile,
   'TestFrameWork.checkConditionError': checkConditionError,
   'TestFrameWork.checkMultiElementCondition': checkMultiElementCondition,
   'TestFrameWork.checkSingleElementCondition': checkSingleElementCondition,
@@ -11305,6 +11830,7 @@ const enable = async window => {
 };
 
 const main = async () => {
+  if (await initializeLayout(location.href)) return;
   initialize(location.search);
   Object.assign(commandMapRef, commandMap);
   enable(window);

package/dist/sessionReplayWorkerMain.js

@@ -0,0 +1,219 @@
+const version = 1;
+const maxEventBytes = 750_000;
+const maxSessionBytes = 64 * 1024 * 1024;
+const bytes = (value) => new TextEncoder().encode(JSON.stringify(value)).byteLength;
+
+const validateSession = (session) => {
+  if (session?.version !== version || !Array.isArray(session.events) || session.events.length > 200_000 || bytes(session) > maxSessionBytes) {
+    throw new Error('Unsupported or oversized session replay')
+  }
+  let time = 0;
+  for (const [sequence, event] of session.events.entries()) {
+    if (event.sequence !== sequence || !Number.isFinite(event.timestamp) || event.timestamp < time || !['frame', 'message'].includes(event.type)) {
+      throw new Error('Invalid session replay event sequence')
+    }
+    if (bytes(event) > maxEventBytes) throw new Error('Session replay event is too large')
+    time = event.timestamp;
+  }
+  return session
+};
+
+// Binary search makes dragging independent of the number of diagnostic messages.
+const loadContent = (session) => {
+  validateSession(session);
+  const frames = session.events.filter((event) => event.type === 'frame');
+  if (!frames.length) throw new Error('This session has no visual frames')
+  const duration = session.events.at(-1)?.timestamp || 0;
+  const seek = (timestamp) => {
+    const position = Math.max(0, Math.min(duration, Number(timestamp) || 0));
+    let low = 0;
+    let high = frames.length;
+    while (low < high) {
+      const middle = (low + high) >>> 1;
+      if (frames[middle].timestamp <= position) low = middle + 1;
+      else high = middle;
+    }
+    return { position, duration, frame: frames[Math.max(0, low - 1)].data }
+  };
+  return { duration, seek }
+};
+
+const createRecorder = ({ storage, fetch: request = globalThis.fetch, now = () => performance.now() }) => {
+  let metadata;
+  let options;
+  let events = [];
+  let pending = [];
+  let size = 0;
+  let origin = 0;
+  let remote;
+  let uploadPromise;
+  let lastError = '';
+  let saved = 0;
+  let uploaded = 0;
+  const start = async (config) => {
+    if (metadata) throw new Error('A session is already recording')
+    options = config;
+    origin = now();
+    metadata = { id: crypto.randomUUID(), version, createdAt: new Date().toISOString() };
+    if (options.local) await storage.save(metadata, []);
+    return metadata.id
+  };
+  const record = async (type, data) => {
+    if (!metadata) return
+    const event = { sequence: events.length, timestamp: Math.max(events.at(-1)?.timestamp || 0, now() - origin), type, data };
+    const eventSize = bytes(event);
+    if (eventSize > maxEventBytes || size + eventSize > maxSessionBytes)
+      throw new Error('Session replay storage limit reached; download this session and start a new one')
+    size += eventSize;
+    events.push(event);
+    if (options.upload) pending.push(event);
+    if (options.local) {
+      await storage.save(metadata, [event]);
+      saved++;
+    }
+  };
+  const doUpload = async () => {
+    if (!options?.upload || !pending.length) return
+    const endpoint = new URL(options.endpoint);
+    if (!['https:', 'http:'].includes(endpoint.protocol)) throw new Error('Invalid session replay backend URL')
+    const headers = { 'Content-Type': 'application/json', ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}) };
+    const send = async (url, body) => {
+      const response = await request(url, {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+        body: JSON.stringify(body),
+        signal: AbortSignal.timeout(10_000),
+      });
+      if (!response.ok) throw new Error(`Session replay upload failed (${response.status})`)
+      return response.json()
+    };
+    if (!remote) remote = await send(endpoint, { version, createdAt: metadata.createdAt });
+    while (pending.length) {
+      const batch = [];
+      let batchBytes = 0;
+      for (const event of pending) {
+        const length = bytes(event);
+        if (batch.length && (batchBytes + length > 800_000 || batch.length >= 250)) break
+        batch.push(event);
+        batchBytes += length;
+      }
+      const url = new URL(endpoint);
+      url.pathname = `${url.pathname.replace(/\/$/, '')}/${encodeURIComponent(remote.id)}/events`;
+      await send(url, { uploadToken: remote.uploadToken, events: batch });
+      pending.splice(0, batch.length);
+      uploaded += batch.length;
+    }
+  };
+  const flush = () => {
+    uploadPromise ||= doUpload()
+      .then(
+        () => {
+          lastError = '';
+        },
+        (error) => {
+          lastError = error.message;
+          throw error
+        },
+      )
+      .finally(() => {
+        uploadPromise = undefined;
+      });
+    return uploadPromise
+  };
+  return {
+    start,
+    record,
+    flush,
+    export: () => ({ ...metadata, events }),
+    status: () => ({ id: metadata?.id, events: events.length, saved, uploaded, pending: pending.length, bytes: size, error: lastError }),
+  }
+};
+
+const open = () =>
+  new Promise((resolve, reject) => {
+    const request = indexedDB.open('lvce-session-replays', 1);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore('sessions', { keyPath: 'id' });
+      request.result.createObjectStore('events', { keyPath: ['sessionId', 'sequence'] });
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+
+const createStorage = async () => {
+  const db = await open();
+  const transaction = (stores, action) =>
+    new Promise((resolve, reject) => {
+      const tx = db.transaction(stores, 'readwrite');
+      action(tx);
+      tx.oncomplete = () => resolve();
+      tx.onerror = tx.onabort = () => reject(tx.error || new Error('Replay storage transaction aborted'));
+    });
+  return {
+    save: (session, events) =>
+      transaction(['sessions', 'events'], (tx) => {
+        tx.objectStore('sessions').put(session);
+        for (const event of events) tx.objectStore('events').put({ ...event, sessionId: session.id });
+      }),
+    read: (id) =>
+      new Promise((resolve, reject) => {
+        const tx = db.transaction(['sessions', 'events']);
+        const metadata = tx.objectStore('sessions').get(id);
+        const events = tx.objectStore('events').getAll(IDBKeyRange.bound([id, 0], [id, Number.MAX_SAFE_INTEGER]));
+        tx.oncomplete = () =>
+          metadata.result
+            ? resolve({ ...metadata.result, events: events.result.map(({ sessionId, ...event }) => event) })
+            : reject(new Error('Session replay not found'));
+        tx.onerror = () => reject(tx.error);
+      }),
+    close: () => db.close(),
+  }
+};
+
+let storage;
+let recorder;
+let content;
+let queue = Promise.resolve();
+let timer;
+const getStorage = async () => (storage ||= await createStorage());
+const commands = {
+  async start(options) {
+    recorder = createRecorder({ storage: options.local ? await getStorage() : undefined });
+    const id = await recorder.start(options);
+    clearInterval(timer);
+    timer = setInterval(() => recorder.flush().catch(() => {}), 2000);
+    return id
+  },
+  record: (type, data) => recorder.record(type, data),
+  flush: () => recorder.flush(),
+  export: () => recorder.export(),
+  status: () => recorder.status(),
+  async load(source) {
+    let session;
+    if (source.localId) session = await (await getStorage()).read(source.localId);
+    else if (source.url) {
+      const response = await fetch(source.url, { credentials: 'include', headers: { Accept: 'application/json' } });
+      if (!response.ok) throw new Error(`Cannot load session replay (${response.status})`)
+      session = await response.json();
+    } else session = source.session;
+    content = loadContent(session);
+    return content.seek(0)
+  },
+  seek: (timestamp) => content.seek(timestamp),
+  async stop() {
+    clearInterval(timer);
+    await recorder?.flush();
+    storage?.close();
+  },
+};
+self.onmessage = ({ data: { id, method, params = [] } }) => {
+  queue = queue.then(async () => {
+    try {
+      if (!Object.hasOwn(commands, method)) throw new Error('Unknown session replay command')
+      self.postMessage({ id, result: await commands[method](...params) });
+    } catch (error) {
+      self.postMessage({ id, error: error.message });
+    }
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "30.56.0",
+  "version": "30.57.1",
   "keywords": [
     "lvce-editor",
     "renderer-process"