@luxonis/visualizer-protobuf 2.67.2 → 2.68.0

package/dist/{index-D7JYN_IN.js → index-D5xb8lsX.js}

@@ -3,7 +3,7 @@ import React__default, { useReducer, useRef, useCallback, useLayoutEffect, Compo
 import ReactDOM__default from 'react-dom';
 import { Y as isSymbol, Z as toString, $ as keys, a0 as getSymbols$1, a1 as stubArray, a2 as arrayPush, a3 as baseGetAllKeys, g as getTag, a4 as getAllKeys, k as baseGet, c as baseIteratee, j as castPath, t as toKey, a5 as arrayMap$1, a6 as baseUniq, b as baseFlatten, a7 as useMustNotChange, a8 as useCurrentLayoutActions, a9 as useCurrentLayoutSelector, r as reportError, A as AppError, L as Logger, u as useGuaranteedContext, aa as usePanelMosaicId, ab as useSelectedPanels, ac as PANEL_TITLE_CONFIG_KEY, ad as noop$4, o as getPanelTypeFromId, M as useShallowMemo, T as TAB_PANEL_TYPE, J as filterMap, d as dist$2, ae as useAppConfiguration, af as useValueChangedDebugLog, ag as useJsonTreeTheme } from './depth-CFY2W_Vf.js';
 import { createStore, useStore } from 'zustand';
-import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports, J as DEFAULT_CAMERA_STATE$1, K as format$1, M as z, N as serializeError, O as stringify$1, Q as createIntl, T as createIntlCache } from './index-CLHPbWo6.js';
+import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports, J as DEFAULT_CAMERA_STATE$1, K as format$1, M as z, N as serializeError, O as stringify$1, Q as createIntl, T as createIntlCache } from './index-DycPqoQx.js';
 import { MosaicDragType, MosaicContext, MosaicWindowContext, getOtherBranch, getNodeAtPath } from 'react-mosaic-component';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as getAugmentedNamespace } from './protobuf-BFCtaU7c.js';
 import { Link, Button, alpha, IconButton, Card, CardActionArea, CardMedia, CardContent, Typography, Container, Tooltip, Fade, ListItem, ListItemButton, ListItemText, List, TextField, InputAdornment, Popper, Grow, Paper, ClickAwayListener, Menu, MenuItem, Divider, buttonClasses, Backdrop, Chip, useTheme, alertClasses, darken, lighten, inputBaseClasses, autocompleteClasses, inputClasses, Checkbox, dialogActionsClasses, filledInputClasses, inputAdornmentClasses, listSubheaderClasses, selectClasses, tableCellClasses, ThemeProvider as ThemeProvider$1, SvgIcon, tabsClasses as tabsClasses$1, tabClasses, Tabs, Tab, ListItemIcon } from '@mui/material';
@@ -32221,54 +32221,29 @@ class ImageModeCamera extends PerspectiveCamera {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-function normalizeImageData(data) {
-  if (data == undefined) {
-    return new Uint8Array(0);
-  } else if (data instanceof Int8Array || data instanceof Uint8Array) {
-    return data;
-  } else {
-    return new Uint8Array(0);
-  }
-}
-function normalizeRosImage(message) {
-  return {
-    header: normalizeHeader(message.header),
-    height: message.height ?? 0,
-    width: message.width ?? 0,
-    encoding: message.encoding ?? "",
-    is_bigendian: message.is_bigendian ?? false,
-    step: message.step ?? 0,
-    data: normalizeImageData(message.data)
-  };
-}
-function normalizeRosCompressedImage(message) {
-  return {
-    header: normalizeHeader(message.header),
-    format: message.format ?? "",
-    data: normalizeByteArray(message.data)
-  };
-}
-function normalizeRawImage(message) {
-  return {
-    timestamp: normalizeTime(message.timestamp),
-    frame_id: message.frame_id ?? "",
-    height: message.height ?? 0,
-    width: message.width ?? 0,
-    encoding: message.encoding ?? "",
-    step: (message.stride || message.step) ?? 0,
-    data: normalizeImageData(message.data),
-    stride: message.stride,
-    planeStride: message.planeStride
-  };
-}
-function normalizeCompressedImage(message) {
-  return {
-    timestamp: normalizeTime(message.timestamp),
-    frame_id: message.frame_id ?? "",
-    format: message.format ?? "",
-    data: normalizeByteArray(message.data)
-  };
-}
+/** Want to render after all other objects in the scene so that they are not occluded by other objects */
+const ANNOTATION_FRONT_POSITION = 100000;
+
+/** Render order for given annotations. Higher numbers rendered after lower numbers */
+const ANNOTATION_RENDER_ORDER = {
+  FILL: 1 + ANNOTATION_FRONT_POSITION,
+  LINE_PREPASS: 2 + ANNOTATION_FRONT_POSITION,
+  LINE: 3 + ANNOTATION_FRONT_POSITION,
+  POINTS: 4 + ANNOTATION_FRONT_POSITION,
+  TEXT: 5 + ANNOTATION_FRONT_POSITION
+};
+
+/** we want annotations to show on top of the entire scene. These are material props to achieve that */
+const annotationRenderOrderMaterialProps = {
+  /** We need to set transparent to true so that transparent objects aren't rendered on top of it.
+   * Transparent objects are rendered after non-transparent objects. If this were set to false or
+   * set based on color of annotations, then the foreground image with opacity would be rendered on top
+   * until it is fully opaque.
+   */
+  transparent: true,
+  depthWrite: false,
+  depthTest: false
+};
 
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
@@ -32504,442 +32479,6 @@ function getAnnotationAtPath(message, path) {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const syncToleranceSec = 0.15; // maximum acceptable time difference for selecting a “closest” annotation.
-const maxStalenessSec = 1.1; // how long we can hold the last older annotation if no better match is available. 1s corresponds to 1 FPS + 100ms window for jitter.
-const hysteresisSec = 0.1; // how much “stickiness” we allow before switching candidates.
-const imageRetentionSec = 5; // keep small window of recent images
-const maxImageBuffer = 150; // cap number of stored images
-
-// Have constants for the HUD items so that they don't need to be recreated and GCed every message
-const WAITING_FOR_BOTH_HUD_ITEM = {
-  id: WAITING_FOR_BOTH_MESSAGES_HUD_ID,
-  group: IMAGE_MODE_HUD_GROUP_ID,
-  getMessage: () => t3D("waitingForCalibrationAndImages"),
-  displayType: "empty"
-};
-const WAITING_FOR_CALIBRATION_HUD_ITEM = {
-  id: WAITING_FOR_CALIBRATION_HUD_ID,
-  group: IMAGE_MODE_HUD_GROUP_ID,
-  getMessage: () => t3D("waitingForCalibration"),
-  displayType: "empty"
-};
-const WAITING_FOR_IMAGE_NOTICE_HUD_ITEM = {
-  id: WAITING_FOR_IMAGES_NOTICE_ID,
-  group: IMAGE_MODE_HUD_GROUP_ID,
-  getMessage: () => t3D("waitingForImages"),
-  displayType: "notice"
-};
-const WAITING_FOR_IMAGE_EMPTY_HUD_ITEM = {
-  id: WAITING_FOR_IMAGES_EMPTY_HUD_ID,
-  group: IMAGE_MODE_HUD_GROUP_ID,
-  getMessage: () => t3D("waitingForImages"),
-  displayType: "empty"
-};
-
-/**
- * Processes and normalizes incoming messages and manages state of
- * messages to be rendered given the ImageMode config. A large part of this responsibility
- * is managing state in synchronized mode and ensuring that the a synchronized set of image and
- * annotations are handed off to the SceneExtension for rendering.
- */
-class MessageHandler {
-  /** settings that should reflect image mode config */
-  #config;
-
-  /** Allows message handler push messages to overlay on top of the canvas */
-  #hud;
-
-  /** last state passed to listeners */
-  #oldRenderState;
-
-  /** internal state of last received messages */
-  #lastReceivedMessages;
-
-  /** listener functions that are called when the state changes. */
-  #listeners = [];
-
-  /** Holds what annotations are currently available on the given source. These are needed because annotations
-   * that are marked as visible may be present in the layout/config, but are not present on the source.
-   * This can cause synchronized annotations to never resolve if the source does not have the annotation topic
-   * with no indication to the user that the annotation is not available.
-   */
-
-  #onAnnotationReceivedEvent;
-  #annotationsFpsRefreshInterval = null;
-  // New: keep a buffer of recent images for annotation-prioritized synchronization
-  imagesBuffer = [];
-  // Store a small buffer of recent annotations per topic with computed seconds timestamps
-  annotationsMap = new Map();
-  // Track last selected annotation per topic to add hysteresis and reduce flicker
-  lastSelectedByTopic = new Map();
-  /**
-   * Create a MessageHandler
-   * @param {Immutable<Config>} config - subset of ImageMode settings required for message handling
-   * @param {HUDItemManager} hud - HUD manager used to display informational messages on the canvas
-   */
-  constructor(config, hud) {
-    this.#config = config;
-    this.#hud = hud;
-    this.#lastReceivedMessages = {
-      annotationsByTopic: new Map()
-    };
-    this.availableAnnotationTopics = new Set();
-  }
-  dispose() {
-    if (this.#annotationsFpsRefreshInterval) {
-      clearInterval(this.#annotationsFpsRefreshInterval);
-    }
-  }
-  addListener(listener) {
-    this.#listeners.push(listener);
-  }
-  addAnnotationReceivedEventHandler(handler) {
-    this.#onAnnotationReceivedEvent = handler;
-  }
-  removeListener(listener) {
-    this.#listeners = this.#listeners.filter(fn => fn !== listener);
-  }
-  handleRosRawImage = messageEvent => {
-    this.handleImage(messageEvent, normalizeRosImage(messageEvent.message));
-  };
-  handleRosCompressedImage = messageEvent => {
-    this.handleImage(messageEvent, normalizeRosCompressedImage(messageEvent.message));
-  };
-  handleRawImage = messageEvent => {
-    this.handleImage(messageEvent, normalizeRawImage(messageEvent.message));
-  };
-  handleCompressedImage = messageEvent => {
-    this.handleImage(messageEvent, normalizeCompressedImage(messageEvent.message));
-  };
-  handleImage(message, image) {
-    this.lastImage = {
-      ...message,
-      message: image
-    };
-
-    // Compute timestamp seconds for buffer storage (prefer image stamp, then receiveTime, then wall clock)
-    const stamp = getTimestampFromImage(image);
-    let stampTimeSec;
-    const stampSec = stamp?.sec;
-    const stampNsec = stamp?.nsec;
-    if (typeof stampSec === "number" && typeof stampNsec === "number") {
-      stampTimeSec = stampSec + stampNsec / 1e9;
-    } else {
-      const recv = message.receiveTime;
-      const recvSec = recv?.sec;
-      const recvNsec = recv?.nsec;
-      if (typeof recvSec === "number" && typeof recvNsec === "number") {
-        stampTimeSec = recvSec + recvNsec / 1e9;
-      }
-    }
-    const arrivalSec = performance.now() / 1000;
-    this.imagesBuffer.push({
-      image: this.lastImage,
-      stampTimeSec,
-      arrivalSec
-    });
-    // Trim by arrival time and length (do not use stamped time for retention)
-    const nowSec = performance.now() / 1000;
-    const cutoffArrival = nowSec - imageRetentionSec;
-    this.imagesBuffer = this.imagesBuffer.filter(e => e.arrivalSec >= cutoffArrival);
-    if (this.imagesBuffer.length > maxImageBuffer) {
-      this.imagesBuffer.splice(0, this.imagesBuffer.length - maxImageBuffer);
-    }
-    this.#emitState();
-  }
-  handleCameraInfo = message => {
-    this.#lastReceivedMessages.cameraInfo = normalizeCameraInfo(message.message);
-    this.#emitState();
-  };
-  handleAnnotations = messageEvent => {
-    const list = normalizeAnnotations(messageEvent.message, messageEvent.schemaName);
-    const arrivalSec = performance.now() / 1000;
-    if (list.length > 0 && messageEvent.topic) {
-      this.#onAnnotationReceivedEvent?.();
-
-      // Prefer timestamps embedded in the annotations themselves
-      const stampTimes = [];
-      for (const a of list) {
-        const sec = a.stamp?.sec;
-        const nsec = a.stamp?.nsec;
-        if (typeof sec === "number" && typeof nsec === "number") {
-          stampTimes.push(sec + nsec / 1e9);
-        }
-      }
-      const timeSec = stampTimes.length > 0 ? Math.max(...stampTimes) : arrivalSec;
-      const entry = {
-        annotation: {
-          originalMessage: messageEvent,
-          annotations: list
-        },
-        timeSec,
-        arrivalSec
-      };
-      const topic = messageEvent.topic;
-      const buffer = this.annotationsMap.get(topic) ?? [];
-      buffer.push(entry);
-
-      // Keep unlimited buffer length, but drop entries older than 20 seconds based on arrival time
-      const retentionSec = 20;
-      const nowSec = performance.now() / 1000;
-      const cutoffArrival = nowSec - retentionSec;
-      const trimmed = buffer.filter(e => e.arrivalSec >= cutoffArrival);
-      this.annotationsMap.set(topic, trimmed);
-    }
-
-    // Always emit; render selection logic will pick appropriate annotations for the last image
-    this.#emitState();
-    if (this.#config.synchronize === false) {
-      return;
-    }
-
-    // synchronized mode does selection in #getRenderState
-  };
-  setConfig(newConfig) {
-    let changed = false;
-    if (newConfig.synchronize != undefined && newConfig.synchronize !== this.#config.synchronize) {
-      this.#oldRenderState = undefined;
-      changed = true;
-    }
-    if ("imageTopic" in newConfig && this.#config.imageTopic !== newConfig.imageTopic) {
-      this.#lastReceivedMessages.image = undefined;
-      changed = true;
-    }
-    if (this.#config.calibrationTopic !== newConfig.calibrationTopic) {
-      this.#lastReceivedMessages.cameraInfo = undefined;
-      changed = true;
-    }
-    if (newConfig.annotations != undefined && this.#config.annotations && this.#config.annotations !== newConfig.annotations) {
-      const newVisibleTopics = new Set();
-      for (const [topic, settings] of Object.entries(newConfig.annotations)) {
-        if (settings?.visible === true) {
-          newVisibleTopics.add(topic);
-        }
-      }
-      for (const topic of this.#lastReceivedMessages.annotationsByTopic.keys()) {
-        if (!newVisibleTopics.has(topic)) {
-          this.#lastReceivedMessages.annotationsByTopic.delete(topic);
-          changed = true;
-        }
-      }
-    }
-    this.#config = newConfig;
-    if (changed) {
-      this.#emitState();
-    }
-  }
-  setAvailableAnnotationTopics(topicNames) {
-    this.availableAnnotationTopics = new Set(topicNames);
-    this.#emitState();
-  }
-  clear() {
-    this.#lastReceivedMessages = {
-      annotationsByTopic: new Map()
-    };
-    this.annotationsMap.clear();
-    this.lastSelectedByTopic.clear();
-    this.lastImage = undefined;
-    this.imagesBuffer = [];
-    this.#oldRenderState = undefined;
-    this.#emitState();
-  }
-  #emitState() {
-    const state = this.getRenderStateAndUpdateHUD();
-    this.#listeners.forEach(fn => {
-      fn(state, this.#oldRenderState);
-    });
-    this.#oldRenderState = state;
-  }
-
-  /** Do not use. only public for testing */
-  getRenderStateAndUpdateHUD() {
-    const state = this.#getRenderState();
-    this.#updateHUDFromState(state);
-    return state;
-  }
-  #updateHUDFromState(state) {
-    const calibrationRequired = this.#config.calibrationTopic != undefined;
-    const waitingForImage = this.#lastReceivedMessages.image == undefined && state.image == undefined;
-    const waitingForCalibration = calibrationRequired && state.cameraInfo == undefined;
-    const waitingForBoth = waitingForImage && waitingForCalibration;
-    this.#hud.displayIfTrue(waitingForBoth, WAITING_FOR_BOTH_HUD_ITEM);
-    this.#hud.displayIfTrue(waitingForCalibration && !waitingForBoth, WAITING_FOR_CALIBRATION_HUD_ITEM);
-    this.#hud.displayIfTrue(waitingForImage && !calibrationRequired && !waitingForBoth, WAITING_FOR_IMAGE_EMPTY_HUD_ITEM);
-    this.#hud.displayIfTrue(waitingForImage && calibrationRequired, WAITING_FOR_IMAGE_NOTICE_HUD_ITEM);
-  }
-  #getRenderState() {
-    if (this.imagesBuffer.length === 0) {
-      return {
-        annotationsByTopic: new Map(),
-        presentAnnotationTopics: undefined,
-        missingAnnotationTopics: undefined
-      };
-    }
-
-    // Visible topics
-    const visibleTopics = new Set();
-    if (this.#config.annotations) {
-      for (const [topic, settings] of Object.entries(this.#config.annotations)) {
-        if (settings?.visible) visibleTopics.add(topic);
-      }
-    }
-
-    // If there are no visible annotation topics, just render the latest image
-    if (visibleTopics.size === 0) {
-      const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
-      return {
-        image: newestImageEntry.image,
-        annotationsByTopic: new Map(),
-        presentAnnotationTopics: undefined,
-        missingAnnotationTopics: undefined
-      };
-    }
-
-    // Fast-path: if none of the visible topics has any annotation data yet, render image only
-    let hasAnyAnnotationForVisible = false;
-    for (const t of visibleTopics) {
-      const buf = this.annotationsMap.get(t);
-      if (buf && buf.length > 0) {
-        hasAnyAnnotationForVisible = true;
-        break;
-      }
-    }
-    if (!hasAnyAnnotationForVisible) {
-      const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
-      return {
-        image: newestImageEntry.image,
-        annotationsByTopic: new Map(),
-        presentAnnotationTopics: undefined,
-        missingAnnotationTopics: undefined
-      };
-    }
-
-    // Required topics (available & visible)
-    const requiredTopics = [];
-    for (const t of visibleTopics) {
-      if (this.availableAnnotationTopics.size === 0 || this.availableAnnotationTopics.has(t)) {
-        requiredTopics.push(t);
-      }
-    }
-
-    // New policy: always start from newest image by arrival (do not freeze on older frame).
-    const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
-    const imageTimestampSec = typeof newestImageEntry.stampTimeSec === "number" ? newestImageEntry.stampTimeSec : newestImageEntry.arrivalSec;
-    const selectedAnnotations = new Map();
-    const presentTopics = [];
-    const missingTopics = [];
-    for (const topic of visibleTopics) {
-      const buffer = this.annotationsMap.get(topic);
-      if (!buffer || buffer.length === 0) {
-        // No annotations yet for this topic
-        if (requiredTopics.includes(topic)) ;
-        continue;
-      }
-
-      // Find preferred (newest <= image time within staleness)
-      let preferred;
-      for (let i = buffer.length - 1; i >= 0; i--) {
-        const entry = buffer[i];
-        const age = imageTimestampSec - entry.timeSec;
-        if (age >= 0 && age <= maxStalenessSec) {
-          preferred = entry;
-          break;
-        }
-      }
-
-      // Fallback: closest within tolerance window
-      let closest = buffer[0];
-      let closestDelta = Math.abs(closest.timeSec - imageTimestampSec);
-      for (let i = 1; i < buffer.length; i++) {
-        const entry = buffer[i];
-        const delta = Math.abs(entry.timeSec - imageTimestampSec);
-        if (delta < closestDelta) {
-          closest = entry;
-          closestDelta = delta;
-        }
-      }
-      let candidate = preferred ?? closest;
-      if (!candidate) continue;
-      const candidateDelta = Math.abs(candidate.timeSec - imageTimestampSec);
-      const candidateAge = imageTimestampSec - candidate.timeSec;
-      const acceptable = preferred && candidateAge >= 0 && candidateAge <= maxStalenessSec || !preferred && candidateDelta <= syncToleranceSec;
-      const notFutureFar = candidate.timeSec <= imageTimestampSec + syncToleranceSec;
-      if (!acceptable || !notFutureFar) {
-        // can't use for now
-        continue;
-      }
-      // Hysteresis: keep previous if close
-      const prevTime = this.lastSelectedByTopic.get(topic);
-      if (prevTime != undefined) {
-        const prevEntry = buffer.find(e => Math.abs(e.timeSec - prevTime) < 1e-6);
-        if (prevEntry) {
-          const prevDelta = Math.abs(prevEntry.timeSec - imageTimestampSec);
-          const prevAge = imageTimestampSec - prevEntry.timeSec;
-          const prevValid = prevAge >= 0 && prevAge <= maxStalenessSec || prevDelta <= syncToleranceSec;
-          if (prevValid && Math.abs(prevEntry.timeSec - candidate.timeSec) <= hysteresisSec) {
-            candidate = prevEntry;
-          }
-        }
-      }
-      selectedAnnotations.set(topic, candidate.annotation);
-      presentTopics.push(topic);
-      this.lastSelectedByTopic.set(topic, candidate.timeSec);
-    }
-
-    // Determine missing topics (we have at least some annotation messages for them but could not align one this frame)
-    for (const t of requiredTopics) {
-      if (!presentTopics.includes(t)) {
-        const buf = this.annotationsMap.get(t);
-        if (buf && buf.length > 0) {
-          // We received data but could not synchronize within tolerance -> mark missing
-          missingTopics.push(t);
-        }
-      }
-    }
-
-    // Always return newest image; do not block rendering if annotations incomplete
-    return {
-      image: newestImageEntry.image,
-      annotationsByTopic: selectedAnnotations,
-      // Provide mismatch info only if we have both present and missing; otherwise undefined to reduce HUD noise
-      presentAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? presentTopics.sort() : undefined,
-      missingAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? missingTopics.sort() : undefined
-    };
-  }
-}
-
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/
-
-/** Want to render after all other objects in the scene so that they are not occluded by other objects */
-const ANNOTATION_FRONT_POSITION = 100000;
-
-/** Render order for given annotations. Higher numbers rendered after lower numbers */
-const ANNOTATION_RENDER_ORDER = {
-  FILL: 1 + ANNOTATION_FRONT_POSITION,
-  LINE_PREPASS: 2 + ANNOTATION_FRONT_POSITION,
-  LINE: 3 + ANNOTATION_FRONT_POSITION,
-  POINTS: 4 + ANNOTATION_FRONT_POSITION,
-  TEXT: 5 + ANNOTATION_FRONT_POSITION
-};
-
-/** we want annotations to show on top of the entire scene. These are material props to achieve that */
-const annotationRenderOrderMaterialProps = {
-  /** We need to set transparent to true so that transparent objects aren't rendered on top of it.
-   * Transparent objects are rendered after non-transparent objects. If this were set to false or
-   * set based on color of annotations, then the foreground image with opacity would be rendered on top
-   * until it is fully opaque.
-   */
-  transparent: true,
-  depthWrite: false,
-  depthTest: false
-};
-
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/
-
 const tempVec3$8 = new Vector3();
 let PickingMaterial$2 = class PickingMaterial extends LineMaterialWithAlphaVertex {
   constructor() {
@@ -34082,6 +33621,895 @@ class ImageAnnotations extends Object3D {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
+function normalizeImageData(data) {
+  if (data == undefined) {
+    return new Uint8Array(0);
+  } else if (data instanceof Int8Array || data instanceof Uint8Array) {
+    return data;
+  } else {
+    return new Uint8Array(0);
+  }
+}
+function normalizeRosImage(message) {
+  return {
+    header: normalizeHeader(message.header),
+    height: message.height ?? 0,
+    width: message.width ?? 0,
+    encoding: message.encoding ?? "",
+    is_bigendian: message.is_bigendian ?? false,
+    step: message.step ?? 0,
+    data: normalizeImageData(message.data)
+  };
+}
+function normalizeRosCompressedImage(message) {
+  return {
+    header: normalizeHeader(message.header),
+    format: message.format ?? "",
+    data: normalizeByteArray(message.data)
+  };
+}
+function normalizeRawImage(message) {
+  return {
+    timestamp: normalizeTime(message.timestamp),
+    frame_id: message.frame_id ?? "",
+    height: message.height ?? 0,
+    width: message.width ?? 0,
+    encoding: message.encoding ?? "",
+    step: (message.stride || message.step) ?? 0,
+    data: normalizeImageData(message.data),
+    stride: message.stride,
+    planeStride: message.planeStride
+  };
+}
+function normalizeCompressedImage(message) {
+  return {
+    timestamp: normalizeTime(message.timestamp),
+    frame_id: message.frame_id ?? "",
+    format: message.format ?? "",
+    data: normalizeByteArray(message.data)
+  };
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+const syncToleranceSec$1 = 0.15; // maximum acceptable time difference for selecting a “closest” annotation.
+const maxStalenessSec$1 = 1.1; // how long we can hold the last older annotation if no better match is available. 1s corresponds to 1 FPS + 100ms window for jitter.
+const hysteresisSec$1 = 0.1; // how much “stickiness” we allow before switching candidates.
+const imageRetentionSec$1 = 5; // keep small window of recent images
+const maxImageBuffer$1 = 150; // cap number of stored images
+
+// Have constants for the HUD items so that they don't need to be recreated and GCed every message
+const WAITING_FOR_BOTH_HUD_ITEM$1 = {
+  id: WAITING_FOR_BOTH_MESSAGES_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForCalibrationAndImages"),
+  displayType: "empty"
+};
+const WAITING_FOR_CALIBRATION_HUD_ITEM$1 = {
+  id: WAITING_FOR_CALIBRATION_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForCalibration"),
+  displayType: "empty"
+};
+const WAITING_FOR_IMAGE_NOTICE_HUD_ITEM$1 = {
+  id: WAITING_FOR_IMAGES_NOTICE_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForImages"),
+  displayType: "notice"
+};
+const WAITING_FOR_IMAGE_EMPTY_HUD_ITEM$1 = {
+  id: WAITING_FOR_IMAGES_EMPTY_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForImages"),
+  displayType: "empty"
+};
+
+/**
+ * Processes and normalizes incoming messages and manages state of
+ * messages to be rendered given the ImageMode config. A large part of this responsibility
+ * is managing state in synchronized mode and ensuring that the a synchronized set of image and
+ * annotations are handed off to the SceneExtension for rendering.
+ */
+class MessageHandler {
+  /** settings that should reflect image mode config */
+  #config;
+
+  /** Allows message handler push messages to overlay on top of the canvas */
+  #hud;
+
+  /** last state passed to listeners */
+  #oldRenderState;
+
+  /** internal state of last received messages */
+  #lastReceivedMessages;
+
+  /** listener functions that are called when the state changes. */
+  #listeners = [];
+
+  /** Holds what annotations are currently available on the given source. These are needed because annotations
+   * that are marked as visible may be present in the layout/config, but are not present on the source.
+   * This can cause synchronized annotations to never resolve if the source does not have the annotation topic
+   * with no indication to the user that the annotation is not available.
+   */
+
+  #onAnnotationReceivedEvent;
+  #annotationsFpsRefreshInterval = null;
+  // New: keep a buffer of recent images for annotation-prioritized synchronization
+  imagesBuffer = [];
+  // Store a small buffer of recent annotations per topic with computed seconds timestamps
+  annotationsMap = new Map();
+  // Track last selected annotation per topic to add hysteresis and reduce flicker
+  lastSelectedByTopic = new Map();
+  /**
+   * Create a MessageHandler
+   * @param {Immutable<MessageHandlerConfig>} config - subset of ImageMode settings required for message handling
+   * @param {HUDItemManager} hud - HUD manager used to display informational messages on the canvas
+   */
+  constructor(config, hud) {
+    this.#config = config;
+    this.#hud = hud;
+    this.#lastReceivedMessages = {
+      annotationsByTopic: new Map()
+    };
+    this.availableAnnotationTopics = new Set();
+  }
+  dispose() {
+    if (this.#annotationsFpsRefreshInterval) {
+      clearInterval(this.#annotationsFpsRefreshInterval);
+    }
+  }
+  addListener(listener) {
+    this.#listeners.push(listener);
+  }
+  addAnnotationReceivedEventHandler(handler) {
+    this.#onAnnotationReceivedEvent = handler;
+  }
+  removeListener(listener) {
+    this.#listeners = this.#listeners.filter(fn => fn !== listener);
+  }
+  handleRosRawImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRosImage(messageEvent.message));
+  };
+  handleRosCompressedImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRosCompressedImage(messageEvent.message));
+  };
+  handleRawImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRawImage(messageEvent.message));
+  };
+  handleCompressedImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeCompressedImage(messageEvent.message));
+  };
+  handleImage(message, image) {
+    this.lastImage = {
+      ...message,
+      message: image
+    };
+
+    // Compute timestamp seconds for buffer storage (prefer image stamp, then receiveTime, then wall clock)
+    const stamp = getTimestampFromImage(image);
+    let stampTimeSec;
+    const stampSec = stamp?.sec;
+    const stampNsec = stamp?.nsec;
+    if (typeof stampSec === "number" && typeof stampNsec === "number") {
+      stampTimeSec = stampSec + stampNsec / 1e9;
+    } else {
+      const recv = message.receiveTime;
+      const recvSec = recv?.sec;
+      const recvNsec = recv?.nsec;
+      if (typeof recvSec === "number" && typeof recvNsec === "number") {
+        stampTimeSec = recvSec + recvNsec / 1e9;
+      }
+    }
+    const arrivalSec = performance.now() / 1000;
+    this.imagesBuffer.push({
+      image: this.lastImage,
+      stampTimeSec,
+      arrivalSec
+    });
+    // Trim by arrival time and length (do not use stamped time for retention)
+    const nowSec = performance.now() / 1000;
+    const cutoffArrival = nowSec - imageRetentionSec$1;
+    this.imagesBuffer = this.imagesBuffer.filter(e => e.arrivalSec >= cutoffArrival);
+    if (this.imagesBuffer.length > maxImageBuffer$1) {
+      this.imagesBuffer.splice(0, this.imagesBuffer.length - maxImageBuffer$1);
+    }
+    this.#emitState();
+  }
+  handleCameraInfo = message => {
+    this.#lastReceivedMessages.cameraInfo = normalizeCameraInfo(message.message);
+    this.#emitState();
+  };
+  handleAnnotations = messageEvent => {
+    const list = normalizeAnnotations(messageEvent.message, messageEvent.schemaName);
+    const arrivalSec = performance.now() / 1000;
+    if (list.length > 0 && messageEvent.topic) {
+      this.#onAnnotationReceivedEvent?.();
+
+      // Prefer timestamps embedded in the annotations themselves
+      const stampTimes = [];
+      for (const a of list) {
+        const sec = a.stamp?.sec;
+        const nsec = a.stamp?.nsec;
+        if (typeof sec === "number" && typeof nsec === "number") {
+          stampTimes.push(sec + nsec / 1e9);
+        }
+      }
+      const timeSec = stampTimes.length > 0 ? Math.max(...stampTimes) : arrivalSec;
+      const entry = {
+        annotation: {
+          originalMessage: messageEvent,
+          annotations: list
+        },
+        timeSec,
+        arrivalSec
+      };
+      const topic = messageEvent.topic;
+      const buffer = this.annotationsMap.get(topic) ?? [];
+      buffer.push(entry);
+
+      // Keep unlimited buffer length, but drop entries older than 20 seconds based on arrival time
+      const retentionSec = 20;
+      const nowSec = performance.now() / 1000;
+      const cutoffArrival = nowSec - retentionSec;
+      const trimmed = buffer.filter(e => e.arrivalSec >= cutoffArrival);
+      this.annotationsMap.set(topic, trimmed);
+    }
+
+    // Always emit; render selection logic will pick appropriate annotations for the last image
+    this.#emitState();
+    if (this.#config.synchronize === false) {
+      return;
+    }
+
+    // synchronized mode does selection in #getRenderState
+  };
+  setConfig(newConfig) {
+    let changed = false;
+    if (newConfig.synchronize != undefined && newConfig.synchronize !== this.#config.synchronize) {
+      this.#oldRenderState = undefined;
+      changed = true;
+    }
+    if ("imageTopic" in newConfig && this.#config.imageTopic !== newConfig.imageTopic) {
+      this.#lastReceivedMessages.image = undefined;
+      changed = true;
+    }
+    if (this.#config.calibrationTopic !== newConfig.calibrationTopic) {
+      this.#lastReceivedMessages.cameraInfo = undefined;
+      changed = true;
+    }
+    if (newConfig.annotations != undefined && this.#config.annotations && this.#config.annotations !== newConfig.annotations) {
+      const newVisibleTopics = new Set();
+      for (const [topic, settings] of Object.entries(newConfig.annotations)) {
+        if (settings?.visible === true) {
+          newVisibleTopics.add(topic);
+        }
+      }
+      for (const topic of this.#lastReceivedMessages.annotationsByTopic.keys()) {
+        if (!newVisibleTopics.has(topic)) {
+          this.#lastReceivedMessages.annotationsByTopic.delete(topic);
+          changed = true;
+        }
+      }
+    }
+    this.#config = newConfig;
+    if (changed) {
+      this.#emitState();
+    }
+  }
+  setAvailableAnnotationTopics(topicNames) {
+    this.availableAnnotationTopics = new Set(topicNames);
+    this.#emitState();
+  }
+  clear() {
+    this.#lastReceivedMessages = {
+      annotationsByTopic: new Map()
+    };
+    this.annotationsMap.clear();
+    this.lastSelectedByTopic.clear();
+    this.lastImage = undefined;
+    this.imagesBuffer = [];
+    this.#oldRenderState = undefined;
+    this.#emitState();
+  }
+  #emitState() {
+    const state = this.getRenderStateAndUpdateHUD();
+    this.#listeners.forEach(fn => {
+      fn(state, this.#oldRenderState);
+    });
+    this.#oldRenderState = state;
+  }
+
+  /** Do not use. only public for testing */
+  getRenderStateAndUpdateHUD() {
+    const state = this.#getRenderState();
+    this.#updateHUDFromState(state);
+    return state;
+  }
+  #updateHUDFromState(state) {
+    const calibrationRequired = this.#config.calibrationTopic != undefined;
+    const waitingForImage = this.#lastReceivedMessages.image == undefined && state.image == undefined;
+    const waitingForCalibration = calibrationRequired && state.cameraInfo == undefined;
+    const waitingForBoth = waitingForImage && waitingForCalibration;
+    this.#hud.displayIfTrue(waitingForBoth, WAITING_FOR_BOTH_HUD_ITEM$1);
+    this.#hud.displayIfTrue(waitingForCalibration && !waitingForBoth, WAITING_FOR_CALIBRATION_HUD_ITEM$1);
+    this.#hud.displayIfTrue(waitingForImage && !calibrationRequired && !waitingForBoth, WAITING_FOR_IMAGE_EMPTY_HUD_ITEM$1);
+    this.#hud.displayIfTrue(waitingForImage && calibrationRequired, WAITING_FOR_IMAGE_NOTICE_HUD_ITEM$1);
+  }
+  #getRenderState() {
+    if (this.imagesBuffer.length === 0) {
+      return {
+        annotationsByTopic: new Map(),
+        presentAnnotationTopics: undefined,
+        missingAnnotationTopics: undefined
+      };
+    }
+
+    // Visible topics
+    const visibleTopics = new Set();
+    if (this.#config.annotations) {
+      for (const [topic, settings] of Object.entries(this.#config.annotations)) {
+        if (settings?.visible) visibleTopics.add(topic);
+      }
+    }
+
+    // If there are no visible annotation topics, just render the latest image
+    if (visibleTopics.size === 0) {
+      const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
+      return {
+        image: newestImageEntry.image,
+        annotationsByTopic: new Map(),
+        presentAnnotationTopics: undefined,
+        missingAnnotationTopics: undefined
+      };
+    }
+
+    // Fast-path: if none of the visible topics has any annotation data yet, render image only
+    let hasAnyAnnotationForVisible = false;
+    for (const t of visibleTopics) {
+      const buf = this.annotationsMap.get(t);
+      if (buf && buf.length > 0) {
+        hasAnyAnnotationForVisible = true;
+        break;
+      }
+    }
+    if (!hasAnyAnnotationForVisible) {
+      const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
+      return {
+        image: newestImageEntry.image,
+        annotationsByTopic: new Map(),
+        presentAnnotationTopics: undefined,
+        missingAnnotationTopics: undefined
+      };
+    }
+
+    // Required topics (available & visible)
+    const requiredTopics = [];
+    for (const t of visibleTopics) {
+      if (this.availableAnnotationTopics.size === 0 || this.availableAnnotationTopics.has(t)) {
+        requiredTopics.push(t);
+      }
+    }
+
+    // New policy: always start from newest image by arrival (do not freeze on older frame).
+    const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
+    const imageTimestampSec = typeof newestImageEntry.stampTimeSec === "number" ? newestImageEntry.stampTimeSec : newestImageEntry.arrivalSec;
+    const selectedAnnotations = new Map();
+    const presentTopics = [];
+    const missingTopics = [];
+    for (const topic of visibleTopics) {
+      const buffer = this.annotationsMap.get(topic);
+      if (!buffer || buffer.length === 0) {
+        // No annotations yet for this topic
+        if (requiredTopics.includes(topic)) ;
+        continue;
+      }
+
+      // Find preferred (newest <= image time within staleness)
+      let preferred;
+      for (let i = buffer.length - 1; i >= 0; i--) {
+        const entry = buffer[i];
+        const age = imageTimestampSec - entry.timeSec;
+        if (age >= 0 && age <= maxStalenessSec$1) {
+          preferred = entry;
+          break;
+        }
+      }
+
+      // Fallback: closest within tolerance window
+      let closest = buffer[0];
+      let closestDelta = Math.abs(closest.timeSec - imageTimestampSec);
+      for (let i = 1; i < buffer.length; i++) {
+        const entry = buffer[i];
+        const delta = Math.abs(entry.timeSec - imageTimestampSec);
+        if (delta < closestDelta) {
+          closest = entry;
+          closestDelta = delta;
+        }
+      }
+      let candidate = preferred ?? closest;
+      if (!candidate) continue;
+      const candidateDelta = Math.abs(candidate.timeSec - imageTimestampSec);
+      const candidateAge = imageTimestampSec - candidate.timeSec;
+      const acceptable = preferred && candidateAge >= 0 && candidateAge <= maxStalenessSec$1 || !preferred && candidateDelta <= syncToleranceSec$1;
+      const notFutureFar = candidate.timeSec <= imageTimestampSec + syncToleranceSec$1;
+      if (!acceptable || !notFutureFar) {
+        // can't use for now
+        continue;
+      }
+      // Hysteresis: keep previous if close
+      const prevTime = this.lastSelectedByTopic.get(topic);
+      if (prevTime != undefined) {
+        const prevEntry = buffer.find(e => Math.abs(e.timeSec - prevTime) < 1e-6);
+        if (prevEntry) {
+          const prevDelta = Math.abs(prevEntry.timeSec - imageTimestampSec);
+          const prevAge = imageTimestampSec - prevEntry.timeSec;
+          const prevValid = prevAge >= 0 && prevAge <= maxStalenessSec$1 || prevDelta <= syncToleranceSec$1;
+          if (prevValid && Math.abs(prevEntry.timeSec - candidate.timeSec) <= hysteresisSec$1) {
+            candidate = prevEntry;
+          }
+        }
+      }
+      selectedAnnotations.set(topic, candidate.annotation);
+      presentTopics.push(topic);
+      this.lastSelectedByTopic.set(topic, candidate.timeSec);
+    }
+
+    // Determine missing topics (we have at least some annotation messages for them but could not align one this frame)
+    for (const t of requiredTopics) {
+      if (!presentTopics.includes(t)) {
+        const buf = this.annotationsMap.get(t);
+        if (buf && buf.length > 0) {
+          // We received data but could not synchronize within tolerance -> mark missing
+          missingTopics.push(t);
+        }
+      }
+    }
+
+    // Always return newest image; do not block rendering if annotations incomplete
+    return {
+      image: newestImageEntry.image,
+      annotationsByTopic: selectedAnnotations,
+      // Provide mismatch info only if we have both present and missing; otherwise undefined to reduce HUD noise
+      presentAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? presentTopics.sort() : undefined,
+      missingAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? missingTopics.sort() : undefined
+    };
+  }
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+const syncToleranceSec = 0.15; // maximum acceptable time difference for selecting a “closest” annotation.
+const maxStalenessSec = 1.1; // how long we can hold the last older annotation if no better match is available. 1s corresponds to 1 FPS + 100ms window for jitter.
+const hysteresisSec = 0.1; // how much “stickiness” we allow before switching candidates.
+const imageRetentionSec = 5; // keep small window of recent images
+const maxImageBuffer = 150; // cap number of stored images
+
+// Have constants for the HUD items so that they don't need to be recreated and GCed every message
+const WAITING_FOR_BOTH_HUD_ITEM = {
+  id: WAITING_FOR_BOTH_MESSAGES_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForCalibrationAndImages"),
+  displayType: "empty"
+};
+const WAITING_FOR_CALIBRATION_HUD_ITEM = {
+  id: WAITING_FOR_CALIBRATION_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForCalibration"),
+  displayType: "empty"
+};
+const WAITING_FOR_IMAGE_NOTICE_HUD_ITEM = {
+  id: WAITING_FOR_IMAGES_NOTICE_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForImages"),
+  displayType: "notice"
+};
+const WAITING_FOR_IMAGE_EMPTY_HUD_ITEM = {
+  id: WAITING_FOR_IMAGES_EMPTY_HUD_ID,
+  group: IMAGE_MODE_HUD_GROUP_ID,
+  getMessage: () => t3D("waitingForImages"),
+  displayType: "empty"
+};
+
+/**
+ * Processes and normalizes incoming messages and manages state of
+ * messages to be rendered given the ImageMode config. A large part of this responsibility
+ * is managing state in synchronized mode and ensuring that the a synchronized set of image and
+ * annotations are handed off to the SceneExtension for rendering.
+ */
+class MessageHandlerV2 {
+  /** settings that should reflect image mode config */
+  #config;
+
+  /** Allows message handler push messages to overlay on top of the canvas */
+  #hud;
+
+  /** last state passed to listeners */
+  #oldRenderState;
+
+  /** internal state of last received messages */
+  #lastReceivedMessages;
+
+  /** listener functions that are called when the state changes. */
+  #listeners = [];
+
+  /** Holds what annotations are currently available on the given source. These are needed because annotations
+   * that are marked as visible may be present in the layout/config, but are not present on the source.
+   * This can cause synchronized annotations to never resolve if the source does not have the annotation topic
+   * with no indication to the user that the annotation is not available.
+   */
+
+  #onAnnotationReceivedEvent;
+  #annotationsFpsRefreshInterval = null;
+  // New: keep a buffer of recent images for annotation-prioritized synchronization
+  imagesBuffer = [];
+  // Store a small buffer of recent annotations per topic with computed seconds timestamps
+  annotationsMap = new Map();
+  // Track last selected annotation per topic to add hysteresis and reduce flicker
+  lastSelectedByTopic = new Map();
+  /**
+   * Create a MessageHandler
+   * @param {Immutable<MessageHandlerConfig>} config - subset of ImageMode settings required for message handling
+   * @param {HUDItemManager} hud - HUD manager used to display informational messages on the canvas
+   */
+  constructor(config, hud) {
+    this.#config = config;
+    this.#hud = hud;
+    this.#lastReceivedMessages = {
+      annotationsByTopic: new Map()
+    };
+    this.availableAnnotationTopics = new Set();
+  }
+  dispose() {
+    if (this.#annotationsFpsRefreshInterval) {
+      clearInterval(this.#annotationsFpsRefreshInterval);
+    }
+  }
+  addListener(listener) {
+    this.#listeners.push(listener);
+  }
+  addAnnotationReceivedEventHandler(handler) {
+    this.#onAnnotationReceivedEvent = handler;
+  }
+  removeListener(listener) {
+    this.#listeners = this.#listeners.filter(fn => fn !== listener);
+  }
+  handleRosRawImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRosImage(messageEvent.message));
+  };
+  handleRosCompressedImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRosCompressedImage(messageEvent.message));
+  };
+  handleRawImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeRawImage(messageEvent.message));
+  };
+  handleCompressedImage = messageEvent => {
+    this.handleImage(messageEvent, normalizeCompressedImage(messageEvent.message));
+  };
+  handleImage(message, image) {
+    this.lastImage = {
+      ...message,
+      message: image
+    };
+
+    // Compute timestamp seconds for buffer storage (prefer image stamp, then receiveTime, then wall clock)
+    const stamp = getTimestampFromImage(image);
+    let stampTimeSec;
+    const stampSec = stamp?.sec;
+    const stampNsec = stamp?.nsec;
+    if (typeof stampSec === "number" && typeof stampNsec === "number") {
+      stampTimeSec = stampSec + stampNsec / 1e9;
+    } else {
+      const recv = message.receiveTime;
+      const recvSec = recv?.sec;
+      const recvNsec = recv?.nsec;
+      if (typeof recvSec === "number" && typeof recvNsec === "number") {
+        stampTimeSec = recvSec + recvNsec / 1e9;
+      }
+    }
+    const arrivalSec = performance.now() / 1000;
+    if (this.#hasVisibleAnnotationTopics()) {
+      this.imagesBuffer.push({
+        image: this.lastImage,
+        stampTimeSec,
+        arrivalSec
+      });
+      // Trim by arrival time and length (do not use stamped time for retention)
+      const nowSec = performance.now() / 1000;
+      const cutoffArrival = nowSec - imageRetentionSec;
+      this.imagesBuffer = this.imagesBuffer.filter(e => e.arrivalSec >= cutoffArrival);
+      if (this.imagesBuffer.length > maxImageBuffer) {
+        this.imagesBuffer.splice(0, this.imagesBuffer.length - maxImageBuffer);
+      }
+      // Do not emit here; when annotations are visible we render on annotation arrival
+      return;
+    }
+
+    // No visible annotations -> render immediately
+    this.#emitState();
+  }
+  handleCameraInfo = message => {
+    this.#lastReceivedMessages.cameraInfo = normalizeCameraInfo(message.message);
+    this.#emitState();
+  };
+  handleAnnotations = messageEvent => {
+    const list = normalizeAnnotations(messageEvent.message, messageEvent.schemaName);
+    const arrivalSec = performance.now() / 1000;
+    if (list.length > 0 && messageEvent.topic) {
+      this.#onAnnotationReceivedEvent?.();
+
+      // Prefer timestamps embedded in the annotations themselves
+      const stampTimes = [];
+      for (const a of list) {
+        const sec = a.stamp?.sec;
+        const nsec = a.stamp?.nsec;
+        if (typeof sec === "number" && typeof nsec === "number") {
+          stampTimes.push(sec + nsec / 1e9);
+        }
+      }
+      const timeSec = stampTimes.length > 0 ? Math.max(...stampTimes) : arrivalSec;
+      const entry = {
+        annotation: {
+          originalMessage: messageEvent,
+          annotations: list
+        },
+        timeSec,
+        arrivalSec
+      };
+      const topic = messageEvent.topic;
+      const buffer = this.annotationsMap.get(topic) ?? [];
+      buffer.push(entry);
+
+      // Keep unlimited buffer length, but drop entries older than 20 seconds based on arrival time
+      const retentionSec = 20;
+      const nowSec = performance.now() / 1000;
+      const cutoffArrival = nowSec - retentionSec;
+      const trimmed = buffer.filter(e => e.arrivalSec >= cutoffArrival);
+      this.annotationsMap.set(topic, trimmed);
+    }
+
+    // Always emit; render selection logic will pick appropriate annotations for the last image
+    this.#emitState();
+    if (this.#config.synchronize === false) {
+      return;
+    }
+
+    // synchronized mode does selection in #getRenderState
+  };
+  setConfig(newConfig) {
+    let changed = false;
+    if (newConfig.synchronize != undefined && newConfig.synchronize !== this.#config.synchronize) {
+      this.#oldRenderState = undefined;
+      changed = true;
+    }
+    if ("imageTopic" in newConfig && this.#config.imageTopic !== newConfig.imageTopic) {
+      this.#lastReceivedMessages.image = undefined;
+      changed = true;
+    }
+    if (this.#config.calibrationTopic !== newConfig.calibrationTopic) {
+      this.#lastReceivedMessages.cameraInfo = undefined;
+      changed = true;
+    }
+    if (newConfig.annotations != undefined && this.#config.annotations && this.#config.annotations !== newConfig.annotations) {
+      const newVisibleTopics = new Set();
+      for (const [topic, settings] of Object.entries(newConfig.annotations)) {
+        if (settings?.visible === true) {
+          newVisibleTopics.add(topic);
+        }
+      }
+      for (const topic of this.#lastReceivedMessages.annotationsByTopic.keys()) {
+        if (!newVisibleTopics.has(topic)) {
+          this.#lastReceivedMessages.annotationsByTopic.delete(topic);
+          changed = true;
+        }
+      }
+    }
+    this.#config = newConfig;
+    if (changed) {
+      this.#emitState();
+    }
+  }
+  setAvailableAnnotationTopics(topicNames) {
+    this.availableAnnotationTopics = new Set(topicNames);
+    this.#emitState();
+  }
+  clear() {
+    this.#lastReceivedMessages = {
+      annotationsByTopic: new Map()
+    };
+    this.annotationsMap.clear();
+    this.lastSelectedByTopic.clear();
+    this.lastImage = undefined;
+    this.imagesBuffer = [];
+    this.#oldRenderState = undefined;
+    this.#emitState();
+  }
+  #emitState() {
+    const state = this.getRenderStateAndUpdateHUD();
+    this.#listeners.forEach(fn => {
+      fn(state, this.#oldRenderState);
+    });
+    this.#oldRenderState = state;
+  }
+
+  /** Check if there are any visible annotation topics configured */
+  #hasVisibleAnnotationTopics() {
+    if (!this.#config.annotations) {
+      return false;
+    }
+    for (const settings of Object.values(this.#config.annotations)) {
+      if (settings?.visible === true) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Do not use. only public for testing */
+  getRenderStateAndUpdateHUD() {
+    const state = this.#getRenderState();
+    this.#updateHUDFromState(state);
+    return state;
+  }
+  #updateHUDFromState(state) {
+    const calibrationRequired = this.#config.calibrationTopic != undefined;
+    const waitingForImage = this.#lastReceivedMessages.image == undefined && state.image == undefined;
+    const waitingForCalibration = calibrationRequired && state.cameraInfo == undefined;
+    const waitingForBoth = waitingForImage && waitingForCalibration;
+    this.#hud.displayIfTrue(waitingForBoth, WAITING_FOR_BOTH_HUD_ITEM);
+    this.#hud.displayIfTrue(waitingForCalibration && !waitingForBoth, WAITING_FOR_CALIBRATION_HUD_ITEM);
+    this.#hud.displayIfTrue(waitingForImage && !calibrationRequired && !waitingForBoth, WAITING_FOR_IMAGE_EMPTY_HUD_ITEM);
+    this.#hud.displayIfTrue(waitingForImage && calibrationRequired, WAITING_FOR_IMAGE_NOTICE_HUD_ITEM);
+  }
+  #getRenderState() {
+    // Visible topics
+    const visibleTopics = new Set();
+    if (this.#config.annotations) {
+      for (const [topic, settings] of Object.entries(this.#config.annotations)) {
+        if (settings?.visible) visibleTopics.add(topic);
+      }
+    }
+    // If there are no visible annotation topics, just render the latest image
+    if (visibleTopics.size === 0) {
+      return {
+        image: this.lastImage,
+        annotationsByTopic: new Map(),
+        presentAnnotationTopics: undefined,
+        missingAnnotationTopics: undefined
+      };
+    }
+
+    // If annotations are visible but we have no buffered images yet, we cannot render
+    if (this.imagesBuffer.length === 0) {
+      return {
+        annotationsByTopic: new Map(),
+        presentAnnotationTopics: undefined,
+        missingAnnotationTopics: undefined
+      };
+    }
+
+    // Required topics (available & visible)
+    const requiredTopics = [];
+    for (const t of visibleTopics) {
+      if (this.availableAnnotationTopics.size === 0 || this.availableAnnotationTopics.has(t)) {
+        requiredTopics.push(t);
+      }
+    }
+
+    // New policy: always start from newest image by arrival (do not freeze on older frame).
+    const newestImageEntry = this.imagesBuffer[this.imagesBuffer.length - 1];
+    const imageTimestampSec = typeof newestImageEntry.stampTimeSec === "number" ? newestImageEntry.stampTimeSec : newestImageEntry.arrivalSec;
+    const selectedAnnotations = new Map();
+    const presentTopics = [];
+    const missingTopics = [];
+    for (const topic of visibleTopics) {
+      const buffer = this.annotationsMap.get(topic);
+      if (!buffer || buffer.length === 0) {
+        // No annotations yet for this topic
+        if (requiredTopics.includes(topic)) ;
+        continue;
+      }
+
+      // Find preferred (newest <= image time within staleness)
+      let preferred;
+      for (let i = buffer.length - 1; i >= 0; i--) {
+        const entry = buffer[i];
+        const age = imageTimestampSec - entry.timeSec;
+        if (age >= 0 && age <= maxStalenessSec) {
+          preferred = entry;
+          break;
+        }
+      }
+
+      // Fallback: closest within tolerance window
+      let closest = buffer[0];
+      let closestDelta = Math.abs(closest.timeSec - imageTimestampSec);
+      for (let i = 1; i < buffer.length; i++) {
+        const entry = buffer[i];
+        const delta = Math.abs(entry.timeSec - imageTimestampSec);
+        if (delta < closestDelta) {
+          closest = entry;
+          closestDelta = delta;
+        }
+      }
+      let candidate = preferred ?? closest;
+      if (!candidate) continue;
+      const candidateDelta = Math.abs(candidate.timeSec - imageTimestampSec);
+      const candidateAge = imageTimestampSec - candidate.timeSec;
+      const acceptable = preferred && candidateAge >= 0 && candidateAge <= maxStalenessSec || !preferred && candidateDelta <= syncToleranceSec;
+      const notFutureFar = candidate.timeSec <= imageTimestampSec + syncToleranceSec;
+      if (!acceptable || !notFutureFar) {
+        // can't use for now
+        continue;
+      }
+      // Hysteresis: keep previous if close
+      const prevTime = this.lastSelectedByTopic.get(topic);
+      if (prevTime != undefined) {
+        const prevEntry = buffer.find(e => Math.abs(e.timeSec - prevTime) < 1e-6);
+        if (prevEntry) {
+          const prevDelta = Math.abs(prevEntry.timeSec - imageTimestampSec);
+          const prevAge = imageTimestampSec - prevEntry.timeSec;
+          const prevValid = prevAge >= 0 && prevAge <= maxStalenessSec || prevDelta <= syncToleranceSec;
+          if (prevValid && Math.abs(prevEntry.timeSec - candidate.timeSec) <= hysteresisSec) {
+            candidate = prevEntry;
+          }
+        }
+      }
+      selectedAnnotations.set(topic, candidate.annotation);
+      presentTopics.push(topic);
+      this.lastSelectedByTopic.set(topic, candidate.timeSec);
+    }
+
+    // Determine missing topics (we have at least some annotation messages for them but could not align one this frame)
+    for (const t of requiredTopics) {
+      if (!presentTopics.includes(t)) {
+        const buf = this.annotationsMap.get(t);
+        if (buf && buf.length > 0) {
+          // We received data but could not synchronize within tolerance -> mark missing
+          missingTopics.push(t);
+        }
+      }
+    }
+
+    // Always return newest image; do not block rendering if annotations incomplete
+    return {
+      image: newestImageEntry.image,
+      annotationsByTopic: selectedAnnotations,
+      // Provide mismatch info only if we have both present and missing; otherwise undefined to reduce HUD noise
+      presentAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? presentTopics.sort() : undefined,
+      missingAnnotationTopics: presentTopics.length > 0 && missingTopics.length > 0 ? missingTopics.sort() : undefined
+    };
+  }
+}
+
+class ImageModeMessageHandlerFactory {
+  static getMessageHandler(config, hud) {
+    const messageHandlerVersion = ImageModeMessageHandlerFactory.getSupportedVersion();
+
+    // TODO: Remove
+    console.debug(`Using message handler ${messageHandlerVersion}`);
+    return messageHandlerVersion === "v2" ? new MessageHandlerV2(config, hud) : new MessageHandler(config, hud);
+  }
+  static getSupportedVersion() {
+    const localStorageString = localStorage.getItem("connectionConfig");
+    if (!localStorageString) {
+      return "v1";
+    }
+    const parsedConfig = JSON.parse(localStorageString);
+    if (parsedConfig.messageHandlerVersion === "v2") {
+      return "v2";
+    }
+    return "v1";
+  }
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
 const log$4 = Logger.getLogger("src/index.ts");
 const CALIBRATION_TOPIC_PATH = ["imageMode", "calibrationTopic"];
 const IMAGE_TOPIC_UNAVAILABLE = "IMAGE_TOPIC_UNAVAILABLE";
@@ -34189,7 +34617,7 @@ class ImageMode extends SceneExtension {
     this.#handleTopicsChanged();
   }
   initMessageHandler(config) {
-    return new MessageHandler(config, this.hud);
+    return ImageModeMessageHandlerFactory.getMessageHandler(config, this.hud);
   }
   hasModifiedView() {
     return this.#hasModifiedView;