mobx-view-model-devtools 0.0.4 → 0.0.6

package/{dist/index.js → 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{.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}}.block_O8-1d{display:block}.inline_gmkRL{display:inline}.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,)}}.vmButton_Xr1Q6{z-index:99;width:calc(var(--spacing)*9);height:calc(var(--spacing)*9);cursor:pointer;border-radius:var(--radius-lg);font-family:var(--font-mono);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}.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;font-family:var(--font-mono);background-color:#1e1e1e;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}.vmContent_VAE7p *{font-family:var(--font-mono)}.vmContentTree_BB36O{padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);flex-direction:column;display:flex}.vmTreeItem_t-7jc{flex-direction:column;display:flex}.vmTreeItem_t-7jc.line_Xgaua{top:calc(22px + 22px*var(--level,0));background:#1e1e1e;position:sticky}.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}.vmTreeItem_t-7jc>header>label{background:#0f6013;border-radius:4px;padding:0 4px}.vmTreeItem_t-7jc>header>span{color:#5ab65e;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.vmTreeItem_t-7jc:not([data-fitted=true])>header{opacity:.6}.vmContentFilters_No1QW{z-index:99;background:#1e1e1e;width:100%;padding:0 8px;position:sticky;top:0}.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;font-family:var(--font-mono);white-space:pre;height:22px;z-index:calc((var(--level,0) + 1)*10000 + (var(--order,0)));padding-left:calc(10px + (var(--level)*14px));background:#1e1e1e;flex-direction:row;align-items:center;font-size:14px;display:flex;position:relative;overflow:hidden}.line_Xgaua:has(>.expandButton_EObqt.expanded_uFpb7){top:calc(22px + 22px*(var(--level,0) + 1));position:sticky}.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}.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,)}}.vmButton_Xr1Q6{z-index:99;width:calc(var(--spacing)*9);height:calc(var(--spacing)*9);cursor:pointer;border-radius:var(--radius-lg);font-family:var(--font-mono);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}.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;font-family:var(--font-mono);background-color:#1e1e1e;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}.vmContent_VAE7p *{font-family:var(--font-mono)}.vmContentTree_BB36O{padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);flex-direction:column;display:flex}.vmTreeItem_t-7jc{flex-direction:column;display:flex}.vmTreeItem_t-7jc.line_Xgaua{top:calc(22px + 22px*var(--level,0));background:#1e1e1e;position:sticky}.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}.vmTreeItem_t-7jc>header>label{background:#0f6013;border-radius:4px;padding:0 4px}.vmTreeItem_t-7jc>header>span{color:#5ab65e;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.vmTreeItem_t-7jc:not([data-fitted=true])>header{opacity:.6}.vmContentFilters_No1QW{z-index:99;background:#1e1e1e;width:100%;padding:0 8px;position:sticky;top:0}.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;font-family:var(--font-mono);white-space:pre;height:22px;z-index:calc((var(--level,0) + 1)*10000 + (var(--order,0)));padding-left:calc(10px + (var(--level)*14px));background:#1e1e1e;flex-direction:row;align-items:center;font-size:14px;display:flex;position:relative;overflow:hidden}.line_Xgaua:has(>.expandButton_EObqt.expanded_uFpb7){top:calc(22px + 22px*(var(--level,0) + 1));position:sticky}.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)}}();
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -47,179 +47,10 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _searchCache_dec, _a2, _init;
+var _searchCache_dec, _init;
 import require$$0, { useState, forwardRef, memo, createContext, useContext, useRef, useEffect, useLayoutEffect, useMemo, useReducer, useImperativeHandle, createElement } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import require$$0$1, { unstable_batchedUpdates, flushSync } from "react-dom";
-var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
-var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root = freeGlobal || freeSelf || Function("return this")();
-var Symbol$1 = root.Symbol;
-var objectProto$1 = Object.prototype;
-var hasOwnProperty = objectProto$1.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$1.toString;
-var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
-function getRawTag(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
-  try {
-    value[symToStringTag$1] = void 0;
-    var unmasked = true;
-  } catch (e) {
-  }
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-var objectProto = Object.prototype;
-var nativeObjectToString = objectProto.toString;
-function objectToString(value) {
-  return nativeObjectToString.call(value);
-}
-var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
-var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
-function baseGetTag(value) {
-  if (value == null) {
-    return value === void 0 ? undefinedTag : nullTag;
-  }
-  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
-}
-function isObjectLike(value) {
-  return value != null && typeof value == "object";
-}
-var symbolTag = "[object Symbol]";
-function isSymbol$1(value) {
-  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
-}
-var reWhitespace = /\s/;
-function trimmedEndIndex(string2) {
-  var index = string2.length;
-  while (index-- && reWhitespace.test(string2.charAt(index))) {
-  }
-  return index;
-}
-var reTrimStart = /^\s+/;
-function baseTrim(string2) {
-  return string2 ? string2.slice(0, trimmedEndIndex(string2) + 1).replace(reTrimStart, "") : string2;
-}
-function isObject$2(value) {
-  var type = typeof value;
-  return value != null && (type == "object" || type == "function");
-}
-var NAN = 0 / 0;
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-var reIsBinary = /^0b[01]+$/i;
-var reIsOctal = /^0o[0-7]+$/i;
-var freeParseInt = parseInt;
-function toNumber(value) {
-  if (typeof value == "number") {
-    return value;
-  }
-  if (isSymbol$1(value)) {
-    return NAN;
-  }
-  if (isObject$2(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject$2(other) ? other + "" : other;
-  }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
-}
-var now = function() {
-  return root.Date.now();
-};
-var FUNC_ERROR_TEXT = "Expected a function";
-var nativeMax = Math.max, nativeMin = Math.min;
-function debounce(func, wait, options) {
-  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject$2(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  function leadingEdge(time) {
-    lastInvokeTime = time;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time) : result;
-  }
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
-    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
-  }
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-  function trailingEdge(time) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = void 0;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== void 0) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = void 0;
-  }
-  function flush() {
-    return timerId === void 0 ? result : trailingEdge(now());
-  }
-  function debounced() {
-    var time = now(), isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-    if (isInvoking) {
-      if (timerId === void 0) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
 var niceErrors = {
   0: "Invalid value for configuration 'enforceActions', expected 'never', 'always' or 'observed'",
   1: function _(annotationType, key) {
@@ -424,8 +255,8 @@ function isES6Map(thing) {
 }
 function isPlainES6Map(thing) {
   var mapProto = Object.getPrototypeOf(thing);
-  var objectProto2 = Object.getPrototypeOf(mapProto);
-  var nullProto = Object.getPrototypeOf(objectProto2);
+  var objectProto = Object.getPrototypeOf(mapProto);
+  var nullProto = Object.getPrototypeOf(objectProto);
   return nullProto === null;
 }
 function isES6Set(thing) {
@@ -4960,9 +4791,9 @@ var TimerBasedFinalizationRegistry = (
           }
           clearTimeout(_this.sweepTimeout);
           _this.sweepTimeout = void 0;
-          var now2 = Date.now();
+          var now = Date.now();
           _this.registrations.forEach(function(registration, token) {
-            if (now2 - registration.registeredAt >= maxAge) {
+            if (now - registration.registeredAt >= maxAge) {
               _this.finalize(registration.value);
               _this.registrations.delete(token);
             }
@@ -5016,8 +4847,8 @@ var TimerBasedFinalizationRegistry = (
 );
 var UniversalFinalizationRegistry = typeof FinalizationRegistry !== "undefined" ? FinalizationRegistry : TimerBasedFinalizationRegistry;
 var observerFinalizationRegistry = new UniversalFinalizationRegistry(function(adm) {
-  var _a3;
-  (_a3 = adm.reaction) === null || _a3 === void 0 ? void 0 : _a3.dispose();
+  var _a2;
+  (_a2 = adm.reaction) === null || _a2 === void 0 ? void 0 : _a2.dispose();
   adm.reaction = null;
 });
 var shim = { exports: {} };
@@ -5166,9 +4997,9 @@ function requireShim() {
 var shimExports = requireShim();
 function createReaction(adm) {
   adm.reaction = new Reaction("observer".concat(adm.name), function() {
-    var _a3;
+    var _a2;
     adm.stateVersion = Symbol();
-    (_a3 = adm.onStoreChange) === null || _a3 === void 0 ? void 0 : _a3.call(adm);
+    (_a2 = adm.onStoreChange) === null || _a2 === void 0 ? void 0 : _a2.call(adm);
   });
 }
 function useObserver(render, baseComponentName) {
@@ -5190,9 +5021,9 @@ function useObserver(render, baseComponentName) {
           adm_1.stateVersion = Symbol();
         }
         return function() {
-          var _a3;
+          var _a2;
           adm_1.onStoreChange = null;
-          (_a3 = adm_1.reaction) === null || _a3 === void 0 ? void 0 : _a3.dispose();
+          (_a2 = adm_1.reaction) === null || _a2 === void 0 ? void 0 : _a2.dispose();
           adm_1.reaction = null;
         };
       },
@@ -5241,12 +5072,12 @@ var ReactMemoSymbol = hasSymbol ? Symbol.for("react.memo") : typeof memo === "fu
   return null;
 })["$$typeof"];
 function observer(baseComponent, options) {
-  var _a3;
+  var _a2;
   if (process.env.NODE_ENV !== "production" && warnObserverOptionsDeprecated && options) ;
   if (ReactMemoSymbol && baseComponent["$$typeof"] === ReactMemoSymbol) {
     throw new Error("[mobx-react-lite] You are trying to use `observer` on a function component wrapped in either another `observer` or `React.memo`. The observer already applies 'React.memo' for you.");
   }
-  var useForwardRef = (_a3 = void 0) !== null && _a3 !== void 0 ? _a3 : false;
+  var useForwardRef = (_a2 = void 0) !== null && _a2 !== void 0 ? _a2 : false;
   var render = baseComponent;
   var baseComponentName = baseComponent.displayName || baseComponent.name;
   if (ReactForwardRefSymbol && baseComponent["$$typeof"] === ReactForwardRefSymbol) {
@@ -5284,8 +5115,8 @@ function observer(baseComponent, options) {
   if ("production" !== process.env.NODE_ENV) {
     Object.defineProperty(observerComponent, "contextTypes", {
       set: function() {
-        var _a4, _b2;
-        throw new Error("[mobx-react-lite] `".concat(this.displayName || ((_a4 = this.type) === null || _a4 === void 0 ? void 0 : _a4.displayName) || ((_b2 = this.type) === null || _b2 === void 0 ? void 0 : _b2.name) || "Component", ".contextTypes` must be set before applying `observer`."));
+        var _a3, _b2;
+        throw new Error("[mobx-react-lite] `".concat(this.displayName || ((_a3 = this.type) === null || _a3 === void 0 ? void 0 : _a3.displayName) || ((_b2 = this.type) === null || _b2 === void 0 ? void 0 : _b2.name) || "Component", ".contextTypes` must be set before applying `observer`."));
       }
     });
   }
@@ -5719,7 +5550,7 @@ const _createHooksMap = function _createHooksMap2() {
 };
 function createDOMPurify() {
   let window2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getGlobal();
-  const DOMPurify = (root2) => createDOMPurify(root2);
+  const DOMPurify = (root) => createDOMPurify(root);
   DOMPurify.version = "3.3.0";
   DOMPurify.removed = [];
   if (!window2 || !window2.document || window2.document.nodeType !== NODE_TYPE.document || !window2.Element) {
@@ -6122,10 +5953,10 @@ function createDOMPurify() {
     }
     return WHOLE_DOCUMENT ? doc.documentElement : body;
   };
-  const _createNodeIterator = function _createNodeIterator2(root2) {
+  const _createNodeIterator = function _createNodeIterator2(root) {
     return createNodeIterator.call(
-      root2.ownerDocument || root2,
-      root2,
+      root.ownerDocument || root,
+      root,
       // eslint-disable-next-line no-bitwise
       NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION,
       null
@@ -6709,12 +6540,12 @@ const useCreateViewModelSimple = (VM, payload) => {
 const useViewModel = (vmLookup) => {
   const viewModels = useContext(ViewModelsContext);
   const activeViewModel = useContext(ActiveViewModelContext);
-  const model = viewModels?.get(vmLookup);
+  viewModels?.get(vmLookup);
   let devModeModelRef = void 0;
   if (process.env.NODE_ENV !== "production") {
     devModeModelRef = useRef();
   }
-  if (vmLookup == null || !viewModels) {
+  {
     if (process.env.NODE_ENV !== "production" && !viewModels) {
       console.warn(
         "Warning #1: ViewModelStore not found.\n",
@@ -6738,35 +6569,6 @@ const useViewModel = (vmLookup) => {
     }
     return activeViewModel;
   }
-  if (!model) {
-    let displayName = "";
-    if (typeof vmLookup === "string") {
-      displayName = vmLookup;
-    } else if ("name" in vmLookup) {
-      displayName = vmLookup.name;
-    } else {
-      displayName = vmLookup.displayName;
-    }
-    if (process.env.NODE_ENV !== "production") {
-      if (devModeModelRef.current) {
-        return devModeModelRef.current;
-      } else {
-        throw new Error(
-          `Error #2: View model not found for ${displayName}.
-This happened because your "vmLookup" provided for hook "useViewModel" is not found in "ViewModelStore".
-More info: https://js2me.github.io/mobx-view-model/errors/2`
-        );
-      }
-    } else {
-      throw new Error(
-        "Error #2: https://js2me.github.io/mobx-view-model/errors/2"
-      );
-    }
-  }
-  if (process.env.NODE_ENV !== "production") {
-    devModeModelRef.current = activeViewModel;
-  }
-  return model;
 };
 observer(
   ({
@@ -7254,356 +7056,93 @@ class ViewModelStoreBase {
     this.viewModelsTempHeap.clear();
   }
 }
-class LinkedAbortController extends AbortController {
-  constructor(...abortSignals) {
-    super();
-    this.link(...abortSignals);
-  }
-  link(...abortSignals) {
-    abortSignals.forEach((abortSignal) => {
-      abortSignal?.addEventListener("abort", () => {
-        this.abort(abortSignal.reason);
-      });
-    });
-  }
+class DevtoolsClientVM extends ViewModelBase {
+  devtools = this.payload.devtools;
 }
-const callFunction = (fn, ...args) => {
-  if (typeof fn === "function") {
-    return fn(...args);
-  }
-  return fn;
-};
-class KeyboardHandler {
-  constructor(config) {
-    this.config = config;
-    this.abortController = new LinkedAbortController(config.abortSignal);
-    this.activateStrategy = this.config.activateStrategy ?? {
-      type: "immidiately"
+class DevtoolsVMImpl extends ViewModelBase {
+}
+var client = {};
+var hasRequiredClient;
+function requireClient() {
+  if (hasRequiredClient) return client;
+  hasRequiredClient = 1;
+  var m2 = require$$0$1;
+  if (process.env.NODE_ENV === "production") {
+    client.createRoot = m2.createRoot;
+    client.hydrateRoot = m2.hydrateRoot;
+  } else {
+    var i = m2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    client.createRoot = function(c, o) {
+      i.usingClientEntryPoint = true;
+      try {
+        return m2.createRoot(c, o);
+      } finally {
+        i.usingClientEntryPoint = false;
+      }
+    };
+    client.hydrateRoot = function(c, h2, o) {
+      i.usingClientEntryPoint = true;
+      try {
+        return m2.hydrateRoot(c, h2, o);
+      } finally {
+        i.usingClientEntryPoint = false;
+      }
     };
-    this.isActivated = !!(this.activateStrategy.type === "immidiately");
-    observable.ref(this, "isActivated");
-    computed.struct(this, "actions");
-    action.bound(this, "handleKeyboardClick");
-    makeObservable(this);
-    if (this.activateStrategy.type === "element-focus") {
-      const ref = this.activateStrategy.ref;
-      let nodeAbortController = new LinkedAbortController();
-      reaction(
-        () => ref.current,
-        (node) => {
-          if (node) {
-            if (globalThis.document?.activeElement === node) {
-              this.activate();
-            }
-            node.addEventListener("focus", this.activate, {
-              signal: nodeAbortController.signal
-            });
-            node.addEventListener("blur", this.deactivate, {
-              signal: nodeAbortController.signal
-            });
-          } else {
-            nodeAbortController.abort();
-            nodeAbortController = new LinkedAbortController(
-              this.abortController.signal
-            );
-          }
-        },
-        { fireImmediately: true, signal: this.abortController.signal }
-      );
-    }
-    globalThis.addEventListener("keydown", this.handleKeyboardClick, {
-      signal: this.abortController.signal
-    });
-    if (config.activateStrategy?.type === "keyclick") {
-      globalThis.addEventListener("click", this.activate, {
-        signal: this.abortController.signal
-      });
-      globalThis.addEventListener("mousemove", this.activate, {
-        signal: this.abortController.signal
-      });
-    }
-  }
-  abortController;
-  activateStrategy;
-  /**
-   * Is user using keyboard input
-   */
-  isActivated;
-  /**
-   * User actions
-   */
-  get actions() {
-    return callFunction(this.config.actions) ?? [];
   }
-  activate = () => {
-    if (this.isActivated) {
-      return;
+  return client;
+}
+var clientExports = requireClient();
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const CLASS_PART_SEPARATOR = "-";
+const createClassGroupUtils = (config) => {
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = (className) => {
+    const classParts = className.split(CLASS_PART_SEPARATOR);
+    if (classParts[0] === "" && classParts.length !== 1) {
+      classParts.shift();
     }
-    this.isActivated = true;
-    this.config.onActivate?.();
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
   };
-  deactivate = () => {
-    if (!this.isActivated) {
-      return;
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    const conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
     }
-    this.isActivated = false;
-    this.config.onDeactivate?.();
+    return conflicts;
   };
-  handleKeyboardClick(event) {
-    this.config.onKeyClick?.(event);
-    if (this.activateStrategy.type === "keyclick") {
-      this.activate();
-    }
-    if (!this.isActivated) {
-      return;
-    }
-    for (const action2 of this.actions) {
-      const disabled2 = callFunction(action2.disabled);
-      if (disabled2) {
-        continue;
-      }
-      for (const shortcut of action2.shortcuts) {
-        const combinatedShortcuts = shortcut.split("+");
-        if (combinatedShortcuts.every(
-          (shortcut2) => this.checkShortcut(event, shortcut2)
-        )) {
-          runInAction(() => {
-            action2.action(event);
-          });
-          return;
-        }
-      }
-    }
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+const getGroupRecursive = (classParts, classPartObject) => {
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
   }
-  checkShortcut(event, shortcut) {
-    if (shortcut === "Shift" && event.shiftKey) return true;
-    if (shortcut === "Ctrl" && event.ctrlKey) return true;
-    if (shortcut === "Alt" && event.altKey) return true;
-    return shortcut === event.key;
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
   }
-  destroy() {
-    this.abortController.abort();
-  }
-}
-class KeyHanders extends KeyboardHandler {
-  constructor(vm) {
-    super({
-      abortSignal: vm.unmountSignal,
-      actions: [
-        {
-          shortcuts: ["Ctrl+Shift+F12"],
-          action: () => {
-            vm.handleToggleOpen();
-          }
-        },
-        {
-          shortcuts: ["Ctrl+ArrowLeft"],
-          action: () => {
-            vm.isAllVmsExpandedByDefault = false;
-          }
-        },
-        {
-          shortcuts: ["Ctrl+ArrowRight"],
-          action: () => {
-            vm.isAllVmsExpandedByDefault = true;
-          }
-        },
-        {
-          shortcuts: ["Ctrl+ArrowDown"],
-          action: () => {
-            requestAnimationFrame(() => {
-              vm.containerRef.current.scrollTop += 200;
-            });
-          }
-        },
-        {
-          shortcuts: ["Ctrl+ArrowUp"],
-          action: () => {
-            requestAnimationFrame(() => {
-              vm.containerRef.current.scrollTop -= 200;
-            });
-          }
-        }
-      ]
-    });
-  }
-}
-class DevtoolsVMImpl extends ViewModelBase {
-}
-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 ref = createRef({
-    meta: {
-      focused: false
-    },
-    onSet: (input) => {
-      if (document.activeElement === input) {
-        runInAction(() => {
-          ref.meta.focused = true;
-        });
-      }
-      input.addEventListener(
-        "focus",
-        action(() => {
-          ref.meta.focused = true;
-        })
-      );
-      input.addEventListener(
-        "blur",
-        action(() => {
-          ref.meta.focused = false;
-        })
-      );
-    }
-  });
-  return ref;
-};
-const ignoredKeys = /* @__PURE__ */ new Set(["constructor"]);
-const ignoredPrototypes = /* @__PURE__ */ new Set([
-  globalThis.Object.prototype,
-  globalThis.Function.prototype,
-  globalThis.Array.prototype,
-  globalThis.String.prototype,
-  globalThis.Number.prototype,
-  globalThis.Boolean.prototype,
-  globalThis.Symbol.prototype,
-  globalThis.Date.prototype,
-  globalThis.RegExp.prototype,
-  globalThis.Error.prototype,
-  globalThis.Map.prototype,
-  globalThis.Set.prototype,
-  globalThis.WeakMap.prototype,
-  globalThis.WeakSet.prototype,
-  globalThis.ArrayBuffer.prototype,
-  globalThis.DataView.prototype,
-  globalThis.Float32Array.prototype,
-  globalThis.Float64Array.prototype,
-  globalThis.Int8Array.prototype,
-  globalThis.Int16Array.prototype,
-  globalThis.Int32Array.prototype,
-  globalThis.Uint8Array.prototype,
-  globalThis.Uint8ClampedArray.prototype,
-  globalThis.Uint16Array.prototype,
-  globalThis.Uint32Array.prototype,
-  globalThis.BigInt64Array.prototype,
-  globalThis.BigUint64Array.prototype,
-  globalThis.Promise.prototype,
-  globalThis.Iterator.prototype
-]);
-function getAllKeys(instance2) {
-  const keysSet = new Set(Object.keys(instance2));
-  let currentPrototype = Object.getPrototypeOf(instance2);
-  while (currentPrototype) {
-    if (currentPrototype === globalThis.Object.prototype) {
-      break;
-    }
-    const descriptors = Object.getOwnPropertyDescriptors(currentPrototype);
-    for (const key in descriptors) {
-      if (!ignoredKeys.has(key)) {
-        keysSet.add(key);
-      }
-    }
-    const nextPrototype = Object.getPrototypeOf(currentPrototype);
-    if (ignoredPrototypes.has(nextPrototype)) {
-      break;
-    }
-    currentPrototype = nextPrototype;
-  }
-  return Array.from(keysSet);
-}
-var client = {};
-var hasRequiredClient;
-function requireClient() {
-  if (hasRequiredClient) return client;
-  hasRequiredClient = 1;
-  var m2 = require$$0$1;
-  if (process.env.NODE_ENV === "production") {
-    client.createRoot = m2.createRoot;
-    client.hydrateRoot = m2.hydrateRoot;
-  } else {
-    var i = m2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    client.createRoot = function(c, o) {
-      i.usingClientEntryPoint = true;
-      try {
-        return m2.createRoot(c, o);
-      } finally {
-        i.usingClientEntryPoint = false;
-      }
-    };
-    client.hydrateRoot = function(c, h2, o) {
-      i.usingClientEntryPoint = true;
-      try {
-        return m2.hydrateRoot(c, h2, o);
-      } finally {
-        i.usingClientEntryPoint = false;
-      }
-    };
-  }
-  return client;
-}
-var clientExports = requireClient();
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-const CLASS_PART_SEPARATOR = "-";
-const createClassGroupUtils = (config) => {
-  const classMap = createClassMap(config);
-  const {
-    conflictingClassGroups,
-    conflictingClassGroupModifiers
-  } = config;
-  const getClassGroupId = (className) => {
-    const classParts = className.split(CLASS_PART_SEPARATOR);
-    if (classParts[0] === "" && classParts.length !== 1) {
-      classParts.shift();
-    }
-    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
-  };
-  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
-    const conflicts = conflictingClassGroups[classGroupId] || [];
-    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
-      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
-    }
-    return conflicts;
-  };
-  return {
-    getClassGroupId,
-    getConflictingClassGroupIds
-  };
-};
-const getGroupRecursive = (classParts, classPartObject) => {
-  if (classParts.length === 0) {
-    return classPartObject.classGroupId;
-  }
-  const currentClassPart = classParts[0];
-  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
-  if (classGroupFromNextClassPart) {
-    return classGroupFromNextClassPart;
-  }
-  if (classPartObject.validators.length === 0) {
-    return void 0;
+  if (classPartObject.validators.length === 0) {
+    return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
   return classPartObject.validators.find(({
@@ -10518,9 +10057,6 @@ const getDefaultConfig = () => {
 };
 const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 const cx = (...args) => twMerge(clsx(...args));
-const container = "container_ueeVi";
-const block = "block_O8-1d";
-const inline = "inline_gmkRL";
 const blur = "blur_9rZ6A";
 const vmButton = "vmButton_Xr1Q6";
 const opened = "opened_gewqL";
@@ -10547,9 +10083,7 @@ const symbol = "symbol_9GN4U";
 const string = "string_m1Kkx";
 const disabled = "disabled_IDojS";
 const css = {
-  container,
-  block,
-  inline,
+  "static": "static_g5P-G",
   blur,
   vmButton,
   opened,
@@ -10579,25 +10113,24 @@ const css = {
   disabled
 };
 const VmDevtoolsButton = observer(() => {
-  const model = useViewModel(DevtoolsVM);
-  console.log("ddd", model);
+  const model = useViewModel();
   return /* @__PURE__ */ jsxs(
     "button",
     {
       className: cx(
         css.vmButton,
         {
-          [css.opened]: model.isOpened
+          [css.opened]: model.devtools.isOpened
         },
-        model.payload.buttonClassName
+        model.devtools.config.buttonClassName
       ),
-      "data-position": `${model.payload.position}`,
-      ref: model.buttonRef,
-      onClick: model.handleToggleOpen,
+      "data-position": `${model.devtools.config.position}`,
+      ref: model.devtools.buttonRef,
+      onClick: model.devtools.handleToggleOpen,
       children: [
-        /* @__PURE__ */ jsx("img", { src: model.logoUrl }),
+        /* @__PURE__ */ jsx("img", { src: model.devtools.logoUrl }),
         /* @__PURE__ */ jsx("div", {}),
-        /* @__PURE__ */ jsx("span", { children: model.allVms.length })
+        /* @__PURE__ */ jsx("span", { children: model.devtools.allVms.length })
       ]
     }
   );
@@ -10959,40 +10492,6 @@ const ExpandButton = ({
     }
   );
 };
-class VmTreeItemRenderVM extends DevtoolsVMImpl {
-  constructor(vmParams) {
-    super({
-      ...vmParams,
-      vmConfig: {
-        observable: {
-          viewModels: {
-            useDecorators: false
-          },
-          viewModelStores: {
-            useDecorators: false
-          }
-        }
-      }
-    });
-    makeObservable(this, {
-      devtoolsVM: computed.struct,
-      handleExpandPropertyClick: action,
-      handleVmItemHeaderClick: action
-    });
-  }
-  get devtoolsVM() {
-    return this.payload.devtoolsVM;
-  }
-  isPathExpanded(path) {
-    return this.devtoolsVM.checkIsPathExpanded(this.payload.vmItem, path);
-  }
-  handleExpandPropertyClick(path) {
-    this.devtoolsVM.handleExpandPropertyClick(this.payload.vmItem, path);
-  }
-  handleVmItemHeaderClick(vmItem) {
-    this.devtoolsVM.handleVmItemHeaderClick(vmItem);
-  }
-}
 const ArrayProperty = observer((props) => {
   const { name: property2, value } = props;
   const model = useViewModel();
@@ -11051,23 +10550,76 @@ const FunctionProperty = observer((props) => {
     }
   );
 });
-const InstanceProperty = observer((props) => {
-  const { name, value } = props;
-  const model = useViewModel();
-  const isExpanded = model.isPathExpanded(props.path);
-  const Constructor = value.constructor;
-  const className = Constructor.name;
-  const keys = getAllKeys(value);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(css.line, css.property, css.instance),
-        style: { "--level": props.level, "--order": props.order },
-        onClick: () => model.handleExpandPropertyClick(props.path),
-        "data-fitted": props.isFitted,
-        children: [
-          /* @__PURE__ */ jsx(ExpandButton, { expandable: true, expanded: isExpanded }),
+const ignoredKeys = /* @__PURE__ */ new Set(["constructor"]);
+const ignoredPrototypes = /* @__PURE__ */ new Set([
+  globalThis.Object.prototype,
+  globalThis.Function.prototype,
+  globalThis.Array.prototype,
+  globalThis.String.prototype,
+  globalThis.Number.prototype,
+  globalThis.Boolean.prototype,
+  globalThis.Symbol.prototype,
+  globalThis.Date.prototype,
+  globalThis.RegExp.prototype,
+  globalThis.Error.prototype,
+  globalThis.Map.prototype,
+  globalThis.Set.prototype,
+  globalThis.WeakMap.prototype,
+  globalThis.WeakSet.prototype,
+  globalThis.ArrayBuffer.prototype,
+  globalThis.DataView.prototype,
+  globalThis.Float32Array.prototype,
+  globalThis.Float64Array.prototype,
+  globalThis.Int8Array.prototype,
+  globalThis.Int16Array.prototype,
+  globalThis.Int32Array.prototype,
+  globalThis.Uint8Array.prototype,
+  globalThis.Uint8ClampedArray.prototype,
+  globalThis.Uint16Array.prototype,
+  globalThis.Uint32Array.prototype,
+  globalThis.BigInt64Array.prototype,
+  globalThis.BigUint64Array.prototype,
+  globalThis.Promise.prototype,
+  globalThis.Iterator.prototype
+]);
+function getAllKeys(instance2) {
+  const keysSet = new Set(Object.keys(instance2));
+  let currentPrototype = Object.getPrototypeOf(instance2);
+  while (currentPrototype) {
+    if (currentPrototype === globalThis.Object.prototype) {
+      break;
+    }
+    const descriptors = Object.getOwnPropertyDescriptors(currentPrototype);
+    for (const key in descriptors) {
+      if (!ignoredKeys.has(key)) {
+        keysSet.add(key);
+      }
+    }
+    const nextPrototype = Object.getPrototypeOf(currentPrototype);
+    if (ignoredPrototypes.has(nextPrototype)) {
+      break;
+    }
+    currentPrototype = nextPrototype;
+  }
+  return Array.from(keysSet);
+}
+const InstanceProperty = observer((props) => {
+  const { name, value } = props;
+  const model = useViewModel();
+  const isExpanded = model.isPathExpanded(props.path);
+  const Constructor = value.constructor;
+  const className = Constructor.name;
+  const keys = getAllKeys(value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(css.line, css.property, css.instance),
+        style: { "--level": props.level, "--order": props.order },
+        onClick: () => model.handleExpandPropertyClick(props.path),
+        "data-fitted": props.isFitted,
+        children: [
+          /* @__PURE__ */ jsx(ExpandButton, { expandable: true, expanded: isExpanded }),
           /* @__PURE__ */ jsx("span", { className: css.propertyName, children: name }),
           /* @__PURE__ */ jsx("span", { className: css.propertyMeta, children: ": " }),
           /* @__PURE__ */ jsx("span", { className: css.propertyValue, children: `${className}` })
@@ -11170,8 +10722,8 @@ const VmTreeItemRender = withViewModel(
   VmTreeItemRenderVM,
   ({ model }) => {
     const vmItem = model.payload.vmItem;
-    const isExpanded = model.devtoolsVM.isExpanded(vmItem);
-    const fittedInfo = model.devtoolsVM.getVMFittedInfo(vmItem);
+    const isExpanded = model.devtools.isExpanded(vmItem);
+    const fittedInfo = model.devtools.getVMFittedInfo(vmItem);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -11185,7 +10737,7 @@ const VmTreeItemRender = withViewModel(
               {
                 expandable: vmItem.children.length > 0,
                 expanded: isExpanded,
-                disabled: model.devtoolsVM.isAllVmsExpandedByDefault
+                disabled: model.devtools.isAllVmsExpandedByDefault
               }
             ),
             /* @__PURE__ */ jsx("label", { title: vmItem.displayName, children: vmItem.displayName }),
@@ -11200,7 +10752,7 @@ const VmTreeItemRender = withViewModel(
           name: property2,
           order,
           value: vmItem.vm[property2],
-          isFitted: model.devtoolsVM.checkIsPropertyFitted(vmItem, property2),
+          isFitted: model.devtools.checkIsPropertyFitted(vmItem, property2),
           level: vmItem.depth,
           path: property2
         },
@@ -11209,7 +10761,7 @@ const VmTreeItemRender = withViewModel(
       isExpanded && vmItem.children.map((child) => /* @__PURE__ */ jsx(
         VmTreeItemRender,
         {
-          payload: { vmItem: child, devtoolsVM: model.devtoolsVM }
+          payload: { vmItem: child, devtools: model.devtools }
         },
         child.key
       ))
@@ -11228,7 +10780,7 @@ const VmDevtoolsContent = observer(
       {
         ...props,
         className: cx(css.vmContent, className),
-        ref: model.containerRef,
+        ref: model.devtools.containerRef,
         children: [
           /* @__PURE__ */ jsxs("header", { children: [
             /* @__PURE__ */ jsx("span", { children: "mobx-view-model devtools" }),
@@ -11237,17 +10789,17 @@ const VmDevtoolsContent = observer(
           /* @__PURE__ */ jsx("div", { className: css.vmContentFilters, children: /* @__PURE__ */ jsx(
             "input",
             {
-              value: model.search,
-              ref: model.inputRef,
+              value: model.devtools.search,
+              ref: model.devtools.inputRef,
               autoFocus: true,
               placeholder: "search by property path or ViewModel name",
-              onChange: model.handleSearchChange
+              onChange: model.devtools.handleSearchChange
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: css.vmContentTree, children: /* @__PURE__ */ jsx(te, { children: model.vmTree.map((vmItem) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: css.vmContentTree, children: /* @__PURE__ */ jsx(te, { children: model.devtools.vmTree.map((vmItem) => /* @__PURE__ */ jsx(
             VmTreeItemRender,
             {
-              payload: { vmItem, devtoolsVM: model }
+              payload: { vmItem, devtools: model.devtools }
             },
             vmItem.key
           )) }) })
@@ -11262,8 +10814,8 @@ const VmDevtoolsPopup = observer(() => {
     VmDevtoolsContent,
     {
       className: css.vmPopup,
-      "data-position": `${model.payload.position}`,
-      headerContent: /* @__PURE__ */ jsx("button", { onClick: model.handleToggleOpen, children: /* @__PURE__ */ jsx(
+      "data-position": `${model.devtools.config.position}`,
+      headerContent: /* @__PURE__ */ jsx("button", { onClick: model.devtools.handleToggleOpen, children: /* @__PURE__ */ jsx(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -11283,50 +10835,261 @@ const VmDevtoolsPopup = observer(() => {
     }
   );
 });
-const DevtoolsClientView = observer(({ model }) => {
-  return /* @__PURE__ */ jsx(ViewModelsProvider, { value: model.vmStore, children: /* @__PURE__ */ jsxs(ActiveViewModelProvider, { value: model, children: [
+const DevtoolsClient = withViewModel(DevtoolsClientVM, ({ model }) => {
+  return /* @__PURE__ */ jsx(ViewModelsProvider, { value: model.devtools.vmStore, children: /* @__PURE__ */ jsxs(ActiveViewModelProvider, { value: model, children: [
     /* @__PURE__ */ jsx(VmDevtoolsButton, {}),
-    model.isOpened && model.displayType === "popup" && /* @__PURE__ */ jsx(VmDevtoolsPopup, {})
+    model.devtools.isOpened && model.devtools.displayType === "popup" && /* @__PURE__ */ jsx(VmDevtoolsPopup, {})
   ] }) });
 });
-const renderDevtools = (container2, model) => {
-  const root2 = clientExports.createRoot(container2);
-  root2.render(
-    /* @__PURE__ */ jsx(DevtoolsClientView, { model })
-  );
+class LinkedAbortController extends AbortController {
+  constructor(...abortSignals) {
+    super();
+    this.link(...abortSignals);
+  }
+  link(...abortSignals) {
+    abortSignals.forEach((abortSignal) => {
+      abortSignal?.addEventListener("abort", () => {
+        this.abort(abortSignal.reason);
+      });
+    });
+  }
+}
+const callFunction = (fn, ...args) => {
+  if (typeof fn === "function") {
+    return fn(...args);
+  }
+  return fn;
 };
-class DevtoolsVM extends (_a2 = DevtoolsVMImpl, _searchCache_dec = [computed], _a2) {
-  constructor(vmParams) {
-    super({
-      ...vmParams,
-      vmConfig: {
-        observable: {
-          viewModels: {
-            useDecorators: false
+let KeyboardHandler$1 = class KeyboardHandler {
+  constructor(config) {
+    this.config = config;
+    this.abortController = new LinkedAbortController(config.abortSignal);
+    this.activateStrategy = this.config.activateStrategy ?? {
+      type: "immidiately"
+    };
+    this.isActivated = !!(this.activateStrategy.type === "immidiately");
+    observable.ref(this, "isActivated");
+    computed.struct(this, "actions");
+    action.bound(this, "handleKeyboardClick");
+    makeObservable(this);
+    if (this.activateStrategy.type === "element-focus") {
+      const ref = this.activateStrategy.ref;
+      let nodeAbortController = new LinkedAbortController();
+      reaction(
+        () => ref.current,
+        (node) => {
+          if (node) {
+            if (globalThis.document?.activeElement === node) {
+              this.activate();
+            }
+            node.addEventListener("focus", this.activate, {
+              signal: nodeAbortController.signal
+            });
+            node.addEventListener("blur", this.deactivate, {
+              signal: nodeAbortController.signal
+            });
+          } else {
+            nodeAbortController.abort();
+            nodeAbortController = new LinkedAbortController(
+              this.abortController.signal
+            );
           }
+        },
+        { fireImmediately: true, signal: this.abortController.signal }
+      );
+    }
+    globalThis.addEventListener("keydown", this.handleKeyboardClick, {
+      signal: this.abortController.signal
+    });
+    if (config.activateStrategy?.type === "keyclick") {
+      globalThis.addEventListener("click", this.activate, {
+        signal: this.abortController.signal
+      });
+      globalThis.addEventListener("mousemove", this.activate, {
+        signal: this.abortController.signal
+      });
+    }
+  }
+  abortController;
+  activateStrategy;
+  /**
+   * Is user using keyboard input
+   */
+  isActivated;
+  /**
+   * User actions
+   */
+  get actions() {
+    return callFunction(this.config.actions) ?? [];
+  }
+  activate = () => {
+    if (this.isActivated) {
+      return;
+    }
+    this.isActivated = true;
+    this.config.onActivate?.();
+  };
+  deactivate = () => {
+    if (!this.isActivated) {
+      return;
+    }
+    this.isActivated = false;
+    this.config.onDeactivate?.();
+  };
+  handleKeyboardClick(event) {
+    this.config.onKeyClick?.(event);
+    if (this.activateStrategy.type === "keyclick") {
+      this.activate();
+    }
+    if (!this.isActivated) {
+      return;
+    }
+    for (const action2 of this.actions) {
+      const disabled2 = callFunction(action2.disabled);
+      if (disabled2) {
+        continue;
+      }
+      for (const shortcut of action2.shortcuts) {
+        const combinatedShortcuts = shortcut.split("+");
+        if (combinatedShortcuts.every(
+          (shortcut2) => this.checkShortcut(event, shortcut2)
+        )) {
+          runInAction(() => {
+            action2.action(event);
+          });
+          return;
         }
       }
+    }
+  }
+  checkShortcut(event, shortcut) {
+    if (shortcut === "Shift" && event.shiftKey) return true;
+    if (shortcut === "Ctrl" && event.ctrlKey) return true;
+    if (shortcut === "Alt" && event.altKey) return true;
+    return shortcut === event.key;
+  }
+  destroy() {
+    this.abortController.abort();
+  }
+};
+class KeyboardHandler2 extends KeyboardHandler$1 {
+  constructor(devtools) {
+    super({
+      actions: [
+        {
+          shortcuts: ["Ctrl+Shift+F12"],
+          action: () => {
+            devtools.handleToggleOpen();
+          }
+        },
+        {
+          shortcuts: ["Ctrl+ArrowLeft"],
+          action: () => {
+            devtools.isAllVmsExpandedByDefault = false;
+          }
+        },
+        {
+          shortcuts: ["Ctrl+ArrowRight"],
+          action: () => {
+            devtools.isAllVmsExpandedByDefault = true;
+          }
+        },
+        {
+          shortcuts: ["Ctrl+ArrowDown"],
+          action: () => {
+            requestAnimationFrame(() => {
+              devtools.containerRef.current.scrollTop += 200;
+            });
+          }
+        },
+        {
+          shortcuts: ["Ctrl+ArrowUp"],
+          action: () => {
+            requestAnimationFrame(() => {
+              devtools.containerRef.current.scrollTop -= 200;
+            });
+          }
+        }
+      ]
     });
+  }
+}
+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 ref = createRef({
+    meta: {
+      focused: false
+    },
+    onSet: (input) => {
+      if (document.activeElement === input) {
+        runInAction(() => {
+          ref.meta.focused = true;
+        });
+      }
+      input.addEventListener(
+        "focus",
+        action(() => {
+          ref.meta.focused = true;
+        })
+      );
+      input.addEventListener(
+        "blur",
+        action(() => {
+          ref.meta.focused = false;
+        })
+      );
+    }
+  });
+  return ref;
+};
+_searchCache_dec = [computed];
+const _ViewModelDevtools = class _ViewModelDevtools {
+  constructor(config) {
     __runInitializers(_init, 5, this);
-    __publicField(this, "isOpened", !!this.payload.defaultIsOpened);
-    __publicField(this, "displayType", "popup");
-    __publicField(this, "vmStore", new ViewModelStoreBase());
-    __publicField(this, "projectVmStore", this.payload.viewModels);
-    __publicField(this, "handleToggleOpen", () => {
-      this.isOpened = !this.isOpened;
-    });
-    __publicField(this, "expandedVmsSet", observable.set());
-    __publicField(this, "isAllVmsExpandedByDefault", true);
-    __publicField(this, "expandedVmItemsPaths", observable.set());
-    __publicField(this, "logoUrl", "https://js2me.github.io/mobx-view-model/logo.png");
-    __publicField(this, "inputRef", createFocusableRef());
-    __publicField(this, "containerRef", createFocusableRef());
-    __publicField(this, "buttonRef", createRef());
-    __publicField(this, "keyboardHandler", new KeyHanders(this));
-    __publicField(this, "search", "");
+    __publicField(this, "isOpened");
+    __publicField(this, "displayType");
+    __publicField(this, "vmStore");
+    __publicField(this, "projectVmStore");
+    __publicField(this, "isAllVmsExpandedByDefault");
+    __publicField(this, "expandedVmItemsPaths");
+    __publicField(this, "logoUrl");
+    __publicField(this, "inputRef");
+    __publicField(this, "containerRef");
+    __publicField(this, "buttonRef");
+    __publicField(this, "keyboardHandler");
+    __publicField(this, "search");
+    __publicField(this, "expandedVmsSet");
     __publicField(this, "handleSearchChange", (e) => {
       this.search = e.target.value;
     });
+    __publicField(this, "handleToggleOpen", () => {
+      this.isOpened = !this.isOpened;
+    });
+    this.config = config;
+    this.isOpened = !!this.config.defaultIsOpened;
+    this.search = "";
+    this.displayType = "popup";
+    this.vmStore = new ViewModelStoreBase();
+    this.projectVmStore = this.config.viewModels;
+    this.expandedVmsSet = observable.set();
+    this.isAllVmsExpandedByDefault = true;
+    this.expandedVmItemsPaths = observable.set();
+    this.logoUrl = "https://js2me.github.io/mobx-view-model/logo.png";
+    this.inputRef = createFocusableRef();
+    this.containerRef = createFocusableRef();
+    this.buttonRef = createRef();
+    this.keyboardHandler = new KeyboardHandler2(this);
     makeObservable(this, {
       isOpened: observable.ref,
       isAllVmsExpandedByDefault: observable,
@@ -11340,24 +11103,7 @@ class DevtoolsVM extends (_a2 = DevtoolsVMImpl, _searchCache_dec = [computed], _
       rootVms: computed.struct,
       handleSearchChange: action
     });
-    const debouncedFocusOnFittedElement = debounce(([search]) => {
-      if (search) {
-        document.querySelector('[data-fitted="true"]')?.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "center"
-        });
-      }
-    }, 140);
-    reaction(
-      () => [
-        this.formattedSearch,
-        this.allVms,
-        this.isAllVmsExpandedByDefault
-      ],
-      debouncedFocusOnFittedElement,
-      { signal: this.unmountSignal }
-    );
+    this.render();
   }
   get vmMap() {
     return this.getViewModelsMap();
@@ -11528,22 +11274,62 @@ class DevtoolsVM extends (_a2 = DevtoolsVMImpl, _searchCache_dec = [computed], _
     return null;
   }
   getViewModelsMap() {
-    const vmStore = this.payload.viewModels ?? this.projectVmStore;
+    const vmStore = this.config.viewModels ?? this.projectVmStore;
     return vmStore?.viewModels ?? /* @__PURE__ */ new Map();
   }
-  willMount() {
-    this.vmStore.attach(this);
-    const container2 = document.createElement("div");
-    document.body.appendChild(container2);
-    renderDevtools(container2, this);
+  render() {
+    const containerId = this.config.containerId ?? "view-model-devtools";
+    let existedContainer = document.querySelector(
+      `#${containerId}`
+    );
+    if (!existedContainer) {
+      existedContainer = document.createElement("div");
+      existedContainer.style = "display: contents;";
+      existedContainer.id = containerId;
+      document.body.appendChild(existedContainer);
+    }
+    const root = clientExports.createRoot(existedContainer);
+    root.render(createElement(DevtoolsClient, { payload: { devtools: this } }));
+  }
+  static connect(config) {
+    new _ViewModelDevtools(config);
+  }
+};
+_init = __decoratorStart(null);
+__decorateElement(_init, 2, "searchCache", _searchCache_dec, _ViewModelDevtools);
+__decoratorMetadata(_init, _ViewModelDevtools);
+let ViewModelDevtools = _ViewModelDevtools;
+class VmTreeItemRenderVM extends DevtoolsVMImpl {
+  devtools = this.payload.devtools;
+  constructor(vmParams) {
+    super({
+      ...vmParams,
+      vmConfig: {
+        observable: {
+          viewModels: {
+            useDecorators: false
+          },
+          viewModelStores: {
+            useDecorators: false
+          }
+        }
+      }
+    });
+    makeObservable(this, {
+      handleExpandPropertyClick: action,
+      handleVmItemHeaderClick: action
+    });
+  }
+  isPathExpanded(path) {
+    return this.devtools.checkIsPathExpanded(this.payload.vmItem, path);
+  }
+  handleExpandPropertyClick(path) {
+    this.devtools.handleExpandPropertyClick(this.payload.vmItem, path);
+  }
+  handleVmItemHeaderClick(vmItem) {
+    this.devtools.handleVmItemHeaderClick(vmItem);
   }
 }
-_init = __decoratorStart(_a2);
-__decorateElement(_init, 2, "searchCache", _searchCache_dec, DevtoolsVM);
-__decoratorMetadata(_init, DevtoolsVM);
-const ViewModelDevTools = withViewModel(DevtoolsVM, ({ model }) => {
-  return null;
-});
 export {
-  ViewModelDevTools
+  ViewModelDevtools
 };