chore: update

webfansplz · webfansplz · commit 96fbf0bbd6a1 · 2026-01-28T22:40:06.000+08:00
diff --git a/alias.ts b/alias.ts
@@ -23,6 +23,7 @@ export const alias = {
   '@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
   '@vitejs/devtools-ui/components': r('ui/src/components'),
   '@vitejs/devtools-ui/composables': r('ui/src/composables'),
+  '@vitejs/devtools-ui/utils': r('ui/src/utils'),
 }
 
 // update tsconfig.base.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0-alpha.26",
   "private": true,
-  "packageManager": "pnpm@10.28.1",
+  "packageManager": "pnpm@10.28.2",
   "scripts": {
     "build": "turbo run build",
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",
diff --git a/packages/rolldown/src/app/components/assets/BaseInfo.vue b/packages/rolldown/src/app/components/assets/BaseInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   asset: RolldownAssetInfo
diff --git a/packages/rolldown/src/app/components/assets/List.vue b/packages/rolldown/src/app/components/assets/List.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 defineProps<{
   assets: RolldownAssetInfo[]
diff --git a/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue b/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue
@@ -7,6 +7,7 @@ import type {
   RolldownResolveInfo,
   SessionContext,
 } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
 import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { normalizeTimestamp } from '~/utils/format'
diff --git a/packages/rolldown/src/app/components/chunks/BaseInfo.vue b/packages/rolldown/src/app/components/chunks/BaseInfo.vue
@@ -2,6 +2,7 @@
 import type { RolldownChunkImport, RolldownChunkInfo } from '~~/shared/types/data'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
diff --git a/packages/rolldown/src/app/components/chunks/FlatList.vue b/packages/rolldown/src/app/components/chunks/FlatList.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 withDefaults(defineProps<{
   chunks: Array<RolldownChunkInfo & { id: string }>
diff --git a/packages/rolldown/src/app/components/chunks/Graph.vue b/packages/rolldown/src/app/components/chunks/Graph.vue
@@ -3,6 +3,7 @@ import type { ChunkImport } from '@rolldown/debug'
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import { useRoute } from '#app/composables/router'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed, nextTick, unref } from 'vue'
 import { createModuleGraph } from '~/composables/module-graph'
 
diff --git a/packages/rolldown/src/app/components/chunks/Imports.vue b/packages/rolldown/src/app/components/chunks/Imports.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { RolldownChunkImport } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   imports: RolldownChunkImport[]
diff --git a/packages/rolldown/src/app/components/data/AssetDetails.vue b/packages/rolldown/src/app/components/data/AssetDetails.vue
@@ -2,6 +2,9 @@
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue b/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/data/ChunkDetails.vue b/packages/rolldown/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 DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
diff --git a/packages/rolldown/src/app/components/data/ChunkDetailsLoader.vue b/packages/rolldown/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 DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/data/ModuleDetailsLoader.vue b/packages/rolldown/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 DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { computedAsync } from '@vueuse/core'
 import { nextTick, ref, watchEffect } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue b/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
diff --git a/packages/rolldown/src/app/components/data/PathSelector.vue b/packages/rolldown/src/app/components/data/PathSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts"  generic="T extends { id:string, imports: Record<string, unknown>[] }">
 import type { SessionContext } from '~~/shared/types'
 import type { GraphPathSelector } from '~/composables/graph-path-selector'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import { computed, watch } from 'vue'
 import { useGraphPathSelector } from '~/composables/graph-path-selector'
 
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue b/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
@@ -4,13 +4,17 @@ 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 DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
 import { computed, reactive, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
 import { useChartGraph } from '~/composables/chart'
 import { parseReadablePath } from '~/utils/filepath'
-import { formatDuration, normalizeTimestamp } from '~/utils/format'
+import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsTable.vue b/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
 import type { FilterMatchRule } from '~/utils/icon'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { useCycleList } from '@vueuse/core'
 import { Menu as VMenu } from 'floating-vue'
 import { computed, ref } from 'vue'
diff --git a/packages/rolldown/src/app/components/data/RawEventsTable.vue b/packages/rolldown/src/app/components/data/RawEventsTable.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { RolldownEvent } from '~~/node/rolldown/events-manager'
 import type { SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { Dropdown as VDropdown } from 'floating-vue'
 
 type FIELDS = 'module_id' | 'action' | 'content' | 'timestamp' | 'event_id' | 'plugin_name' | '*'
diff --git a/packages/rolldown/src/app/components/display/ClusterBadge.vue b/packages/rolldown/src/app/components/display/ClusterBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { getHashColorFromString } from '@vitejs/devtools-ui/utils/color'
 import { Tooltip } from 'floating-vue'
 import { computed } from 'vue'
-import { getHashColorFromString } from '~/utils/color'
 
 const props = defineProps<{
   cluster: string
diff --git a/packages/rolldown/src/app/components/display/ExpandableContainer.vue b/packages/rolldown/src/app/components/display/ExpandableContainer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T">
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/display/ModuleId.vue b/packages/rolldown/src/app/components/display/ModuleId.vue
@@ -3,6 +3,7 @@ import type { ModuleImport } from '@rolldown/debug'
 import type { SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { Tooltip } from 'floating-vue'
 import { relative } from 'pathe'
 import { computed } from 'vue'
diff --git a/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
 import { computed } from 'vue'
 import { settings } from '~~/app/state/settings'
 import PluginName from '../display/PluginName.vue'
diff --git a/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownAssetInfo
diff --git a/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 
 defineProps<{
   item: RolldownChunkInfo
diff --git a/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '~/state/flowmap'
 
diff --git a/packages/rolldown/src/app/components/flowmap/NodePluginInfo.vue b/packages/rolldown/src/app/components/flowmap/NodePluginInfo.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { formatDuration } from '~/utils/format'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 
 defineProps<{
   modules: number
diff --git a/packages/rolldown/src/app/components/flowmap/PluginFlow.vue b/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ClientSettings } from '~~/app/state/settings'
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { useCycleList, useToggle } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/rolldown/src/app/components/modules/BuildMetrics.vue b/packages/rolldown/src/app/components/modules/BuildMetrics.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { ModuleBuildMetrics } from '~~/shared/types'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { computed } from 'vue'
-import { formatDuration } from '~/utils/format'
 
 const props = defineProps<{
   metrics: ModuleBuildMetrics
diff --git a/packages/rolldown/src/app/components/modules/DetailedList.vue b/packages/rolldown/src/app/components/modules/DetailedList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/modules/FlatList.vue b/packages/rolldown/src/app/components/modules/FlatList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 withDefaults(defineProps<{
   session: SessionContext
diff --git a/packages/rolldown/src/app/components/packages/Importers.vue b/packages/rolldown/src/app/components/packages/Importers.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types/data'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/packages/rolldown/src/app/components/packages/Table.vue b/packages/rolldown/src/app/components/packages/Table.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PackageInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import { useCycleList } from '@vueuse/core'
 import { Tooltip, Menu as VMenu } from 'floating-vue'
 import { settings } from '~~/app/state/settings'
diff --git a/packages/rolldown/src/app/components/panel/SessionSelector.vue b/packages/rolldown/src/app/components/panel/SessionSelector.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import { NuxtLink } from '#components'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
 import { computed } from 'vue'
 import { parseReadablePath } from '~/utils/filepath'
 
diff --git a/packages/rolldown/src/app/components/plugins/FlatList.vue b/packages/rolldown/src/app/components/plugins/FlatList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PluginItem } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
 defineProps<{
   plugins: PluginItem[]
diff --git a/packages/rolldown/src/app/components/plugins/Sunburst.vue b/packages/rolldown/src/app/components/plugins/Sunburst.vue
@@ -2,6 +2,7 @@
 import type { GraphBase, GraphBaseOptions } from 'nanovis'
 import type { SessionContext } from '~~/shared/types'
 import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { colorToCssBackground } from 'nanovis'
 import { useTemplateRef, watchEffect } from 'vue'
 
diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/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 DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'
diff --git a/packages/rolldown/src/app/pages/session/[session]/index.vue b/packages/rolldown/src/app/pages/session/[session]/index.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { computed } from 'vue'
 import { sideNavItems } from '~~/app/state/nav'
 
diff --git a/packages/rolldown/src/app/utils/__tests__/color.test.ts b/packages/rolldown/src/app/utils/__tests__/color.test.ts
@@ -1,39 +1,6 @@
-import { isDark } from '@vitejs/devtools-ui/composables/dark'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { getHashColorFromString, getHsla, getPluginColor, predefinedColorMap } from '../color'
-
-describe('getHashColorFromString', () => {
-  it('should get the same color with the same string', () => {
-    expect(getHashColorFromString('Vite')).toBe(getHashColorFromString('Vite'))
-  })
-  it('should get different colors with different strings', () => {
-    expect(getHashColorFromString('Vite')).not.toBe(getHashColorFromString('DevTools'))
-  })
-})
-
-describe('getHsla', () => {
-  beforeEach(() => {
-    isDark.value = false
-  })
-
-  it('light mode with default opacity', () => {
-    expect(getHsla(180)).toBe('hsla(180, 65%, 40%, 1)')
-  })
-
-  it('light mode with custom opacity', () => {
-    expect(getHsla(180, 0.5)).toBe('hsla(180, 65%, 40%, 0.5)')
-  })
-
-  it('dark mode with default opacity', () => {
-    isDark.value = true
-    expect(getHsla(180)).toBe('hsla(180, 50%, 60%, 1)')
-  })
-
-  it('dark mode with custom opacity', () => {
-    isDark.value = true
-    expect(getHsla(180, 0.8)).toBe('hsla(180, 50%, 60%, 0.8)')
-  })
-})
+import { getHashColorFromString, getHsla } from '@vitejs/devtools-ui/utils/color'
+import { describe, expect, it } from 'vitest'
+import { getPluginColor, predefinedColorMap } from '../color'
 
 describe('getPluginColor', () => {
   it('should use predefinedColorMap with known name', () => {
diff --git a/packages/rolldown/src/app/utils/color.ts b/packages/rolldown/src/app/utils/color.ts
@@ -1,24 +1,4 @@
-import { isDark } from '@vitejs/devtools-ui/composables/dark'
-
-export function getHashColorFromString(
-  name: string,
-  opacity: number | string = 1,
-) {
-  let hash = 0
-  for (let i = 0; i < name.length; i++)
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  const h = hash % 360
-  return getHsla(h, opacity)
-}
-
-export function getHsla(
-  hue: number,
-  opacity: number | string = 1,
-) {
-  const saturation = isDark.value ? 50 : 65
-  const lightness = isDark.value ? 60 : 40
-  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
-}
+import { getHashColorFromString, getHsla } from '@vitejs/devtools-ui/utils/color'
 
 /**
  * Predefined color map for matching the branding
diff --git a/packages/rolldown/src/app/utils/format.ts b/packages/rolldown/src/app/utils/format.ts
diff --git a/packages/ui/package.json b/packages/ui/package.json
diff --git a/packages/ui/src/components/DataVirtualList.vue b/packages/ui/src/components/DataVirtualList.vue
diff --git a/packages/ui/src/components/DisplayBadge.vue b/packages/ui/src/components/DisplayBadge.vue
diff --git a/packages/ui/src/components/DisplayCloseButton.vue b/packages/ui/src/components/DisplayCloseButton.vue
diff --git a/packages/ui/src/components/DisplayDuration.vue b/packages/ui/src/components/DisplayDuration.vue
diff --git a/packages/ui/src/components/DisplayIconButton.vue b/packages/ui/src/components/DisplayIconButton.vue
diff --git a/packages/ui/src/components/DisplayNumberBadge.vue b/packages/ui/src/components/DisplayNumberBadge.vue
diff --git a/packages/ui/src/components/DisplayNumberWithUnit.vue b/packages/ui/src/components/DisplayNumberWithUnit.vue
diff --git a/packages/ui/src/components/DisplayTimestamp.vue b/packages/ui/src/components/DisplayTimestamp.vue
diff --git a/packages/ui/src/utils/__tests__/color.test.ts b/packages/ui/src/utils/__tests__/color.test.ts
diff --git a/packages/ui/src/utils/color.ts b/packages/ui/src/utils/color.ts
diff --git a/packages/ui/src/utils/format.ts b/packages/ui/src/utils/format.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export const alias = {`
`23`	`23`	`'@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),`
`24`	`24`	`'@vitejs/devtools-ui/components': r('ui/src/components'),`
`25`	`25`	`'@vitejs/devtools-ui/composables': r('ui/src/composables'),`
	`26`	`+ '@vitejs/devtools-ui/utils': r('ui/src/utils'),`
`26`	`27`	`}`
`27`	`28`
`28`	`29`	`// update tsconfig.base.json`