vite-plugin-vue-devtools 7.2.0 → 7.3.0-beta.1

package/dist/vite.mjs

@@ -3,8 +3,9 @@ import path$a, { dirname, resolve as resolve$1 } from 'node:path';
 import { normalizePath } from 'vite';
 import sirv from 'sirv';
 import Inspect from 'vite-plugin-inspect';
+import { getViteRpcServer, setViteServerContext } from '@vue/devtools-kit';
 import VueInspector from 'vite-plugin-vue-inspector';
-import { defineViteServerAction, callViteClientListener, initViteServerContext } from '@vue/devtools-core';
+import { createViteServerRpc } from '@vue/devtools-core';
 import fsp from 'node:fs/promises';
 import require$$0 from 'os';
 import require$$0$1 from 'path';
@@ -96,12 +97,6 @@ const cyan = kolorist(36, 39);
 const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
 const DIR_CLIENT = resolve$1(DIR_DIST, "../client");
 
-function getViteConfig(config, pluginOptions) {
-  defineViteServerAction("get-vite-root", () => {
-    return config.root;
-  });
-}
-
 const DEBOUNCE_DEFAULTS = {
   trailing: true
 };
@@ -158,23 +153,6 @@ async function _applyPromised(fn, _this, args) {
   return await fn.apply(_this, args);
 }
 
-function setupGraphModule(options) {
-  const { rpc, server } = options;
-  defineViteServerAction("graph:get-modules", async () => {
-    const list = await rpc.list();
-    const modules = list?.modules || [];
-    return modules;
-  });
-  const triggerModuleUpdated = callViteClientListener("graph:module-updated");
-  const debouncedModuleUpdated = debounce(() => {
-    triggerModuleUpdated();
-  }, 100);
-  server.middlewares.use((_, __, next) => {
-    debouncedModuleUpdated();
-    next();
-  });
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -559,7 +537,7 @@ var utils$j = {};
 	 */
 
 	exports.escapeNode = (block, n = 0, type) => {
-	  let node = block.nodes[n];
+	  const node = block.nodes[n];
 	  if (!node) return;
 
 	  if ((type && node.type === type) || node.type === 'open' || node.type === 'close') {
@@ -628,13 +606,23 @@ var utils$j = {};
 
 	exports.flatten = (...args) => {
 	  const result = [];
+
 	  const flat = arr => {
 	    for (let i = 0; i < arr.length; i++) {
-	      let ele = arr[i];
-	      Array.isArray(ele) ? flat(ele) : ele !== void 0 && result.push(ele);
+	      const ele = arr[i];
+
+	      if (Array.isArray(ele)) {
+	        flat(ele);
+	        continue;
+	      }
+
+	      if (ele !== undefined) {
+	        result.push(ele);
+	      }
 	    }
 	    return result;
 	  };
+
 	  flat(args);
 	  return result;
 	}; 
@@ -643,9 +631,9 @@ var utils$j = {};
 const utils$i = utils$j;
 
 var stringify$4 = (ast, options = {}) => {
-  let stringify = (node, parent = {}) => {
-    let invalidBlock = options.escapeInvalid && utils$i.isInvalidBrace(parent);
-    let invalidNode = node.invalid === true && options.escapeInvalid === true;
+  const stringify = (node, parent = {}) => {
+    const invalidBlock = options.escapeInvalid && utils$i.isInvalidBrace(parent);
+    const invalidNode = node.invalid === true && options.escapeInvalid === true;
     let output = '';
 
     if (node.value) {
@@ -660,7 +648,7 @@ var stringify$4 = (ast, options = {}) => {
     }
 
     if (node.nodes) {
-      for (let child of node.nodes) {
+      for (const child of node.nodes) {
         output += stringify(child);
       }
     }
@@ -1034,7 +1022,7 @@ const toMaxLen = (input, maxLength) => {
   return negative ? ('-' + input) : input;
 };
 
-const toSequence = (parts, options) => {
+const toSequence = (parts, options, maxLen) => {
   parts.negatives.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
   parts.positives.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
 
@@ -1044,11 +1032,11 @@ const toSequence = (parts, options) => {
   let result;
 
   if (parts.positives.length) {
-    positives = parts.positives.join('|');
+    positives = parts.positives.map(v => toMaxLen(String(v), maxLen)).join('|');
   }
 
   if (parts.negatives.length) {
-    negatives = `-(${prefix}${parts.negatives.join('|')})`;
+    negatives = `-(${prefix}${parts.negatives.map(v => toMaxLen(String(v), maxLen)).join('|')})`;
   }
 
   if (positives && negatives) {
@@ -1146,7 +1134,7 @@ const fillNumbers = (start, end, step = 1, options = {}) => {
 
   if (options.toRegex === true) {
     return step > 1
-      ? toSequence(parts, options)
+      ? toSequence(parts, options, maxLen)
       : toRegex(range, null, { wrap: false, ...options });
   }
 
@@ -1158,7 +1146,6 @@ const fillLetters = (start, end, step = 1, options = {}) => {
     return invalidRange(start, end, options);
   }
 
-
   let format = options.transform || (val => String.fromCharCode(val));
   let a = `${start}`.charCodeAt(0);
   let b = `${end}`.charCodeAt(0);
@@ -1226,30 +1213,32 @@ const fill$1 = fillRange;
 const utils$h = utils$j;
 
 const compile$1 = (ast, options = {}) => {
-  let walk = (node, parent = {}) => {
-    let invalidBlock = utils$h.isInvalidBrace(parent);
-    let invalidNode = node.invalid === true && options.escapeInvalid === true;
-    let invalid = invalidBlock === true || invalidNode === true;
-    let prefix = options.escapeInvalid === true ? '\\' : '';
+  const walk = (node, parent = {}) => {
+    const invalidBlock = utils$h.isInvalidBrace(parent);
+    const invalidNode = node.invalid === true && options.escapeInvalid === true;
+    const invalid = invalidBlock === true || invalidNode === true;
+    const prefix = options.escapeInvalid === true ? '\\' : '';
     let output = '';
 
     if (node.isOpen === true) {
       return prefix + node.value;
     }
+
     if (node.isClose === true) {
+      console.log('node.isClose', prefix, node.value);
       return prefix + node.value;
     }
 
     if (node.type === 'open') {
-      return invalid ? (prefix + node.value) : '(';
+      return invalid ? prefix + node.value : '(';
     }
 
     if (node.type === 'close') {
-      return invalid ? (prefix + node.value) : ')';
+      return invalid ? prefix + node.value : ')';
     }
 
     if (node.type === 'comma') {
-      return node.prev.type === 'comma' ? '' : (invalid ? node.value : '|');
+      return node.prev.type === 'comma' ? '' : invalid ? node.value : '|';
     }
 
     if (node.value) {
@@ -1257,8 +1246,8 @@ const compile$1 = (ast, options = {}) => {
     }
 
     if (node.nodes && node.ranges > 0) {
-      let args = utils$h.reduce(node.nodes);
-      let range = fill$1(...args, { ...options, wrap: false, toRegex: true });
+      const args = utils$h.reduce(node.nodes);
+      const range = fill$1(...args, { ...options, wrap: false, toRegex: true, strictZeros: true });
 
       if (range.length !== 0) {
         return args.length > 1 && range.length > 1 ? `(${range})` : range;
@@ -1266,10 +1255,11 @@ const compile$1 = (ast, options = {}) => {
     }
 
     if (node.nodes) {
-      for (let child of node.nodes) {
+      for (const child of node.nodes) {
         output += walk(child, node);
       }
     }
+
     return output;
   };
 
@@ -1283,7 +1273,7 @@ const stringify$2 = stringify$4;
 const utils$g = utils$j;
 
 const append = (queue = '', stash = '', enclose = false) => {
-  let result = [];
+  const result = [];
 
   queue = [].concat(queue);
   stash = [].concat(stash);
@@ -1293,15 +1283,15 @@ const append = (queue = '', stash = '', enclose = false) => {
     return enclose ? utils$g.flatten(stash).map(ele => `{${ele}}`) : stash;
   }
 
-  for (let item of queue) {
+  for (const item of queue) {
     if (Array.isArray(item)) {
-      for (let value of item) {
+      for (const value of item) {
         result.push(append(value, stash, enclose));
       }
     } else {
       for (let ele of stash) {
         if (enclose === true && typeof ele === 'string') ele = `{${ele}}`;
-        result.push(Array.isArray(ele) ? append(item, ele, enclose) : (item + ele));
+        result.push(Array.isArray(ele) ? append(item, ele, enclose) : item + ele);
       }
     }
   }
@@ -1309,9 +1299,9 @@ const append = (queue = '', stash = '', enclose = false) => {
 };
 
 const expand$1 = (ast, options = {}) => {
-  let rangeLimit = options.rangeLimit === void 0 ? 1000 : options.rangeLimit;
+  const rangeLimit = options.rangeLimit === undefined ? 1000 : options.rangeLimit;
 
-  let walk = (node, parent = {}) => {
+  const walk = (node, parent = {}) => {
     node.queue = [];
 
     let p = parent;
@@ -1333,7 +1323,7 @@ const expand$1 = (ast, options = {}) => {
     }
 
     if (node.nodes && node.ranges > 0) {
-      let args = utils$g.reduce(node.nodes);
+      const args = utils$g.reduce(node.nodes);
 
       if (utils$g.exceedsLimit(...args, options.step, rangeLimit)) {
         throw new RangeError('expanded array length exceeds range limit. Use options.rangeLimit to increase or disable the limit.');
@@ -1349,7 +1339,7 @@ const expand$1 = (ast, options = {}) => {
       return;
     }
 
-    let enclose = utils$g.encloseBrace(node);
+    const enclose = utils$g.encloseBrace(node);
     let queue = node.queue;
     let block = node;
 
@@ -1359,7 +1349,7 @@ const expand$1 = (ast, options = {}) => {
     }
 
     for (let i = 0; i < node.nodes.length; i++) {
-      let child = node.nodes[i];
+      const child = node.nodes[i];
 
       if (child.type === 'comma' && node.type === 'brace') {
         if (i === 1) queue.push('');
@@ -1391,7 +1381,7 @@ const expand$1 = (ast, options = {}) => {
 var expand_1 = expand$1;
 
 var constants$4 = {
-  MAX_LENGTH: 1024 * 64,
+  MAX_LENGTH: 10000,
 
   // Digits
   CHAR_0: '0', /* 0 */
@@ -1479,18 +1469,18 @@ const parse$3 = (input, options = {}) => {
     throw new TypeError('Expected a string');
   }
 
-  let opts = options || {};
-  let max = typeof opts.maxLength === 'number' ? Math.min(MAX_LENGTH$1, opts.maxLength) : MAX_LENGTH$1;
+  const opts = options || {};
+  const max = typeof opts.maxLength === 'number' ? Math.min(MAX_LENGTH$1, opts.maxLength) : MAX_LENGTH$1;
   if (input.length > max) {
     throw new SyntaxError(`Input length (${input.length}), exceeds max characters (${max})`);
   }
 
-  let ast = { type: 'root', input, nodes: [] };
-  let stack = [ast];
+  const ast = { type: 'root', input, nodes: [] };
+  const stack = [ast];
   let block = ast;
   let prev = ast;
   let brackets = 0;
-  let length = input.length;
+  const length = input.length;
   let index = 0;
   let depth = 0;
   let value;
@@ -1555,6 +1545,7 @@ const parse$3 = (input, options = {}) => {
 
     if (value === CHAR_LEFT_SQUARE_BRACKET$1) {
       brackets++;
+
       let next;
 
       while (index < length && (next = advance())) {
@@ -1610,7 +1601,7 @@ const parse$3 = (input, options = {}) => {
      */
 
     if (value === CHAR_DOUBLE_QUOTE || value === CHAR_SINGLE_QUOTE || value === CHAR_BACKTICK) {
-      let open = value;
+      const open = value;
       let next;
 
       if (options.keepQuotes !== true) {
@@ -1642,8 +1633,8 @@ const parse$3 = (input, options = {}) => {
     if (value === CHAR_LEFT_CURLY_BRACE$1) {
       depth++;
 
-      let dollar = prev.value && prev.value.slice(-1) === '$' || block.dollar === true;
-      let brace = {
+      const dollar = prev.value && prev.value.slice(-1) === '$' || block.dollar === true;
+      const brace = {
         type: 'brace',
         open: true,
         close: false,
@@ -1670,7 +1661,7 @@ const parse$3 = (input, options = {}) => {
         continue;
       }
 
-      let type = 'close';
+      const type = 'close';
       block = stack.pop();
       block.close = true;
 
@@ -1688,7 +1679,7 @@ const parse$3 = (input, options = {}) => {
     if (value === CHAR_COMMA$1 && depth > 0) {
       if (block.ranges > 0) {
         block.ranges = 0;
-        let open = block.nodes.shift();
+        const open = block.nodes.shift();
         block.nodes = [open, { type: 'text', value: stringify$1(block) }];
       }
 
@@ -1702,7 +1693,7 @@ const parse$3 = (input, options = {}) => {
      */
 
     if (value === CHAR_DOT$1 && depth > 0 && block.commas === 0) {
-      let siblings = block.nodes;
+      const siblings = block.nodes;
 
       if (depth === 0 || siblings.length === 0) {
         push({ type: 'text', value });
@@ -1729,7 +1720,7 @@ const parse$3 = (input, options = {}) => {
       if (prev.type === 'range') {
         siblings.pop();
 
-        let before = siblings[siblings.length - 1];
+        const before = siblings[siblings.length - 1];
         before.value += prev.value + value;
         prev = before;
         block.ranges--;
@@ -1762,8 +1753,8 @@ const parse$3 = (input, options = {}) => {
       });
 
       // get the location of the block on parent.nodes (block's siblings)
-      let parent = stack[stack.length - 1];
-      let index = parent.nodes.indexOf(block);
+      const parent = stack[stack.length - 1];
+      const index = parent.nodes.indexOf(block);
       // replace the (invalid) block with it's nodes
       parent.nodes.splice(index, 1, ...block.nodes);
     }
@@ -1798,8 +1789,8 @@ const braces$1 = (input, options = {}) => {
   let output = [];
 
   if (Array.isArray(input)) {
-    for (let pattern of input) {
-      let result = braces$1.create(pattern, options);
+    for (const pattern of input) {
+      const result = braces$1.create(pattern, options);
       if (Array.isArray(result)) {
         output.push(...result);
       } else {
@@ -1933,7 +1924,7 @@ braces$1.create = (input, options = {}) => {
     return [input];
   }
 
- return options.expand !== true
+  return options.expand !== true
     ? braces$1.compile(input, options)
     : braces$1.expand(input, options);
 };
@@ -7726,8 +7717,8 @@ function guessType(path) {
     return "wasm";
   return "other";
 }
-function setupAssetsModule(options) {
-  const { rpc, server, config } = options;
+function getAssetsFunctions(ctx) {
+  const { server, config } = ctx;
   const _imageMetaCache = /* @__PURE__ */ new Map();
   let cache = null;
   async function scan() {
@@ -7787,42 +7778,80 @@ function setupAssetsModule(options) {
     }
     return importers;
   }
-  defineViteServerAction("assets:get-static-assets", async () => {
-    return await scan();
-  });
-  defineViteServerAction("assets:get-asset-importers", async (url) => {
-    return await getAssetImporters(url);
-  });
-  defineViteServerAction("assets:get-image-meta", async (filepath) => {
-    if (_imageMetaCache.has(filepath))
-      return _imageMetaCache.get(filepath);
-    try {
-      const meta = imageMeta(await fsp.readFile(filepath));
-      _imageMetaCache.set(filepath, meta);
-      return meta;
-    } catch (e) {
-      _imageMetaCache.set(filepath, void 0);
-      console.error(e);
-      return void 0;
-    }
-  });
-  defineViteServerAction("assets:get-text-asset-content", async (filepath, limit = 300) => {
-    try {
-      const content = await fsp.readFile(filepath, "utf-8");
-      return content.slice(0, limit);
-    } catch (e) {
-      console.error(e);
-      return void 0;
-    }
-  });
-  const triggerAssetsUpdated = callViteClientListener("assets:updated");
   const debouncedAssetsUpdated = debounce(() => {
-    triggerAssetsUpdated();
+    getViteRpcServer?.()?.broadcast?.emit("assetsUpdated");
   }, 100);
   server.watcher.on("all", (event) => {
     if (event !== "change")
       debouncedAssetsUpdated();
   });
+  return {
+    async getStaticAssets() {
+      return await scan();
+    },
+    async getAssetImporters(url) {
+      return await getAssetImporters(url);
+    },
+    async getImageMeta(filepath) {
+      if (_imageMetaCache.has(filepath))
+        return _imageMetaCache.get(filepath);
+      try {
+        const meta = imageMeta(await fsp.readFile(filepath));
+        _imageMetaCache.set(filepath, meta);
+        return meta;
+      } catch (e) {
+        _imageMetaCache.set(filepath, void 0);
+        console.error(e);
+        return void 0;
+      }
+    },
+    async getTextAssetContent(filepath, limit = 300) {
+      try {
+        const content = await fsp.readFile(filepath, "utf-8");
+        return content.slice(0, limit);
+      } catch (e) {
+        console.error(e);
+        return void 0;
+      }
+    }
+  };
+}
+
+function getConfigFunctions(ctx) {
+  return {
+    getRoot() {
+      return ctx.config.root;
+    }
+  };
+}
+
+function getGraphFunctions(ctx) {
+  const { rpc, server } = ctx;
+  const debouncedModuleUpdated = debounce(() => {
+    getViteRpcServer?.()?.broadcast?.emit("graphModuleUpdated");
+  }, 100);
+  server.middlewares.use((_, __, next) => {
+    debouncedModuleUpdated();
+    next();
+  });
+  return {
+    async getGraphModules() {
+      const list = await rpc.list();
+      const modules = list?.modules || [];
+      return modules;
+    }
+  };
+}
+
+function getRpcFunctions(ctx) {
+  return {
+    heartbeat() {
+      return true;
+    },
+    ...getAssetsFunctions(ctx),
+    ...getConfigFunctions(ctx),
+    ...getGraphFunctions(ctx)
+  };
 }
 
 function getVueDevtoolsPath() {
@@ -7840,7 +7869,7 @@ function normalizeComboKeyPrint(toggleComboKey) {
 const defaultOptions = {
   appendTo: "",
   componentInspector: true,
-  launchEditor: "code"
+  launchEditor: process.env.LAUNCH_EDITOR ?? "code"
 };
 function mergeOptions(options) {
   return Object.assign({}, defaultOptions, options);
@@ -7858,17 +7887,13 @@ function VitePluginVueDevTools(options) {
       single: true,
       dev: true
     }));
-    initViteServerContext(server);
-    getViteConfig(config);
-    setupGraphModule({
-      rpc: inspect.api.rpc,
-      server
-    });
-    setupAssetsModule({
+    setViteServerContext(server);
+    const rpcFunctions = getRpcFunctions({
       rpc: inspect.api.rpc,
       server,
       config
     });
+    createViteServerRpc(rpcFunctions);
     const _printUrls = server.printUrls;
     const colorUrl = (url) => cyan(url.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`));
     server.printUrls = () => {
@@ -7908,9 +7933,10 @@ function VitePluginVueDevTools(options) {
         return;
       const { appendTo } = pluginOptions;
       const [filename] = id.split("?", 2);
-      if (appendTo && (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename)))
+      if (appendTo && (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename))) {
         code = `import 'virtual:vue-devtools-path:overlay.js';
 ${code}`;
+      }
       return code;
     },
     transformIndexHtml(html) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
   "type": "module",
-  "version": "7.2.0",
+  "version": "7.3.0-beta.1",
   "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
@@ -49,13 +49,13 @@
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
     "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-vue-inspector": "^5.1.0",
-    "@vue/devtools-shared": "^7.2.0",
-    "@vue/devtools-core": "^7.2.0",
-    "@vue/devtools-kit": "^7.2.0"
+    "vite-plugin-vue-inspector": "^5.1.2",
+    "@vue/devtools-core": "^7.3.0-beta.1",
+    "@vue/devtools-shared": "^7.3.0-beta.1",
+    "@vue/devtools-kit": "^7.3.0-beta.1"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.2",
     "fast-glob": "^3.3.2",
     "image-meta": "^0.2.0",
     "pathe": "^1.1.2"

package/src/overlay/devtools-overlay.css

@@ -1 +1 @@
-.vue-devtools-frame[data-v-8b2fd87f]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-8b2fd87f] iframe{width:100%;height:100%;outline:none;background:var(--vue-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);border-radius:10px}.vue-devtools-frame.view-mode-xs[data-v-8b2fd87f]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-8b2fd87f] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-8b2fd87f]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-8b2fd87f]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-8b2fd87f]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-8b2fd87f]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-93de249b]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-93de249b]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-93de249b]{border-radius:100%;border-width:0;width:30px;height:30px;display:flex;justify-content:center;align-items:center;opacity:.8;transition:opacity .2s ease-in-out}.vue-devtools__anchor-btn[data-v-93de249b]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-93de249b]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-93de249b]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-93de249b]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-93de249b]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-93de249b]{transform:translate(-50%,-50%) rotate(90deg);box-shadow:2px -2px 8px var(--vue-devtools-widget-shadow)}.vue-devtools__anchor--hide .vue-devtools__panel[data-v-93de249b]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-93de249b]{opacity:0}.vue-devtools__anchor--glowing[data-v-93de249b]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:160px;height:160px;opacity:0;transition:all 1s ease;pointer-events:none;z-index:-1;border-radius:9999px;background-image:linear-gradient(45deg,#00dc82,#36e4da,#0047e1);filter:blur(60px)}.vue-devtools__anchor:hover .vue-devtools__anchor--glowing[data-v-93de249b]{opacity:.6}.vue-devtools__panel[data-v-93de249b]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;justify-content:flex-start;overflow:hidden;align-items:center;gap:2px;height:30px;padding:4px 4px 4px 5px;box-sizing:border-box;border:1px solid var(--vue-devtools-widget-border);border-radius:20px;background-color:var(--vue-devtools-widget-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--vue-devtools-widget-fg);box-shadow:2px 2px 8px var(--vue-devtools-widget-shadow);-webkit-user-select:none;user-select:none;max-width:150px;transition:max-width .4s ease,padding .5s ease,transform .3s ease,all .4s ease}.vue-devtools__panel-content[data-v-93de249b]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-93de249b]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-93de249b{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-93de249b]{display:none}}
+.vue-devtools-frame[data-v-df0df9e8]{position:fixed;z-index:2147483645}.vue-devtools-frame[data-v-df0df9e8] iframe{width:100%;height:100%;outline:none;background:var(--vue-devtools-widget-bg);border:1px solid rgba(125,125,125,.2);border-radius:10px}.vue-devtools-frame.view-mode-xs[data-v-df0df9e8]{width:400px!important;height:80px!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8]{width:100vw!important;height:100vh!important;z-index:1!important;bottom:0!important;transform:none!important}.vue-devtools-frame.view-mode-fullscreen[data-v-df0df9e8] iframe{border-radius:0!important}.vue-devtools-resize--horizontal[data-v-df0df9e8]{position:absolute;left:6px;right:6px;height:10px;margin:-5px 0;cursor:ns-resize;border-radius:5px}.vue-devtools-resize--vertical[data-v-df0df9e8]{position:absolute;top:6px;bottom:0;width:10px;margin:0 -5px;cursor:ew-resize;border-radius:5px}.vue-devtools-resize-corner[data-v-df0df9e8]{position:absolute;width:14px;height:14px;margin:-6px;border-radius:6px}.vue-devtools-resize[data-v-df0df9e8]:hover{background:#7d7d7d1a}.vue-devtools__anchor[data-v-98d04846]{position:fixed;z-index:2147483645;transform-origin:center center;transform:translate(-50%,-50%) rotate(0)}.vue-devtools__anchor.fullscreen[data-v-98d04846]{transform:none!important;left:0!important}.vue-devtools__anchor-btn[data-v-98d04846]{border-radius:100%;border-width:0;width:30px;height:30px;display:flex;justify-content:center;align-items:center;opacity:.8;transition:opacity .2s ease-in-out}.vue-devtools__anchor-btn[data-v-98d04846]:hover{opacity:1}.vue-devtools__anchor-btn svg[data-v-98d04846]{width:14px;height:14px}.vue-devtools__anchor-btn.active[data-v-98d04846]{cursor:pointer}.vue-devtools__anchor .panel-entry-btn[data-v-98d04846]{cursor:pointer;flex:none}.vue-devtools__anchor--vertical .panel-entry-btn[data-v-98d04846]{transform:rotate(-90deg)}.vue-devtools__anchor--vertical .vue-devtools__panel[data-v-98d04846]{transform:translate(-50%,-50%) rotate(90deg);box-shadow:2px -2px 8px var(--vue-devtools-widget-shadow)}.vue-devtools__anchor--hide .vue-devtools__panel[data-v-98d04846]{max-width:32px;padding:2px 0}.vue-devtools__anchor--hide .vue-devtools__panel-content[data-v-98d04846]{opacity:0}.vue-devtools__anchor--glowing[data-v-98d04846]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:160px;height:160px;opacity:0;transition:all 1s ease;pointer-events:none;z-index:-1;border-radius:9999px;background-image:linear-gradient(45deg,#00dc82,#36e4da,#0047e1);filter:blur(60px)}.vue-devtools__anchor:hover .vue-devtools__anchor--glowing[data-v-98d04846]{opacity:.6}.vue-devtools__panel[data-v-98d04846]{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;justify-content:flex-start;overflow:hidden;align-items:center;gap:2px;height:30px;padding:4px 4px 4px 5px;box-sizing:border-box;border:1px solid var(--vue-devtools-widget-border);border-radius:20px;background-color:var(--vue-devtools-widget-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--vue-devtools-widget-fg);box-shadow:2px 2px 8px var(--vue-devtools-widget-shadow);-webkit-user-select:none;user-select:none;max-width:150px;transition:max-width .4s ease,padding .5s ease,transform .3s ease,all .4s ease}.vue-devtools__panel-content[data-v-98d04846]{transition:opacity .4s ease}.vue-devtools__panel-divider[data-v-98d04846]{border-left:1px solid rgba(136,136,136,.2);width:1px;height:10px}@keyframes blink-98d04846{0%{opacity:.2}50%{opacity:.6}to{opacity:.2}}@media print{#vue-devtools-anchor[data-v-98d04846]{display:none}}