vite-plugin-vue-devtools 1.0.0-rc.8 → 7.0.0

package/dist/client/assets/components-b0181ea4.js

@@ -1,790 +0,0 @@
-import { _ as __unplugin_components_0 } from './PanelGrids-664603ce.js';
-import { a$ as ref, a1 as computed, b8 as shallowRef, c6 as useDevToolsClient, cw as useThrottleFn, v as defineComponent, by as watch, r as resolveComponent, o as openBlock, e as createElementBlock, x as createBaseVNode, z as unref, c as createBlock, q as normalizeClass, y as toDisplayString, l as normalizeStyle, F as Fragment, i as renderList, g as createCommentVNode, cp as watchDebounced, aP as onMounted, cx as onVueInstanceUpdate, cu as useMagicKeys, bz as watchEffect, u as createVNode, h as withCtx, aC as isRef, c7 as rootPath, aZ as reactive, _ as __unplugin_components_7, cy as instance } from './index-77d53487.js';
-import { a as _sfc_main$2, _ as _sfc_main$4 } from './StateFields.vue_vue_type_script_setup_true_lang-48cf50ad.js';
-import { g as getInstanceName, c as classify, k as kebabize, i as isFragment, b as isBeingDestroyed, d as getUniqueComponentId, e as getRenderKey, f as getInstanceState, h as getInstanceDetails } from './data-8729d21a.js';
-import { _ as _sfc_main$3 } from './TextInput.vue_vue_type_script_setup_true_lang-65c09c69.js';
-import { g, M } from './splitpanes.es-26cdc434.js';
-import './IconButton.vue_vue_type_script_setup_true_lang-48a6bea2.js';
-
-const t=t=>"object"==typeof t&&null!=t&&1===t.nodeType,e$1=(t,e)=>(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t),n=(t,n)=>{if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e$1(o.overflowY,n)||e$1(o.overflowX,n)||(t=>{const e=(t=>{if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}})(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)})(t)}return !1},o$1=(t,e,n,o,i,l,r,d)=>l<t&&r>e||l>t&&r<e?0:l<=t&&d<=n||r>=e&&d>=n?l-t-o:r>e&&d<n||l<t&&d>n?r-e+i:0,i=t=>{const e=t.parentElement;return null==e?t.getRootNode().host||null:e},l=(e,l)=>{var r,d,s,h;if("undefined"==typeof document)return [];const{scrollMode:c,block:f,inline:u,boundary:a,skipOverflowHiddenElements:g}=l,m="function"==typeof a?a:t=>t!==a;if(!t(e))throw new TypeError("Invalid target");const p=document.scrollingElement||document.documentElement,w=[];let W=e;for(;t(W)&&m(W);){if(W=i(W),W===p){w.push(W);break}null!=W&&W===document.body&&n(W)&&!n(document.documentElement)||null!=W&&n(W,g)&&w.push(W);}const H=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,b=null!=(h=null==(s=window.visualViewport)?void 0:s.height)?h:innerHeight,{scrollX:v,scrollY:y}=window,{height:E,width:M,top:x,right:I,bottom:C,left:R}=e.getBoundingClientRect();let T="start"===f||"nearest"===f?x:"end"===f?C:x+E/2,V="center"===u?R+M/2:"end"===u?I:R;const k=[];for(let t=0;t<w.length;t++){const e=w[t],{height:n,width:i,top:l,right:r,bottom:d,left:s}=e.getBoundingClientRect();if("if-needed"===c&&x>=0&&R>=0&&C<=b&&I<=H&&x>=l&&C<=d&&R>=s&&I<=r)return k;const h=getComputedStyle(e),a=parseInt(h.borderLeftWidth,10),g=parseInt(h.borderTopWidth,10),m=parseInt(h.borderRightWidth,10),W=parseInt(h.borderBottomWidth,10);let B=0,D=0;const L="offsetWidth"in e?e.offsetWidth-e.clientWidth-a-m:0,S="offsetHeight"in e?e.offsetHeight-e.clientHeight-g-W:0,X="offsetWidth"in e?0===e.offsetWidth?0:i/e.offsetWidth:0,Y="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(p===e)B="start"===f?T:"end"===f?T-b:"nearest"===f?o$1(y,y+b,b,g,W,y+T,y+T+E,E):T-b/2,D="start"===u?V:"center"===u?V-H/2:"end"===u?V-H:o$1(v,v+H,H,a,m,v+V,v+V+M,M),B=Math.max(0,B+y),D=Math.max(0,D+v);else {B="start"===f?T-l-g:"end"===f?T-d+W+S:"nearest"===f?o$1(l,d,n,g,W+S,T,T+E,E):T-(l+n/2)+S/2,D="start"===u?V-s-a:"center"===u?V-(s+i/2)+L/2:"end"===u?V-r+m+L:o$1(s,r,i,a,m+L,V,V+M,M);const{scrollLeft:t,scrollTop:h}=e;B=Math.max(0,Math.min(h+B/Y,e.scrollHeight-n/Y+S)),D=Math.max(0,Math.min(t+D/X,e.scrollWidth-i/X+L)),T+=h-B,V+=t-D;}k.push({el:e,top:B,left:D});}return k};
-/* Injected with object hook! */
-
-const o=t=>!1===t?{block:"end",inline:"nearest"}:(t=>t===Object(t)&&0!==Object.keys(t).length)(t)?t:{block:"start",inline:"nearest"};function e(e,r){if(!e.isConnected||!(t=>{let o=t;for(;o&&o.parentNode;){if(o.parentNode===document)return !0;o=o.parentNode instanceof ShadowRoot?o.parentNode.host:o.parentNode;}return !1})(e))return;const n=(t=>{const o=window.getComputedStyle(t);return {top:parseFloat(o.scrollMarginTop)||0,right:parseFloat(o.scrollMarginRight)||0,bottom:parseFloat(o.scrollMarginBottom)||0,left:parseFloat(o.scrollMarginLeft)||0}})(e);if((t=>"object"==typeof t&&"function"==typeof t.behavior)(r))return r.behavior(l(e,r));const l$1="boolean"==typeof r||null==r?void 0:r.behavior;for(const{el:a,top:i,left:s}of l(e,o(r))){const t=i-n.top+n.bottom,o=s-n.left+n.right;a.scroll({top:t,left:o,behavior:l$1});}}
-/* Injected with object hook! */
-
-class ComponentFilter {
-  filter;
-  constructor(filter) {
-    this.filter = filter || "";
-  }
-  /**
-   * Check if an instance is qualified.
-   *
-   * @param {Vue|Vnode} instance
-   * @return {boolean}
-   */
-  isQualified(instance) {
-    const name = getInstanceName(instance);
-    return classify(name).toLowerCase().includes(this.filter) || kebabize(name).toLowerCase().includes(this.filter);
-  }
-  setFilter(filter) {
-    this.filter = filter;
-  }
-}
-
-/* Injected with object hook! */
-
-function getRootElementsFromComponentInstance(instance) {
-  if (isFragment(instance))
-    return getFragmentRootElements(instance.subTree);
-  if (!instance.subTree)
-    return [];
-  return [instance.subTree.el];
-}
-function getFragmentRootElements(vnode) {
-  if (!vnode.children)
-    return [];
-  const list = [];
-  for (let i = 0, l = vnode.children.length; i < l; i++) {
-    const childVnode = vnode.children[i];
-    if (childVnode.component)
-      list.push(...getRootElementsFromComponentInstance(childVnode.component));
-    else if (childVnode.el)
-      list.push(childVnode.el);
-  }
-  return list;
-}
-function getInstanceOrVnodeRect(instance) {
-  const el = instance.subTree.el;
-  if (typeof window === "undefined") {
-    return;
-  }
-  if (isFragment(instance))
-    return addIframePosition(getFragmentRect(instance.subTree), getElWindow(el));
-  else if (el.nodeType === 1)
-    return addIframePosition(el.getBoundingClientRect(), getElWindow(el));
-  else if (instance.subTree.component)
-    return getInstanceOrVnodeRect(instance.subTree.component);
-}
-function createRect() {
-  const rect = {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    get width() {
-      return rect.right - rect.left;
-    },
-    get height() {
-      return rect.bottom - rect.top;
-    }
-  };
-  return rect;
-}
-function mergeRects(a, b) {
-  if (!a.top || b.top < a.top)
-    a.top = b.top;
-  if (!a.bottom || b.bottom > a.bottom)
-    a.bottom = b.bottom;
-  if (!a.left || b.left < a.left)
-    a.left = b.left;
-  if (!a.right || b.right > a.right)
-    a.right = b.right;
-  return a;
-}
-let range;
-function getTextRect(node) {
-  if (!range)
-    range = document.createRange();
-  range.selectNode(node);
-  return range.getBoundingClientRect();
-}
-function getFragmentRect(vnode) {
-  const rect = createRect();
-  if (!vnode.children)
-    return rect;
-  for (let i = 0, l = vnode.children.length; i < l; i++) {
-    const childVnode = vnode.children[i];
-    let childRect;
-    if (childVnode.component) {
-      childRect = getInstanceOrVnodeRect(childVnode.component);
-    } else if (childVnode.el) {
-      const el = childVnode.el;
-      if (el.nodeType === 1 || el.getBoundingClientRect)
-        childRect = el.getBoundingClientRect();
-      else if (el.nodeType === 3 && el.data.trim())
-        childRect = getTextRect(el);
-    }
-    if (childRect)
-      mergeRects(rect, childRect);
-  }
-  return rect;
-}
-function getElWindow(el) {
-  return el.ownerDocument.defaultView;
-}
-function addIframePosition(bounds, win) {
-  if (win.__VUE_DEVTOOLS_IFRAME__) {
-    const rect = mergeRects(createRect(), bounds);
-    const iframeBounds = win.__VUE_DEVTOOLS_IFRAME__.getBoundingClientRect();
-    rect.top += iframeBounds.top;
-    rect.bottom += iframeBounds.top;
-    rect.left += iframeBounds.left;
-    rect.right += iframeBounds.left;
-    if (win.parent)
-      return addIframePosition(rect, win.parent);
-    return rect;
-  }
-  return bounds;
-}
-
-/* Injected with object hook! */
-
-const InstanceMap = /* @__PURE__ */ new Map();
-const UidToTreeNodeMap = /* @__PURE__ */ new Map();
-class ComponentWalker {
-  maxDepth;
-  recursively;
-  componentFilter;
-  // Dedupe instances
-  // Some instances may be both on a component and on a child abstract/functional component
-  captureIds;
-  constructor(maxDepth, filter, recursively) {
-    this.maxDepth = maxDepth;
-    this.recursively = recursively;
-    this.componentFilter = new ComponentFilter(filter);
-    this.captureIds = /* @__PURE__ */ new Map();
-  }
-  getComponentTree(instance) {
-    this.captureIds = /* @__PURE__ */ new Map();
-    return this.findQualifiedChildren(instance, 0);
-  }
-  getComponentParents(instance) {
-    this.captureIds = /* @__PURE__ */ new Map();
-    const parents = [];
-    this.captureId(instance);
-    let parent = instance;
-    while (parent = parent.parent) {
-      this.captureId(parent);
-      parents.push(parent);
-    }
-    return parents;
-  }
-  /**
-   * Find qualified children from a single instance.
-   * If the instance itself is qualified, just return itself.
-   * This is ok because [].concat works in both cases.
-   *
-   * @param {Vue|Vnode} instance
-   * @return {Vue|Array}
-   */
-  async findQualifiedChildren(instance, depth) {
-    if (this.componentFilter.isQualified(instance) && !instance.type.devtools?.hide) {
-      return [await this.capture(instance, [], depth)];
-    } else if (instance.subTree) {
-      const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
-      return this.findQualifiedChildrenFromList(list, depth);
-    } else {
-      return [];
-    }
-  }
-  /**
-   * Iterate through an array of instances and flatten it into
-   * an array of qualified instances. This is a depth-first
-   * traversal - e.g. if an instance is not matched, we will
-   * recursively go deeper until a qualified child is found.
-   *
-   * @param {Array} instances
-   * @return {Array}
-   */
-  async findQualifiedChildrenFromList(instances, depth) {
-    instances = instances.filter((child) => !isBeingDestroyed(child));
-    if (!this.componentFilter.filter)
-      return Promise.all(instances.map((child, index, list) => this.capture(child, list, depth)));
-    else
-      return Array.prototype.concat.apply([], await Promise.all(instances.map((i) => this.findQualifiedChildren(i, depth))));
-  }
-  /**
-   * Get children from a component instance.
-   */
-  getInternalInstanceChildren(subTree, suspense = null) {
-    const list = [];
-    if (subTree) {
-      if (subTree.component) {
-        !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense });
-      } else if (subTree.suspense) {
-        const suspenseKey = !subTree.suspense.isInFallback ? "suspense default" : "suspense fallback";
-        list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }));
-      } else if (Array.isArray(subTree.children)) {
-        subTree.children.forEach((childSubTree) => {
-          if (childSubTree?.component)
-            !suspense ? list.push(childSubTree.component) : list.push({ ...childSubTree.component, suspense });
-          else
-            list.push(...this.getInternalInstanceChildren(childSubTree, suspense));
-        });
-      }
-    }
-    return list.filter((child) => !isBeingDestroyed(child));
-  }
-  captureId(instance) {
-    if (!instance)
-      return null;
-    const id = getUniqueComponentId(instance);
-    if (this.captureIds.has(id))
-      return null;
-    else
-      this.captureIds.set(id, void 0);
-    return id;
-  }
-  /**
-   * Capture the meta information of an instance. (recursive)
-   *
-   * @param {Vue} instance
-   * @return {object}
-   */
-  async capture(instance, list, depth) {
-    if (!instance)
-      return null;
-    const id = this.captureId(instance);
-    const name = getInstanceName(instance);
-    const children = this.getInternalInstanceChildren(instance.subTree).filter((child) => !isBeingDestroyed(child));
-    const parents = this.getComponentParents(instance) || [];
-    const inactive = !!instance.isDeactivated || parents.some((parent) => parent.isDeactivated);
-    const treeNode = {
-      uid: instance.uid,
-      id,
-      name,
-      renderKey: getRenderKey(instance.vnode ? instance.vnode.key : null),
-      inactive,
-      hasChildren: !!children.length,
-      children: [],
-      isFragment: isFragment(instance),
-      // TODO: functional components, suspense
-      tags: [],
-      autoOpen: this.recursively,
-      instance: null
-    };
-    const uids = [];
-    if (depth < this.maxDepth || instance.type.__isKeepAlive || parents.some((parent) => parent.type.__isKeepAlive)) {
-      treeNode.children = await Promise.all(children.map((child, index, list2) => this.capture(child, list2, depth + 1)).filter(Boolean));
-      uids.push(...treeNode.children.map((child) => child.uid));
-    }
-    if (this.isKeepAlive(instance)) {
-      const cachedComponents = this.getKeepAliveCachedInstances(instance);
-      for (const cachedChild of cachedComponents) {
-        const node = await this.capture({ ...cachedChild, isDeactivated: true }, [], depth + 1);
-        const uid = node.uid;
-        if (node && !uids.includes(uid))
-          treeNode.children.push(node);
-      }
-    }
-    const rootElements = getRootElementsFromComponentInstance(instance);
-    const firstElement = rootElements[0];
-    if (firstElement?.parentElement) {
-      const parentInstance = instance.parent;
-      const parentRootElements = parentInstance ? getRootElementsFromComponentInstance(parentInstance) : [];
-      let el = firstElement;
-      const indexList = [];
-      do {
-        indexList.push(Array.from(el.parentElement.childNodes).indexOf(el));
-        el = el.parentElement;
-      } while (el.parentElement && parentRootElements.length && !parentRootElements.includes(el));
-      treeNode.domOrder = indexList.reverse();
-    } else {
-      treeNode.domOrder = [-1];
-    }
-    InstanceMap.set(treeNode.id, getInstanceState(instance));
-    UidToTreeNodeMap.set(treeNode.uid, treeNode);
-    treeNode.instance = instance;
-    return treeNode;
-  }
-  isKeepAlive(instance) {
-    return instance.type.__isKeepAlive && instance.__v_cache;
-  }
-  getKeepAliveCachedInstances(instance) {
-    return Array.from(instance.__v_cache.values()).map((vnode) => vnode.component).filter(Boolean);
-  }
-}
-
-/* Injected with object hook! */
-
-const selected = ref("vue-devtools:root");
-const selectedComponentName = ref("");
-const selectedComponentNode = ref();
-const selectedComponentNodeFilePath = computed(() => selectedComponentNode.value?.instance ? getInstanceDetails(selectedComponentNode.value.instance)?.file : null);
-const expandedMap = ref({
-  "vue-devtools:root": true
-});
-ref();
-const selectedComponentState = shallowRef([]);
-function selectComponentTreeNode(data) {
-  selected.value = data.id;
-  selectedComponentName.value = data.name;
-  selectedComponentState.value = InstanceMap.get(data.id);
-  selectedComponentNode.value = data;
-}
-function setExpanded(id, expanded) {
-  expandedMap.value[id] = expanded;
-}
-function useComponent(instance) {
-  function toggleExpand(id) {
-    expandedMap.value[id] = !expandedMap.value[id];
-  }
-  const isSelected = computed(() => selected.value === instance.id);
-  const isExpanded = computed(() => expandedMap.value[instance.id]);
-  return { isSelected, select: selectComponentTreeNode, isExpanded, toggleExpand };
-}
-function useHighlightComponent(node) {
-  const client = useDevToolsClient();
-  const highlight = useThrottleFn(() => {
-    const instance = node.instance;
-    const bounds = getInstanceOrVnodeRect(instance);
-    const name = getInstanceName(instance);
-    client.value?.componentInspector.highlight(name, bounds);
-  }, 300);
-  const unhighlight = () => {
-    client.value?.componentInspector.unHighlight();
-  };
-  return {
-    highlight,
-    unhighlight
-  };
-}
-scrollToComponent.timer = null;
-function scrollToComponent() {
-  if (scrollToComponent.timer)
-    clearTimeout(scrollToComponent.timer);
-  const client = useDevToolsClient();
-  const { highlight, unhighlight } = useHighlightComponent(selectedComponentNode.value);
-  const instance = selectedComponentNode.value.instance;
-  const [el] = getRootElementsFromComponentInstance(instance);
-  if (typeof el.scrollIntoView === "function") {
-    el.scrollIntoView({
-      behavior: "smooth"
-    });
-  } else {
-    const _bounds = getInstanceOrVnodeRect(instance);
-    client.value.componentInspector.scrollToComponent(_bounds);
-  }
-  scrollToComponent.timer = setTimeout(() => {
-    highlight();
-    scrollToComponent.timer = setTimeout(() => {
-      unhighlight();
-      scrollToComponent.timer = null;
-    }, 1500);
-  }, 1200);
-}
-
-/* Injected with object hook! */
-
-const _hoisted_1$1 = {
-  key: 1,
-  "inline-block": "",
-  "h-6": "",
-  "w-6": ""
-};
-const _hoisted_2$1 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "ComponentTreeNode",
-  props: {
-    data: {},
-    depth: { default: 0 }
-  },
-  setup(__props) {
-    const props = __props;
-    const { isSelected, select, isExpanded, toggleExpand } = useComponent(props.data);
-    const { highlight, unhighlight } = useHighlightComponent(props.data);
-    const toggleEl = ref();
-    function autoScroll() {
-      if (isSelected.value && toggleEl.value) {
-        const el = toggleEl.value;
-        e(el, {
-          scrollMode: "if-needed",
-          block: "center",
-          behavior: "smooth",
-          inline: "nearest"
-        });
-      }
-    }
-    watch(isSelected, () => autoScroll());
-    watch(toggleEl, () => autoScroll());
-    return (_ctx, _cache) => {
-      const _component_VDExpandIcon = _sfc_main$2;
-      const _component_ComponentTreeNode = resolveComponent("ComponentTreeNode", true);
-      return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            paddingLeft: `${_ctx.depth * 15 + 4}px`
-          }),
-          "vue-block": "",
-          class: normalizeClass([unref(isSelected) ? "vue-block-active" : "vue-block-hover"]),
-          onClick: _cache[1] || (_cache[1] = ($event) => unref(select)(_ctx.data)),
-          onMouseover: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => unref(highlight) && unref(highlight)(...args)),
-          onMouseleave: _cache[3] || (_cache[3] = //@ts-ignore
-          (...args) => unref(unhighlight) && unref(unhighlight)(...args))
-        }, [
-          createBaseVNode("h3", {
-            ref_key: "toggleEl",
-            ref: toggleEl,
-            "vue-block-title": "",
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.data.hasChildren ? unref(toggleExpand)(_ctx.data.id) : () => {
-            })
-          }, [
-            _ctx.data.hasChildren ? (openBlock(), createBlock(_component_VDExpandIcon, {
-              key: 0,
-              value: unref(isExpanded)
-            }, null, 8, ["value"])) : (openBlock(), createElementBlock("i", _hoisted_1$1)),
-            createBaseVNode("span", {
-              class: normalizeClass([
-                unref(isSelected) ? "vue-tag-symbol-active" : "vue-tag-symbol"
-              ])
-            }, "<", 2),
-            createBaseVNode("span", {
-              class: normalizeClass([unref(isSelected) && "text-white"])
-            }, toDisplayString(_ctx.data.name), 3),
-            createBaseVNode("span", {
-              class: normalizeClass([
-                unref(isSelected) ? "vue-tag-symbol-active" : "vue-tag-symbol"
-              ])
-            }, ">", 2)
-          ], 512)
-        ], 38),
-        unref(isExpanded) && _ctx.data.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.children, (item) => {
-            return openBlock(), createBlock(_component_ComponentTreeNode, {
-              key: item.id,
-              data: item,
-              depth: _ctx.depth + 1
-            }, null, 8, ["data", "depth"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-
-/* Injected with object hook! */
-
-const _hoisted_1 = {
-  "h-screen": "",
-  "n-panel-grids": ""
-};
-const _hoisted_2 = {
-  key: 0,
-  sticky: "",
-  "left-0": "",
-  "top-0": "",
-  "z-300": "",
-  "w-full": "",
-  flex: "",
-  gap2: "",
-  px10px: "",
-  py12px: "",
-  "bg-base": ""
-};
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("g", {
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round",
-  "stroke-width": "2"
-}, [
-  /* @__PURE__ */ createBaseVNode("circle", {
-    cx: "12",
-    cy: "12",
-    r: ".5",
-    fill: "currentColor"
-  }),
-  /* @__PURE__ */ createBaseVNode("path", { d: "M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" })
-], -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
-const _hoisted_5 = {
-  "h-screen": "",
-  "select-none": "",
-  "overflow-scroll": "",
-  "p-2": "",
-  class: "no-scrollbar"
-};
-const _hoisted_6 = {
-  key: 0,
-  border: "b base",
-  flex: "",
-  "justify-between": "",
-  "px-4": "",
-  "py-2": ""
-};
-const _hoisted_7 = {
-  key: 0,
-  "text-sm": "",
-  "text-primary": "",
-  op90: ""
-};
-const _hoisted_8 = { flex: "" };
-const _hoisted_9 = /* @__PURE__ */ createBaseVNode("p", {
-  "text-xs": "",
-  "op-50": ""
-}, " Scroll to component ", -1);
-const _hoisted_10 = {
-  key: 0,
-  "pl-2": ""
-};
-const _hoisted_11 = {
-  "text-xs": "",
-  "op-50": ""
-};
-const _hoisted_12 = {
-  key: 1,
-  "h-screen": "",
-  "select-none": "",
-  "overflow-scroll": "",
-  "p-2": "",
-  class: "no-scrollbar"
-};
-const _hoisted_13 = /* @__PURE__ */ createBaseVNode("h1", {
-  "text-sm": "",
-  italic: "",
-  op50: ""
-}, " No Data ", -1);
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "components",
-  setup(__props) {
-    const componentTree = ref([]);
-    const filterName = ref("");
-    const componentWalker = shallowRef(null);
-    watchDebounced(filterName, (value) => {
-      value = value.trim().toLowerCase();
-      componentWalker.value.componentFilter.setFilter(value);
-      componentWalker.value.getComponentTree(instance.value).then((res) => {
-        componentTree.value = res;
-      });
-    }, { debounce: 200 });
-    function normalizeComponentState(value, type) {
-      if (type === "Reactive")
-        return reactive(value);
-      else if (type === "Computed")
-        return computed(() => value);
-      else if (type === "Ref")
-        return ref(value);
-      else
-        return value;
-    }
-    const normalizedComponentState = computed(() => {
-      const list = [];
-      selectedComponentState.value.forEach((item) => {
-        if (list.some((i) => i.key === item.type)) {
-          const index = list.findIndex((i) => i.key === item.type);
-          list[index].value = {
-            ...list[index].value,
-            [item.key]: normalizeComponentState(item.value, item.objectType)
-          };
-        } else {
-          list.push({
-            key: item.type,
-            value: {
-              [item.key]: normalizeComponentState(item.value, item.objectType)
-            }
-          });
-        }
-      });
-      return list;
-    });
-    function findComponentNode(treeNode, uid) {
-      for (const node of treeNode) {
-        if (node.uid === uid) {
-          return node;
-        } else if (node.children) {
-          const findNode = findComponentNode(node.children, uid);
-          if (findNode)
-            return findNode;
-        }
-      }
-      return void 0;
-    }
-    function init() {
-      componentWalker.value = new ComponentWalker(500, null, true);
-      componentWalker.value.getComponentTree(instance.value).then((res) => {
-        const currentNode = findComponentNode(res, selectedComponentNode.value?.uid || 0) || res[0];
-        componentTree.value = res;
-        selected.value = currentNode.id;
-        selectedComponentName.value = currentNode.name;
-        selectedComponentNode.value = currentNode;
-        selectedComponentState.value = getInstanceState(currentNode.instance);
-      });
-    }
-    onMounted(() => {
-      onVueInstanceUpdate((v) => {
-        if (v)
-          init();
-      });
-    });
-    function openInEditor() {
-      const client2 = useDevToolsClient();
-      client2.value.openInEditor(selectedComponentNodeFilePath.value);
-    }
-    const client = useDevToolsClient();
-    const inspectorEnabled = ref(false);
-    function inspectComponentClick(instance2) {
-      inspectorEnabled.value = false;
-      const treeNode = UidToTreeNodeMap.get(instance2.uid);
-      if (treeNode) {
-        selectComponentTreeNode(treeNode);
-        const walker = new ComponentWalker(0, null, false);
-        const parents = walker.getComponentParents(instance2);
-        parents.reverse().forEach((instance3) => {
-          const id = getUniqueComponentId(instance3);
-          if (id.endsWith("root"))
-            return;
-          setExpanded(id, true);
-        });
-      }
-    }
-    function toggleInspector(target) {
-      inspectorEnabled.value = target ?? !inspectorEnabled.value;
-      if (inspectorEnabled.value)
-        client.value.componentInspector.startInspect(inspectComponentClick);
-      else
-        client.value.componentInspector.stopInspect();
-    }
-    const { control, c, escape } = useMagicKeys();
-    watchEffect(() => {
-      if (control.value && c.value || escape.value)
-        toggleInspector(false);
-    });
-    return (_ctx, _cache) => {
-      const _component_VDTextInput = _sfc_main$3;
-      const _component_ComponentTreeNode = _sfc_main$1;
-      const _component_VTooltip = resolveComponent("VTooltip");
-      const _component_StateFields = _sfc_main$4;
-      const _component_VDCard = __unplugin_components_7;
-      const _component_VDPanelGrids = __unplugin_components_0;
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(M), null, {
-          default: withCtx(() => [
-            createVNode(unref(g), {
-              flex: "",
-              "flex-col": "",
-              border: "r base"
-            }, {
-              default: withCtx(() => [
-                unref(componentWalker) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                  createVNode(_component_VDTextInput, {
-                    modelValue: unref(filterName),
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(filterName) ? filterName.value = $event : null),
-                    placeholder: "Find components...",
-                    "flex-1": ""
-                  }, null, 8, ["modelValue"]),
-                  createBaseVNode("button", {
-                    p2: "",
-                    onClick: _cache[1] || (_cache[1] = () => toggleInspector())
-                  }, [
-                    (openBlock(), createElementBlock("svg", {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      style: normalizeStyle([{ "height": "1.1em", "width": "1.1em", "opacity": "0.5" }, unref(inspectorEnabled) ? "opacity:1;color:#00dc82" : ""]),
-                      viewBox: "0 0 24 24"
-                    }, _hoisted_4, 4))
-                  ])
-                ])) : createCommentVNode("", true),
-                createBaseVNode("div", _hoisted_5, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(componentTree), (item) => {
-                    return openBlock(), createBlock(_component_ComponentTreeNode, {
-                      key: item.id,
-                      data: item
-                    }, null, 8, ["data"]);
-                  }), 128))
-                ])
-              ]),
-              _: 1
-            }),
-            createVNode(unref(g), {
-              flex: "",
-              "flex-col": ""
-            }, {
-              default: withCtx(() => [
-                unref(normalizedComponentState).length ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                  unref(selectedComponentName) ? (openBlock(), createElementBlock("span", _hoisted_7, "<" + toDisplayString(unref(selectedComponentName)) + ">", 1)) : createCommentVNode("", true),
-                  createBaseVNode("p", _hoisted_8, [
-                    createBaseVNode("span", null, [
-                      createVNode(_component_VTooltip, { placement: "bottom" }, {
-                        popper: withCtx(() => [
-                          _hoisted_9
-                        ]),
-                        default: withCtx(() => [
-                          createBaseVNode("i", {
-                            "gg:scroll-h": "",
-                            "cursor-pointer": "",
-                            "text-xl": "",
-                            op70: "",
-                            hover: "op100",
-                            onClick: _cache[2] || (_cache[2] = //@ts-ignore
-                            (...args) => unref(scrollToComponent) && unref(scrollToComponent)(...args))
-                          })
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    unref(selectedComponentNodeFilePath) ? (openBlock(), createElementBlock("span", _hoisted_10, [
-                      createVNode(_component_VTooltip, { placement: "bottom" }, {
-                        popper: withCtx(() => [
-                          createBaseVNode("p", _hoisted_11, " Open " + toDisplayString(unref(selectedComponentNodeFilePath).replace(unref(rootPath), "")) + " in editor ", 1)
-                        ]),
-                        default: withCtx(() => [
-                          createBaseVNode("i", {
-                            "carbon-launch": "",
-                            "cursor-pointer": "",
-                            "text-sm": "",
-                            op70: "",
-                            hover: "op100",
-                            onClick: openInEditor
-                          })
-                        ]),
-                        _: 1
-                      })
-                    ])) : createCommentVNode("", true)
-                  ])
-                ])) : createCommentVNode("", true),
-                unref(normalizedComponentState).length ? (openBlock(), createElementBlock("div", _hoisted_12, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedComponentState), (item, index) => {
-                    return openBlock(), createBlock(_component_StateFields, {
-                      id: index,
-                      key: item.key,
-                      data: item
-                    }, null, 8, ["id", "data"]);
-                  }), 128))
-                ])) : (openBlock(), createBlock(_component_VDPanelGrids, {
-                  key: 2,
-                  px5: ""
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_VDCard, {
-                      flex: "~ col gap2",
-                      "min-w-30": "",
-                      "items-center": "",
-                      p3: ""
-                    }, {
-                      default: withCtx(() => [
-                        _hoisted_13
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }))
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ]);
-    };
-  }
-});
-
-/* Injected with object hook! */
-
-/* Injected with object hook! */
-
-export { _sfc_main as default };