feat(design): shared uno.config base with h-nav and unified nav header#120
Merged
Conversation
Introduce design/uno.config.ts as the single source for the UnoCSS stack every plugin and example composes — the sage-green preset, Wind4, Phosphor icons, DM Sans/Mono fonts, transformers, border preflight, the named z-* layers, and a new shared h-nav navbar-height token. All 15 configs now extend it via mergeConfigs and keep only their own content globs/safelist. Unify the top nav header (icon + title) across every surface: the design.ts nav() helpers and the Vue LayoutToolbar navs all resolve to the shared h-nav height, and data-inspector's divergent header is brought into the canonical icon + title form.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Bring the minimal-vite and minimal-next hub shells into the same canonical top nav as every other surface: a fixed h-nav container with an icon + title brand block (i-ph-squares-four-duotone), replacing their bespoke items-baseline headers.
The framework-neutral class-helper builders (cx/button/badge/nav/card/…) were duplicated byte-for-byte across six surfaces. Move the single implementation to design/design.ts and reduce each local copy to a re-export, so every surface stays in lockstep. The shared config adds design/design.ts to every app's content.filesystem, so its runtime-assembled class chains are extracted uniformly under both the Vite pipeline and the @unocss/postcss (filesystem) integrations.
Add a framework-neutral `connectionIndicator(status)` helper to design/design.ts that returns a dot + label pill for every non-connected state and `null` when connected. Adopt it in each surface's top nav (inspect, messages, data-inspector, git), replacing their bespoke pills/badges, so the connection state renders identically everywhere and only appears while the connection is not live.
The full-screen "not connected" state was reimplemented with a near-identical copy map in four surfaces (git, inspect, messages, terminals). Move the copy (icon/title/body/reloadable/spin per status) and the layout class builders (connectionPanel/Glyph/Title/Body/Detail) into design/design.ts, and have every surface render from them, so the disconnected/error/unauthorized/connecting panels look identical across React, Vue and Svelte.
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.
What
Introduces
design/uno.config.tsas the single source of truth for the UnoCSS stack every plugin and example composes, and unifies the top nav header across all surfaces.Shared base config
design/uno.config.tsexportsdesignConfigowning what was previously duplicated in all 15 configs: the sage-greenpresetAnthonyDesignover Wind4, Phosphor icons, DM Sans/Mono web fonts, the directive/variant-group transformers, the border preflight, the namedz-*layers, and a new sharedh-navnavbar-height token. Everyuno.config.ts(8 plugins + 6 examples + storybook) now extends it viamergeConfigsand keeps only its own content globs / safelist.This gives every surface one font stack, one z-index scale, and one fixed navbar height.
Unified nav header (icon + title)
design.tsnav()helpers now useh-navinstead of a literalh-10.LayoutToolbarnavs (inspect, messages, og) — previously content-drivenpy-2heights — now passclass="h-nav"to match the fixed height used everywhere else. Their brand blocks were already canonical (i-ph:* text-base color-activeicon +font-semibold text-smtitle).data-inspector's divergent header (bespoke container,color-primaryicon/title, no fixed height) is brought into the canonicalLayoutToolbar+h-nav+color-activeicon form.The hub host shells (
minimal-vite/minimal-next) keep their distinct multi-tool chrome header by design; they still inherit the shared config.Verification
pnpm lintclean,pnpm typecheckgreen (16 packages),pnpm buildgreen (17 tasks)..h-nav{height:calc(var(--spacing) * 10)}, across Solid, Vue, React/Next, Svelte and Preact.This PR was created with the help of an agent.