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

Reuse the shared design system's Vue components in the dock shell instead
of bespoke local ones, swap the placeholder plug glyph for the devframe
logo, and drop the Vite-derived dock chrome.

- Buttons across the launcher, confirm modal, auth notice and json-render
  now use @antfu/design's ActionButton; keybinding chips use DisplayKbd.
- The shadow-root stylesheet build scans the design package's components
  so their semantic shortcut classes ship in the injected CSS.
- BrandMark/BrandWordmark render the devframe logo mark.
- Remove the dock brackets and re-theme the dock glow to the sage palette.

Created with the help of an agent.

Author: antfubot

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/.generated/css.ts

@@ -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/command-palette/CommandPaletteItem.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/command-palette/KeybindingBadge.stories.ts

@@ -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="[