@rerun-io/web-viewer 0.17.0-alpha.1 → 0.17.0-alpha.101

package/index.js

@@ -1,450 +1,387 @@
-// @ts-check
-
-/** @type {(typeof import("./re_viewer.js").WebHandle) | null} */
-let WebHandle = null;
-
-/** @returns {Promise<(typeof import("./re_viewer.js").WebHandle)>} */
+let WebHandleConstructor = null;
 async function load() {
-  if (WebHandle) {
-    return WebHandle;
-  }
-  WebHandle = (await import("./re_viewer.js")).WebHandle;
-  return WebHandle;
+    if (WebHandleConstructor) {
+        return WebHandleConstructor;
+    }
+    WebHandleConstructor = (await import("./re_viewer.js")).WebHandle;
+    return WebHandleConstructor;
 }
-
-/**
- * Used to prevent multiple viewers from being fullscreen at the same time.
- *
- * @type {(() => void) | null}
- */
 let _minimize_current_fullscreen_viewer = null;
-
-/** @returns {string} */
 function randomId() {
-  const bytes = new Uint8Array(16);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes)
-    .map((byte) => byte.toString(16).padStart(2, "0"))
-    .join("");
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes)
+        .map((byte) => byte.toString(16).padStart(2, "0"))
+        .join("");
 }
-
-/**
- * @typedef {"top" | "blueprint" | "selection" | "time"} Panel
- *
- * @typedef {"hidden" | "collapsed" | "expanded"} PanelState
- *
- * @typedef {"webgpu" | "webgl"} Backend
- *
- * @typedef {{
- *   width: string; height: string;
- *   top: string; left: string;
- *   bottom: string; right: string;
- * }} CanvasRect
- *
- * @typedef {{
- *   canvas: CanvasRect & { position: string; transition: string; };
- *   document: { overflow: string };
- * }} CanvasStyle
- *
- * @typedef {{ on: false; saved_style: null; saved_rect: null }} FullscreenOff
- *
- * @typedef {{ on: true; saved_style: CanvasStyle; saved_rect: DOMRect }} FullscreenOn
- *
- * @typedef {(FullscreenOff | FullscreenOn)} FullscreenState
- *
- * @typedef WebViewerOptions
- * @property {string} [manifest_url] Use a different example manifest.
- * @property {Backend} [render_backend] Force the viewer to use a specific rendering backend.
- * @property {boolean} [hide_welcome_screen] Whether to hide the welcome screen in favor of a simpler one.
- * @property {boolean} [allow_fullscreen] Whether to allow the viewer to enter fullscreen mode.
- *
- * @typedef FullscreenOptions
- * @property {() => boolean} get_state
- * @property {() => void} on_toggle
- */
-
 export class WebViewer {
-  #id = randomId();
-
-  /** @type {(import("./re_viewer.js").WebHandle) | null} */
-  #handle = null;
-
-  /** @type {HTMLCanvasElement | null} */
-  #canvas = null;
-
-  /** @type {'ready' | 'starting' | 'stopped'} */
-  #state = "stopped";
-
-  /**
-   * @type {FullscreenState}
-   */
-  #fullscreen_state = {
-    on: false,
-    saved_style: null,
-    saved_rect: null,
-  };
-
-  #allow_fullscreen = false;
-
-  /**
-   * Start the viewer.
-   *
-   * @param {string | string[] | null} [rrd] URLs to `.rrd` files or WebSocket connections to our SDK.
-   * @param {HTMLElement | null} [parent] The element to attach the canvas onto.
-   * @param {WebViewerOptions | null} [options] Whether to hide the welcome screen.
-   * @returns {Promise<void>}
-   */
-  async start(rrd, parent, options) {
-    parent ??= document.body;
-    options ??= {};
-
-    this.#allow_fullscreen = options.allow_fullscreen || false;
-
-    if (this.#state !== "stopped") return;
-    this.#state = "starting";
-
-    this.#canvas = document.createElement("canvas");
-    this.#canvas.id = this.#id;
-    parent.append(this.#canvas);
-
+    #id = randomId();
+    #handle = null;
+    #canvas = null;
+    #state = "stopped";
+    #fullscreen = false;
+    #allow_fullscreen = false;
+    constructor() {
+        injectStyle();
+        setupGlobalEventListeners();
+    }
     /**
-     * @typedef AppOptions
-     * @property {string} [url]
-     * @property {string} [manifest_url]
-     * @property {Backend} [render_backend]
-     * @property {boolean} [hide_welcome_screen]
-     * @property {Partial<{[K in Panel]: PanelState}>} [panel_state_overrides]
-     * @property {FullscreenOptions} [fullscreen]
+     * Start the viewer.
      *
-     * @typedef {(import("./re_viewer.js").WebHandle)} _WebHandle
-     * @typedef {{ new(app_options?: AppOptions): _WebHandle }} WebHandleConstructor
+     * @param rrd URLs to `.rrd` files or WebSocket connections to our SDK.
+     * @param parent The element to attach the canvas onto.
+     * @param options Whether to hide the welcome screen.
      */
-
-    let WebHandle_class = /** @type {WebHandleConstructor} */ (await load());
-    if (this.#state !== "starting") return;
-
-    const fullscreen = this.#allow_fullscreen
-      ? {
-          get_state: () => this.#fullscreen_state.on,
-          on_toggle: () => this.toggle_fullscreen(),
+    async start(rrd, parent, options) {
+        parent ??= document.body;
+        options ??= {};
+        this.#allow_fullscreen = options.allow_fullscreen || false;
+        if (this.#state !== "stopped")
+            return;
+        this.#state = "starting";
+        this.#canvas = document.createElement("canvas");
+        this.#canvas.id = this.#id;
+        parent.append(this.#canvas);
+        let WebHandle_class = await load();
+        if (this.#state !== "starting")
+            return;
+        const fullscreen = this.#allow_fullscreen
+            ? {
+                get_state: () => this.#fullscreen,
+                on_toggle: () => this.toggle_fullscreen(),
+            }
+            : undefined;
+        this.#handle = new WebHandle_class({ ...options, fullscreen });
+        await this.#handle.start(this.#canvas.id);
+        if (this.#state !== "starting")
+            return;
+        if (this.#handle.has_panicked()) {
+            throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
         }
-      : undefined;
-
-    this.#handle = new WebHandle_class({ ...options, fullscreen });
-    await this.#handle.start(this.#canvas.id);
-    if (this.#state !== "starting") return;
-
-    if (this.#handle.has_panicked()) {
-      throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
+        this.#state = "ready";
+        this.#dispatch_event("ready");
+        if (rrd) {
+            this.open(rrd);
+        }
+        return;
     }
-
-    this.#state = "ready";
-    if (rrd) {
-      this.open(rrd);
+    #event_map = new Map();
+    #dispatch_event(event, value) {
+        const callbacks = this.#event_map.get(event);
+        if (callbacks) {
+            for (const [callback, { once }] of [...callbacks.entries()]) {
+                callback(value);
+                if (once)
+                    callbacks.delete(callback);
+            }
+        }
     }
-
-    return;
-  }
-
-  /**
-   * Returns `true` if the viewer is ready to connect to data sources.
-   */
-  get ready() {
-    return this.#state === "ready";
-  }
-
-  /**
-   * Open a recording.
-   *
-   * The viewer must have been started via `WebViewer.start`.
-   *
-   * @see {WebViewer.start}
-   *
-   * @param {string | string[]} rrd URLs to `.rrd` files or WebSocket connections to our SDK.
-   * @param {{ follow_if_http?: boolean }} options
-   *        - follow_if_http: Whether Rerun should open the resource in "Following" mode when streaming
-   *        from an HTTP url. Defaults to `false`. Ignored for non-HTTP URLs.
-   */
-  open(rrd, options = {}) {
-    if (!this.#handle) {
-      throw new Error(`attempted to open \`${rrd}\` in a stopped viewer`);
+    on(event, callback) {
+        const callbacks = this.#event_map.get(event) ?? new Map();
+        callbacks.set(callback, { once: false });
+        this.#event_map.set(event, callbacks);
+        return () => callbacks.delete(callback);
     }
-    const urls = Array.isArray(rrd) ? rrd : [rrd];
-    for (const url of urls) {
-      this.#handle.add_receiver(url, options.follow_if_http);
-      if (this.#handle.has_panicked()) {
-        throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
-      }
+    once(event, callback) {
+        const callbacks = this.#event_map.get(event) ?? new Map();
+        callbacks.set(callback, { once: true });
+        this.#event_map.set(event, callbacks);
+        return () => callbacks.delete(callback);
     }
-  }
-
-  /**
-   * Close a recording.
-   *
-   * The viewer must have been started via `WebViewer.start`.
-   *
-   * @see {WebViewer.start}
-   *
-   * @param {string | string[]} rrd URLs to `.rrd` files or WebSocket connections to our SDK.
-   */
-  close(rrd) {
-    if (!this.#handle) {
-      throw new Error(`attempted to close \`${rrd}\` in a stopped viewer`);
+    off(event, callback) {
+        const callbacks = this.#event_map.get(event);
+        if (callbacks) {
+            callbacks.delete(callback);
+        }
+        else {
+            console.warn("Attempted to call `WebViewer.off` with an unregistered callback. Are you using ");
+        }
     }
-    const urls = Array.isArray(rrd) ? rrd : [rrd];
-    for (const url of urls) {
-      this.#handle.remove_receiver(url);
-      if (this.#handle.has_panicked()) {
-        throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
-      }
+    /**
+     * Returns `true` if the viewer is ready to connect to data sources.
+     */
+    get ready() {
+        return this.#state === "ready";
     }
-  }
-
-  /**
-   * Stop the viewer, freeing all associated memory.
-   *
-   * The same viewer instance may be started multiple times.
-   */
-  stop() {
-    if (this.#state === "stopped") return;
-    if (this.#allow_fullscreen && this.#canvas) {
-      const state = this.#fullscreen_state;
-      if (state.on) this.#minimize(this.#canvas, state);
+    /**
+     * Open a recording.
+     *
+     * The viewer must have been started via `WebViewer.start`.
+     *
+     * @param rrd URLs to `.rrd` files or WebSocket connections to our SDK.
+     * @param options
+     *        - follow_if_http: Whether Rerun should open the resource in "Following" mode when streaming
+     *        from an HTTP url. Defaults to `false`. Ignored for non-HTTP URLs.
+     */
+    open(rrd, options = {}) {
+        if (!this.#handle) {
+            throw new Error(`attempted to open \`${rrd}\` in a stopped viewer`);
+        }
+        const urls = Array.isArray(rrd) ? rrd : [rrd];
+        for (const url of urls) {
+            this.#handle.add_receiver(url, options.follow_if_http);
+            if (this.#handle.has_panicked()) {
+                throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
+            }
+        }
     }
-
-    this.#state = "stopped";
-
-    this.#canvas?.remove();
-    this.#handle?.destroy();
-    this.#handle?.free();
-
-    this.#canvas = null;
-    this.#handle = null;
-    this.#fullscreen_state.on = false;
-    this.#allow_fullscreen = false;
-  }
-
-  /**
-   * Opens a new channel for sending log messages.
-   *
-   * The channel can be used to incrementally push `rrd` chunks into the viewer.
-   *
-   * @param {string} channel_name used to identify the channel.
-   *
-   * @returns {LogChannel}
-   */
-  open_channel(channel_name = "rerun-io/web-viewer") {
-    if (!this.#handle) {
-      throw new Error(
-        `attempted to open channel \"${channel_name}\" in a stopped web viewer`,
-      );
+    /**
+     * Close a recording.
+     *
+     * The viewer must have been started via `WebViewer.start`.
+     *
+     * @param rrd URLs to `.rrd` files or WebSocket connections to our SDK.
+     */
+    close(rrd) {
+        if (!this.#handle) {
+            throw new Error(`attempted to close \`${rrd}\` in a stopped viewer`);
+        }
+        const urls = Array.isArray(rrd) ? rrd : [rrd];
+        for (const url of urls) {
+            this.#handle.remove_receiver(url);
+            if (this.#handle.has_panicked()) {
+                throw new Error(`Web viewer crashed: ${this.#handle.panic_message()}`);
+            }
+        }
     }
-    const id = crypto.randomUUID();
-    this.#handle.open_channel(id, channel_name);
-    const on_send = (/** @type {Uint8Array} */ data) => {
-      if (!this.#handle) {
-        throw new Error(
-          `attempted to send data through channel \"${channel_name}\" to a stopped web viewer`,
-        );
-      }
-      this.#handle.send_rrd_to_channel(id, data);
-    };
-    const on_close = () => {
-      if (!this.#handle) {
-        throw new Error(
-          `attempted to send data through channel \"${channel_name}\" to a stopped web viewer`,
-        );
-      }
-      this.#handle.close_channel(id);
-    };
-    const get_state = () => this.#state;
-    return new LogChannel(on_send, on_close, get_state);
-  }
-
-  /**
-   * Force a panel to a specific state.
-   *
-   * @param {Panel} panel
-   * @param {PanelState} state
-   */
-  override_panel_state(panel, state) {
-    if (!this.#handle) {
-      throw new Error(
-        `attempted to set ${panel} panel to ${state} in a stopped web viewer`,
-      );
+    /**
+     * Stop the viewer, freeing all associated memory.
+     *
+     * The same viewer instance may be started multiple times.
+     */
+    stop() {
+        if (this.#state === "stopped")
+            return;
+        if (this.#allow_fullscreen && this.#canvas && this.#fullscreen) {
+            this.#minimize();
+        }
+        this.#state = "stopped";
+        this.#canvas?.remove();
+        this.#handle?.destroy();
+        this.#handle?.free();
+        this.#canvas = null;
+        this.#handle = null;
+        this.#fullscreen = false;
+        this.#allow_fullscreen = false;
     }
-    this.#handle.override_panel_state(panel, state);
-  }
-
-  /**
-   * Toggle panel overrides set via `override_panel_state`.
-   */
-  toggle_panel_overrides() {
-    if (!this.#handle) {
-      throw new Error(
-        `attempted to toggle panel overrides in a stopped web viewer`,
-      );
+    /**
+     * Opens a new channel for sending log messages.
+     *
+     * The channel can be used to incrementally push `rrd` chunks into the viewer.
+     *
+     * @param channel_name used to identify the channel.
+     */
+    open_channel(channel_name = "rerun-io/web-viewer") {
+        if (!this.#handle) {
+            throw new Error(`attempted to open channel \"${channel_name}\" in a stopped web viewer`);
+        }
+        const id = crypto.randomUUID();
+        this.#handle.open_channel(id, channel_name);
+        const on_send = (/** @type {Uint8Array} */ data) => {
+            if (!this.#handle) {
+                throw new Error(`attempted to send data through channel \"${channel_name}\" to a stopped web viewer`);
+            }
+            this.#handle.send_rrd_to_channel(id, data);
+        };
+        const on_close = () => {
+            if (!this.#handle) {
+                throw new Error(`attempted to send data through channel \"${channel_name}\" to a stopped web viewer`);
+            }
+            this.#handle.close_channel(id);
+        };
+        const get_state = () => this.#state;
+        return new LogChannel(on_send, on_close, get_state);
     }
-    this.#handle.toggle_panel_overrides();
-  }
-
-  /**
-   * Toggle fullscreen mode.
-   *
-   * This does nothing if `allow_fullscreen` was not set to `true` when starting the viewer.
-   *
-   * Fullscreen mode works by updating the underlying `<canvas>` element's `style`:
-   * - `position` to `fixed`
-   * - width/height/top/left to cover the entire viewport
-   *
-   * When fullscreen mode is toggled off, the style is restored to its previous values.
-   *
-   * When fullscreen mode is toggled on, any other instance of the viewer on the page
-   * which is already in fullscreen mode is toggled off. This means that it doesn't
-   * have to be tracked manually.
-   *
-   * This functionality can also be directly accessed in the viewer:
-   * - The maximize/minimize top panel button
-   * - The `Toggle fullscreen` UI command (accessible via the command palette, CTRL+P)
-   */
-  toggle_fullscreen() {
-    if (!this.#allow_fullscreen) return;
-
-    if (!this.#handle || !this.#canvas) {
-      throw new Error(
-        `attempted to toggle fullscreen mode in a stopped web viewer`,
-      );
+    /**
+     * Force a panel to a specific state.
+     *
+     * @param panel
+     * @param state
+     */
+    override_panel_state(panel, state) {
+        if (!this.#handle) {
+            throw new Error(`attempted to set ${panel} panel to ${state} in a stopped web viewer`);
+        }
+        this.#handle.override_panel_state(panel, state);
     }
-
-    const state = this.#fullscreen_state;
-    if (state.on) {
-      this.#minimize(this.#canvas, state);
-    } else {
-      this.#maximize(this.#canvas);
+    /**
+     * Toggle panel overrides set via `override_panel_state`.
+     *
+     * @param value - set to a specific value. Toggles the previous value if not provided.
+     */
+    toggle_panel_overrides(value) {
+        if (!this.#handle) {
+            throw new Error(`attempted to toggle panel overrides in a stopped web viewer`);
+        }
+        this.#handle.toggle_panel_overrides(value);
     }
-  }
-
-  #minimize = (
-    /** @type {HTMLCanvasElement} */ canvas,
-    /** @type {FullscreenOn} */ { saved_style, saved_rect },
-  ) => {
-    this.#fullscreen_state = {
-      on: false,
-      saved_style: null,
-      saved_rect: null,
-    };
-
-    if (this.#fullscreen_state.on) return;
-
-    canvas.style.width = saved_rect.width + "px";
-    canvas.style.height = saved_rect.height + "px";
-    canvas.style.top = saved_rect.top + "px";
-    canvas.style.left = saved_rect.left + "px";
-    canvas.style.bottom = saved_rect.bottom + "px";
-    canvas.style.right = saved_rect.right + "px";
-
-    setTimeout(
-      () =>
+    /**
+     * Toggle fullscreen mode.
+     *
+     * This does nothing if `allow_fullscreen` was not set to `true` when starting the viewer.
+     *
+     * Fullscreen mode works by updating the underlying `<canvas>` element's `style`:
+     * - `position` to `fixed`
+     * - width/height/top/left to cover the entire viewport
+     *
+     * When fullscreen mode is toggled off, the style is restored to its previous values.
+     *
+     * When fullscreen mode is toggled on, any other instance of the viewer on the page
+     * which is already in fullscreen mode is toggled off. This means that it doesn't
+     * have to be tracked manually.
+     *
+     * This functionality can also be directly accessed in the viewer:
+     * - The maximize/minimize top panel button
+     * - The `Toggle fullscreen` UI command (accessible via the command palette, CTRL+P)
+     */
+    toggle_fullscreen() {
+        if (!this.#allow_fullscreen)
+            return;
+        if (!this.#handle || !this.#canvas) {
+            throw new Error(`attempted to toggle fullscreen mode in a stopped web viewer`);
+        }
+        if (this.#fullscreen) {
+            this.#minimize();
+        }
+        else {
+            this.#maximize();
+        }
+    }
+    #minimize = () => { };
+    #maximize = () => {
+        _minimize_current_fullscreen_viewer?.();
+        const canvas = this.#canvas;
+        const rect = canvas.getBoundingClientRect();
+        const sync_style_to_rect = () => {
+            canvas.style.left = rect.left + "px";
+            canvas.style.top = rect.top + "px";
+            canvas.style.width = rect.width + "px";
+            canvas.style.height = rect.height + "px";
+        };
+        const undo_style = () => canvas.removeAttribute("style");
+        const transition = (callback) => setTimeout(() => requestAnimationFrame(callback), transition_delay_ms);
+        canvas.classList.add(classes.fullscreen_base, classes.fullscreen_rect);
+        sync_style_to_rect();
         requestAnimationFrame(() => {
-          for (const key in saved_style.canvas) {
-            // @ts-expect-error
-            canvas.style[key] = saved_style.canvas[key];
-          }
-          for (const key in saved_style.document) {
-            // @ts-expect-error
-            document.body.style[key] = saved_style.document[key];
-          }
-        }),
-      100,
-    );
-
-    _minimize_current_fullscreen_viewer = null;
-  };
-
-  #maximize = (/** @type {HTMLCanvasElement} */ canvas) => {
-    _minimize_current_fullscreen_viewer?.();
-
-    const style = canvas.style;
-
-    /** @type {CanvasStyle} */
-    const saved_style = {
-      canvas: {
-        position: style.position,
-        width: style.width,
-        height: style.height,
-        top: style.top,
-        left: style.left,
-        bottom: style.bottom,
-        right: style.right,
-        transition: style.transition,
-      },
-      document: { overflow: document.body.style.overflow },
+            if (!this.#fullscreen)
+                return;
+            canvas.classList.add(classes.transition);
+            transition(() => {
+                if (!this.#fullscreen)
+                    return;
+                undo_style();
+                document.body.classList.add(classes.hide_scrollbars);
+                document.documentElement.classList.add(classes.hide_scrollbars);
+            });
+        });
+        this.#minimize = () => {
+            document.body.classList.remove(classes.hide_scrollbars);
+            document.documentElement.classList.remove(classes.hide_scrollbars);
+            sync_style_to_rect();
+            canvas.classList.remove(classes.fullscreen_rect);
+            transition(() => {
+                if (this.#fullscreen)
+                    return;
+                undo_style();
+                canvas.classList.remove(classes.fullscreen_base, classes.transition);
+            });
+            _minimize_current_fullscreen_viewer = null;
+            this.#fullscreen = false;
+            this.#dispatch_event("fullscreen", false);
+        };
+        _minimize_current_fullscreen_viewer = () => this.#minimize();
+        this.#fullscreen = true;
+        this.#dispatch_event("fullscreen", true);
     };
-    const saved_rect = canvas.getBoundingClientRect();
-
-    style.width = `100%`;
-    style.height = `100%`;
-    style.top = `0px`;
-    style.left = `0px`;
-    style.bottom = `0px`;
-    style.right = `0px`;
-    style.transition = ["width", "height", "top", "left", "bottom", "right"]
-      .map((p) => `${p} 0.1s linear`)
-      .join(", ");
-    document.body.style.overflow = "hidden";
-
-    this.#fullscreen_state = {
-      on: true,
-      saved_style,
-      saved_rect,
-    };
-
-    _minimize_current_fullscreen_viewer = () => this.toggle_fullscreen();
-  };
 }
-
-export class LogChannel {
-  #on_send;
-  #on_close;
-  #get_state;
-  #closed = false;
-
-  /** @internal
-   *
-   * @param {(data: Uint8Array) => void} on_send
-   * @param {() => void} on_close
-   * @param {() => 'ready' | 'starting' | 'stopped'} get_state
-   */
-  constructor(on_send, on_close, get_state) {
-    this.#on_send = on_send;
-    this.#on_close = on_close;
-    this.#get_state = get_state;
+class LogChannel {
+    #on_send;
+    #on_close;
+    #get_state;
+    #closed = false;
+    /**
+     * @param on_send
+     * @param on_close
+     * @param get_state
+     */
+    constructor(on_send, on_close, get_state) {
+        this.#on_send = on_send;
+        this.#on_close = on_close;
+        this.#get_state = get_state;
+    }
+    get ready() {
+        return !this.#closed && this.#get_state() === "ready";
+    }
+    /**
+     * Send an `rrd` containing log messages to the viewer.
+     *
+     * Does nothing if `!this.ready`.
+     *
+     * @param rrd_bytes Is an rrd file stored in a byte array, received via some other side channel.
+     */
+    send_rrd(rrd_bytes) {
+        if (!this.ready)
+            return;
+        this.#on_send(rrd_bytes);
+    }
+    /**
+     * Close the channel.
+     *
+     * Does nothing if `!this.ready`.
+     */
+    close() {
+        if (!this.ready)
+            return;
+        this.#on_close();
+        this.#closed = true;
+    }
+}
+const classes = {
+    hide_scrollbars: "rerun-viewer-hide-scrollbars",
+    fullscreen_base: "rerun-viewer-fullscreen-base",
+    fullscreen_rect: "rerun-viewer-fullscreen-rect",
+    transition: "rerun-viewer-transition",
+};
+const transition_delay_ms = 100;
+const css = `
+  html.${classes.hide_scrollbars},
+  body.${classes.hide_scrollbars} {
+    scrollbar-gutter: auto !important;
+    overflow: hidden !important;
   }
 
-  get ready() {
-    return !this.#closed && this.#get_state() === "ready";
+  .${classes.fullscreen_base} {
+    position: fixed;
+    z-index: 99999;
   }
 
-  /**
-   * Send an `rrd` containing log messages to the viewer.
-   *
-   * Does nothing if `!this.ready`.
-   *
-   * @param {Uint8Array} rrd_bytes Is an rrd file stored in a byte array, received via some other side channel.
-   */
-  send_rrd(rrd_bytes) {
-    if (!this.ready) return;
-    this.#on_send(rrd_bytes);
+  .${classes.transition} {
+    transition: all ${transition_delay_ms / 1000}s linear;
   }
 
-  /**
-   * Close the channel.
-   *
-   * Does nothing if `!this.ready`.
-   */
-  close() {
-    if (!this.ready) return;
-    this.#on_close();
-    this.#closed = true;
+  .${classes.fullscreen_rect} {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
   }
+`;
+function injectStyle() {
+    const ID = "__rerun_viewer_style";
+    if (document.getElementById(ID)) {
+        // already injected
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = ID;
+    style.appendChild(document.createTextNode(css));
+    document.head.appendChild(style);
+}
+function setupGlobalEventListeners() {
+    window.addEventListener("keyup", (e) => {
+        if (e.code === "Escape") {
+            _minimize_current_fullscreen_viewer?.();
+        }
+    });
 }
+//# sourceMappingURL=index.js.map