feat(hub-ui): add @devframes/hub-ui — the reference UI filling the hub's ui slot - #170
Merged
Conversation
…b's ui slot A port of Vite DevTools' web components onto @devframes/hub, prebuilt into two entries the hub serves through DevframeHubUi: - embedded.js — the floating DockEmbedded bootstrap (single self- contained ES module; always visible by design — visibility policy belongs to whoever authors an embedded entry) - a standalone viewer SPA (vanilla shell mounting DockStandalone, relative asset paths, served at the hub base) createUi() returns the slot object pointing at the built artifacts. The components (dock shell, panels, command palette, messages/toasts, views, json-render catalog) are Vue custom elements with shadow-root styles compiled ahead of time from the shared devframe design system (@antfu/design sage-green preset); imports are rewired from @vitejs/devtools-kit onto @devframes/hub's client runtime, the view-mode machinery is removed, and branding/element names/storage keys move to the devframes namespace. Storybook follows the repo's shared vue3-vite setup. Co-developed with Vite DevTools — the components descend from vitejs/devtools (MIT).
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Layer 4 of the
/__devframes/standard-middleware stack (on #169). Seeplans/devframes-standard-middleware.md.Intent
Batteries for the hub's headless
uislot:createUi()from@devframes/hub-uireturns aDevframeHubUiobject pointing at two prebuilt artifacts —embedded.js— the floatingDockEmbeddedbootstrap, a single self-contained ES module the hub serves at<base>embedded.js; one documented<script type="module">tag gives any host page the Vite-DevTools-style floating dock. Always visible by design: visibility policy belongs to the entry's author (Vite DevTools keeps its passive/hidden model in its entry against the same slot).DockStandalone, served at the hub base; open/__devframes/in a tab and the devtools are there.The components are a port of Vite DevTools' web components (dock shell, panels, command palette, messages/toasts, views, json-render catalog — ~120 files) rewired onto
@devframes/hub's client runtime: kit imports map to@devframes/hub/client(getDevframeRpcClient,attachFrameNavClient, context key), kit types to theirDevframe*hub equivalents (kit-only shapes ported locally), RPCs to the hub built-ins (hub:commands:execute,hub:messages:*), and the client-script loader to nativeimport()— no virtual modules, no mount-path constant, no__mode.json. Shadow-root styles compile ahead of time from the shared devframe design system (@antfu/designsage-green preset, named z-layers), so the dock stays styled inside any host page. Storybook follows the repo's shared vue3-vite setup.The hub itself stays headless — this package is one implementation of the slot; any viewer supplies its own object to the same option and reuses all the infrastructure.
Components descend from vitejs/devtools (MIT).
Stack
Created with the help of an agent.