Port feature from vitejs/devtools#528: color a dock-bar entry's badge via badgeVariant

[antfubot]

Context

vitejs/devtools#528 ("color a dock-bar entry's badge via a new badgeVariant field") by @dvcolomban added a badgeVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger' field to dock-bar entry badges (mirroring the field json-render's Tabs component already has), declared via a declare module '@devframes/hub/types' merge, and threaded through DockEntry.vue/DockEntries.vue, reusing Tabs.ts's color token map. It touched packages/core/src/client/webcomponents/components/dock/{DockEntries,DockEntry}.vue (+ DockEntry.stories.ts) in vitejs/devtools, which moved here as part of the v0.9 migration — the equivalent files today are packages/hub-ui/src/client/components/dock/{DockEntries,DockEntry}.vue.

It also touched packages/kit/src/types/docks.ts in vitejs/devtools — that file is a thin type re-export layer over @devframes/hub/types and still exists in vitejs/devtools unaffected. Since the PR's own module-augmentation approach targets @devframes/hub/types directly (not a vitejs/devtools-only type), the cleanest home for the new field is DevframeDockEntryBase in this repo's own packages/hub/src/types (or wherever that type is defined) rather than augmenting it from outside — check whether that's a bigger change than the original PR intended before deciding.

Original PR description

Why

DockEntry's badge is a plain string label with a fixed gray fill — no way to color it. json-render's own Tabs component already supports this one level down (TabDescriptor.badgeVariant, with a real variant→color map, used today by tab strips inside a dock's own content); the dock-bar entry itself has no equivalent, even though it's the same kind of label.

What changed

• badgeVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger' on DevframeDockEntryBase, declared via the same declare module '@devframes/hub/types' merge this package already uses for DevframeDockEntryRegistry — no new field on the hub package itself.
• DockEntry.vue/DockEntries.vue thread it through, reusing Tabs.ts's own colors token map rather than inventing a second one.
• Backward-compatible by construction: DockEntry.vue falls back to its pre-existing bg-gray-6/text-white classes at 'default'/unset, and only switches to an inline-styled fill for an explicit non-default variant — every existing badge consumer keeps its current look, unchanged.

Diff: https://github.com/vitejs/devtools/pull/528/files

For agents picking this up

• Read the diff at feat(core): color a dock-bar entry's badge via a new badgeVariant field vitejs/devtools#528 for the badgeVariant field, its default fallback behavior, and the reused Tabs.ts color token map.
• Decide where badgeVariant belongs now that the augmenting package (vitejs/devtools's kit) and the augmented package (@devframes/hub) are no longer split across two repos the same way — likely directly on DevframeDockEntryBase in packages/hub/src/types.
• Port the DockEntry.vue/DockEntries.vue changes to packages/hub-ui/src/client/components/dock/ (+ the .stories.ts update), reusing whatever the current Tabs.ts color map exports (packages/json-render-ui/src/components/Tabs.ts).
• Credit @dvcolomban as the original author: include a Co-authored-by: dvcolomban <...> trailer (look up their GitHub noreply email, or omit if unavailable) and mention them in the PR description.
• Link back to feat(core): color a dock-bar entry's badge via a new badgeVariant field vitejs/devtools#528 in the PR description.
• Close this issue when the port merges.