npm - vite-plugin-vue-devtools - Versions diffs - 0.2.1 → 0.3.1 - Mend

vite-plugin-vue-devtools 0.2.1 → 0.3.1

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 (35) hide show

package/dist/client/assets/{index-f743edb2.js → index-0158f749.js} RENAMED Viewed

@@ -735,7 +735,7 @@ function has$1(target, key) {
   }
   return result;
 }
-function ownKeys(target) {
+function ownKeys$1(target) {
   track(target, "iterate", isArray$1(target) ? "length" : ITERATE_KEY);
   return Reflect.ownKeys(target);
 }
@@ -744,7 +744,7 @@ const mutableHandlers = {
   set: set$1,
   deleteProperty,
   has: has$1,
-  ownKeys
+  ownKeys: ownKeys$1
 };
 const readonlyHandlers = {
   get: readonlyGet,
@@ -8070,25 +8070,25 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
 /* Injected with object hook! */
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function assign$1(to, from) {
   for (const key in from) {
     if (Object.prototype.hasOwnProperty.call(from, key)) {
@@ -8489,7 +8489,7 @@ var PrivatePopper = () => defineComponent({
         hide: this.hide,
         handleResize: this.handleResize,
         onResize: this.onResize,
-        classes: __spreadProps(__spreadValues({}, this.classes), {
+        classes: __spreadProps$1(__spreadValues$1({}, this.classes), {
           popperClass: this.popperClass
         }),
         result: this.positioningDisabled ? null : this.result,
@@ -8505,7 +8505,7 @@ var PrivatePopper = () => defineComponent({
       return ((_a = this.popperTriggers) == null ? void 0 : _a.includes("hover")) || ((_b = this.popperShowTriggers) == null ? void 0 : _b.includes("hover"));
     }
   },
-  watch: __spreadValues(__spreadValues({
+  watch: __spreadValues$1(__spreadValues$1({
     shown: "$_autoShowHide",
     disabled(value) {
       if (value) {
@@ -8761,7 +8761,7 @@ var PrivatePopper = () => defineComponent({
         y: data.y,
         placement: data.placement,
         strategy: data.strategy,
-        arrow: __spreadValues(__spreadValues({}, data.middlewareData.arrow), data.middlewareData.arrowOverflow)
+        arrow: __spreadValues$1(__spreadValues$1({}, data.middlewareData.arrow), data.middlewareData.arrowOverflow)
       });
     },
     $_scheduleShow(event = null, skipDelay = false) {
@@ -9349,11 +9349,11 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
-const _hoisted_4$4 = /* @__PURE__ */ createBaseVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
-const _hoisted_5$3 = [
-  _hoisted_3$3,
-  _hoisted_4$4
+const _hoisted_3$4 = /* @__PURE__ */ createBaseVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createBaseVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
+const _hoisted_5$4 = [
+  _hoisted_3$4,
+  _hoisted_4$5
 ];
 function _sfc_render$2$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -9412,7 +9412,7 @@ function _sfc_render$2$1(_ctx, _cache, $props, $setup, $data, $options) {
           left: _ctx.toPx(_ctx.result.arrow.x),
           top: _ctx.toPx(_ctx.result.arrow.y)
         } : void 0)
-      }, _hoisted_5$3, 4)
+      }, _hoisted_5$4, 4)
     ], 4)
   ], 46, _hoisted_1$1$1);
 }
@@ -9518,19 +9518,19 @@ function _sfc_render$1$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["theme", "target-nodes", "popper-node", "class"]);
 }
 var PrivatePopperWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["render", _sfc_render$1$1]]);
-const _sfc_main$3$1 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
+const _sfc_main$3$1 = defineComponent(__spreadProps$1(__spreadValues$1({}, PrivatePopperWrapper), {
   name: "VDropdown",
   vPopperTheme: "dropdown"
 }));
-const _sfc_main$2$1 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
+const _sfc_main$2$1 = defineComponent(__spreadProps$1(__spreadValues$1({}, PrivatePopperWrapper), {
   name: "VMenu",
   vPopperTheme: "menu"
 }));
-const _sfc_main$1$1 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
+const _sfc_main$1$1 = defineComponent(__spreadProps$1(__spreadValues$1({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$c = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -9621,7 +9621,7 @@ const _sfc_main$c = defineComponent({
     }
   }
 });
-const _hoisted_1$8 = ["innerHTML"];
+const _hoisted_1$9 = ["innerHTML"];
 const _hoisted_2$7 = ["textContent"];
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
@@ -9665,7 +9665,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$8)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$9)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
           }, null, 8, _hoisted_2$7))
@@ -9676,7 +9676,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["render", _sfc_render$4]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["render", _sfc_render$4]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -9723,7 +9723,7 @@ function ensureDirectiveApp() {
     },
     render() {
       return this.directives.map((directive) => {
-        return h(PrivateTooltipDirective, __spreadProps(__spreadValues({}, directive.options), {
+        return h(PrivateTooltipDirective, __spreadProps$1(__spreadValues$1({}, directive.options), {
           shown: directive.shown || directive.options.shown,
           key: directive.id
         }));
@@ -12329,7 +12329,7 @@ function useRoute() {
 /* Injected with object hook! */
-const scriptRel = 'modulepreload';const assetsURL = function(dep, importerUrl) { return new URL(dep, importerUrl).href };const seen = {};const __vitePreload = function preload(baseModule, deps, importerUrl) {
+const scriptRel = 'modulepreload';const assetsURL = function(dep) { return "/__devtools__/"+dep };const seen = {};const __vitePreload = function preload(baseModule, deps, importerUrl) {
     // @ts-expect-error true will be replaced with boolean later
     if (!true || !deps || deps.length === 0) {
         return baseModule();
@@ -12337,7 +12337,7 @@ const scriptRel = 'modulepreload';const assetsURL = function(dep, importerUrl) {
     const links = document.getElementsByTagName('link');
     return Promise.all(deps.map((dep) => {
         // @ts-expect-error assetsURL is declared before preload.toString()
-        dep = assetsURL(dep, importerUrl);
+        dep = assetsURL(dep);
         if (dep in seen)
             return;
         seen[dep] = true;
@@ -12378,7 +12378,7 @@ const scriptRel = 'modulepreload';const assetsURL = function(dep, importerUrl) {
 };
 /* Injected with object hook! */
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     to: {},
@@ -12414,37 +12414,37 @@ const _export_sfc = (sfc, props) => {
 /* Injected with object hook! */
-/* unplugin-vue-components disabled */const _sfc_main$a = {};
+/* unplugin-vue-components disabled */const _sfc_main$c = {};
-const _hoisted_1$7 = { class: "mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs" };
+const _hoisted_1$8 = { class: "mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs" };
 function _sfc_render$2(_ctx, _cache) {
-  return (openBlock(), createElementBlock("span", _hoisted_1$7, [
+  return (openBlock(), createElementBlock("span", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
-const __unplugin_components_1 = /*#__PURE__*/_export_sfc(_sfc_main$a, [['render',_sfc_render$2]]);
+const __unplugin_components_1 = /*#__PURE__*/_export_sfc(_sfc_main$c, [['render',_sfc_render$2]]);
 /* Injected with object hook! */
-/* unplugin-vue-components disabled */const _sfc_main$9 = {};
+/* unplugin-vue-components disabled */const _sfc_main$b = {};
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   viewBox: "0 0 566 154",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
 const _hoisted_2$6 = /*#__PURE__*/createStaticVNode("<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 198\" width=\"128\" height=\"128\"><path fill=\"#41B883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z\"></path><path fill=\"#41B883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z\"></path><path fill=\"#35495E\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z\"></path></svg><path d=\"M152.571 118V46.1333H176.8C183.576 46.1333 189.77 47.468 195.383 50.1373C200.995 52.8067 205.478 56.8449 208.832 62.252C212.186 67.5907 213.863 74.1956 213.863 82.0667C213.863 89.8693 212.186 96.4742 208.832 101.881C205.478 107.288 200.995 111.327 195.383 113.996C189.77 116.665 183.576 118 176.8 118H152.571ZM175.157 104.653C181.796 104.653 187.306 102.874 191.687 99.3147C196.067 95.6871 198.257 89.9378 198.257 82.0667C198.257 74.1956 196.067 68.4462 191.687 64.8187C187.306 61.1911 181.796 59.3773 175.157 59.3773H167.971V104.653H175.157ZM270.18 100.444C269.153 105.988 266.381 110.437 261.864 113.791C257.347 117.144 251.905 118.821 245.54 118.821C239.928 118.821 235.102 117.555 231.064 115.023C227.094 112.422 224.083 109.068 222.029 104.961C219.976 100.855 218.949 96.5427 218.949 92.0253C218.949 87.4396 219.873 83.1276 221.721 79.0893C223.638 75.0511 226.513 71.7658 230.345 69.2333C234.247 66.7009 238.969 65.4347 244.513 65.4347C250.263 65.4347 255.054 66.6667 258.887 69.1307C262.72 71.5947 265.526 74.7431 267.305 78.576C269.153 82.4089 270.077 86.4471 270.077 90.6907C270.077 92.2649 270.009 93.8049 269.872 95.3107H232.707C233.254 99.0067 234.623 101.916 236.813 104.037C239.072 106.091 241.981 107.117 245.54 107.117C248.415 107.117 250.776 106.57 252.624 105.475C254.472 104.311 255.67 102.634 256.217 100.444H270.18ZM244.513 75.9067C241.228 75.9067 238.627 76.7622 236.711 78.4733C234.794 80.116 233.528 82.7169 232.912 86.276H255.807C255.601 83.2644 254.506 80.8004 252.521 78.884C250.537 76.8991 247.867 75.9067 244.513 75.9067ZM302.77 118H289.629L270.738 66.256H285.317L296.2 99.7253L306.98 66.256H321.661L302.77 118ZM359.731 118H344.331V59.3773H323.079V46.1333H380.983V59.3773H359.731V118ZM402.364 118.821C397.163 118.821 392.474 117.692 388.299 115.433C384.124 113.106 380.873 109.924 378.546 105.885C376.219 101.779 375.055 97.1929 375.055 92.128C375.055 87.0631 376.219 82.5116 378.546 78.4733C380.873 74.3667 384.124 71.184 388.299 68.9253C392.474 66.5982 397.163 65.4347 402.364 65.4347C407.566 65.4347 412.255 66.5982 416.43 68.9253C420.605 71.184 423.856 74.3667 426.183 78.4733C428.51 82.5116 429.674 87.0631 429.674 92.128C429.674 97.1929 428.51 101.779 426.183 105.885C423.856 109.924 420.605 113.106 416.43 115.433C412.255 117.692 407.566 118.821 402.364 118.821ZM402.364 106.501C406.197 106.501 409.311 105.167 411.707 102.497C414.103 99.828 415.3 96.3716 415.3 92.128C415.3 87.816 414.103 84.3253 411.707 81.656C409.311 78.9867 406.197 77.652 402.364 77.652C398.531 77.652 395.417 78.9867 393.022 81.656C390.626 84.3253 389.428 87.816 389.428 92.128C389.428 96.3716 390.626 99.828 393.022 102.497C395.417 105.167 398.531 106.501 402.364 106.501ZM462.12 118.821C456.918 118.821 452.229 117.692 448.054 115.433C443.879 113.106 440.628 109.924 438.301 105.885C435.974 101.779 434.81 97.1929 434.81 92.128C434.81 87.0631 435.974 82.5116 438.301 78.4733C440.628 74.3667 443.879 71.184 448.054 68.9253C452.229 66.5982 456.918 65.4347 462.12 65.4347C467.321 65.4347 472.01 66.5982 476.185 68.9253C480.36 71.184 483.611 74.3667 485.938 78.4733C488.265 82.5116 489.429 87.0631 489.429 92.128C489.429 97.1929 488.265 101.779 485.938 105.885C483.611 109.924 480.36 113.106 476.185 115.433C472.01 117.692 467.321 118.821 462.12 118.821ZM462.12 106.501C465.952 106.501 469.067 105.167 471.462 102.497C473.858 99.828 475.056 96.3716 475.056 92.128C475.056 87.816 473.858 84.3253 471.462 81.656C469.067 78.9867 465.952 77.652 462.12 77.652C458.287 77.652 455.172 78.9867 452.777 81.656C450.381 84.3253 449.184 87.816 449.184 92.128C449.184 96.3716 450.381 99.828 452.777 102.497C455.172 105.167 458.287 106.501 462.12 106.501ZM512.327 118H498.056V43.772H512.327V118ZM542.494 118.821C536.129 118.821 530.961 117.179 526.991 113.893C523.09 110.54 521.002 106.091 520.729 100.547H533.049C533.322 102.874 534.281 104.722 535.923 106.091C537.634 107.391 539.825 108.041 542.494 108.041C544.684 108.041 546.464 107.562 547.833 106.604C549.27 105.646 549.989 104.448 549.989 103.011C549.989 101.094 549.167 99.7596 547.525 99.0067C545.882 98.2538 543.281 97.5693 539.722 96.9533C536.026 96.2689 533.014 95.516 530.687 94.6947C528.36 93.8733 526.341 92.4018 524.63 90.28C522.987 88.0898 522.166 85.0098 522.166 81.04C522.166 78.0284 522.953 75.3591 524.527 73.032C526.17 70.6364 528.394 68.7884 531.201 67.488C534.007 66.1191 537.155 65.4347 540.646 65.4347C546.874 65.4347 551.905 66.9747 555.738 70.0547C559.639 73.1347 561.727 77.2071 562.001 82.272H549.578C549.304 80.1502 548.312 78.5076 546.601 77.344C544.958 76.112 543.11 75.496 541.057 75.496C539.003 75.496 537.361 75.9409 536.129 76.8307C534.897 77.7204 534.281 78.9524 534.281 80.5267C534.281 82.4431 535.068 83.7436 536.642 84.428C538.285 85.044 540.851 85.5916 544.342 86.0707C548.106 86.6182 551.186 87.3027 553.582 88.124C556.046 88.8769 558.168 90.3827 559.947 92.6413C561.727 94.9 562.617 98.1853 562.617 102.497C562.617 107.425 560.769 111.395 557.073 114.407C553.445 117.35 548.585 118.821 542.494 118.821Z\" fill=\"currentColor\"></path>", 2);
-const _hoisted_4$3 = [
+const _hoisted_4$4 = [
   _hoisted_2$6
 ];
 function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_4$3))
+  return (openBlock(), createElementBlock("svg", _hoisted_1$7, _hoisted_4$4))
 }
-const __unplugin_components_0$1 = /*#__PURE__*/_export_sfc(_sfc_main$9, [['render',_sfc_render$1]]);
+const __unplugin_components_0 = /*#__PURE__*/_export_sfc(_sfc_main$b, [['render',_sfc_render$1]]);
 /* Injected with object hook! */
-function tryOnScopeDispose(fn) {
+function tryOnScopeDispose$1(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
     return true;
@@ -12452,7 +12452,7 @@ function tryOnScopeDispose(fn) {
   return false;
 }
-function toValue(r) {
+function toValue$1(r) {
   return typeof r === "function" ? r() : unref(r);
 }
@@ -12497,7 +12497,7 @@ function reactiveOmit(obj, ...keys) {
   const flatKeys = keys.flat();
   const predicate = flatKeys[0];
   return reactiveComputed(
-    () => typeof predicate === "function" ? Object.fromEntries(Object.entries(toRefs$1(obj)).filter(([k, v]) => !predicate(toValue(v), k))) : Object.fromEntries(Object.entries(toRefs$1(obj)).filter((e) => !flatKeys.includes(e[0])))
+    () => typeof predicate === "function" ? Object.fromEntries(Object.entries(toRefs$1(obj)).filter(([k, v]) => !predicate(toValue$1(v), k))) : Object.fromEntries(Object.entries(toRefs$1(obj)).filter((e) => !flatKeys.includes(e[0])))
   );
 }
@@ -12532,8 +12532,8 @@ function debounceFilter(ms, options = {}) {
     lastRejector = noop;
   };
   const filter = (invoke) => {
-    const duration = toValue(ms);
-    const maxDuration = toValue(options.maxWait);
+    const duration = toValue$1(ms);
+    const maxDuration = toValue$1(options.maxWait);
     if (timer)
       _clearTimeout(timer);
     if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
@@ -12578,7 +12578,7 @@ function throttleFilter(ms, trailing = true, leading = true, rejectOnCancel = fa
     }
   };
   const filter = (_invoke) => {
-    const duration = toValue(ms);
+    const duration = toValue$1(ms);
     const elapsed = Date.now() - lastExec;
     const invoke = () => {
       return lastValue = _invoke();
@@ -12716,7 +12716,7 @@ function useIntervalFn(cb, interval = 1e3, options = {}) {
     clean();
   }
   function resume() {
-    const intervalValue = toValue(interval);
+    const intervalValue = toValue$1(interval);
     if (intervalValue <= 0)
       return;
     isActive.value = true;
@@ -12732,9 +12732,9 @@ function useIntervalFn(cb, interval = 1e3, options = {}) {
       if (isActive.value && isClient)
         resume();
     });
-    tryOnScopeDispose(stopWatch);
+    tryOnScopeDispose$1(stopWatch);
   }
-  tryOnScopeDispose(pause);
+  tryOnScopeDispose$1(pause);
   return {
     isActive,
     pause,
@@ -12765,14 +12765,14 @@ function useTimeoutFn(cb, interval, options = {}) {
       isPending.value = false;
       timer = null;
       cb(...args);
-    }, toValue(interval));
+    }, toValue$1(interval));
   }
   if (immediate) {
     isPending.value = true;
     if (isClient)
       start();
   }
-  tryOnScopeDispose(stop);
+  tryOnScopeDispose$1(stop);
   return {
     isPending: readonly(isPending),
     start,
@@ -12830,7 +12830,7 @@ var __spreadValues$2$1 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1 = (source, exclude) => {
+var __objRest$1$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2$1.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -12845,7 +12845,7 @@ var __objRest$1 = (source, exclude) => {
 function watchPausable(source, cb, options = {}) {
   const _a = options, {
     eventFilter: filter
-  } = _a, watchOptions = __objRest$1(_a, [
+  } = _a, watchOptions = __objRest$1$1(_a, [
     "eventFilter"
   ]);
   const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
@@ -12919,9 +12919,9 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
   }
 }
-function unrefElement(elRef) {
+function unrefElement$1(elRef) {
   var _a;
-  const plain = toValue(elRef);
+  const plain = toValue$1(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
@@ -12956,7 +12956,7 @@ function useEventListener(...args) {
     return () => el.removeEventListener(event, listener, options2);
   };
   const stopWatch = watch(
-    () => [unrefElement(target), toValue(options)],
+    () => [unrefElement$1(target), toValue$1(options)],
     ([el, options2]) => {
       cleanup();
       if (!el)
@@ -12973,7 +12973,7 @@ function useEventListener(...args) {
     stopWatch();
     cleanup();
   };
-  tryOnScopeDispose(stop);
+  tryOnScopeDispose$1(stop);
   return stop;
 }
@@ -12992,13 +12992,13 @@ function onClickOutside(target, handler, options = {}) {
       if (typeof target2 === "string") {
         return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
       } else {
-        const el = unrefElement(target2);
+        const el = unrefElement$1(target2);
         return el && (event.target === el || event.composedPath().includes(el));
       }
     });
   };
   const listener = (event) => {
-    const el = unrefElement(target);
+    const el = unrefElement$1(target);
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
     if (event.detail === 0)
@@ -13012,13 +13012,13 @@ function onClickOutside(target, handler, options = {}) {
   const cleanup = [
     useEventListener(window, "click", listener, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
-      const el = unrefElement(target);
+      const el = unrefElement$1(target);
       if (el)
         shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       var _a;
-      const el = unrefElement(target);
+      const el = unrefElement$1(target);
       if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
         handler(event);
     })
@@ -13084,7 +13084,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && toValue(dedupe))
+    if (e.repeat && toValue$1(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -13144,7 +13144,7 @@ function useRafFn(fn, options = {}) {
   }
   if (immediate)
     resume();
-  tryOnScopeDispose(pause);
+  tryOnScopeDispose$1(pause);
   return {
     isActive: readonly(isActive),
     pause,
@@ -13179,7 +13179,7 @@ function useMediaQuery(query, options = {}) {
       mediaQuery.addListener(update);
   };
   watchEffect(update);
-  tryOnScopeDispose(() => cleanup());
+  tryOnScopeDispose$1(() => cleanup());
   return matches;
 }
@@ -13210,7 +13210,7 @@ function useClipboard(options = {}) {
     for (const event of events)
       useEventListener(event, updateText);
   }
-  async function copy(value = toValue(source)) {
+  async function copy(value = toValue$1(source)) {
     if (isSupported.value && value != null) {
       if (isClipboardApiSupported.value)
         await navigator.clipboard.writeText(value);
@@ -13341,7 +13341,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = toValue(defaults);
+  const rawInit = toValue$1(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = watchPausable(
@@ -13472,7 +13472,7 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement$1(selector2);
       if (!el)
         return;
       let style;
@@ -13603,7 +13603,7 @@ function useResizeObserver(target, callback, options = {}) {
     }
   };
   const targets = computed(
-    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
+    () => Array.isArray(target) ? target.map((el) => unrefElement$1(el)) : [unrefElement$1(target)]
   );
   const stopWatch = watch(
     targets,
@@ -13621,7 +13621,7 @@ function useResizeObserver(target, callback, options = {}) {
     cleanup();
     stopWatch();
   };
-  tryOnScopeDispose(stop);
+  tryOnScopeDispose$1(stop);
   return {
     isSupported,
     stop
@@ -13644,7 +13644,7 @@ function useElementBounding(target, options = {}) {
   const x = ref(0);
   const y = ref(0);
   function update() {
-    const el = unrefElement(target);
+    const el = unrefElement$1(target);
     if (!el) {
       if (reset) {
         height.value = 0;
@@ -13669,7 +13669,7 @@ function useElementBounding(target, options = {}) {
     y.value = rect.y;
   }
   useResizeObserver(target, update);
-  watch(() => unrefElement(target), (ele) => !ele && update());
+  watch(() => unrefElement$1(target), (ele) => !ele && update());
   if (windowScroll)
     useEventListener("scroll", update, { capture: true, passive: true });
   if (windowResize)
@@ -13695,7 +13695,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   const { window = defaultWindow, box = "content-box" } = options;
   const isSVG = computed(() => {
     var _a, _b;
-    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+    return (_b = (_a = unrefElement$1(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
   });
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
@@ -13704,7 +13704,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
     ([entry]) => {
       const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
       if (window && isSVG.value) {
-        const $elem = unrefElement(target);
+        const $elem = unrefElement$1(target);
         if ($elem) {
           const styles = window.getComputedStyle($elem);
           width.value = parseFloat(styles.width);
@@ -13724,7 +13724,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
     options
   );
   watch(
-    () => unrefElement(target),
+    () => unrefElement$1(target),
     (ele) => {
       width.value = ele ? initialSize.width : 0;
       height.value = ele ? initialSize.height : 0;
@@ -13775,13 +13775,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = toValue(element);
+    const _element = toValue$1(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = toValue(_y)) != null ? _a : y.value,
-      left: (_b = toValue(_x)) != null ? _b : x.value,
-      behavior: toValue(behavior)
+      top: (_a = toValue$1(_y)) != null ? _a : y.value,
+      left: (_b = toValue$1(_x)) != null ? _b : x.value,
+      behavior: toValue$1(behavior)
     });
   }
   const isScrolling = ref(false);
@@ -13866,7 +13866,7 @@ function useScroll(element, options = {}) {
     arrivedState,
     directions,
     measure() {
-      const _element = toValue(element);
+      const _element = toValue$1(element);
       if (_element)
         setArrivedState(_element);
     }
@@ -13910,7 +13910,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const isLoading = computed(() => !!promise.value);
   function checkAndLoad() {
     state.measure();
-    const el = toValue(element);
+    const el = toValue$1(element);
     if (!el)
       return;
     const isNarrower = direction === "bottom" || direction === "top" ? el.scrollHeight <= el.clientHeight : el.scrollWidth <= el.clientWidth;
@@ -13927,7 +13927,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     }
   }
   watch(
-    () => [state.arrivedState[direction], toValue(element)],
+    () => [state.arrivedState[direction], toValue$1(element)],
     checkAndLoad,
     { immediate: true }
   );
@@ -14011,7 +14011,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = toValue(element);
+    const ele = toValue$1(element);
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
@@ -14028,14 +14028,14 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = toValue(element);
+    const ele = toValue$1(element);
     if (!ele || !isLocked.value)
       return;
     isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     ele.style.overflow = initialOverflow;
     isLocked.value = false;
   };
-  tryOnScopeDispose(unlock);
+  tryOnScopeDispose$1(unlock);
   return computed({
     get() {
       return isLocked.value;
@@ -14093,7 +14093,7 @@ function useStyleTag(css, options = {}) {
   if (immediate && !manual)
     tryOnMounted(load);
   if (!manual)
-    tryOnScopeDispose(unload);
+    tryOnScopeDispose$1(unload);
   return {
     id,
     css: cssRef,
@@ -14119,7 +14119,7 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-var __objRest = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -14161,8 +14161,8 @@ function useTimeAgo(time, options = {}) {
     controls: exposeControls = false,
     updateInterval = 3e4
   } = options;
-  const _a = useNow({ interval: updateInterval, controls: true }), { now } = _a, controls = __objRest(_a, ["now"]);
-  const timeAgo = computed(() => formatTimeAgo(new Date(toValue(time)), options, toValue(now.value)));
+  const _a = useNow({ interval: updateInterval, controls: true }), { now } = _a, controls = __objRest$1(_a, ["now"]);
+  const timeAgo = computed(() => formatTimeAgo(new Date(toValue$1(time)), options, toValue$1(now.value)));
   if (exposeControls) {
     return __spreadValues$2({
       timeAgo
@@ -14290,7 +14290,7 @@ function useFrameState() {
 /* Injected with object hook! */
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   flex: "~ col gap4",
   mxa: "",
   "h-screen": "",
@@ -14304,16 +14304,16 @@ const _hoisted_2$5 = {
   "items-center": "",
   "justify-center": ""
 };
-const _hoisted_3$2 = /* @__PURE__ */ createBaseVNode("p", {
+const _hoisted_3$3 = /* @__PURE__ */ createBaseVNode("p", {
   my2: "",
   "text-xl": "",
   "font-bold": ""
 }, " 👋 Welcome trying the preview of Vue DevTools! ", -1);
-const _hoisted_4$2 = /* @__PURE__ */ createBaseVNode("p", { "text-lg": "" }, [
+const _hoisted_4$3 = /* @__PURE__ */ createBaseVNode("p", { "text-lg": "" }, [
   /* @__PURE__ */ createBaseVNode("b", { "font-bold": "" }, "Vue DevTools"),
   /* @__PURE__ */ createTextVNode(" is a set of visual tools that help you to know your app/site better, and enhance your development experience with Vue. ")
 ], -1);
-const _hoisted_5$2 = /* @__PURE__ */ createBaseVNode("p", { "text-lg": "" }, [
+const _hoisted_5$3 = /* @__PURE__ */ createBaseVNode("p", { "text-lg": "" }, [
   /* @__PURE__ */ createTextVNode(" Be aware that "),
   /* @__PURE__ */ createBaseVNode("span", {
     rounded: "",
@@ -14333,7 +14333,7 @@ const _hoisted_5$2 = /* @__PURE__ */ createBaseVNode("p", { "text-lg": "" }, [
   /* @__PURE__ */ createTextVNode(" if you find any bugs or have any suggestions. Thank you and have fun! ")
 ], -1);
 const _hoisted_6$1 = /* @__PURE__ */ createBaseVNode("span", null, "Get Started", -1);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const { isFirstVisit } = useFrameState();
@@ -14343,10 +14343,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       router.replace("/overview");
     }
     return (_ctx, _cache) => {
-      const _component_Logo = __unplugin_components_0$1;
+      const _component_Logo = __unplugin_components_0;
       const _component_VBadge = __unplugin_components_1;
-      const _component_VButton = _sfc_main$b;
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      const _component_VButton = _sfc_main$d;
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         createBaseVNode("div", _hoisted_2$5, [
           createVNode(_component_Logo, { "h-16": "" }),
           createVNode(_component_VBadge, {
@@ -14358,9 +14358,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             textContent: "preview"
           })
         ]),
-        _hoisted_3$2,
-        _hoisted_4$2,
-        _hoisted_5$2,
+        _hoisted_3$3,
+        _hoisted_4$3,
+        _hoisted_5$3,
         createVNode(_component_VButton, {
           "mt-4": "",
           n: "xl primary",
@@ -14378,28 +14378,28 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 /* Injected with object hook! */
-const __pages_import_0__ = () => __vitePreload(() => import('./timeline-01c3c8d8.js'),true?["./timeline-01c3c8d8.js","./StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./index-4ea8507d.js","./VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js","./VPanelGrids-08531872.js","./VCard-8f584a44.js","./_commonjsHelpers-c0d8ada0.js","./splitpanes.es-cb929c19.js","./timeline-b315b2e0.css"]:void 0,import.meta.url);
-const __pages_import_1__ = () => __vitePreload(() => import('./settings-7dc3a0fa.js'),true?["./settings-7dc3a0fa.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js"]:void 0,import.meta.url);
-const __pages_import_2__ = () => __vitePreload(() => import('./routes-b6e1361f.js'),true?["./routes-b6e1361f.js","./VPanelGrids-08531872.js","./VCard-8f584a44.js","./StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./index-4ea8507d.js","./VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js","./splitpanes.es-cb929c19.js"]:void 0,import.meta.url);
-const __pages_import_3__ = () => __vitePreload(() => import('./pinia-a1d3abba.js'),true?["./pinia-a1d3abba.js","./StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./index-4ea8507d.js","./VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js","./splitpanes.es-cb929c19.js"]:void 0,import.meta.url);
-const __pages_import_4__ = () => __vitePreload(() => import('./pages-c8759169.js'),true?["./pages-c8759169.js","./VSectionBlock-c9cecc8a.js","./VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./VSectionBlock-52804693.css","./VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js"]:void 0,import.meta.url);
-const __pages_import_5__ = () => __vitePreload(() => import('./overview-d04e0943.js'),true?["./overview-d04e0943.js","./VPanelGrids-08531872.js","./rpc-901b9577.js","./index-4ea8507d.js"]:void 0,import.meta.url);
-const __pages_import_6__ = () => __vitePreload(() => import('./npm-8aa51398.js'),true?["./npm-8aa51398.js","./VSectionBlock-c9cecc8a.js","./VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./VSectionBlock-52804693.css","./VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js","./_commonjsHelpers-c0d8ada0.js","./rpc-901b9577.js","./npm-125f4259.css"]:void 0,import.meta.url);
-const __pages_import_7__ = () => __vitePreload(() => import('./inspect-ef16c665.js'),true?["./inspect-ef16c665.js","./IframeView.vue_vue_type_script_setup_true_lang-3a43e6ae.js","./rpc-901b9577.js"]:void 0,import.meta.url);
-const __pages_import_9__ = () => __vitePreload(() => import('./graph-f04f0659.js'),true?["./graph-f04f0659.js","./fuse.esm-c317b696.js","./rpc-901b9577.js"]:void 0,import.meta.url);
-const __pages_import_10__ = () => __vitePreload(() => import('./documentations-0772e28d.js'),true?["./documentations-0772e28d.js","./VCard-8f584a44.js","./IframeView.vue_vue_type_script_setup_true_lang-3a43e6ae.js","./rpc-901b9577.js"]:void 0,import.meta.url);
-const __pages_import_11__ = () => __vitePreload(() => import('./components-4bbb4d42.js'),true?["./components-4bbb4d42.js","./VPanelGrids-08531872.js","./VCard-8f584a44.js","./StateFields.vue_vue_type_script_setup_true_lang-f9c67da8.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./index-4ea8507d.js","./VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js","./splitpanes.es-cb929c19.js"]:void 0,import.meta.url);
-const __pages_import_12__ = () => __vitePreload(() => import('./component-docs-0d4eec65.js'),true?["./component-docs-0d4eec65.js","./VCard-8f584a44.js","./VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./splitpanes.es-cb929c19.js","./fuse.esm-c317b696.js","./rpc-901b9577.js","./component-docs-351d62d5.css"]:void 0,import.meta.url);
-const __pages_import_13__ = () => __vitePreload(() => import('./assets-dc890f94.js'),true?["./assets-dc890f94.js","./VPanelGrids-08531872.js","./VCard-8f584a44.js","./VIconButton.vue_vue_type_script_setup_true_lang-66a83f1a.js","./VIcon.vue_vue_type_script_setup_true_lang-b5034521.js","./rpc-901b9577.js","./VSectionBlock-c9cecc8a.js","./VIconTitle.vue_vue_type_script_setup_true_lang-276880a3.js","./VSectionBlock-52804693.css","./VTextInput.vue_vue_type_script_setup_true_lang-96ef132c.js","./fuse.esm-c317b696.js"]:void 0,import.meta.url);
-const __pages_import_14__ = () => __vitePreload(() => import('./__inspecting-c3942849.js'),true?["./__inspecting-c3942849.js","./VPanelGrids-08531872.js"]:void 0,import.meta.url);
-const __pages_import_15__ = () => __vitePreload(() => import('./__eyedropper-dbdd9188.js'),true?["./__eyedropper-dbdd9188.js","./VPanelGrids-08531872.js"]:void 0,import.meta.url);
-const routes$1 = [{"name":"timeline","path":"/timeline","component":__pages_import_0__,"props":true},{"name":"settings","path":"/settings","component":__pages_import_1__,"props":true},{"name":"routes","path":"/routes","component":__pages_import_2__,"props":true},{"name":"pinia","path":"/pinia","component":__pages_import_3__,"props":true},{"name":"pages","path":"/pages","component":__pages_import_4__,"props":true},{"name":"overview","path":"/overview","component":__pages_import_5__,"props":true},{"name":"npm","path":"/npm","component":__pages_import_6__,"props":true},{"name":"inspect","path":"/inspect","component":__pages_import_7__,"props":true},{"name":"index","path":"/","component":_sfc_main$8,"props":true},{"name":"graph","path":"/graph","component":__pages_import_9__,"props":true},{"name":"documentations","path":"/documentations","component":__pages_import_10__,"props":true},{"name":"components","path":"/components","component":__pages_import_11__,"props":true},{"name":"component-docs","path":"/component-docs","component":__pages_import_12__,"props":true},{"name":"assets","path":"/assets","component":__pages_import_13__,"props":true},{"name":"__inspecting","path":"/__inspecting","component":__pages_import_14__,"props":true},{"name":"__eyedropper","path":"/__eyedropper","component":__pages_import_15__,"props":true}];
+const __pages_import_0__ = () => __vitePreload(() => import('./timeline-f8284402.js'),true?["assets/timeline-f8284402.js","assets/StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/index-32549096.js","assets/VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js","assets/VPanelGrids-5c36b027.js","assets/_commonjsHelpers-c0d8ada0.js","assets/splitpanes.es-398427c7.js","assets/timeline-b315b2e0.css"]:void 0);
+const __pages_import_1__ = () => __vitePreload(() => import('./settings-68a6aaae.js'),true?["assets/settings-68a6aaae.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js"]:void 0);
+const __pages_import_2__ = () => __vitePreload(() => import('./routes-b5c90320.js'),true?["assets/routes-b5c90320.js","assets/VPanelGrids-5c36b027.js","assets/StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/index-32549096.js","assets/VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js","assets/splitpanes.es-398427c7.js"]:void 0);
+const __pages_import_3__ = () => __vitePreload(() => import('./pinia-0490bdb1.js'),true?["assets/pinia-0490bdb1.js","assets/StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/index-32549096.js","assets/VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js","assets/splitpanes.es-398427c7.js"]:void 0);
+const __pages_import_4__ = () => __vitePreload(() => import('./pages-e0bd078d.js'),true?["assets/pages-e0bd078d.js","assets/VSectionBlock-de05a5a5.js","assets/VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/VSectionBlock-52804693.css","assets/VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js"]:void 0);
+const __pages_import_5__ = () => __vitePreload(() => import('./overview-3bc4fc18.js'),true?["assets/overview-3bc4fc18.js","assets/VPanelGrids-5c36b027.js","assets/rpc-6610a4d4.js","assets/index-32549096.js"]:void 0);
+const __pages_import_6__ = () => __vitePreload(() => import('./npm-8ea47586.js'),true?["assets/npm-8ea47586.js","assets/VSectionBlock-de05a5a5.js","assets/VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/VSectionBlock-52804693.css","assets/VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js","assets/_commonjsHelpers-c0d8ada0.js","assets/rpc-6610a4d4.js","assets/npm-125f4259.css"]:void 0);
+const __pages_import_7__ = () => __vitePreload(() => import('./inspect-d5e39a6a.js'),true?["assets/inspect-d5e39a6a.js","assets/IframeView.vue_vue_type_script_setup_true_lang-fad49b28.js","assets/rpc-6610a4d4.js"]:void 0);
+const __pages_import_9__ = () => __vitePreload(() => import('./graph-97eb4fb0.js'),true?["assets/graph-97eb4fb0.js","assets/fuse.esm-c317b696.js","assets/rpc-6610a4d4.js"]:void 0);
+const __pages_import_10__ = () => __vitePreload(() => import('./documentations-1d60f0ff.js'),true?["assets/documentations-1d60f0ff.js","assets/IframeView.vue_vue_type_script_setup_true_lang-fad49b28.js","assets/rpc-6610a4d4.js"]:void 0);
+const __pages_import_11__ = () => __vitePreload(() => import('./components-0083a223.js'),true?["assets/components-0083a223.js","assets/VPanelGrids-5c36b027.js","assets/StateFields.vue_vue_type_script_setup_true_lang-766dc2da.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/index-32549096.js","assets/VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js","assets/splitpanes.es-398427c7.js"]:void 0);
+const __pages_import_12__ = () => __vitePreload(() => import('./component-docs-52802cb1.js'),true?["assets/component-docs-52802cb1.js","assets/VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/splitpanes.es-398427c7.js","assets/fuse.esm-c317b696.js","assets/rpc-6610a4d4.js","assets/component-docs-351d62d5.css"]:void 0);
+const __pages_import_13__ = () => __vitePreload(() => import('./assets-6e057331.js'),true?["assets/assets-6e057331.js","assets/VPanelGrids-5c36b027.js","assets/VIconButton.vue_vue_type_script_setup_true_lang-1dfaade2.js","assets/VIcon.vue_vue_type_script_setup_true_lang-8e1bce76.js","assets/rpc-6610a4d4.js","assets/VSectionBlock-de05a5a5.js","assets/VIconTitle.vue_vue_type_script_setup_true_lang-3891436f.js","assets/VSectionBlock-52804693.css","assets/VTextInput.vue_vue_type_script_setup_true_lang-1c3b455d.js","assets/fuse.esm-c317b696.js"]:void 0);
+const __pages_import_14__ = () => __vitePreload(() => import('./__inspecting-9ed1189b.js'),true?["assets/__inspecting-9ed1189b.js","assets/VPanelGrids-5c36b027.js"]:void 0);
+const __pages_import_15__ = () => __vitePreload(() => import('./__eyedropper-8918265a.js'),true?["assets/__eyedropper-8918265a.js","assets/VPanelGrids-5c36b027.js"]:void 0);
+const routes$1 = [{"name":"timeline","path":"/timeline","component":__pages_import_0__,"props":true},{"name":"settings","path":"/settings","component":__pages_import_1__,"props":true},{"name":"routes","path":"/routes","component":__pages_import_2__,"props":true},{"name":"pinia","path":"/pinia","component":__pages_import_3__,"props":true},{"name":"pages","path":"/pages","component":__pages_import_4__,"props":true},{"name":"overview","path":"/overview","component":__pages_import_5__,"props":true},{"name":"npm","path":"/npm","component":__pages_import_6__,"props":true},{"name":"inspect","path":"/inspect","component":__pages_import_7__,"props":true},{"name":"index","path":"/","component":_sfc_main$a,"props":true},{"name":"graph","path":"/graph","component":__pages_import_9__,"props":true},{"name":"documentations","path":"/documentations","component":__pages_import_10__,"props":true},{"name":"components","path":"/components","component":__pages_import_11__,"props":true},{"name":"component-docs","path":"/component-docs","component":__pages_import_12__,"props":true},{"name":"assets","path":"/assets","component":__pages_import_13__,"props":true},{"name":"__inspecting","path":"/__inspecting","component":__pages_import_14__,"props":true},{"name":"__eyedropper","path":"/__eyedropper","component":__pages_import_15__,"props":true}];
 /* Injected with object hook! */
-const _hoisted_1$4 = ["src", "alt"];
+const _hoisted_1$5 = ["src", "alt"];
 const _hoisted_2$4 = ["title"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TabIcon",
   props: {
     icon: {},
@@ -14416,7 +14416,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }, _ctx.$attrs, {
         src: _ctx.icon,
         alt: _ctx.title
-      }), null, 16, _hoisted_1$4)) : (openBlock(), createElementBlock("div", mergeProps({
+      }), null, 16, _hoisted_1$5)) : (openBlock(), createElementBlock("div", mergeProps({
         key: 1,
         style: {
           width: "1em",
@@ -14445,7 +14445,7 @@ function useDevtoolsClient() {
 /* Injected with object hook! */
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "SideNavItem",
   props: {
     tab: {}
@@ -14454,7 +14454,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const client = useDevtoolsClient();
     const router = useRouter();
     return (_ctx, _cache) => {
-      const _component_TabIcon = _sfc_main$7;
+      const _component_TabIcon = _sfc_main$9;
       const _component_VTooltip = resolveComponent("VTooltip");
       return openBlock(), createBlock(_component_VTooltip, { placement: "right" }, {
         popper: withCtx(() => [
@@ -14495,7 +14495,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 /* Injected with object hook! */
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VDarkToggle",
   setup(__props) {
     const mode = useColorMode();
@@ -14559,274 +14559,1878 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 /* Injected with object hook! */
-const _hoisted_1$3 = {
-  flex: "~ gap-1",
-  "text-lg": ""
-};
-const _hoisted_2$3 = ["onClick"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "VPanelPosition",
-  setup(__props) {
-    const { position: _position } = useFrameState();
-    const frameState = computed(() => ({ position: _position.value }));
-    const client = useDevtoolsClient();
-    const dockButton = [
-      {
-        position: "bottom",
-        icon: "i-carbon-open-panel-filled-bottom"
-      },
-      {
-        position: "right",
-        icon: "i-carbon-open-panel-filled-right"
-      },
-      {
-        position: "left",
-        icon: "i-carbon-open-panel-filled-left"
-      },
-      {
-        position: "top",
-        icon: "i-carbon-open-panel-filled-top"
-      }
-    ];
-    function toggle(position) {
-      client.value?.panel?.togglePosition(position);
-      _position.value = position;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        (openBlock(), createElementBlock(Fragment, null, renderList(dockButton, (item) => {
-          return createBaseVNode("button", {
-            key: item.position,
-            class: normalizeClass([unref(frameState).position === item.position ? "text-primary" : "op50", item.icon]),
-            onClick: ($event) => toggle(item.position)
-          }, null, 10, _hoisted_2$3);
-        }), 64))
-      ]);
-    };
-  }
-});
-/* Injected with object hook! */
-const _sfc_main$3 = {};
+/* unplugin-vue-components disabled */const _sfc_main$6 = {};
-const _hoisted_1$2 = {
-  px3: "",
-  py2: "",
-  border: "b base",
-  flex: "~ col gap-1"
-};
-const _hoisted_2$2 = /*#__PURE__*/createBaseVNode("div", {
-  "text-sm": "",
-  op50: ""
-}, " Dock devtools to ", -1);
-const _hoisted_3$1 = {
-  px3: "",
-  py2: "",
-  border: "b base",
-  flex: "~ gap-2"
-};
-const _hoisted_4$1 = /*#__PURE__*/createBaseVNode("div", {
-  "carbon-sun": "",
-  "translate-y--1px": "",
-  "dark:carbon-moon": ""
-}, null, -1);
-const _hoisted_5$1 = /*#__PURE__*/createBaseVNode("div", {
-  "carbon-settings": "",
-  "translate-y--1px": ""
-}, null, -1);
+const _hoisted_1$4 = { class: "n-card n-card-base" };
 function _sfc_render(_ctx, _cache) {
-  const _component_VPanelPosition = _sfc_main$4;
-  const _component_VButton = _sfc_main$b;
-  const _component_VDarkToggle = _sfc_main$5;
-  const _component_RouterLink = resolveComponent("RouterLink");
-  return (openBlock(), createElementBlock("div", null, [
-    createBaseVNode("div", _hoisted_1$2, [
-      _hoisted_2$2,
-      createVNode(_component_VPanelPosition)
-    ]),
-    createBaseVNode("div", _hoisted_3$1, [
-      createVNode(_component_VDarkToggle, null, {
-        default: withCtx(({ toggle, isDark }) => [
-          createVNode(_component_VButton, {
-            n: "sm primary",
-            onClick: toggle
-          }, {
-            default: withCtx(() => [
-              _hoisted_4$1,
-              createTextVNode(" " + toDisplayString(isDark.value ? "Dark" : "Light"), 1)
-            ]),
-            _: 2
-          }, 1032, ["onClick"])
-        ]),
-        _: 1
-      }),
-      createVNode(_component_RouterLink, {
-        replace: "",
-        class: "n-button-base active:n-button-active focus-visible:n-focus-base n-transition n-primary n-sm hover:n-button-hover n-disabled:n-disabled",
-        to: "/settings"
-      }, {
-        default: withCtx(() => [
-          _hoisted_5$1,
-          createTextVNode(" Settings ")
-        ]),
-        _: 1
-      })
-    ])
+  return (openBlock(), createElementBlock("div", _hoisted_1$4, [
+    renderSlot(_ctx.$slots, "default")
   ]))
 }
-const __unplugin_components_0 = /*#__PURE__*/_export_sfc(_sfc_main$3, [['render',_sfc_render]]);
+const __unplugin_components_7 = /*#__PURE__*/_export_sfc(_sfc_main$6, [['render',_sfc_render]]);
 /* Injected with object hook! */
-const devToolsSettings = useLocalStorage("__vue-devtools-settings__", {
-  scale: 1,
-  hiddenTabs: [],
-  hiddenTabCategories: []
-}, { mergeDefaults: true });
-const devToolsSettingsRefs = toRefs(devToolsSettings);
-function useDevToolsSettings() {
-  return devToolsSettingsRefs;
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : unref(r);
 }
 /* Injected with object hook! */
-const builtinTabs = [
-  {
-    path: "overview",
-    title: "Overview",
-    icon: "i-carbon-information"
-  },
-  {
-    path: "pages",
-    title: "Pages",
-    icon: "i-carbon-tree-view-alt"
-  },
-  {
-    path: "components",
-    title: "Components",
-    icon: "i-carbon-assembly-cluster"
-  },
-  {
-    path: "assets",
-    title: "Assets",
-    icon: "i-carbon-image-copy"
-  },
-  {
-    path: "routes",
-    title: "Routes",
-    icon: "gis:map-route",
-    category: "modules"
-  },
-  {
-    path: "pinia",
-    title: "Pinia",
-    icon: "icon-park-outline:pineapple",
-    category: "modules"
-  },
-  {
-    path: "timeline",
-    title: "Timeline",
-    icon: "i-icon-park-outline:vertical-timeline"
-  },
-  {
-    title: "Inspector",
-    icon: "i-carbon-select-window",
-    category: "advanced",
-    event: (client, router) => {
-      router.replace("/__inspecting");
-      client?.inspector?.enable();
-    }
-  },
-  {
-    title: "EyeDropper",
-    icon: "i-mdi:eyedropper",
-    category: "advanced",
-    event: (client, router) => {
-      router.replace("/__eyedropper");
-      client.panel?.toggleViewMode("xs");
-    }
-  },
-  {
-    path: "component-docs",
-    title: "Component docs",
-    icon: "i-carbon-document-preliminary",
-    category: "advanced"
-  },
-  {
-    path: "npm",
-    title: "Search packages",
-    icon: "i-teenyicons:npm-outline",
-    category: "advanced"
-  },
-  {
-    path: "graph",
-    title: "Graph",
-    icon: "i-carbon-network-4",
-    category: "advanced"
-  },
-  {
-    path: "inspect",
-    title: "Inspect",
-    icon: "i-carbon-ibm-watson-discovery",
-    category: "advanced"
-  },
-  {
-    path: "documentations",
-    title: "Documentations",
-    icon: "i-carbon-document",
-    category: "advanced"
-  }
-];
-function useTabs() {
-  const settings = useDevToolsSettings();
-  return {
-    enabled: computed(() => {
-      return builtinTabs.filter((tab) => !settings.hiddenTabs.value.includes(tab.title ?? ""));
-    }),
-    all: computed(() => builtinTabs)
-  };
-}
-function useCategorizedTabs(enabledOnly = true) {
-  const _tabs = useTabs();
-  const tabs = enabledOnly ? _tabs.enabled : _tabs.all;
-  const settings = useDevToolsSettings();
-  return computed(() => {
-    const categories = {
-      app: [],
-      modules: [],
-      advanced: []
-    };
-    for (const tab of tabs.value) {
-      const category = tab?.category || "app";
-      if (enabledOnly && settings.hiddenTabCategories.value.includes(category))
-        continue;
-      if (!categories[category])
-        console.warn(`Unknown tab category: ${category}`);
-      else
-        categories[category].push(tab);
-    }
-    return Object.entries(categories);
-  });
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 /* Injected with object hook! */
-const _hoisted_1$1 = {
-  border: "r base",
-  flex: "~ col gap-0.5",
-  "z-100": "",
-  "h-full": "",
-  "items-center": "",
-  "bg-base": "",
-  class: "no-scrollbar"
+/*!
+* tabbable 6.1.2
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var NoElement = typeof Element === 'undefined';
+var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
+} : function (element) {
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
 };
-const _hoisted_2$1 = {
-  flex: "~ col",
-  sticky: "",
-  "top-0": "",
-  "z-1": "",
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+  return result;
+};
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
+var isContentEditable = function isContentEditable(node) {
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
+};
+/**
+ * @param {Element} el container to check in
+ * @param {boolean} includeContainer add container to check
+ * @param {(node: Element) => boolean} filter filter candidates
+ * @returns {Element[]}
+ */
+var getCandidates = function getCandidates(el, includeContainer, filter) {
+  // even if `includeContainer=false`, we still have to check it for inertness because
+  //  if it's inert, all its children are inert
+  if (isInert(el)) {
+    return [];
+  }
+  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
+  if (includeContainer && matches.call(el, candidateSelector)) {
+    candidates.unshift(el);
+  }
+  candidates = candidates.filter(filter);
+  return candidates;
+};
+/**
+ * @callback GetShadowRoot
+ * @param {Element} element to check for shadow root
+ * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
+ */
+/**
+ * @callback ShadowRootFilter
+ * @param {Element} shadowHostNode the element which contains shadow content
+ * @returns {boolean} true if a shadow root could potentially contain valid candidates.
+ */
+/**
+ * @typedef {Object} CandidateScope
+ * @property {Element} scopeParent contains inner candidates
+ * @property {Element[]} candidates list of candidates found in the scope parent
+ */
+/**
+ * @typedef {Object} IterativeOptions
+ * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
+ *  if a function, implies shadow support is enabled and either returns the shadow root of an element
+ *  or a boolean stating if it has an undisclosed shadow root
+ * @property {(node: Element) => boolean} filter filter candidates
+ * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list
+ * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
+ */
+/**
+ * @param {Element[]} elements list of element containers to match candidates from
+ * @param {boolean} includeContainer add container list to check
+ * @param {IterativeOptions} options
+ * @returns {Array.<Element|CandidateScope>}
+ */
+var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
+  var candidates = [];
+  var elementsToCheck = Array.from(elements);
+  while (elementsToCheck.length) {
+    var element = elementsToCheck.shift();
+    if (isInert(element, false)) {
+      // no need to look up since we're drilling down
+      // anything inside this container will also be inert
+      continue;
+    }
+    if (element.tagName === 'SLOT') {
+      // add shadow dom slot scope (slot itself cannot be focusable)
+      var assigned = element.assignedElements();
+      var content = assigned.length ? assigned : element.children;
+      var nestedCandidates = getCandidatesIteratively(content, true, options);
+      if (options.flatten) {
+        candidates.push.apply(candidates, nestedCandidates);
+      } else {
+        candidates.push({
+          scopeParent: element,
+          candidates: nestedCandidates
+        });
+      }
+    } else {
+      // check candidate element
+      var validCandidate = matches.call(element, candidateSelector);
+      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
+        candidates.push(element);
+      }
+      // iterate over shadow content if possible
+      var shadowRoot = element.shadowRoot ||
+      // check for an undisclosed shadow
+      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
+      // no inert look up because we're already drilling down and checking for inertness
+      //  on the way down, so all containers to this root node should have already been
+      //  vetted as non-inert
+      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
+      if (shadowRoot && validShadowRoot) {
+        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
+        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
+        //  child candidates found because they're likely slotted elements (elements that are
+        //  children of the web component element (which has the shadow), in the light dom, but
+        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
+        //  _after_ we return from this recursive call
+        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
+        if (options.flatten) {
+          candidates.push.apply(candidates, _nestedCandidates);
+        } else {
+          candidates.push({
+            scopeParent: element,
+            candidates: _nestedCandidates
+          });
+        }
+      } else {
+        // there's not shadow so just dig into the element's (light dom) children
+        //  __without__ giving the element special scope treatment
+        elementsToCheck.unshift.apply(elementsToCheck, element.children);
+      }
+    }
+  }
+  return candidates;
+};
+var getTabindex = function getTabindex(node, isScope) {
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    //
+    // isScope is positive for custom element with shadow root or slot that by default
+    // have tabIndex -1, but need to be sorted by document order in order for their
+    // content to be inserted in the correct position
+    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+      return 0;
+    }
+  }
+  return node.tabIndex;
+};
+var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
+  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
+};
+var isInput = function isInput(node) {
+  return node.tagName === 'INPUT';
+};
+var isHiddenInput = function isHiddenInput(node) {
+  return isInput(node) && node.type === 'hidden';
+};
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
+    return child.tagName === 'SUMMARY';
+  });
+  return r;
+};
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+};
+var isTabbableRadio = function isTabbableRadio(node) {
+  if (!node.name) {
+    return true;
+  }
+  var radioScope = node.form || getRootNode(node);
+  var queryRadios = function queryRadios(name) {
+    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
+  };
+  var radioSet;
+  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+    radioSet = queryRadios(window.CSS.escape(node.name));
+  } else {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      return false;
+    }
+  }
+  var checked = getCheckedRadio(radioSet, node.form);
+  return !checked || checked === node;
+};
+var isRadio = function isRadio(node) {
+  return isInput(node) && node.type === 'radio';
+};
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+  return isRadio(node) && !isTabbableRadio(node);
+};
+// determines if a node is ultimately attached to the window's document
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRoot;
+  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+  //  (but NOT _the_ document; see second 'If' comment below for more).
+  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+  //  node is actually detached.
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+      //  which means we need to get the host's host and check if that parent host is contained
+      //  in (i.e. attached to) the document
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
+  }
+  return attached;
+};
+var isZeroArea = function isZeroArea(node) {
+  var _node$getBoundingClie = node.getBoundingClientRect(),
+    width = _node$getBoundingClie.width,
+    height = _node$getBoundingClie.height;
+  return width === 0 && height === 0;
+};
+var isHidden = function isHidden(node, _ref) {
+  var displayCheck = _ref.displayCheck,
+    getShadowRoot = _ref.getShadowRoot;
+  // NOTE: visibility will be `undefined` if node is detached from the document
+  //  (see notes about this further down), which means we will consider it visible
+  //  (this is legacy behavior from a very long way back)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
+  if (getComputedStyle(node).visibility === 'hidden') {
+    return true;
+  }
+  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
+  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
+  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
+    return true;
+  }
+  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
+    if (typeof getShadowRoot === 'function') {
+      // figure out if we should consider the node to be in an undisclosed shadow and use the
+      //  'non-zero-area' fallback
+      var originalNode = node;
+      while (node) {
+        var parentElement = node.parentElement;
+        var rootNode = getRootNode(node);
+        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
+        ) {
+          // node has an undisclosed shadow which means we can only treat it as a black box, so we
+          //  fall back to a non-zero-area test
+          return isZeroArea(node);
+        } else if (node.assignedSlot) {
+          // iterate up slot
+          node = node.assignedSlot;
+        } else if (!parentElement && rootNode !== node.ownerDocument) {
+          // cross shadow boundary
+          node = rootNode.host;
+        } else {
+          // iterate up normal dom
+          node = parentElement;
+        }
+      }
+      node = originalNode;
+    }
+    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
+    //  it might be a falsy value, which means shadow DOM support is disabled
+    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+    //  now we can just test to see if it would normally be visible or not, provided it's
+    //  attached to the main document.
+    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+    if (isNodeAttached(node)) {
+      // this works wherever the node is: if there's at least one client rect, it's
+      //  somehow displayed; it also covers the CSS 'display: contents' case where the
+      //  node itself is hidden in place of its contents; and there's no need to search
+      //  up the hierarchy either
+      return !node.getClientRects().length;
+    }
+    // Else, the node isn't attached to the document, which means the `getClientRects()`
+    //  API will __always__ return zero rects (this can happen, for example, if React
+    //  is used to render nodes onto a detached tree, as confirmed in this thread:
+    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+    //  nodes as visible with the 'none' fallback.__
+    if (displayCheck !== 'legacy-full') {
+      return true; // hidden
+    }
+    // else, fallback to 'none' mode and consider the node visible
+  } else if (displayCheck === 'non-zero-area') {
+    // NOTE: Even though this tests that the node's client rect is non-zero to determine
+    //  whether it's displayed, and that a detached node will __always__ have a zero-area
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+    //  times, and that includes attached or not.
+    return isZeroArea(node);
+  }
+  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
+  return false;
+};
+// form fields (nested) inside a disabled fieldset are not focusable/tabbable
+//  unless they are in the _first_ <legend> element of the top-most disabled
+//  fieldset
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
+    var parentNode = node.parentElement;
+    // check if `node` is contained in a disabled <fieldset>
+    while (parentNode) {
+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
+        // look for the first <legend> among the children of the disabled <fieldset>
+        for (var i = 0; i < parentNode.children.length; i++) {
+          var child = parentNode.children.item(i);
+          // when the first <legend> (in document order) is found
+          if (child.tagName === 'LEGEND') {
+            // if its parent <fieldset> is not nested in another disabled <fieldset>,
+            // return whether `node` is a descendant of its first <legend>
+            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
+          }
+        }
+        // the disabled <fieldset> containing `node` has no <legend>
+        return true;
+      }
+      parentNode = parentNode.parentElement;
+    }
+  }
+  // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
+  return false;
+};
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+  if (node.disabled ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+  // For a details element with a summary, the summary element gets the focus
+  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
+    return false;
+  }
+  return true;
+};
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+    return false;
+  }
+  return true;
+};
+var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
+  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
+  if (isNaN(tabIndex) || tabIndex >= 0) {
+    return true;
+  }
+  // If a custom element has an explicit negative tabindex,
+  // browsers will not allow tab targeting said element's children.
+  return false;
+};
+/**
+ * @param {Array.<Element|CandidateScope>} candidates
+ * @returns Element[]
+ */
+var sortByOrder = function sortByOrder(candidates) {
+  var regularTabbables = [];
+  var orderedTabbables = [];
+  candidates.forEach(function (item, i) {
+    var isScope = !!item.scopeParent;
+    var element = isScope ? item.scopeParent : item;
+    var candidateTabindex = getTabindex(element, isScope);
+    var elements = isScope ? sortByOrder(item.candidates) : element;
+    if (candidateTabindex === 0) {
+      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
+    } else {
+      orderedTabbables.push({
+        documentOrder: i,
+        tabIndex: candidateTabindex,
+        item: item,
+        isScope: isScope,
+        content: elements
+      });
+    }
+  });
+  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
+    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
+    return acc;
+  }, []).concat(regularTabbables);
+};
+var tabbable = function tabbable(el, options) {
+  options = options || {};
+  var candidates;
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorTabbable.bind(null, options),
+      flatten: false,
+      getShadowRoot: options.getShadowRoot,
+      shadowRootFilter: isValidShadowRootTabbable
+    });
+  } else {
+    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+  }
+  return sortByOrder(candidates);
+};
+var focusable = function focusable(el, options) {
+  options = options || {};
+  var candidates;
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorFocusable.bind(null, options),
+      flatten: true,
+      getShadowRoot: options.getShadowRoot
+    });
+  } else {
+    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+  }
+  return candidates;
+};
+var isTabbable = function isTabbable(node, options) {
+  options = options || {};
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (matches.call(node, candidateSelector) === false) {
+    return false;
+  }
+  return isNodeMatchingSelectorTabbable(options, node);
+};
+var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+var isFocusable = function isFocusable(node, options) {
+  options = options || {};
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (matches.call(node, focusableCandidateSelector) === false) {
+    return false;
+  }
+  return isNodeMatchingSelectorFocusable(options, node);
+};
+/* Injected with object hook! */
+/*!
+* focus-trap 7.4.3
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+var activeFocusTraps = {
+  activateTrap: function activateTrap(trapStack, trap) {
+    if (trapStack.length > 0) {
+      var activeTrap = trapStack[trapStack.length - 1];
+      if (activeTrap !== trap) {
+        activeTrap.pause();
+      }
+    }
+    var trapIndex = trapStack.indexOf(trap);
+    if (trapIndex === -1) {
+      trapStack.push(trap);
+    } else {
+      // move this existing trap to the front of the queue
+      trapStack.splice(trapIndex, 1);
+      trapStack.push(trap);
+    }
+  },
+  deactivateTrap: function deactivateTrap(trapStack, trap) {
+    var trapIndex = trapStack.indexOf(trap);
+    if (trapIndex !== -1) {
+      trapStack.splice(trapIndex, 1);
+    }
+    if (trapStack.length > 0) {
+      trapStack[trapStack.length - 1].unpause();
+    }
+  }
+};
+var isSelectableInput = function isSelectableInput(node) {
+  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
+};
+var isEscapeEvent = function isEscapeEvent(e) {
+  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
+};
+var isTabEvent = function isTabEvent(e) {
+  return e.key === 'Tab' || e.keyCode === 9;
+};
+// checks for TAB by default
+var isKeyForward = function isKeyForward(e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+// checks for SHIFT+TAB by default
+var isKeyBackward = function isKeyBackward(e) {
+  return isTabEvent(e) && e.shiftKey;
+};
+var delay = function delay(fn) {
+  return setTimeout(fn, 0);
+};
+// Array.find/findIndex() are not supported on IE; this replicates enough
+//  of Array.findIndex() for our needs
+var findIndex = function findIndex(arr, fn) {
+  var idx = -1;
+  arr.every(function (value, i) {
+    if (fn(value)) {
+      idx = i;
+      return false; // break
+    }
+    return true; // next
+  });
+  return idx;
+};
+/**
+ * Get an option's value when it could be a plain value, or a handler that provides
+ *  the value.
+ * @param {*} value Option's value to check.
+ * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.
+ * @returns {*} The `value`, or the handler's returned value.
+ */
+var valueOrHandler = function valueOrHandler(value) {
+  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    params[_key - 1] = arguments[_key];
+  }
+  return typeof value === 'function' ? value.apply(void 0, params) : value;
+};
+var getActualTarget = function getActualTarget(event) {
+  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the
+  //  shadow host. However, event.target.composedPath() will be an array of
+  //  nodes "clicked" from inner-most (the actual element inside the shadow) to
+  //  outer-most (the host HTML document). If we have access to composedPath(),
+  //  then use its first element; otherwise, fall back to event.target (and
+  //  this only works for an _open_ shadow DOM; otherwise,
+  //  composedPath()[0] === event.target always).
+  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;
+};
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+var internalTrapStack = [];
+var createFocusTrap = function createFocusTrap(elements, userOptions) {
+  // SSR: a live trap shouldn't be created in this type of environment so this
+  //  should be safe code to execute if the `document` option isn't specified
+  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
+  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
+  var config = _objectSpread2({
+    returnFocusOnDeactivate: true,
+    escapeDeactivates: true,
+    delayInitialFocus: true,
+    isKeyForward: isKeyForward,
+    isKeyBackward: isKeyBackward
+  }, userOptions);
+  var state = {
+    // containers given to createFocusTrap()
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // list of objects identifying tabbable nodes in `containers` in the trap
+    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
+    //  is active, but the trap should never get to a state where there isn't at least one group
+    //  with at least one tabbable node in it (that would lead to an error condition that would
+    //  result in an error being thrown)
+    // @type {Array<{
+    //   container: HTMLElement,
+    //   tabbableNodes: Array<HTMLElement>, // empty if none
+    //   focusableNodes: Array<HTMLElement>, // empty if none
+    //   firstTabbableNode: HTMLElement|null,
+    //   lastTabbableNode: HTMLElement|null,
+    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
+    // }>}
+    containerGroups: [],
+    // same order/length as `containers` list
+    // references to objects in `containerGroups`, but only those that actually have
+    //  tabbable nodes in them
+    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
+    //  the same length
+    tabbableGroups: [],
+    nodeFocusedBeforeActivation: null,
+    mostRecentlyFocusedNode: null,
+    active: false,
+    paused: false,
+    // timer ID for when delayInitialFocus is true and initial focus in this trap
+    //  has been delayed during activation
+    delayInitialFocusTimer: undefined
+  };
+  var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
+  /**
+   * Gets a configuration option value.
+   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,
+   *  value will be taken from this object. Otherwise, value will be taken from base configuration.
+   * @param {string} optionName Name of the option whose value is sought.
+   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`
+   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.
+   */
+  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {
+    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];
+  };
+  /**
+   * Finds the index of the container that contains the element.
+   * @param {HTMLElement} element
+   * @param {Event} [event]
+   * @returns {number} Index of the container in either `state.containers` or
+   *  `state.containerGroups` (the order/length of these lists are the same); -1
+   *  if the element isn't found.
+   */
+  var findContainerIndex = function findContainerIndex(element, event) {
+    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
+    // NOTE: search `containerGroups` because it's possible a group contains no tabbable
+    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
+    //  and we still need to find the element in there
+    return state.containerGroups.findIndex(function (_ref) {
+      var container = _ref.container,
+        tabbableNodes = _ref.tabbableNodes;
+      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
+      //  web components if the `tabbableOptions.getShadowRoot` option was used for
+      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
+      //  look inside web components even if open)
+      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
+        return node === element;
+      });
+    });
+  };
+  /**
+   * Gets the node for the given option, which is expected to be an option that
+   *  can be either a DOM node, a string that is a selector to get a node, `false`
+   *  (if a node is explicitly NOT given), or a function that returns any of these
+   *  values.
+   * @param {string} optionName
+   * @returns {undefined | false | HTMLElement | SVGElement} Returns
+   *  `undefined` if the option is not specified; `false` if the option
+   *  resolved to `false` (node explicitly not given); otherwise, the resolved
+   *  DOM node.
+   * @throws {Error} If the option is set, not `false`, and is not, or does not
+   *  resolve to a node.
+   */
+  var getNodeForOption = function getNodeForOption(optionName) {
+    var optionValue = config[optionName];
+    if (typeof optionValue === 'function') {
+      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        params[_key2 - 1] = arguments[_key2];
+      }
+      optionValue = optionValue.apply(void 0, params);
+    }
+    if (optionValue === true) {
+      optionValue = undefined; // use default value
+    }
+    if (!optionValue) {
+      if (optionValue === undefined || optionValue === false) {
+        return optionValue;
+      }
+      // else, empty string (invalid), null (invalid), 0 (invalid)
+      throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
+    }
+    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+    if (typeof optionValue === 'string') {
+      node = doc.querySelector(optionValue); // resolve to node, or null if fails
+      if (!node) {
+        throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+      }
+    }
+    return node;
+  };
+  var getInitialFocusNode = function getInitialFocusNode() {
+    var node = getNodeForOption('initialFocus');
+    // false explicitly indicates we want no initialFocus at all
+    if (node === false) {
+      return false;
+    }
+    if (node === undefined || !isFocusable(node, config.tabbableOptions)) {
+      // option not specified nor focusable: use fallback options
+      if (findContainerIndex(doc.activeElement) >= 0) {
+        node = doc.activeElement;
+      } else {
+        var firstTabbableGroup = state.tabbableGroups[0];
+        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+        // NOTE: `fallbackFocus` option function cannot return `false` (not supported)
+        node = firstTabbableNode || getNodeForOption('fallbackFocus');
+      }
+    }
+    if (!node) {
+      throw new Error('Your focus-trap needs to have at least one focusable element');
+    }
+    return node;
+  };
+  var updateTabbableNodes = function updateTabbableNodes() {
+    state.containerGroups = state.containers.map(function (container) {
+      var tabbableNodes = tabbable(container, config.tabbableOptions);
+      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
+      //  are a superset of tabbable nodes
+      var focusableNodes = focusable(container, config.tabbableOptions);
+      return {
+        container: container,
+        tabbableNodes: tabbableNodes,
+        focusableNodes: focusableNodes,
+        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
+        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
+        /**
+         * Finds the __tabbable__ node that follows the given node in the specified direction,
+         *  in this container, if any.
+         * @param {HTMLElement} node
+         * @param {boolean} [forward] True if going in forward tab order; false if going
+         *  in reverse.
+         * @returns {HTMLElement|undefined} The next tabbable node, if any.
+         */
+        nextTabbableNode: function nextTabbableNode(node) {
+          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+          // NOTE: If tabindex is positive (in order to manipulate the tab order separate
+          //  from the DOM order), this __will not work__ because the list of focusableNodes,
+          //  while it contains tabbable nodes, does not sort its nodes in any order other
+          //  than DOM order, because it can't: Where would you place focusable (but not
+          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
+          // Support for positive tabindex is already broken and hard to manage (possibly
+          //  not supportable, TBD), so this isn't going to make things worse than they
+          //  already are, and at least makes things better for the majority of cases where
+          //  tabindex is either 0/unset or negative.
+          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
+          var nodeIdx = focusableNodes.findIndex(function (n) {
+            return n === node;
+          });
+          if (nodeIdx < 0) {
+            return undefined;
+          }
+          if (forward) {
+            return focusableNodes.slice(nodeIdx + 1).find(function (n) {
+              return isTabbable(n, config.tabbableOptions);
+            });
+          }
+          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
+            return isTabbable(n, config.tabbableOptions);
+          });
+        }
+      };
+    });
+    state.tabbableGroups = state.containerGroups.filter(function (group) {
+      return group.tabbableNodes.length > 0;
+    });
+    // throw if no groups have tabbable nodes and we don't have a fallback focus node either
+    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option
+    ) {
+      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
+    }
+  };
+  var tryFocus = function tryFocus(node) {
+    if (node === false) {
+      return;
+    }
+    if (node === doc.activeElement) {
+      return;
+    }
+    if (!node || !node.focus) {
+      tryFocus(getInitialFocusNode());
+      return;
+    }
+    node.focus({
+      preventScroll: !!config.preventScroll
+    });
+    state.mostRecentlyFocusedNode = node;
+    if (isSelectableInput(node)) {
+      node.select();
+    }
+  };
+  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
+    var node = getNodeForOption('setReturnFocus', previousActiveElement);
+    return node ? node : node === false ? false : previousActiveElement;
+  };
+  // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event.
+  var checkPointerDown = function checkPointerDown(e) {
+    var target = getActualTarget(e);
+    if (findContainerIndex(target, e) >= 0) {
+      // allow the click since it ocurred inside the trap
+      return;
+    }
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      // immediately deactivate the trap
+      trap.deactivate({
+        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
+        //  which will result in the outside click setting focus to the node
+        //  that was clicked (and if not focusable, to "nothing"); by setting
+        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
+        //  on activation (or the configured `setReturnFocus` node), whether the
+        //  outside click was on a focusable node or not
+        returnFocus: config.returnFocusOnDeactivate
+      });
+      return;
+    }
+    // This is needed for mobile devices.
+    // (If we'll only let `click` events through,
+    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      // allow the click outside the trap to take place
+      return;
+    }
+    // otherwise, prevent the click
+    e.preventDefault();
+  };
+  // In case focus escapes the trap for some strange reason, pull it back in.
+  var checkFocusIn = function checkFocusIn(e) {
+    var target = getActualTarget(e);
+    var targetContained = findContainerIndex(target, e) >= 0;
+    // In Firefox when you Tab out of an iframe the Document is briefly focused.
+    if (targetContained || target instanceof Document) {
+      if (targetContained) {
+        state.mostRecentlyFocusedNode = target;
+      }
+    } else {
+      // escaped! pull it back in to where it just left
+      e.stopImmediatePropagation();
+      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
+    }
+  };
+  // Hijack key nav events on the first and last focusable nodes of the trap,
+  // in order to prevent focus from escaping. If it escapes for even a
+  // moment it can end up scrolling the page and causing confusion so we
+  // kind of need to capture the action at the keydown phase.
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var target = getActualTarget(event);
+    updateTabbableNodes();
+    var destinationNode = null;
+    if (state.tabbableGroups.length > 0) {
+      // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's focusable
+      //  with tabIndex='-1' and was given initial focus
+      var containerIndex = findContainerIndex(target, event);
+      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
+      if (containerIndex < 0) {
+        // target not found in any group: quite possible focus has escaped the trap,
+        //  so bring it back into...
+        if (isBackward) {
+          // ...the last node in the last group
+          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
+        } else {
+          // ...the first node in the first group
+          destinationNode = state.tabbableGroups[0].firstTabbableNode;
+        }
+      } else if (isBackward) {
+        // REVERSE
+        // is the target the first tabbable node in a group?
+        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
+          var firstTabbableNode = _ref2.firstTabbableNode;
+          return target === firstTabbableNode;
+        });
+        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
+          // an exception case where the target is either the container itself, or
+          //  a non-tabbable node that was given focus (i.e. tabindex is negative
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
+          //  case, we should handle shift+tab as if focus were on the container's
+          //  first tabbable node, and go to the last tabbable node of the LAST group
+          startOfGroupIndex = containerIndex;
+        }
+        if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
+          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+          var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+          destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
+        }
+      } else {
+        // FORWARD
+        // is the target the last tabbable node in a group?
+        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
+          var lastTabbableNode = _ref3.lastTabbableNode;
+          return target === lastTabbableNode;
+        });
+        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
+          // an exception case where the target is the container itself, or
+          //  a non-tabbable node that was given focus (i.e. tabindex is negative
+          //  and user clicked on it or node was programmatically given focus)
+          //  and is not followed by any other tabbable node, in which
+          //  case, we should handle tab as if focus were on the container's
+          //  last tabbable node, and go to the first tabbable node of the FIRST group
+          lastOfGroupIndex = containerIndex;
+        }
+        if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
+          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+          destinationNode = _destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
+        }
+      }
+    } else {
+      // no groups available
+      // NOTE: the fallbackFocus option does not support returning false to opt-out
+      destinationNode = getNodeForOption('fallbackFocus');
+    }
+    if (destinationNode) {
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
+      tryFocus(destinationNode);
+    }
+    // else, let the browser take care of [shift+]tab and move the focus
+  };
+  var checkKey = function checkKey(event) {
+    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
+      event.preventDefault();
+      trap.deactivate();
+      return;
+    }
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
+    }
+  };
+  var checkClick = function checkClick(e) {
+    var target = getActualTarget(e);
+    if (findContainerIndex(target, e) >= 0) {
+      return;
+    }
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      return;
+    }
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  };
+  //
+  // EVENT LISTENERS
+  //
+  var addListeners = function addListeners() {
+    if (!state.active) {
+      return;
+    }
+    // There can be only one listening focus trap at a time
+    activeFocusTraps.activateTrap(trapStack, trap);
+    // Delay ensures that the focused element doesn't capture the event
+    // that caused the focus trap activation.
+    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+      tryFocus(getInitialFocusNode());
+    }) : tryFocus(getInitialFocusNode());
+    doc.addEventListener('focusin', checkFocusIn, true);
+    doc.addEventListener('mousedown', checkPointerDown, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('touchstart', checkPointerDown, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('click', checkClick, {
+      capture: true,
+      passive: false
+    });
+    doc.addEventListener('keydown', checkKey, {
+      capture: true,
+      passive: false
+    });
+    return trap;
+  };
+  var removeListeners = function removeListeners() {
+    if (!state.active) {
+      return;
+    }
+    doc.removeEventListener('focusin', checkFocusIn, true);
+    doc.removeEventListener('mousedown', checkPointerDown, true);
+    doc.removeEventListener('touchstart', checkPointerDown, true);
+    doc.removeEventListener('click', checkClick, true);
+    doc.removeEventListener('keydown', checkKey, true);
+    return trap;
+  };
+  //
+  // MUTATION OBSERVER
+  //
+  var checkDomRemoval = function checkDomRemoval(mutations) {
+    var isFocusedNodeRemoved = mutations.some(function (mutation) {
+      var removedNodes = Array.from(mutation.removedNodes);
+      return removedNodes.some(function (node) {
+        return node === state.mostRecentlyFocusedNode;
+      });
+    });
+    // If the currently focused is removed then browsers will move focus to the
+    // <body> element. If this happens, try to move focus back into the trap.
+    if (isFocusedNodeRemoved) {
+      tryFocus(getInitialFocusNode());
+    }
+  };
+  // Use MutationObserver - if supported - to detect if focused node is removed
+  // from the DOM.
+  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;
+  var updateObservedNodes = function updateObservedNodes() {
+    if (!mutationObserver) {
+      return;
+    }
+    mutationObserver.disconnect();
+    if (state.active && !state.paused) {
+      state.containers.map(function (container) {
+        mutationObserver.observe(container, {
+          subtree: true,
+          childList: true
+        });
+      });
+    }
+  };
+  //
+  // TRAP DEFINITION
+  //
+  trap = {
+    get active() {
+      return state.active;
+    },
+    get paused() {
+      return state.paused;
+    },
+    activate: function activate(activateOptions) {
+      if (state.active) {
+        return this;
+      }
+      var onActivate = getOption(activateOptions, 'onActivate');
+      var onPostActivate = getOption(activateOptions, 'onPostActivate');
+      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
+      if (!checkCanFocusTrap) {
+        updateTabbableNodes();
+      }
+      state.active = true;
+      state.paused = false;
+      state.nodeFocusedBeforeActivation = doc.activeElement;
+      onActivate === null || onActivate === void 0 ? void 0 : onActivate();
+      var finishActivation = function finishActivation() {
+        if (checkCanFocusTrap) {
+          updateTabbableNodes();
+        }
+        addListeners();
+        updateObservedNodes();
+        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();
+      };
+      if (checkCanFocusTrap) {
+        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
+        return this;
+      }
+      finishActivation();
+      return this;
+    },
+    deactivate: function deactivate(deactivateOptions) {
+      if (!state.active) {
+        return this;
+      }
+      var options = _objectSpread2({
+        onDeactivate: config.onDeactivate,
+        onPostDeactivate: config.onPostDeactivate,
+        checkCanReturnFocus: config.checkCanReturnFocus
+      }, deactivateOptions);
+      clearTimeout(state.delayInitialFocusTimer); // noop if undefined
+      state.delayInitialFocusTimer = undefined;
+      removeListeners();
+      state.active = false;
+      state.paused = false;
+      updateObservedNodes();
+      activeFocusTraps.deactivateTrap(trapStack, trap);
+      var onDeactivate = getOption(options, 'onDeactivate');
+      var onPostDeactivate = getOption(options, 'onPostDeactivate');
+      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
+      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
+      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
+      var finishDeactivation = function finishDeactivation() {
+        delay(function () {
+          if (returnFocus) {
+            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+          }
+          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();
+        });
+      };
+      if (returnFocus && checkCanReturnFocus) {
+        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
+        return this;
+      }
+      finishDeactivation();
+      return this;
+    },
+    pause: function pause(pauseOptions) {
+      if (state.paused || !state.active) {
+        return this;
+      }
+      var onPause = getOption(pauseOptions, 'onPause');
+      var onPostPause = getOption(pauseOptions, 'onPostPause');
+      state.paused = true;
+      onPause === null || onPause === void 0 ? void 0 : onPause();
+      removeListeners();
+      updateObservedNodes();
+      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();
+      return this;
+    },
+    unpause: function unpause(unpauseOptions) {
+      if (!state.paused || !state.active) {
+        return this;
+      }
+      var onUnpause = getOption(unpauseOptions, 'onUnpause');
+      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
+      state.paused = false;
+      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();
+      updateTabbableNodes();
+      addListeners();
+      updateObservedNodes();
+      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();
+      return this;
+    },
+    updateContainerElements: function updateContainerElements(containerElements) {
+      var elementsAsArray = [].concat(containerElements).filter(Boolean);
+      state.containers = elementsAsArray.map(function (element) {
+        return typeof element === 'string' ? doc.querySelector(element) : element;
+      });
+      if (state.active) {
+        updateTabbableNodes();
+      }
+      updateObservedNodes();
+      return this;
+    }
+  };
+  // initialize container elements
+  trap.updateContainerElements(elements);
+  return trap;
+};
+/* Injected with object hook! */
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useFocusTrap(target, options = {}) {
+  let trap;
+  const _a = options, { immediate } = _a, focusTrapOptions = __objRest(_a, ["immediate"]);
+  const hasFocus = ref(false);
+  const isPaused = ref(false);
+  const activate = (opts) => trap && trap.activate(opts);
+  const deactivate = (opts) => trap && trap.deactivate(opts);
+  const pause = () => {
+    if (trap) {
+      trap.pause();
+      isPaused.value = true;
+    }
+  };
+  const unpause = () => {
+    if (trap) {
+      trap.unpause();
+      isPaused.value = false;
+    }
+  };
+  watch(
+    () => unrefElement(target),
+    (el) => {
+      if (!el)
+        return;
+      trap = createFocusTrap(el, __spreadProps(__spreadValues({}, focusTrapOptions), {
+        onActivate() {
+          hasFocus.value = true;
+          if (options.onActivate)
+            options.onActivate();
+        },
+        onDeactivate() {
+          hasFocus.value = false;
+          if (options.onDeactivate)
+            options.onDeactivate();
+        }
+      }));
+      if (immediate)
+        activate();
+    },
+    { flush: "post" }
+  );
+  tryOnScopeDispose(() => deactivate());
+  return {
+    hasFocus,
+    isPaused,
+    activate,
+    deactivate,
+    pause,
+    unpause
+  };
+}
+/* Injected with object hook! */
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "VDialog",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    dim: { type: Boolean, default: true }
+  },
+  emits: ["close", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const show = useVModel(props, "modelValue", emit, { passive: true });
+    const card = ref(null);
+    const shown = ref(false);
+    const { activate, deactivate } = useFocusTrap(computed(() => card.value || document.body), { immediate: false });
+    watchEffect(
+      () => {
+        if (!shown.value && show.value)
+          shown.value = true;
+        if (show.value && card.value)
+          nextTick(activate);
+        else
+          deactivate();
+      }
+    );
+    function close() {
+      show.value = false;
+      emit("close");
+    }
+    return (_ctx, _cache) => {
+      const _component_VCard = __unplugin_components_7;
+      return shown.value ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        withDirectives(createBaseVNode("div", {
+          class: normalizeClass(["n-dialog fixed inset-0 z-100 flex items-center justify-center n-transition", [
+            unref(show) ? "" : "op0 pointer-events-none visibility-none"
+          ]])
+        }, [
+          createBaseVNode("div", {
+            class: normalizeClass(["absolute inset-0 -z-1", [
+              _ctx.dim ? "bg-black/50" : ""
+            ]]),
+            onClick: _cache[0] || (_cache[0] = ($event) => close())
+          }, null, 2),
+          createVNode(_component_VCard, mergeProps(_ctx.$attrs, {
+            ref_key: "card",
+            ref: card,
+            class: "max-h-screen of-auto"
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16)
+        ], 2), [
+          [vShow, unref(show)]
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+/* Injected with object hook! */
+function useSingleton() {
+  const key = Symbol("singleton");
+  return [
+    function provide(v) {
+      const vm = getCurrentInstance();
+      vm?.appContext.app.provide(key, v);
+    },
+    function use(fallback) {
+      return inject(key, fallback);
+    }
+  ];
+}
+const [
+  provideNotification,
+  useNotification
+] = useSingleton();
+/* Injected with object hook! */
+function useCopy() {
+  const clipboard = useClipboard();
+  const showNotification = useNotification();
+  return (text) => {
+    clipboard.copy(text);
+    showNotification("Copied to clipboard", "i-carbon-checkmark");
+  };
+}
+/* Injected with object hook! */
+const _hoisted_1$3 = {
+  flex: "~ gap-1",
+  "text-lg": ""
+};
+const _hoisted_2$3 = ["onClick"];
+const _hoisted_3$2 = /* @__PURE__ */ createBaseVNode("h1", { "text-3xl": "" }, " Popup is not Supported ", -1);
+const _hoisted_4$2 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode(" To popup the DevTools, it requires the "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    href: "https://developer.chrome.com/docs/web-platform/document-picture-in-picture/",
+    target: "_blank",
+    "font-bold": "",
+    underline: ""
+  }, "Document Picture-in-Picture API"),
+  /* @__PURE__ */ createTextVNode(" which is currently in experimental state. ")
+], -1);
+const _hoisted_5$2 = /* @__PURE__ */ createBaseVNode("p", null, [
+  /* @__PURE__ */ createTextVNode(" As June 2023, the API is only available in Chrome 111 and above, under a flag "),
+  /* @__PURE__ */ createBaseVNode("code", null, "#document-picture-in-picture-api"),
+  /* @__PURE__ */ createTextVNode(". ")
+], -1);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "PanelPosition",
+  setup(__props) {
+    const { position: _position } = useFrameState();
+    const frameState = computed(() => ({ position: _position.value }));
+    const client = useDevtoolsClient();
+    const showPopupUnsupported = ref(false);
+    const copy = useCopy();
+    const dockButton = [
+      {
+        position: "popup",
+        icon: "i-carbon-launch"
+      },
+      {
+        position: "bottom",
+        icon: "i-carbon-open-panel-filled-bottom"
+      },
+      {
+        position: "right",
+        icon: "i-carbon-open-panel-filled-right"
+      },
+      {
+        position: "left",
+        icon: "i-carbon-open-panel-filled-left"
+      },
+      {
+        position: "top",
+        icon: "i-carbon-open-panel-filled-top"
+      }
+    ];
+    function toggle(position) {
+      if (position === "popup") {
+        if (!window.parent.documentPictureInPicture?.requestWindow) {
+          showPopupUnsupported.value = true;
+          return;
+        }
+      } else {
+        _position.value = position;
+      }
+      client.value?.panel?.togglePosition(position);
+    }
+    return (_ctx, _cache) => {
+      const _component_VButton = _sfc_main$d;
+      const _component_VDialog = _sfc_main$5;
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", _hoisted_1$3, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(dockButton, (item) => {
+            return createBaseVNode("button", {
+              key: item.position,
+              class: normalizeClass([unref(frameState).position === item.position ? "text-primary" : "op50", item.icon]),
+              onClick: ($event) => toggle(item.position)
+            }, null, 10, _hoisted_2$3);
+          }), 64))
+        ]),
+        createVNode(_component_VDialog, {
+          modelValue: unref(showPopupUnsupported),
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(showPopupUnsupported) ? showPopupUnsupported.value = $event : null),
+          class: "popup-dialog z-2000 max-w-150 p6 pt-2",
+          onClose: _cache[3] || (_cache[3] = ($event) => showPopupUnsupported.value = false)
+        }, {
+          default: withCtx(() => [
+            _hoisted_3$2,
+            _hoisted_4$2,
+            _hoisted_5$2,
+            createBaseVNode("p", null, [
+              createTextVNode(" Your current browser does not seem to support the API, or the flag is not enabled yet. You can try enabling the flag by visiting "),
+              createVNode(_component_VButton, {
+                n: "xs primary",
+                title: "Click to Copy",
+                onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)("chrome://flags/#document-picture-in-picture-api"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" chrome://flags/#document-picture-in-picture-api ")
+                ]),
+                _: 1
+              }),
+              createTextVNode(" and restart the browser. ")
+            ]),
+            createBaseVNode("div", null, [
+              createVNode(_component_VButton, {
+                onClick: _cache[1] || (_cache[1] = ($event) => showPopupUnsupported.value = false)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" Close ")
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 64);
+    };
+  }
+});
+/* Injected with object hook! */
+const isInPopup = !!window.parent.__VUE_DEVTOOLS_IS_POPUP__;
+/* Injected with object hook! */
+const _hoisted_1$2 = {
+  key: 0,
+  px3: "",
+  py2: "",
+  border: "b base",
+  flex: "~ col gap-1"
+};
+const _hoisted_2$2 = /* @__PURE__ */ createBaseVNode("div", {
+  "text-sm": "",
+  op50: ""
+}, " Dock devtools to ", -1);
+const _hoisted_3$1 = {
+  px3: "",
+  py2: "",
+  border: "b base",
+  flex: "~ gap-2"
+};
+const _hoisted_4$1 = /* @__PURE__ */ createBaseVNode("div", {
+  "carbon-sun": "",
+  "translate-y--1px": "",
+  "dark:carbon-moon": ""
+}, null, -1);
+const _hoisted_5$1 = /* @__PURE__ */ createBaseVNode("div", {
+  "carbon-settings": "",
+  "translate-y--1px": ""
+}, null, -1);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "DockingPanel",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_PanelPosition = _sfc_main$4;
+      const _component_VButton = _sfc_main$d;
+      const _component_VDarkToggle = _sfc_main$7;
+      const _component_RouterLink = resolveComponent("RouterLink");
+      return openBlock(), createElementBlock("div", null, [
+        !unref(isInPopup) ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+          _hoisted_2$2,
+          createVNode(_component_PanelPosition)
+        ])) : createCommentVNode("", true),
+        createBaseVNode("div", _hoisted_3$1, [
+          createVNode(_component_VDarkToggle, null, {
+            default: withCtx(({ toggle, isDark }) => [
+              createVNode(_component_VButton, {
+                n: "sm primary",
+                onClick: toggle
+              }, {
+                default: withCtx(() => [
+                  _hoisted_4$1,
+                  createTextVNode(" " + toDisplayString(isDark.value ? "Dark" : "Light"), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_RouterLink, {
+            replace: "",
+            class: "n-button-base active:n-button-active focus-visible:n-focus-base n-transition n-primary n-sm hover:n-button-hover n-disabled:n-disabled",
+            to: "/settings"
+          }, {
+            default: withCtx(() => [
+              _hoisted_5$1,
+              createTextVNode(" Settings ")
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+/* Injected with object hook! */
+const devToolsSettings = useLocalStorage("__vue-devtools-settings__", {
+  scale: 1,
+  hiddenTabs: [],
+  hiddenTabCategories: []
+}, { mergeDefaults: true });
+const devToolsSettingsRefs = toRefs(devToolsSettings);
+function useDevToolsSettings() {
+  return devToolsSettingsRefs;
+}
+/* Injected with object hook! */
+const builtinTabs = [
+  {
+    path: "overview",
+    title: "Overview",
+    icon: "i-carbon-information"
+  },
+  {
+    path: "pages",
+    title: "Pages",
+    icon: "i-carbon-tree-view-alt"
+  },
+  {
+    path: "components",
+    title: "Components",
+    icon: "i-carbon-assembly-cluster"
+  },
+  {
+    path: "assets",
+    title: "Assets",
+    icon: "i-carbon-image-copy"
+  },
+  {
+    path: "routes",
+    title: "Routes",
+    icon: "mdi:location-path",
+    category: "modules"
+  },
+  {
+    path: "pinia",
+    title: "Pinia",
+    icon: "icon-park-outline:pineapple",
+    category: "modules"
+  },
+  {
+    path: "timeline",
+    title: "Timeline",
+    icon: "i-icon-park-outline:vertical-timeline"
+  },
+  {
+    title: "Inspector",
+    icon: "i-carbon-select-window",
+    category: "advanced",
+    event: (client, router) => {
+      router.replace("/__inspecting");
+      client?.inspector?.enable();
+    }
+  },
+  {
+    title: "EyeDropper",
+    icon: "i-mdi:eyedropper",
+    category: "advanced",
+    event: (client, router) => {
+      router.replace("/__eyedropper");
+      client.panel?.toggleViewMode("xs");
+    }
+  },
+  {
+    path: "component-docs",
+    title: "Component docs",
+    icon: "i-carbon-document-preliminary",
+    category: "advanced"
+  },
+  {
+    path: "npm",
+    title: "Search packages",
+    icon: "i-teenyicons:npm-outline",
+    category: "advanced"
+  },
+  {
+    path: "graph",
+    title: "Graph",
+    icon: "i-carbon-network-4",
+    category: "advanced"
+  },
+  {
+    path: "inspect",
+    title: "Inspect",
+    icon: "i-carbon-ibm-watson-discovery",
+    category: "advanced"
+  },
+  {
+    path: "documentations",
+    title: "Documentations",
+    icon: "i-carbon-document",
+    category: "advanced"
+  }
+];
+function useTabs() {
+  const settings = useDevToolsSettings();
+  return {
+    enabled: computed(() => {
+      return builtinTabs.filter((tab) => !settings.hiddenTabs.value.includes(tab.title ?? ""));
+    }),
+    all: computed(() => builtinTabs)
+  };
+}
+function useCategorizedTabs(enabledOnly = true) {
+  const _tabs = useTabs();
+  const tabs = enabledOnly ? _tabs.enabled : _tabs.all;
+  const settings = useDevToolsSettings();
+  return computed(() => {
+    const categories = {
+      app: [],
+      modules: [],
+      advanced: []
+    };
+    for (const tab of tabs.value) {
+      const category = tab?.category || "app";
+      if (enabledOnly && settings.hiddenTabCategories.value.includes(category))
+        continue;
+      if (!categories[category])
+        console.warn(`Unknown tab category: ${category}`);
+      else
+        categories[category].push(tab);
+    }
+    return Object.entries(categories);
+  });
+}
+/* Injected with object hook! */
+const _hoisted_1$1 = {
+  border: "r base",
+  flex: "~ col gap-0.5",
+  "z-100": "",
+  "h-full": "",
+  "items-center": "",
+  "bg-base": "",
+  class: "no-scrollbar"
+};
+const _hoisted_2$1 = {
+  flex: "~ col",
+  sticky: "",
+  "top-0": "",
+  "z-1": "",
   mb1: "",
   "items-center": "",
   pt3: "",
@@ -14870,10 +16474,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const categories = useCategorizedTabs();
     return (_ctx, _cache) => {
-      const _component_DockingPanel = __unplugin_components_0;
+      const _component_DockingPanel = _sfc_main$3;
       const _component_VDropdown = resolveComponent("VDropdown");
-      const _component_SideNavItem = _sfc_main$6;
-      const _component_TabIcon = _sfc_main$7;
+      const _component_SideNavItem = _sfc_main$8;
+      const _component_TabIcon = _sfc_main$9;
       const _component_RouterLink = resolveComponent("RouterLink");
       return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createBaseVNode("div", _hoisted_2$1, [
@@ -14943,25 +16547,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 /* Injected with object hook! */
-function useSingleton() {
-  const key = Symbol("singleton");
-  return [
-    function provide(v) {
-      const vm = getCurrentInstance();
-      vm?.appContext.app.provide(key, v);
-    },
-    function use(fallback) {
-      return inject(key, fallback);
-    }
-  ];
-}
-const [
-  provideNotification,
-  useNotification
-] = useSingleton();
-/* Injected with object hook! */
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Notification",
   setup(__props) {
@@ -15741,4 +17326,4 @@ app.mount("#app");
 /* Injected with object hook! */
-export { ref as $, timelineLayer as A, activeTimelineEvents as B, activeTimelineEventIndex as C, toggleTimelineEventIndex as D, timelineEventDetails as E, Fragment as F, activeLayerId as G, toggleTimelineLayer as H, useVModel as I, vModelSelect as J, isRef as K, vModelCheckbox as L, withKeys as M, useCategorizedTabs as N, createTextVNode as O, useDevToolsSettings as P, useFrameState as Q, _sfc_main$b as R, _sfc_main$5 as S, _sfc_main$7 as T, router$1 as U, routeRecordMatcherState as V, activeRouteRecordMatcherState as W, activeRouteRecordIndex as X, toggleRouteRecordMatcher as Y, __unplugin_components_1 as Z, _sfc_main$4 as _, popScopeId as a, computed as a0, piniaStoresCategory as a1, toRaw as a2, piniaState as a3, piniaGetters as a4, withModifiers as a5, onMounted as a6, currentRoute as a7, routes as a8, vueVersion as a9, computedAsync as aA, useTimeAgo as aB, onKeyDown as aC, _export_sfc as aD, useClipboard as aE, useNotification as aF, vModelDynamic as aG, __vitePreload as aH, useDevtoolsClient as aI, useRouter as aJ, __unplugin_components_0$1 as aa, useEventListener as ab, hookApi as ac, useScrollLock as ad, watch as ae, useInfiniteScroll as af, useStorage as ag, vModelText as ah, useDark as ai, Teleport as aj, useColorMode as ak, reactive as al, useElementBounding as am, watchEffect as an, onUnmounted as ao, shallowRef as ap, onVueInstanceUpdate as aq, instance as ar, nanoid as as, vShow as at, getCurrentInstance as au, h as av, useElementSize as aw, onClickOutside as ax, Transition as ay, useStyleTag as az, resolveDirective as b, createBlock as c, withDirectives as d, createElementBlock as e, renderSlot as f, createCommentVNode as g, withCtx as h, renderList as i, resolveDynamicComponent as j, mergeProps as k, normalizeStyle as l, markRaw as m, nextTick as n, openBlock as o, pushScopeId as p, normalizeClass as q, resolveComponent as r, shallowReactive as s, toHandlers as t, createVNode as u, defineComponent as v, withScopeId as w, createBaseVNode as x, toDisplayString as y, unref as z };
+export { toggleRouteRecordMatcher as $, timelineLayer as A, activeTimelineEvents as B, activeTimelineEventIndex as C, toggleTimelineEventIndex as D, timelineEventDetails as E, Fragment as F, activeLayerId as G, toggleTimelineLayer as H, useVModel as I, vModelSelect as J, isRef as K, vModelCheckbox as L, withKeys as M, useCategorizedTabs as N, isInPopup as O, createTextVNode as P, useDevToolsSettings as Q, useFrameState as R, _sfc_main$4 as S, _sfc_main$d as T, _sfc_main$7 as U, _sfc_main$9 as V, router$1 as W, routeRecordMatcherState as X, activeRouteRecordMatcherState as Y, activeRouteRecordIndex as Z, __unplugin_components_7 as _, popScopeId as a, __unplugin_components_1 as a0, ref as a1, computed as a2, piniaStoresCategory as a3, toRaw as a4, piniaState as a5, piniaGetters as a6, withModifiers as a7, onMounted as a8, currentRoute as a9, onClickOutside as aA, Transition as aB, useStyleTag as aC, computedAsync as aD, useTimeAgo as aE, onKeyDown as aF, _export_sfc as aG, vModelDynamic as aH, __vitePreload as aI, useDevtoolsClient as aJ, useRouter as aK, routes as aa, vueVersion as ab, __unplugin_components_0 as ac, useEventListener as ad, hookApi as ae, useScrollLock as af, watch as ag, useInfiniteScroll as ah, useStorage as ai, vModelText as aj, useDark as ak, Teleport as al, useColorMode as am, reactive as an, useElementBounding as ao, watchEffect as ap, onUnmounted as aq, shallowRef as ar, onVueInstanceUpdate as as, instance as at, useCopy as au, nanoid as av, vShow as aw, getCurrentInstance as ax, h as ay, useElementSize as az, resolveDirective as b, createBlock as c, withDirectives as d, createElementBlock as e, renderSlot as f, createCommentVNode as g, withCtx as h, renderList as i, resolveDynamicComponent as j, mergeProps as k, normalizeStyle as l, markRaw as m, nextTick as n, openBlock as o, pushScopeId as p, normalizeClass as q, resolveComponent as r, shallowReactive as s, toHandlers as t, createVNode as u, defineComponent as v, withScopeId as w, createBaseVNode as x, toDisplayString as y, unref as z };