@luxonis/visualizer-protobuf 2.67.1 → 2.68.0

package/dist/{index-CYlHxiz2.js → index-D9b6Lu-5.js}

@@ -1,5 +1,5 @@
-import { Y as styleTags, Z as tags, ak as javascriptLanguage, $ as LRLanguage, a0 as LanguageSupport, a2 as LRParser, ah as html, ai as parseMixed, a1 as ExternalTokenizer } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { Y as styleTags, Z as tags, ak as javascriptLanguage, $ as LRLanguage, a0 as LanguageSupport, a2 as LRParser, ah as html, ai as parseMixed, a1 as ExternalTokenizer } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/{index-ewsVm4VI.js → index-DEr2t1uV.js}

@@ -1,5 +1,5 @@
-import { Y as styleTags, Z as tags, a2 as LRParser, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, X as foldNodeProp, a8 as foldInside, a0 as LanguageSupport } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { Y as styleTags, Z as tags, a2 as LRParser, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, X as foldNodeProp, a8 as foldInside, a0 as LanguageSupport } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/{index-CpDOxFKV.js → index-DXgxTZSz.js}

@@ -1,5 +1,5 @@
-import { a1 as ExternalTokenizer, Y as styleTags, Z as tags, a2 as LRParser, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, a7 as delimitedIndent, X as foldNodeProp, a8 as foldInside, ah as html, a0 as LanguageSupport, ai as parseMixed } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { a1 as ExternalTokenizer, Y as styleTags, Z as tags, a2 as LRParser, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, a7 as delimitedIndent, X as foldNodeProp, a8 as foldInside, ah as html, a0 as LanguageSupport, ai as parseMixed } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/{index-bi1RxT1w.js → index-DoCri7UR.js}

@@ -1,5 +1,5 @@
-import { Y as styleTags, Z as tags, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, X as foldNodeProp, a8 as foldInside, ae as defineCSSCompletionSource, a0 as LanguageSupport, a2 as LRParser, a1 as ExternalTokenizer } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { Y as styleTags, Z as tags, $ as LRLanguage, U as indentNodeProp, V as continuedIndent, X as foldNodeProp, a8 as foldInside, ae as defineCSSCompletionSource, a0 as LanguageSupport, a2 as LRParser, a1 as ExternalTokenizer } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/{index-CTU14EGn.js → index-DtErPDFb.js}

@@ -1,5 +1,5 @@
-import { Y as styleTags, Z as tags, $ as LRLanguage, a0 as LanguageSupport, a2 as LRParser, aa as LocalTokenGroup, ah as html, ai as parseMixed, ak as javascriptLanguage } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { Y as styleTags, Z as tags, $ as LRLanguage, a0 as LanguageSupport, a2 as LRParser, aa as LocalTokenGroup, ah as html, ai as parseMixed, ak as javascriptLanguage } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/{index-CrukQeVA.js → index-DycPqoQx.js}

@@ -1,4 +1,4 @@
-import { d as dist$1, e as estimateObjectSize, r as reportError, A as AppError, b as baseFlatten, a as baseEach, c as baseIteratee, f as baseDifference, g as getTag, h as baseKeys, i as baseIsEqual, j as castPath, t as toKey, k as baseGet, l as hasIn, s as sendNotification, m as shallowequal, u as useGuaranteedContext, n as getPanelIdsInsideTabPanels, o as getPanelTypeFromId, T as TAB_PANEL_TYPE, p as removePanelFromTabPanel, q as getPanelIdForType, v as getPathFromNode, w as updateTabPanelLayout, x as getSaveConfigsPayloadForAddedPanel, y as replaceAndRemovePanels, z as inlineTabPanelLayouts, B as getAllPanelIds, C as getConfigsForNestedPanelsInsideTab, D as reorderTabWithinTabPanel, E as moveTabBetweenTabPanels, F as isTabPanelConfig, G as DEFAULT_TAB_PANEL_CONFIG, H as addPanelToTab, I as createAddUpdates, J as filterMap, L as Logger, K as uniq$2, M as useShallowMemo, N as CurrentLayoutContext, O as MessageOrderTracker, P as AppConfigurationContext, _ as __assign$8, Q as __rest$5, R as __spreadArray$5 } from './depth-CvvVVEb7.js';
+import { d as dist$1, e as estimateObjectSize, r as reportError, A as AppError, b as baseFlatten, a as baseEach, c as baseIteratee, f as baseDifference, g as getTag, h as baseKeys, i as baseIsEqual, j as castPath, t as toKey, k as baseGet, l as hasIn, s as sendNotification, m as shallowequal, u as useGuaranteedContext, n as getPanelIdsInsideTabPanels, o as getPanelTypeFromId, T as TAB_PANEL_TYPE, p as removePanelFromTabPanel, q as getPanelIdForType, v as getPathFromNode, w as updateTabPanelLayout, x as getSaveConfigsPayloadForAddedPanel, y as replaceAndRemovePanels, z as inlineTabPanelLayouts, B as getAllPanelIds, C as getConfigsForNestedPanelsInsideTab, D as reorderTabWithinTabPanel, E as moveTabBetweenTabPanels, F as isTabPanelConfig, G as DEFAULT_TAB_PANEL_CONFIG, H as addPanelToTab, I as createAddUpdates, J as filterMap, L as Logger, K as uniq$2, M as useShallowMemo, N as CurrentLayoutContext, O as MessageOrderTracker, P as AppConfigurationContext, _ as __assign$8, Q as __rest$5, R as __spreadArray$5 } from './depth-CFY2W_Vf.js';
 import { w as wrap$3, p as proxy } from './comlink-CsH1ih07.js';
 import { u as uint8ArrayToUint16Array } from './utils-Hzt3wxhG.js';
 import { p as protobufsBySchema, a as protobufSchemaNameToType, g as getDefaultExportFromCjs, c as commonjsGlobal } from './protobuf-BFCtaU7c.js';
@@ -26,7 +26,7 @@ import { defineGlobalStyles, defineTokens as defineTokens$1, defineKeyframes, de
 
 var e=[],t$1=[];function n$1(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t$1[u]={}),a=t$1[u]&&t$1[u][s]?t$1[u][s]:t$1[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$b = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --font-weight-semibold: 600;\n    --radius-lg: 0.5rem;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentColor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .static {\n    position: static;\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#d3d3d3d9\\] {\n    border-color: #d3d3d3d9;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .text-\\[14px\\]\\/\\[14px\\] {\n    font-size: 14px;\n    line-height: 14px;\n  }\n  .text-\\[20px\\]\\/\\[20px\\] {\n    font-size: 20px;\n    line-height: 20px;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .xl\\:flex-row {\n    @media (width >= 80rem) {\n      flex-direction: row;\n    }\n  }\n  .xl\\:items-end {\n    @media (width >= 80rem) {\n      align-items: flex-end;\n    }\n  }\n  .xl\\:pb-\\[2px\\] {\n    @media (width >= 80rem) {\n      padding-bottom: 2px;\n    }\n  }\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-outline-style: solid;\n    }\n  }\n}\n";
+var css$b = "/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --font-weight-semibold: 600;\n    --radius-lg: 0.5rem;\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n      @supports (color: color-mix(in lab, red, red)) {\n        & {\n          color: color-mix(in oklab, currentColor 50%, transparent);\n        }\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .static {\n    position: static;\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#d3d3d3d9\\] {\n    border-color: #d3d3d3d9;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .text-\\[14px\\]\\/\\[14px\\] {\n    font-size: 14px;\n    line-height: 14px;\n  }\n  .text-\\[20px\\]\\/\\[20px\\] {\n    font-size: 20px;\n    line-height: 20px;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .xl\\:flex-row {\n    @media (width >= 80rem) {\n      flex-direction: row;\n    }\n  }\n  .xl\\:items-end {\n    @media (width >= 80rem) {\n      align-items: flex-end;\n    }\n  }\n  .xl\\:pb-\\[2px\\] {\n    @media (width >= 80rem) {\n      padding-bottom: 2px;\n    }\n  }\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-outline-style: solid;\n    }\n  }\n}\n";
 n$1(css$b,{});
 
 // This Source Code Form is subject to the terms of the Mozilla Public
@@ -653,7 +653,7 @@ class DepthToPointcloudWorkerPool {
       // biome-ignore lint/style/noNonNullAssertion: <explanation>
       const workerApi = this.workerApis[workerIndex];
       this.lastUsedWorkerIndex = (this.lastUsedWorkerIndex + 1) % WORKER_COUNT;
-      workerApi.depthToPointcloudGPU(depthDataArray, width, height, fx, fy, cx, cy, i420DataArray, i420Width, i420Height, Number(localStorage.getItem("stereoDepthMaxValue") ?? "5.0"), {
+      workerApi.depthToPointcloudGPU(depthDataArray, width, height, fx, fy, cx, cy, i420DataArray, i420Width, i420Height, Number(localStorage.getItem("stereoDepthMaxValue") ?? "8000"), {
         hasGPU: this.#isWebGpuSupported
       }).then(results => {
         if (results.length === batchToProcess.length) {
@@ -771,8 +771,13 @@ class DepthToPointcloudWorkerPool {
   }
 }
 
+// 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 DEFAULT_CONNECTION_CONFIG = {
-  debugLogs: false
+  debugLogs: false,
+  messageHandlerVersion: "v1"
 };
 class ConfigStore {
   connectionConfigValue = DEFAULT_CONNECTION_CONFIG;
@@ -783,6 +788,10 @@ class ConfigStore {
     }
     return ConfigStore.instance;
   }
+  static writeToLocalStorage() {
+    const instance = ConfigStore.getInstance();
+    localStorage.setItem("connectionConfig", JSON.stringify(instance.connectionConfigValue) ?? 'undefined');
+  }
 }
 
 // This Source Code Form is subject to the terms of the Mozilla Public
@@ -790,7 +799,7 @@ class ConfigStore {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 function initWorker(callback) {
-  const workerWrap = wrap$3(new Worker(new URL("deserialization.worker-hk5-vVek.js", import.meta.url), {
+  const workerWrap = wrap$3(new Worker(new URL("deserialization.worker-BRNDCptR.js", import.meta.url), {
     type: "module",
     name: `message-decoder`
   }));
@@ -818,7 +827,7 @@ function createMessageHandler(callback) {
         buffer,
         topic,
         neuralCameraIntrinsics,
-        stereoDepthMaxValue: Number(localStorage.getItem("stereoDepthMaxValue") ?? "5.0")
+        stereoDepthMaxValue: Number(localStorage.getItem("stereoDepthMaxValue") ?? "8000")
       }, ConfigStore.getInstance(), proxiedCallback);
     }
   };
@@ -20416,7 +20425,8 @@ class VisualizerConnection extends FoxgloveConnection {
     type,
     data,
     errorCallback,
-    debugLogs
+    debugLogs,
+    messageHandlerVersion
   }) {
     super(type === "ws" ? data.connectionUrl : data.config.clientId);
     let worker;
@@ -20430,8 +20440,11 @@ class VisualizerConnection extends FoxgloveConnection {
       worker = new WebRtcBridge(data.automaticTokenRefresh);
     }
     ConfigStore.getInstance().connectionConfigValue = {
-      debugLogs: debugLogs ?? false
+      debugLogs: debugLogs ?? false,
+      messageHandlerVersion: messageHandlerVersion ?? 'v1'
     };
+    ConfigStore.writeToLocalStorage(); // We need this to propagate the config to non-lib code
+
     console.info("[VisualizerConnection] - Opening connection with following configuration", ConfigStore.getInstance().connectionConfigValue);
     this.#open(worker, errorCallback);
   }
@@ -86841,7 +86854,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-DpVmn8Eo.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-Bndiqw1t.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -86852,7 +86865,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-BTaQS6zc.js').then(m => m.cpp());
+            return import('./index-CfGQhG__.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86860,7 +86873,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-BTaQS6zc.js').then(m => m.cpp());
+            return import('./index-CfGQhG__.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86880,7 +86893,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-BUWAj7RO.js').then(m => m.go());
+            return import('./index-C99kj7Bj.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86895,7 +86908,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-DzJhlBTx.js').then(m => m.java());
+            return import('./index-BSEL9eaF.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86911,7 +86924,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-ewsVm4VI.js').then(m => m.json());
+            return import('./index-DEr2t1uV.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86925,14 +86938,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-bi1RxT1w.js').then(m => m.less());
+            return import('./index-DoCri7UR.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-OiUy81OG.js').then(m => m.liquid());
+            return import('./index-7BbbXb7C.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86958,7 +86971,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-CpDOxFKV.js').then(m => m.php());
+            return import('./index-DXgxTZSz.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -86975,28 +86988,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-BGsMOjjC.js').then(m => m.python());
+            return import('./index-pfvcsvrO.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-DuHHWrO3.js').then(m => m.rust());
+            return import('./index-CO2KzlVr.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-B0BQ4Fwh.js').then(m => m.sass({ indented: true }));
+            return import('./index-Bjwf7lc9.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-B0BQ4Fwh.js').then(m => m.sass());
+            return import('./index-Bjwf7lc9.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -87027,7 +87040,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-BTT4oTs5.js').then(m => m.wast());
+            return import('./index-BGrghyc8.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -87035,7 +87048,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-DyET9xdh.js').then(m => m.xml());
+            return import('./index-B5d7u70w.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -87043,7 +87056,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-DGb5vWhb.js').then(m => m.yaml());
+            return import('./index-BzPticWU.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -87839,13 +87852,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-CTU14EGn.js').then(m => m.vue());
+            return import('./index-DtErPDFb.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-CYlHxiz2.js').then(m => m.angular());
+            return import('./index-D9b6Lu-5.js').then(m => m.angular());
         }
     })
 ];
@@ -166179,6 +166192,7 @@ const PanelAnnotationButton = ({
 };
 const PanelToolbar = ({
   topic,
+  fakedAs,
   kind,
   setDetections,
   disableAnnotations = false,
@@ -166195,6 +166209,7 @@ const PanelToolbar = ({
   actions
 }) => {
   const [metrics, setMetrics] = React__default.useState();
+  const [fakedMetrics, setFakedMetrics] = React__default.useState();
   const [showResolution, setShowResolution] = React__default.useState(false);
   const {
     detections
@@ -166205,18 +166220,29 @@ const PanelToolbar = ({
   const wrapperBreakpointRef = React__default.useRef(null);
   const parentContainer = wrapperBreakpointRef.current ?? wrapperRef.current ?? document.body;
   React__default.useEffect(() => {
-    // Initial set
     if (!metrics) {
       setMetrics(connections.at(0)?.getTopicMetrics(topic));
     }
     const interval = setInterval(() => {
-      setMetrics(connections[0]?.getTopicMetrics(topic));
+      const m = connections[0]?.getTopicMetrics(topic);
+      setMetrics(m);
+      if (fakedAs) {
+        const mFakedAs = connections[0]?.getTopicMetrics(fakedAs);
+        if (mFakedAs) {
+          setFakedMetrics({
+            resolutions: m?.resolutions ?? new Map(),
+            incomingMessagesFps: mFakedAs.incomingMessagesFps,
+            decodedMessagesFps: mFakedAs.decodedMessagesFps,
+            messageThroughput: mFakedAs.messageThroughput
+          });
+        }
+      }
     }, 500);
     return () => {
       clearInterval(interval);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [connections, topic, fakedAs]);
   React__default.useEffect(() => {
     if (wrapperWidth && wrapperWidth < 600) {
       setShowResolution(false);
@@ -166301,7 +166327,7 @@ const PanelToolbar = ({
     ref: wrapperBreakpointRef
   }, /*#__PURE__*/React__default.createElement(PanelToolbarMetrics, {
     targetFps: targetFps,
-    metrics: metrics,
+    metrics: fakedMetrics ?? metrics,
     topic: topic,
     inDropdown: true,
     isPointcloud: kind === "pointCloud"
@@ -166354,7 +166380,7 @@ const PanelToolbar = ({
     icon: MdClose
   }, "Close Stream")))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PanelToolbarMetrics, {
     targetFps: targetFps,
-    metrics: metrics,
+    metrics: fakedMetrics ?? metrics,
     topic: topic,
     isPointcloud: isPointcloud
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -166479,6 +166505,7 @@ const Panel = ({
   canMoveDown,
   moveDown,
   panelOverlay,
+  fakedAs,
   panelToolbarActions
 }) => {
   const [detections, setDetections] = React__default.useState([]);
@@ -166505,6 +166532,7 @@ const Panel = ({
     className: "flex flex-col grow border border-solid border-[#d3d3d3d9] overflow-hidden rounded-lg",
     ref: sectionRef
   }, panelOverlay, !hideToolbar && /*#__PURE__*/React__default.createElement(PanelToolbar, {
+    fakedAs: fakedAs,
     kind: kind,
     topic: topic,
     setDetections: setDetections,
@@ -166554,7 +166582,7 @@ function createRenderDelaySampler() {
   };
 }
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BlAepdJg.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CwMsPSeQ.js'));
 const ImagePanelBody = ({
   topic,
   frameRenderedEvent,
@@ -166649,7 +166677,7 @@ const DEFAULT_CAMERA_STATE = {
 // 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 ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BzLeaN56.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-D5xb8lsX.js'));
 const PointCloudPanelBody = ({
   topic,
   frameRenderedEvent,

package/dist/{index-BGsMOjjC.js → index-pfvcsvrO.js}

@@ -1,5 +1,5 @@
-import { a1 as ExternalTokenizer, a9 as ContextTracker, Y as styleTags, Z as tags, a2 as LRParser, a5 as syntaxTree, a3 as ifNotIn, $ as LRLanguage, U as indentNodeProp, a7 as delimitedIndent, X as foldNodeProp, a8 as foldInside, a0 as LanguageSupport, ac as IterMode, a4 as completeFromList, ad as NodeWeakMap, ab as snippetCompletion } from './index-CrukQeVA.js';
-import './depth-CvvVVEb7.js';
+import { a1 as ExternalTokenizer, a9 as ContextTracker, Y as styleTags, Z as tags, a2 as LRParser, a5 as syntaxTree, a3 as ifNotIn, $ as LRLanguage, U as indentNodeProp, a7 as delimitedIndent, X as foldNodeProp, a8 as foldInside, a0 as LanguageSupport, ac as IterMode, a4 as completeFromList, ad as NodeWeakMap, ab as snippetCompletion } from './index-DycPqoQx.js';
+import './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import 'react';
 import 'zustand';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { av as FrameStore, ao as ImagePanel, an as PanelLayout, ap as PointCloudPanel, al as VisualizerConnection, am as VisualizerContext, aq as constructKeyForTopicRenderMetrics, aw as getIMUEventEmitter, as as globalDecodeMetricsManager, ar as globalInputEventMetricsManager, at as globalRenderMetricsManager, au as globalThroughputMetricsManager } from './index-CrukQeVA.js';
-export { S as getDistanceFromDepthDataForOffset } from './depth-CvvVVEb7.js';
+export { av as FrameStore, ao as ImagePanel, an as PanelLayout, ap as PointCloudPanel, al as VisualizerConnection, am as VisualizerContext, aq as constructKeyForTopicRenderMetrics, aw as getIMUEventEmitter, as as globalDecodeMetricsManager, ar as globalInputEventMetricsManager, at as globalRenderMetricsManager, au as globalThroughputMetricsManager } from './index-DycPqoQx.js';
+export { S as getDistanceFromDepthDataForOffset } from './depth-CFY2W_Vf.js';
 import './comlink-CsH1ih07.js';
 import './utils-Hzt3wxhG.js';
 import './protobuf-BFCtaU7c.js';

package/dist/lib/src/components/Panel.d.ts

@@ -9,6 +9,7 @@ export type PanelTopic = {
 };
 export type PanelProps = React.PropsWithChildren<{
     topic: string;
+    fakedAs?: string;
     kind: ProtobufKind;
     disableAnnotations?: boolean;
     annotationTopics?: string[];

package/dist/lib/src/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAO3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAEhF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC;AAaF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuFtC,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAO3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAEhF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAC,MAAM,CAAC;IAChB,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC;AAaF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyFtC,CAAC"}

package/dist/lib/src/components/Panel.js

@@ -17,7 +17,7 @@ const rawToAnnotations = (rawAnnotations, kind, current) => rawAnnotations.map((
     extra: kind === "extra",
     enabled: current.find(({ name }) => name === annotationTopic)?.enabled ?? kind === "main",
 }));
-export const Panel = ({ children, kind, topic, disableAnnotations = false, annotationTopics = [], extraAnnotationTopics = [], targetFps, renderDelay, toggleTopic, triggerToast, hideToolbar = false, toggleFullscreen, canMoveUp, moveUp, canMoveDown, moveDown, panelOverlay, panelToolbarActions, }) => {
+export const Panel = ({ children, kind, topic, disableAnnotations = false, annotationTopics = [], extraAnnotationTopics = [], targetFps, renderDelay, toggleTopic, triggerToast, hideToolbar = false, toggleFullscreen, canMoveUp, moveUp, canMoveDown, moveDown, panelOverlay, fakedAs, panelToolbarActions, }) => {
     const [detections, setDetections] = React.useState([]);
     const sectionRef = useRef(null);
     React.useEffect(() => {
@@ -35,6 +35,6 @@ export const Panel = ({ children, kind, topic, disableAnnotations = false, annot
         }
         toggleFullscreen(sectionRef);
     };
-    return (_jsx(RemountOnValueChange, { value: "internal-player", children: _jsx(ErrorBoundary, { children: _jsx(DetectionContext.Provider, { value: { detections }, children: _jsxs("section", { className: "flex flex-col grow border border-solid border-[#d3d3d3d9] overflow-hidden rounded-lg", ref: sectionRef, children: [panelOverlay, !hideToolbar && (_jsx(PanelToolbar, { kind: kind, topic: topic, setDetections: setDetections, disableAnnotations: disableAnnotations, targetFps: targetFps, renderDelay: renderDelay, toggleTopic: toggleTopic, toggleFullscreen: toggleFullscreenForThisPanel, triggerToast: triggerToast, canMoveUp: canMoveUp, moveUp: moveUp, canMoveDown: canMoveDown, moveDown: moveDown, touchesBreakpoint: sectionRef.current?.clientWidth ? sectionRef.current.clientWidth <= 550 : false, isPointcloud: kind === "pointCloud", actions: panelToolbarActions })), _jsx(Suspense, { fallback: _jsx(EmptyState, { children: _jsx("div", { children: "Loading..." }) }), children: _jsx(RemountOnValueChange, { value: detections, children: children }) })] }) }) }) }));
+    return (_jsx(RemountOnValueChange, { value: "internal-player", children: _jsx(ErrorBoundary, { children: _jsx(DetectionContext.Provider, { value: { detections }, children: _jsxs("section", { className: "flex flex-col grow border border-solid border-[#d3d3d3d9] overflow-hidden rounded-lg", ref: sectionRef, children: [panelOverlay, !hideToolbar && (_jsx(PanelToolbar, { fakedAs: fakedAs, kind: kind, topic: topic, setDetections: setDetections, disableAnnotations: disableAnnotations, targetFps: targetFps, renderDelay: renderDelay, toggleTopic: toggleTopic, toggleFullscreen: toggleFullscreenForThisPanel, triggerToast: triggerToast, canMoveUp: canMoveUp, moveUp: moveUp, canMoveDown: canMoveDown, moveDown: moveDown, touchesBreakpoint: sectionRef.current?.clientWidth ? sectionRef.current.clientWidth <= 550 : false, isPointcloud: kind === "pointCloud", actions: panelToolbarActions })), _jsx(Suspense, { fallback: _jsx(EmptyState, { children: _jsx("div", { children: "Loading..." }) }), children: _jsx(RemountOnValueChange, { value: detections, children: children }) })] }) }) }) }));
 };
 //# sourceMappingURL=Panel.js.map

package/dist/lib/src/components/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"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"}

package/dist/lib/src/components/PanelToolbar.d.ts

@@ -19,6 +19,7 @@ export type PanelToolbarProps = {
     moveDown?: () => void;
     touchesBreakpoint?: boolean;
     actions?: JSX.Element;
+    fakedAs?: string;
 };
 export declare const PanelToolbar: React.FC<PanelToolbarProps>;
 //# sourceMappingURL=PanelToolbar.d.ts.map

package/dist/lib/src/components/PanelToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AA6BvB,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAI5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,sCAAsC,CAAC;AA0N9C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwVpD,CAAC"}
+{"version":3,"file":"PanelToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AA6BvB,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAI5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,sCAAsC,CAAC;AA0N9C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,OAAO,CAAC,EAAC,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0WpD,CAAC"}

package/dist/lib/src/components/PanelToolbar.js

@@ -92,8 +92,9 @@ const PanelAnnotationButton = ({ topic, onClick }) => {
     }, [onClick]);
     return (_jsx(DropdownMenuItem, { onClick: handleClick, children: _jsxs(Flex, { align: "center", gap: "sm", children: [_jsx(Icon, { color: "active", icon: topic.enabled ? ImCheckboxChecked : ImCheckboxUnchecked }), _jsx(NormalText, { text: topic.name })] }) }));
 };
-export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations = false, targetFps, triggerToast, toggleTopic, toggleFullscreen, canMoveUp, moveUp, canMoveDown, moveDown, touchesBreakpoint, isPointcloud, actions, }) => {
+export const PanelToolbar = ({ topic, fakedAs, kind, setDetections, disableAnnotations = false, targetFps, triggerToast, toggleTopic, toggleFullscreen, canMoveUp, moveUp, canMoveDown, moveDown, touchesBreakpoint, isPointcloud, actions, }) => {
     const [metrics, setMetrics] = React.useState();
+    const [fakedMetrics, setFakedMetrics] = React.useState();
     const [showResolution, setShowResolution] = React.useState(false);
     const { detections } = useDetections();
     const connections = useConnections();
@@ -102,18 +103,29 @@ export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations =
     const wrapperBreakpointRef = React.useRef(null);
     const parentContainer = wrapperBreakpointRef.current ?? wrapperRef.current ?? document.body;
     React.useEffect(() => {
-        // Initial set
         if (!metrics) {
             setMetrics(connections.at(0)?.getTopicMetrics(topic));
         }
         const interval = setInterval(() => {
-            setMetrics(connections[0]?.getTopicMetrics(topic));
+            const m = connections[0]?.getTopicMetrics(topic);
+            setMetrics(m);
+            if (fakedAs) {
+                const mFakedAs = connections[0]?.getTopicMetrics(fakedAs);
+                if (mFakedAs) {
+                    setFakedMetrics({
+                        resolutions: m?.resolutions ?? new Map(),
+                        incomingMessagesFps: mFakedAs.incomingMessagesFps,
+                        decodedMessagesFps: mFakedAs.decodedMessagesFps,
+                        messageThroughput: mFakedAs.messageThroughput,
+                    });
+                }
+            }
         }, 500);
         return () => {
             clearInterval(interval);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [connections, topic, fakedAs]);
     React.useEffect(() => {
         if (wrapperWidth && wrapperWidth < 600) {
             setShowResolution(false);
@@ -152,7 +164,7 @@ export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations =
     const makeDetection = React.useCallback((detection, { extra }) => (extra ? detection.extra && !detection.enabled : !detection.extra || detection.enabled) && (_jsx(PanelAnnotationButton, { topic: detection, onClick: () => {
             onToggleTopic(detection.name);
         } }, detection.name)), [onToggleTopic]);
-    return (_jsx(Flex, { direction: "row", gap: "xs", align: "center", justify: "space-between", className: "px-4 bg-white", ref: wrapperRef, children: _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: touchesBreakpoint ? "space-between" : "start", width: "full", paddingY: "xs", children: [_jsxs(Flex, { width: "fit", gap: "xxs", className: "flex-col xl:flex-row items-start xl:items-end", children: [_jsx(Tooltip, { content: resolution, children: _jsx(SubHeader, { text: name, className: "whitespace-nowrap text-[20px]/[20px]" }) }), showResolution && resolution && (_jsx(Label, { text: `(${resolution})`, className: "text-[14px]/[14px] xl:pb-[2px]" }))] }), touchesBreakpoint ? (_jsxs(Flex, { direction: "row", gap: "xs", align: "center", children: [actions, _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { icon: MoreMenuIcon, variant: "outline", colorVariant: "white", size: "sm" }) }), _jsxs(DropdownMenuContent, { ref: wrapperBreakpointRef, children: [_jsx(PanelToolbarMetrics, { targetFps: targetFps, metrics: metrics, topic: topic, inDropdown: true, isPointcloud: kind === "pointCloud" }), kind === "pointCloud" && (_jsx(Tooltip, { parentContainer: parentContainer, side: "bottom", content: _jsx(PointCloudPanelInstructions, {}), children: _jsx(DropdownMenuItem, { icon: HelpIcon, onClick: (e) => {
+    return (_jsx(Flex, { direction: "row", gap: "xs", align: "center", justify: "space-between", className: "px-4 bg-white", ref: wrapperRef, children: _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: touchesBreakpoint ? "space-between" : "start", width: "full", paddingY: "xs", children: [_jsxs(Flex, { width: "fit", gap: "xxs", className: "flex-col xl:flex-row items-start xl:items-end", children: [_jsx(Tooltip, { content: resolution, children: _jsx(SubHeader, { text: name, className: "whitespace-nowrap text-[20px]/[20px]" }) }), showResolution && resolution && (_jsx(Label, { text: `(${resolution})`, className: "text-[14px]/[14px] xl:pb-[2px]" }))] }), touchesBreakpoint ? (_jsxs(Flex, { direction: "row", gap: "xs", align: "center", children: [actions, _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { icon: MoreMenuIcon, variant: "outline", colorVariant: "white", size: "sm" }) }), _jsxs(DropdownMenuContent, { ref: wrapperBreakpointRef, children: [_jsx(PanelToolbarMetrics, { targetFps: targetFps, metrics: fakedMetrics ?? metrics, topic: topic, inDropdown: true, isPointcloud: kind === "pointCloud" }), kind === "pointCloud" && (_jsx(Tooltip, { parentContainer: parentContainer, side: "bottom", content: _jsx(PointCloudPanelInstructions, {}), children: _jsx(DropdownMenuItem, { icon: HelpIcon, onClick: (e) => {
                                                     e.stopPropagation();
                                                     e.preventDefault();
                                                 }, cursor: "help", children: "Point Cloud Details" }) })), !disableAnnotations && kind === "image" && (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { disabled: detections.length === 0, style: { opacity: detections.length === 0 ? 0.5 : 1 }, children: "Annotations" }), _jsxs(DropdownMenuSubContent, { children: [detections.map((detection) => makeDetection(detection, { extra: false })), hasExtra && (_jsx(Button, { width: "full", paddingY: "xs", variant: "ghost", "aria-expanded": extraVisible ? "true" : undefined, onClick: () => {
@@ -160,7 +172,7 @@ export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations =
                                                             }, icon: extraVisible ? ArrowUpIcon : ArrowDownIcon, style: {
                                                                 borderRadius: 4,
                                                             }, children: extraVisible ? "Less" : "More" })), extraVisible &&
-                                                            detections.map((detection) => makeDetection(detection, { extra: true }))] })] })), _jsx(DropdownMenuItem, { onClick: moveUp, disabled: !canMoveUp, icon: FaCaretUp, children: "Move Panel Up" }), _jsx(DropdownMenuItem, { onClick: moveDown, disabled: !canMoveDown, icon: FaCaretDown, children: "Move Panel Down" }), toggleFullscreen && (_jsx(DropdownMenuItem, { onClick: toggleFullscreen, icon: FullscreenIcon, children: "Fullscreen" })), _jsx(DropdownMenuItem, { onClick: () => toggleTopic?.(name), disabled: !canMoveDown, icon: CrossIcon, children: "Close Stream" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(PanelToolbarMetrics, { targetFps: targetFps, metrics: metrics, topic: topic, isPointcloud: isPointcloud }), _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", marginLeft: "auto", width: "fit", children: [!disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { children: [_jsx(Tooltip, { content: "Annotations", parentContainer: parentContainer, children: _jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", colorVariant: "white", size: "sm", icon: CiFilter, disabled: detections.length === 0 }) }) }), _jsxs(DropdownMenuContent, { parentContainer: parentContainer, children: [detections.map((detection) => makeDetection(detection, { extra: false })), hasExtra && (_jsx(Button, { width: "full", paddingY: "xs", variant: "ghost", "aria-expanded": extraVisible ? "true" : undefined, onClick: () => {
+                                                            detections.map((detection) => makeDetection(detection, { extra: true }))] })] })), _jsx(DropdownMenuItem, { onClick: moveUp, disabled: !canMoveUp, icon: FaCaretUp, children: "Move Panel Up" }), _jsx(DropdownMenuItem, { onClick: moveDown, disabled: !canMoveDown, icon: FaCaretDown, children: "Move Panel Down" }), toggleFullscreen && (_jsx(DropdownMenuItem, { onClick: toggleFullscreen, icon: FullscreenIcon, children: "Fullscreen" })), _jsx(DropdownMenuItem, { onClick: () => toggleTopic?.(name), disabled: !canMoveDown, icon: CrossIcon, children: "Close Stream" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(PanelToolbarMetrics, { targetFps: targetFps, metrics: fakedMetrics ?? metrics, topic: topic, isPointcloud: isPointcloud }), _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", marginLeft: "auto", width: "fit", children: [!disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { children: [_jsx(Tooltip, { content: "Annotations", parentContainer: parentContainer, children: _jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", colorVariant: "white", size: "sm", icon: CiFilter, disabled: detections.length === 0 }) }) }), _jsxs(DropdownMenuContent, { parentContainer: parentContainer, children: [detections.map((detection) => makeDetection(detection, { extra: false })), hasExtra && (_jsx(Button, { width: "full", paddingY: "xs", variant: "ghost", "aria-expanded": extraVisible ? "true" : undefined, onClick: () => {
                                                         setExtraVisible((current) => !current);
                                                     }, icon: extraVisible ? ArrowUpIcon : ArrowDownIcon, style: {
                                                         borderRadius: 4,