feat(hub-ui): adopt @antfu/design components and devframe branding

packages/hub-ui/package.json

@@ -44,6 +44,7 @@
     "devframe": "workspace:*"
   },
   "devDependencies": {
+    "@antfu/design": "catalog:frontend",
     "@devframes/hub": "workspace:*",
     "@iconify-json/ph": "catalog:frontend",
     "@json-render/core": "catalog:deps",

packages/hub-ui/scripts/build-css.ts

@@ -28,10 +28,22 @@ export async function buildCSS(): Promise<void> {
     ignore: IGNORE,
   })
 
+  // The dock reuses `@antfu/design`'s Vue components (buttons, badges, …)
+  // directly. UnoCSS ignores `node_modules` by default, so their semantic
+  // shortcut classes (`btn-primary`, `btn-action`, `badge-*`, …) would be
+  // absent from the shadow-root stylesheet — scan the design package's
+  // component sources too so those classes ship in the injected CSS.
+  const designComponentsDir = join(require.resolve('@antfu/design/package.json'), '..', 'components')
+  const designFiles = await glob('**/*.vue', {
+    cwd: designComponentsDir,
+    absolute: true,
+    ignore: IGNORE,
+  })
+
   const generator = await createGenerator(config)
 
   const tokens = new Set<string>()
-  for (const file of files) {
+  for (const file of [...files, ...designFiles]) {
     const content = await fs.readFile(file, 'utf-8')
     await generator.applyExtractors(content, file, tokens)
   }

packages/hub-ui/src/client/components/command-palette/CommandPaletteItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevframeCommandEntry, DevframeCommandKeybinding } from '@devframes/hub'
+import DisplayKbd from '@antfu/design/components/Display/DisplayKbd.vue'
 import DockIcon from '../dock/DockIcon.vue'
-import KeybindingBadge from './KeybindingBadge.vue'
 
 defineProps<{
   entry: DevframeCommandEntry
@@ -53,10 +53,10 @@ defineEmits<{
       </div>
       <div class="flex items-center gap-1.5 flex-none">
         <!-- Keybinding badges -->
-        <KeybindingBadge
+        <DisplayKbd
           v-for="(kb, ki) in keybindings"
           :key="ki"
-          :key-string="kb.key"
+          :keys="kb.key"
         />
         <!-- Loading indicator -->
         <span v-if="loading" class="i-ph-spinner-gap-duotone w-3.5 h-3.5 animate-spin op50" />

packages/hub-ui/src/client/components/display/Confirm.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { useTemplateRef, watchPostEffect } from 'vue'
 import { ConfirmPromise } from '../../state/confirm'
-import Button from './Button.vue'
 
-const confirmButton = useTemplateRef<InstanceType<typeof Button>>('confirmButton')
+const confirmButton = useTemplateRef<InstanceType<typeof ActionButton>>('confirmButton')
 
 watchPostEffect(() => {
-  confirmButton.value?.focus({ preventScroll: true })
+  (confirmButton.value?.$el as HTMLElement | undefined)?.focus({ preventScroll: true })
 })
 
 function resolveConfirm(resolve: (value: boolean) => void, value: boolean) {
@@ -43,12 +43,12 @@ function resolveConfirm(resolve: (value: boolean) => void, value: boolean) {
         </p>
 
         <div class="flex items-center justify-end gap-2 mt-6">
-          <Button variant="ghost" size="sm" @click="resolveConfirm(resolve, false)">
+          <ActionButton variant="text" size="sm" @click="resolveConfirm(resolve, false)">
             {{ options.cancelText ?? 'Cancel' }}
-          </Button>
-          <Button ref="confirmButton" variant="soft" size="sm" @click="resolveConfirm(resolve, true)">
+          </ActionButton>
+          <ActionButton ref="confirmButton" variant="primary" size="sm" @click="resolveConfirm(resolve, true)">
             {{ options.confirmText ?? 'OK' }}
-          </Button>
+          </ActionButton>
         </div>
       </div>
     </div>

packages/hub-ui/src/client/components/dock/Dock.vue

@@ -8,8 +8,6 @@ import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../../constants'
 import { docksSplitGroupsWithCapacity } from '../../state/dock-settings'
 import { setDocksOverflowPanel } from '../../state/floating-tooltip'
 import { useIsRpcTrusted } from '../../utils/useIsRpcTrusted'
-import BracketLeft from '../icons/BracketLeft.vue'
-import BracketRight from '../icons/BracketRight.vue'
 import BrandMark from '../icons/BrandMark.vue'
 import {
   dockLayoutCssVars,
@@ -262,13 +260,6 @@ onMounted(() => {
         id="devframes-dock"
         @pointerdown="onPointerDown"
       >
-        <BracketLeft
-          class="devframes-dock-bracket absolute left--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300"
-        />
-        <BracketRight
-          class="devframes-dock-bracket absolute right--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300"
-          :class="context.panel.isVertical ? 'scale-y--100' : ''"
-        />
         <div
           class="w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300"
           :class="[

packages/hub-ui/src/client/components/icons/BrandMark.vue

@@ -1,7 +1,10 @@
+<script setup lang="ts">
+import DevframeLogo from './DevframeLogo.vue'
+</script>
+
 <template>
-  <!-- The Devframes brand mark — sized by the caller's classes, colored with
-       the design system's primary. -->
-  <div class="flex items-center justify-center text-primary">
-    <div class="i-ph:plug-duotone" style="width: 100%; height: 100%" />
+  <!-- The devframe brand mark — sized by the caller's classes. -->
+  <div class="flex items-center justify-center">
+    <DevframeLogo class="w-full h-full" />
   </div>
 </template>

packages/hub-ui/src/client/components/icons/BrandWordmark.vue

@@ -1,8 +1,12 @@
+<script setup lang="ts">
+import DevframeLogo from './DevframeLogo.vue'
+</script>
+
 <template>
-  <!-- The Devframes wordmark — a decorative brand flourish (e.g. peeking
-       above the command palette), recolors with the theme. -->
-  <div class="flex items-center gap-1.5 text-primary select-none" aria-hidden="true">
-    <div class="i-ph:plug-duotone w-6 h-6 flex-none" />
-    <span class="text-xl font-bold tracking-tight">Devframes</span>
+  <!-- The devframe wordmark — a decorative brand flourish (e.g. peeking
+       above the command palette). -->
+  <div class="flex items-center gap-1.5 select-none" aria-hidden="true">
+    <DevframeLogo class="w-6 h-6 flex-none" />
+    <span class="text-xl font-bold tracking-tight color-base">Devframes</span>
   </div>
 </template>