@nuxt/devtools 0.6.2 → 0.6.4

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

@@ -1,17 +1,33 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { state, togglePanel } from './state'
-import { millisecondToHumanreadable, useEventListener } from './utils'
+import { state } from './state'
+import { millisecondToHumanreadable, useEventListener, useScreenSafeArea } from './utils'
 import FrameBox from './FrameBox.vue'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
 }>()
 
-const PANEL_MARGIN = 10
-const FRAME_MARGIN = 24
+const panelMargins = reactive({
+  left: 10,
+  top: 10,
+  right: 10,
+  bottom: 10,
+})
+
+const safeArea = useScreenSafeArea()
+
+const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
+
+watchEffect(() => {
+  panelMargins.left = safeArea.left.value + 10
+  panelMargins.top = safeArea.top.value + 10
+  panelMargins.right = safeArea.right.value + 10
+  panelMargins.bottom = safeArea.bottom.value + 10
+})
+
 const SNAP_THRESHOLD = 2
 
 const vars = computed(() => {
@@ -99,6 +115,10 @@ function snapToPoints(value: number) {
   return value
 }
 
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
 const isVertical = computed(() => state.value.position === 'left' || state.value.position === 'right')
 
 const anchorPos = computed(() => {
@@ -111,24 +131,24 @@ const anchorPos = computed(() => {
   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,
+        left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
+        top: panelMargins.top + halfHeight,
       }
     case 'right':
       return {
-        left: windowSize.width - PANEL_MARGIN - halfHeight,
-        top,
+        left: windowSize.width - panelMargins.right - halfHeight,
+        top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom),
       }
     case 'left':
       return {
-        left: PANEL_MARGIN + halfHeight,
-        top,
+        left: panelMargins.left + halfHeight,
+        top: clamp(top, halfWidth + panelMargins.top, windowSize.height - halfWidth - panelMargins.bottom),
       }
     case 'bottom':
     default:
       return {
-        left: Math.min(Math.max(left, halfWidth + PANEL_MARGIN), windowSize.width - halfWidth - PANEL_MARGIN),
-        top: windowSize.height - PANEL_MARGIN - halfHeight,
+        left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
+        top: windowSize.height - panelMargins.bottom - halfHeight,
       }
   }
 })
@@ -139,14 +159,26 @@ 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 halfHeight = (panelEl.value?.clientHeight || 0) / 2
+
+  const frameMargin = {
+    left: panelMargins.left + halfHeight,
+    top: panelMargins.top + halfHeight,
+    right: panelMargins.right + halfHeight,
+    bottom: panelMargins.bottom + halfHeight,
+  }
+
+  const marginHorizontal = frameMargin.left + frameMargin.right
+  const marginVertical = frameMargin.top + frameMargin.bottom
+
+  const maxWidth = windowSize.width - marginHorizontal
+  const maxHeight = windowSize.height - marginVertical
 
   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))`,
+    width: `min(${state.value.width}vw, calc(100vw - ${marginHorizontal}px))`,
+    height: `min(${state.value.height}vh, calc(100vh - ${marginVertical}px))`,
   }
 
   const anchor = anchorPos.value
@@ -161,19 +193,19 @@ const iframeStyle = computed(() => {
     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`
+      if ((anchorX - frameMargin.left) < width / 2)
+        style.left = `${width / 2 - anchorX + frameMargin.left}px`
+      else if ((windowSize.width - anchorX - frameMargin.right) < width / 2)
+        style.left = `${windowSize.width - anchorX - width / 2 - frameMargin.right}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`
+      if ((anchorY - frameMargin.top) < height / 2)
+        style.top = `${height / 2 - anchorY + frameMargin.top}px`
+      else if ((windowSize.height - anchorY - frameMargin.bottom) < height / 2)
+        style.top = `${windowSize.height - anchorY - height / 2 - frameMargin.bottom}px`
       break
   }
 
@@ -221,9 +253,14 @@ const time = computed(() => {
     :style="[anchorStyle, vars]"
     :class="{ 'nuxt-devtools-vertical': isVertical }"
   >
-    <div class="nuxt-devtools-glowing" :style="isDragging ? 'opacity: 0.6 !important' : ''" />
+    <div v-if="!isSafari" 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">
+      <button
+        class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button"
+        title="Toggle Nuxt DevTools"
+        :style="state.open ? '' : 'filter:saturate(0)'"
+        @click="client.toggle()"
+      >
         <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;"
@@ -254,7 +291,12 @@ const time = computed(() => {
         </button>
       </template>
     </div>
-    <FrameBox ref="frameBox" :client="client" :style="iframeStyle" />
+    <FrameBox
+      ref="frameBox"
+      :client="client"
+      :style="iframeStyle"
+      :is-dragging="isDragging"
+    />
   </div>
 </template>
 
@@ -265,6 +307,18 @@ const time = computed(() => {
   position: fixed;
   transform-origin: center center;
   transform: translate(-50%, -50%) rotate(0);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 15px !important;
+}
+
+#nuxt-devtools-anchor button {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+  color: inherit;
 }
 
 #nuxt-devtools-anchor .nuxt-devtools-label {

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

@@ -1,3 +1,11 @@
 import type { Ref } from 'vue';
+import type { NuxtDevtoolsHostClient } from '../../../types';
+declare const clientRef: import("vue").ShallowRef<NuxtDevtoolsHostClient | undefined>;
+export { clientRef as client };
 export type ColorScheme = 'dark' | 'light';
+export declare function setupDevToolsClient({ nuxt, clientHooks, timeMetric, }: {
+    nuxt: any;
+    clientHooks: any;
+    timeMetric: any;
+}): Promise<void>;
 export declare function useClientColorMode(): Ref<ColorScheme>;

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

@@ -1,4 +1,212 @@
-import { computed, ref } from "vue";
+import { computed, createApp, h, markRaw, nextTick, ref, shallowReactive, shallowRef, watch } from "vue";
+import { createHooks } from "hookable";
+import Main from "./Main.vue";
+import { popupWindow, state } from "./state.mjs";
+import { useAppConfig } from "#imports";
+const clientRef = shallowRef();
+export { clientRef as client };
+export async function setupDevToolsClient({
+  nuxt,
+  clientHooks,
+  timeMetric
+}) {
+  const isInspecting = ref(false);
+  const colorMode = useClientColorMode();
+  const client = shallowReactive({
+    nuxt: markRaw(nuxt),
+    appConfig: useAppConfig(),
+    hooks: createHooks(),
+    getClientHooksMetrics: () => Object.values(clientHooks),
+    getClientPluginMetrics: () => {
+      return window.__NUXT_DEVTOOLS_PLUGINS_METRIC__ || [];
+    },
+    loadingTimeMetrics: timeMetric,
+    reloadPage() {
+      location.reload();
+    },
+    toggle() {
+      if (state.value.open)
+        client.close();
+      else
+        client.open();
+    },
+    close() {
+      if (!state.value.open)
+        return;
+      state.value.open = false;
+      if (popupWindow.value) {
+        try {
+          popupWindow.value.close();
+        } catch (e) {
+        }
+        popupWindow.value = null;
+      }
+    },
+    open() {
+      if (state.value.open)
+        return;
+      state.value.open = true;
+      nextTick(() => {
+        client.updateClient();
+      });
+    },
+    inspector: getInspectorInstance(),
+    colorMode,
+    getIframe,
+    updateClient
+  });
+  let iframe;
+  function updateClient() {
+    if (!client.inspector)
+      client.inspector = getInspectorInstance();
+    try {
+      iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client);
+    } catch (e) {
+    }
+    return client;
+  }
+  function getIframe() {
+    if (!iframe) {
+      const CLIENT_PATH = "/__nuxt_devtools__/client";
+      const initialUrl = CLIENT_PATH + state.value.route;
+      iframe = document.createElement("iframe");
+      iframe.id = "nuxt-devtools-iframe";
+      iframe.src = initialUrl;
+      iframe.setAttribute("data-v-inspector-ignore", "true");
+      iframe.onload = async () => {
+        await waitForClientInjection();
+        client.updateClient();
+      };
+    }
+    return iframe;
+  }
+  function waitForClientInjection(retry = 10, timeout = 200) {
+    const test = () => !!iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__;
+    if (test())
+      return;
+    return new Promise((resolve, reject) => {
+      const interval = setInterval(() => {
+        if (test()) {
+          clearInterval(interval);
+          resolve();
+        } else if (retry-- <= 0) {
+          clearInterval(interval);
+          reject("Nuxt Devtools client injection failed");
+        }
+      }, timeout);
+    });
+  }
+  function enableComponentInspector() {
+    window.__VUE_INSPECTOR__?.enable();
+    isInspecting.value = true;
+  }
+  function disableComponentInspector() {
+    if (!window.__VUE_INSPECTOR__?.enabled)
+      return;
+    window.__VUE_INSPECTOR__?.disable();
+    client?.hooks.callHook("host:inspector:close");
+    isInspecting.value = false;
+  }
+  function getInspectorInstance() {
+    const componentInspector = window.__VUE_INSPECTOR__;
+    if (componentInspector) {
+      componentInspector.openInEditor = async (baseUrl, file, line, column) => {
+        disableComponentInspector();
+        await client.hooks.callHook("host:inspector:click", baseUrl, file, line, column);
+      };
+      componentInspector.onUpdated = () => {
+        client.hooks.callHook("host:inspector:update", {
+          ...componentInspector.linkParams,
+          ...componentInspector.position
+        });
+      };
+    }
+    return markRaw({
+      isEnabled: isInspecting,
+      enable: enableComponentInspector,
+      disable: disableComponentInspector,
+      toggle: () => {
+        if (window.__VUE_INSPECTOR__?.enabled)
+          disableComponentInspector();
+        else
+          enableComponentInspector();
+      },
+      instance: componentInspector
+    });
+  }
+  function refreshReactivity() {
+    client.hooks.callHook("host:update:reactivity");
+  }
+  watch(() => [
+    client.nuxt.payload,
+    client.colorMode.value,
+    client.loadingTimeMetrics
+  ], () => {
+    refreshReactivity();
+  }, { deep: true });
+  client.nuxt.vueApp.config.globalProperties?.$router?.afterEach(() => {
+    refreshReactivity();
+  });
+  client.nuxt.hook("app:mounted", () => {
+    refreshReactivity();
+  });
+  client.hooks.hook("devtools:navigate", (path) => {
+    state.value.route = path;
+  });
+  clientRef.value = client;
+  const documentPictureInPicture = window.documentPictureInPicture;
+  if (documentPictureInPicture?.requestWindow) {
+    client.popup = async () => {
+      const iframe2 = getIframe();
+      const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
+        width: Math.round(window.innerWidth * state.value.width / 100),
+        height: Math.round(window.innerHeight * state.value.height / 100)
+      });
+      const style = pip.document.createElement("style");
+      style.innerHTML = `
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        iframe {
+          width: 100vw;
+          height: 100vh;
+          border: none;
+          outline: none;
+        }
+      `;
+      pip.__NUXT_DEVTOOLS_DISABLE__ = true;
+      pip.__NUXT_DEVTOOLS_IS_POPUP__ = true;
+      pip.document.title = "Nuxt DevTools";
+      pip.document.head.appendChild(style);
+      pip.document.body.appendChild(iframe2);
+      pip.addEventListener("resize", () => {
+        state.value.width = Math.round(pip.innerWidth / window.innerWidth * 100);
+        state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100);
+      });
+      pip.addEventListener("pagehide", () => {
+        popupWindow.value = null;
+        pip.close();
+      });
+    };
+  }
+  client.updateClient();
+  const holder = document.createElement("div");
+  holder.id = "nuxt-devtools-container";
+  holder.setAttribute("data-v-inspector-ignore", "true");
+  document.body.appendChild(holder);
+  addEventListener("keydown", (e) => {
+    if (e.code === "KeyD" && e.altKey && e.shiftKey)
+      client.close();
+  });
+  const app = createApp({
+    render: () => h(Main, { client }),
+    devtools: {
+      hide: true
+    }
+  });
+  app.mount(holder);
+}
 export function useClientColorMode() {
   const explicitColor = ref();
   const systemColor = ref();

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

@@ -2,8 +2,5 @@ import type { DevToolsFrameState } from '../../../types';
 export declare const PANEL_PADDING = 10;
 export declare const PANEL_MIN = 20;
 export declare const PANEL_MAX = 100;
+export declare const popupWindow: import("vue").ShallowRef<Window | null>;
 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,8 +1,9 @@
-import { ref, watch } from "vue";
+import { shallowRef } from "vue";
 import { useObjectStorage } from "./utils.mjs";
 export const PANEL_PADDING = 10;
 export const PANEL_MIN = 20;
 export const PANEL_MAX = 100;
+export const popupWindow = shallowRef(null);
 export const state = useObjectStorage("nuxt-devtools-frame-state", {
   width: 80,
   height: 60,
@@ -13,22 +14,3 @@ export const state = useObjectStorage("nuxt-devtools-frame-state", {
   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();
-  else
-    openPanel();
-}
-export function closePanel() {
-  state.value.open = false;
-}
-export function openPanel() {
-  state.value.open = true;
-}

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

@@ -3,3 +3,15 @@ export declare function useObjectStorage<T>(key: string, initial: T, readonly?:
 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];
+/**
+ * Reactive `env(safe-area-inset-*)`
+ *
+ * @see https://vueuse.org/useScreenSafeArea
+ */
+export declare function useScreenSafeArea(): {
+    top: Ref<number>;
+    right: Ref<number>;
+    bottom: Ref<number>;
+    left: Ref<number>;
+    update: () => void;
+};

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

@@ -48,3 +48,35 @@ export function millisecondToHumanreadable(ms) {
     return [+(ms / 1e3 / 60).toFixed(1), "min"];
   return [+(ms / 1e3 / 60 / 60).toFixed(1), "hour"];
 }
+const topVarName = "--nuxt-devtools-safe-area-top";
+const rightVarName = "--nuxt-devtools-safe-area-right";
+const bottomVarName = "--nuxt-devtools-safe-area-bottom";
+const leftVarName = "--nuxt-devtools-safe-area-left";
+export function useScreenSafeArea() {
+  const top = ref(0);
+  const right = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  document.documentElement.style.setProperty(topVarName, "env(safe-area-inset-top, 0px)");
+  document.documentElement.style.setProperty(rightVarName, "env(safe-area-inset-right, 0px)");
+  document.documentElement.style.setProperty(bottomVarName, "env(safe-area-inset-bottom, 0px)");
+  document.documentElement.style.setProperty(leftVarName, "env(safe-area-inset-left, 0px)");
+  update();
+  useEventListener(window, "resize", update);
+  function getValue(position) {
+    return Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue(position)) || 0;
+  }
+  function update() {
+    top.value = getValue(topVarName);
+    right.value = getValue(rightVarName);
+    bottom.value = getValue(bottomVarName);
+    left.value = getValue(leftVarName);
+  }
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    update
+  };
+}

package/dist/types.d.ts

@@ -1,5 +1,7 @@
+import './global-20ccb74c.js';
 import { ModuleStaticInfo } from '@nuxt/devtools-kit/types';
 export * from '@nuxt/devtools-kit/types';
+import 'vite-plugin-vue-inspector';
 
 interface DevToolsFrameState {
     width: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools",
   "type": "module",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -30,12 +30,12 @@
     "vite": "*"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.5.3",
+    "@nuxt/kit": "^3.6.0",
     "birpc": "^0.2.12",
     "boxen": "^7.1.0",
     "consola": "^3.1.0",
     "execa": "^7.1.1",
-    "fast-folder-size": "^2.0.0",
+    "fast-folder-size": "^2.1.0",
     "fast-glob": "^3.2.12",
     "get-port-please": "^3.0.1",
     "global-dirs": "^3.0.1",
@@ -53,16 +53,16 @@
     "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "rc9": "^2.1.1",
-    "semver": "^7.5.2",
+    "semver": "^7.5.3",
     "sirv": "^2.0.3",
     "unimport": "^3.0.8",
-    "vite-plugin-inspect": "^0.7.28",
+    "vite-plugin-inspect": "^0.7.29",
     "vite-plugin-vue-inspector": "^3.4.2",
     "wait-on": "^7.0.1",
     "which": "^3.0.1",
     "ws": "^8.13.0",
-    "@nuxt/devtools-kit": "0.6.2",
-    "@nuxt/devtools-wizard": "0.6.2"
+    "@nuxt/devtools-kit": "0.6.4",
+    "@nuxt/devtools-wizard": "0.6.4"
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.4",
@@ -70,17 +70,17 @@
     "@iconify-json/carbon": "^1.1.18",
     "@iconify-json/logos": "^1.1.33",
     "@iconify-json/ri": "^1.1.10",
-    "@iconify-json/simple-icons": "^1.1.57",
+    "@iconify-json/simple-icons": "^1.1.58",
     "@iconify-json/tabler": "^1.1.79",
     "@nuxt/content": "^2.7.0",
-    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/color-mode": "^3.3.0",
     "@parcel/watcher": "^2.1.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@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",
+    "@unocss/nuxt": "^0.53.4",
+    "@unocss/preset-icons": "^0.53.4",
+    "@unocss/preset-uno": "^0.53.4",
+    "@unocss/runtime": "^0.53.4",
     "@vueuse/nuxt": "^10.2.0",
     "esno": "^0.16.3",
     "flatted": "^3.2.7",
@@ -90,17 +90,17 @@
     "markdown-it": "^13.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "nanoid": "^4.0.2",
-    "nuxt": "^3.5.3",
+    "nuxt": "^3.6.0",
     "nuxt-vitest": "^0.8.5",
     "ofetch": "^1.1.1",
     "ohash": "^1.1.2",
-    "shiki": "^0.14.2",
+    "shiki": "^0.14.3",
     "shiki-es": "^0.2.0",
-    "simple-git": "^3.19.0",
+    "simple-git": "^3.19.1",
     "splitpanes": "^3.1.5",
     "theme-vitesse": "^0.7.2",
     "ua-parser-js": "^1.0.35",
-    "unocss": "^0.53.1",
+    "unocss": "^0.53.4",
     "vanilla-jsoneditor": "^0.17.8",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6",
@@ -109,7 +109,7 @@
     "vue-virtual-scroller": "2.0.0-beta.8",
     "xterm": "^5.2.1",
     "xterm-addon-fit": "^0.7.0",
-    "@nuxt/devtools": "0.6.2"
+    "@nuxt/devtools": "0.6.4"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client && esno scripts/prepare.ts",

package/dist/client/_nuxt/AuthRequiredPanel.vue.4f66b5dd.js

@@ -1 +0,0 @@
-import{a as b,a3 as x,an as n,bd as _,y as l,r as m,u as c,c as g,w as d,Z as w,o as A,f as s,b as e,j as i,H as N,aO as T,aV as V,be as q,h as B,J as C,a6 as D}from"./entry.f3de3eb8.js";import{_ as P}from"./NIconButton.vue.e211c1b6.js";import{_ as $}from"./NPanelGrids.fc7166ff.js";const I=e("h3",{class:"mb2 text-lg font-medium leading-6",flex:"~ items-center gap-1","text-orange":""},[e("span",{class:"i-carbon-information-square"}),i(" Permissions required ")],-1),K=e("p",null," This operation requires permissions for running command and access files from the browser. ",-1),S=e("p",null,[i(" A request is sent to the server."),e("br"),i(" Please check your terminal for the instructions and then come back. ")],-1),j={flex:"~ gap-3",mt2:"","justify-end":""},F=e("p",null,"Or you can manually paste the token here:",-1),M=["onSubmit"],G=b({__name:"AuthRequiredPanel",setup(O){x(async()=>{n.value||_.value&&await l.verifyAuthToken(_.value)&&(n.value=!0),n.value||l.requestForAuth()});const o=m(""),r=m(!1);async function u(){const t=o.value.trim();r.value=!1,await l.verifyAuthToken(t).then(a=>{a?(n.value=!0,q(t)):r.value=!0})}return(t,a)=>{const f=B,p=C,h=P,v=D,k=$;return("isDevAuthed"in t?t.isDevAuthed:c(n))?w(t.$slots,"default",{key:1}):(A(),g(k,{key:0},{default:d(()=>[s(v,{flex:"~ col gap-2",mxa:"","items-center":"",p6:"","text-center":""},{default:d(()=>[I,K,S,e("div",j,[s(f,{disabled:"",icon:"i-carbon-time"},{default:d(()=>[i(" Waiting for authorization... ")]),_:1})]),F,e("form",{flex:"~ inline gap-2 items-center",onSubmit:V(u,["prevent"])},[s(p,{modelValue:c(o),"onUpdate:modelValue":a[0]||(a[0]=y=>N(o)?o.value=y:null),placeholder:"Enter token here",n:c(r)?"red":void 0,onKeydown:T(u,["enter"])},null,8,["modelValue","n","onKeydown"]),s(h,{icon:"i-carbon-arrow-right",onClick:u})],40,M)]),_:1})]),_:1}))}}});export{G as _};

package/dist/client/_nuxt/Badge.2cc4687e.js

@@ -1 +0,0 @@
-import{aY as n,o,e as s,Z as t}from"./entry.f3de3eb8.js";const c={},r={class:"mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs"};function a(e,_){return o(),s("span",r,[t(e.$slots,"default")])}const l=n(c,[["render",a]]);export{l as _};

package/dist/client/_nuxt/CodeSnippets.vue.1e158b8f.js

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

package/dist/client/_nuxt/DrawerRight.vue.d80827fd.js

@@ -1 +0,0 @@
-import{_ as i}from"./NIconButton.vue.e211c1b6.js";import{a as u,r as f,ac as m,ad as d,c as p,w as _,ae as b,o as s,e as v,f as g,b as h,Z as x,af as y,u as k,q as B}from"./entry.f3de3eb8.js";const C={relative:"","h-full":"","w-full":"","of-auto":""},V={inheritAttrs:!1},N=u({...V,__name:"DrawerRight",props:{modelValue:{type:Boolean},navbar:{},autoClose:{type:Boolean}},emits:["close"],setup(r,{emit:l}){const t=r,o=f(),{height:n}=m(()=>t.navbar,void 0,{box:"border-box"});return d(o,()=>{t.modelValue&&t.autoClose&&l("close")},{ignore:["a","button","summary"]}),(e,a)=>{const c=i;return s(),p(b,{"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:_(()=>[e.modelValue?(s(),v("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`}},e.$attrs),[g(c,{absolute:"","right-2":"","top-2":"","z-20":"","text-xl":"",icon:"carbon-close",onClick:a[0]||(a[0]=$=>e.$emit("close"))}),h("div",C,[x(e.$slots,"default")])],16)):B("",!0)]),_:3})}}});export{N as _};

package/dist/client/_nuxt/DurationDisplay.vue.a48b74dd.js

@@ -1 +0,0 @@
-import{a as n,o as s,e as i,j as u,t as f,p,b as c}from"./entry.f3de3eb8.js";const m=c("span",{"ml-1":"","text-xs":"",op50:""},"ms",-1),l=n({__name:"DurationDisplay",props:{duration:{},factor:{default:1}},setup(r){const e=r;function o(t){return t?(t=t*e.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 a(t){return t?t<1?"<1":t.toFixed(2):"-"}return(t,d)=>(s(),i("div",{class:p(o(t.duration))},[u(f(a(t.duration)),1),m],2))}});export{l as _};

package/dist/client/_nuxt/FilepathItem.vue.df9b46ef.js

@@ -1 +0,0 @@
-import{u as h}from"./editor.24e006dd.js";import{a as f,U as c,l as k,at as v,o as t,c as y,w as B,e as s,F as l,j as m,t as n,u as a,b as C,q as b,p as N,ab as g}from"./entry.f3de3eb8.js";const w={key:0,op50:""},I=f({__name:"FilepathItem",props:{filepath:{},lineBreak:{type:Boolean},subpath:{type:Boolean},override:{}},setup(u){const r=u,d=h(),p=c(),o=k(()=>r.filepath&&p.value?v(r.filepath,p.value.rootDir):{path:r.filepath||""});return(e,i)=>(t(),y(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:i[0]||(i[0]=D=>e.filepath&&a(d)(e.filepath))},{default:B(()=>[e.override?(t(),s(l,{key:0},[m(n(e.override),1)],64)):a(o).moduleName?(t(),s(l,{key:1},[C("span",null,n(a(o).moduleName),1),e.subpath?(t(),s("span",w,n(a(o).path.slice(a(o).moduleName.length)),1)):b("",!0)],64)):(t(),s(l,{key:2},[m(n(a(o).path),1)],64))]),_:1},8,["class","title"]))}});export{I as _};

package/dist/client/_nuxt/HelpFab.vue.49173e4b.js

@@ -1 +0,0 @@
-import{_ as f}from"./NIconButton.vue.e211c1b6.js";import{a as _,r as m,u as o,e as s,b as d,f as a,w as i,ae as u,F as v,q as n,o as l,Z as g,a5 as k}from"./entry.f3de3eb8.js";const x=d("div",{"i-ri:question-mark":""},null,-1),h=[x],y={key:0,border:"l base",class:"prose",pos:"fixed bottom-0 right-0 top-0","z-200":"","w-150":"",px8:"",py4:"","bg-base":""},$=_({__name:"HelpFab",setup(w){const e=m(!1),{showHelpButtons:p}=k();return(b,t)=>{const c=f;return o(p)?(l(),s(v,{key:0},[d("button",{pos:"absolute bottom-5 right-5",border:"~ base rounded-full ",flex:"~ items-center justify-center","z-110":"","h-11":"","w-11":"","backdrop-blur-8":"",bg:"bg-base op50!","light:shadow":"",hover:"bg-active",title:"Help",onClick:t[0]||(t[0]=r=>e.value=!o(e))},h),a(u,{name:"fade-in"},{default:i(()=>[o(e)?(l(),s("div",{key:0,class:"fixed bottom-0 left-0 right-0 top-0 z-100","bg-black:20":"","backdrop-blur-2":"",onClick:t[1]||(t[1]=r=>e.value=!1)})):n("",!0)]),_:1}),a(u,{name:"slide-in"},{default:i(()=>[o(e)?(l(),s("div",y,[g(b.$slots,"default"),a(c,{icon:"carbon-close",pos:"absolute top-3 right-3","rounded-full":"","text-xl":"",onClick:t[2]||(t[2]=r=>e.value=!1)})])):n("",!0)]),_:3})],64)):n("",!0)}}});export{$ as _};

package/dist/client/_nuxt/NCheckbox.vue.df53e265.js

@@ -1 +0,0 @@
-import{a as i,ar as r,e as p,v as b,bj as u,u as a,b as n,H as h,aO as k,f,Z as m,p as v,o as _,P as x}from"./entry.f3de3eb8.js";const V=["checked","disabled"],y=["disabled"],B={class:"n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition"},$=i({__name:"NCheckbox",props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(c,{emit:t}){const e=r(c,"modelValue",t,{passive:!0});return(o,s)=>{const d=x;return _(),p("label",{class:"n-checkbox hover:n-checkbox-hover select-none items-center n-disabled:n-disabled",checked:a(e)||null,disabled:o.disabled||null},[b(n("input",{"onUpdate:modelValue":s[0]||(s[0]=l=>h(e)?e.value=l:null),type:"checkbox",class:"peer absolute op0",disabled:o.disabled,onKeypress:s[1]||(s[1]=k(l=>e.value=!a(e),["enter"]))},null,40,y),[[u,a(e)]]),n("span",B,[f(d,{class:"n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100"})]),n("span",{class:v([a(e)?"":"op50","n-transition"])},[m(o.$slots,"default")],2)],8,V)}}});export{$ as _};