mobx-view-model-devtools 0.0.16 → 0.0.17

package/index.d.ts

@@ -85,6 +85,7 @@ declare class ViewModelDevtools {
     scrollContentRef: Ref<HTMLDivElement>;
     keyboardHandler: KeyboardHandler;
     searchEngine: SearchEngine;
+    isHierarchyMode: boolean;
     private expandedVmsSet;
     scrollListRef: Ref<VListHandle>;
     private autoscrollTimeout;
@@ -100,12 +101,13 @@ declare class ViewModelDevtools {
     handleExpandExtraPropertyClick(path: string): void;
     handleVmItemHeaderClick(vmItem: VmTreeItem): void;
     private getVmParams;
-    private constructor();
     setStore(viewModels: ViewModelStoreBase<AnyViewModel> | undefined): void;
     setExtras(extras: Maybe<AnyObject>): void;
+    toggleHierarchyMode: () => void;
     private init;
     render(): void;
     private static _instance;
+    private constructor();
     static define(config?: ViewModelDevtoolsConfig): ViewModelDevtools;
     static connect(viewModels: ViewModelDevtoolsConfig['viewModels'], extras?: AnyObject): ViewModelDevtools;
     static connectViewModels(viewModels: ViewModelDevtoolsConfig['viewModels']): ViewModelDevtools;

package/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static_g5P-G{position:static}.container_ueeVi{width:100%}@media(min-width:40rem){.container_ueeVi{max-width:40rem}}@media(min-width:48rem){.container_ueeVi{max-width:48rem}}@media(min-width:64rem){.container_ueeVi{max-width:64rem}}@media(min-width:80rem){.container_ueeVi{max-width:80rem}}@media(min-width:96rem){.container_ueeVi{max-width:96rem}}.blur_9rZ6A{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.rootContainer_Z8gey *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{z-index:99;width:calc(var(--spacing)*9);height:calc(var(--spacing)*9);cursor:pointer;border-radius:var(--radius-lg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));position:fixed}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}:is(.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]).opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6>img{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);position:absolute}.vmButton_Xr1Q6>div{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:2px;border-color:#00000057;position:absolute}.vmButton_Xr1Q6>span{pointer-events:none;top:calc(var(--spacing)*-1);left:calc(var(--spacing)*-1);border-radius:var(--radius-lg);padding:calc(var(--spacing)*.5);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:12px;line-height:1;font-weight:var(--font-weight-semibold);color:#2aff0a;background-color:#005c26cf;display:flex;position:absolute}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.vmPopup_Q4l4j{z-index:99;border-radius:var(--radius-lg);width:520px;height:calc(100vh - 24px);position:fixed}.vmPopup_Q4l4j>header button{width:28px;padding:6px}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmContent_VAE7p{color:#ccc;background-color:#1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContent_VAE7p>header{height:calc(var(--spacing)*8);padding-left:calc(var(--spacing)*2);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);justify-content:space-between;align-items:center;display:flex}.vmContentInput_zbDAW{display:flex;position:relative}.vmContentInput_zbDAW>svg{pointer-events:none;opacity:.7;width:16px;position:absolute;inset:50% 0;transform:translate(6px,-50%)}.vmContentInput_zbDAW>input{text-overflow:ellipsis;background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px}.vmContentInput_zbDAW>button{opacity:.6;width:16px;display:none;position:absolute;top:50%;right:6px;transform:translate(4px,-50%)}.vmContentInput_zbDAW.filled_-3YUt>svg{opacity:.9}.vmContentInput_zbDAW.filled_-3YUt>button{display:block}.vmContentTree_BB36O{padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContentTree_BB36O:hover{scrollbar-color:#818181 #1e1e1e}.line_Xgaua.vmTreeItem_t-7jc{padding-left:calc(0px + (var(--level)*20px));z-index:1;position:sticky;top:-8px}.line_Xgaua.vmTreeItem_t-7jc>header{z-index:1;cursor:pointer;align-items:center;gap:calc(var(--spacing)*1);text-overflow:ellipsis;white-space:nowrap;background-color:#1e1e1e;margin-block:auto;display:flex;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc>header>label{background:#0f6013;border-radius:4px;padding:0 4px}.line_Xgaua.vmTreeItem_t-7jc>header>span{color:#5ab65e;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc.extrasItem_MI9Fa>header>label{background:#6b6902}.line_Xgaua.vmTreeItem_t-7jc:not([data-fitted=true])>header{opacity:.6}.vmContentFilters_No1QW{background:#1e1e1e;width:100%;padding:0 8px}.propertyMeta_XxYHc{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyMeta_XxYHc.small_Ipy6s{font-size:10px;line-height:15px}.propertyValue_s9qHJ{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyValue_s9qHJ:has(+.property-name_2-sJi){margin-right:calc(var(--spacing)*1)}.line_Xgaua{text-overflow:ellipsis;white-space:nowrap;white-space:pre;height:22px;padding-left:calc(28px + (var(--level)*15px));background:#1e1e1e;flex-direction:row;align-items:center;font-size:14px;display:flex;position:relative;overflow:hidden}.line_Xgaua.expandable_2LUhL{cursor:pointer}.property_eoWZv[data-fitted=false]{opacity:.5}.property_eoWZv.instance_B-kEn>.propertyValue_s9qHJ{color:#ba82be}:is(.property_eoWZv.primitive_5yfCy.boolean_TwUVp,.property_eoWZv.primitive_5yfCy.number_AVdzm,.property_eoWZv.primitive_5yfCy.object_kn8wQ,.property_eoWZv.primitive_5yfCy.undefined_SMcns,.property_eoWZv.primitive_5yfCy.bigint_ZrO3O,.property_eoWZv.primitive_5yfCy.symbol_9GN4U)>.propertyValue_s9qHJ{color:#5999cd}.property_eoWZv.primitive_5yfCy.string_m1Kkx>.propertyValue_s9qHJ{color:#af7249}.expandButton_EObqt{color:#a0a0a0;cursor:pointer;width:16px;height:16px;font-weight:700;opacity:1!important}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}')),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('/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static_g5P-G{position:static}.container_ueeVi{width:100%}@media(min-width:40rem){.container_ueeVi{max-width:40rem}}@media(min-width:48rem){.container_ueeVi{max-width:48rem}}@media(min-width:64rem){.container_ueeVi{max-width:64rem}}@media(min-width:80rem){.container_ueeVi{max-width:80rem}}@media(min-width:96rem){.container_ueeVi{max-width:96rem}}.blur_9rZ6A{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.rootContainer_Z8gey *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{z-index:99;width:calc(var(--spacing)*9);height:calc(var(--spacing)*9);cursor:pointer;border-radius:var(--radius-lg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));position:fixed}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}:is(.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]).opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6>img{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);position:absolute}.vmButton_Xr1Q6>div{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:2px;border-color:#00000057;position:absolute}.vmButton_Xr1Q6>span{pointer-events:none;top:calc(var(--spacing)*-1);left:calc(var(--spacing)*-1);border-radius:var(--radius-lg);padding:calc(var(--spacing)*.5);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:12px;line-height:1;font-weight:var(--font-weight-semibold);color:#2aff0a;background-color:#005c26cf;display:flex;position:absolute}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.closePopupButton_-08HG{width:28px;padding:6px}.baseActions_pkHeO{flex-direction:row;align-items:center;gap:4px;height:16px;margin-left:6px;margin-right:auto;display:flex}.hierarchyButton_h3FD7{border-radius:6px;width:18px;height:18px;padding:2px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{z-index:99;border-radius:var(--radius-lg);width:520px;height:calc(100vh - 24px);position:fixed}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmContent_VAE7p{color:#ccc;background-color:#1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContent_VAE7p>header{height:calc(var(--spacing)*8);padding-left:calc(var(--spacing)*2);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);justify-content:space-between;align-items:center;display:flex}.vmContentInput_zbDAW{display:flex;position:relative}.vmContentInput_zbDAW>svg{pointer-events:none;opacity:.7;width:16px;position:absolute;inset:50% 0;transform:translate(6px,-50%)}.vmContentInput_zbDAW>input{text-overflow:ellipsis;background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px}.vmContentInput_zbDAW>button{opacity:.6;width:16px;display:none;position:absolute;top:50%;right:6px;transform:translate(4px,-50%)}.vmContentInput_zbDAW.filled_-3YUt>svg{opacity:.9}.vmContentInput_zbDAW.filled_-3YUt>button{display:block}.vmContentTree_BB36O{padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContentTree_BB36O:hover{scrollbar-color:#818181 #1e1e1e}.line_Xgaua.vmTreeItem_t-7jc{padding-left:calc(0px + (var(--level)*20px));z-index:1;position:sticky;top:-8px}.line_Xgaua.vmTreeItem_t-7jc>header{z-index:1;cursor:pointer;align-items:center;gap:calc(var(--spacing)*1);text-overflow:ellipsis;white-space:nowrap;background-color:#1e1e1e;margin-block:auto;display:flex;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc>header>label{background:#0f6013;border-radius:4px;padding:0 4px}.line_Xgaua.vmTreeItem_t-7jc>header>span{color:#5ab65e;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc.extrasItem_MI9Fa>header>label{background:#6b6902}.line_Xgaua.vmTreeItem_t-7jc:not([data-fitted=true])>header{opacity:.6}.vmContentFilters_No1QW{background:#1e1e1e;width:100%;padding:0 8px}.propertyMeta_XxYHc{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyMeta_XxYHc.small_Ipy6s{font-size:10px;line-height:15px}.propertyValue_s9qHJ{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyValue_s9qHJ:has(+.property-name_2-sJi){margin-right:calc(var(--spacing)*1)}.line_Xgaua{text-overflow:ellipsis;white-space:nowrap;white-space:pre;height:22px;padding-left:calc(28px + (var(--level)*15px));background:#1e1e1e;flex-direction:row;align-items:center;font-size:14px;display:flex;position:relative;overflow:hidden}.line_Xgaua.expandable_2LUhL{cursor:pointer}.property_eoWZv[data-fitted=false]{opacity:.5}.property_eoWZv.instance_B-kEn>.propertyValue_s9qHJ{color:#ba82be}:is(.property_eoWZv.primitive_5yfCy.boolean_TwUVp,.property_eoWZv.primitive_5yfCy.number_AVdzm,.property_eoWZv.primitive_5yfCy.object_kn8wQ,.property_eoWZv.primitive_5yfCy.undefined_SMcns,.property_eoWZv.primitive_5yfCy.bigint_ZrO3O,.property_eoWZv.primitive_5yfCy.symbol_9GN4U)>.propertyValue_s9qHJ{color:#5999cd}.property_eoWZv.primitive_5yfCy.string_m1Kkx>.propertyValue_s9qHJ{color:#af7249}.expandButton_EObqt{color:#a0a0a0;cursor:pointer;width:16px;height:16px;font-weight:700;opacity:1!important}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}')),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;
 }
@@ -30569,9 +30569,15 @@ const generateVmId = (ctx) => {
 const mergeVMConfigs = (...configs) => {
   const result = {
     ...viewModelsConfig,
-    startViewTransitions: structuredClone(
-      viewModelsConfig.startViewTransitions
-    )
+    startViewTransitions: structuredClone(viewModelsConfig.startViewTransitions),
+    observable: {
+      viewModels: {
+        ...viewModelsConfig.observable.viewModels
+      },
+      viewModelStores: {
+        ...viewModelsConfig.observable.viewModelStores
+      }
+    }
   };
   configs.forEach((config) => {
     if (!config) {
@@ -35330,6 +35336,10 @@ const rootContainer = "rootContainer_Z8gey";
 const vmButton = "vmButton_Xr1Q6";
 const opened = "opened_gewqL";
 const isConnected = "isConnected_tjs3F";
+const closePopupButton = "closePopupButton_-08HG";
+const baseActions = "baseActions_pkHeO";
+const hierarchyButton = "hierarchyButton_h3FD7";
+const active = "active_4JTx5";
 const vmPopup = "vmPopup_Q4l4j";
 const vmContent = "vmContent_VAE7p";
 const vmContentInput = "vmContentInput_zbDAW";
@@ -35364,6 +35374,10 @@ const css = {
   vmButton,
   opened,
   isConnected,
+  closePopupButton,
+  baseActions,
+  hierarchyButton,
+  active,
   vmPopup,
   vmContent,
   vmContentInput,
@@ -36465,14 +36479,15 @@ const VmTreeItemRender = withViewModel(
       type: "vm",
       item: vmItem
     });
+    const depth = model.devtools.isHierarchyMode ? vmItem.depth : 0;
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
           className: cx(css.line, css.vmTreeItem),
           "data-fitted": itemSearchResult.isFittedByName || itemSearchResult.isFittedById,
-          "data-depth": String().padEnd(vmItem.depth, "-"),
-          style: { "--level": vmItem.depth },
+          "data-depth": String().padEnd(depth, "-"),
+          style: { "--level": depth },
           children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { onClick: () => model.handleVmItemHeaderClick(vmItem), children: [
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
               ExpandButton,
@@ -36486,24 +36501,24 @@ const VmTreeItemRender = withViewModel(
               false,
               {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-                lineNumber: 31,
+                lineNumber: 33,
                 columnNumber: 13
               },
               void 0
             ),
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { 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: 37,
+              lineNumber: 39,
               columnNumber: 13
             }, void 0),
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { 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: 38,
+              lineNumber: 40,
               columnNumber: 13
             }, void 0)
           ] }, void 0, true, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-            lineNumber: 30,
+            lineNumber: 32,
             columnNumber: 11
           }, void 0)
         },
@@ -36511,7 +36526,7 @@ const VmTreeItemRender = withViewModel(
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 22,
+          lineNumber: 24,
           columnNumber: 9
         },
         void 0
@@ -36529,17 +36544,17 @@ const VmTreeItemRender = withViewModel(
           ),
           extraRight: order !== arr.length - 1 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `,` }, void 0, false, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-            lineNumber: 54,
+            lineNumber: 56,
             columnNumber: 17
           }, void 0),
-          level: vmItem.depth,
+          level: 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: 42,
+          lineNumber: 44,
           columnNumber: 11
         },
         void 0
@@ -36553,14 +36568,14 @@ const VmTreeItemRender = withViewModel(
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 63,
+          lineNumber: 65,
           columnNumber: 13
         },
         void 0
       ))
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-      lineNumber: 21,
+      lineNumber: 23,
       columnNumber: 7
     }, void 0);
   }
@@ -36579,89 +36594,165 @@ const VmDevtoolsContent = observer(
           lineNumber: 27,
           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.vmContentFilters, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: `${css.vmContentInput} ${model.devtools.searchEngine.isActive && css.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: 32,
-          columnNumber: 13
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          "input",
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.baseActions, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "button",
           {
-            ref: model.devtools.searchEngine.searchInputRef,
-            autoFocus: true,
-            placeholder: "search by property path or ViewModel name"
+            className: cx(css.hierarchyButton, {
+              [css.active]: model.devtools.isHierarchyMode
+            }),
+            onClick: model.devtools.toggleHierarchyMode,
+            children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 16 16",
+                children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                  "path",
+                  {
+                    fill: "currentColor",
+                    "fill-rule": "evenodd",
+                    d: "M12.25 2.5h-8.5a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75m0 4.5H5v3.13c0 .69.56 1.25 1.25 1.25H7v-.13A2.25 2.25 0 0 1 9.25 9h3a2.25 2.25 0 0 1 2.25 2.25v1.5A2.25 2.25 0 0 1 12.25 15h-3a2.25 2.25 0 0 1-2.246-2.12H6.25a2.75 2.75 0 0 1-2.75-2.75V6.986a2.25 2.25 0 0 1-2-2.236v-1.5A2.25 2.25 0 0 1 3.75 1h8.5a2.25 2.25 0 0 1 2.25 2.25v1.5A2.25 2.25 0 0 1 12.25 7m-3 3.5h3a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75v-1.5a.75.75 0 0 1 .75-.75",
+                    "clip-rule": "evenodd"
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                    lineNumber: 40,
+                    columnNumber: 17
+                  },
+                  void 0
+                )
+              },
+              void 0,
+              false,
+              {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                lineNumber: 35,
+                columnNumber: 15
+              },
+              void 0
+            )
           },
           void 0,
           false,
           {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 33,
+            lineNumber: 29,
             columnNumber: 13
           },
           void 0
-        ),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.devtools.searchEngine.resetSearch, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(XMark, {}, void 0, false, {
+        ) }, void 0, false, {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 39,
-          columnNumber: 15
-        }, void 0) }, 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)
+          lineNumber: 28,
+          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: 31,
-        columnNumber: 11
-      }, void 0) }, void 0, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 30,
+        lineNumber: 26,
         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,
-          {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 45,
-            columnNumber: 13
-          },
-          void 0
-        )),
-        !!model.devtools.extras && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          ExtrasItemRender,
-          {
-            payload: {
-              extras: model.devtools.extras,
-              devtools: model.devtools
-            }
-          },
-          void 0,
-          false,
-          {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 51,
-            columnNumber: 13
-          },
-          void 0
-        )
-      ] }, void 0, true, {
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentFilters, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+        "div",
+        {
+          className: `${css.vmContentInput} ${model.devtools.searchEngine.isActive && css.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: 55,
+              columnNumber: 13
+            }, 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: 56,
+                columnNumber: 13
+              },
+              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: 62,
+              columnNumber: 15
+            }, void 0) }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+              lineNumber: 61,
+              columnNumber: 13
+            }, void 0)
+          ]
+        },
+        void 0,
+        true,
+        {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+          lineNumber: 52,
+          columnNumber: 11
+        },
+        void 0
+      ) }, void 0, false, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 43,
+        lineNumber: 51,
         columnNumber: 9
-      }, void 0)
+      }, 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,
+              {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                lineNumber: 72,
+                columnNumber: 13
+              },
+              void 0
+            )),
+            !!model.devtools.extras && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+              ExtrasItemRender,
+              {
+                payload: {
+                  extras: model.devtools.extras,
+                  devtools: model.devtools
+                }
+              },
+              void 0,
+              false,
+              {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                lineNumber: 78,
+                columnNumber: 13
+              },
+              void 0
+            )
+          ]
+        },
+        void 0,
+        true,
+        {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+          lineNumber: 66,
+          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,
@@ -36676,7 +36767,7 @@ const VmDevtoolsPopup = observer(() => {
     {
       className: css.vmPopup,
       "data-position": `${model.devtools.config.position}`,
-      headerContent: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.handleClosePopupClick, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(XMark, {}, void 0, false, {
+      headerContent: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { className: css.closePopupButton, onClick: model.handleClosePopupClick, 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: 17,
         columnNumber: 11
@@ -36886,7 +36977,7 @@ class KeyboardHandler2 extends KeyboardHandler$1 {
           }
         },
         {
-          shortcuts: ["Ctrl+ArrowDown"],
+          shortcuts: ["Ctrl+ArrowDown", "PageDown"],
           action: () => {
             if (!devtools.scrollListRef.current) return;
             devtools.scrollListRef.current.scrollTo(
@@ -36895,7 +36986,7 @@ class KeyboardHandler2 extends KeyboardHandler$1 {
           }
         },
         {
-          shortcuts: ["Ctrl+ArrowUp"],
+          shortcuts: ["Ctrl+ArrowUp", "PageUp"],
           action: () => {
             if (!devtools.scrollListRef.current) return;
             devtools.scrollListRef.current.scrollTo(
@@ -37136,6 +37227,7 @@ class ViewModelDevtools {
     this.projectVmStore = this.config.viewModels;
     this.expandedVmsSet = observable.set();
     this.isAllVmsExpandedByDefault = true;
+    this.isHierarchyMode = true;
     this.expandedVmItemsPaths = observable.set();
     this.logoUrl = "data:image/png;base64,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";
     this.inputRef = createFocusableRef();
@@ -37147,9 +37239,11 @@ class ViewModelDevtools {
       isPopupOpened: observable.ref,
       isAllVmsExpandedByDefault: observable,
       projectVmStore: observable.ref,
+      isHierarchyMode: observable.ref,
       extras: observable.ref,
       setStore: action,
       setExtras: action,
+      toggleHierarchyMode: action,
       handleExpandVmPropertyClick: action,
       handleExpandExtraPropertyClick: action,
       allVms: computed.struct,
@@ -37171,6 +37265,7 @@ class ViewModelDevtools {
   scrollContentRef;
   keyboardHandler;
   searchEngine;
+  isHierarchyMode;
   expandedVmsSet;
   scrollListRef;
   autoscrollTimeout;
@@ -37295,6 +37390,9 @@ class ViewModelDevtools {
   setExtras(extras) {
     this.extras = extras;
   }
+  toggleHierarchyMode = () => {
+    this.isHierarchyMode = !this.isHierarchyMode;
+  };
   init() {
     reaction(
       () => this.searchEngine.formattedSearchText,
@@ -37318,9 +37416,12 @@ class ViewModelDevtools {
               }
             }
           );
-          if (lastFoundElementIndex !== void 0) {
+          if (lastFoundElementIndex === void 0) {
+            this.scrollListRef.current?.scrollTo(90);
+          } else {
             this.scrollListRef.current?.scrollToIndex(lastFoundElementIndex, {
-              align: "end",
+              align: "center",
+              offset: -65,
               smooth: true
             });
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-view-model-devtools",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "",
   "keywords": [],
   "author": "js2me",
@@ -9,14 +9,19 @@
     "mobx": "^6.15.0",
     "mobx-react-lite": "^4.1.1",
     "mobx-swiss-knife": "^1.10.0",
-    "mobx-view-model": "^8.8.0",
+    "mobx-view-model": "^8.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "virtua": "^0.46.5",
     "yummies": "^6.0.0"
   },
   "peerDependencies": {
-    "mobx-view-model": "^8.8.0"
+    "mobx-view-model": "^8.8.1"
+  },
+  "peerDependenciesMeta": {
+    "mobx-view-model": {
+      "optional": true
+    }
   },
   "main": "index.js",
   "exports": {