feat: basic ui package setup

alias.ts

@@ -20,6 +20,8 @@ export const alias = {
   '@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
   '@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
   '@vitejs/devtools': r('core/src/index.ts'),
+  '@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
+  '@vitejs/devtools-ui/components': r('ui/src/components'),
 }
 
 // update tsconfig.base.json

packages/ui/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@vitejs/devtools-ui",
+  "type": "module",
+  "version": "0.0.0-alpha.26",
+  "private": true,
+  "description": "DevTools UI for Vite (work in progress)",
+  "author": "VoidZero Inc.",
+  "license": "MIT",
+  "homepage": "https://github.com/vitejs/devtools#readme",
+  "repository": {
+    "directory": "packages/ui",
+    "type": "git",
+    "url": "git+https://github.com/vitejs/devtools.git"
+  },
+  "bugs": "https://github.com/vitejs/devtools/issues",
+  "keywords": [
+    "vite",
+    "devtools",
+    "devtools ui"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./unocss": {
+      "types": "./src/unocss/index.ts",
+      "import": "./src/unocss/index.ts"
+    },
+    "./components/*": {
+      "types": "./src/components/*.vue",
+      "import": "./src/components/*.vue"
+    }
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts"
+}

packages/vite/src/app/components/visual/Loading.vue → packages/ui/src/components/VisualLoading.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import VisualLogoBanner from './VisualLogoBanner.vue'
+
 const props = defineProps<{
   text?: string
 }>()

packages/vite/src/app/components/visual/LogoBanner.vue → packages/ui/src/components/VisualLogoBanner.vue

@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+import VisualLogo from './VisualLogo.vue'
+</script>
+
 <template>
   <div class="flex gap-2 group" p8 relative>
     <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#61d9ff] to-transparent blur-[30px]" />

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './unocss'

packages/ui/src/unocss/index.ts

@@ -0,0 +1,50 @@
+import type { WebFontsOptions } from '@unocss/preset-web-fonts'
+import type { Theme } from '@unocss/preset-wind4'
+import {
+  definePreset,
+  mergeDeep,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { shortcuts } from './shortcuts'
+import { theme } from './theme'
+
+export interface PresetDevToolsUIOptions {
+  webFonts?: WebFontsOptions
+}
+
+export const presetDevToolsUI = definePreset<PresetDevToolsUIOptions, Theme>((options) => {
+  return {
+    name: '@vitejs/devtools-ui/preset',
+    shortcuts,
+    extendTheme(defaultTheme) {
+      return mergeDeep(defaultTheme, theme)
+    },
+    presets: [
+      presetWind4(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+      }),
+      presetTypography(),
+      presetWebFonts(mergeDeep(
+        {
+          fonts: {
+            sans: 'DM Sans:200,400,700',
+            mono: 'DM Mono',
+          },
+        },
+        options?.webFonts ?? {},
+      )),
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+  }
+})

packages/ui/src/unocss/shortcuts.ts

@@ -0,0 +1,62 @@
+import type { UserShortcuts } from '@unocss/core'
+import type { Theme } from '@unocss/preset-wind4'
+
+export const shortcuts: UserShortcuts<Theme> = [
+  {
+    'color-base': 'color-neutral-800 dark:color-neutral-300',
+    'bg-base': 'bg-white dark:bg-#111',
+    'bg-secondary': 'bg-#eee dark:bg-#222',
+    'border-base': 'border-#8884',
+
+    'border-flow': 'border-#8885',
+    'border-flow-line': 'border-#ccc dark:border-#222',
+    'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
+    'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
+
+    'fg-flow-line': 'color-#ccc dark:color-#222',
+    'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
+
+    'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
+    'bg-code': 'bg-gray-500:5',
+
+    'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
+
+    'color-active': 'color-primary-600 dark:color-primary-300',
+    'border-active': 'border-primary-600/25 dark:border-primary-400/25',
+    'bg-active': 'bg-#8881',
+
+    'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
+    'btn-action-sm': 'btn-action text-sm',
+    'btn-action-active': 'color-active border-active! bg-active op100!',
+
+    'icon-catppuccin': 'light:filter-invert-100 light:filter-hue-rotate-180 light:filter-brightness-80',
+
+    'z-flowmap-line': 'z--1',
+    'z-graph-bg': 'z-5',
+    'z-graph-link': 'z-10',
+    'z-graph-node': 'z-11',
+    'z-graph-link-active': 'z-12',
+    'z-graph-node-active': 'z-13',
+
+    'z-panel-no-mobile': 'z-55',
+    'z-panel-nav': 'z-60',
+    'z-panel-content': 'z-65',
+    'z-panel-goto': 'z-70',
+    'z-panel-terminal': 'z-80',
+
+    'op-fade': 'op65 dark:op55',
+    'op-mute': 'op30 dark:op25',
+    'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
+
+    'color-scale-neutral': 'text-gray-700:75 dark:text-gray-300:75!',
+    'color-scale-low': 'text-lime-700:75 dark:text-lime-300:75! dark:saturate-50',
+    'color-scale-medium': 'text-amber-700:85 dark:text-amber-300:85! dark:saturate-80',
+    'color-scale-high': 'text-orange-700:95 dark:text-orange-300:95!',
+    'color-scale-critical': 'text-red-700:95 dark:text-red-300:95!',
+
+    'page-padding': 'pt-24 pl-112 pr-8 pb-8',
+    'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
+  },
+  [/^badge-color-(\w+)$/, ([, color]) => `bg-${color}-400:20 dark:bg-${color}-400:10 text-${color}-700 dark:text-${color}-300 border-${color}-600:10 dark:border-${color}-300:10`],
+  [/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
+]

packages/ui/src/unocss/theme.ts

@@ -0,0 +1,20 @@
+import type { Theme } from '@unocss/preset-wind4'
+
+export const theme: Theme = {
+  colors: {
+    primary: {
+      50: '#fcf4ff',
+      100: '#f7e5ff',
+      200: '#f0d0ff',
+      300: '#e5acff',
+      400: '#d577ff',
+      DEFAULT: '#d577ff',
+      500: '#c543ff',
+      600: '#bd34fe',
+      700: '#9f0fe1',
+      800: '#8512b7',
+      900: '#6d1093',
+      950: '#4d006e',
+    },
+  },
+}

packages/vite/package.json

@@ -39,6 +39,7 @@
     "@rolldown/debug": "catalog:deps",
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
+    "@vitejs/devtools-ui": "workspace:*",
     "ansis": "catalog:deps",
     "birpc": "catalog:deps",
     "cac": "catalog:deps",

packages/vite/src/app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
 
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { connect, connectionState } from './composables/rpc'
 import 'floating-vue/dist/style.css'
 import './styles/cm.css'

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 

packages/vite/src/app/components/data/ChunkDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{

packages/vite/src/app/components/data/ModuleDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'
 import { settings } from '~~/app/state/settings'

packages/vite/src/app/components/data/PackageDetailsLoader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 

packages/vite/src/app/components/data/PluginDetailsLoader.vue

@@ -4,6 +4,7 @@ import type { PluginBuildInfo, SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
 import { computed, reactive, watch } from 'vue'

packages/vite/src/app/pages/compare/[sessions]/index.vue

@@ -2,6 +2,7 @@
 import type { SessionCompareContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computed, onMounted, ref } from 'vue'
 
 const isLoading = ref(false)

packages/vite/src/app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import { useRpc } from '#imports'
+import VisualLogoBanner from '@vitejs/devtools-ui/components/VisualLogoBanner.vue'
 import { computed, ref } from 'vue'
 
 const sessionMode = ref<'list' | 'compare'>('list')

packages/vite/src/app/pages/session/[session].vue

@@ -2,6 +2,7 @@
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { onKeyDown } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
 import { useSideNav } from '~/state/nav'

packages/vite/src/app/pages/session/[session]/assets.vue

@@ -4,6 +4,7 @@ import type { ClientSettings } from '~/state/settings'
 import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'

packages/vite/src/app/pages/session/[session]/chunks.vue

@@ -3,6 +3,7 @@ import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'

packages/vite/src/app/pages/session/[session]/packages.vue

@@ -4,6 +4,7 @@ import type { ClientSettings } from '~/state/settings'
 import type { PackageChartInfo, PackageChartNode } from '~/types/chart'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Treemap } from 'nanovis'

packages/vite/src/app/pages/session/[session]/raw.vue

@@ -2,6 +2,7 @@
 import type { SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import VisualLoading from '@vitejs/devtools-ui/components/VisualLoading.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{