mobx-view-model-devtools 0.0.20 → 0.0.22

package/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode(".root_Xsw1F{display:contents}.root_Xsw1F *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{position:fixed;z-index:999999;width:36px;height:36px;cursor:pointer;border-radius:8px;outline:0;transition:all .15s ease-in-out}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:12px;right:12px}.vmButton_Xr1Q6[data-position=top-right].opened_gewqL,.vmButton_Xr1Q6[data-position=undefined].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=top-left]{top:12px;left:12px}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:12px;left:12px}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6[data-position=bottom-right]{bottom:12px;right:12px}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6>img{pointer-events:none;position:absolute;inset:0;border-radius:8px}.vmButton_Xr1Q6>div{transition:all .15s ease-in-out;position:absolute;inset:0;border-radius:8px;border:2px solid #00000057}.vmButton_Xr1Q6>span{left:-4px;top:-4px;pointer-events:none;position:absolute;display:flex;border-radius:8px;background:#005c26cf;padding:2px;font-weight:600;font-size:12px;line-height:12px;color:#2aff0a}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){filter:grayscale(1)}.closePopupButton_-08HG{width:28px;padding:6px}.hierarchyButton_h3FD7{width:18px;height:18px;padding:2px;border-radius:6px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{position:fixed;z-index:999999;width:520px;border-radius:8px;height:calc(100vh - 24px);width:calc(100vw - 34px);max-width:520px}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:12px;right:12px}.vmPopup_Q4l4j[data-position=top-left]{top:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-right]{bottom:12px;right:12px}.treeItemHeader_9gR6Q{display:flex;align-items:center;gap:4px;margin:auto 0;cursor:pointer;background:#1e1e1e;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItemLabel_eiMgP{padding:0 4px;border-radius:4px}.treeItemMetaText_cmfX0{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItem_sRXPA{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;padding-left:calc(0px + (var(--level) * 20px));position:sticky;top:-8px;z-index:1}.treeItem_sRXPA:not([data-fitted=true])>header{opacity:.6}.vmTreeItem_t-7jc .treeItemLabel_eiMgP{background:#0f6013}.vmTreeItem_t-7jc .treeItemMetaText_cmfX0{color:#5ab65e}.extrasItem_MI9Fa .treeItemLabel_eiMgP{background:#6b6902}.expandButton_EObqt{color:#a0a0a0;opacity:1!important;width:16px;height:16px;font-weight:700;cursor:pointer}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}.iconToggleButton_R48wm{display:flex;align-items:center;gap:2px;position:relative;height:20px;outline:none}.activePosition_IXsRn{position:absolute;height:16px;width:16px;padding:1px;box-sizing:content-box;background:#515151;border-radius:4px;transition:all 149ms ease;transform:translate(calc(20px * var(--index)))}.option_a5IcR{padding:1px;z-index:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.option_a5IcR>svg{width:14px;height:14px}.property_tyrFk{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;position:relative;color:#616161;padding-left:calc(28px + (var(--level) * 15px))}.property_tyrFk.expandable_ZtNTw{cursor:pointer}.property_tyrFk[data-fitted=false]{opacity:.5}.property_tyrFk.instance_aPKFv{--value-color: rgb(186 130 190)}.property_tyrFk.primitive_mOPtu.boolean_H-c-u,.property_tyrFk.primitive_mOPtu.number_Mk-lR,.property_tyrFk.primitive_mOPtu.object_rbtD2,.property_tyrFk.primitive_mOPtu.undefined_xHzJR,.property_tyrFk.primitive_mOPtu.bigint_vEvWZ,.property_tyrFk.primitive_mOPtu.symbol_izwyn{--value-color: rgb(89, 153, 205)}.primitive_mOPtu.string_qjuUu{--value-color: #af7249}.propertyName_gpj0H{color:#ccc}.propertyMeta_xSfkm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH{color:var(--value-color, #616161);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH:has(+.propertyName_gpj0H){margin-right:4px}.vmContent_TIK57{color:#ccc;background:#1e1e1e;overflow:auto;display:flex;flex-direction:column}.vmContentHeader_M1JNM{display:flex;justify-content:space-between;align-items:center;height:32px;padding-left:8px;font-weight:600}.vmContentHeaderLogo_FRJDO{width:16px;margin-right:6px}.vmContentHeaderTitle_lYmde{font-size:16px;margin-right:auto}.vmContentControlPanel_CgUN9{padding:0 8px;width:100%;background:#1e1e1e;display:flex;flex-direction:row;gap:4px}.vmContentControlPanelActions_lONbA{display:flex;flex-direction:row;align-items:center}.hiearchyToggleButton_0FTG-{display:flex}.vmContentHeaderBaseActions_qc7CI{display:flex;flex-direction:row;gap:4px;height:16px;align-items:center;margin-left:6px;margin-right:auto}.vmContentInput_29GM1{display:flex;position:relative;flex:1}.vmContentInput_29GM1>svg{position:absolute;width:16px;inset:50% 0;transform:translate(6px,-50%);pointer-events:none;opacity:.7}.vmContentInput_29GM1>input{background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px;text-overflow:ellipsis}.vmContentInput_29GM1>button{position:absolute;right:6px;width:16px;transform:translate(4px,-50%);top:50%;opacity:.6;display:none}.vmContentInput_29GM1.filled_6JZa0>svg{opacity:.9}.vmContentInput_29GM1.filled_6JZa0>button{display:block}.vmContentTree_BETR6{display:flex;flex-direction:column;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e}.vmContentTree_BETR6:hover{scrollbar-color:#818181 #1e1e1e}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.vmButton_esipO{position:fixed;z-index:999999;width:36px;height:36px;border-radius:8px;transition:all .15s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}.vmButton_esipO.dragging_kUMCE{transition:none;cursor:grabbing;opacity:.8;z-index:1000}.vmButton_esipO.opened_NYAFW{opacity:0!important;pointer-events:none}.vmButton_esipO[data-position=top-right]{top:12px;right:12px}.vmButton_esipO[data-position=top-left]{top:12px;left:12px}.vmButton_esipO[data-position=bottom-left]{bottom:12px;left:12px}.vmButton_esipO[data-position=bottom-right]{bottom:12px;right:12px}.vmButton_esipO>img{pointer-events:none;position:absolute;inset:0;border-radius:8px}.vmButton_esipO>div{transition:all .15s ease-in-out;position:absolute;inset:0;border-radius:8px;border:2px solid #00000057}.vmButton_esipO>span{left:-4px;top:-4px;pointer-events:none;position:absolute;display:flex;border-radius:8px;background:#005c26cf;padding:2px;font-weight:600;font-size:12px;line-height:12px;color:#2aff0a}.vmButton_esipO:not(.isConnected_eObxX){filter:grayscale(1)}.vmPopup_0hkGL{position:fixed!important;z-index:999999;width:520px;border-radius:8px;height:calc(100vh - 24px);width:calc(100vw - 34px);max-width:520px;box-shadow:0 5px 20px #0006}.vmPopup_0hkGL[data-position=top-right]{top:12px;right:12px}.vmPopup_0hkGL[data-position=top-left]{top:12px;left:12px}.vmPopup_0hkGL[data-position=bottom-left]{bottom:12px;left:12px}.vmPopup_0hkGL[data-position=bottom-right]{bottom:12px;right:12px}.closePopupButton_igv9j{width:28px;height:28px;padding:6px;border:0;background:transparent;color:var(--vmd-base-color)}.iconToggleButton_R48wm{display:flex;align-items:center;gap:2px;position:relative;height:20px;outline:none}.activePosition_IXsRn{position:absolute;height:16px;width:16px;padding:1px;box-sizing:content-box!important;background:var(--vmd-control-active-bg);-webkit-backdrop-filter:blur(var(--vmd-base-blur));backdrop-filter:blur(var(--vmd-base-blur));border-radius:4px;transition:all 149ms ease;transform:translate(calc(20px * var(--index)))}.option_a5IcR{padding:1px;z-index:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:all 149ms ease;color:var(--vmd-control-inactive-color)}.option_a5IcR.active_6QS-2{color:var(--vmd-control-active-color)}.option_a5IcR>svg{width:14px;height:14px}.property_Oy4bS{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:var(--vmd-content-bg);height:22px;display:flex;flex-direction:row;align-items:center;position:relative;color:var(--vmd-property-meta-color);padding-left:calc(0px + 28px + (var(--level) * 15px))}.property_Oy4bS.expandable_usEY-{cursor:pointer}.property_Oy4bS[data-fitted=false]{opacity:.5}.property_Oy4bS.instance_g6xOw{--value-color: rgb(190 113 195)}.property_Oy4bS.primitive_v003s.boolean_INujc,.property_Oy4bS.primitive_v003s.number_7K-jw,.property_Oy4bS.primitive_v003s.object_3K21J,.property_Oy4bS.primitive_v003s.bigint_NCBnp,.property_Oy4bS.primitive_v003s.symbol_Nk-vG{--value-color: rgb(89, 153, 205)}.property_Oy4bS.primitive_v003s.undefined_32Xx8,.property_Oy4bS.primitive_v003s.null_jbJLZ{--value-color: #499098}.primitive_v003s.string_DCKmP{--value-color: #af7249}.propertyName_Jbwvb{color:#ccc}.propertyMeta_D04Er{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_bht-2{color:var(--value-color, var(--vmd-property-meta-color));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_bht-2:has(+.propertyName_Jbwvb){margin-right:4px}.expandButton_B24E3{color:#a0a0a0;opacity:1!important;width:16px;height:16px;font-weight:700;cursor:pointer}.expandButton_B24E3.expanded_8-pD6{color:#b8b8b8;transform:rotate(90deg)}.expandButton_B24E3.disabled_MBq1Q{opacity:.35!important}.vmContent_TIK57[data-simplebar]{position:relative;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;color:var(--vmd-base-color);background:var(--vmd-bg);-webkit-backdrop-filter:blur(var(--vmd-base-blur));backdrop-filter:blur(var(--vmd-base-blur));display:flex;flex-direction:column;overflow:auto;overflow-y:auto;scrollbar-width:thin;overflow-anchor:none}.vmContent_TIK57[data-simplebar] .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.vmContent_TIK57[data-simplebar] .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;inset:0;width:auto!important;height:auto!important;z-index:0}.vmContent_TIK57[data-simplebar] .simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;inset:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.vmContent_TIK57[data-simplebar] .simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.vmContent_TIK57[data-simplebar] .simplebar-content-wrapper::-webkit-scrollbar,.vmContent_TIK57[data-simplebar] .simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.vmContent_TIK57[data-simplebar] .simplebar-content:after,.vmContent_TIK57[data-simplebar] .simplebar-content:before{content:" ";display:table}.vmContent_TIK57[data-simplebar] .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.vmContent_TIK57[data-simplebar] .simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.vmContent_TIK57[data-simplebar] .simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.vmContent_TIK57[data-simplebar] .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}.vmContent_TIK57[data-simplebar].simplebar-dragging,.vmContent_TIK57[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vmContent_TIK57[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.vmContent_TIK57[data-simplebar] .simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.vmContent_TIK57[data-simplebar] .simplebar-scrollbar:before{position:absolute;content:"";background:var(--vmd-scrollbar-bg-base);border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.vmContent_TIK57[data-simplebar] .simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.vmContent_TIK57[data-simplebar] .simplebar-track.simplebar-vertical{top:0;width:var(--vmd-scrollbar-track-size)}.vmContent_TIK57[data-simplebar] .simplebar-scrollbar:before{inset:2px}.vmContent_TIK57[data-simplebar] .simplebar-track.simplebar-horizontal{left:0;height:var(--vmd-scrollbar-track-size)}.vmContent_TIK57[data-simplebar] .simplebar-track.simplebar-horizontal .simplebar-scrollbar{inset:0 auto 0 0;min-height:0;min-width:10px;width:auto}.vmContent_TIK57[data-simplebar] .simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.vmContent_TIK57[data-simplebar] .simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.vmContent_TIK57[data-simplebar] .simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.vmContentHeader_M1JNM{display:flex;flex-direction:column;height:var(--vmd-header-height);flex:none;padding:0 8px;position:sticky;top:0;z-index:1}.vmContentHeaderLogo_FRJDO{width:16px;margin-right:6px}.vmContentHeaderTitle_lYmde{display:flex;justify-content:space-between;align-items:center;flex:none;font-weight:600;z-index:1}.vmContentHeaderTitleText_RlIFH{font-size:16px;margin-right:auto}.vmContentControlPanel_CgUN9{width:100%;height:var(--vmd-control-panel-height);padding-bottom:4px;flex:none;display:flex;flex-direction:row;z-index:1;gap:4px}.vmContentControlPanelActions_lONbA{display:flex;flex-direction:row;align-items:center}.hiearchyToggleButton_0FTG-{display:flex}.vmContentInput_29GM1{display:flex;position:relative;flex:1}.vmContentInput_29GM1>svg{position:absolute;width:16px;inset:50% 0;transform:translate(6px,-50%);pointer-events:none;opacity:.7}.vmContentInput_29GM1>input{background:var(--vmd-control-bg);border:1px solid var(--vmd-control-border);color:var(--vmd-control-active-text-input-color);border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px;text-overflow:ellipsis}.vmContentInput_29GM1>button{position:absolute;right:6px;width:16px;transform:translate(4px,-50%);top:50%;opacity:.6;display:none}.vmContentInput_29GM1.filled_6JZa0>svg{opacity:.9}.vmContentInput_29GM1.filled_6JZa0>button{display:block}.vmContentVirtualized_lia62{flex:1}.vmContentVirtualized_lia62>div>div{height:22px}.gradientBlur_-y-re{position:absolute;top:0;left:0;width:100%;height:calc(100% + 12px);pointer-events:none;background:linear-gradient(to bottom,var(--vmd-overlay-bg) 0%,rgba(0,0,0,0) 100%)}.gradientBlur_-y-re:before{content:"";position:absolute;inset:0;background:transparent;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-mask:linear-gradient(to bottom,var(--vmd-overlay-bg) 50%,rgba(0,0,0,0) 100%);mask:linear-gradient(to bottom,var(--vmd-overlay-bg) 50%,rgba(0,0,0,0) 100%)}:root{--vmd-base-blur: 2px;--vmd-bg: #0f111cdb;--vmd-overlay-bg: #0e1227bd;--vmd-base-color: #ccc;--vmd-control-active-bg: #e6e6e682;--vmd-control-active-color: #181818;--vmd-control-active-text-input-color: var(--vmd-base-color);--vmd-control-inactive-color: #8b8b8b;--vmd-control-border: #5b5468a6;--vmd-control-bg: transparent;--vmd-bg-transparent: #1f1c2600;--vmd-content-bg: transparent;--vmd-scrollbar-track-size: 8px;--vmd-scrollbar-bg-base: #81818170;--vmd-scrollbar-bg-active: #818181;--vmd-property-meta-color: #616161;--vmd-primary-bg: #0f6013;--vmd-primary-color: #5ab65e;--vmd-secondary-bg: #6b6902;--vmd-header-height: 60px}.root_Xsw1F{display:contents;box-sizing:border-box}.root_Xsw1F *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;box-sizing:border-box}.root_Xsw1F button{outline:none;background:transparent;border:0;cursor:pointer;margin:0;padding-block:0;padding-inline:0}.hierarchyButton_h3FD7{width:18px;height:18px;padding:2px;border-radius:6px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.treeItemHeader_9gR6Q{display:flex;align-items:center;gap:4px;margin:auto 0;cursor:pointer;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItemLabel_eiMgP{padding:0 4px;border-radius:4px}.treeItemMetaText_cmfX0{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItem_sRXPA{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;height:22px;display:flex;flex-direction:row;align-items:center;padding-left:calc(8px + (var(--level) * 20px));position:sticky;top:calc(var(--vmd-header-height) + var(--vmd-control-panel-height));z-index:1}.treeItem_sRXPA:not([data-fitted=true])>header{opacity:.6}.vmTreeItem_t-7jc .treeItemLabel_eiMgP{background:var(--vmd-primary-bg)}.vmTreeItem_t-7jc .treeItemMetaText_cmfX0{color:var(--vmd-primary-color)}.extraTreeItem_z3KA1 .treeItemLabel_eiMgP{background:var(--vmd-secondary-bg)}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -386,7 +386,7 @@ function requireReact_development() {
           }
           return null;
         }
-        var hasOwnProperty = Object.prototype.hasOwnProperty;
+        var hasOwnProperty2 = Object.prototype.hasOwnProperty;
         var RESERVED_PROPS = {
           key: true,
           ref: true,
@@ -399,7 +399,7 @@ function requireReact_development() {
         }
         function hasValidRef(config) {
           {
-            if (hasOwnProperty.call(config, "ref")) {
+            if (hasOwnProperty2.call(config, "ref")) {
               var getter = Object.getOwnPropertyDescriptor(config, "ref").get;
               if (getter && getter.isReactWarning) {
                 return false;
@@ -410,7 +410,7 @@ function requireReact_development() {
         }
         function hasValidKey(config) {
           {
-            if (hasOwnProperty.call(config, "key")) {
+            if (hasOwnProperty2.call(config, "key")) {
               var getter = Object.getOwnPropertyDescriptor(config, "key").get;
               if (getter && getter.isReactWarning) {
                 return false;
@@ -522,7 +522,7 @@ function requireReact_development() {
             self2 = config.__self === void 0 ? null : config.__self;
             source = config.__source === void 0 ? null : config.__source;
             for (propName in config) {
-              if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+              if (hasOwnProperty2.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
                 props[propName] = config[propName];
               }
             }
@@ -594,7 +594,7 @@ function requireReact_development() {
               defaultProps = element.type.defaultProps;
             }
             for (propName in config) {
-              if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+              if (hasOwnProperty2.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
                 if (config[propName] === void 0 && defaultProps !== void 0) {
                   props[propName] = defaultProps[propName];
                 } else {
@@ -1394,7 +1394,7 @@ function requireReact_development() {
         }
         function checkPropTypes(typeSpecs, values, location, componentName, element) {
           {
-            var has = Function.call.bind(hasOwnProperty);
+            var has = Function.call.bind(hasOwnProperty2);
             for (var typeSpecName in typeSpecs) {
               if (has(typeSpecs, typeSpecName)) {
                 var error$1 = void 0;
@@ -2314,7 +2314,7 @@ function requireReactJsxRuntime_development() {
         }
         return "";
       }
-      var hasOwnProperty = Object.prototype.hasOwnProperty;
+      var hasOwnProperty2 = Object.prototype.hasOwnProperty;
       var loggedTypeFailures = {};
       var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
       function setCurrentlyValidatingElement(element) {
@@ -2330,7 +2330,7 @@ function requireReactJsxRuntime_development() {
       }
       function checkPropTypes(typeSpecs, values, location, componentName, element) {
         {
-          var has = Function.call.bind(hasOwnProperty);
+          var has = Function.call.bind(hasOwnProperty2);
           for (var typeSpecName in typeSpecs) {
             if (has(typeSpecs, typeSpecName)) {
               var error$1 = void 0;
@@ -2402,7 +2402,7 @@ function requireReactJsxRuntime_development() {
       var specialPropRefWarningShown;
       function hasValidRef(config) {
         {
-          if (hasOwnProperty.call(config, "ref")) {
+          if (hasOwnProperty2.call(config, "ref")) {
             var getter = Object.getOwnPropertyDescriptor(config, "ref").get;
             if (getter && getter.isReactWarning) {
               return false;
@@ -2413,7 +2413,7 @@ function requireReactJsxRuntime_development() {
       }
       function hasValidKey(config) {
         {
-          if (hasOwnProperty.call(config, "key")) {
+          if (hasOwnProperty2.call(config, "key")) {
             var getter = Object.getOwnPropertyDescriptor(config, "key").get;
             if (getter && getter.isReactWarning) {
               return false;
@@ -2519,7 +2519,7 @@ function requireReactJsxRuntime_development() {
             warnIfStringRefCannotBeAutoConverted(config, self2);
           }
           for (propName in config) {
-            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+            if (hasOwnProperty2.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
               props[propName] = config[propName];
             }
           }
@@ -2746,7 +2746,7 @@ function requireReactJsxRuntime_development() {
             }
           }
           {
-            if (hasOwnProperty.call(props, "key")) {
+            if (hasOwnProperty2.call(props, "key")) {
               var componentName = getComponentNameFromType(type);
               var keys = Object.keys(props).filter(function(k2) {
                 return k2 !== "key";
@@ -2947,11 +2947,11 @@ function isStringish(value) {
   }
   return false;
 }
-function isObject$1(value) {
+function isObject$2(value) {
   return value !== null && typeof value === "object";
 }
 function isPlainObject(value) {
-  if (!isObject$1(value)) {
+  if (!isObject$2(value)) {
     return false;
   }
   var proto = Object.getPrototypeOf(value);
@@ -2991,7 +2991,7 @@ function createInstanceofPredicate(name, theClass) {
   var propName = "isMobX" + name;
   theClass.prototype[propName] = true;
   return function(x2) {
-    return isObject$1(x2) && x2[propName] === true;
+    return isObject$2(x2) && x2[propName] === true;
   };
 }
 function isES6Map(thing) {
@@ -2999,8 +2999,8 @@ function isES6Map(thing) {
 }
 function isPlainES6Map(thing) {
   var mapProto = Object.getPrototypeOf(thing);
-  var objectProto = Object.getPrototypeOf(mapProto);
-  var nullProto = Object.getPrototypeOf(objectProto);
+  var objectProto2 = Object.getPrototypeOf(mapProto);
+  var nullProto = Object.getPrototypeOf(objectProto2);
   return nullProto === null;
 }
 function isES6Set(thing) {
@@ -5987,7 +5987,7 @@ function reduceLikeFunc(funcName) {
 }
 var isObservableArrayAdministration = /* @__PURE__ */ createInstanceofPredicate("ObservableArrayAdministration", ObservableArrayAdministration);
 function isObservableArray(thing) {
-  return isObject$1(thing) && isObservableArrayAdministration(thing[$mobx]);
+  return isObject$2(thing) && isObservableArrayAdministration(thing[$mobx]);
 }
 var ObservableMapMarker = {};
 var ADD = "add";
@@ -7080,7 +7080,7 @@ function getCachedObservablePropDescriptor(key) {
   });
 }
 function isObservableObject(thing) {
-  if (isObject$1(thing)) {
+  if (isObject$2(thing)) {
     return isObservableObjectAdministration(thing[$mobx]);
   }
   return false;
@@ -8043,8 +8043,8 @@ function requireReactDom_development() {
           allNativeEvents.add(dependencies[i]);
         }
       }
-      var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-      var hasOwnProperty = Object.prototype.hasOwnProperty;
+      var canUseDOM2 = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+      var hasOwnProperty2 = Object.prototype.hasOwnProperty;
       function typeName(value) {
         {
           var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag;
@@ -8126,10 +8126,10 @@ function requireReactDom_development() {
       var illegalAttributeNameCache = {};
       var validatedAttributeNameCache = {};
       function isAttributeNameSafe(attributeName) {
-        if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
+        if (hasOwnProperty2.call(validatedAttributeNameCache, attributeName)) {
           return true;
         }
-        if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
+        if (hasOwnProperty2.call(illegalAttributeNameCache, attributeName)) {
           return false;
         }
         if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
@@ -10743,7 +10743,7 @@ function requireReactDom_development() {
       var rARIACamel = new RegExp("^(aria)[A-Z][" + ATTRIBUTE_NAME_CHAR + "]*$");
       function validateProperty(tagName, name) {
         {
-          if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
+          if (hasOwnProperty2.call(warnedProperties, name) && warnedProperties[name]) {
             return true;
           }
           if (rARIACamel.test(name)) {
@@ -10826,7 +10826,7 @@ function requireReactDom_development() {
         var rARIA$1 = new RegExp("^(aria)-[" + ATTRIBUTE_NAME_CHAR + "]*$");
         var rARIACamel$1 = new RegExp("^(aria)[A-Z][" + ATTRIBUTE_NAME_CHAR + "]*$");
         validateProperty$1 = function(tagName, name, value, eventRegistry) {
-          if (hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
+          if (hasOwnProperty2.call(warnedProperties$1, name) && warnedProperties$1[name]) {
             return true;
           }
           var lowerCasedName = name.toLowerCase();
@@ -11093,7 +11093,7 @@ function requireReactDom_development() {
         return listener;
       }
       var passiveBrowserEventsSupported = false;
-      if (canUseDOM) {
+      if (canUseDOM2) {
         try {
           var options = {};
           Object.defineProperty(options, "passive", {
@@ -11555,7 +11555,7 @@ function requireReactDom_development() {
       var cancelCallback = Scheduler.unstable_cancelCallback;
       var shouldYield = Scheduler.unstable_shouldYield;
       var requestPaint = Scheduler.unstable_requestPaint;
-      var now = Scheduler.unstable_now;
+      var now2 = Scheduler.unstable_now;
       var getCurrentPriorityLevel = Scheduler.unstable_getCurrentPriorityLevel;
       var ImmediatePriority = Scheduler.unstable_ImmediatePriority;
       var UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
@@ -13530,13 +13530,13 @@ function requireReactDom_development() {
       var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
       var END_KEYCODES = [9, 13, 27, 32];
       var START_KEYCODE = 229;
-      var canUseCompositionEvent = canUseDOM && "CompositionEvent" in window;
+      var canUseCompositionEvent = canUseDOM2 && "CompositionEvent" in window;
       var documentMode = null;
-      if (canUseDOM && "documentMode" in document) {
+      if (canUseDOM2 && "documentMode" in document) {
         documentMode = document.documentMode;
       }
-      var canUseTextInputEvent = canUseDOM && "TextEvent" in window && !documentMode;
-      var useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
+      var canUseTextInputEvent = canUseDOM2 && "TextEvent" in window && !documentMode;
+      var useFallbackCompositionData = canUseDOM2 && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
       var SPACEBAR_CODE = 32;
       var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
       function registerEvents() {
@@ -13743,7 +13743,7 @@ function requireReactDom_development() {
        * @license Modernizr 3.0.0pre (Custom Build) | MIT
        */
       function isEventSupported(eventNameSuffix) {
-        if (!canUseDOM) {
+        if (!canUseDOM2) {
           return false;
         }
         var eventName = "on" + eventNameSuffix;
@@ -13795,7 +13795,7 @@ function requireReactDom_development() {
         }
       }
       var isInputEventSupported = false;
-      if (canUseDOM) {
+      if (canUseDOM2) {
         isInputEventSupported = isEventSupported("input") && (!document.documentMode || document.documentMode > 9);
       }
       function startWatchingForValueChange(target, targetInst) {
@@ -13977,7 +13977,7 @@ function requireReactDom_development() {
         }
         for (var i = 0; i < keysA.length; i++) {
           var currentKey = keysA[i];
-          if (!hasOwnProperty.call(objB, currentKey) || !objectIs(objA[currentKey], objB[currentKey])) {
+          if (!hasOwnProperty2.call(objB, currentKey) || !objectIs(objA[currentKey], objB[currentKey])) {
             return false;
           }
         }
@@ -14227,7 +14227,7 @@ function requireReactDom_development() {
           setOffsets(input, offsets);
         }
       }
-      var skipSelectionChangeEvent = canUseDOM && "documentMode" in document && document.documentMode <= 11;
+      var skipSelectionChangeEvent = canUseDOM2 && "documentMode" in document && document.documentMode <= 11;
       function registerEvents$3() {
         registerTwoPhaseEvent("onSelect", ["focusout", "contextmenu", "dragend", "focusin", "keydown", "keyup", "mousedown", "mouseup", "selectionchange"]);
       }
@@ -14335,7 +14335,7 @@ function requireReactDom_development() {
       };
       var prefixedEventNames = {};
       var style = {};
-      if (canUseDOM) {
+      if (canUseDOM2) {
         style = document.createElement("div").style;
         if (!("AnimationEvent" in window)) {
           delete vendorPrefixes.animationend.animation;
@@ -14850,7 +14850,7 @@ function requireReactDom_development() {
             possibleRegistrationNames
           });
         };
-        canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;
+        canDiffStyleForHydrationWarning = canUseDOM2 && !document.documentMode;
         warnForPropDifference = function(propName, serverValue, clientValue) {
           if (didWarnInvalidHydration) {
             return;
@@ -15020,7 +15020,7 @@ function requireReactDom_development() {
         }
         {
           if (namespaceURI === HTML_NAMESPACE) {
-            if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === "[object HTMLUnknownElement]" && !hasOwnProperty.call(warnedUnknownTags, type)) {
+            if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === "[object HTMLUnknownElement]" && !hasOwnProperty2.call(warnedUnknownTags, type)) {
               warnedUnknownTags[type] = true;
               error("The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.", type);
             }
@@ -16371,7 +16371,7 @@ function requireReactDom_development() {
       }
       function checkPropTypes(typeSpecs, values, location, componentName, element) {
         {
-          var has22 = Function.call.bind(hasOwnProperty);
+          var has22 = Function.call.bind(hasOwnProperty2);
           for (var typeSpecName in typeSpecs) {
             if (has22(typeSpecs, typeSpecName)) {
               var error$1 = void 0;
@@ -23949,7 +23949,7 @@ function requireReactDom_development() {
                     row = row.sibling;
                   }
                 }
-                if (renderState.tail !== null && now() > getRenderTargetTime()) {
+                if (renderState.tail !== null && now2() > getRenderTargetTime()) {
                   workInProgress2.flags |= DidCapture;
                   didSuspendAlready = true;
                   cutOffTailIfNeeded(renderState, false);
@@ -23978,7 +23978,7 @@ function requireReactDom_development() {
                   // The time it took to render last row is greater than the remaining
                   // time we have to render. So rendering one more row would likely
                   // exceed it.
-                  now() * 2 - renderState.renderingStartTime > getRenderTargetTime() && renderLanes2 !== OffscreenLane
+                  now2() * 2 - renderState.renderingStartTime > getRenderTargetTime() && renderLanes2 !== OffscreenLane
                 ) {
                   workInProgress2.flags |= DidCapture;
                   didSuspendAlready = true;
@@ -24003,7 +24003,7 @@ function requireReactDom_development() {
               var next = renderState.tail;
               renderState.rendering = next;
               renderState.tail = next.sibling;
-              renderState.renderingStartTime = now();
+              renderState.renderingStartTime = now2();
               next.sibling = null;
               var suspenseContext = suspenseStackCursor.current;
               if (didSuspendAlready) {
@@ -25967,7 +25967,7 @@ function requireReactDom_development() {
       var RENDER_TIMEOUT_MS = 500;
       var workInProgressTransitions = null;
       function resetRenderTimer() {
-        workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
+        workInProgressRootRenderTargetTime = now2() + RENDER_TIMEOUT_MS;
       }
       function getRenderTargetTime() {
         return workInProgressRootRenderTargetTime;
@@ -25996,12 +25996,12 @@ function requireReactDom_development() {
       }
       function requestEventTime() {
         if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-          return now();
+          return now2();
         }
         if (currentEventTime !== NoTimestamp) {
           return currentEventTime;
         }
-        currentEventTime = now();
+        currentEventTime = now2();
         return currentEventTime;
       }
       function requestUpdateLane(fiber) {
@@ -26198,7 +26198,7 @@ function requireReactDom_development() {
             var fatalError = workInProgressRootFatalError;
             prepareFreshStack(root22, NoLanes);
             markRootSuspended$1(root22, lanes);
-            ensureRootIsScheduled(root22, now());
+            ensureRootIsScheduled(root22, now2());
             throw fatalError;
           }
           if (exitStatus === RootDidNotComplete) {
@@ -26219,7 +26219,7 @@ function requireReactDom_development() {
                 var _fatalError = workInProgressRootFatalError;
                 prepareFreshStack(root22, NoLanes);
                 markRootSuspended$1(root22, lanes);
-                ensureRootIsScheduled(root22, now());
+                ensureRootIsScheduled(root22, now2());
                 throw _fatalError;
               }
             }
@@ -26228,7 +26228,7 @@ function requireReactDom_development() {
             finishConcurrentRender(root22, exitStatus, lanes);
           }
         }
-        ensureRootIsScheduled(root22, now());
+        ensureRootIsScheduled(root22, now2());
         if (root22.callbackNode === originalCallbackNode) {
           return performConcurrentWorkOnRoot.bind(null, root22);
         }
@@ -26277,7 +26277,7 @@ function requireReactDom_development() {
             markRootSuspended$1(root22, lanes);
             if (includesOnlyRetries(lanes) && // do not delay if we're inside an act() scope
             !shouldForceFlushFallbacksInDEV()) {
-              var msUntilTimeout = globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();
+              var msUntilTimeout = globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now2();
               if (msUntilTimeout > 10) {
                 var nextLanes = getNextLanes(root22, NoLanes);
                 if (nextLanes !== NoLanes) {
@@ -26304,7 +26304,7 @@ function requireReactDom_development() {
             if (!shouldForceFlushFallbacksInDEV()) {
               var mostRecentEventTime = getMostRecentEventTime(root22, lanes);
               var eventTimeMs = mostRecentEventTime;
-              var timeElapsedMs = now() - eventTimeMs;
+              var timeElapsedMs = now2() - eventTimeMs;
               var _msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs;
               if (_msUntilTimeout > 10) {
                 root22.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root22, workInProgressRootRecoverableErrors, workInProgressTransitions), _msUntilTimeout);
@@ -26381,7 +26381,7 @@ function requireReactDom_development() {
         flushPassiveEffects();
         var lanes = getNextLanes(root22, NoLanes);
         if (!includesSomeLane(lanes, SyncLane)) {
-          ensureRootIsScheduled(root22, now());
+          ensureRootIsScheduled(root22, now2());
           return null;
         }
         var exitStatus = renderRootSync(root22, lanes);
@@ -26396,7 +26396,7 @@ function requireReactDom_development() {
           var fatalError = workInProgressRootFatalError;
           prepareFreshStack(root22, NoLanes);
           markRootSuspended$1(root22, lanes);
-          ensureRootIsScheduled(root22, now());
+          ensureRootIsScheduled(root22, now2());
           throw fatalError;
         }
         if (exitStatus === RootDidNotComplete) {
@@ -26406,13 +26406,13 @@ function requireReactDom_development() {
         root22.finishedWork = finishedWork;
         root22.finishedLanes = lanes;
         commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
-        ensureRootIsScheduled(root22, now());
+        ensureRootIsScheduled(root22, now2());
         return null;
       }
       function flushRoot(root22, lanes) {
         if (lanes !== NoLanes) {
           markRootEntangled(root22, mergeLanes(lanes, SyncLane));
-          ensureRootIsScheduled(root22, now());
+          ensureRootIsScheduled(root22, now2());
           if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
             resetRenderTimer();
             flushSyncCallbacks();
@@ -26571,7 +26571,7 @@ function requireReactDom_development() {
         ReactCurrentDispatcher$2.current = prevDispatcher;
       }
       function markCommitTimeOfFallback() {
-        globalMostRecentFallbackTime = now();
+        globalMostRecentFallbackTime = now2();
       }
       function markSkippedUpdateLanes(lane) {
         workInProgressRootSkippedLanes = mergeLanes(lane, workInProgressRootSkippedLanes);
@@ -26905,7 +26905,7 @@ function requireReactDom_development() {
         {
           onCommitRoot$1();
         }
-        ensureRootIsScheduled(root22, now());
+        ensureRootIsScheduled(root22, now2());
         if (recoverableErrors !== null) {
           var onRecoverableError = root22.onRecoverableError;
           for (var i = 0; i < recoverableErrors.length; i++) {
@@ -27112,7 +27112,7 @@ function requireReactDom_development() {
         markRootPinged(root22, pingedLanes);
         warnIfSuspenseResolutionNotWrappedWithActDEV(root22);
         if (workInProgressRoot === root22 && isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)) {
-          if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && includesOnlyRetries(workInProgressRootRenderLanes) && now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {
+          if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && includesOnlyRetries(workInProgressRootRenderLanes) && now2() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {
             prepareFreshStack(root22, NoLanes);
           } else {
             workInProgressRootPingedLanes = mergeLanes(workInProgressRootPingedLanes, pingedLanes);
@@ -29060,7 +29060,7 @@ function requireReactDom_development() {
         rendererPackageName: "react-dom"
       });
       {
-        if (!foundDevTools && canUseDOM && window.top === window.self) {
+        if (!foundDevTools && canUseDOM2 && window.top === window.self) {
           if (navigator.userAgent.indexOf("Chrome") > -1 && navigator.userAgent.indexOf("Edge") === -1 || navigator.userAgent.indexOf("Firefox") > -1) {
             var protocol = window.location.protocol;
             if (/^(https?|file):$/.test(protocol)) {
@@ -29148,9 +29148,9 @@ var TimerBasedFinalizationRegistry = (
           }
           clearTimeout(_this.sweepTimeout);
           _this.sweepTimeout = void 0;
-          var now = Date.now();
+          var now2 = Date.now();
           _this.registrations.forEach(function(registration, token) {
-            if (now - registration.registeredAt >= maxAge) {
+            if (now2 - registration.registeredAt >= maxAge) {
               _this.finalize(registration.value);
               _this.registrations.delete(token);
             }
@@ -29356,11 +29356,11 @@ function useObserver(render, baseComponentName) {
   }
   return renderResult;
 }
-var _a$1, _b;
+var _a$2, _b;
 var warnLegacyContextTypes = true;
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
-var isFunctionNameConfigurable = (_b = (_a$1 = Object.getOwnPropertyDescriptor(function() {
-}, "name")) === null || _a$1 === void 0 ? void 0 : _a$1.configurable) !== null && _b !== void 0 ? _b : false;
+var isFunctionNameConfigurable = (_b = (_a$2 = Object.getOwnPropertyDescriptor(function() {
+}, "name")) === null || _a$2 === void 0 ? void 0 : _a$2.configurable) !== null && _b !== void 0 ? _b : false;
 var ReactForwardRefSymbol = hasSymbol ? Symbol.for("react.forward_ref") : typeof reactExports.forwardRef === "function" && reactExports.forwardRef(function(props) {
   return null;
 })["$$typeof"];
@@ -29433,9 +29433,9 @@ function copyStaticProperties(base, target) {
     }
   });
 }
-var _a;
+var _a$1;
 observerBatching(reactDomExports.unstable_batchedUpdates);
-(_a = observerFinalizationRegistry["finalizeAllImmediately"]) !== null && _a !== void 0 ? _a : (function() {
+(_a$1 = observerFinalizationRegistry["finalizeAllImmediately"]) !== null && _a$1 !== void 0 ? _a$1 : (function() {
 });
 const createCounter = (processValue, initial = 0) => {
   const update = (counter) => {
@@ -29494,6 +29494,78 @@ const createPubSub = () => {
   };
   return pubSub;
 };
+const TYPE = {
+  Null: "null",
+  Undefined: "undefined",
+  NaN: "nan",
+  Object: "[object Object]",
+  Array: "[object Array]",
+  String: "[object String]",
+  Number: "[object Number]",
+  Boolean: "[object Boolean]",
+  Function: "[object Function]",
+  AsyncFunction: "[object AsyncFunction]",
+  RegExp: "[object RegExp]",
+  Symbol: "[object Symbol]",
+  Infinite: "infinite",
+  Element: "element"
+};
+function getType(value) {
+  if (value === void 0) {
+    return TYPE.Undefined;
+  }
+  if (value === null) {
+    return TYPE.Null;
+  }
+  if (value && (value.nodeType === 1 || value.nodeType === 9)) {
+    return TYPE.Element;
+  }
+  const stringifiedValue = Object.prototype.toString.call(value);
+  if (stringifiedValue === TYPE.Number) {
+    if (Number.isNaN(value)) {
+      return TYPE.NaN;
+    }
+    if (!Number.isFinite(value)) {
+      return TYPE.Infinite;
+    }
+  }
+  return stringifiedValue;
+}
+const createTypeGuard = (...types) => (value) => types.includes(getType(value));
+const isDefined = (value) => value != null;
+const isNull = createTypeGuard(TYPE.Null);
+const isUndefined = createTypeGuard(TYPE.Undefined);
+const isObject$1 = createTypeGuard(TYPE.Object);
+const isArray = createTypeGuard(TYPE.Array);
+const isString = createTypeGuard(TYPE.String);
+const isNumber$1 = createTypeGuard(TYPE.Number);
+const isBoolean = createTypeGuard(TYPE.Boolean);
+const isFunction = createTypeGuard(
+  TYPE.Function,
+  TYPE.AsyncFunction
+);
+const isRegExp = createTypeGuard(TYPE.RegExp);
+const isElement = createTypeGuard(TYPE.Element);
+const isNaN$1 = createTypeGuard(TYPE.NaN);
+const isInfinite = createTypeGuard(TYPE.Infinite);
+const isSymbol$1 = createTypeGuard(TYPE.Symbol);
+const _exports = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  isArray,
+  isBoolean,
+  isDefined,
+  isElement,
+  isFunction,
+  isInfinite,
+  isNaN: isNaN$1,
+  isNull,
+  isNumber: isNumber$1,
+  isObject: isObject$1,
+  isRegExp,
+  isString,
+  isSymbol: isSymbol$1,
+  isUndefined
+}, Symbol.toStringTag, { value: "Module" }));
 const applyObservable$1 = (context, annotationsArray, useDecorators) => {
   if (useDecorators) {
     annotationsArray.forEach(([field, annotation]) => {
@@ -29504,6 +29576,43 @@ const applyObservable$1 = (context, annotationsArray, useDecorators) => {
     makeObservable(context, Object.fromEntries(annotationsArray));
   }
 };
+const createRef = (cfg) => {
+  let lastValue;
+  const comparer$1 = cfg?.comparer ?? comparer.default;
+  const ref = (value) => {
+    const nextValue = value ?? null;
+    if (comparer$1(ref.current, nextValue)) {
+      return;
+    }
+    runInAction(() => {
+      lastValue = ref.current ?? void 0;
+      ref.current = nextValue;
+      ref.listeners.forEach((listener) => {
+        listener(ref.current, lastValue);
+      });
+      if (ref.current === null && lastValue !== void 0) {
+        lastValue = void 0;
+      }
+    });
+  };
+  ref.listeners = new Set(cfg?.onChange ? [cfg.onChange] : []);
+  if (cfg?.onSet || cfg?.onUnset) {
+    ref.listeners.add((value, prevValue) => {
+      if (value) {
+        cfg.onSet?.(value, prevValue);
+      } else {
+        cfg.onUnset?.(prevValue);
+      }
+    });
+  }
+  ref.current = cfg?.initial ?? null;
+  ref.meta = cfg?.meta ?? {};
+  makeObservable(ref, {
+    current: observable.ref,
+    meta: observable
+  });
+  return ref;
+};
 const isShallowEqual = (a2, b2) => {
   if (a2 === b2) return true;
   if (typeof a2 !== "object" || typeof b2 !== "object" || a2 === null || b2 === null) {
@@ -31284,58 +31393,1097 @@ class ViewModelImpl extends ViewModelBase {
     });
   }
 }
-class VmTreeItemRenderVM extends ViewModelImpl {
-  devtools = this.payload.devtools;
-  constructor(vmParams) {
-    super(vmParams);
-    makeObservable(this, {
-      handleExpandPropertyClick: action,
-      handleVmItemHeaderClick: action
-    });
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root$1 = freeGlobal || freeSelf || Function("return this")();
+var now = function() {
+  return root$1.Date.now();
+};
+var reWhitespace = /\s/;
+function trimmedEndIndex(string2) {
+  var index = string2.length;
+  while (index-- && reWhitespace.test(string2.charAt(index))) {
   }
-  isPathExpanded(path) {
-    return this.devtools.checkIsVmPathExpanded(this.payload.vmItem, path);
+  return index;
+}
+var reTrimStart = /^\s+/;
+function baseTrim(string2) {
+  return string2 ? string2.slice(0, trimmedEndIndex(string2) + 1).replace(reTrimStart, "") : string2;
+}
+var Symbol$1 = root$1.Symbol;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$1.toString;
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
   }
-  handleExpandPropertyClick(path) {
-    this.devtools.handleExpandVmPropertyClick(this.payload.vmItem, path);
+  return result;
+}
+var objectProto = Object.prototype;
+var nativeObjectToString = objectProto.toString;
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
+function baseGetTag(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
   }
-  handleVmItemHeaderClick(vmItem) {
-    this.devtools.handleVmItemHeaderClick(vmItem);
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+function isObjectLike(value) {
+  return value != null && typeof value == "object";
+}
+var symbolTag = "[object Symbol]";
+function isSymbol(value) {
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+}
+var NAN = 0 / 0;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+function toNumber(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
   }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
 }
-class ExtrasItemRenderVM extends ViewModelImpl {
-  devtools = this.payload.devtools;
-  constructor(vmParams) {
-    super(vmParams);
-    makeObservable(this, {
-      handleExpandPropertyClick: action
-    });
+var FUNC_ERROR_TEXT$1 = "Expected a function";
+var nativeMax = Math.max, nativeMin = Math.min;
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT$1);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
   }
-  isPathExpanded(path) {
-    return this.devtools.checkIsExtraPathExpanded(path);
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
   }
-  handleExpandPropertyClick(path) {
-    this.devtools.handleExpandExtraPropertyClick(path);
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
   }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now());
+  }
+  function debounced() {
+    var time = now(), isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
 }
-class DevtoolsClientVM extends ViewModelImpl {
-  devtools = this.payload.devtools;
-  handleToggleOpen = () => {
-    if (this.devtools.isPopupOpened) {
-      this.devtools.hidePopup();
-    } else {
-      this.devtools.showPopup();
+var FUNC_ERROR_TEXT = "Expected a function";
+function throttle(func, wait, options) {
+  var leading = true, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = "leading" in options ? !!options.leading : leading;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    "leading": leading,
+    "maxWait": wait,
+    "trailing": trailing
+  });
+}
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2)) t[p2] = s[p2];
     }
+    return t;
   };
-  handleClosePopupClick = () => {
-    this.devtools.hidePopup();
-  };
-  willMount() {
-    makeObservable(this, {
-      handleToggleOpen: action,
-      handleClosePopupClick: action
-    });
+  return __assign.apply(this, arguments);
+};
+function getElementWindow$1(element) {
+  if (!element || !element.ownerDocument || !element.ownerDocument.defaultView) {
+    return window;
   }
+  return element.ownerDocument.defaultView;
+}
+function getElementDocument$1(element) {
+  if (!element || !element.ownerDocument) {
+    return document;
+  }
+  return element.ownerDocument;
+}
+var getOptions$1 = function(obj) {
+  var initialObj = {};
+  var options = Array.prototype.reduce.call(obj, function(acc, attribute) {
+    var option2 = attribute.name.match(/data-simplebar-(.+)/);
+    if (option2) {
+      var key = option2[1].replace(/\W+(.)/g, function(_15, chr) {
+        return chr.toUpperCase();
+      });
+      switch (attribute.value) {
+        case "true":
+          acc[key] = true;
+          break;
+        case "false":
+          acc[key] = false;
+          break;
+        case void 0:
+          acc[key] = true;
+          break;
+        default:
+          acc[key] = attribute.value;
+      }
+    }
+    return acc;
+  }, initialObj);
+  return options;
+};
+function addClasses$1(el, classes) {
+  var _a2;
+  if (!el)
+    return;
+  (_a2 = el.classList).add.apply(_a2, classes.split(" "));
+}
+function removeClasses$1(el, classes) {
+  if (!el)
+    return;
+  classes.split(" ").forEach(function(className) {
+    el.classList.remove(className);
+  });
+}
+function classNamesToQuery$1(classNames) {
+  return ".".concat(classNames.split(" ").join("."));
+}
+var canUseDOM$1 = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var helpers = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  addClasses: addClasses$1,
+  canUseDOM: canUseDOM$1,
+  classNamesToQuery: classNamesToQuery$1,
+  getElementDocument: getElementDocument$1,
+  getElementWindow: getElementWindow$1,
+  getOptions: getOptions$1,
+  removeClasses: removeClasses$1
+});
+var cachedScrollbarWidth = null;
+var cachedDevicePixelRatio = null;
+if (canUseDOM$1) {
+  window.addEventListener("resize", function() {
+    if (cachedDevicePixelRatio !== window.devicePixelRatio) {
+      cachedDevicePixelRatio = window.devicePixelRatio;
+      cachedScrollbarWidth = null;
+    }
+  });
+}
+function scrollbarWidth() {
+  if (cachedScrollbarWidth === null) {
+    if (typeof document === "undefined") {
+      cachedScrollbarWidth = 0;
+      return cachedScrollbarWidth;
+    }
+    var body = document.body;
+    var box2 = document.createElement("div");
+    box2.classList.add("simplebar-hide-scrollbar");
+    body.appendChild(box2);
+    var width = box2.getBoundingClientRect().right;
+    body.removeChild(box2);
+    cachedScrollbarWidth = width;
+  }
+  return cachedScrollbarWidth;
+}
+var getElementWindow = getElementWindow$1, getElementDocument = getElementDocument$1, getOptions$2 = getOptions$1, addClasses$2 = addClasses$1, removeClasses = removeClasses$1, classNamesToQuery = classNamesToQuery$1;
+var SimpleBarCore = (
+  /** @class */
+  (function() {
+    function SimpleBarCore2(element, options) {
+      if (options === void 0) {
+        options = {};
+      }
+      var _this = this;
+      this.removePreventClickId = null;
+      this.minScrollbarWidth = 20;
+      this.stopScrollDelay = 175;
+      this.isScrolling = false;
+      this.isMouseEntering = false;
+      this.isDragging = false;
+      this.scrollXTicking = false;
+      this.scrollYTicking = false;
+      this.wrapperEl = null;
+      this.contentWrapperEl = null;
+      this.contentEl = null;
+      this.offsetEl = null;
+      this.maskEl = null;
+      this.placeholderEl = null;
+      this.heightAutoObserverWrapperEl = null;
+      this.heightAutoObserverEl = null;
+      this.rtlHelpers = null;
+      this.scrollbarWidth = 0;
+      this.resizeObserver = null;
+      this.mutationObserver = null;
+      this.elStyles = null;
+      this.isRtl = null;
+      this.mouseX = 0;
+      this.mouseY = 0;
+      this.onMouseMove = function() {
+      };
+      this.onWindowResize = function() {
+      };
+      this.onStopScrolling = function() {
+      };
+      this.onMouseEntered = function() {
+      };
+      this.onScroll = function() {
+        var elWindow = getElementWindow(_this.el);
+        if (!_this.scrollXTicking) {
+          elWindow.requestAnimationFrame(_this.scrollX);
+          _this.scrollXTicking = true;
+        }
+        if (!_this.scrollYTicking) {
+          elWindow.requestAnimationFrame(_this.scrollY);
+          _this.scrollYTicking = true;
+        }
+        if (!_this.isScrolling) {
+          _this.isScrolling = true;
+          addClasses$2(_this.el, _this.classNames.scrolling);
+        }
+        _this.showScrollbar("x");
+        _this.showScrollbar("y");
+        _this.onStopScrolling();
+      };
+      this.scrollX = function() {
+        if (_this.axis.x.isOverflowing) {
+          _this.positionScrollbar("x");
+        }
+        _this.scrollXTicking = false;
+      };
+      this.scrollY = function() {
+        if (_this.axis.y.isOverflowing) {
+          _this.positionScrollbar("y");
+        }
+        _this.scrollYTicking = false;
+      };
+      this._onStopScrolling = function() {
+        removeClasses(_this.el, _this.classNames.scrolling);
+        if (_this.options.autoHide) {
+          _this.hideScrollbar("x");
+          _this.hideScrollbar("y");
+        }
+        _this.isScrolling = false;
+      };
+      this.onMouseEnter = function() {
+        if (!_this.isMouseEntering) {
+          addClasses$2(_this.el, _this.classNames.mouseEntered);
+          _this.showScrollbar("x");
+          _this.showScrollbar("y");
+          _this.isMouseEntering = true;
+        }
+        _this.onMouseEntered();
+      };
+      this._onMouseEntered = function() {
+        removeClasses(_this.el, _this.classNames.mouseEntered);
+        if (_this.options.autoHide) {
+          _this.hideScrollbar("x");
+          _this.hideScrollbar("y");
+        }
+        _this.isMouseEntering = false;
+      };
+      this._onMouseMove = function(e) {
+        _this.mouseX = e.clientX;
+        _this.mouseY = e.clientY;
+        if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+          _this.onMouseMoveForAxis("x");
+        }
+        if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+          _this.onMouseMoveForAxis("y");
+        }
+      };
+      this.onMouseLeave = function() {
+        _this.onMouseMove.cancel();
+        if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+          _this.onMouseLeaveForAxis("x");
+        }
+        if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+          _this.onMouseLeaveForAxis("y");
+        }
+        _this.mouseX = -1;
+        _this.mouseY = -1;
+      };
+      this._onWindowResize = function() {
+        _this.scrollbarWidth = _this.getScrollbarWidth();
+        _this.hideNativeScrollbar();
+      };
+      this.onPointerEvent = function(e) {
+        if (!_this.axis.x.track.el || !_this.axis.y.track.el || !_this.axis.x.scrollbar.el || !_this.axis.y.scrollbar.el)
+          return;
+        var isWithinTrackXBounds, isWithinTrackYBounds;
+        _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
+        _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+        if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+          isWithinTrackXBounds = _this.isWithinBounds(_this.axis.x.track.rect);
+        }
+        if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+          isWithinTrackYBounds = _this.isWithinBounds(_this.axis.y.track.rect);
+        }
+        if (isWithinTrackXBounds || isWithinTrackYBounds) {
+          e.stopPropagation();
+          if (e.type === "pointerdown" && e.pointerType !== "touch") {
+            if (isWithinTrackXBounds) {
+              _this.axis.x.scrollbar.rect = _this.axis.x.scrollbar.el.getBoundingClientRect();
+              if (_this.isWithinBounds(_this.axis.x.scrollbar.rect)) {
+                _this.onDragStart(e, "x");
+              } else {
+                _this.onTrackClick(e, "x");
+              }
+            }
+            if (isWithinTrackYBounds) {
+              _this.axis.y.scrollbar.rect = _this.axis.y.scrollbar.el.getBoundingClientRect();
+              if (_this.isWithinBounds(_this.axis.y.scrollbar.rect)) {
+                _this.onDragStart(e, "y");
+              } else {
+                _this.onTrackClick(e, "y");
+              }
+            }
+          }
+        }
+      };
+      this.drag = function(e) {
+        var _a2, _b2, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!_this.draggedAxis || !_this.contentWrapperEl)
+          return;
+        var eventOffset;
+        var track = _this.axis[_this.draggedAxis].track;
+        var trackSize = (_b2 = (_a2 = track.rect) === null || _a2 === void 0 ? void 0 : _a2[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _b2 !== void 0 ? _b2 : 0;
+        var scrollbar = _this.axis[_this.draggedAxis].scrollbar;
+        var contentSize = (_d = (_c = _this.contentWrapperEl) === null || _c === void 0 ? void 0 : _c[_this.axis[_this.draggedAxis].scrollSizeAttr]) !== null && _d !== void 0 ? _d : 0;
+        var hostSize = parseInt((_f = (_e = _this.elStyles) === null || _e === void 0 ? void 0 : _e[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _f !== void 0 ? _f : "0px", 10);
+        e.preventDefault();
+        e.stopPropagation();
+        if (_this.draggedAxis === "y") {
+          eventOffset = e.pageY;
+        } else {
+          eventOffset = e.pageX;
+        }
+        var dragPos = eventOffset - ((_h = (_g = track.rect) === null || _g === void 0 ? void 0 : _g[_this.axis[_this.draggedAxis].offsetAttr]) !== null && _h !== void 0 ? _h : 0) - _this.axis[_this.draggedAxis].dragOffset;
+        dragPos = _this.draggedAxis === "x" && _this.isRtl ? ((_k = (_j = track.rect) === null || _j === void 0 ? void 0 : _j[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _k !== void 0 ? _k : 0) - scrollbar.size - dragPos : dragPos;
+        var dragPerc = dragPos / (trackSize - scrollbar.size);
+        var scrollPos = dragPerc * (contentSize - hostSize);
+        if (_this.draggedAxis === "x" && _this.isRtl) {
+          scrollPos = ((_l = SimpleBarCore2.getRtlHelpers()) === null || _l === void 0 ? void 0 : _l.isScrollingToNegative) ? -scrollPos : scrollPos;
+        }
+        _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollOffsetAttr] = scrollPos;
+      };
+      this.onEndDrag = function(e) {
+        _this.isDragging = false;
+        var elDocument = getElementDocument(_this.el);
+        var elWindow = getElementWindow(_this.el);
+        e.preventDefault();
+        e.stopPropagation();
+        removeClasses(_this.el, _this.classNames.dragging);
+        _this.onStopScrolling();
+        elDocument.removeEventListener("mousemove", _this.drag, true);
+        elDocument.removeEventListener("mouseup", _this.onEndDrag, true);
+        _this.removePreventClickId = elWindow.setTimeout(function() {
+          elDocument.removeEventListener("click", _this.preventClick, true);
+          elDocument.removeEventListener("dblclick", _this.preventClick, true);
+          _this.removePreventClickId = null;
+        });
+      };
+      this.preventClick = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      this.el = element;
+      this.options = __assign(__assign({}, SimpleBarCore2.defaultOptions), options);
+      this.classNames = __assign(__assign({}, SimpleBarCore2.defaultOptions.classNames), options.classNames);
+      this.axis = {
+        x: {
+          scrollOffsetAttr: "scrollLeft",
+          sizeAttr: "width",
+          scrollSizeAttr: "scrollWidth",
+          offsetSizeAttr: "offsetWidth",
+          offsetAttr: "left",
+          overflowAttr: "overflowX",
+          dragOffset: 0,
+          isOverflowing: true,
+          forceVisible: false,
+          track: { size: null, el: null, rect: null, isVisible: false },
+          scrollbar: { size: null, el: null, rect: null, isVisible: false }
+        },
+        y: {
+          scrollOffsetAttr: "scrollTop",
+          sizeAttr: "height",
+          scrollSizeAttr: "scrollHeight",
+          offsetSizeAttr: "offsetHeight",
+          offsetAttr: "top",
+          overflowAttr: "overflowY",
+          dragOffset: 0,
+          isOverflowing: true,
+          forceVisible: false,
+          track: { size: null, el: null, rect: null, isVisible: false },
+          scrollbar: { size: null, el: null, rect: null, isVisible: false }
+        }
+      };
+      if (typeof this.el !== "object" || !this.el.nodeName) {
+        throw new Error("Argument passed to SimpleBar must be an HTML element instead of ".concat(this.el));
+      }
+      this.onMouseMove = throttle(this._onMouseMove, 64);
+      this.onWindowResize = debounce(this._onWindowResize, 64, { leading: true });
+      this.onStopScrolling = debounce(this._onStopScrolling, this.stopScrollDelay);
+      this.onMouseEntered = debounce(this._onMouseEntered, this.stopScrollDelay);
+      this.init();
+    }
+    SimpleBarCore2.getRtlHelpers = function() {
+      if (SimpleBarCore2.rtlHelpers) {
+        return SimpleBarCore2.rtlHelpers;
+      }
+      var dummyDiv = document.createElement("div");
+      dummyDiv.innerHTML = '<div class="simplebar-dummy-scrollbar-size"><div></div></div>';
+      var scrollbarDummyEl = dummyDiv.firstElementChild;
+      var dummyChild = scrollbarDummyEl === null || scrollbarDummyEl === void 0 ? void 0 : scrollbarDummyEl.firstElementChild;
+      if (!dummyChild)
+        return null;
+      document.body.appendChild(scrollbarDummyEl);
+      scrollbarDummyEl.scrollLeft = 0;
+      var dummyContainerOffset = SimpleBarCore2.getOffset(scrollbarDummyEl);
+      var dummyChildOffset = SimpleBarCore2.getOffset(dummyChild);
+      scrollbarDummyEl.scrollLeft = -999;
+      var dummyChildOffsetAfterScroll = SimpleBarCore2.getOffset(dummyChild);
+      document.body.removeChild(scrollbarDummyEl);
+      SimpleBarCore2.rtlHelpers = {
+        // determines if the scrolling is responding with negative values
+        isScrollOriginAtZero: dummyContainerOffset.left !== dummyChildOffset.left,
+        // determines if the origin scrollbar position is inverted or not (positioned on left or right)
+        isScrollingToNegative: dummyChildOffset.left !== dummyChildOffsetAfterScroll.left
+      };
+      return SimpleBarCore2.rtlHelpers;
+    };
+    SimpleBarCore2.prototype.getScrollbarWidth = function() {
+      try {
+        if (this.contentWrapperEl && getComputedStyle(this.contentWrapperEl, "::-webkit-scrollbar").display === "none" || "scrollbarWidth" in document.documentElement.style || "-ms-overflow-style" in document.documentElement.style) {
+          return 0;
+        } else {
+          return scrollbarWidth();
+        }
+      } catch (e) {
+        return scrollbarWidth();
+      }
+    };
+    SimpleBarCore2.getOffset = function(el) {
+      var rect = el.getBoundingClientRect();
+      var elDocument = getElementDocument(el);
+      var elWindow = getElementWindow(el);
+      return {
+        top: rect.top + (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
+        left: rect.left + (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
+      };
+    };
+    SimpleBarCore2.prototype.init = function() {
+      if (canUseDOM$1) {
+        this.initDOM();
+        this.rtlHelpers = SimpleBarCore2.getRtlHelpers();
+        this.scrollbarWidth = this.getScrollbarWidth();
+        this.recalculate();
+        this.initListeners();
+      }
+    };
+    SimpleBarCore2.prototype.initDOM = function() {
+      var _a2, _b2;
+      this.wrapperEl = this.el.querySelector(classNamesToQuery(this.classNames.wrapper));
+      this.contentWrapperEl = this.options.scrollableNode || this.el.querySelector(classNamesToQuery(this.classNames.contentWrapper));
+      this.contentEl = this.options.contentNode || this.el.querySelector(classNamesToQuery(this.classNames.contentEl));
+      this.offsetEl = this.el.querySelector(classNamesToQuery(this.classNames.offset));
+      this.maskEl = this.el.querySelector(classNamesToQuery(this.classNames.mask));
+      this.placeholderEl = this.findChild(this.wrapperEl, classNamesToQuery(this.classNames.placeholder));
+      this.heightAutoObserverWrapperEl = this.el.querySelector(classNamesToQuery(this.classNames.heightAutoObserverWrapperEl));
+      this.heightAutoObserverEl = this.el.querySelector(classNamesToQuery(this.classNames.heightAutoObserverEl));
+      this.axis.x.track.el = this.findChild(this.el, "".concat(classNamesToQuery(this.classNames.track)).concat(classNamesToQuery(this.classNames.horizontal)));
+      this.axis.y.track.el = this.findChild(this.el, "".concat(classNamesToQuery(this.classNames.track)).concat(classNamesToQuery(this.classNames.vertical)));
+      this.axis.x.scrollbar.el = ((_a2 = this.axis.x.track.el) === null || _a2 === void 0 ? void 0 : _a2.querySelector(classNamesToQuery(this.classNames.scrollbar))) || null;
+      this.axis.y.scrollbar.el = ((_b2 = this.axis.y.track.el) === null || _b2 === void 0 ? void 0 : _b2.querySelector(classNamesToQuery(this.classNames.scrollbar))) || null;
+      if (!this.options.autoHide) {
+        addClasses$2(this.axis.x.scrollbar.el, this.classNames.visible);
+        addClasses$2(this.axis.y.scrollbar.el, this.classNames.visible);
+      }
+    };
+    SimpleBarCore2.prototype.initListeners = function() {
+      var _this = this;
+      var _a2;
+      var elWindow = getElementWindow(this.el);
+      this.el.addEventListener("mouseenter", this.onMouseEnter);
+      this.el.addEventListener("pointerdown", this.onPointerEvent, true);
+      this.el.addEventListener("mousemove", this.onMouseMove);
+      this.el.addEventListener("mouseleave", this.onMouseLeave);
+      (_a2 = this.contentWrapperEl) === null || _a2 === void 0 ? void 0 : _a2.addEventListener("scroll", this.onScroll);
+      elWindow.addEventListener("resize", this.onWindowResize);
+      if (!this.contentEl)
+        return;
+      if (window.ResizeObserver) {
+        var resizeObserverStarted_1 = false;
+        var resizeObserver = elWindow.ResizeObserver || ResizeObserver;
+        this.resizeObserver = new resizeObserver(function() {
+          if (!resizeObserverStarted_1)
+            return;
+          elWindow.requestAnimationFrame(function() {
+            _this.recalculate();
+          });
+        });
+        this.resizeObserver.observe(this.el);
+        this.resizeObserver.observe(this.contentEl);
+        elWindow.requestAnimationFrame(function() {
+          resizeObserverStarted_1 = true;
+        });
+      }
+      this.mutationObserver = new elWindow.MutationObserver(function() {
+        elWindow.requestAnimationFrame(function() {
+          _this.recalculate();
+        });
+      });
+      this.mutationObserver.observe(this.contentEl, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    };
+    SimpleBarCore2.prototype.recalculate = function() {
+      if (!this.heightAutoObserverEl || !this.contentEl || !this.contentWrapperEl || !this.wrapperEl || !this.placeholderEl)
+        return;
+      var elWindow = getElementWindow(this.el);
+      this.elStyles = elWindow.getComputedStyle(this.el);
+      this.isRtl = this.elStyles.direction === "rtl";
+      var contentElOffsetWidth = this.contentEl.offsetWidth;
+      var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
+      var isWidthAuto = this.heightAutoObserverEl.offsetWidth <= 1 || contentElOffsetWidth > 0;
+      var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
+      var elOverflowX = this.elStyles.overflowX;
+      var elOverflowY = this.elStyles.overflowY;
+      this.contentEl.style.padding = "".concat(this.elStyles.paddingTop, " ").concat(this.elStyles.paddingRight, " ").concat(this.elStyles.paddingBottom, " ").concat(this.elStyles.paddingLeft);
+      this.wrapperEl.style.margin = "-".concat(this.elStyles.paddingTop, " -").concat(this.elStyles.paddingRight, " -").concat(this.elStyles.paddingBottom, " -").concat(this.elStyles.paddingLeft);
+      var contentElScrollHeight = this.contentEl.scrollHeight;
+      var contentElScrollWidth = this.contentEl.scrollWidth;
+      this.contentWrapperEl.style.height = isHeightAuto ? "auto" : "100%";
+      this.placeholderEl.style.width = isWidthAuto ? "".concat(contentElOffsetWidth || contentElScrollWidth, "px") : "auto";
+      this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
+      var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
+      this.axis.x.isOverflowing = contentElOffsetWidth !== 0 && contentElScrollWidth > contentElOffsetWidth;
+      this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight;
+      this.axis.x.isOverflowing = elOverflowX === "hidden" ? false : this.axis.x.isOverflowing;
+      this.axis.y.isOverflowing = elOverflowY === "hidden" ? false : this.axis.y.isOverflowing;
+      this.axis.x.forceVisible = this.options.forceVisible === "x" || this.options.forceVisible === true;
+      this.axis.y.forceVisible = this.options.forceVisible === "y" || this.options.forceVisible === true;
+      this.hideNativeScrollbar();
+      var offsetForXScrollbar = this.axis.x.isOverflowing ? this.scrollbarWidth : 0;
+      var offsetForYScrollbar = this.axis.y.isOverflowing ? this.scrollbarWidth : 0;
+      this.axis.x.isOverflowing = this.axis.x.isOverflowing && contentElScrollWidth > contentWrapperElOffsetWidth - offsetForYScrollbar;
+      this.axis.y.isOverflowing = this.axis.y.isOverflowing && contentElScrollHeight > contentWrapperElOffsetHeight - offsetForXScrollbar;
+      this.axis.x.scrollbar.size = this.getScrollbarSize("x");
+      this.axis.y.scrollbar.size = this.getScrollbarSize("y");
+      if (this.axis.x.scrollbar.el)
+        this.axis.x.scrollbar.el.style.width = "".concat(this.axis.x.scrollbar.size, "px");
+      if (this.axis.y.scrollbar.el)
+        this.axis.y.scrollbar.el.style.height = "".concat(this.axis.y.scrollbar.size, "px");
+      this.positionScrollbar("x");
+      this.positionScrollbar("y");
+      this.toggleTrackVisibility("x");
+      this.toggleTrackVisibility("y");
+    };
+    SimpleBarCore2.prototype.getScrollbarSize = function(axis) {
+      var _a2, _b2;
+      if (axis === void 0) {
+        axis = "y";
+      }
+      if (!this.axis[axis].isOverflowing || !this.contentEl) {
+        return 0;
+      }
+      var contentSize = this.contentEl[this.axis[axis].scrollSizeAttr];
+      var trackSize = (_b2 = (_a2 = this.axis[axis].track.el) === null || _a2 === void 0 ? void 0 : _a2[this.axis[axis].offsetSizeAttr]) !== null && _b2 !== void 0 ? _b2 : 0;
+      var scrollbarRatio = trackSize / contentSize;
+      var scrollbarSize;
+      scrollbarSize = Math.max(~~(scrollbarRatio * trackSize), this.options.scrollbarMinSize);
+      if (this.options.scrollbarMaxSize) {
+        scrollbarSize = Math.min(scrollbarSize, this.options.scrollbarMaxSize);
+      }
+      return scrollbarSize;
+    };
+    SimpleBarCore2.prototype.positionScrollbar = function(axis) {
+      var _a2, _b2, _c;
+      if (axis === void 0) {
+        axis = "y";
+      }
+      var scrollbar = this.axis[axis].scrollbar;
+      if (!this.axis[axis].isOverflowing || !this.contentWrapperEl || !scrollbar.el || !this.elStyles) {
+        return;
+      }
+      var contentSize = this.contentWrapperEl[this.axis[axis].scrollSizeAttr];
+      var trackSize = ((_a2 = this.axis[axis].track.el) === null || _a2 === void 0 ? void 0 : _a2[this.axis[axis].offsetSizeAttr]) || 0;
+      var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+      var scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+      scrollOffset = axis === "x" && this.isRtl && ((_b2 = SimpleBarCore2.getRtlHelpers()) === null || _b2 === void 0 ? void 0 : _b2.isScrollOriginAtZero) ? -scrollOffset : scrollOffset;
+      if (axis === "x" && this.isRtl) {
+        scrollOffset = ((_c = SimpleBarCore2.getRtlHelpers()) === null || _c === void 0 ? void 0 : _c.isScrollingToNegative) ? scrollOffset : -scrollOffset;
+      }
+      var scrollPourcent = scrollOffset / (contentSize - hostSize);
+      var handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
+      handleOffset = axis === "x" && this.isRtl ? -handleOffset + (trackSize - scrollbar.size) : handleOffset;
+      scrollbar.el.style.transform = axis === "x" ? "translate3d(".concat(handleOffset, "px, 0, 0)") : "translate3d(0, ".concat(handleOffset, "px, 0)");
+    };
+    SimpleBarCore2.prototype.toggleTrackVisibility = function(axis) {
+      if (axis === void 0) {
+        axis = "y";
+      }
+      var track = this.axis[axis].track.el;
+      var scrollbar = this.axis[axis].scrollbar.el;
+      if (!track || !scrollbar || !this.contentWrapperEl)
+        return;
+      if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
+        track.style.visibility = "visible";
+        this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "scroll";
+        this.el.classList.add("".concat(this.classNames.scrollable, "-").concat(axis));
+      } else {
+        track.style.visibility = "hidden";
+        this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "hidden";
+        this.el.classList.remove("".concat(this.classNames.scrollable, "-").concat(axis));
+      }
+      if (this.axis[axis].isOverflowing) {
+        scrollbar.style.display = "block";
+      } else {
+        scrollbar.style.display = "none";
+      }
+    };
+    SimpleBarCore2.prototype.showScrollbar = function(axis) {
+      if (axis === void 0) {
+        axis = "y";
+      }
+      if (this.axis[axis].isOverflowing && !this.axis[axis].scrollbar.isVisible) {
+        addClasses$2(this.axis[axis].scrollbar.el, this.classNames.visible);
+        this.axis[axis].scrollbar.isVisible = true;
+      }
+    };
+    SimpleBarCore2.prototype.hideScrollbar = function(axis) {
+      if (axis === void 0) {
+        axis = "y";
+      }
+      if (this.isDragging)
+        return;
+      if (this.axis[axis].isOverflowing && this.axis[axis].scrollbar.isVisible) {
+        removeClasses(this.axis[axis].scrollbar.el, this.classNames.visible);
+        this.axis[axis].scrollbar.isVisible = false;
+      }
+    };
+    SimpleBarCore2.prototype.hideNativeScrollbar = function() {
+      if (!this.offsetEl)
+        return;
+      this.offsetEl.style[this.isRtl ? "left" : "right"] = this.axis.y.isOverflowing || this.axis.y.forceVisible ? "-".concat(this.scrollbarWidth, "px") : "0px";
+      this.offsetEl.style.bottom = this.axis.x.isOverflowing || this.axis.x.forceVisible ? "-".concat(this.scrollbarWidth, "px") : "0px";
+    };
+    SimpleBarCore2.prototype.onMouseMoveForAxis = function(axis) {
+      if (axis === void 0) {
+        axis = "y";
+      }
+      var currentAxis = this.axis[axis];
+      if (!currentAxis.track.el || !currentAxis.scrollbar.el)
+        return;
+      currentAxis.track.rect = currentAxis.track.el.getBoundingClientRect();
+      currentAxis.scrollbar.rect = currentAxis.scrollbar.el.getBoundingClientRect();
+      if (this.isWithinBounds(currentAxis.track.rect)) {
+        this.showScrollbar(axis);
+        addClasses$2(currentAxis.track.el, this.classNames.hover);
+        if (this.isWithinBounds(currentAxis.scrollbar.rect)) {
+          addClasses$2(currentAxis.scrollbar.el, this.classNames.hover);
+        } else {
+          removeClasses(currentAxis.scrollbar.el, this.classNames.hover);
+        }
+      } else {
+        removeClasses(currentAxis.track.el, this.classNames.hover);
+        if (this.options.autoHide) {
+          this.hideScrollbar(axis);
+        }
+      }
+    };
+    SimpleBarCore2.prototype.onMouseLeaveForAxis = function(axis) {
+      if (axis === void 0) {
+        axis = "y";
+      }
+      removeClasses(this.axis[axis].track.el, this.classNames.hover);
+      removeClasses(this.axis[axis].scrollbar.el, this.classNames.hover);
+      if (this.options.autoHide) {
+        this.hideScrollbar(axis);
+      }
+    };
+    SimpleBarCore2.prototype.onDragStart = function(e, axis) {
+      var _a2;
+      if (axis === void 0) {
+        axis = "y";
+      }
+      this.isDragging = true;
+      var elDocument = getElementDocument(this.el);
+      var elWindow = getElementWindow(this.el);
+      var scrollbar = this.axis[axis].scrollbar;
+      var eventOffset = axis === "y" ? e.pageY : e.pageX;
+      this.axis[axis].dragOffset = eventOffset - (((_a2 = scrollbar.rect) === null || _a2 === void 0 ? void 0 : _a2[this.axis[axis].offsetAttr]) || 0);
+      this.draggedAxis = axis;
+      addClasses$2(this.el, this.classNames.dragging);
+      elDocument.addEventListener("mousemove", this.drag, true);
+      elDocument.addEventListener("mouseup", this.onEndDrag, true);
+      if (this.removePreventClickId === null) {
+        elDocument.addEventListener("click", this.preventClick, true);
+        elDocument.addEventListener("dblclick", this.preventClick, true);
+      } else {
+        elWindow.clearTimeout(this.removePreventClickId);
+        this.removePreventClickId = null;
+      }
+    };
+    SimpleBarCore2.prototype.onTrackClick = function(e, axis) {
+      var _this = this;
+      var _a2, _b2, _c, _d;
+      if (axis === void 0) {
+        axis = "y";
+      }
+      var currentAxis = this.axis[axis];
+      if (!this.options.clickOnTrack || !currentAxis.scrollbar.el || !this.contentWrapperEl)
+        return;
+      e.preventDefault();
+      var elWindow = getElementWindow(this.el);
+      this.axis[axis].scrollbar.rect = currentAxis.scrollbar.el.getBoundingClientRect();
+      var scrollbar = this.axis[axis].scrollbar;
+      var scrollbarOffset = (_b2 = (_a2 = scrollbar.rect) === null || _a2 === void 0 ? void 0 : _a2[this.axis[axis].offsetAttr]) !== null && _b2 !== void 0 ? _b2 : 0;
+      var hostSize = parseInt((_d = (_c = this.elStyles) === null || _c === void 0 ? void 0 : _c[this.axis[axis].sizeAttr]) !== null && _d !== void 0 ? _d : "0px", 10);
+      var scrolled = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+      var t = axis === "y" ? this.mouseY - scrollbarOffset : this.mouseX - scrollbarOffset;
+      var dir = t < 0 ? -1 : 1;
+      var scrollSize = dir === -1 ? scrolled - hostSize : scrolled + hostSize;
+      var speed = 40;
+      var scrollTo = function() {
+        if (!_this.contentWrapperEl)
+          return;
+        if (dir === -1) {
+          if (scrolled > scrollSize) {
+            scrolled -= speed;
+            _this.contentWrapperEl[_this.axis[axis].scrollOffsetAttr] = scrolled;
+            elWindow.requestAnimationFrame(scrollTo);
+          }
+        } else {
+          if (scrolled < scrollSize) {
+            scrolled += speed;
+            _this.contentWrapperEl[_this.axis[axis].scrollOffsetAttr] = scrolled;
+            elWindow.requestAnimationFrame(scrollTo);
+          }
+        }
+      };
+      scrollTo();
+    };
+    SimpleBarCore2.prototype.getContentElement = function() {
+      return this.contentEl;
+    };
+    SimpleBarCore2.prototype.getScrollElement = function() {
+      return this.contentWrapperEl;
+    };
+    SimpleBarCore2.prototype.removeListeners = function() {
+      var elWindow = getElementWindow(this.el);
+      this.el.removeEventListener("mouseenter", this.onMouseEnter);
+      this.el.removeEventListener("pointerdown", this.onPointerEvent, true);
+      this.el.removeEventListener("mousemove", this.onMouseMove);
+      this.el.removeEventListener("mouseleave", this.onMouseLeave);
+      if (this.contentWrapperEl) {
+        this.contentWrapperEl.removeEventListener("scroll", this.onScroll);
+      }
+      elWindow.removeEventListener("resize", this.onWindowResize);
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      this.onMouseMove.cancel();
+      this.onWindowResize.cancel();
+      this.onStopScrolling.cancel();
+      this.onMouseEntered.cancel();
+    };
+    SimpleBarCore2.prototype.unMount = function() {
+      this.removeListeners();
+    };
+    SimpleBarCore2.prototype.isWithinBounds = function(bbox) {
+      return this.mouseX >= bbox.left && this.mouseX <= bbox.left + bbox.width && this.mouseY >= bbox.top && this.mouseY <= bbox.top + bbox.height;
+    };
+    SimpleBarCore2.prototype.findChild = function(el, query) {
+      var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+      return Array.prototype.filter.call(el.children, function(child) {
+        return matches.call(child, query);
+      })[0];
+    };
+    SimpleBarCore2.rtlHelpers = null;
+    SimpleBarCore2.defaultOptions = {
+      forceVisible: false,
+      clickOnTrack: true,
+      scrollbarMinSize: 25,
+      scrollbarMaxSize: 0,
+      ariaLabel: "scrollable content",
+      tabIndex: 0,
+      classNames: {
+        contentEl: "simplebar-content",
+        contentWrapper: "simplebar-content-wrapper",
+        offset: "simplebar-offset",
+        mask: "simplebar-mask",
+        wrapper: "simplebar-wrapper",
+        placeholder: "simplebar-placeholder",
+        scrollbar: "simplebar-scrollbar",
+        track: "simplebar-track",
+        heightAutoObserverWrapperEl: "simplebar-height-auto-observer-wrapper",
+        heightAutoObserverEl: "simplebar-height-auto-observer",
+        visible: "simplebar-visible",
+        horizontal: "simplebar-horizontal",
+        vertical: "simplebar-vertical",
+        hover: "simplebar-hover",
+        dragging: "simplebar-dragging",
+        scrolling: "simplebar-scrolling",
+        scrollable: "simplebar-scrollable",
+        mouseEntered: "simplebar-mouse-entered"
+      },
+      scrollableNode: null,
+      contentNode: null,
+      autoHide: true
+    };
+    SimpleBarCore2.getOptions = getOptions$2;
+    SimpleBarCore2.helpers = helpers;
+    return SimpleBarCore2;
+  })()
+);
+var extendStatics = function(d, b2) {
+  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b3) {
+    d2.__proto__ = b3;
+  } || function(d2, b3) {
+    for (var p2 in b3) if (Object.prototype.hasOwnProperty.call(b3, p2)) d2[p2] = b3[p2];
+  };
+  return extendStatics(d, b2);
+};
+function __extends(d, b2) {
+  if (typeof b2 !== "function" && b2 !== null)
+    throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
+  extendStatics(d, b2);
+  function __() {
+    this.constructor = d;
+  }
+  d.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
+}
+var _a = SimpleBarCore.helpers, getOptions = _a.getOptions, addClasses = _a.addClasses, canUseDOM = _a.canUseDOM;
+var SimpleBar = (
+  /** @class */
+  (function(_super) {
+    __extends(SimpleBar2, _super);
+    function SimpleBar2() {
+      var args = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+      var _this = _super.apply(this, args) || this;
+      SimpleBar2.instances.set(args[0], _this);
+      return _this;
+    }
+    SimpleBar2.initDOMLoadedElements = function() {
+      document.removeEventListener("DOMContentLoaded", this.initDOMLoadedElements);
+      window.removeEventListener("load", this.initDOMLoadedElements);
+      Array.prototype.forEach.call(document.querySelectorAll("[data-simplebar]"), function(el) {
+        if (el.getAttribute("data-simplebar") !== "init" && !SimpleBar2.instances.has(el))
+          new SimpleBar2(el, getOptions(el.attributes));
+      });
+    };
+    SimpleBar2.removeObserver = function() {
+      var _a2;
+      (_a2 = SimpleBar2.globalObserver) === null || _a2 === void 0 ? void 0 : _a2.disconnect();
+    };
+    SimpleBar2.prototype.initDOM = function() {
+      var _this = this;
+      var _a2, _b2, _c;
+      if (!Array.prototype.filter.call(this.el.children, function(child) {
+        return child.classList.contains(_this.classNames.wrapper);
+      }).length) {
+        this.wrapperEl = document.createElement("div");
+        this.contentWrapperEl = document.createElement("div");
+        this.offsetEl = document.createElement("div");
+        this.maskEl = document.createElement("div");
+        this.contentEl = document.createElement("div");
+        this.placeholderEl = document.createElement("div");
+        this.heightAutoObserverWrapperEl = document.createElement("div");
+        this.heightAutoObserverEl = document.createElement("div");
+        addClasses(this.wrapperEl, this.classNames.wrapper);
+        addClasses(this.contentWrapperEl, this.classNames.contentWrapper);
+        addClasses(this.offsetEl, this.classNames.offset);
+        addClasses(this.maskEl, this.classNames.mask);
+        addClasses(this.contentEl, this.classNames.contentEl);
+        addClasses(this.placeholderEl, this.classNames.placeholder);
+        addClasses(this.heightAutoObserverWrapperEl, this.classNames.heightAutoObserverWrapperEl);
+        addClasses(this.heightAutoObserverEl, this.classNames.heightAutoObserverEl);
+        while (this.el.firstChild) {
+          this.contentEl.appendChild(this.el.firstChild);
+        }
+        this.contentWrapperEl.appendChild(this.contentEl);
+        this.offsetEl.appendChild(this.contentWrapperEl);
+        this.maskEl.appendChild(this.offsetEl);
+        this.heightAutoObserverWrapperEl.appendChild(this.heightAutoObserverEl);
+        this.wrapperEl.appendChild(this.heightAutoObserverWrapperEl);
+        this.wrapperEl.appendChild(this.maskEl);
+        this.wrapperEl.appendChild(this.placeholderEl);
+        this.el.appendChild(this.wrapperEl);
+        (_a2 = this.contentWrapperEl) === null || _a2 === void 0 ? void 0 : _a2.setAttribute("tabindex", this.options.tabIndex.toString());
+        (_b2 = this.contentWrapperEl) === null || _b2 === void 0 ? void 0 : _b2.setAttribute("role", "region");
+        (_c = this.contentWrapperEl) === null || _c === void 0 ? void 0 : _c.setAttribute("aria-label", this.options.ariaLabel);
+      }
+      if (!this.axis.x.track.el || !this.axis.y.track.el) {
+        var track = document.createElement("div");
+        var scrollbar = document.createElement("div");
+        addClasses(track, this.classNames.track);
+        addClasses(scrollbar, this.classNames.scrollbar);
+        track.appendChild(scrollbar);
+        this.axis.x.track.el = track.cloneNode(true);
+        addClasses(this.axis.x.track.el, this.classNames.horizontal);
+        this.axis.y.track.el = track.cloneNode(true);
+        addClasses(this.axis.y.track.el, this.classNames.vertical);
+        this.el.appendChild(this.axis.x.track.el);
+        this.el.appendChild(this.axis.y.track.el);
+      }
+      SimpleBarCore.prototype.initDOM.call(this);
+      this.el.setAttribute("data-simplebar", "init");
+    };
+    SimpleBar2.prototype.unMount = function() {
+      SimpleBarCore.prototype.unMount.call(this);
+      SimpleBar2.instances["delete"](this.el);
+    };
+    SimpleBar2.initHtmlApi = function() {
+      this.initDOMLoadedElements = this.initDOMLoadedElements.bind(this);
+      if (typeof MutationObserver !== "undefined") {
+        this.globalObserver = new MutationObserver(SimpleBar2.handleMutations);
+        this.globalObserver.observe(document, { childList: true, subtree: true });
+      }
+      if (document.readyState === "complete" || // @ts-ignore: IE specific
+      document.readyState !== "loading" && !document.documentElement.doScroll) {
+        window.setTimeout(this.initDOMLoadedElements);
+      } else {
+        document.addEventListener("DOMContentLoaded", this.initDOMLoadedElements);
+        window.addEventListener("load", this.initDOMLoadedElements);
+      }
+    };
+    SimpleBar2.handleMutations = function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(addedNode) {
+          if (addedNode.nodeType === 1) {
+            if (addedNode.hasAttribute("data-simplebar")) {
+              !SimpleBar2.instances.has(addedNode) && document.documentElement.contains(addedNode) && new SimpleBar2(addedNode, getOptions(addedNode.attributes));
+            } else {
+              addedNode.querySelectorAll("[data-simplebar]").forEach(function(el) {
+                if (el.getAttribute("data-simplebar") !== "init" && !SimpleBar2.instances.has(el) && document.documentElement.contains(el))
+                  new SimpleBar2(el, getOptions(el.attributes));
+              });
+            }
+          }
+        });
+        mutation.removedNodes.forEach(function(removedNode) {
+          var _a2;
+          if (removedNode.nodeType === 1) {
+            if (removedNode.getAttribute("data-simplebar") === "init") {
+              !document.documentElement.contains(removedNode) && ((_a2 = SimpleBar2.instances.get(removedNode)) === null || _a2 === void 0 ? void 0 : _a2.unMount());
+            } else {
+              Array.prototype.forEach.call(removedNode.querySelectorAll('[data-simplebar="init"]'), function(el) {
+                var _a3;
+                !document.documentElement.contains(el) && ((_a3 = SimpleBar2.instances.get(el)) === null || _a3 === void 0 ? void 0 : _a3.unMount());
+              });
+            }
+          }
+        });
+      });
+    };
+    SimpleBar2.instances = /* @__PURE__ */ new WeakMap();
+    return SimpleBar2;
+  })(SimpleBarCore)
+);
+if (canUseDOM) {
+  SimpleBar.initHtmlApi();
 }
 var client = {};
 var hasRequiredClient;
@@ -31365,110 +32513,6 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
-const TYPE = {
-  Null: "null",
-  Undefined: "undefined",
-  NaN: "nan",
-  Object: "[object Object]",
-  Array: "[object Array]",
-  String: "[object String]",
-  Number: "[object Number]",
-  Boolean: "[object Boolean]",
-  Function: "[object Function]",
-  AsyncFunction: "[object AsyncFunction]",
-  RegExp: "[object RegExp]",
-  Symbol: "[object Symbol]",
-  Infinite: "infinite",
-  Element: "element"
-};
-function getType(value) {
-  if (value === void 0) {
-    return TYPE.Undefined;
-  }
-  if (value === null) {
-    return TYPE.Null;
-  }
-  if (value && (value.nodeType === 1 || value.nodeType === 9)) {
-    return TYPE.Element;
-  }
-  const stringifiedValue = Object.prototype.toString.call(value);
-  if (stringifiedValue === TYPE.Number) {
-    if (Number.isNaN(value)) {
-      return TYPE.NaN;
-    }
-    if (!Number.isFinite(value)) {
-      return TYPE.Infinite;
-    }
-  }
-  return stringifiedValue;
-}
-const createTypeGuard = (...types) => (value) => types.includes(getType(value));
-const isDefined = (value) => value != null;
-const isNull = createTypeGuard(TYPE.Null);
-const isUndefined = createTypeGuard(TYPE.Undefined);
-const isObject = createTypeGuard(TYPE.Object);
-const isArray = createTypeGuard(TYPE.Array);
-const isString = createTypeGuard(TYPE.String);
-const isNumber$1 = createTypeGuard(TYPE.Number);
-const isBoolean = createTypeGuard(TYPE.Boolean);
-const isFunction = createTypeGuard(
-  TYPE.Function,
-  TYPE.AsyncFunction
-);
-const isRegExp = createTypeGuard(TYPE.RegExp);
-const isElement = createTypeGuard(TYPE.Element);
-const isNaN$1 = createTypeGuard(TYPE.NaN);
-const isInfinite = createTypeGuard(TYPE.Infinite);
-const isSymbol = createTypeGuard(TYPE.Symbol);
-const _exports = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  isArray,
-  isBoolean,
-  isDefined,
-  isElement,
-  isFunction,
-  isInfinite,
-  isNaN: isNaN$1,
-  isNull,
-  isNumber: isNumber$1,
-  isObject,
-  isRegExp,
-  isString,
-  isSymbol,
-  isUndefined
-}, Symbol.toStringTag, { value: "Module" }));
-const createRef = (cfg) => {
-  const comparer$1 = cfg?.comparer ?? comparer.default;
-  const ref = (value) => {
-    const nextValue = value ?? null;
-    if (comparer$1(ref.current, nextValue)) {
-      return;
-    }
-    runInAction(() => {
-      ref.current = nextValue;
-      ref.listeners.forEach((listener) => {
-        listener(ref.current);
-      });
-    });
-  };
-  ref.listeners = new Set(cfg?.onChange ? [cfg.onChange] : []);
-  if (cfg?.onSet || cfg?.onUnset) {
-    ref.listeners.add((value) => {
-      if (value) {
-        cfg.onSet?.(value);
-      } else {
-        cfg.onUnset?.();
-      }
-    });
-  }
-  ref.current = cfg?.initial ?? null;
-  ref.meta = cfg?.meta ?? {};
-  makeObservable(ref, {
-    current: observable.ref,
-    meta: observable
-  });
-  return ref;
-};
 var jsxDevRuntime = { exports: {} };
 var reactJsxDevRuntime_development = {};
 var hasRequiredReactJsxDevRuntime_development;
@@ -31884,7 +32928,7 @@ function requireReactJsxDevRuntime_development() {
         }
         return "";
       }
-      var hasOwnProperty = Object.prototype.hasOwnProperty;
+      var hasOwnProperty2 = Object.prototype.hasOwnProperty;
       var loggedTypeFailures = {};
       var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
       function setCurrentlyValidatingElement(element) {
@@ -31900,7 +32944,7 @@ function requireReactJsxDevRuntime_development() {
       }
       function checkPropTypes(typeSpecs, values, location, componentName, element) {
         {
-          var has = Function.call.bind(hasOwnProperty);
+          var has = Function.call.bind(hasOwnProperty2);
           for (var typeSpecName in typeSpecs) {
             if (has(typeSpecs, typeSpecName)) {
               var error$1 = void 0;
@@ -31976,7 +33020,7 @@ function requireReactJsxDevRuntime_development() {
       }
       function hasValidRef(config) {
         {
-          if (hasOwnProperty.call(config, "ref")) {
+          if (hasOwnProperty2.call(config, "ref")) {
             var getter = Object.getOwnPropertyDescriptor(config, "ref").get;
             if (getter && getter.isReactWarning) {
               return false;
@@ -31987,7 +33031,7 @@ function requireReactJsxDevRuntime_development() {
       }
       function hasValidKey(config) {
         {
-          if (hasOwnProperty.call(config, "key")) {
+          if (hasOwnProperty2.call(config, "key")) {
             var getter = Object.getOwnPropertyDescriptor(config, "key").get;
             if (getter && getter.isReactWarning) {
               return false;
@@ -32099,7 +33143,7 @@ function requireReactJsxDevRuntime_development() {
             warnIfStringRefCannotBeAutoConverted(config, self2);
           }
           for (propName in config) {
-            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+            if (hasOwnProperty2.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
               props[propName] = config[propName];
             }
           }
@@ -32331,7 +33375,7 @@ function requireReactJsxDevRuntime_development() {
             }
           }
           {
-            if (hasOwnProperty.call(props, "key")) {
+            if (hasOwnProperty2.call(props, "key")) {
               var componentName = getComponentNameFromType(type);
               var keys = Object.keys(props).filter(function(k2) {
                 return k2 !== "key";
@@ -35334,81 +36378,150 @@ const getDefaultConfig = () => {
 };
 const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 const cx = (...args) => twMerge(clsx(...args));
-const root = "root_Xsw1F";
-const vmButton = "vmButton_Xr1Q6";
-const opened = "opened_gewqL";
-const isConnected = "isConnected_tjs3F";
-const closePopupButton = "closePopupButton_-08HG";
-const vmPopup = "vmPopup_Q4l4j";
-const treeItemHeader = "treeItemHeader_9gR6Q";
-const treeItemLabel = "treeItemLabel_eiMgP";
-const treeItemMetaText = "treeItemMetaText_cmfX0";
-const treeItem = "treeItem_sRXPA";
-const vmTreeItem = "vmTreeItem_t-7jc";
-const extrasItem = "extrasItem_MI9Fa";
-const expandButton = "expandButton_EObqt";
-const expanded = "expanded_uFpb7";
-const disabled = "disabled_IDojS";
-const css$3 = {
-  root,
+const vmButton = "vmButton_esipO";
+const dragging = "dragging_kUMCE";
+const opened = "opened_NYAFW";
+const isConnected = "isConnected_eObxX";
+const css$5 = {
   vmButton,
+  dragging,
   opened,
-  isConnected,
-  closePopupButton,
-  vmPopup,
-  treeItemHeader,
-  treeItemLabel,
-  treeItemMetaText,
-  treeItem,
-  vmTreeItem,
-  extrasItem,
-  expandButton,
-  expanded,
-  disabled
+  isConnected
 };
-const VmDevtoolsButton = observer(() => {
-  const model = useViewModel();
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-    "button",
-    {
-      className: cx(
-        css$3.vmButton,
-        {
-          [css$3.opened]: model.devtools.isPopupOpened,
-          [css$3.isConnected]: model.devtools.isActive
-        },
-        model.devtools.config.buttonClassName
-      ),
-      "data-position": `${model.devtools.config.position}`,
-      onClick: model.handleToggleOpen,
-      children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("img", { src: model.devtools.logoUrl }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
-          lineNumber: 23,
-          columnNumber: 7
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", {}, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
-          lineNumber: 24,
-          columnNumber: 7
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: model.devtools.allVms.length }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
-          lineNumber: 25,
-          columnNumber: 7
-        }, void 0)
-      ]
-    },
-    void 0,
-    true,
-    {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
-      lineNumber: 11,
-      columnNumber: 5
-    },
-    void 0
-  );
-});
+class VmDevtoolsButtonVM extends ViewModelBase {
+  devtools = this.parentViewModel.devtools;
+  ref = createRef({
+    onSet: (node) => {
+      const dragState = {
+        isDragging: false,
+        offsetX: 0,
+        offsetY: 0,
+        hasMoved: false,
+        startX: 0,
+        startY: 0
+      };
+      const { width, height } = node.getBoundingClientRect();
+      node.addEventListener("mousedown", (e) => {
+        dragState.isDragging = true;
+        dragState.hasMoved = false;
+        const rect = node.getBoundingClientRect();
+        dragState.offsetX = rect.left - e.clientX;
+        dragState.offsetY = rect.top - e.clientY;
+        dragState.startX = rect.left;
+        dragState.startY = rect.top;
+        node.classList.add(css$5.dragging);
+      });
+      const handleMouseMove = (e) => {
+        if (!dragState.isDragging) return;
+        let x2 = e.clientX + dragState.offsetX;
+        let y2 = e.clientY + dragState.offsetY;
+        const minX = 12;
+        const minY = 12;
+        const maxX = window.innerWidth - width - 12;
+        const maxY = window.innerHeight - height - 12;
+        if (x2 < minX) {
+          x2 = minX;
+        }
+        if (y2 < minY) {
+          y2 = minY;
+        }
+        if (x2 > maxX) {
+          x2 = maxX;
+        }
+        if (y2 > maxY) {
+          y2 = maxY;
+        }
+        node.style.left = `${x2}px`;
+        node.style.top = `${y2}px`;
+        if (x2 !== dragState.startX || y2 !== dragState.startY) {
+          dragState.hasMoved = true;
+        }
+      };
+      const handleMouseUp = () => {
+        dragState.isDragging = false;
+        node.classList.remove(css$5.dragging);
+        if (this.position !== this.devtools.position) {
+          runInAction(() => {
+            this.devtools.position = this.position;
+          });
+        }
+      };
+      node.addEventListener("click", (e) => {
+        if (dragState.hasMoved) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        this.handleClick();
+      });
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+  });
+  handleClick = () => {
+    if (this.devtools.isPopupOpened) {
+      this.devtools.hidePopup();
+    } else {
+      this.devtools.showPopup();
+    }
+  };
+  get position() {
+    const rect = this.ref.current?.getBoundingClientRect();
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+    const isLeft = (rect?.left ?? 0) < centerX;
+    const isTop = (rect?.top ?? 0) < centerY;
+    if (isTop && isLeft) return "top-left";
+    if (isTop && !isLeft) return "top-right";
+    if (!isTop && isLeft) return "bottom-left";
+    return "bottom-right";
+  }
+}
+const VmDevtoolsButton = withViewModel(
+  VmDevtoolsButtonVM,
+  ({ model }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "button",
+      {
+        className: cx(
+          css$5.vmButton,
+          {
+            [css$5.opened]: model.devtools.isPopupOpened,
+            [css$5.isConnected]: model.devtools.isActive
+          },
+          model.devtools.config.buttonClassName
+        ),
+        ref: model.ref,
+        "data-position": model.devtools.position,
+        children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("img", { src: model.devtools.logoUrl }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
+            lineNumber: 22,
+            columnNumber: 9
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", {}, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
+            lineNumber: 23,
+            columnNumber: 9
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: model.devtools.allVms.length }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
+            lineNumber: 24,
+            columnNumber: 9
+          }, void 0)
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-button/index.tsx",
+        lineNumber: 10,
+        columnNumber: 7
+      },
+      void 0
+    );
+  }
+);
 const ChevronRight = (props) => reactExports.createElement(
   "svg",
   Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
@@ -35434,6 +36547,12 @@ const Xmark = (props) => reactExports.createElement(
   Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
   reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06", clipRule: "evenodd" })
 );
+const vmPopup = "vmPopup_0hkGL";
+const closePopupButton = "closePopupButton_igv9j";
+const css$4 = {
+  vmPopup,
+  closePopupButton
+};
 const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(o, h(t, e)), m = (e) => [...e].sort(((e2, t) => e2 - t)), _14 = "function" == typeof queueMicrotask ? queueMicrotask : (e) => {
   Promise.resolve().then(e);
 }, S = () => {
@@ -35451,21 +36570,21 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
 }, y = (e, t) => {
   const o = e.t[t];
   return -1 === o ? e.o : o;
-}, b = (e, t, o) => {
+}, x = (e, t, o) => {
   const n = -1 === e.t[t];
   return e.t[t] = o, e.i = u(t, e.i), n;
-}, x = (e, t) => {
+}, z = (e, t) => {
   if (!e.l) return 0;
   if (e.i >= t) return e.u[t];
   e.i < 0 && (e.u[0] = 0, e.i = 0);
   let o = e.i, n = e.u[o];
   for (; o < t; ) n += y(e, o), e.u[++o] = n;
   return e.i = t, n;
-}, z = (e, t, o = 0, n = e.l - 1) => {
+}, b = (e, t, o = 0, n = e.l - 1) => {
   for (; o <= n; ) {
     const r2 = v((o + n) / 2);
-    if (x(e, r2) <= t) {
-      if (x(e, r2 + 1) > t) return r2;
+    if (z(e, r2) <= t) {
+      if (z(e, r2 + 1) > t) return r2;
       o = r2 + 1;
     } else n = r2 - 1;
   }
@@ -35476,15 +36595,15 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
 }, k = "undefined" != typeof window, R = () => document.documentElement, T = (e) => e.ownerDocument, M = (e) => e.defaultView, C = /* @__PURE__ */ w((() => !!k && "rtl" === getComputedStyle(R()).direction)), E = /* @__PURE__ */ w((() => !!/iP(hone|od|ad)/.test(navigator.userAgent) || "MacIntel" === navigator.platform && navigator.maxTouchPoints > 0)), H = /* @__PURE__ */ w((() => "scrollBehavior" in R().style)), W = (e) => h(e.h(), e.p()), O = (e, t = 40, o = 0, n, r2 = false) => {
   let i = !!o, s = 1, l = 0, c = 0, f = 0, d = 0, v2 = 0, g2 = 0, _15 = 0, S2 = 0, w2 = a, k2 = [0, i ? h(o - 1, 0) : -1], R2 = 0;
   const T2 = ((e2, t2, o2) => ({ o: o2 ? o2[1] : t2, t: o2 && o2[0] ? $(o2[0].slice(0, u(e2, o2[0].length)), h(0, e2 - o2[0].length)) : $([], e2), l: e2, i: -1, u: $([], e2 + 1) }))(e, t, n), M2 = /* @__PURE__ */ new Set(), C2 = () => f - c, H2 = () => C2() + v2 + d, W2 = (e2, t2) => ((e3, t3, o2, n2) => {
-    if (n2 = u(n2, e3.l - 1), x(e3, n2) <= t3) {
-      const r3 = z(e3, o2, n2);
-      return [z(e3, t3, n2, r3), r3];
+    if (n2 = u(n2, e3.l - 1), z(e3, n2) <= t3) {
+      const r3 = b(e3, o2, n2);
+      return [b(e3, t3, n2, r3), r3];
     }
     {
-      const r3 = z(e3, t3, void 0, n2);
-      return [r3, z(e3, o2, r3)];
+      const r3 = b(e3, t3, void 0, n2);
+      return [r3, b(e3, o2, r3)];
     }
-  })(T2, e2, t2, k2[0]), O2 = () => x(T2, T2.l), B2 = (e2) => x(T2, e2) - v2, J2 = (e2) => y(T2, e2), A2 = (e2, t2 = -1) => T2.t[e2] === t2, L2 = (e2) => {
+  })(T2, e2, t2, k2[0]), O2 = () => z(T2, T2.l), B2 = (e2) => z(T2, e2) - v2, J2 = (e2) => y(T2, e2), A2 = (e2, t2 = -1) => T2.t[e2] === t2, L2 = (e2) => {
     e2 && (E() && 0 !== _15 || w2 && 1 === S2 ? v2 += e2 : d += e2);
   };
   return { v: () => {
@@ -35498,7 +36617,7 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
       r2 || (e2 = h(0, e2), 1 !== _15 && (n2 -= e2), 2 !== _15 && (i2 += e2)), [t2, o2] = k2 = W2(h(0, n2), h(0, i2)), w2 && (t2 = u(t2, w2[0]), o2 = h(o2, w2[1]));
     }
     return [h(t2, 0), u(o2, T2.l - 1)];
-  }, $: () => z(T2, H2()), I: () => z(T2, H2() + l), k: A2, R: B2, T: J2, M: () => T2.l, C: () => f, H: () => 0 !== _15, p: () => l, W: () => c, h: O2, O: () => (g2 = d, d = 0, [g2, 2 === S2]), B: (e2, t2) => {
+  }, $: () => b(T2, H2()), I: () => b(T2, H2() + l), k: A2, R: B2, T: J2, M: () => T2.l, C: () => f, H: () => 0 !== _15, p: () => l, W: () => c, h: O2, O: () => (g2 = d, d = 0, [g2, 2 === S2]), B: (e2, t2) => {
     const o2 = [e2, t2];
     return M2.add(o2), () => {
       M2.delete(o2);
@@ -35524,7 +36643,7 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
         if (!e3.length) break;
         L2(e3.reduce(((e4, [t3, o3]) => ((2 === S2 || (w2 && 1 === S2 ? t3 < w2[0] : B2(t3 + (0 === _15 && 0 === S2 ? 1 : 0)) < C2())) && (e4 += o3 - J2(t3)), e4)), 0));
         for (const [t3, o3] of e3) {
-          const e4 = J2(t3), n3 = b(T2, t3, o3);
+          const e4 = J2(t3), n3 = x(T2, t3, o3);
           r2 && (R2 += n3 ? o3 : o3 - e4);
         }
         r2 && l && R2 > l && (L2(((e4, t3) => {
@@ -35535,7 +36654,7 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
           })), e4.i = -1;
           const r3 = m(n3), i2 = r3.length, s2 = i2 / 2 | 0, l2 = i2 % 2 == 0 ? (r3[s2 - 1] + r3[s2]) / 2 : r3[s2], c2 = e4.o;
           return ((e4.o = l2) - c2) * h(t3 - o3, 0);
-        })(T2, z(T2, H2()))), r2 = false), u2 = 3, n2 = true;
+        })(T2, b(T2, H2()))), r2 = false), u2 = 3, n2 = true;
         break;
       }
       case 4:
@@ -35708,7 +36827,7 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
   const a2 = reactExports.useRef(null);
   G((() => o(a2[U], r2)), [r2]);
   const u2 = reactExports.useMemo((() => {
-    const e = { contain: "layout style", position: l && d ? void 0 : "absolute", [f ? "height" : "width"]: "100%", [f ? "top" : "left"]: 0, [f ? C() ? "right" : "left" : "top"]: s, visibility: !l || d ? "visible" : "hidden" };
+    const e = { contain: "layout style", position: l && d ? void 0 : "absolute", [f ? "height" : "width"]: "100%", [f ? "top" : "left"]: 0, [f ? C() ? "right" : "left" : "top"]: s, visibility: !l || d ? void 0 : "hidden" };
     return f && (e.display = "inline-flex"), e;
   }), [s, l, d, f]);
   return jsxRuntimeExports.jsx(c, "string" == typeof c ? { ref: a2, style: u2, children: t } : { ref: a2, style: u2, index: r2, children: t });
@@ -35720,13 +36839,13 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
   })(e);
   return [(e2) => o[e2], o.length];
 }), [e, t]), te = /* @__PURE__ */ reactExports.forwardRef((({ children: t, data: o, bufferSize: r2, itemSize: i, shift: s, horizontal: f, keepMounted: a2, cache: u2, startMargin: h2 = 0, ssrCount: p2, as: v2 = "div", item: g2 = "div", scrollRef: S2, onScroll: w2, onScrollEnd: $2 }, y2) => {
-  const [b2, x2] = ee(t, o), z2 = reactExports.useRef(null), I2 = reactExports.useRef(!!p2), k2 = Q(w2), R2 = Q($2), [T2, M2, C2, E2] = N((() => {
-    const e = !!f, t2 = O(x2, i, p2, u2, !i);
+  const [x2, z2] = ee(t, o), b2 = reactExports.useRef(null), I2 = reactExports.useRef(!!p2), k2 = Q(w2), R2 = Q($2), [T2, M2, C2, E2] = N((() => {
+    const e = !!f, t2 = O(z2, i, p2, u2, !i);
     return [t2, Y(t2, e), D(t2, e), e];
   }));
-  x2 !== T2.M() && T2.J(5, [x2, s]), h2 !== T2.W() && T2.J(6, h2);
+  z2 !== T2.M() && T2.J(5, [z2, s]), h2 !== T2.W() && T2.J(6, h2);
   const [H2, B2] = reactExports.useReducer(T2.m, void 0, T2.m), J2 = T2.H(), A2 = T2.h(), L2 = [], P = (t2) => {
-    const o2 = b2(t2);
+    const o2 = x2(t2);
     return jsxRuntimeExports.jsx(Z, { ee: M2.F, te: t2, oe: T2.R(t2), ne: T2.k(t2), re: g2, Z: o2, ie: E2, se: I2[U] }, K(o2, t2));
   };
   if (G((() => {
@@ -35742,7 +36861,7 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
     };
     return S2 ? _14((() => {
       S2[U] && e(S2[U]);
-    })) : e(z2[U].parentElement), () => {
+    })) : e(b2[U].parentElement), () => {
       T2.v(), M2.v(), C2.v();
     };
   }), []), G((() => {
@@ -35762,83 +36881,95 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
       L2.push(P(e2));
     }));
   } else for (let [e, t2] = T2.S(r2); e <= t2; e++) L2.push(P(e));
-  return jsxRuntimeExports.jsx(v2, { ref: z2, style: { contain: "size style", overflowAnchor: "none", flex: "none", position: "relative", width: E2 ? A2 : "100%", height: E2 ? "100%" : A2, pointerEvents: J2 ? "none" : void 0 }, children: L2 });
-})), oe = /* @__PURE__ */ reactExports.forwardRef((({ children: t, data: o, bufferSize: r2, itemSize: i, shift: s, horizontal: l, keepMounted: c, reverse: f, cache: d, ssrCount: a2, item: u2, onScroll: h2, onScrollEnd: p2, style: v2, ...g2 }, m2) => {
-  const _15 = reactExports.useRef(null), S2 = f && !l;
-  let w2 = jsxRuntimeExports.jsx(te, { ref: m2, scrollRef: S2 ? _15 : void 0, data: o, bufferSize: r2, itemSize: i, shift: s, horizontal: l, keepMounted: c, cache: d, ssrCount: a2, item: u2, onScroll: h2, onScrollEnd: p2, children: t });
-  return S2 && (w2 = jsxRuntimeExports.jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", minHeight: "100%", overflow: "clip" }, children: w2 })), jsxRuntimeExports.jsx("div", { ref: _15, ...g2, style: { display: l ? "inline-block" : "block", [l ? "overflowX" : "overflowY"]: "auto", contain: "strict", width: "100%", height: "100%", ...v2 }, children: w2 });
+  return jsxRuntimeExports.jsx(v2, { ref: b2, style: { contain: "size style", overflowAnchor: "none", flex: "none", position: "relative", width: E2 ? A2 : "100%", height: E2 ? "100%" : A2, pointerEvents: J2 ? "none" : void 0 }, children: L2 });
 }));
-const iconToggleButton = "iconToggleButton_R48wm";
-const activePosition = "activePosition_IXsRn";
-const option = "option_a5IcR";
-const css$2 = {
-  iconToggleButton,
-  activePosition,
-  option
-};
-const IconToggleButton = ({
-  value,
-  options,
-  className,
-  onUpdate
-}) => {
-  const optionNodes = [];
-  let activeIndex;
-  options.forEach((option2, i) => {
-    const { icon: Icon, value: optionValue } = option2;
-    const isActive = value === optionValue;
-    if (isActive) {
-      activeIndex = i;
+class ListItem {
+  constructor(devtools, key, _data, getChildren, cache) {
+    this.devtools = devtools;
+    this.key = key;
+    this._data = _data;
+    this.getChildren = getChildren;
+    this.cache = cache ?? devtools.anyCache;
+    this.expandKey = `${key}/expand-key`;
+    computed(this, "isExpanded");
+    computed(this, "isFitted");
+    computed(this, "totalChildCount");
+    computed(this, "depthLine");
+    computed(this, "depth");
+    computed.struct(this, "children");
+    computed.struct(this, "expandedChildren");
+    computed.struct(this, "expandedChildrenWithSelf");
+    computed(this, "data");
+    computed(this, "isExpandable");
+    action(this, "expand");
+    action(this, "collapse");
+    makeObservable(this);
+  }
+  cache;
+  get isExpanded() {
+    return this.cache.get(this.expandKey) === true;
+  }
+  get children() {
+    return this.getChildren?.(this) ?? [];
+  }
+  get isExpandable() {
+    return this.children.length > 0;
+  }
+  expand() {
+    if (this.isExpandable) {
+      this.cache.set(this.expandKey, true);
     }
-    optionNodes.push(
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$2.option, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Icon, {}, void 0, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
-        lineNumber: 30,
-        columnNumber: 9
-      }, void 0) }, i, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
-        lineNumber: 29,
-        columnNumber: 7
-      }, void 0)
-    );
-  });
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-    "button",
-    {
-      className: cx(css$2.iconToggleButton, className),
-      onClick: () => {
-        const nextOption = activeIndex !== void 0 && options[activeIndex + 1] || options[0];
-        onUpdate(nextOption.value);
-      },
-      children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          "div",
-          {
-            className: css$2.activePosition,
-            style: { "--index": activeIndex }
-          },
-          void 0,
-          false,
-          {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
-            lineNumber: 44,
-            columnNumber: 7
-          },
-          void 0
-        ),
-        optionNodes
-      ]
-    },
-    void 0,
-    true,
-    {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
-      lineNumber: 36,
-      columnNumber: 5
-    },
-    void 0
-  );
-};
+  }
+  collapse() {
+    this.cache.set(this.expandKey, false);
+  }
+  toggleExpand() {
+    if (this.isExpanded) {
+      this.collapse();
+    } else {
+      this.expand();
+    }
+  }
+  get expandedChildren() {
+    if (!this.isExpanded) {
+      return [];
+    }
+    const result = [];
+    let stackIndex = 0;
+    const stack = this.children;
+    while (true) {
+      const child = stack[stackIndex++];
+      if (!child) {
+        break;
+      }
+      result.push(child, ...child.expandedChildren);
+    }
+    return result;
+  }
+  get expandedChildrenWithSelf() {
+    return [this, ...this.expandedChildren];
+  }
+  get data() {
+    return this._data;
+  }
+  get isFitted() {
+    return true;
+  }
+  get depthLine() {
+    return String().padEnd(this.depth, "-");
+  }
+  expandKey;
+}
+class MetaListItem extends ListItem {
+  constructor(devtools, key, content, _depth) {
+    super(devtools, key, void 0);
+    this.content = content;
+    this._depth = _depth;
+  }
+  get depth() {
+    return this._depth;
+  }
+}
 const ignoredKeys = /* @__PURE__ */ new Set(["constructor"]);
 const ignoredPrototypes = /* @__PURE__ */ new Set([
   globalThis.Object.prototype,
@@ -35892,52 +37023,340 @@ function getAllKeys(instance2) {
   }
   return Array.from(keysSet);
 }
-const ExpandButton = ({
-  expandable: expandable2,
-  expanded: expanded2,
-  onClick,
-  disabled: disabled2,
-  showIconAnyway
+class VMListItem extends ListItem {
+  constructor(devtools, vm, allVms, parent) {
+    const displayName = vm.constructor.name;
+    const key = `${displayName}-${vm.id}`;
+    super(devtools, key, vm, void 0, /* @__PURE__ */ new Map());
+    this.allVms = allVms;
+    this.parent = parent;
+    this.displayName = displayName;
+    this.searchData = {
+      name: displayName.toLowerCase().trim(),
+      id: (vm.id || "").toLowerCase().trim()
+    };
+    computed.struct(this, "childVMListItems");
+    computed.struct(this, "propertyListItems");
+    makeObservable(this);
+    untracked(() => {
+      this.expand();
+    });
+  }
+  get childVMListItems() {
+    return this.allVms.filter((maybeChildVm) => {
+      const params = this.getVmParams(maybeChildVm);
+      return params?.parentViewModel && params.parentViewModel === this.data;
+    }).map((it) => new VMListItem(this.devtools, it, this.allVms, this));
+  }
+  get isFitted() {
+    const { searchEngine } = this.devtools;
+    if (!searchEngine.isActive) {
+      return true;
+    }
+    const firstSegment = searchEngine.segments[0];
+    const secondSegment = searchEngine.segments[1];
+    let isFittedById;
+    let isFittedByName;
+    if (secondSegment) {
+      isFittedById = this.searchData.id === firstSegment;
+      isFittedByName = this.searchData.name === firstSegment;
+    } else {
+      isFittedById = this.searchData.id.startsWith(firstSegment);
+      isFittedByName = this.searchData.name.startsWith(firstSegment);
+    }
+    return isFittedByName || isFittedById;
+  }
+  get propertyListItems() {
+    return getAllKeys(this.data).map((property2, order) => {
+      return PropertyListItem.create(
+        this.devtools,
+        property2,
+        property2,
+        order,
+        this
+      );
+    });
+  }
+  get children() {
+    return [...this.propertyListItems, ...this.childVMListItems];
+  }
+  getVmParams(vm) {
+    if ("vmParams" in vm) {
+      return vm.vmParams;
+    }
+    return null;
+  }
+  get depth() {
+    if (this.parent && this.devtools.presentationMode === "tree") {
+      return this.parent.depth + 1;
+    }
+    return 0;
+  }
+  searchData;
+  displayName;
+}
+class PropertyListItem extends ListItem {
+  constructor(devtools, property2, path, order, parent) {
+    super(devtools, PropertyListItem.createKey(parent, property2), void 0);
+    this.property = property2;
+    this.path = path;
+    this.order = order;
+    this.parent = parent;
+    computed(this, "type");
+    computed(this, "searchData");
+    computed(this, "propertyClosingTag");
+    computed(this, "dataType");
+    computed(this, "stringifiedDataType");
+    computed(this, "extraContent");
+    makeObservable(this);
+  }
+  get data() {
+    return this.property && this.parent.data[this.property];
+  }
+  get dataType() {
+    return typeof this.data;
+  }
+  get stringifiedDataType() {
+    return Object.prototype.toString.call(this.data);
+  }
+  get type() {
+    if (Array.isArray(this.data)) {
+      return "array";
+    }
+    if (_exports.isObject(this.data) && this.data.constructor?.name && this.data.constructor.name !== "Object") {
+      return "instance";
+    } else if (_exports.isFunction(this.data)) {
+      return "function";
+    } else if (_exports.isObject(this.data)) {
+      return "object";
+    } else if (this.stringifiedDataType.startsWith("[object ") && this.data && typeof this.data === "object" && "constructor" in this.data) {
+      return "instance";
+    } else {
+      return "primitive";
+    }
+  }
+  get children() {
+    if (this.type === "array") {
+      const arrayChildItems = Object.keys(this.data).map(
+        (property2, order) => PropertyListItem.create(
+          this.devtools,
+          property2,
+          `${this.path}.${property2}`,
+          order,
+          this
+        )
+      );
+      arrayChildItems.push(
+        PropertyListItem.create(
+          this.devtools,
+          "length",
+          `${this.path}.length`,
+          arrayChildItems.length,
+          this
+        )
+      );
+      return arrayChildItems;
+    }
+    if (this.type === "function") {
+      return Object.keys(this.data).map((property2, order) => {
+        return PropertyListItem.create(
+          this.devtools,
+          property2,
+          `${this.path}.${property2}`,
+          order,
+          this
+        );
+      });
+    }
+    if (this.type === "instance" || this.type === "object") {
+      return getAllKeys(this.data).map((property2, order) => {
+        return PropertyListItem.create(
+          this.devtools,
+          property2,
+          `${this.path}.${property2}`,
+          order,
+          this
+        );
+      });
+    }
+    return [];
+  }
+  get isFitted() {
+    const { searchEngine } = this.devtools;
+    if (!searchEngine.isActive || !this.property) {
+      return true;
+    }
+    return searchEngine.segments.some((it) => it.startsWith(this.property));
+  }
+  get extraContent() {
+    if (this.isExpanded) {
+      return null;
+    }
+    if (this.parent.isExpanded) {
+      if (this.parent instanceof VMListItem) {
+        return ",";
+      }
+      if (this.parent instanceof PropertyListItem)
+        switch (this.parent.type) {
+          case "array":
+          case "instance":
+          case "object":
+            return ",";
+        }
+    }
+    return null;
+  }
+  get propertyClosingTag() {
+    switch (this.type) {
+      case "array":
+        return new MetaListItem(
+          this.devtools,
+          `${this.key}/closing-tag`,
+          "]",
+          this.depth
+        );
+      case "instance":
+      case "object":
+        return new MetaListItem(
+          this.devtools,
+          `${this.key}/closing-tag`,
+          "}",
+          this.depth
+        );
+      default:
+        return null;
+    }
+  }
+  get expandedChildren() {
+    if (!this.isExpanded || !this.isExpandable) {
+      return [];
+    }
+    const result = [];
+    let stackIndex = 0;
+    const stack = this.children;
+    while (true) {
+      const child = stack[stackIndex++];
+      if (!child) {
+        break;
+      }
+      result.push(child, ...child.expandedChildren);
+    }
+    if (this.propertyClosingTag) {
+      result.push(this.propertyClosingTag);
+    }
+    return result;
+  }
+  get depth() {
+    return this.parent.depth + 1;
+  }
+  get searchData() {
+    return {
+      property: this.property?.toLowerCase() || ""
+    };
+  }
+  static createKey(parent, property2) {
+    return `${parent.key}-${property2}`;
+  }
+  static create(devtools, property2, path, order, parent) {
+    const cache = parent.cache ?? devtools.anyCache;
+    const key = `${PropertyListItem.createKey(parent, property2)}/list-item`;
+    let item = cache.get(key);
+    if (!item) {
+      item = new PropertyListItem(devtools, property2, path, order, parent);
+      cache.set(key, item);
+    }
+    return item;
+  }
+}
+const iconToggleButton = "iconToggleButton_R48wm";
+const activePosition = "activePosition_IXsRn";
+const option = "option_a5IcR";
+const active = "active_6QS-2";
+const css$3 = {
+  iconToggleButton,
+  activePosition,
+  option,
+  active
+};
+const IconToggleButton = ({
+  value,
+  options,
+  className,
+  onUpdate
 }) => {
+  const optionNodes = [];
+  let activeIndex;
+  options.forEach((option2, i) => {
+    const { icon: Icon, value: optionValue } = option2;
+    const isActive = value === optionValue;
+    if (isActive) {
+      activeIndex = i;
+    }
+    optionNodes.push(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: cx(css$3.option, {
+        [css$3.active]: isActive
+      }), children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Icon, {}, void 0, false, {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+        lineNumber: 32,
+        columnNumber: 9
+      }, void 0) }, i, false, {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+        lineNumber: 29,
+        columnNumber: 7
+      }, void 0)
+    );
+  });
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-    "span",
+    "button",
     {
-      onClick,
-      className: cx(css$3.expandButton, {
-        [css$3.expandable]: expandable2,
-        [css$3.expanded]: expanded2,
-        [css$3.disabled]: disabled2
-      }),
-      children: (expandable2 || showIconAnyway) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ChevronRight, {}, void 0, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/expand-button.tsx",
-        lineNumber: 27,
-        columnNumber: 42
-      }, void 0)
+      className: cx(css$3.iconToggleButton, className),
+      onClick: () => {
+        const nextOption = activeIndex !== void 0 && options[activeIndex + 1] || options[0];
+        onUpdate(nextOption.value);
+      },
+      children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "div",
+          {
+            className: css$3.activePosition,
+            style: { "--index": activeIndex }
+          },
+          void 0,
+          false,
+          {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+            lineNumber: 46,
+            columnNumber: 7
+          },
+          void 0
+        ),
+        optionNodes
+      ]
     },
     void 0,
-    false,
+    true,
     {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/expand-button.tsx",
-      lineNumber: 19,
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+      lineNumber: 38,
       columnNumber: 5
     },
     void 0
   );
 };
-const property = "property_tyrFk";
-const expandable = "expandable_ZtNTw";
-const instance = "instance_aPKFv";
-const primitive = "primitive_mOPtu";
-const boolean = "boolean_H-c-u";
-const number = "number_Mk-lR";
-const object2 = "object_rbtD2";
-const bigint = "bigint_vEvWZ";
-const symbol = "symbol_izwyn";
-const string = "string_qjuUu";
-const propertyName = "propertyName_gpj0H";
-const propertyMeta = "propertyMeta_xSfkm";
-const propertyValue = "propertyValue_QT-FH";
-const css$1 = {
+const property = "property_Oy4bS";
+const expandable = "expandable_usEY-";
+const instance = "instance_g6xOw";
+const primitive = "primitive_v003s";
+const boolean = "boolean_INujc";
+const number = "number_7K-jw";
+const object2 = "object_3K21J";
+const bigint = "bigint_NCBnp";
+const symbol = "symbol_Nk-vG";
+const string = "string_DCKmP";
+const propertyName = "propertyName_Jbwvb";
+const propertyMeta = "propertyMeta_D04Er";
+const propertyValue = "propertyValue_bht-2";
+const css$2 = {
   property,
   expandable,
   instance,
@@ -35945,802 +37364,756 @@ const css$1 = {
   boolean,
   number,
   object: object2,
-  "undefined": "undefined_xHzJR",
   bigint,
   symbol,
+  "undefined": "undefined_32Xx8",
+  "null": "null_jbJLZ",
   string,
   propertyName,
   propertyMeta,
   propertyValue
 };
-const ArrayProperty = observer((props) => {
-  const { name: property2, value, model, extraRight } = props;
-  const isExpanded = model.isPathExpanded(props.path);
-  const keys = Object.keys(value);
-  const isExpandable = keys.length > 0;
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+const MetaListItemRender = observer(
+  ({ item }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css$1.property, css$1.array, {
-          [css$1.expandable]: isExpandable,
-          [css$1.expanded]: isExpanded
+        className: cx(css$2.property, css$2.primitive),
+        style: { "--level": item.depth },
+        "data-fitted": item.isFitted,
+        title: String(item.data),
+        "data-depth": item.depthLine,
+        children: item.content
+      },
+      void 0,
+      false,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/meta-list-item-render.tsx",
+        lineNumber: 10,
+        columnNumber: 7
+      },
+      void 0
+    );
+  }
+);
+const ArrayProperty = observer(
+  ({ item }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "div",
+      {
+        className: cx(css$2.property, css$2.array, {
+          [css$2.expandable]: item.isExpandable,
+          [css$2.expanded]: item.isExpanded
         }),
-        style: { "--level": props.level, "--order": props.order },
-        onClick: () => model.handleExpandPropertyClick(props.path),
-        "data-fitted": props.isFitted,
-        "data-depth": String().padEnd(props.level, "-"),
+        style: { "--level": item.depth, "--order": item.order },
+        onClick: (e) => item.devtools.handlePropertyClick(item, e),
+        "data-fitted": item.isFitted,
+        "data-depth": item.depthLine,
         children: [
-          property2 === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: property2 }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-              lineNumber: 30,
+          item.property === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyName, children: item.property }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/array.tsx",
+              lineNumber: 24,
               columnNumber: 13
             }, void 0),
             ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-            lineNumber: 29,
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/array.tsx",
+            lineNumber: 23,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: isExpanded ? "[" : isExpandable ? "[...]" : `[]` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-            lineNumber: 34,
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyValue, children: item.isExpanded ? "[" : item.isExpandable ? "[...]" : `[]` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/array.tsx",
+            lineNumber: 28,
             columnNumber: 9
           }, void 0),
-          !isExpanded && extraRight
+          item.extraContent
         ]
       },
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-        lineNumber: 16,
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/array.tsx",
+        lineNumber: 10,
         columnNumber: 7
       },
       void 0
-    ),
-    isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      keys.map((key, order) => /* @__PURE__ */ reactExports.createElement(
-        Property,
-        {
-          ...props,
-          name: key,
-          order,
-          value: value[key],
-          key,
-          path: `${props.path}.${key}`,
-          level: props.level + 1,
-          extraRight: ","
-        }
-      )),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: css$1.property,
-          style: {
-            "--level": props.level,
-            "--order": keys.length
-          },
-          children: [
-            `]`,
-            extraRight
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-          lineNumber: 53,
-          columnNumber: 11
-        },
-        void 0
-      )
-    ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-      lineNumber: 40,
-      columnNumber: 9
-    }, void 0)
-  ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
-    lineNumber: 15,
-    columnNumber: 5
-  }, void 0);
-});
-const FunctionProperty = observer((props) => {
-  const { name: property2, value, extraRight } = props;
-  const argLabels = Array.from(
-    { length: value.length },
-    (_15, i) => `arg${i + 1}`
-  );
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-    "div",
-    {
-      className: cx(css$1.property, css$1.function),
-      title: String(value),
-      style: { "--level": props.level, "--order": props.order },
-      "data-fitted": props.isFitted,
-      "data-depth": String().padEnd(props.level, "-"),
-      children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: property2 }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/function.tsx",
-          lineNumber: 25,
-          columnNumber: 7
-        }, void 0),
-        `(${argLabels.join(", ")})`,
-        extraRight
-      ]
-    },
-    void 0,
-    true,
-    {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/function.tsx",
-      lineNumber: 16,
-      columnNumber: 5
-    },
-    void 0
-  );
-});
-const InstanceProperty = observer((props) => {
-  const { name, value, model, extraRight } = props;
-  const isExpanded = model.isPathExpanded(props.path);
-  const Constructor = value.constructor;
-  const className = Constructor.name;
-  const keys = getAllKeys(value);
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+    );
+  }
+);
+const FunctionProperty = observer(
+  ({ item }) => {
+    const argLabels = Array.from(
+      { length: item.data.length },
+      (_15, i) => `arg${i + 1}`
+    );
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css$1.property, css$1.instance, css$1.expandable, {
-          [css$1.expanded]: isExpanded
+        className: cx(css$2.property, css$2.function),
+        title: String(item.data),
+        style: { "--level": item.depth, "--order": item.order },
+        "data-fitted": item.isFitted,
+        onClick: (e) => item.devtools.handlePropertyClick(item, e),
+        "data-depth": item.depthLine,
+        children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyName, children: item.property }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/function.tsx",
+            lineNumber: 25,
+            columnNumber: 9
+          }, void 0),
+          `(${argLabels.join(", ")})`,
+          item.extraContent
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/function.tsx",
+        lineNumber: 15,
+        columnNumber: 7
+      },
+      void 0
+    );
+  }
+);
+const InstanceProperty = observer(
+  ({ item }) => {
+    const Constructor = item.data.constructor;
+    const className = Constructor.name;
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "div",
+      {
+        className: cx(css$2.property, css$2.instance, css$2.expandable, {
+          [css$2.expanded]: item.isExpanded
         }),
-        style: { "--level": props.level, "--order": props.order },
-        onClick: () => model.handleExpandPropertyClick(props.path),
-        "data-fitted": props.isFitted,
-        "data-depth": String().padEnd(props.level, "-"),
+        style: { "--level": item.depth, "--order": item.order },
+        onClick: (e) => item.devtools.handlePropertyClick(item, e),
+        "data-fitted": item.isFitted,
+        "data-depth": item.depthLine,
         children: [
-          name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-              lineNumber: 32,
+          item.property === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyName, children: item.property }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/instance.tsx",
+              lineNumber: 26,
               columnNumber: 13
             }, void 0),
             ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-            lineNumber: 31,
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/instance.tsx",
+            lineNumber: 25,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: `${className}` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-            lineNumber: 36,
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyValue, children: `${className}` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/instance.tsx",
+            lineNumber: 30,
             columnNumber: 9
           }, void 0),
-          isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+          item.isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
             " ",
             `{`
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-            lineNumber: 37,
-            columnNumber: 24
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/instance.tsx",
+            lineNumber: 31,
+            columnNumber: 29
           }, void 0),
-          !isExpanded && extraRight
+          item.extraContent
         ]
       },
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-        lineNumber: 19,
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/instance.tsx",
+        lineNumber: 13,
         columnNumber: 7
       },
       void 0
-    ),
-    isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      keys.map((key, order) => /* @__PURE__ */ reactExports.createElement(
-        Property,
-        {
-          ...props,
-          name: key,
-          order,
-          value: value[key],
-          key,
-          path: `${props.path}.${key}`,
-          level: props.level + 1,
-          extraRight: `,`
-        }
-      )),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: cx(css$1.property, css$1.instance),
-          style: {
-            "--level": props.level,
-            "--order": keys.length
-          },
-          children: [
-            `}`,
-            extraRight
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-          lineNumber: 54,
-          columnNumber: 11
-        },
-        void 0
-      )
-    ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-      lineNumber: 41,
-      columnNumber: 9
-    }, void 0)
-  ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
-    lineNumber: 18,
-    columnNumber: 5
-  }, void 0);
-});
-const ObjectProperty = observer((props) => {
-  const { name, value, model, extraRight } = props;
-  const isExpanded = model.isPathExpanded(props.path);
-  const keys = getAllKeys(value);
-  const isExpandable = keys.length > 0;
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+    );
+  }
+);
+const ObjectProperty = observer(
+  ({ item }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css$1.property, css$1.object, {
-          [css$1.expandable]: isExpandable,
-          [css$1.expanded]: isExpanded
+        className: cx(css$2.property, css$2.object, {
+          [css$2.expandable]: item.isExpandable,
+          [css$2.expanded]: item.isExpanded
         }),
-        style: { "--level": props.level, "--order": props.order },
-        onClick: () => model.handleExpandPropertyClick(props.path),
-        "data-fitted": props.isFitted,
-        "data-depth": String().padEnd(props.level, "-"),
+        style: { "--level": item.depth, "--order": item.order },
+        onClick: (e) => item.devtools.handlePropertyClick(item, e),
+        "data-fitted": item.isFitted,
+        "data-depth": item.depthLine,
         children: [
-          name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-              lineNumber: 31,
+          item.property === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyName, children: item.property }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/object.tsx",
+              lineNumber: 24,
               columnNumber: 13
             }, void 0),
             ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-            lineNumber: 30,
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/object.tsx",
+            lineNumber: 23,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: isExpanded ? "{" : isExpandable ? "{...}" : `{}` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-            lineNumber: 35,
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyValue, children: item.isExpanded ? "{" : item.isExpandable ? "{...}" : `{}` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/object.tsx",
+            lineNumber: 28,
             columnNumber: 9
           }, void 0),
-          !isExpanded && extraRight
+          item.extraContent
         ]
       },
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-        lineNumber: 17,
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/object.tsx",
+        lineNumber: 10,
         columnNumber: 7
       },
       void 0
-    ),
-    isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      keys.map((key, order, arr) => /* @__PURE__ */ reactExports.createElement(
-        Property,
-        {
-          ...props,
-          name: key,
-          order,
-          value: value[key],
-          key,
-          path: `${props.path}.${key}`,
-          level: props.level + 1,
-          extraRight: ","
-        }
-      )),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: css$1.property,
-          style: {
-            "--level": props.level,
-            "--order": keys.length
-          },
-          children: [
-            `}`,
-            extraRight
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-          lineNumber: 54,
-          columnNumber: 11
-        },
-        void 0
-      )
-    ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-      lineNumber: 41,
-      columnNumber: 9
-    }, void 0)
-  ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
-    lineNumber: 16,
-    columnNumber: 5
-  }, void 0);
-});
-const PrimitiveProperty = observer((props) => {
-  const { name, value, extraRight } = props;
-  const primitiveType = typeof value;
-  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-    "div",
-    {
-      className: cx(css$1.property, css$1.primitive, css$1[primitiveType]),
-      style: { "--level": props.level, "--order": props.order },
-      "data-fitted": props.isFitted,
-      title: String(value),
-      "data-depth": String().padEnd(props.level, "-"),
-      children: [
-        name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
-            lineNumber: 23,
-            columnNumber: 11
-          }, void 0),
-          ": "
-        ] }, void 0, true, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
-          lineNumber: 22,
-          columnNumber: 9
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: primitiveType === "symbol" ? `Symbol(${Symbol.keyFor(value) || ""})` : primitiveType === "string" ? `"${value}"` : `${value}` }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
-          lineNumber: 27,
-          columnNumber: 7
-        }, void 0),
-        extraRight
-      ]
-    },
-    void 0,
-    true,
-    {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
-      lineNumber: 12,
-      columnNumber: 5
-    },
-    void 0
-  );
-});
-const Property = observer((rootProps) => {
-  const { value } = rootProps;
-  const valueType = Object.prototype.toString.call(value);
-  const props = {
-    ...rootProps,
-    value,
-    valueType
-  };
-  if (Array.isArray(value)) {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ArrayProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 36,
-      columnNumber: 12
-    }, void 0);
-  }
-  if (_exports.isObject(value) && value.constructor?.name && value.constructor.name !== "Object") {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(InstanceProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 44,
-      columnNumber: 12
-    }, void 0);
-  } else if (_exports.isFunction(value)) {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FunctionProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 46,
-      columnNumber: 12
-    }, void 0);
-  } else if (_exports.isObject(value)) {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ObjectProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 48,
-      columnNumber: 12
-    }, void 0);
-  } else if (valueType.startsWith("[object ") && value && typeof value === "object" && "constructor" in value) {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(InstanceProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 55,
-      columnNumber: 12
-    }, void 0);
-  } else {
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(PrimitiveProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
-      lineNumber: 57,
-      columnNumber: 12
-    }, void 0);
+    );
   }
-});
-const ExtrasItemRender = withViewModel(
-  ExtrasItemRenderVM,
-  ({ model }) => {
-    const extras = model.payload.extras;
-    const keys = getAllKeys(extras);
-    const depth = 0;
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: cx(css$3.treeItem, css$3.vmTreeItem, css$3.extrasItem),
-          "data-fitted": "true",
-          "data-depth": String().padEnd(depth, "-"),
-          style: { "--level": depth },
-          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { className: css$3.treeItemHeader, children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExpandButton, { showIconAnyway: true, expanded: true }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-              lineNumber: 28,
+);
+const PrimitiveProperty = observer(
+  ({ item }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "div",
+      {
+        className: cx(css$2.property, css$2.primitive, css$2[item.dataType], {
+          [css$2.null]: item.data === null
+        }),
+        style: { "--level": item.depth, "--order": item.order },
+        "data-fitted": item.isFitted,
+        title: String(item.data),
+        onClick: (e) => item.devtools.handlePropertyClick(item, e),
+        "data-depth": item.depthLine,
+        children: [
+          item.property === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyName, children: item.property }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/primitive.tsx",
+              lineNumber: 24,
               columnNumber: 13
             }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css$3.treeItemLabel, children: "Extras" }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-              lineNumber: 29,
-              columnNumber: 13
-            }, void 0)
+            ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-            lineNumber: 27,
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/primitive.tsx",
+            lineNumber: 23,
             columnNumber: 11
-          }, void 0)
-        },
-        void 0,
-        false,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-          lineNumber: 21,
-          columnNumber: 9
-        },
-        void 0
-      ),
-      keys.map((property2, order) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        Property,
-        {
-          model,
-          name: property2,
-          order,
-          value: extras[property2],
-          isFitted: model.devtools.searchEngine.getSearchPropertyResult(
-            { type: "extras", item: extras },
-            property2
-          ),
-          level: depth + 1,
-          path: property2
-        },
-        property2,
-        false,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-          lineNumber: 33,
-          columnNumber: 11
-        },
-        void 0
-      ))
-    ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-      lineNumber: 20,
-      columnNumber: 7
-    }, void 0);
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$2.propertyValue, children: item.dataType === "symbol" ? `Symbol(${Symbol.keyFor(item.data) || ""})` : item.dataType === "string" ? `"${item.data}"` : `${item.data}` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/primitive.tsx",
+            lineNumber: 28,
+            columnNumber: 9
+          }, void 0),
+          item.extraContent
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/primitive.tsx",
+        lineNumber: 10,
+        columnNumber: 7
+      },
+      void 0
+    );
   }
 );
+const PropertyListItemRender = observer(
+  (props) => {
+    switch (props.item.type) {
+      case "array":
+        return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ArrayProperty, { ...props }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/index.tsx",
+          lineNumber: 18,
+          columnNumber: 16
+        }, void 0);
+      case "function":
+        return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FunctionProperty, { ...props }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/index.tsx",
+          lineNumber: 20,
+          columnNumber: 16
+        }, void 0);
+      case "instance":
+        return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(InstanceProperty, { ...props }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/index.tsx",
+          lineNumber: 22,
+          columnNumber: 16
+        }, void 0);
+      case "object":
+        return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ObjectProperty, { ...props }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/index.tsx",
+          lineNumber: 24,
+          columnNumber: 16
+        }, void 0);
+      case "primitive":
+        return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(PrimitiveProperty, { ...props }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/propert-list-item-render/index.tsx",
+          lineNumber: 26,
+          columnNumber: 16
+        }, void 0);
+    }
+  }
+);
+const expandButton = "expandButton_B24E3";
+const expanded = "expanded_8-pD6";
+const disabled = "disabled_MBq1Q";
 const vmContent = "vmContent_TIK57";
 const vmContentHeader = "vmContentHeader_M1JNM";
 const vmContentHeaderLogo = "vmContentHeaderLogo_FRJDO";
 const vmContentHeaderTitle = "vmContentHeaderTitle_lYmde";
+const vmContentHeaderTitleText = "vmContentHeaderTitleText_RlIFH";
 const vmContentControlPanel = "vmContentControlPanel_CgUN9";
 const vmContentControlPanelActions = "vmContentControlPanelActions_lONbA";
 const vmContentInput = "vmContentInput_29GM1";
 const filled = "filled_6JZa0";
-const vmContentTree = "vmContentTree_BETR6";
-const css = {
+const vmContentVirtualized = "vmContentVirtualized_lia62";
+const gradientBlur = "gradientBlur_-y-re";
+const css$1 = {
+  expandButton,
+  expanded,
+  disabled,
   vmContent,
   vmContentHeader,
   vmContentHeaderLogo,
   vmContentHeaderTitle,
+  vmContentHeaderTitleText,
   vmContentControlPanel,
   vmContentControlPanelActions,
   vmContentInput,
   filled,
-  vmContentTree
+  vmContentVirtualized,
+  gradientBlur
 };
-const VmTreeItemRender = withViewModel(
-  VmTreeItemRenderVM,
-  ({ model }) => {
-    const vmItem = model.payload.vmItem;
-    const isExpanded = model.devtools.isExpanded(vmItem);
-    const itemSearchResult = model.devtools.searchEngine.getSearchResult({
-      type: "vm",
-      item: vmItem
-    });
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: cx(css$3.treeItem, css$3.vmTreeItem),
-          "data-fitted": itemSearchResult.isFittedByName || itemSearchResult.isFittedById,
-          "data-depth": String().padEnd(vmItem.depth, "-"),
-          style: { "--level": vmItem.depth },
-          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-            "header",
-            {
-              className: css$3.treeItemHeader,
-              onClick: () => model.handleVmItemHeaderClick(vmItem),
-              children: [
-                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-                  ExpandButton,
-                  {
-                    showIconAnyway: model.devtools.presentationMode === "tree",
-                    expandable: model.devtools.isExpandable(vmItem),
-                    expanded: isExpanded
-                  },
-                  void 0,
-                  false,
-                  {
-                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-                    lineNumber: 34,
-                    columnNumber: 13
-                  },
-                  void 0
-                ),
-                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css$3.treeItemLabel, title: vmItem.displayName, children: vmItem.displayName }, void 0, false, {
-                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-                  lineNumber: 39,
-                  columnNumber: 13
-                }, void 0),
-                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$3.treeItemMetaText, title: vmItem.vm.id, children: vmItem.vm.id }, void 0, false, {
-                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-                  lineNumber: 42,
-                  columnNumber: 13
-                }, void 0)
-              ]
-            },
-            void 0,
-            true,
-            {
+const root = "root_Xsw1F";
+const treeItemHeader = "treeItemHeader_9gR6Q";
+const treeItemLabel = "treeItemLabel_eiMgP";
+const treeItemMetaText = "treeItemMetaText_cmfX0";
+const treeItem = "treeItem_sRXPA";
+const vmTreeItem = "vmTreeItem_t-7jc";
+const extraTreeItem = "extraTreeItem_z3KA1";
+const css = {
+  root,
+  treeItemHeader,
+  treeItemLabel,
+  treeItemMetaText,
+  treeItem,
+  vmTreeItem,
+  extraTreeItem
+};
+const ExpandButton = ({
+  expandable: expandable2,
+  expanded: expanded2,
+  onClick,
+  disabled: disabled2,
+  showIconAnyway
+}) => {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+    "span",
+    {
+      onClick,
+      className: cx(css$1.expandButton, {
+        [css$1.expandable]: expandable2,
+        [css$1.expanded]: expanded2,
+        [css$1.disabled]: disabled2
+      }),
+      children: (expandable2 || showIconAnyway) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ChevronRight, {}, void 0, false, {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/expand-button.tsx",
+        lineNumber: 27,
+        columnNumber: 42
+      }, void 0)
+    },
+    void 0,
+    false,
+    {
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/expand-button.tsx",
+      lineNumber: 19,
+      columnNumber: 5
+    },
+    void 0
+  );
+};
+const VmTreeItemRender = observer(({ item }) => {
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+    "div",
+    {
+      className: cx(css.treeItem, css.vmTreeItem),
+      "data-fitted": item.isFitted,
+      "data-depth": item.depthLine,
+      style: { "--level": item.depth },
+      children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+        "header",
+        {
+          className: css.treeItemHeader,
+          onClick: () => item.devtools.handleVmItemHeaderClick(item),
+          children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+              ExpandButton,
+              {
+                showIconAnyway: item.devtools.presentationMode === "tree",
+                expandable: item.devtools.isExpandable(item),
+                expanded: item.isExpanded
+              },
+              void 0,
+              false,
+              {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
+                lineNumber: 20,
+                columnNumber: 9
+              },
+              void 0
+            ),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css.treeItemLabel, title: item.displayName, children: item.displayName }, void 0, false, {
               fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-              lineNumber: 30,
-              columnNumber: 11
-            },
-            void 0
-          )
+              lineNumber: 25,
+              columnNumber: 9
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.treeItemMetaText, title: item.data.id, children: item.data.id }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
+              lineNumber: 28,
+              columnNumber: 9
+            }, void 0)
+          ]
         },
         void 0,
-        false,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 22,
-          columnNumber: 9
-        },
-        void 0
-      ),
-      vmItem.properties.map((property2, order, arr) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        Property,
-        {
-          model,
-          name: property2,
-          order,
-          value: vmItem.vm[property2],
-          isFitted: model.devtools.searchEngine.getSearchPropertyResult(
-            { type: "vm", item: vmItem },
-            property2
-          ),
-          extraRight: order !== arr.length - 1 && `,`,
-          level: vmItem.depth,
-          path: property2
-        },
-        property2,
-        false,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 48,
-          columnNumber: 11
-        },
-        void 0
-      )),
-      isExpanded && vmItem.children.map((child) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        VmTreeItemRender,
-        {
-          payload: { vmItem: child, devtools: model.devtools }
-        },
-        child.key,
-        false,
+        true,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 65,
-          columnNumber: 13
+          lineNumber: 16,
+          columnNumber: 7
         },
         void 0
-      ))
-    ] }, void 0, true, {
+      )
+    },
+    void 0,
+    false,
+    {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-      lineNumber: 21,
-      columnNumber: 7
-    }, void 0);
+      lineNumber: 10,
+      columnNumber: 5
+    },
+    void 0
+  );
+});
+class ExtraListItem extends ListItem {
+  get isFitted() {
+    const { searchEngine } = this.devtools;
+    if (!searchEngine.isActive) {
+      return true;
+    }
+    const firstSegment = searchEngine.segments[0];
+    const secondSegment = searchEngine.segments[1];
+    let isFittedByName;
+    if (secondSegment) {
+      isFittedByName = this.searchData.name === firstSegment;
+    } else {
+      isFittedByName = this.searchData.name.startsWith(firstSegment);
+    }
+    return isFittedByName;
   }
-);
-const VmDevtoolsContent = observer(
-  ({
-    className,
-    headerContent,
-    ...props
-  }) => {
-    const model = useViewModel();
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { ...props, className: cx(css.vmContent, className), children: [
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { className: css.vmContentHeader, children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          "img",
-          {
-            className: css.vmContentHeaderLogo,
-            src: model.devtools.logoUrl
-          },
-          void 0,
-          false,
-          {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 27,
-            columnNumber: 11
-          },
-          void 0
-        ),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.vmContentHeaderTitle, children: "mobx-view-model devtools" }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 31,
-          columnNumber: 11
-        }, void 0),
-        headerContent
-      ] }, void 0, true, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 26,
-        columnNumber: 9
-      }, void 0),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentControlPanel, children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentControlPanelActions, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          IconToggleButton,
-          {
-            onUpdate: model.devtools.handleChangePresentationMode,
-            options: [
-              {
-                value: "tree",
-                icon: FolderTree
-              },
-              {
-                value: "list",
-                icon: ListUl
-              }
-            ],
-            value: model.devtools.presentationMode
-          },
-          void 0,
-          false,
-          {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 38,
-            columnNumber: 13
-          },
-          void 0
-        ) }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 37,
-          columnNumber: 11
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          "div",
+  get propertyListItems() {
+    return Object.keys(this.data || {}).map((property2, order) => {
+      return PropertyListItem.create(
+        this.devtools,
+        property2,
+        property2,
+        order,
+        this
+      );
+    });
+  }
+  get children() {
+    return [...this.propertyListItems];
+  }
+  get depth() {
+    return 0;
+  }
+  searchData;
+  displayName;
+  constructor(devtools, extras) {
+    const displayName = "Extras";
+    const key = `extra$$$-${displayName}-`;
+    super(devtools, key, extras, void 0, /* @__PURE__ */ new Map());
+    this.displayName = displayName;
+    this.searchData = {
+      name: displayName.toLowerCase().trim()
+    };
+    computed.struct(this, "propertyListItems");
+    makeObservable(this);
+    untracked(() => {
+      this.expand();
+    });
+  }
+}
+const ExtraTreeItemRender = observer(
+  ({ item }) => {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "div",
+      {
+        className: cx(css.treeItem, css.extraTreeItem),
+        "data-fitted": item.isFitted,
+        "data-depth": item.depthLine,
+        style: { "--level": item.depth },
+        children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "header",
           {
-            className: `${css.vmContentInput} ${model.devtools.searchEngine.isActive && css.filled}`,
+            className: css.treeItemHeader,
             children: [
-              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Magnifier, {}, void 0, false, {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 56,
-                columnNumber: 13
-              }, void 0),
               /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-                "input",
+                ExpandButton,
                 {
-                  ref: model.devtools.searchEngine.searchInputRef,
-                  autoFocus: true,
-                  placeholder: "search by property path or ViewModel name"
+                  showIconAnyway: item.devtools.presentationMode === "tree",
+                  expandable: item.isExpandable,
+                  expanded: item.isExpanded
                 },
                 void 0,
                 false,
                 {
-                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                  lineNumber: 57,
-                  columnNumber: 13
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extra-tree-item-render/index.tsx",
+                  lineNumber: 20,
+                  columnNumber: 11
                 },
                 void 0
               ),
-              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.devtools.searchEngine.resetSearch, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Xmark, {}, void 0, false, {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 63,
-                columnNumber: 15
-              }, void 0) }, void 0, false, {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 62,
-                columnNumber: 13
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css.treeItemLabel, title: item.displayName, children: item.displayName }, void 0, false, {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extra-tree-item-render/index.tsx",
+                lineNumber: 25,
+                columnNumber: 11
               }, void 0)
             ]
           },
           void 0,
           true,
           {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 53,
-            columnNumber: 11
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extra-tree-item-render/index.tsx",
+            lineNumber: 17,
+            columnNumber: 9
           },
           void 0
         )
-      ] }, void 0, true, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 36,
-        columnNumber: 9
-      }, void 0),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        oe,
-        {
-          className: css.vmContentTree,
-          ref: model.devtools.scrollListRef,
-          itemSize: 22,
-          children: [
-            model.devtools.vmTree.map((vmItem) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              VmTreeItemRender,
-              {
-                payload: { vmItem, devtools: model.devtools }
-              },
-              vmItem.key,
-              false,
-              {
+      },
+      void 0,
+      false,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extra-tree-item-render/index.tsx",
+        lineNumber: 11,
+        columnNumber: 7
+      },
+      void 0
+    );
+  }
+);
+const VmDevtoolsContent = observer(
+  ({
+    className,
+    headerContent,
+    ...props
+  }) => {
+    const model = useViewModel();
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      "div",
+      {
+        ...props,
+        className: cx(css$1.vmContent, className),
+        ref: model.contentRef,
+        children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { className: css$1.vmContentHeader, children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$1.gradientBlur }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+              lineNumber: 37,
+              columnNumber: 11
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$1.vmContentHeaderTitle, children: [
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                "img",
+                {
+                  className: css$1.vmContentHeaderLogo,
+                  src: model.devtools.logoUrl
+                },
+                void 0,
+                false,
+                {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                  lineNumber: 39,
+                  columnNumber: 13
+                },
+                void 0
+              ),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.vmContentHeaderTitleText, children: "mobx-view-model devtools" }, void 0, false, {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 73,
+                lineNumber: 43,
                 columnNumber: 13
-              },
-              void 0
-            )),
-            !!model.devtools.extras && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              ExtrasItemRender,
-              {
-                payload: {
-                  extras: model.devtools.extras,
-                  devtools: model.devtools
-                }
-              },
-              void 0,
-              false,
-              {
+              }, void 0),
+              headerContent
+            ] }, void 0, true, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+              lineNumber: 38,
+              columnNumber: 11
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$1.vmContentControlPanel, children: [
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$1.vmContentControlPanelActions, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                IconToggleButton,
+                {
+                  onUpdate: model.devtools.handleChangePresentationMode,
+                  options: [
+                    {
+                      value: "tree",
+                      icon: FolderTree
+                    },
+                    {
+                      value: "list",
+                      icon: ListUl
+                    }
+                  ],
+                  value: model.devtools.presentationMode
+                },
+                void 0,
+                false,
+                {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                  lineNumber: 50,
+                  columnNumber: 15
+                },
+                void 0
+              ) }, void 0, false, {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 79,
+                lineNumber: 49,
                 columnNumber: 13
-              },
-              void 0
-            )
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 67,
-          columnNumber: 9
-        },
-        void 0
-      )
-    ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-      lineNumber: 25,
-      columnNumber: 7
-    }, void 0);
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                "div",
+                {
+                  className: `${css$1.vmContentInput} ${model.devtools.searchEngine.isActive && css$1.filled}`,
+                  children: [
+                    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Magnifier, {}, void 0, false, {
+                      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                      lineNumber: 68,
+                      columnNumber: 15
+                    }, void 0),
+                    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                      "input",
+                      {
+                        ref: model.devtools.searchEngine.searchInputRef,
+                        autoFocus: true,
+                        placeholder: "search by property path or ViewModel name"
+                      },
+                      void 0,
+                      false,
+                      {
+                        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                        lineNumber: 69,
+                        columnNumber: 15
+                      },
+                      void 0
+                    ),
+                    /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.devtools.searchEngine.resetSearch, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Xmark, {}, void 0, false, {
+                      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                      lineNumber: 75,
+                      columnNumber: 17
+                    }, void 0) }, void 0, false, {
+                      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                      lineNumber: 74,
+                      columnNumber: 15
+                    }, void 0)
+                  ]
+                },
+                void 0,
+                true,
+                {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                  lineNumber: 65,
+                  columnNumber: 13
+                },
+                void 0
+              )
+            ] }, void 0, true, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+              lineNumber: 48,
+              columnNumber: 11
+            }, void 0)
+          ] }, void 0, true, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+            lineNumber: 36,
+            columnNumber: 9
+          }, void 0),
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$1.vmContentVirtualized, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+            te,
+            {
+              ref: model.devtools.scrollListRef,
+              itemSize: 22,
+              data: model.devtools.listItems,
+              keepMounted: [0],
+              children: (listItem) => {
+                if (listItem instanceof VMListItem) {
+                  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(VmTreeItemRender, { item: listItem }, listItem.key, false, {
+                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                    lineNumber: 89,
+                    columnNumber: 24
+                  }, void 0);
+                }
+                if (listItem instanceof ExtraListItem) {
+                  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExtraTreeItemRender, { item: listItem }, listItem.key, false, {
+                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                    lineNumber: 92,
+                    columnNumber: 24
+                  }, void 0);
+                }
+                if (listItem instanceof PropertyListItem) {
+                  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                    PropertyListItemRender,
+                    {
+                      item: listItem
+                    },
+                    listItem.key,
+                    false,
+                    {
+                      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                      lineNumber: 96,
+                      columnNumber: 19
+                    },
+                    void 0
+                  );
+                }
+                if (listItem instanceof MetaListItem) {
+                  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(MetaListItemRender, { item: listItem }, listItem.key, false, {
+                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                    lineNumber: 104,
+                    columnNumber: 19
+                  }, void 0);
+                }
+                return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, {}, void 0, false, {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                  lineNumber: 108,
+                  columnNumber: 22
+                }, void 0);
+              }
+            },
+            void 0,
+            false,
+            {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+              lineNumber: 81,
+              columnNumber: 11
+            },
+            void 0
+          ) }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+            lineNumber: 80,
+            columnNumber: 9
+          }, void 0)
+        ]
+      },
+      void 0,
+      true,
+      {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+        lineNumber: 31,
+        columnNumber: 7
+      },
+      void 0
+    );
   }
 );
 const VmDevtoolsPopup = observer(() => {
@@ -36748,13 +38121,13 @@ const VmDevtoolsPopup = observer(() => {
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
     VmDevtoolsContent,
     {
-      className: css$3.vmPopup,
-      "data-position": `${model.devtools.config.position}`,
+      className: css$4.vmPopup,
+      "data-position": model.devtools.position,
       headerContent: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "button",
         {
-          className: css$3.closePopupButton,
-          onClick: model.handleClosePopupClick,
+          className: css$4.closePopupButton,
+          onClick: model.devtools.hidePopup,
           children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Xmark, {}, void 0, false, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-popup/index.tsx",
             lineNumber: 20,
@@ -36781,24 +38154,34 @@ const VmDevtoolsPopup = observer(() => {
     void 0
   );
 });
+class DevtoolsClientVM extends ViewModelImpl {
+  devtools = this.payload.devtools;
+  contentRef = createRef({
+    meta: { scrollbar: null },
+    onSet(node) {
+      const scrollbar = new SimpleBar(node);
+      this.meta = { scrollbar };
+    }
+  });
+}
 const DevtoolsClient = withViewModel(DevtoolsClientVM, ({ model }) => {
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ViewModelsProvider, { value: model.devtools.vmStore, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ActiveViewModelProvider, { value: model, children: [
     /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(VmDevtoolsButton, {}, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client/index.tsx",
       lineNumber: 14,
       columnNumber: 9
     }, void 0),
     model.devtools.isPopupOpened && model.devtools.displayType === "popup" && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(VmDevtoolsPopup, {}, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client/index.tsx",
       lineNumber: 16,
       columnNumber: 53
     }, void 0)
   ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client.tsx",
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client/index.tsx",
     lineNumber: 13,
     columnNumber: 7
   }, void 0) }, void 0, false, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client.tsx",
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-client/index.tsx",
     lineNumber: 12,
     columnNumber: 5
   }, void 0);
@@ -36831,8 +38214,10 @@ let KeyboardHandler$1 = class KeyboardHandler {
     };
     this.isActivated = !!(this.activateStrategy.type === "immidiately");
     observable.ref(this, "isActivated");
+    observable.ref(this, "localActions");
     computed.struct(this, "actions");
     action.bound(this, "handleKeyboardClick");
+    action.bound(this, "setActions");
     makeObservable(this);
     if (this.activateStrategy.type === "element-focus") {
       const ref = this.activateStrategy.ref;
@@ -36874,6 +38259,7 @@ let KeyboardHandler$1 = class KeyboardHandler {
   }
   abortController;
   activateStrategy;
+  localActions;
   /**
    * Is user using keyboard input
    */
@@ -36882,7 +38268,11 @@ let KeyboardHandler$1 = class KeyboardHandler {
    * User actions
    */
   get actions() {
-    return callFunction(this.config.actions) ?? [];
+    const usingActions = this.localActions ?? this.config.actions;
+    return callFunction(usingActions) ?? [];
+  }
+  setActions(actions) {
+    this.localActions = actions;
   }
   activate = () => {
     if (this.isActivated) {
@@ -36906,16 +38296,16 @@ let KeyboardHandler$1 = class KeyboardHandler {
     if (!this.isActivated) {
       return;
     }
-    for (const action2 of this.actions) {
+    for (let i = 0; i < this.actions.length; i++) {
+      const action2 = this.actions[i];
       const disabled2 = callFunction(action2.disabled);
       if (disabled2) {
         continue;
       }
-      for (const shortcut of action2.shortcuts) {
-        const combinatedShortcuts = shortcut.split("+");
-        if (combinatedShortcuts.every(
-          (shortcut2) => this.checkShortcut(event, shortcut2)
-        )) {
+      for (let j = 0; j < action2.shortcuts.length; j++) {
+        const shortcut = action2.shortcuts[j];
+        const keys = shortcut.split("+");
+        if (keys.every((key) => this.checkKey(event, key))) {
           runInAction(() => {
             action2.action(event);
           });
@@ -36924,11 +38314,13 @@ let KeyboardHandler$1 = class KeyboardHandler {
       }
     }
   }
-  checkShortcut(event, shortcut) {
-    if (shortcut === "Shift" && event.shiftKey) return true;
-    if (shortcut === "Ctrl" && event.ctrlKey) return true;
-    if (shortcut === "Alt" && event.altKey) return true;
-    return shortcut === event.key;
+  checkKey(event, key) {
+    if (key === "Shift" && event.shiftKey) return true;
+    if ((key === "Ctrl" || key === "Control") && event.ctrlKey) return true;
+    if (key === "Alt" && event.altKey) return true;
+    if ((key === "Windows" || key === "Meta" || key === "Command" || key === "⌘" || key === "Win") && event.metaKey)
+      return true;
+    return key === event.key || key === event.code;
   }
   destroy() {
     this.abortController.abort();
@@ -36976,20 +38368,28 @@ class KeyboardHandler2 extends KeyboardHandler$1 {
         },
         {
           shortcuts: ["Ctrl+ArrowDown", "PageDown"],
-          action: () => {
+          action: (e) => {
             if (!devtools.scrollListRef.current) return;
             devtools.scrollListRef.current.scrollTo(
               devtools.scrollListRef.current.scrollOffset + 400
             );
+            if (devtools.searchEngine.searchInputRef.meta.focused) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
           }
         },
         {
           shortcuts: ["Ctrl+ArrowUp", "PageUp"],
-          action: () => {
+          action: (e) => {
             if (!devtools.scrollListRef.current) return;
             devtools.scrollListRef.current.scrollTo(
               devtools.scrollListRef.current.scrollOffset - 400
             );
+            if (devtools.searchEngine.searchInputRef.meta.focused) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
           }
         }
       ]
@@ -37014,33 +38414,25 @@ class ViewModelStoreImpl extends ViewModelStoreBase {
   }
 }
 const createFocusableRef = (cfg) => {
-  const handleFocus = action(() => {
-    ref.meta.focused = true;
-  });
-  const handleBlur = action(() => {
-    ref.meta.focused = false;
-  });
-  let lastNode;
+  const refreshFocused = () => {
+    runInAction(() => {
+      ref.meta.focused = document.activeElement === ref.current;
+    });
+  };
   const ref = createRef({
     meta: {
       focused: false
     },
-    onSet: (node) => {
-      if (document.activeElement === node) {
-        runInAction(() => {
-          ref.meta.focused = true;
-        });
-      }
-      node.addEventListener("focus", handleFocus);
-      node.addEventListener("blur", handleBlur);
-      cfg?.onSet?.(node);
-      lastNode = node;
+    onSet: (curr, prev) => {
+      refreshFocused();
+      curr.addEventListener("focus", refreshFocused, true);
+      curr.addEventListener("blur", refreshFocused, true);
+      cfg?.onSet?.(curr, prev);
     },
-    onUnset: () => {
-      cfg?.onUnset?.();
-      lastNode?.removeEventListener("focus", handleFocus);
-      lastNode?.removeEventListener("blur", handleBlur);
-      lastNode = void 0;
+    onUnset: (last) => {
+      cfg?.onUnset?.(last);
+      last?.removeEventListener("focus", refreshFocused, true);
+      last?.removeEventListener("blur", refreshFocused, true);
     }
   });
   return ref;
@@ -37052,105 +38444,9 @@ class SearchEngine {
   formattedSearchText;
   searchTextUpdateTimeout;
   segments = [];
-  get cache() {
-    this.fittedVmIds.clear();
-    this.formattedSearchText;
-    return /* @__PURE__ */ new Map();
-  }
   get isActive() {
     return !!this.formattedSearchText;
   }
-  defaultSearchResult = {
-    isFitted: true,
-    isFittedByName: true,
-    fittedProperties: [],
-    fittedPath: []
-  };
-  getSearchResult(input) {
-    if (!this.isActive) {
-      return this.defaultSearchResult;
-    }
-    if (input.type === "extras") {
-      return this.defaultSearchResult;
-    }
-    const { item } = input;
-    if (this.cache.has(item.key)) {
-      return this.cache.get(item.key);
-    }
-    if (!this.segments.length) {
-      return this.defaultSearchResult;
-    }
-    const isFittedByProperty = false;
-    let fittedProperties = [];
-    const firstSegment = this.segments[0];
-    const secondSegment = this.segments[1];
-    let propSegmentsToCheck = [];
-    let isFittedById;
-    let isFittedByName;
-    let isFittedAllProperties;
-    if (secondSegment) {
-      isFittedById = item.searchData.id === firstSegment;
-      isFittedByName = item.searchData.name === firstSegment;
-      if (isFittedById || isFittedByName) {
-        propSegmentsToCheck = [secondSegment];
-      } else {
-        propSegmentsToCheck = [firstSegment];
-      }
-    } else {
-      isFittedById = item.searchData.id.startsWith(firstSegment);
-      isFittedByName = item.searchData.name.startsWith(firstSegment);
-      if (!isFittedById && !isFittedByName) {
-        propSegmentsToCheck = [firstSegment];
-      }
-    }
-    if (item.vm.id && isFittedById) {
-      this.fittedVmIds.add(item.vm.id);
-    }
-    const isFittedByPropertyPath = false;
-    let fullFittedProperty;
-    if (propSegmentsToCheck.length) {
-      item.properties.forEach((origProperty) => {
-        const property2 = origProperty.toLowerCase();
-        for (const segment of propSegmentsToCheck) {
-          const isFullFitted = property2 === segment;
-          if (isFullFitted) {
-            fullFittedProperty = property2;
-            fittedProperties.push(origProperty);
-            return;
-          }
-          const isFittedProperty = !!segment && property2.startsWith(segment);
-          if (isFittedProperty) {
-            fittedProperties.push(origProperty);
-          }
-        }
-      });
-    } else {
-      fittedProperties = item.properties;
-      isFittedAllProperties = true;
-    }
-    const isFitted = isFittedByName || isFittedById || isFittedByProperty || isFittedByPropertyPath;
-    this.cache.set(item.key, {
-      isFitted,
-      isFittedById,
-      isFittedByName,
-      isFittedByPropertyPath,
-      fittedProperties,
-      fullFittedProperty,
-      isFittedAllProperties,
-      fittedPath: this.segments
-    });
-    return this.cache.get(item.key);
-  }
-  getSearchPropertyResult(input, property2) {
-    if (!this.isActive) {
-      return true;
-    }
-    const searchResult = this.getSearchResult(input);
-    if (input.type === "vm" && searchResult.isFittedAllProperties && input.item.vm.id && !this.fittedVmIds.has(input.item.vm.id)) {
-      return false;
-    }
-    return searchResult.fittedProperties.includes(property2);
-  }
   setSearchText(searchText) {
     this.rawSearchText = searchText;
     this.formattedSearchText = searchText.toLowerCase().trim();
@@ -37158,7 +38454,6 @@ class SearchEngine {
     if (!this.formattedSearchText) {
       return;
     }
-    const segments = this.segments;
     let startWithNextSegment = true;
     for (let i = 0; i < searchText.length; ) {
       const char = searchText[i];
@@ -37176,11 +38471,11 @@ class SearchEngine {
         continue;
       }
       if (startWithNextSegment) {
-        segments.push("");
+        this.segments.push("");
         startWithNextSegment = false;
       }
-      const lastIndex = segments.length - 1;
-      segments[lastIndex] += char.toLowerCase();
+      const lastIndex = this.segments.length - 1;
+      this.segments[lastIndex] += char.toLowerCase();
       i++;
     }
   }
@@ -37210,7 +38505,7 @@ class SearchEngine {
       rawSearchText: observable.ref,
       formattedSearchText: observable.ref,
       isActive: computed,
-      cache: computed,
+      segments: observable,
       setSearchText: action.bound
     });
   }
@@ -37220,36 +38515,35 @@ class ViewModelDevtools {
     this.config = config;
     this.isPopupOpened = !!this.config.defaultIsOpened;
     this.displayType = "popup";
+    this.position = this.config.position ?? "top-right";
     this.vmStore = new ViewModelStoreImpl();
     this.setExtras(this.config.extras);
     this.setStore(this.config.viewModels);
-    this.expandedVmsMap = observable.map();
     this.presentationMode = "tree";
     this.expandedVmItemsPaths = observable.set();
     this.logoUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACTFBMVEUvEQFCGQIuEQFAGALpZhjoZhlgJANAGALrZhiAMAR1KwNKHAJXIAM4FQFsKgWUNgL09PYvEQCgPARoJwNRHgL////U0dCoSRGSPgzFTQljKwl5MggjDQHm5ORWsU2JNATWWBC4SQxsMQysQAX6+vra2NbMUQtRJQxWLgu/SAXf3t62tLOyr6zCbTecSxmyQQLIxcDAvbqbmZaVeWeKc2WgRBB/OhCMOQu4QwPt7e/DuLCYz5NoOB2tqqdsaGVhW1NagUJtTjtkYCe8XyaRRRiHRRTi29XKyMfr0cG2p5yag3JfVElMR0GfcjBVMx/KWRnoYxXdXhRzQBB0OA3n6OrOzM2npKPLq5frs5TUpo2umounkHp3cm6mgWqBbGB8aVZzYVBXnktWT0eYY0BYZzOGazGmWi3IYid1QSOxTxZYSBQ6IBFFJA6lPAP/8uvR2s3qybbSwLW8q6G3nYigm4B8fHvxonW9kXWSjGhrgl5vZlpZqk+ZdE5cjE16fkzuh0q9eUetcUKAWEBpdj90bjg/PDfteDRZdTGwaS6sYCljVCl2TCflbCJZYSKlVSJfRh/dZB2OWR1nRhFfNRHO48zo1crjwamuv5SfqpSXtpGro4bEm4SMhoGFu3yQlHqFf3l5tHKtjHCFe2ageWLSimBnYFuue1hYlk1uikCCYT5XijqRWjdNPTLRcS5VVCC7WB3WYBtsTRYmHBNYPxLA3bzwv6LVsZ+4tJyQxYqHqHvVlnJzn2uegF39l1t1oEiKjzyAdjpeRDShaClCLR/JXT/FAAAABnRSTlP7uLgrtivDuZKUAAAElElEQVQ4yyWURXsbMRRFpyRF0vCM2a6ZmWPXYWqwTVKGMDRNUmZmZmZmZub+scrp3bzN+e65q8dMmQwBwqwKnLZTNrsVDW/Y8P3AgRJPKcK8ykHIMZOmMJMgAYAlimCwGQRsHdHpayOv2tsN4wJmIZTMEiSTGMgRQoCC/B5ZAYIu/fylIthsBlkAHCeZKaNChuE4yKkA2w2IAKtdhyNpWY76ZUwkFZkIUFmeNTPU6vUadSMOOg2htNWURRhRkwQBr9OlHXQNYTipbVHZ6tX5JiPGKgsgUBQWUgckMDX/woIFC+uwzEhcWz43J6ANVgEC+dpIrcJyEp8+MeR4k4hpz696PyTIdBMZ+jAv0RBqGXPUZkw1YT0AEtCFw/3NiVgiVbWMR5hCJnnZs5uB+PoeB4pk9OFaoM9adTVDXeXzGm7+9fI8AIwEsiwBV12BYIWZmCL6DIBGozGt8+6vCLmbOp8e0vF0uMKzrH7hnHii3GyGpgjiOcLr9QDubwlaFj3d9oD6GcIqQM1enVO25FobqD1x2IQIp/KAjPUtabCs7e/fHR7hGQAUDqKN4rz9fb/XrJrf76gzcuqexsY91xJaS2Pq7oNdNVaGZ4kElaWituXNaF50b3p8uoN451m02y6VaS1rkksXbwybGMJBSMBSSy5YPtqUs6zbse816HHn8jsuB91zGpNNi2/vyjAsYGmSWm080VblFj9WV589eylnSR7ZnHDnGrvvbNq2K8JgwALCJhtCFVsKjnwgftLnexsKxE4uHyiPB9ZV79s3uHuYwbSKA3e1oeYWn3GxO17lW34kblnke7F5SVCb8lUf6aibxSgYEAhS2mDfs1GuKqa98WLghltb5Tv+dX1obtdY5YBD384gpAIWbmkI9TR7Ve+awMrNe1eK1Hbw1voQbTr46PSrEsaOAVak+7F8d/OYz5sMiJc/uzQXB45Xfpo719L0tvrn85ISxmYFkFe7YmXdPaNecHSueO6cRrzV++TJDFF0rVt+pvVYEbIDs0RS2rKKLW2s0bgoJ7o077ZunT59hkajuXKm82XJBKRAs5R0l/VVnOWNxscB0eW63jt9AnJd6ch6JiCnwkJzyhJqqSjwDkdHXnSt3P7wPyQuNgkTkB1jOryrPth8v+Do7Oz8Vl+/6eD2CZ1LXKsXxtsp5EQAQph0B8vLl2FTpq7u6NEzxysfFiHRchsjq392CQN4IJkLa93xJd0Zkykbqct0vK6urOwtNlmWYgVFKQQh6yvsnl8fu0OLsD4dOXF6cO/eyu2910WNuGDnvfApqlPUwoYFq2bWr97D026driZ8uHVw8NeORz8uipoVK1wrdhZ1oHDvy8KF8zfqMUZpnW54uKbm8KFDf1pbWy+cn0lThFSWEG/WaOQF2SrbnbJ9Fo3H4xnJoKzDaNJTG90kQcIKCAAcLaVxGuz0B/k9HpssOJ0I20uKEGOGHCsIPAAoGnU6x52lfkPU7zfMNsjRUsFqmIAmmzmJIISBCpAgO6OCMC7T47H5BdqP2ikzlb5DxswBjAAhvFX2+2UrRgIyHDtwzGMoFexFZto/HbAJBdFwHOYAAAAASUVORK5CYII=";
-    this.inputRef = createFocusableRef();
     this.scrollContentRef = createRef();
     this.scrollListRef = createRef();
     this.keyboardHandler = new KeyboardHandler2(this);
     this.searchEngine = new SearchEngine();
     makeObservable(this, {
+      position: observable.ref,
       isPopupOpened: observable.ref,
       projectVmStore: observable.ref,
       presentationMode: observable.ref,
       extras: observable.ref,
-      setStore: action,
-      setExtras: action,
-      showPopup: action,
-      hidePopup: action,
-      handleChangePresentationMode: action,
-      handleExpandVmPropertyClick: action,
-      expandAllVMs: action,
-      collapseAllVms: action,
-      handleExpandExtraPropertyClick: action,
-      allVms: computed.struct,
+      setStore: action.bound,
+      setExtras: action.bound,
+      showPopup: action.bound,
+      hidePopup: action.bound,
+      handleChangePresentationMode: action.bound,
+      handleExpandVmPropertyClick: action.bound,
+      expandAllVMs: action.bound,
+      collapseAllVms: action.bound,
+      handleExpandExtraPropertyClick: action.bound,
       isActive: computed,
-      vmsData: computed.struct,
-      rootVms: computed.struct
+      rootVmListItems: computed.struct,
+      extraListItems: computed.struct
     });
     this.render();
   }
@@ -37260,13 +38554,13 @@ class ViewModelDevtools {
   extras;
   expandedVmItemsPaths;
   logoUrl;
-  inputRef;
   scrollContentRef;
   keyboardHandler;
   searchEngine;
   presentationMode;
-  expandedVmsMap;
+  position;
   scrollListRef;
+  anyCache = observable.map();
   autoscrollTimeout;
   get allVms() {
     const vmStore = this.projectVmStore;
@@ -37275,65 +38569,23 @@ class ViewModelDevtools {
       (vm) => !ViewModelImpl.isPrototypeOf(vm.constructor)
     );
   }
-  get rootVms() {
+  get rootVmListItems() {
     return this.allVms.filter((vm) => {
       const vmParams = this.getVmParams(vm);
       return !vmParams || vmParams.parentViewModel == null;
-    });
+    }).map((vm) => new VMListItem(this, vm, this.allVms));
   }
-  get vmsData() {
-    const flatten = [];
-    const tree = [];
-    const createTreeItem = (vm, inputDepth) => {
-      const depth = this.presentationMode === "list" ? 0 : inputDepth;
-      const alreadyExistVmTreeItem = flatten.find((it) => it.vm === vm);
-      if (alreadyExistVmTreeItem) {
-        return alreadyExistVmTreeItem;
-      }
-      const vmParams = this.getVmParams(vm);
-      const parentVm = vmParams?.parentViewModel || null;
-      const displayName = vm.constructor.name;
-      const treeItem2 = {
-        parent: parentVm ? createTreeItem(parentVm, depth - 1) : null,
-        vm,
-        displayName,
-        children: [],
-        depth,
-        key: `${displayName}-${vm.id}-${depth}`,
-        properties: getAllKeys(vm),
-        searchData: {
-          name: displayName.toLowerCase().trim(),
-          id: (vm.id || "").toLowerCase().trim()
-        }
-      };
-      untracked(() => {
-        if (!this.expandedVmsMap.has(treeItem2.key)) {
-          runInAction(() => {
-            this.expandedVmsMap.set(treeItem2.key, true);
-          });
-        }
-      });
-      flatten.push(treeItem2);
-      const collectedChildren = this.allVms.filter((maybeChildVm) => {
-        const params = this.getVmParams(maybeChildVm);
-        return params?.parentViewModel && params.parentViewModel === vm;
-      }).map((childVm) => createTreeItem(childVm, depth + 1)).filter((it) => Boolean(it));
-      treeItem2.children.push(...collectedChildren);
-      return treeItem2;
-    };
-    this.rootVms.forEach((vm) => {
-      const item = createTreeItem(vm, 0);
-      if (item) {
-        tree.push(item);
-      }
-    });
-    return {
-      flatten,
-      tree
-    };
+  get extraListItems() {
+    if (!this.extras) {
+      return [];
+    }
+    return [new ExtraListItem(this, this.extras)];
   }
-  get vmTree() {
-    return this.vmsData.tree;
+  get listItems() {
+    return [
+      ...this.rootVmListItems.flatMap((it) => it.expandedChildrenWithSelf),
+      ...this.extraListItems.flatMap((it) => it.expandedChildrenWithSelf)
+    ];
   }
   get isActive() {
     return !!this.projectVmStore || Object.keys(this.extras || {}).length > 0;
@@ -37342,25 +38594,7 @@ class ViewModelDevtools {
     return this.config.containerId ?? "view-model-devtools";
   }
   isExpanded(vmItem) {
-    return this.expandedVmsMap.get(vmItem.key) || this.searchEngine.isActive;
-  }
-  checkIsVmPathExpanded(vmItem, path) {
-    const searchResult = this.searchEngine.getSearchResult({
-      item: vmItem,
-      type: "vm"
-    });
-    if (searchResult.fittedPath.length) {
-      if (searchResult.isFittedById || searchResult.isFittedByName) {
-        if (searchResult.fittedPath.slice(1).join(".").startsWith(path.toLowerCase())) {
-          return true;
-        }
-      } else {
-        if (searchResult.fittedPath.join(".").startsWith(path.toLowerCase())) {
-          return true;
-        }
-      }
-    }
-    return this.expandedVmItemsPaths.has(`${vmItem.key}%%%${path}`);
+    return vmItem.isExpanded || this.searchEngine.isActive;
   }
   checkIsExtraPathExpanded(path) {
     const expandedKey = `__EXTRA__%%%${path}`;
@@ -37374,6 +38608,9 @@ class ViewModelDevtools {
       this.expandedVmItemsPaths.add(expandedKey);
     }
   }
+  handlePropertyClick(item, e) {
+    item.toggleExpand();
+  }
   handleExpandExtraPropertyClick(path) {
     const expandedKey = `__EXTRA__%%%${path}`;
     if (this.expandedVmItemsPaths.has(expandedKey)) {
@@ -37383,10 +38620,10 @@ class ViewModelDevtools {
     }
   }
   handleVmItemHeaderClick(vmItem) {
-    this.expandedVmsMap.set(vmItem.key, !this.isExpanded(vmItem));
+    vmItem.toggleExpand();
   }
   isExpandable(vmItem) {
-    return vmItem.children.length > 0 && this.presentationMode !== "list";
+    return vmItem.isExpandable && this.presentationMode !== "list";
   }
   getVmParams(vm) {
     if ("vmParams" in vm) {
@@ -37403,15 +38640,10 @@ class ViewModelDevtools {
   handleChangePresentationMode = (mode) => {
     this.presentationMode = mode === "list" ? "list" : "tree";
     this.expandedVmItemsPaths.clear();
-    this.expandedVmsMap.clear();
   };
   expandAllVMs() {
-    this.expandedVmsMap.replace(
-      this.vmsData.flatten.map((it) => [it.key, true])
-    );
   }
   collapseAllVms() {
-    this.expandedVmsMap.clear();
   }
   showPopup() {
     this.isPopupOpened = true;
@@ -37421,6 +38653,10 @@ class ViewModelDevtools {
     this.isPopupOpened = false;
   }
   init() {
+    if (this.isInitialized) {
+      return;
+    }
+    this.isInitialized = true;
     reaction(
       () => this.searchEngine.formattedSearchText,
       () => {
@@ -37430,8 +38666,8 @@ class ViewModelDevtools {
             this.scrollListRef.current?.scrollTo(0);
             return;
           }
+          let nextOffset = 0;
           let maxLevel = 0;
-          let lastFoundElementIndex;
           const htmlCollection = document.querySelectorAll(
             `#${this.containerId} [data-fitted]`
           );
@@ -37439,42 +38675,41 @@ class ViewModelDevtools {
             (element, index) => {
               if (element.dataset.fitted === "true" && element.dataset.depth && element.dataset.depth.length >= maxLevel) {
                 maxLevel = element.dataset.depth.length;
-                lastFoundElementIndex = index;
+                nextOffset = this.scrollListRef.current?.getItemOffset(index) ?? 0;
               }
             }
           );
-          if (lastFoundElementIndex === void 0) {
-            this.scrollListRef.current?.scrollTo(90);
-          } else {
-            this.scrollListRef.current?.scrollToIndex(lastFoundElementIndex, {
-              align: "center",
-              offset: -65,
-              smooth: true
-            });
-          }
+          this.scrollListRef.current?.scrollTo(nextOffset);
         }, 200);
       }
     );
   }
+  isInitialized = false;
   render() {
     let container = document.querySelector(
       `#${this.containerId}`
     );
     if (!container) {
       container = document.createElement("div");
-      container.className = css$3.root;
+      container.className = css.root;
       container.id = this.containerId;
       if (document.body) {
         document.body.appendChild(container);
+        const root2 = clientExports.createRoot(container);
+        root2.render(
+          reactExports.createElement(DevtoolsClient, { payload: { devtools: this } })
+        );
       } else {
         document.addEventListener("DOMContentLoaded", () => {
           document.body.appendChild(container);
+          const root2 = clientExports.createRoot(container);
+          root2.render(
+            reactExports.createElement(DevtoolsClient, { payload: { devtools: this } })
+          );
         });
       }
-      this.init();
     }
-    const root2 = clientExports.createRoot(container);
-    root2.render(reactExports.createElement(DevtoolsClient, { payload: { devtools: this } }));
+    this.init();
   }
   static _instance = null;
   static define(config) {