@luxonis/visualizer-protobuf 2.56.0 → 2.57.0

package/dist/{index-CLA1BzlL.js → index-BFLpoF0o.js}

@@ -3,7 +3,7 @@ import React__default, { useReducer, useRef, useCallback, useLayoutEffect, Compo
 import ReactDOM__default from 'react-dom';
 import { Z as isSymbol, $ as toString, a0 as keys, a1 as getSymbols$1, a2 as stubArray, a3 as arrayPush, a4 as baseGetAllKeys, g as getTag, a5 as getAllKeys, k as baseGet, c as baseIteratee, j as castPath, t as toKey, a6 as arrayMap$1, a7 as baseUniq, b as baseFlatten, a8 as useMustNotChange, a9 as useCurrentLayoutActions, aa as useCurrentLayoutSelector, r as reportError, A as AppError, L as Logger, u as useGuaranteedContext, ab as usePanelMosaicId, ac as useSelectedPanels, ad as PANEL_TITLE_CONFIG_KEY, ae as noop$4, o as getPanelTypeFromId, M as useShallowMemo, T as TAB_PANEL_TYPE, J as filterMap, d as dist$2, af as useAppConfiguration, ag as useValueChangedDebugLog, V as typescript, ah as useJsonTreeTheme } from './depth-CJRDcPfJ.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 } from './index-DPKWgVvs.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-D5NVzgfB.js';
 import { MosaicDragType, MosaicContext, MosaicWindowContext, getOtherBranch, getNodeAtPath } from 'react-mosaic-component';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as getAugmentedNamespace } from './protobuf-B55JS-Px.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';
@@ -7514,7 +7514,7 @@ var useSnackbar = (function () {
 // 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$7 = Logger.getLogger("src/index.ts");
+const log$8 = Logger.getLogger("src/index.ts");
 
 /**
  * A version of React.useCallback() displaying any errors thrown from the function as toast notifications.
@@ -7528,7 +7528,7 @@ function useCallbackWithToast(callback, deps) {
       await callback(...args);
       return;
     } catch (error) {
-      log$7.error(error);
+      log$8.error(error);
       enqueueSnackbar(error.toString(), {
         variant: "error"
       });
@@ -29726,7 +29726,7 @@ class STLLoader extends Loader {
 // 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$6 = Logger.getLogger("src/index.ts");
+const log$7 = Logger.getLogger("src/index.ts");
 const DEFAULT_MESH_UP_AXIS = "y_up";
 const DEFAULT_COLOR$4 = new Color(0x248eff);
 const GLTF_MIME_TYPES = ["model/gltf", "model/gltf-binary", "model/gltf+json"];
@@ -29799,7 +29799,7 @@ class ModelCache {
   async #loadGltf(url, reportError) {
     const onError = assetUrl => {
       const originalUrl = unrewriteUrl(assetUrl);
-      log$6.error(`Failed to load GLTF asset "${originalUrl}" for "${url}"`);
+      log$7.error(`Failed to load GLTF asset "${originalUrl}" for "${url}"`);
       reportError(new Error(`Failed to load GLTF asset "${originalUrl}"`));
     };
     const manager = new LoadingManager(undefined, undefined, onError);
@@ -29820,7 +29820,7 @@ class ModelCache {
     // STL files do not reference any external assets, no LoadingManager needed
     const stlLoader = new STLLoader();
     const bufferGeometry = stlLoader.parse(buffer);
-    log$6.debug(`Finished loading STL from ${url}`);
+    log$7.debug(`Finished loading STL from ${url}`);
     const material = new MeshStandardMaterial({
       name: url.slice(-32),
       // truncate to 32 characters
@@ -29845,7 +29845,7 @@ class ModelCache {
   ignoreUpAxis, reportError) {
     const onError = assetUrl => {
       const originalUrl = unrewriteUrl(assetUrl);
-      log$6.error(`Failed to load COLLADA asset "${originalUrl}" for "${url}"`);
+      log$7.error(`Failed to load COLLADA asset "${originalUrl}" for "${url}"`);
       reportError(new Error(`Failed to load COLLADA asset "${originalUrl}"`));
     };
 
@@ -29877,7 +29877,7 @@ class ModelCache {
         }));
         this.#colladaTextureObjectUrls.set(textureUrl, objectUrl);
       } catch (e) {
-        log$6.error(e);
+        log$7.error(e);
         onError(node.textContent);
       }
     }
@@ -29898,7 +29898,7 @@ class ModelCache {
   async #loadOBJ(url, text, meshUpAxis, reportError) {
     const onError = assetUrl => {
       const originalUrl = unrewriteUrl(assetUrl);
-      log$6.error(`Failed to load OBJ asset "${originalUrl}" for "${url}"`);
+      log$7.error(`Failed to load OBJ asset "${originalUrl}" for "${url}"`);
       reportError(new Error(`Failed to load OBJ asset "${originalUrl}"`));
     };
     const manager = new LoadingManager(undefined, undefined, onError);
@@ -30722,7 +30722,7 @@ function getOffset(maybeOffset) {
 // 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$5 = Logger.getLogger("src/index.ts");
+const log$6 = Logger.getLogger("src/index.ts");
 const LAYER_ID$1 = "foxglove.Grid";
 const DEFAULT_SIZE = 10;
 const DEFAULT_DIVISIONS = 10;
@@ -30910,7 +30910,7 @@ class Grids extends SceneExtension {
     this.#updateGrid(instanceId, settings);
   };
   #handleAddGrid = instanceId => {
-    log$5.info(`Creating ${LAYER_ID$1} layer ${instanceId}`);
+    log$6.info(`Creating ${LAYER_ID$1} layer ${instanceId}`);
     const config = {
       ...DEFAULT_SETTINGS$9,
       instanceId
@@ -31558,7 +31558,7 @@ class WorkerImageDecoder {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 const WORKER_COUNT = 4;
-const log$4 = Logger.getLogger("src/index.ts");
+const log$5 = Logger.getLogger("src/index.ts");
 const DEFAULT_DISTANCE = 1;
 const DEFAULT_PLANAR_PROJECTION_FACTOR = 0;
 const IMAGE_RENDERABLE_DEFAULT_SETTINGS = {
@@ -31682,7 +31682,7 @@ class ImageRenderable extends Renderable {
       this.removeError(DECODE_IMAGE_ERR_KEY);
       this.renderer.queueAnimationFrame();
     }).catch(err => {
-      log$4.error(err);
+      log$5.error(err);
       if (this.isDisposed()) {
         return;
       }
@@ -33912,7 +33912,7 @@ 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/
 
-const log$3 = Logger.getLogger("src/index.ts");
+const log$4 = Logger.getLogger("src/index.ts");
 const CALIBRATION_TOPIC_PATH = ["imageMode", "calibrationTopic"];
 const IMAGE_TOPIC_UNAVAILABLE = "IMAGE_TOPIC_UNAVAILABLE";
 const CALIBRATION_TOPIC_UNAVAILABLE = "CALIBRATION_TOPIC_UNAVAILABLE";
@@ -34713,7 +34713,7 @@ class ImageMode extends SceneExtension {
           }]);
         }
       } catch (error) {
-        log$3.error(error);
+        log$4.error(error);
         if (this.renderer.displayTemporaryError) {
           this.renderer.displayTemporaryError(error.toString());
         }
@@ -45004,7 +45004,7 @@ class RenderableMeshResource extends RenderableMarker {
 // 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$2 = Logger.getLogger("src/index.ts");
+const log$3 = Logger.getLogger("src/index.ts");
 const LAYER_ID = "foxglove.Urdf";
 const TOPIC_NAME = "/robot_description";
 
@@ -45575,7 +45575,7 @@ class Urdfs extends SceneExtension {
     }
   };
   #handleAddUrdf = instanceId => {
-    log$2.info(`Creating ${LAYER_ID} layer ${instanceId}`);
+    log$3.info(`Creating ${LAYER_ID} layer ${instanceId}`);
     const config = {
       ...DEFAULT_CUSTOM_SETTINGS,
       instanceId
@@ -45622,7 +45622,7 @@ class Urdfs extends SceneExtension {
       // Cancel the previous fetch
       renderable.userData.fetching.control.abort();
     }
-    log$2.debug(`Fetching URDF from ${url}`);
+    log$3.debug(`Fetching URDF from ${url}`);
     renderable.userData.fetching = {
       url,
       control: new AbortController()
@@ -45630,7 +45630,7 @@ class Urdfs extends SceneExtension {
     this.renderer.fetchAsset(url, {
       signal: renderable.userData.fetching.control.signal
     }).then(urdf => {
-      log$2.debug(`Fetched ${urdf.data.length} byte URDF from ${url}`);
+      log$3.debug(`Fetched ${urdf.data.length} byte URDF from ${url}`);
       this.renderer.settings.errors.remove(["layers", instanceId], FETCH_URDF_ERR);
       this.#loadUrdf({
         instanceId,
@@ -45766,7 +45766,7 @@ class Urdfs extends SceneExtension {
       this.renderer.queueAnimationFrame();
     }).catch(unknown => {
       const err = unknown;
-      log$2.error(`Failed to parse URDF: ${err.message}`);
+      log$3.error(`Failed to parse URDF: ${err.message}`);
       this.renderer.settings.errors.add(settingsPath, PARSE_URDF_ERR, `Failed to parse URDF: ${err.message}`);
     });
   }
@@ -45845,7 +45845,7 @@ class Urdfs extends SceneExtension {
   }
   async #getFileFetch(url, referenceUrl) {
     try {
-      log$2.debug(`fetch(${url}) requested`);
+      log$3.debug(`fetch(${url}) requested`);
       const asset = await this.renderer.fetchAsset(url, {
         referenceUrl
       });
@@ -45858,7 +45858,7 @@ class Urdfs extends SceneExtension {
 async function parseUrdf(text, getFileContents, framePrefix) {
   const applyFramePrefix = name => `${framePrefix}${name}`;
   try {
-    log$2.debug(`Parsing ${text.length} byte URDF`);
+    log$3.debug(`Parsing ${text.length} byte URDF`);
     const robot = await parseRobot(text, getFileContents);
     if (framePrefix) {
       robot.links = new Map([...robot.links].map(([name, link]) => [applyFramePrefix(name), {
@@ -60896,7 +60896,7 @@ var bright = {exports: {}};
 
 var brightExports = bright.exports;
 
-var chalk = {exports: {}};
+var chalk$1 = {exports: {}};
 
 (function (module, exports) {
 
@@ -60922,9 +60922,9 @@ var chalk = {exports: {}};
 	  base0F: '#deaf8f'
 	};
 	module.exports = exports['default']; 
-} (chalk, chalk.exports));
+} (chalk$1, chalk$1.exports));
 
-var chalkExports = chalk.exports;
+var chalkExports = chalk$1.exports;
 
 var codeschool = {exports: {}};
 
@@ -71788,9 +71788,9 @@ var moment$1 = /*@__PURE__*/getDefaultExportFromCjs(momentTimezoneExports);
 // There is some miss-match between the moment we import and the one the type declarations expect
 momentDurationFormatSetup(moment$1);
 function format(stamp, timezone) {
-  return `${formatDate(stamp, timezone)} ${formatTime(stamp, timezone)}`;
+  return `${formatDate$1(stamp, timezone)} ${formatTime(stamp, timezone)}`;
 }
-function formatDate(stamp, timezone) {
+function formatDate$1(stamp, timezone) {
   if (stamp.sec < 0 || stamp.nsec < 0) {
     console.error("Times are not allowed to be negative");
     return "(invalid negative time)";
@@ -73620,7 +73620,7 @@ class MarkerPool {
 // 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$1 = Logger.getLogger("src/index.ts");
+const log$2 = Logger.getLogger("src/index.ts");
 
 /** Menu item entry and callback for the "Custom Layers" menu */
 
@@ -73826,7 +73826,7 @@ class Renderer extends EventEmitter {
     this.#selectionBackdropScene.add(this.#selectionBackdrop);
     const samples = msaaSamples(this.gl.capabilities);
     const renderSize = this.gl.getDrawingBufferSize(tempVec2);
-    log$1.debug(`Initialized ${renderSize.width}x${renderSize.height} renderer (${samples}x MSAA)`);
+    log$2.debug(`Initialized ${renderSize.width}x${renderSize.height} renderer (${samples}x MSAA)`);
     const {
       reserved
     } = args.sceneExtensionConfig;
@@ -73867,7 +73867,7 @@ class Renderer extends EventEmitter {
         this.#addSceneExtension(extensionItem.init(this));
       }
     }
-    log$1.debug(`Renderer initialized with scene extensions ${Array.from(this.sceneExtensions.keys()).join(", ")}`);
+    log$2.debug(`Renderer initialized with scene extensions ${Array.from(this.sceneExtensions.keys()).join(", ")}`);
     if (interfaceMode === "image" && config.imageMode.calibrationTopic == undefined) {
       this.enableImageOnlySubscriptionMode();
     } else {
@@ -73883,7 +73883,7 @@ class Renderer extends EventEmitter {
     this.emit("hudItemsChanged", this);
   };
   #onDevicePixelRatioChange = () => {
-    log$1.debug(`devicePixelRatio changed to ${window.devicePixelRatio}`);
+    log$2.debug(`devicePixelRatio changed to ${window.devicePixelRatio}`);
     this.#resizeHandler(this.input.canvasSize);
     this.#watchDevicePixelRatio();
   };
@@ -73894,7 +73894,7 @@ class Renderer extends EventEmitter {
     });
   }
   dispose() {
-    log$1.warn(`Disposing renderer`);
+    log$2.warn(`Disposing renderer`);
     this.#devicePixelRatioMediaQuery?.removeEventListener("change", this.#onDevicePixelRatioChange);
     this.removeAllListeners();
     this.settings.removeAllListeners();
@@ -74348,13 +74348,13 @@ class Renderer extends EventEmitter {
     if (prevSelected) {
       // Deselect the previously selected renderable
       deselectObject(prevSelected.renderable);
-      log$1.debug(`Deselected ${prevSelected.renderable.id} (${prevSelected.renderable.name})`);
+      log$2.debug(`Deselected ${prevSelected.renderable.id} (${prevSelected.renderable.name})`);
     }
     this.#selectedRenderable = selection;
     if (selection) {
       // Select the newly selected renderable
       selectObject(selection.renderable);
-      log$1.debug(`Selected ${selection.renderable.id} (${selection.renderable.name}) (instance=${selection.instanceIndex})`, selection.renderable);
+      log$2.debug(`Selected ${selection.renderable.id} (${selection.renderable.name}) (instance=${selection.instanceIndex})`, selection.renderable);
     }
     this.emit("selectedRenderable", selection, this);
     if (!this.debugPicking) {
@@ -74499,7 +74499,7 @@ class Renderer extends EventEmitter {
   }
   setFollowFrameId(frameId) {
     if (this.followFrameId !== frameId) {
-      log$1.debug(`Setting followFrameId to ${frameId}`);
+      log$2.debug(`Setting followFrameId to ${frameId}`);
     }
     this.followFrameId = frameId;
   }
@@ -74580,9 +74580,9 @@ class Renderer extends EventEmitter {
     const fixedFrameId = fixedFrame.id;
     if (this.fixedFrameId !== fixedFrameId) {
       if (this.fixedFrameId == undefined) {
-        log$1.debug(`Setting fixed frame to ${fixedFrameId}`);
+        log$2.debug(`Setting fixed frame to ${fixedFrameId}`);
       } else {
-        log$1.debug(`Changing fixed frame from "${this.fixedFrameId}" to "${fixedFrameId}"`);
+        log$2.debug(`Changing fixed frame from "${this.fixedFrameId}" to "${fixedFrameId}"`);
       }
       this.fixedFrameId = fixedFrameId;
     }
@@ -74592,7 +74592,7 @@ class Renderer extends EventEmitter {
     this.gl.setSize(size.width, size.height);
     this.cameraHandler.handleResize(size.width, size.height, window.devicePixelRatio);
     const renderSize = this.gl.getDrawingBufferSize(tempVec2);
-    log$1.debug(`Resized renderer to ${renderSize.width}x${renderSize.height}`);
+    log$2.debug(`Resized renderer to ${renderSize.width}x${renderSize.height}`);
     this.animationFrame();
   };
   #clickHandler = cursorCoords => {
@@ -74632,7 +74632,7 @@ class Renderer extends EventEmitter {
     if (!this.debugPicking) {
       this.animationFrame();
     }
-    log$1.debug(`Clicked ${selections.length} renderable(s)`);
+    log$2.debug(`Clicked ${selections.length} renderable(s)`);
     this.emit("renderablesClicked", selections, cursorCoords, this);
   };
   handleClickEvent = cursorCoords => {
@@ -74697,7 +74697,7 @@ class Renderer extends EventEmitter {
     if (action.action !== "perform-node-action" || path.length !== 1 || path[0] !== "topics") {
       return;
     }
-    log$1.debug(`handleTopicsAction(${action.payload.id})`);
+    log$2.debug(`handleTopicsAction(${action.payload.id})`);
 
     // eslint-disable-next-line @foxglove/no-boolean-parameters
     const toggleTopicVisibility = value => {
@@ -74729,7 +74729,7 @@ class Renderer extends EventEmitter {
     if (action.action !== "perform-node-action" || path.length !== 1 || path[0] !== "layers") {
       return;
     }
-    log$1.debug(`handleCustomLayersAction(${action.payload.id})`);
+    log$2.debug(`handleCustomLayersAction(${action.payload.id})`);
 
     // Remove `-{uuid}` from the actionId to get the layerId
     const actionId = action.payload.id;
@@ -74784,7 +74784,7 @@ class Renderer extends EventEmitter {
       maybeRenderable = maybeRenderable.parent ?? undefined;
     }
     if (!renderable) {
-      log$1.warn(`No Renderable found for objectId ${objectId} (name="${pickedObject?.name}" uuid=${pickedObject?.uuid})`);
+      log$2.warn(`No Renderable found for objectId ${objectId} (name="${pickedObject?.name}" uuid=${pickedObject?.uuid})`);
       return undefined;
     }
 
@@ -74884,11 +74884,11 @@ class Renderer extends EventEmitter {
   setAnalytics(analytics) {
     this.analytics = analytics;
   }
-  getLocalClickCoords(event, picked) {
+  getCursorRelativeCoords(cursorPosition, picked) {
     // 1. Get canvas-relative coordinates
     const rect = this.#canvas.getBoundingClientRect();
-    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
-    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    const x = (cursorPosition.x - rect.left) / rect.width * 2 - 1;
+    const y = -((cursorPosition.y - rect.top) / rect.height) * 2 + 1;
 
     // 2. Create a ray from the camera through the click point
     const ndc = new Vector2(x, y);
@@ -78131,6 +78131,807 @@ function makePoseEstimateMessage(pose, frameId, xDev, yDev, thetaDev) {
   };
 }
 
+function formatDate(date, format) {
+    switch (format) {
+        case 'iso':
+            return date.toISOString();
+        case 'time-dayofyear':
+            return format$1(date, 'D HH:mm:ss', { useAdditionalDayOfYearTokens: true });
+        case 'full':
+            return format$1(date, 'yyyy/MM/dd, hh:mm a');
+    }
+}
+
+z.string().min(6);
+z
+    .string()
+    .regex(/^(0|[1-9]\d*)\.(0|[1-9]\d*)(?:\.(0|[1-9]\d*))?$/, { message: 'Version must be in the format X.Y or X.Y.Z' });
+
+const ANSI_BACKGROUND_OFFSET = 10;
+
+const wrapAnsi16 = (offset = 0) => code => `\u001B[${code + offset}m`;
+
+const wrapAnsi256 = (offset = 0) => code => `\u001B[${38 + offset};5;${code}m`;
+
+const wrapAnsi16m = (offset = 0) => (red, green, blue) => `\u001B[${38 + offset};2;${red};${green};${blue}m`;
+
+const styles$1 = {
+	modifier: {
+		reset: [0, 0],
+		// 21 isn't widely supported and 22 does the same thing
+		bold: [1, 22],
+		dim: [2, 22],
+		italic: [3, 23],
+		underline: [4, 24],
+		overline: [53, 55],
+		inverse: [7, 27],
+		hidden: [8, 28],
+		strikethrough: [9, 29],
+	},
+	color: {
+		black: [30, 39],
+		red: [31, 39],
+		green: [32, 39],
+		yellow: [33, 39],
+		blue: [34, 39],
+		magenta: [35, 39],
+		cyan: [36, 39],
+		white: [37, 39],
+
+		// Bright color
+		blackBright: [90, 39],
+		gray: [90, 39], // Alias of `blackBright`
+		grey: [90, 39], // Alias of `blackBright`
+		redBright: [91, 39],
+		greenBright: [92, 39],
+		yellowBright: [93, 39],
+		blueBright: [94, 39],
+		magentaBright: [95, 39],
+		cyanBright: [96, 39],
+		whiteBright: [97, 39],
+	},
+	bgColor: {
+		bgBlack: [40, 49],
+		bgRed: [41, 49],
+		bgGreen: [42, 49],
+		bgYellow: [43, 49],
+		bgBlue: [44, 49],
+		bgMagenta: [45, 49],
+		bgCyan: [46, 49],
+		bgWhite: [47, 49],
+
+		// Bright color
+		bgBlackBright: [100, 49],
+		bgGray: [100, 49], // Alias of `bgBlackBright`
+		bgGrey: [100, 49], // Alias of `bgBlackBright`
+		bgRedBright: [101, 49],
+		bgGreenBright: [102, 49],
+		bgYellowBright: [103, 49],
+		bgBlueBright: [104, 49],
+		bgMagentaBright: [105, 49],
+		bgCyanBright: [106, 49],
+		bgWhiteBright: [107, 49],
+	},
+};
+
+Object.keys(styles$1.modifier);
+const foregroundColorNames = Object.keys(styles$1.color);
+const backgroundColorNames = Object.keys(styles$1.bgColor);
+[...foregroundColorNames, ...backgroundColorNames];
+
+function assembleStyles() {
+	const codes = new Map();
+
+	for (const [groupName, group] of Object.entries(styles$1)) {
+		for (const [styleName, style] of Object.entries(group)) {
+			styles$1[styleName] = {
+				open: `\u001B[${style[0]}m`,
+				close: `\u001B[${style[1]}m`,
+			};
+
+			group[styleName] = styles$1[styleName];
+
+			codes.set(style[0], style[1]);
+		}
+
+		Object.defineProperty(styles$1, groupName, {
+			value: group,
+			enumerable: false,
+		});
+	}
+
+	Object.defineProperty(styles$1, 'codes', {
+		value: codes,
+		enumerable: false,
+	});
+
+	styles$1.color.close = '\u001B[39m';
+	styles$1.bgColor.close = '\u001B[49m';
+
+	styles$1.color.ansi = wrapAnsi16();
+	styles$1.color.ansi256 = wrapAnsi256();
+	styles$1.color.ansi16m = wrapAnsi16m();
+	styles$1.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
+	styles$1.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
+	styles$1.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
+
+	// From https://github.com/Qix-/color-convert/blob/3f0e0d4e92e235796ccb17f6e85c72094a651f49/conversions.js
+	Object.defineProperties(styles$1, {
+		rgbToAnsi256: {
+			value(red, green, blue) {
+				// We use the extended greyscale palette here, with the exception of
+				// black and white. normal palette only has 4 greyscale shades.
+				if (red === green && green === blue) {
+					if (red < 8) {
+						return 16;
+					}
+
+					if (red > 248) {
+						return 231;
+					}
+
+					return Math.round(((red - 8) / 247) * 24) + 232;
+				}
+
+				return 16
+					+ (36 * Math.round(red / 255 * 5))
+					+ (6 * Math.round(green / 255 * 5))
+					+ Math.round(blue / 255 * 5);
+			},
+			enumerable: false,
+		},
+		hexToRgb: {
+			value(hex) {
+				const matches = /[a-f\d]{6}|[a-f\d]{3}/i.exec(hex.toString(16));
+				if (!matches) {
+					return [0, 0, 0];
+				}
+
+				let [colorString] = matches;
+
+				if (colorString.length === 3) {
+					colorString = [...colorString].map(character => character + character).join('');
+				}
+
+				const integer = Number.parseInt(colorString, 16);
+
+				return [
+					/* eslint-disable no-bitwise */
+					(integer >> 16) & 0xFF,
+					(integer >> 8) & 0xFF,
+					integer & 0xFF,
+					/* eslint-enable no-bitwise */
+				];
+			},
+			enumerable: false,
+		},
+		hexToAnsi256: {
+			value: hex => styles$1.rgbToAnsi256(...styles$1.hexToRgb(hex)),
+			enumerable: false,
+		},
+		ansi256ToAnsi: {
+			value(code) {
+				if (code < 8) {
+					return 30 + code;
+				}
+
+				if (code < 16) {
+					return 90 + (code - 8);
+				}
+
+				let red;
+				let green;
+				let blue;
+
+				if (code >= 232) {
+					red = (((code - 232) * 10) + 8) / 255;
+					green = red;
+					blue = red;
+				} else {
+					code -= 16;
+
+					const remainder = code % 36;
+
+					red = Math.floor(code / 36) / 5;
+					green = Math.floor(remainder / 6) / 5;
+					blue = (remainder % 6) / 5;
+				}
+
+				const value = Math.max(red, green, blue) * 2;
+
+				if (value === 0) {
+					return 30;
+				}
+
+				// eslint-disable-next-line no-bitwise
+				let result = 30 + ((Math.round(blue) << 2) | (Math.round(green) << 1) | Math.round(red));
+
+				if (value === 2) {
+					result += 60;
+				}
+
+				return result;
+			},
+			enumerable: false,
+		},
+		rgbToAnsi: {
+			value: (red, green, blue) => styles$1.ansi256ToAnsi(styles$1.rgbToAnsi256(red, green, blue)),
+			enumerable: false,
+		},
+		hexToAnsi: {
+			value: hex => styles$1.ansi256ToAnsi(styles$1.hexToAnsi256(hex)),
+			enumerable: false,
+		},
+	});
+
+	return styles$1;
+}
+
+const ansiStyles = assembleStyles();
+
+/* eslint-env browser */
+
+const level = (() => {
+	if (navigator.userAgentData) {
+		const brand = navigator.userAgentData.brands.find(({brand}) => brand === 'Chromium');
+		if (brand && brand.version > 93) {
+			return 3;
+		}
+	}
+
+	if (/\b(Chrome|Chromium)\//.test(navigator.userAgent)) {
+		return 1;
+	}
+
+	return 0;
+})();
+
+const colorSupport = level !== 0 && {
+	level,
+	hasBasic: true,
+	has256: level >= 2,
+	has16m: level >= 3,
+};
+
+const supportsColor = {
+	stdout: colorSupport,
+	stderr: colorSupport,
+};
+
+// TODO: When targeting Node.js 16, use `String.prototype.replaceAll`.
+function stringReplaceAll(string, substring, replacer) {
+	let index = string.indexOf(substring);
+	if (index === -1) {
+		return string;
+	}
+
+	const substringLength = substring.length;
+	let endIndex = 0;
+	let returnValue = '';
+	do {
+		returnValue += string.slice(endIndex, index) + substring + replacer;
+		endIndex = index + substringLength;
+		index = string.indexOf(substring, endIndex);
+	} while (index !== -1);
+
+	returnValue += string.slice(endIndex);
+	return returnValue;
+}
+
+function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
+	let endIndex = 0;
+	let returnValue = '';
+	do {
+		const gotCR = string[index - 1] === '\r';
+		returnValue += string.slice(endIndex, (gotCR ? index - 1 : index)) + prefix + (gotCR ? '\r\n' : '\n') + postfix;
+		endIndex = index + 1;
+		index = string.indexOf('\n', endIndex);
+	} while (index !== -1);
+
+	returnValue += string.slice(endIndex);
+	return returnValue;
+}
+
+const {stdout: stdoutColor, stderr: stderrColor} = supportsColor;
+
+const GENERATOR = Symbol('GENERATOR');
+const STYLER = Symbol('STYLER');
+const IS_EMPTY = Symbol('IS_EMPTY');
+
+// `supportsColor.level` → `ansiStyles.color[name]` mapping
+const levelMapping = [
+	'ansi',
+	'ansi',
+	'ansi256',
+	'ansi16m',
+];
+
+const styles = Object.create(null);
+
+const applyOptions = (object, options = {}) => {
+	if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
+		throw new Error('The `level` option should be an integer from 0 to 3');
+	}
+
+	// Detect level if not set manually
+	const colorLevel = stdoutColor ? stdoutColor.level : 0;
+	object.level = options.level === undefined ? colorLevel : options.level;
+};
+
+const chalkFactory = options => {
+	const chalk = (...strings) => strings.join(' ');
+	applyOptions(chalk, options);
+
+	Object.setPrototypeOf(chalk, createChalk.prototype);
+
+	return chalk;
+};
+
+function createChalk(options) {
+	return chalkFactory(options);
+}
+
+Object.setPrototypeOf(createChalk.prototype, Function.prototype);
+
+for (const [styleName, style] of Object.entries(ansiStyles)) {
+	styles[styleName] = {
+		get() {
+			const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
+			Object.defineProperty(this, styleName, {value: builder});
+			return builder;
+		},
+	};
+}
+
+styles.visible = {
+	get() {
+		const builder = createBuilder(this, this[STYLER], true);
+		Object.defineProperty(this, 'visible', {value: builder});
+		return builder;
+	},
+};
+
+const getModelAnsi = (model, level, type, ...arguments_) => {
+	if (model === 'rgb') {
+		if (level === 'ansi16m') {
+			return ansiStyles[type].ansi16m(...arguments_);
+		}
+
+		if (level === 'ansi256') {
+			return ansiStyles[type].ansi256(ansiStyles.rgbToAnsi256(...arguments_));
+		}
+
+		return ansiStyles[type].ansi(ansiStyles.rgbToAnsi(...arguments_));
+	}
+
+	if (model === 'hex') {
+		return getModelAnsi('rgb', level, type, ...ansiStyles.hexToRgb(...arguments_));
+	}
+
+	return ansiStyles[type][model](...arguments_);
+};
+
+const usedModels = ['rgb', 'hex', 'ansi256'];
+
+for (const model of usedModels) {
+	styles[model] = {
+		get() {
+			const {level} = this;
+			return function (...arguments_) {
+				const styler = createStyler(getModelAnsi(model, levelMapping[level], 'color', ...arguments_), ansiStyles.color.close, this[STYLER]);
+				return createBuilder(this, styler, this[IS_EMPTY]);
+			};
+		},
+	};
+
+	const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
+	styles[bgModel] = {
+		get() {
+			const {level} = this;
+			return function (...arguments_) {
+				const styler = createStyler(getModelAnsi(model, levelMapping[level], 'bgColor', ...arguments_), ansiStyles.bgColor.close, this[STYLER]);
+				return createBuilder(this, styler, this[IS_EMPTY]);
+			};
+		},
+	};
+}
+
+const proto = Object.defineProperties(() => {}, {
+	...styles,
+	level: {
+		enumerable: true,
+		get() {
+			return this[GENERATOR].level;
+		},
+		set(level) {
+			this[GENERATOR].level = level;
+		},
+	},
+});
+
+const createStyler = (open, close, parent) => {
+	let openAll;
+	let closeAll;
+	if (parent === undefined) {
+		openAll = open;
+		closeAll = close;
+	} else {
+		openAll = parent.openAll + open;
+		closeAll = close + parent.closeAll;
+	}
+
+	return {
+		open,
+		close,
+		openAll,
+		closeAll,
+		parent,
+	};
+};
+
+const createBuilder = (self, _styler, _isEmpty) => {
+	// Single argument is hot path, implicit coercion is faster than anything
+	// eslint-disable-next-line no-implicit-coercion
+	const builder = (...arguments_) => applyStyle(builder, (arguments_.length === 1) ? ('' + arguments_[0]) : arguments_.join(' '));
+
+	// We alter the prototype because we must return a function, but there is
+	// no way to create a function with a different prototype
+	Object.setPrototypeOf(builder, proto);
+
+	builder[GENERATOR] = self;
+	builder[STYLER] = _styler;
+	builder[IS_EMPTY] = _isEmpty;
+
+	return builder;
+};
+
+const applyStyle = (self, string) => {
+	if (self.level <= 0 || !string) {
+		return self[IS_EMPTY] ? '' : string;
+	}
+
+	let styler = self[STYLER];
+
+	if (styler === undefined) {
+		return string;
+	}
+
+	const {openAll, closeAll} = styler;
+	if (string.includes('\u001B')) {
+		while (styler !== undefined) {
+			// Replace any instances already present with a re-opening code
+			// otherwise only the part of the string until said closing code
+			// will be colored, and the rest will simply be 'plain'.
+			string = stringReplaceAll(string, styler.close, styler.open);
+
+			styler = styler.parent;
+		}
+	}
+
+	// We can move both next actions out of loop, because remaining actions in loop won't have
+	// any/visible effect on parts we add here. Close the styling before a linebreak and reopen
+	// after next line to fix a bleed issue on macOS: https://github.com/chalk/chalk/pull/92
+	const lfIndex = string.indexOf('\n');
+	if (lfIndex !== -1) {
+		string = stringEncaseCRLFWithFirstIndex(string, closeAll, openAll, lfIndex);
+	}
+
+	return openAll + string + closeAll;
+};
+
+Object.defineProperties(createChalk.prototype, styles);
+
+const chalk = createChalk();
+createChalk({level: stderrColor ? stderrColor.level : 0});
+
+/* eslint-disable no-var */
+var LogLevel;
+(function (LogLevel) {
+    LogLevel[LogLevel["trace"] = 10] = "trace";
+    LogLevel[LogLevel["debug"] = 20] = "debug";
+    LogLevel[LogLevel["info"] = 30] = "info";
+    LogLevel[LogLevel["warn"] = 40] = "warn";
+    LogLevel[LogLevel["error"] = 50] = "error";
+    LogLevel[LogLevel["fatal"] = 60] = "fatal";
+})(LogLevel || (LogLevel = {}));
+function isLogFnParamsCtx(params) {
+    return typeof params[0] !== 'string' && typeof params[1] !== 'undefined';
+}
+function parseLogFormat(value) {
+    switch (value) {
+        case 'pretty':
+        case 'plain':
+        case 'json':
+            return value;
+        default:
+            return 'json';
+    }
+}
+function logLevelName(level) {
+    switch (level) {
+        case 10:
+            return ' T ';
+        case 20:
+            return ' D ';
+        case 30:
+            return ' I ';
+        case 40:
+            return ' W ';
+        case 50:
+            return ' E ';
+        case 60:
+            return ' F ';
+    }
+    return '?????';
+}
+function colorize(level) {
+    switch (level) {
+        case 10:
+            return { color: chalk.gray, bgcolor: chalk.bgGray.black };
+        case 20:
+            return { color: chalk.gray, bgcolor: chalk.bgGray.black };
+        case 30:
+            return { color: chalk.white, bgcolor: chalk.bgWhite.black };
+        case 40:
+            return { color: chalk.yellow, bgcolor: chalk.bgYellow.black };
+        case 50:
+            return { color: chalk.red, bgcolor: chalk.bgRed.black };
+        case 60:
+            return { color: chalk.red, bgcolor: chalk.bgRed.black };
+    }
+    return { color: chalk.gray, bgcolor: chalk.bgGray.black };
+}
+function customStringify(data, useSpaces = true) {
+    return (stringify$1(data, (_key, value) => {
+        if (typeof Buffer !== 'undefined' && value instanceof Buffer) {
+            return value.toString('base64');
+        }
+        return value;
+    }, useSpaces ? 2 : undefined) ?? '');
+}
+function prettyMessage(message) {
+    const logLevel = message.level ?? 30;
+    const { color, bgcolor } = colorize(logLevel);
+    const component = message.component ? `/${message.component}` : '';
+    const baseMsg = [
+        chalk.gray(formatDate(new Date(message.when), 'time-dayofyear')),
+        bgcolor(logLevelName(logLevel)),
+        color(`${message.logger.name}${component}`),
+        color(':'),
+        color(message.message),
+    ];
+    if (Object.keys(message.context).length > 0) {
+        for (const [key, value] of Object.entries(message.context)) {
+            if (value instanceof Error) {
+                try {
+                    baseMsg.push(`\n\n[key = ${key} contains Error]\n\n${customStringify(serializeError(value))}`);
+                }
+                catch {
+                    baseMsg.push(`\n\n[key = ${key} contains Error]\n\n${value.name}\n${value.message}`);
+                }
+                delete message.context[key];
+            }
+        }
+        baseMsg.push(chalk.gray(`\n${customStringify(message.context)}`));
+    }
+    return baseMsg.join(' ');
+}
+function buildSerializeMessage(config) {
+    if (config.format === 'pretty' || config.runtime === 'development') {
+        chalk.level = typeof document !== 'undefined' ? 0 : 3;
+        return prettyMessage;
+    }
+    else if (config.format === 'json') {
+        return (message) => customStringify({ ...message, when: formatDate(message.when, 'iso') }, false);
+    }
+    else if (config.format === 'plain') {
+        return (message) => {
+            const logLevel = message.context.logLevel ?? 30;
+            const component = message.context.component ? `/${JSON.stringify(message.context.component)}` : '';
+            const baseMsg = [
+                formatDate(message.when, 'time-dayofyear'),
+                logLevelName(logLevel),
+                `${message.logger.name}${component}`,
+                ':',
+                message.message,
+            ];
+            if (Object.keys(message.context).length > 0) {
+                baseMsg.push(`\n${customStringify(message.context)}`);
+            }
+            return baseMsg.join(' ');
+        };
+    }
+    else {
+        throw new Error(`invalid configuration provided ${JSON.stringify(config, undefined, 2)}`);
+    }
+}
+const writeMessage = (msg) => {
+    if (msg.level < msg.logger.config.level)
+        return;
+    const message = msg.logger.serializeMessage(msg);
+    if (typeof document !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.log(message);
+    }
+    else if (typeof process !== 'undefined') {
+        process.stdout.write(`${message}\n`);
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log(message);
+    }
+};
+const buildLogger = (name, initialConfig) => {
+    const _config = { ...initialConfig };
+    let serializeMessage = buildSerializeMessage(_config);
+    const configure = (config) => {
+        Object.assign(_config, config);
+        // logger.trace({ config: logger.config }, `reconfigured logger: ${name}`);
+        serializeMessage = buildSerializeMessage(_config);
+    };
+    const buildBoundFns = (opts) => {
+        const { component } = opts;
+        return {
+            trace: log.bind({ level: LogLevel.trace, component }),
+            debug: log.bind({ level: LogLevel.debug, component }),
+            info: log.bind({ level: LogLevel.info, component }),
+            warn: log.bind({ level: LogLevel.warn, component }),
+            error: log.bind({ level: LogLevel.error, component }),
+            fatal: log.bind({ level: LogLevel.fatal, component }),
+        };
+    };
+    function log(...params) {
+        const ctxIndex = isLogFnParamsCtx(params) ? 0 : -1;
+        const message = params.slice(ctxIndex + 1).join(' ');
+        writeMessage({
+            logger,
+            when: new Date(),
+            level: this.level,
+            context: ctxIndex !== -1 ? params[ctxIndex] : {},
+            component: this.component,
+            message,
+        });
+    }
+    const child = (component) => {
+        const parent = logger;
+        return {
+            ...parent,
+            ...buildBoundFns({ component }),
+        };
+    };
+    const canLogLevel = (level) => {
+        return _config.level <= level;
+    };
+    const logger = {
+        get config() {
+            return _config;
+        },
+        get name() {
+            return _config.rootComponent;
+        },
+        serializeMessage: msg => {
+            if (_config.format !== 'pretty') {
+                const newContext = { ...msg.context };
+                for (const entry of Object.entries(msg.context)) {
+                    let value = msg.context[entry[0]];
+                    if (value instanceof Error) {
+                        try {
+                            value = serializeError(value, {
+                                maxDepth: 3,
+                            });
+                        }
+                        catch (e) {
+                            logger.warn({ error: e }, `serialize of error failed`);
+                            // serialize failed, keep original value
+                        }
+                    }
+                    newContext[entry[0]] = value;
+                }
+                Object.assign(msg, { context: newContext });
+            }
+            return serializeMessage(msg);
+        },
+        child,
+        configure,
+        canLogLevel,
+        ...buildBoundFns({ component: null }),
+    };
+    // logger.trace({ config: logger.config }, `built logger: ${name}`);
+    return logger;
+};
+const LOG_LEVEL_ENV = globalThis.ENV?.LOG_LEVEL ?? 'info';
+const defaultLogger = buildLogger('default', {
+    level: (typeof LOG_LEVEL_ENV === 'string' ? parseInt(LOG_LEVEL_ENV) : LOG_LEVEL_ENV) ?? 10,
+    rootComponent: globalThis.ENV?.LOG_ROOT_COMPONENT ?? 'logger',
+    format: parseLogFormat(globalThis.ENV?.LOG_FORMAT),
+    runtime: globalThis.ENV?.RUNTIME ?? 'development',
+});
+const log$1 = defaultLogger;
+globalThis.log = defaultLogger;
+
+const customFormats = {
+    number: {
+        bytes: {
+            style: 'decimal',
+            maximumFractionDigits: 1,
+        },
+        temperature: {
+            style: 'decimal',
+            maximumFractionDigits: 0,
+        },
+    },
+    date: {
+        log: {
+            dateStyle: undefined,
+            timeStyle: 'medium',
+            hourCycle: 'h24',
+        },
+        short: {
+            dateStyle: 'short',
+            timeStyle: 'short',
+        },
+        long: {
+            dateStyle: 'long',
+            timeStyle: 'long',
+        },
+    },
+};
+const onIntlError = (error) => {
+    if (typeof window !== 'undefined') {
+        log$1.fatal(error);
+    }
+};
+const cache = createIntlCache();
+createIntl({
+    locale: 'en-US',
+    defaultLocale: 'en-US',
+    formats: customFormats,
+    onError: onIntlError,
+}, cache);
+
+const useDebounce = (props) => {
+    const { effect, dependencies, debounceDelay } = props;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const callback = React__default.useCallback(effect, dependencies);
+    React__default.useEffect(() => {
+        const timeout = setTimeout(callback, debounceDelay);
+        return () => clearTimeout(timeout);
+    }, [callback, debounceDelay]);
+};
+
+// 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 DEBOUNCE_DELAY = 100; // milliseconds
+
+function useDebouncedCursorPosition() {
+  const [cursorPosition, setCursorPosition] = React__default.useState(null);
+  const [rawPosition, setRawPosition] = React__default.useState(null);
+  useDebounce({
+    effect: () => {
+      setCursorPosition(rawPosition);
+    },
+    dependencies: [rawPosition],
+    debounceDelay: DEBOUNCE_DELAY
+  });
+  React__default.useEffect(() => {
+    const handleMouseMove = e => {
+      setRawPosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+  return {
+    cursorPosition
+  };
+}
+
 const log = Logger.getLogger("src/index.ts");
 const PANEL_STYLE = {
   width: "100%",
@@ -78196,6 +78997,9 @@ function ThreeDeeRender(props) {
   const backgroundColor = config.scene.backgroundColor;
   const [canvas, setCanvas] = useState(null);
   const [renderer, setRenderer] = useState(undefined);
+  const {
+    cursorPosition
+  } = useDebouncedCursorPosition();
   const rendererRef = useRef(undefined);
   const {
     enqueueSnackbar
@@ -78239,6 +79043,12 @@ function ThreeDeeRender(props) {
       handleDrop: renderer.handleDrop
     } : undefined);
   }, [setMessagePathDropConfig, renderer]);
+  useEffect(() => {
+    if (props.handleCursorPositionUpdate && cursorPosition) {
+      const offsetCoordinates = cursorPositionToRenderableOffsetPosition(cursorPosition);
+      props.handleCursorPositionUpdate(cursorPosition, offsetCoordinates);
+    }
+  }, [cursorPosition]);
   const [colorScheme, setColorScheme] = useState();
   const [timezone, setTimezone] = useState();
   const [topics, setTopics] = useState();
@@ -78753,15 +79563,15 @@ function ThreeDeeRender(props) {
   // The 3d panel only supports publishing to ros1 and ros2 data sources
   const isRosDataSource = context.dataSourceProfile === "ros1" || context.dataSourceProfile === "ros2";
   const canPublish = context.publish != undefined && isRosDataSource;
-  const getClickOffsetCoords = useCallback(event => {
+  const cursorPositionToRenderableOffsetPosition = useCallback(cursorCoordinates => {
     if (!canvas || !renderer) return;
 
     // Get the canvas bounding rectangle
     const canvasRect = canvas.getBoundingClientRect();
 
     // Convert click position to canvas-relative coordinates
-    const offsetX = event.clientX - canvasRect.left;
-    const offsetY = event.clientY - canvasRect.top;
+    const offsetX = cursorCoordinates.x - canvasRect.left;
+    const offsetY = cursorCoordinates.y - canvasRect.top;
 
     // Get Three.js clicked object (This should be the background for depth stream)
     const selectedObject = renderer.handleClickEvent(new Vector2(offsetX, offsetY)).at(0);
@@ -78772,7 +79582,7 @@ function ThreeDeeRender(props) {
 
     // Calculate the percentage offset coordinates relative to the renderable
     // This is number from <0, 1> range and can be used to map click position to depth data
-    const percentageOffsetCoordinates = renderer.getLocalClickCoords(event, selectedObject.renderable);
+    const percentageOffsetCoordinates = renderer.getCursorRelativeCoords(cursorCoordinates, selectedObject.renderable);
     if (!percentageOffsetCoordinates) {
       console.error("Failed to calculate relative click coordinates");
       return;
@@ -78799,7 +79609,10 @@ function ThreeDeeRender(props) {
     },
     onClick: event => {
       if (props.handleOnClick) {
-        const clickOffsetCoords = getClickOffsetCoords(event);
+        const clickOffsetCoords = cursorPositionToRenderableOffsetPosition({
+          x: event.clientX,
+          y: event.clientY
+        });
         props.handleOnClick(event, clickOffsetCoords);
       }
     }
@@ -78841,6 +79654,7 @@ function initPanel(args, context) {
     frameRenderedEvent,
     annotationReceivedEventHandler,
     handleOnClick,
+    handleCursorPositionUpdate,
     registerRendered,
     unregisterRendered,
     customOverlay
@@ -78858,6 +79672,7 @@ function initPanel(args, context) {
     frameRenderedEvent: frameRenderedEvent ? () => frameRenderedEvent(0) : undefined,
     annotationReceivedEventHandler: annotationReceivedEventHandler,
     handleOnClick: handleOnClick,
+    handleCursorPositionUpdate: handleCursorPositionUpdate,
     registerRendered: registerRendered,
     unregisterRendered: unregisterRendered,
     customOverlay: customOverlay
@@ -78892,6 +79707,7 @@ function ThreeDeeRenderAdapter(interfaceMode, props) {
     frameRenderedEvent: props.frameRenderedEvent,
     annotationReceivedEventHandler: props.annotationReceivedEventHandler,
     handleOnClick: props.handleOnClick,
+    handleCursorPositionUpdate: props.handleCursorPositionUpdate,
     registerRendered: props.registerRendered,
     unregisterRendered: props.unregisterRendered,
     customOverlay: props.customOverlay