npm - mobx-view-model-devtools - Versions diffs - 0.0.14 → 0.0.15 - Mend

mobx-view-model-devtools 0.0.14 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +2 -2
package/{index.global.js → auto.global.js} +579 -344
package/index.cjs +2 -2
package/index.d.ts +42 -16
package/index.js +579 -344
package/package.json +1 -1

package/{index.global.js → auto.global.js} RENAMED Viewed

@@ -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}.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}.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}.vmContentFilters_No1QW input{background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 4px;font-size:14px}.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,)}.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 getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -35332,6 +35332,8 @@ const opened = "opened_gewqL";
 const isConnected = "isConnected_tjs3F";
 const vmPopup = "vmPopup_Q4l4j";
 const vmContent = "vmContent_VAE7p";
+const vmContentInput = "vmContentInput_zbDAW";
+const filled = "filled_-3YUt";
 const vmContentTree = "vmContentTree_BB36O";
 const line = "line_Xgaua";
 const vmTreeItem = "vmTreeItem_t-7jc";
@@ -35364,6 +35366,8 @@ const css = {
   isConnected,
   vmPopup,
   vmContent,
+  vmContentInput,
+  filled,
   vmContentTree,
   line,
   vmTreeItem,
@@ -35766,6 +35770,48 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
   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 });
 }));
+const Magnifier = () => /* @__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",
+    fillRule: "evenodd",
+    d: "M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m-.82 4.74a6 6 0 1 1 1.06-1.06l2.79 2.79a.75.75 0 1 1-1.06 1.06z",
+    clipRule: "evenodd"
+  },
+  void 0,
+  false,
+  {
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/magnifier.tsx",
+    lineNumber: 3,
+    columnNumber: 5
+  },
+  void 0
+) }, void 0, false, {
+  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/magnifier.tsx",
+  lineNumber: 2,
+  columnNumber: 3
+}, void 0);
+const XMark = () => /* @__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",
+    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"
+  },
+  void 0,
+  false,
+  {
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
+    lineNumber: 3,
+    columnNumber: 5
+  },
+  void 0
+) }, void 0, false, {
+  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
+  lineNumber: 2,
+  columnNumber: 3
+}, void 0);
 const ignoredKeys = /* @__PURE__ */ new Set(["constructor"]);
 const ignoredPrototypes = /* @__PURE__ */ new Set([
   globalThis.Object.prototype,
@@ -35873,7 +35919,7 @@ const ExpandButton = ({
   );
 };
 const ArrayProperty = observer((props) => {
-  const { name: property2, value, model } = props;
+  const { name: property2, value, model, extraRight } = props;
   const isExpanded = model.isPathExpanded(props.path);
   const keys = Object.keys(value);
   const isExpandable = keys.length > 0;
@@ -35882,27 +35928,36 @@ const ArrayProperty = observer((props) => {
       "div",
       {
         className: cx(css.line, css.property, css.array, {
-          [css.expandable]: isExpandable
+          [css.expandable]: isExpandable,
+          [css.expanded]: isExpanded
         }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
         "data-fitted": props.isFitted,
+        "data-depth": String().padEnd(props.level, "-"),
         children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: property2 }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-            lineNumber: 26,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
+          property2 === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: property2 }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+              lineNumber: 30,
+              columnNumber: 13
+            }, void 0),
+            /* @__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/property/array.tsx",
+              lineNumber: 31,
+              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/property/array.tsx",
-            lineNumber: 27,
-            columnNumber: 9
+            lineNumber: 29,
+            columnNumber: 11
           }, void 0),
           /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: isExpanded ? "[" : isExpandable ? "[...]" : `[]` }, void 0, false, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-            lineNumber: 28,
+            lineNumber: 34,
             columnNumber: 9
-          }, void 0)
+          }, void 0),
+          !isExpanded && extraRight
         ]
       },
       void 0,
@@ -35924,7 +35979,12 @@ const ArrayProperty = observer((props) => {
           value: value[key],
           key,
           path: `${props.path}.${key}`,
-          level: props.level + 1
+          level: props.level + 1,
+          extraRight: /* @__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/property/array.tsx",
+            lineNumber: 50,
+            columnNumber: 27
+          }, void 0)
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -35935,24 +35995,27 @@ const ArrayProperty = observer((props) => {
             "--level": props.level,
             "--order": keys.length
           },
-          children: /* @__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/property/array.tsx",
-            lineNumber: 54,
-            columnNumber: 13
-          }, void 0)
+          children: [
+            /* @__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/property/array.tsx",
+              lineNumber: 62,
+              columnNumber: 13
+            }, void 0),
+            extraRight
+          ]
         },
         void 0,
-        false,
+        true,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-          lineNumber: 45,
+          lineNumber: 53,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-      lineNumber: 33,
+      lineNumber: 40,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
@@ -35962,7 +36025,7 @@ const ArrayProperty = observer((props) => {
   }, void 0);
 });
 const FunctionProperty = observer((props) => {
-  const { name: property2, value } = props;
+  const { name: property2, value, extraRight } = props;
   const argLabels = Array.from(
     { length: value.length },
     (_15, i) => `arg${i + 1}`
@@ -35974,17 +36037,19 @@ const FunctionProperty = observer((props) => {
       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.propertyName, children: property2 }, void 0, false, {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/function.tsx",
-          lineNumber: 24,
+          lineNumber: 25,
           columnNumber: 7
         }, void 0),
         /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `(${argLabels.join(", ")})` }, void 0, false, {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/function.tsx",
-          lineNumber: 25,
+          lineNumber: 26,
           columnNumber: 7
-        }, void 0)
+        }, void 0),
+        extraRight
       ]
     },
     void 0,
@@ -35998,7 +36063,7 @@ const FunctionProperty = observer((props) => {
   );
 });
 const InstanceProperty = observer((props) => {
-  const { name, value, model } = props;
+  const { name, value, model, extraRight } = props;
   const isExpanded = model.isPathExpanded(props.path);
   const Constructor = value.constructor;
   const className = Constructor.name;
@@ -36007,24 +36072,33 @@ const InstanceProperty = observer((props) => {
     /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css.line, css.property, css.instance, css.expandable),
+        className: cx(css.line, css.property, css.instance, css.expandable, {
+          [css.expanded]: isExpanded
+        }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
         "data-fitted": props.isFitted,
+        "data-depth": String().padEnd(props.level, "-"),
         children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-            lineNumber: 27,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
+          name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+              lineNumber: 32,
+              columnNumber: 13
+            }, void 0),
+            /* @__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/property/instance.tsx",
+              lineNumber: 33,
+              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/property/instance.tsx",
-            lineNumber: 28,
-            columnNumber: 9
+            lineNumber: 31,
+            columnNumber: 11
           }, void 0),
           /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: `${className}` }, void 0, false, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-            lineNumber: 29,
+            lineNumber: 36,
             columnNumber: 9
           }, void 0),
           isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: [
@@ -36032,9 +36106,10 @@ const InstanceProperty = observer((props) => {
             `{`
           ] }, void 0, true, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-            lineNumber: 30,
+            lineNumber: 37,
             columnNumber: 24
-          }, void 0)
+          }, void 0),
+          !isExpanded && extraRight
         ]
       },
       void 0,
@@ -36056,7 +36131,12 @@ const InstanceProperty = observer((props) => {
           value: value[key],
           key,
           path: `${props.path}.${key}`,
-          level: props.level + 1
+          level: props.level + 1,
+          extraRight: /* @__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/property/instance.tsx",
+            lineNumber: 51,
+            columnNumber: 27
+          }, void 0)
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36067,24 +36147,27 @@ const InstanceProperty = observer((props) => {
             "--level": props.level,
             "--order": keys.length
           },
-          children: /* @__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/property/instance.tsx",
-            lineNumber: 54,
-            columnNumber: 13
-          }, void 0)
+          children: [
+            /* @__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/property/instance.tsx",
+              lineNumber: 63,
+              columnNumber: 13
+            }, void 0),
+            extraRight
+          ]
         },
         void 0,
-        false,
+        true,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-          lineNumber: 45,
+          lineNumber: 54,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-      lineNumber: 33,
+      lineNumber: 41,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
@@ -36094,7 +36177,7 @@ const InstanceProperty = observer((props) => {
   }, void 0);
 });
 const ObjectProperty = observer((props) => {
-  const { name: property2, value, model } = props;
+  const { name, value, model, extraRight } = props;
   const isExpanded = model.isPathExpanded(props.path);
   const keys = getAllKeys(value);
   const isExpandable = keys.length > 0;
@@ -36103,27 +36186,36 @@ const ObjectProperty = observer((props) => {
       "div",
       {
         className: cx(css.line, css.property, css.object, {
-          [css.expandable]: isExpandable
+          [css.expandable]: isExpandable,
+          [css.expanded]: isExpanded
         }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
         "data-fitted": props.isFitted,
+        "data-depth": String().padEnd(props.level, "-"),
         children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: property2 }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-            lineNumber: 27,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
+          name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+              lineNumber: 31,
+              columnNumber: 13
+            }, void 0),
+            /* @__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/property/object.tsx",
+              lineNumber: 32,
+              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/property/object.tsx",
-            lineNumber: 28,
-            columnNumber: 9
+            lineNumber: 30,
+            columnNumber: 11
           }, void 0),
           /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: isExpanded ? "{" : isExpandable ? "{...}" : `{}` }, void 0, false, {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-            lineNumber: 29,
+            lineNumber: 35,
             columnNumber: 9
-          }, void 0)
+          }, void 0),
+          !isExpanded && extraRight
         ]
       },
       void 0,
@@ -36136,7 +36228,7 @@ const ObjectProperty = observer((props) => {
       void 0
     ),
     isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-      keys.map((key, order) => /* @__PURE__ */ reactExports.createElement(
+      keys.map((key, order, arr) => /* @__PURE__ */ reactExports.createElement(
         Property,
         {
           ...props,
@@ -36145,7 +36237,12 @@ const ObjectProperty = observer((props) => {
           value: value[key],
           key,
           path: `${props.path}.${key}`,
-          level: props.level + 1
+          level: props.level + 1,
+          extraRight: /* @__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/property/object.tsx",
+            lineNumber: 51,
+            columnNumber: 27
+          }, void 0)
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36156,24 +36253,27 @@ const ObjectProperty = observer((props) => {
             "--level": props.level,
             "--order": keys.length
           },
-          children: /* @__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/property/object.tsx",
-            lineNumber: 55,
-            columnNumber: 13
-          }, void 0)
+          children: [
+            /* @__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/property/object.tsx",
+              lineNumber: 63,
+              columnNumber: 13
+            }, void 0),
+            extraRight
+          ]
         },
         void 0,
-        false,
+        true,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-          lineNumber: 46,
+          lineNumber: 54,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-      lineNumber: 34,
+      lineNumber: 41,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
@@ -36183,7 +36283,7 @@ const ObjectProperty = observer((props) => {
   }, void 0);
 });
 const PrimitiveProperty = observer((props) => {
-  const { name, value } = props;
+  const { name, value, extraRight } = props;
   const primitiveType = typeof value;
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
     "div",
@@ -36192,22 +36292,30 @@ const PrimitiveProperty = observer((props) => {
       style: { "--level": props.level, "--order": props.order },
       "data-fitted": props.isFitted,
       title: String(value),
+      "data-depth": String().padEnd(props.level, "-"),
       children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
+        name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
+            lineNumber: 23,
+            columnNumber: 11
+          }, void 0),
+          /* @__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/property/primitive.tsx",
+            lineNumber: 24,
+            columnNumber: 11
+          }, void 0)
+        ] }, void 0, true, {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
-          lineNumber: 20,
-          columnNumber: 7
+          lineNumber: 22,
+          columnNumber: 9
         }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.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/vm-tree-item-render/property/primitive.tsx",
-          lineNumber: 21,
+          lineNumber: 27,
           columnNumber: 7
         }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: primitiveType === "symbol" ? "Symbol" : primitiveType === "string" ? `"${value}"` : `${value}` }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
-          lineNumber: 22,
-          columnNumber: 7
-        }, void 0)
+        extraRight
       ]
     },
     void 0,
@@ -36231,38 +36339,38 @@ const Property = observer((rootProps) => {
   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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 35,
+      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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 43,
+      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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 45,
+      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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 47,
+      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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 54,
+      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/vm-tree-item-render/property/index.tsx",
-      lineNumber: 56,
+      lineNumber: 57,
       columnNumber: 12
     }, void 0);
   }
@@ -36279,6 +36387,7 @@ const ExtrasItemRender = withViewModel(
         {
           className: cx(css.line, css.vmTreeItem, css.extrasItem),
           "data-fitted": "true",
+          "data-depth": String().padEnd(depth, "-"),
           style: { "--level": depth },
           children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { children: [
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36292,19 +36401,19 @@ const ExtrasItemRender = withViewModel(
               false,
               {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-                lineNumber: 27,
+                lineNumber: 28,
                 columnNumber: 13
               },
               void 0
             ),
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { 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: 32,
+              lineNumber: 33,
               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: 26,
+            lineNumber: 27,
             columnNumber: 11
           }, void 0)
         },
@@ -36324,7 +36433,10 @@ const ExtrasItemRender = withViewModel(
           name: property2,
           order,
           value: extras[property2],
-          isFitted: model.devtools.checkIsExtrasPropertyFitted(property2),
+          isFitted: model.devtools.searchEngine.getSearchPropertyResult(
+            { type: "extras", item: extras },
+            property2
+          ),
           level: depth + 1,
           path: property2
         },
@@ -36332,7 +36444,7 @@ const ExtrasItemRender = withViewModel(
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 11
         },
         void 0
@@ -36349,13 +36461,17 @@ const VmTreeItemRender = withViewModel(
   ({ model }) => {
     const vmItem = model.payload.vmItem;
     const isExpanded = model.devtools.isExpanded(vmItem);
-    const fittedInfo = model.devtools.getVMFittedInfo(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.line, css.vmTreeItem),
-          "data-fitted": fittedInfo.isFittedByName || fittedInfo.isFittedById,
+          "data-fitted": itemSearchResult.isFittedByName || itemSearchResult.isFittedById,
+          "data-depth": String().padEnd(vmItem.depth, "-"),
           style: { "--level": vmItem.depth },
           children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { onClick: () => model.handleVmItemHeaderClick(vmItem), children: [
             /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36370,24 +36486,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: 25,
+                lineNumber: 31,
                 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: 31,
+              lineNumber: 37,
               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: 32,
+              lineNumber: 38,
               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: 24,
+            lineNumber: 30,
             columnNumber: 11
           }, void 0)
         },
@@ -36395,19 +36511,27 @@ 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: 19,
+          lineNumber: 22,
           columnNumber: 9
         },
         void 0
       ),
-      vmItem.properties.map((property2, order) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+      vmItem.properties.map((property2, order, arr) => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         Property,
         {
           model,
           name: property2,
           order,
           value: vmItem.vm[property2],
-          isFitted: model.devtools.checkIsPropertyFitted(vmItem, property2),
+          isFitted: model.devtools.searchEngine.getSearchPropertyResult(
+            { type: "vm", item: vmItem },
+            property2
+          ),
+          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,
+            columnNumber: 17
+          }, void 0),
           level: vmItem.depth,
           path: property2
         },
@@ -36415,7 +36539,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: 36,
+          lineNumber: 42,
           columnNumber: 11
         },
         void 0
@@ -36429,14 +36553,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: 49,
+          lineNumber: 63,
           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: 18,
+      lineNumber: 21,
       columnNumber: 7
     }, void 0);
   }
@@ -36448,117 +36572,103 @@ const VmDevtoolsContent = observer(
     ...props
   }) => {
     const model = useViewModel();
-    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-      "div",
-      {
-        ...props,
-        className: cx(css.vmContent, className),
-        children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { 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: 28,
-              columnNumber: 11
-            }, void 0),
-            headerContent
-          ] }, void 0, true, {
+    return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { ...props, className: cx(css.vmContent, className), children: [
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { 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: 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",
+          {
+            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: 27,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentFilters, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-            "input",
-            {
-              value: model.devtools.search,
-              ref: model.devtools.inputRef,
-              autoFocus: true,
-              placeholder: "search by property path or ViewModel name",
-              onChange: model.devtools.handleSearchChange
-            },
-            void 0,
-            false,
-            {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-              lineNumber: 32,
-              columnNumber: 11
-            },
-            void 0
-          ) }, void 0, false, {
+            lineNumber: 33,
+            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: 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)
+      ] }, 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,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(oe, { className: css.vmContentTree, ref: model.devtools.scrollListRef, 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: 31,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(oe, { className: css.vmContentTree, ref: model.devtools.scrollListRef, 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: 42,
-                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: 48,
-                columnNumber: 13
-              },
-              void 0
-            )
-          ] }, void 0, true, {
+            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: 40,
-            columnNumber: 9
-          }, void 0)
-        ]
-      },
-      void 0,
-      true,
-      {
+            lineNumber: 51,
+            columnNumber: 13
+          },
+          void 0
+        )
+      ] }, void 0, true, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 23,
-        columnNumber: 7
-      },
-      void 0
-    );
+        lineNumber: 43,
+        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);
   }
 );
-const XMark = () => /* @__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",
-    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"
-  },
-  void 0,
-  false,
-  {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
-    lineNumber: 3,
-    columnNumber: 5
-  },
-  void 0
-) }, void 0, false, {
-  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
-  lineNumber: 2,
-  columnNumber: 3
-}, void 0);
 const VmDevtoolsPopup = observer(() => {
   const model = useViewModel();
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36767,6 +36877,14 @@ class KeyboardHandler2 extends KeyboardHandler$1 {
             devtools.isAllVmsExpandedByDefault = true;
           }
         },
+        {
+          shortcuts: ["Tab"],
+          action: (e) => {
+            if (devtools.searchEngine.searchInputRef.meta.focused) {
+              e.preventDefault();
+            }
+          }
+        },
         {
           shortcuts: ["Ctrl+ArrowDown"],
           action: () => {
@@ -36806,50 +36924,212 @@ class ViewModelStoreImpl extends ViewModelStoreBase {
     });
   }
 }
-const checkPath = (obj, path) => {
-  const parts = path.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (part in current) {
-      current = current[part];
-    } else {
-      return false;
-    }
-  }
-  return true;
-};
-const createFocusableRef = () => {
+const createFocusableRef = (cfg) => {
+  const handleFocus = action(() => {
+    ref.meta.focused = true;
+  });
+  const handleBlur = action(() => {
+    ref.meta.focused = false;
+  });
+  let lastNode;
   const ref = createRef({
     meta: {
       focused: false
     },
-    onSet: (input) => {
-      if (document.activeElement === input) {
+    onSet: (node) => {
+      if (document.activeElement === node) {
         runInAction(() => {
           ref.meta.focused = true;
         });
       }
-      input.addEventListener(
-        "focus",
-        action(() => {
-          ref.meta.focused = true;
-        })
-      );
-      input.addEventListener(
-        "blur",
-        action(() => {
-          ref.meta.focused = false;
-        })
-      );
+      node.addEventListener("focus", handleFocus);
+      node.addEventListener("blur", handleBlur);
+      cfg?.onSet?.(node);
+      lastNode = node;
+    },
+    onUnset: () => {
+      cfg?.onUnset?.();
+      lastNode?.removeEventListener("focus", handleFocus);
+      lastNode?.removeEventListener("blur", handleBlur);
+      lastNode = void 0;
     }
   });
   return ref;
 };
+class SearchEngine {
+  searchInputRef;
+  fittedVmIds = /* @__PURE__ */ new Set();
+  rawSearchText;
+  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();
+    this.segments.length = 0;
+    if (!this.formattedSearchText) {
+      return;
+    }
+    const segments = this.segments;
+    let startWithNextSegment = true;
+    for (let i = 0; i < searchText.length; ) {
+      const char = searchText[i];
+      if (i === 0 && char === ".") {
+        i++;
+        continue;
+      }
+      if (char === " ") {
+        i++;
+        continue;
+      }
+      if (char === ".") {
+        startWithNextSegment = true;
+        i++;
+        continue;
+      }
+      if (startWithNextSegment) {
+        segments.push("");
+        startWithNextSegment = false;
+      }
+      const lastIndex = segments.length - 1;
+      segments[lastIndex] += char.toLowerCase();
+      i++;
+    }
+  }
+  resetSearch = () => {
+    clearTimeout(this.searchTextUpdateTimeout);
+    this.setSearchText("");
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.value = "";
+    }
+  };
+  constructor() {
+    this.setSearchText("");
+    this.searchInputRef = createFocusableRef({
+      onSet: (input) => {
+        if (this.rawSearchText && input.value !== this.rawSearchText) {
+          input.value = this.rawSearchText;
+        }
+        input.addEventListener("input", () => {
+          clearTimeout(this.searchTextUpdateTimeout);
+          this.searchTextUpdateTimeout = setTimeout(() => {
+            this.setSearchText(input.value);
+          }, 100);
+        });
+      }
+    });
+    makeObservable(this, {
+      rawSearchText: observable.ref,
+      formattedSearchText: observable.ref,
+      isActive: computed,
+      cache: computed,
+      setSearchText: action.bound
+    });
+  }
+}
 class ViewModelDevtools {
   constructor(config) {
     this.config = config;
     this.isPopupOpened = !!this.config.defaultIsOpened;
-    this.search = "";
     this.displayType = "popup";
     this.extras = this.config.extras;
     this.vmStore = new ViewModelStoreImpl();
@@ -36857,15 +37137,15 @@ class ViewModelDevtools {
     this.expandedVmsSet = observable.set();
     this.isAllVmsExpandedByDefault = true;
     this.expandedVmItemsPaths = observable.set();
-    this.logoUrl = "https://js2me.github.io/mobx-view-model/logo.png";
+    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, {
       isPopupOpened: observable.ref,
       isAllVmsExpandedByDefault: observable,
-      search: observable.ref,
       projectVmStore: observable.ref,
       extras: observable.ref,
       setStore: action,
@@ -36874,11 +37154,8 @@ class ViewModelDevtools {
       handleExpandExtraPropertyClick: action,
       allVms: computed.struct,
       isActive: computed,
-      isInSearch: computed,
       vmTree: computed.struct,
-      rootVms: computed.struct,
-      handleSearchChange: action,
-      searchCache: computed
+      rootVms: computed.struct
     });
     this.render();
   }
@@ -36893,9 +37170,10 @@ class ViewModelDevtools {
   inputRef;
   scrollContentRef;
   keyboardHandler;
-  search;
+  searchEngine;
   expandedVmsSet;
   scrollListRef;
+  autoscrollTimeout;
   get allVms() {
     const vmStore = this.projectVmStore;
     const viewModelsMap = vmStore?.viewModels ?? /* @__PURE__ */ new Map();
@@ -36909,9 +37187,6 @@ class ViewModelDevtools {
       return !vmParams || vmParams.parentViewModel == null;
     });
   }
-  get formattedSearch() {
-    return this.search.toLowerCase().trim();
-  }
   get vmTree() {
     const flattenTreeItems = [];
     const result = [];
@@ -36932,7 +37207,11 @@ class ViewModelDevtools {
         children: [],
         depth,
         key: `${displayName}-${vm.id}-${depth}`,
-        properties: getAllKeys(vm)
+        properties: getAllKeys(vm),
+        searchData: {
+          name: displayName.toLowerCase().trim(),
+          id: (vm.id || "").toLowerCase().trim()
+        }
       };
       flattenTreeItems.push(treeItem);
       const collectedChildren = this.allVms.filter((maybeChildVm) => {
@@ -36953,101 +37232,27 @@ class ViewModelDevtools {
   get isActive() {
     return !!this.projectVmStore || Object.keys(this.extras || {}).length > 0;
   }
-  get isInSearch() {
-    return !!this.search.toLowerCase().trim();
+  get containerId() {
+    return this.config.containerId ?? "view-model-devtools";
   }
-  get searchCache() {
-    this.formattedSearch;
-    return /* @__PURE__ */ new Map();
+  isExpanded(vmItem) {
+    return this.expandedVmsSet.has(vmItem.key) || this.searchEngine.isActive || this.isAllVmsExpandedByDefault;
   }
-  getVMFittedInfo(vmTreeItem2) {
-    if (!this.isInSearch) {
-      return {
-        isFitted: true,
-        isFittedByName: true,
-        fittedProperties: []
-      };
-    }
-    if (this.searchCache.has(vmTreeItem2.key)) {
-      return this.searchCache.get(vmTreeItem2.key);
-    }
-    let isFittedByProperty = false;
-    const fittedProperties = [];
-    let isFittedByName = vmTreeItem2.displayName.toLowerCase().trim().includes(this.formattedSearch);
-    let isFittedByPropertyPath = checkPath(vmTreeItem2.vm, this.search);
-    if (!isFittedByPropertyPath && this.search.at(-1) === ".") {
-      isFittedByPropertyPath = checkPath(
-        vmTreeItem2.vm,
-        this.search.slice(0, -1)
-      );
-    }
-    let usedSearchForProperties = this.formattedSearch;
-    if (!isFittedByPropertyPath && this.search.split(".")[0].toLowerCase() === vmTreeItem2.displayName.toLowerCase()) {
-      const removedVmNameSearch = this.search.split(".").slice(1).join(".");
-      if (removedVmNameSearch) {
-        isFittedByPropertyPath = checkPath(vmTreeItem2.vm, removedVmNameSearch);
-      } else {
-        isFittedByPropertyPath = true;
-        isFittedByName = true;
-      }
-      usedSearchForProperties = removedVmNameSearch.toLowerCase().trim();
-    }
-    vmTreeItem2.properties.forEach((property2) => {
-      let isFitted2 = false;
-      if (isFittedByName) {
-        isFitted2 = true;
-      } else {
-        const formattedProperty = property2.toLowerCase().trim();
-        if (formattedProperty.includes(usedSearchForProperties)) {
-          isFitted2 = true;
-        } else if (usedSearchForProperties !== "." && `.${formattedProperty}`.includes(usedSearchForProperties)) {
-          isFitted2 = true;
+  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;
         }
-      }
-      if (isFittedByPropertyPath) {
-        const part = usedSearchForProperties.split(".")[0];
-        if (part === property2) {
-          isFitted2 = true;
+      } else {
+        if (searchResult.fittedPath.join(".").startsWith(path.toLowerCase())) {
+          return true;
         }
       }
-      if (!isFittedByProperty) {
-        isFittedByProperty = isFitted2;
-      }
-      if (isFitted2) {
-        fittedProperties.push(property2);
-      }
-    });
-    const isFittedById = !!vmTreeItem2.vm.id && vmTreeItem2.vm.id.includes(this.formattedSearch);
-    const isFitted = isFittedByName || isFittedById || isFittedByProperty || isFittedByPropertyPath;
-    this.searchCache.set(vmTreeItem2.key, {
-      isFitted,
-      isFittedById,
-      isFittedByName,
-      isFittedByPropertyPath,
-      fittedProperties
-    });
-    return this.searchCache.get(vmTreeItem2.key);
-  }
-  checkIsPropertyFitted(vmItem, property2) {
-    if (!this.isInSearch) {
-      return true;
-    }
-    return this.getVMFittedInfo(vmItem).fittedProperties.includes(property2);
-  }
-  checkIsExtrasPropertyFitted(property2) {
-    if (!this.isInSearch) {
-      return true;
-    }
-    return this.formattedSearch.includes(property2.toLowerCase());
-  }
-  isExpanded(vmItem) {
-    return this.expandedVmsSet.has(vmItem.key) || this.isInSearch || this.isAllVmsExpandedByDefault;
-  }
-  checkIsVmPathExpanded(vmItem, path) {
-    const vmFittedInfo = this.getVMFittedInfo(vmItem);
-    const firstPathSegment = (path.startsWith(".") ? path.slice(1) : path).split(".")[0];
-    if (firstPathSegment && vmFittedInfo.fittedProperties.includes(firstPathSegment)) {
-      return this.expandedVmItemsPaths.has(`${vmItem.key}%%%${path}`);
     }
     return this.expandedVmItemsPaths.has(`${vmItem.key}%%%${path}`);
   }
@@ -37078,9 +37283,6 @@ class ViewModelDevtools {
       this.expandedVmsSet.add(vmItem.key);
     }
   }
-  handleSearchChange = (e) => {
-    this.search = e.target.value;
-  };
   getVmParams(vm) {
     if ("vmParams" in vm) {
       return vm.vmParams;
@@ -37093,16 +37295,48 @@ class ViewModelDevtools {
   setExtras(extras) {
     this.extras = extras;
   }
+  init() {
+    reaction(
+      () => this.searchEngine.formattedSearchText,
+      () => {
+        clearTimeout(this.autoscrollTimeout);
+        this.autoscrollTimeout = setTimeout(() => {
+          if (!this.isActive) {
+            this.scrollListRef.current?.scrollTo(0);
+            return;
+          }
+          let maxLevel = 0;
+          let lastFoundElementIndex;
+          const htmlCollection = document.querySelectorAll(
+            `#${this.containerId} [data-fitted]`
+          );
+          htmlCollection.forEach(
+            (element, index) => {
+              if (element.dataset.fitted === "true" && element.dataset.depth && element.dataset.depth.length >= maxLevel) {
+                maxLevel = element.dataset.depth.length;
+                lastFoundElementIndex = index;
+              }
+            }
+          );
+          if (lastFoundElementIndex !== void 0) {
+            this.scrollListRef.current?.scrollToIndex(lastFoundElementIndex, {
+              align: "end",
+              smooth: true
+            });
+          }
+        }, 200);
+      }
+    );
+  }
   render() {
-    const containerId = this.config.containerId ?? "view-model-devtools";
     let container2 = document.querySelector(
-      `#${containerId}`
+      `#${this.containerId}`
     );
     if (!container2) {
       container2 = document.createElement("div");
       container2.style = "display: contents;";
       container2.className = css.rootContainer;
-      container2.id = containerId;
+      container2.id = this.containerId;
       if (document.body) {
         document.body.appendChild(container2);
       } else {
@@ -37110,6 +37344,7 @@ class ViewModelDevtools {
           document.body.appendChild(container2);
         });
       }
+      this.init();
     }
     const root = clientExports.createRoot(container2);
     root.render(reactExports.createElement(DevtoolsClient, { payload: { devtools: this } }));