@nuxt/devtools 0.5.5 → 0.6.1

package/dist/runtime/plugins/view/Main.vue

@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+import type { NuxtDevtoolsHostClient } from '../../../types'
+import { state, togglePanel } from './state'
+import { millisecondToHumanreadable, useEventListener } from './utils'
+import FrameBox from './FrameBox.vue'
+
+const props = defineProps<{
+  client: NuxtDevtoolsHostClient
+}>()
+
+const PANEL_MARGIN = 10
+const FRAME_MARGIN = 24
+const SNAP_THRESHOLD = 2
+
+const vars = computed(() => {
+  const dark = props.client.colorMode.value === 'dark'
+  return {
+    '--nuxt-devtools-widget-bg': dark ? '#111' : '#ffffff',
+    '--nuxt-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
+    '--nuxt-devtools-widget-border': dark ? '#3336' : '#efefef',
+    '--nuxt-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
+  }
+})
+
+const frameBox = ref<InstanceType<typeof FrameBox>>()
+const panelEl = ref<HTMLDivElement>()
+const anchorEl = ref<HTMLDivElement>()
+
+const windowSize = reactive({ width: 0, height: 0 })
+const isDragging = ref(false)
+const draggingOffset = reactive({ x: 0, y: 0 })
+const mousePosition = reactive({ x: 0, y: 0 })
+
+function onPointerDown(e: PointerEvent) {
+  isDragging.value = true
+  const { left, top, width, height } = panelEl.value!.getBoundingClientRect()
+  draggingOffset.x = e.clientX - left - width / 2
+  draggingOffset.y = e.clientY - top - height / 2
+}
+
+onMounted(() => {
+  windowSize.width = window.innerWidth
+  windowSize.height = window.innerHeight
+
+  useEventListener(window, 'resize', () => {
+    windowSize.width = window.innerWidth
+    windowSize.height = window.innerHeight
+  })
+
+  useEventListener(window, 'pointermove', (e: PointerEvent) => {
+    if (!isDragging.value)
+      return
+
+    const centerX = windowSize.width / 2
+    const centerY = windowSize.height / 2
+
+    const x = e.clientX - draggingOffset.x
+    const y = e.clientY - draggingOffset.y
+
+    mousePosition.x = x
+    mousePosition.y = y
+
+    // Get position
+    const deg = Math.atan2(y - centerY, x - centerX)
+    const HORIZONTAL_MARGIN = 70
+    const TL = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, 0 - centerX)
+    const TR = Math.atan2(0 - centerY + HORIZONTAL_MARGIN, windowSize.width - centerX)
+    const BL = Math.atan2(windowSize.height - HORIZONTAL_MARGIN - centerY, 0 - centerX)
+    const BR = Math.atan2(windowSize.height - HORIZONTAL_MARGIN - centerY, windowSize.width - centerX)
+
+    state.value.position = deg >= TL && deg <= TR
+      ? 'top'
+      : deg >= TR && deg <= BR
+        ? 'right'
+        : deg >= BR && deg <= BL
+          ? 'bottom'
+          : 'left'
+
+    state.value.left = snapToPoints(x / windowSize.width * 100)
+    state.value.top = snapToPoints(y / windowSize.height * 100)
+  })
+  useEventListener(window, 'pointerup', () => {
+    isDragging.value = false
+  })
+  useEventListener(window, 'pointerleave', () => {
+    isDragging.value = false
+  })
+})
+
+function snapToPoints(value: number) {
+  if (value < 5)
+    return 0
+  if (value > 95)
+    return 100
+  if (Math.abs(value - 50) < SNAP_THRESHOLD)
+    return 50
+  return value
+}
+
+const isVertical = computed(() => state.value.position === 'left' || state.value.position === 'right')
+
+const anchorPos = computed(() => {
+  const halfWidth = (panelEl.value?.clientWidth || 0) / 2
+  const halfHeight = (panelEl.value?.clientHeight || 0) / 2
+
+  const left = state.value.left * windowSize.width / 100
+  const top = state.value.top * windowSize.height / 100
+
+  switch (state.value.position) {
+    case 'top':
+      return {
+        left: Math.min(Math.max(left, halfWidth + PANEL_MARGIN), windowSize.width - halfWidth - PANEL_MARGIN),
+        top: PANEL_MARGIN + halfHeight,
+      }
+    case 'right':
+      return {
+        left: windowSize.width - PANEL_MARGIN - halfHeight,
+        top,
+      }
+    case 'left':
+      return {
+        left: PANEL_MARGIN + halfHeight,
+        top,
+      }
+    case 'bottom':
+    default:
+      return {
+        left: Math.min(Math.max(left, halfWidth + PANEL_MARGIN), windowSize.width - halfWidth - PANEL_MARGIN),
+        top: windowSize.height - PANEL_MARGIN - halfHeight,
+      }
+  }
+})
+
+const anchorStyle = computed(() => ({ left: `${anchorPos.value.left}px`, top: `${anchorPos.value.top}px` }))
+
+const iframeStyle = computed(() => {
+  // eslint-disable-next-line no-unused-expressions, no-sequences
+  mousePosition.x, mousePosition.y
+
+  const maxWidth = windowSize.width - FRAME_MARGIN * 2
+  const maxHeight = windowSize.height - FRAME_MARGIN * 2
+
+  const style: CSSProperties = {
+    zIndex: -1,
+    pointerEvents: isDragging.value ? 'none' : 'auto',
+    width: `min(${state.value.width}vw, calc(100vw - ${FRAME_MARGIN * 2}px))`,
+    height: `min(${state.value.height}vh, calc(100vh - ${FRAME_MARGIN * 2}px))`,
+  }
+
+  const anchor = anchorPos.value
+  const width = Math.min(maxWidth, state.value.width * windowSize.width / 100)
+  const height = Math.min(maxHeight, state.value.height * windowSize.height / 100)
+
+  const anchorX = anchor?.left || 0
+  const anchorY = anchor?.top || 0
+
+  switch (state.value.position) {
+    case 'top':
+    case 'bottom':
+      style.left = 0
+      style.transform = 'translate(-50%, 0)'
+      if ((anchorX - FRAME_MARGIN) < width / 2)
+        style.left = `${width / 2 - anchorX + FRAME_MARGIN}px`
+      else if ((windowSize.width - anchorX - FRAME_MARGIN) < width / 2)
+        style.left = `${windowSize.width - anchorX - width / 2 - FRAME_MARGIN}px`
+      break
+    case 'right':
+    case 'left':
+      style.top = 0
+      style.transform = 'translate(0, -50%)'
+      if ((anchorY - FRAME_MARGIN) < height / 2)
+        style.top = `${height / 2 - anchorY + FRAME_MARGIN}px`
+      else if ((windowSize.height - anchorY - FRAME_MARGIN) < height / 2)
+        style.top = `${windowSize.height - anchorY - height / 2 - FRAME_MARGIN}px`
+      break
+  }
+
+  switch (state.value.position) {
+    case 'top':
+      style.top = 0
+      break
+    case 'right':
+      style.right = 0
+      break
+    case 'left':
+      style.left = 0
+      break
+    case 'bottom':
+    default:
+      style.bottom = 0
+      break
+  }
+
+  return style
+})
+
+const time = computed(() => {
+  let type = ''
+  const metric = props.client.loadingTimeMetrics
+  let time = -1
+  if (metric.pageEnd && metric.pageStart) {
+    time = metric.pageEnd - metric.pageStart
+    type = 'Page'
+  }
+  else if (metric.appLoad && metric.appInit) {
+    time = metric.appLoad - metric.appInit
+    type = 'App'
+  }
+  if (time < 0)
+    return [type, '', '-']
+  return [type, ...millisecondToHumanreadable(time)]
+})
+</script>
+
+<template>
+  <div
+    id="nuxt-devtools-anchor"
+    ref="anchorEl"
+    :style="[anchorStyle, vars]"
+    :class="{ 'nuxt-devtools-vertical': isVertical }"
+  >
+    <div class="nuxt-devtools-glowing" :style="isDragging ? 'opacity: 0.6 !important' : ''" />
+    <div ref="panelEl" class="nuxt-devtools-panel" @pointerdown="onPointerDown">
+      <button class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button" title="Toggle Nuxt DevTools" @click="togglePanel">
+        <svg
+          viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg"
+          style="margin-top:-1px; height: 1.2em; width: 1.2em;"
+        >
+          <path d="M181.767 270H302.211C306.037 270 309.795 269.003 313.108 267.107C316.421 265.211 319.172 262.484 321.084 259.2C322.996 255.915 324.002 252.19 324 248.399C323.998 244.607 322.989 240.883 321.074 237.601L240.187 98.7439C238.275 95.4607 235.525 92.7342 232.213 90.8385C228.901 88.9429 225.143 87.9449 221.318 87.9449C217.494 87.9449 213.736 88.9429 210.424 90.8385C207.112 92.7342 204.361 95.4607 202.449 98.7439L181.767 134.272L141.329 64.7975C139.416 61.5145 136.664 58.7884 133.351 56.8931C130.038 54.9978 126.28 54 122.454 54C118.629 54 114.871 54.9978 111.558 56.8931C108.245 58.7884 105.493 61.5145 103.58 64.7975L2.92554 237.601C1.01067 240.883 0.00166657 244.607 2.06272e-06 248.399C-0.00166244 252.19 1.00407 255.915 2.91605 259.2C4.82803 262.484 7.57884 265.211 10.8918 267.107C14.2047 269.003 17.963 270 21.7886 270H97.3936C127.349 270 149.44 256.959 164.641 231.517L201.546 168.172L221.313 134.272L280.637 236.1H201.546L181.767 270ZM96.1611 236.065L43.3984 236.054L122.49 100.291L161.953 168.172L135.531 213.543C125.436 230.051 113.968 236.065 96.1611 236.065Z" fill="#00DC82" />
+        </svg>
+      </button>
+      <div style="border-left: 1px solid #8883;width:1px;height:10px;" />
+      <div class="nuxt-devtools-label" :title="`${time[0]} load time`">
+        <div class="nuxt-devtools-label-main">
+          {{ time[1] }}
+        </div>
+        <span class="nuxt-devtools-label-secondary">
+          {{ time[2] }}
+        </span>
+      </div>
+      <template v-if="client.inspector">
+        <div style="border-left: 1px solid #8883;width:1px;height:10px;" />
+        <button class="nuxt-devtools-icon-button" title="Toggle Component Inspector" @click="client.inspector.toggle">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            style="height: 1.2em; width: 1.2em; opacity:0.5;"
+            :style="client.inspector.isEnabled.value ? 'opacity:1;color:#00dc82' : ''"
+            viewBox="0 0 24 24"
+          >
+            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r=".5" fill="currentColor" /><path d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2" /></g>
+          </svg>
+        </button>
+      </template>
+    </div>
+    <FrameBox ref="frameBox" :client="client" :style="iframeStyle" />
+  </div>
+</template>
+
+<style scoped>
+#nuxt-devtools-anchor {
+  width: 0;
+  z-index: 2147483645;
+  position: fixed;
+  transform-origin: center center;
+  transform: translate(-50%, -50%) rotate(0);
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-label {
+  padding: 0 7px 0 8px;
+  font-size: 0.8em;
+  line-height: 1em;
+  display: flex;
+  gap: 3px;
+  justify-items: center;
+  align-items: center;
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-main {
+  opacity: 0.8;
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-label .nuxt-devtools-label-secondary {
+  font-size: 0.8em;
+  line-height: 0.6em;
+  opacity: 0.5;
+}
+
+#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-nuxt-button {
+  transform: rotate(-90deg);
+}
+
+#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-label {
+  transform: rotate(-90deg);
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px;
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-panel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 2px 2px 2px 4px;
+  border: 1px solid var(--nuxt-devtools-widget-border);
+  border-radius: 100px;
+  background-color: var(--nuxt-devtools-widget-bg);
+  backdrop-filter: blur(10px);
+  color: var(--nuxt-devtools-widget-fg);
+  box-shadow: 2px 2px 8px var(--nuxt-devtools-widget-shadow);
+  transition: background 0.2s ease;
+  user-select: none;
+}
+
+#nuxt-devtools-anchor.nuxt-devtools-vertical .nuxt-devtools-panel {
+  transform: translate(-50%, -50%) rotate(90deg);
+  box-shadow: 2px -2px 8px var(--nuxt-devtools-widget-shadow);
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-icon-button {
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+}
+#nuxt-devtools-anchor .nuxt-devtools-icon-button:hover {
+  opacity: 1;
+}
+
+#nuxt-devtools-anchor:hover .nuxt-devtools-glowing {
+  opacity: 0.6;
+}
+
+#nuxt-devtools-anchor .nuxt-devtools-glowing {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+  width: 160px;
+  height: 160px;
+  opacity: 0;
+  transition: all 0.8s ease;
+  pointer-events: none;
+  z-index: -1;
+  border-radius: 9999px;
+  background-image: linear-gradient(45deg,#00dc82,#36e4da,#0047e1);
+  filter: blur(60px);
+}
+</style>

package/dist/runtime/plugins/view/client.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+export type ColorScheme = 'dark' | 'light';
+export declare function useClientColorMode(): Ref<ColorScheme>;

package/dist/runtime/plugins/view/client.mjs

@@ -0,0 +1,45 @@
+import { computed, ref } from "vue";
+export function useClientColorMode() {
+  const explicitColor = ref();
+  const systemColor = ref();
+  const elements = [
+    document.documentElement,
+    document.body
+  ];
+  const ob = new MutationObserver(getExplicitColor);
+  elements.forEach((el) => {
+    ob.observe(el, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  });
+  const preferDarkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const preferLightQuery = window.matchMedia("(prefers-color-scheme: light)");
+  preferDarkQuery.addEventListener("change", getSystemColor);
+  preferLightQuery.addEventListener("change", getSystemColor);
+  function getExplicitColor() {
+    let color;
+    for (const el of elements) {
+      if (el.classList.contains("dark")) {
+        color = "dark";
+        break;
+      }
+      if (el.classList.contains("light")) {
+        color = "light";
+        break;
+      }
+    }
+    explicitColor.value = color;
+  }
+  function getSystemColor() {
+    if (preferDarkQuery.matches)
+      systemColor.value = "dark";
+    else if (preferLightQuery.matches)
+      systemColor.value = "light";
+    else
+      systemColor.value = void 0;
+  }
+  getExplicitColor();
+  getSystemColor();
+  return computed(() => explicitColor.value || systemColor.value || "light");
+}

package/dist/runtime/plugins/view/state.d.ts

@@ -1,10 +1,9 @@
 import type { DevToolsFrameState } from '../../../types';
 export declare const PANEL_PADDING = 10;
-export declare const PANEL_MIN = 15;
+export declare const PANEL_MIN = 20;
 export declare const PANEL_MAX = 100;
-export type ViewMode = 'default' | 'component-inspector';
-export declare const viewMode: import("vue").Ref<ViewMode>;
 export declare const state: import("vue").Ref<DevToolsFrameState>;
+export declare const isInitialized: import("vue").Ref<boolean>;
 export declare function togglePanel(): void;
 export declare function closePanel(): void;
 export declare function openPanel(): void;

package/dist/runtime/plugins/view/state.mjs

@@ -1,19 +1,25 @@
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useObjectStorage } from "./utils.mjs";
 export const PANEL_PADDING = 10;
-export const PANEL_MIN = 15;
+export const PANEL_MIN = 20;
 export const PANEL_MAX = 100;
-export const viewMode = ref("default");
 export const state = useObjectStorage("nuxt-devtools-frame-state", {
   width: 80,
   height: 60,
-  bottom: 0,
-  left: 0,
+  top: 0,
+  left: 50,
   open: false,
   route: "/",
   position: "bottom",
   closeOnOutsideClick: false
 });
+export const isInitialized = ref(state.value.open);
+if (!isInitialized.value) {
+  watch(() => state.value.open, (open) => {
+    if (open)
+      isInitialized.value = open;
+  });
+}
 export function togglePanel() {
   if (state.value.open)
     closePanel();
@@ -21,10 +27,7 @@ export function togglePanel() {
     openPanel();
 }
 export function closePanel() {
-  if (viewMode.value !== "default")
-    viewMode.value = "default";
-  else
-    state.value.open = false;
+  state.value.open = false;
 }
 export function openPanel() {
   state.value.open = true;

package/dist/runtime/plugins/view/utils.d.ts

@@ -2,3 +2,4 @@ import type { Ref } from 'vue';
 export declare function useObjectStorage<T>(key: string, initial: T, readonly?: boolean): Ref<T>;
 export declare function useTransform<F, T>(data: Ref<F>, to: (data: F) => T, from: (data: T) => F): Ref<T>;
 export declare function useEventListener(target: EventTarget, type: string, listener: any, options?: boolean | AddEventListenerOptions): void;
+export declare function millisecondToHumanreadable(ms: number): [number, string];

package/dist/runtime/plugins/view/utils.mjs

@@ -39,3 +39,12 @@ export function useEventListener(target, type, listener, options) {
   target.addEventListener(type, listener, options);
   getCurrentScope() && onScopeDispose(() => target.removeEventListener(type, listener, options));
 }
+export function millisecondToHumanreadable(ms) {
+  if (ms < 1e3)
+    return [+ms.toFixed(0), "ms"];
+  if (ms < 1e3 * 60)
+    return [+(ms / 1e3).toFixed(1), "s"];
+  if (ms < 1e3 * 60 * 60)
+    return [+(ms / 1e3 / 60).toFixed(1), "min"];
+  return [+(ms / 1e3 / 60 / 60).toFixed(1), "hour"];
+}

package/dist/shared/{devtools.345c630c.mjs → devtools.7ab40af4.mjs}

@@ -3,6 +3,8 @@ import { isGlobalInstall } from '../dirs.mjs';
 
 const ROUTE_PATH = "/__nuxt_devtools__";
 const ROUTE_CLIENT = `${ROUTE_PATH}/client`;
+const ROUTE_AUTH = `${ROUTE_PATH}/auth`;
+const ROUTE_AUTH_VERIFY = `${ROUTE_PATH}/auth-verify`;
 const ROUTE_ANALYZE = `${ROUTE_PATH}/analyze`;
 const WS_EVENT_NAME = "nuxt:devtools:rpc";
 const defaultOptions = {
@@ -38,4 +40,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { ROUTE_ANALYZE as R, WS_EVENT_NAME as W, ROUTE_CLIENT as a, module as m };
+export { ROUTE_AUTH as R, WS_EVENT_NAME as W, ROUTE_ANALYZE as a, ROUTE_CLIENT as b, ROUTE_AUTH_VERIFY as c, module as m };

package/dist/types.d.ts

@@ -4,7 +4,7 @@ export * from '@nuxt/devtools-kit/types';
 interface DevToolsFrameState {
     width: number;
     height: number;
-    bottom: number;
+    top: number;
     left: number;
     open: boolean;
     route: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools",
   "type": "module",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -30,11 +30,12 @@
     "vite": "*"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.5.1",
-    "birpc": "^0.2.11",
+    "@nuxt/kit": "^3.5.3",
+    "birpc": "^0.2.12",
+    "boxen": "^7.1.0",
     "consola": "^3.1.0",
     "execa": "^7.1.1",
-    "fast-folder-size": "^1.7.1",
+    "fast-folder-size": "^2.0.0",
     "fast-glob": "^3.2.12",
     "get-port-please": "^3.0.1",
     "global-dirs": "^3.0.1",
@@ -44,43 +45,42 @@
     "is-installed-globally": "^0.4.0",
     "launch-editor": "^2.6.0",
     "local-pkg": "^0.4.3",
-    "magicast": "^0.2.8",
-    "nypm": "^0.2.0",
+    "magicast": "^0.2.9",
+    "nypm": "^0.2.1",
     "pacote": "^15.2.0",
-    "pathe": "^1.1.0",
+    "pathe": "^1.1.1",
     "perfect-debounce": "^1.0.0",
     "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "rc9": "^2.1.0",
     "semver": "^7.5.1",
     "sirv": "^2.0.3",
-    "unimport": "^3.0.7",
+    "unimport": "^3.0.8",
     "vite-plugin-inspect": "^0.7.28",
     "vite-plugin-vue-inspector": "^3.4.2",
     "wait-on": "^7.0.1",
     "which": "^3.0.1",
     "ws": "^8.13.0",
-    "@nuxt/devtools-kit": "0.5.5",
-    "@nuxt/devtools-wizard": "0.5.5"
+    "@nuxt/devtools-kit": "0.6.1",
+    "@nuxt/devtools-wizard": "0.6.1"
   },
   "devDependencies": {
-    "@antfu/utils": "^0.7.2",
+    "@antfu/utils": "^0.7.4",
     "@iconify-json/bxl": "^1.1.6",
-    "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/logos": "^1.1.31",
-    "@iconify-json/mdi": "^1.1.52",
+    "@iconify-json/carbon": "^1.1.18",
+    "@iconify-json/logos": "^1.1.32",
     "@iconify-json/ri": "^1.1.9",
-    "@iconify-json/simple-icons": "^1.1.54",
-    "@iconify-json/tabler": "^1.1.77",
-    "@nuxt/content": "^2.6.0",
+    "@iconify-json/simple-icons": "^1.1.56",
+    "@iconify-json/tabler": "^1.1.79",
+    "@nuxt/content": "^2.7.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@parcel/watcher": "^2.1.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
-    "@unocss/nuxt": "^0.52.3",
-    "@unocss/preset-icons": "^0.52.3",
-    "@unocss/preset-uno": "^0.52.3",
-    "@unocss/runtime": "^0.52.3",
-    "@vue-macros/nuxt": "^1.3.10",
+    "@types/ua-parser-js": "^0.7.36",
+    "@unocss/nuxt": "^0.53.1",
+    "@unocss/preset-icons": "^0.53.1",
+    "@unocss/preset-uno": "^0.53.1",
+    "@unocss/runtime": "^0.53.1",
     "@vueuse/nuxt": "^10.1.2",
     "esno": "^0.16.3",
     "flatted": "^3.2.7",
@@ -90,25 +90,26 @@
     "markdown-it": "^13.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "nanoid": "^4.0.2",
-    "nuxt": "^3.5.1",
-    "nuxt-vitest": "^0.7.1",
-    "ofetch": "^1.0.1",
+    "nuxt": "^3.5.3",
+    "nuxt-vitest": "^0.8.5",
+    "ofetch": "^1.1.0",
     "ohash": "^1.1.2",
     "shiki": "^0.14.2",
     "shiki-es": "^0.2.0",
     "simple-git": "^3.19.0",
     "splitpanes": "^3.1.5",
     "theme-vitesse": "^0.7.2",
-    "unocss": "^0.52.3",
-    "vanilla-jsoneditor": "^0.17.4",
+    "ua-parser-js": "^1.0.35",
+    "unocss": "^0.53.1",
+    "vanilla-jsoneditor": "^0.17.6",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vue-tsc": "^1.6.5",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "xterm": "^5.1.0",
+    "xterm": "^5.2.1",
     "xterm-addon-fit": "^0.7.0",
-    "@nuxt/devtools": "0.5.5"
+    "@nuxt/devtools": "0.6.1"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client && esno scripts/prepare.ts",

package/dist/client/__inspecting/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html >
-<head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/entry.f02d2ccc.js"><link rel="preload" as="style" href="/__nuxt_devtools__/client/_nuxt/entry.bf8a0e33.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/index.e17aa9ce.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/default.2805e636.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/full.cfa15ba5.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/none.a68953c7.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/unocss-runtime.7eface6f.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt_devtools__/client/_nuxt/error-component.db5245e7.js"><link rel="stylesheet" href="/__nuxt_devtools__/client/_nuxt/entry.bf8a0e33.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
-</script></head>
-<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{fixture4:"public runtime config from nuxt.config.ts"},app:{baseURL:"/__nuxt_devtools__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_devtools__/client/_nuxt/entry.f02d2ccc.js" crossorigin></script></body>
-</html>

package/dist/client/_nuxt/CodeSnippets.vue.22b03a10.js

@@ -1 +0,0 @@
-import{_ as y}from"./NCodeBlock.vue.e2044e41.js";import{a as C,a$ as g,ai as h,o as a,h as n,f as s,F as p,q as x,s as u,u as o,t as S,i as f,w as _,l as m,c as w,v as r,k as B}from"./entry.f02d2ccc.js";import{a as N}from"./editor.721868d4.js";const $={key:0,relative:"","n-code-block":""},V={flex:"~ wrap","w-full":""},D=["onClick"],E=s("div",{border:"b base","flex-auto":""},null,-1),F={flex:"~ gap-2",px3:"",pb3:"",n:"sm primary"},j=C({__name:"CodeSnippets",props:{codeSnippets:null},setup(c){const l=c,e=g(l.codeSnippets[0]),b=N();return h(()=>{l.codeSnippets.includes(e.value)||(e.value=l.codeSnippets[0])}),(q,i)=>{const k=y,d=B;return c.codeSnippets.length?(a(),n("div",$,[s("div",V,[(a(!0),n(p,null,x(c.codeSnippets,(t,v)=>(a(),n("button",{key:v,px4:"",py2:"",border:"r base",hover:"bg-active",class:u(t===o(e)?"":"border-b"),onClick:z=>e.value=t},[s("div",{class:u(t===o(e)?"":"op30"),"font-mono":""},S(t.name),3)],10,D))),128)),E]),o(e)?(a(),n(p,{key:0},[f(k,{code:o(e).code,lang:o(e).lang,lines:!1,"w-full":"","of-auto":"",p3:""},null,8,["code","lang"]),s("div",F,[f(d,{icon:"carbon-copy",onClick:i[0]||(i[0]=t=>o(b)(o(e).code))},{default:_(()=>[m(" Copy ")]),_:1}),o(e)?.docs?(a(),w(d,{key:0,to:o(e).docs,target:"_blank",icon:"carbon-catalog"},{default:_(()=>[m(" Docs ")]),_:1},8,["to"])):r("",!0)])],64)):r("",!0)])):r("",!0)}}});export{j as _};

package/dist/client/_nuxt/DrawerRight.vue.58044cee.js

@@ -1 +0,0 @@
-import{_ as i}from"./NIconButton.vue.6924c323.js";import{a as u,r as m,ab as f,ac as d,c as p,w as b,ad as v,o as r,h as _,i as h,f as x,Z as g,ae as y,u as k,v as B}from"./entry.f02d2ccc.js";const C={relative:"","h-full":"","w-full":"","of-auto":""},V={inheritAttrs:!1},N=u({...V,__name:"DrawerRight",props:{modelValue:{type:Boolean},navbar:null,autoClose:{type:Boolean}},emits:["close"],setup(a,{emit:l}){const e=a,o=m(),{height:n}=f(()=>e.navbar,void 0,{box:"border-box"});return d(o,()=>{e.modelValue&&e.autoClose&&l("close")},{ignore:["a","button","summary"]}),(t,s)=>{const c=i;return r(),p(v,{"enter-active-class":"duration-200 ease-in","enter-from-class":"transform translate-x-1/1","enter-to-class":"opacity-100","leave-active-class":"duration-200 ease-out","leave-from-class":"opacity-100","leave-to-class":"transform translate-x-1/1"},{default:b(()=>[a.modelValue?(r(),_("div",y({key:0,ref_key:"el",ref:o,border:"l base",flex:"~ col gap-1",absolute:"","bottom-0":"","right-0":"","z-10":"","z-20":"","of-auto":"","text-sm":"","glass-effect":"",style:{top:`${k(n)}px`}},t.$attrs),[h(c,{absolute:"","right-2":"","top-2":"","z-20":"","text-xl":"",icon:"carbon-close",onClick:s[0]||(s[0]=$=>t.$emit("close"))}),x("div",C,[g(t.$slots,"default")])],16)):B("",!0)]),_:3})}}});export{N as _};

package/dist/client/_nuxt/DurationDisplay.vue.0d87f5bf.js

@@ -1 +0,0 @@
-import{a,o as s,h as i,l as u,t as f,s as c,f as x}from"./entry.f02d2ccc.js";const l=x("span",{"ml-1":"","text-xs":"",op50:""},"ms",-1),p=a({__name:"DurationDisplay",props:{duration:null,factor:{default:1}},setup(e){const r=e;function o(t){return t?(t=t*r.factor,t<.5?"text-gray:50":t>1e3?"text-red-400":t>500?"text-orange-400":t>200?"text-yellow-400":""):"text-gray-400"}function n(t){return t?t<1?"<1":t.toFixed(2):"-"}return(t,m)=>(s(),i("div",{class:c(o(e.duration))},[u(f(n(e.duration)),1),l],2))}});export{p as _};

package/dist/client/_nuxt/FilepathItem.vue.063a2cdd.js

@@ -1 +0,0 @@
-import{u as d}from"./editor.721868d4.js";import{a as h,U as f,p,ar as v,o as n,c as k,w as y,h as o,F as i,l as c,t as l,u as a,f as B,v as C,s as N,aa as g}from"./entry.f02d2ccc.js";const b={key:0,op50:""},F=h({__name:"FilepathItem",props:{filepath:null,lineBreak:{type:Boolean},subpath:{type:Boolean},override:null},setup(e){const s=e,m=d(),r=f(),t=p(()=>s.filepath&&r.value?v(s.filepath,r.value.rootDir):{path:s.filepath||""});return(w,u)=>(n(),k(g(e.filepath?"button":"span"),{class:N([e.filepath?"hover:underline":"",e.lineBreak?"":"ws-nowrap of-hidden truncate"]),"font-mono":"",title:e.override||e.filepath,onClick:u[0]||(u[0]=x=>e.filepath&&a(m)(e.filepath))},{default:y(()=>[e.override?(n(),o(i,{key:0},[c(l(e.override),1)],64)):a(t).moduleName?(n(),o(i,{key:1},[B("span",null,l(a(t).moduleName),1),e.subpath?(n(),o("span",b,l(a(t).path.slice(a(t).moduleName.length)),1)):C("",!0)],64)):(n(),o(i,{key:2},[c(l(a(t).path),1)],64))]),_:1},8,["class","title"]))}});export{F as _};