Skip to content

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

Open
antfubot wants to merge 1 commit into
mainfrom
feat/hub-ui-antfu-design
Open

feat(hub-ui): adopt @antfu/design components and devframe branding#176
antfubot wants to merge 1 commit into
mainfrom
feat/hub-ui-antfu-design

Conversation

@antfubot

@antfubot antfubot commented Aug 7, 2026

Copy link
Copy Markdown
Collaborator

What

Refactors the hub-ui dock shell to lean on the shared devframe design system and to carry devframe's own branding rather than placeholder/Vite chrome.

Reuse @antfu/design components

  • Buttons in the launcher view, confirm modal, client auth notice, and the json-render Button renderer now use @antfu/design's ActionButton (primary/action/text variants), replacing the bespoke local display/Button.vue.
  • Command-palette and shortcut keybinding chips now use @antfu/design's DisplayKbd, replacing the local KeybindingBadge.
  • The shadow-root CSS build (scripts/build-css.ts) additionally scans the design package's component sources so their semantic shortcut classes (btn-primary, btn-action, …) ship in the injected stylesheet — UnoCSS ignores node_modules by default, which would otherwise leave the reused components unstyled inside the shadow DOM.
  • Deletes the now-unused display/Button.vue, KeybindingBadge.vue, and their stories.

devframe logo

  • New DevframeLogo.vue inlines the devframe logo mark (per-instance unique gradient id).
  • BrandMark and BrandWordmark render it instead of the i-ph:plug-duotone placeholder glyph.

Remove Vite theming

  • Deletes the BracketLeft/BracketRight icon components and the [ … ] bracket chrome around the floating dock.
  • Re-themes the dock's ambient glow from Vite's blue-purple gradient to devframe's sage palette.

Verification

build:css, typecheck, build (embedded + standalone), lint, knip, and build-storybook all pass. Browser screenshots weren't possible on this ARM64 host (no Chromium build available).

Created with the help of an agent.

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.
@netlify

netlify Bot commented Aug 7, 2026

Copy link
Copy Markdown

Deploy Preview for devfra ready!

Name Link
🔨 Latest commit 4a3d214
🔍 Latest deploy log https://app.netlify.com/projects/devfra/deploys/6a752af7ebc647000970bdbe
😎 Deploy Preview https://deploy-preview-176--devfra.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant