Add initial Nebula Core packages and docs
Import initial monorepo structure for Nebula Core: add packages (@nebula/core, core-glyphs, core-input, core-navigation, core-theme, core-ui, core-utils) with source, dist, tests and assets. Expand README with overview, quick start and API snippets, and add package-level documentation files. Add jsconfig.json for path mapping, package.json and lockfiles to bootstrap the repo. This commit sets up the project layout, docs, and local package links for further development.
This commit is contained in:
+25
@@ -0,0 +1,25 @@
|
||||
# @nebula/core-ui
|
||||
|
||||
Minimal UI helpers for controller-first applications. No framework lock-in.
|
||||
|
||||
## Why it exists
|
||||
Controller-first UI benefits from consistent hit targets and clear focus styling. This package provides small, composable primitives you can apply in any UI layer.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { focusRing, hitTarget, getFocusableAttributes } from "@nebula/core-ui";
|
||||
|
||||
const focusableProps = getFocusableAttributes({ role: "button", focusKey: "play" });
|
||||
|
||||
// Example with a UI layer that accepts inline styles
|
||||
const styles = {
|
||||
minHeight: hitTarget.minHeight,
|
||||
minWidth: hitTarget.minWidth,
|
||||
outline: `${focusRing.outlineWidth}px solid ${focusRing.outlineColor}`,
|
||||
outlineOffset: focusRing.outlineOffset
|
||||
};
|
||||
```
|
||||
|
||||
## SteamOS / Steam Deck notes
|
||||
Use large hit targets and strong focus rings for readability on TV and handheld screens. Combine with a focus system (such as @nebula/core-navigation).
|
||||
Reference in New Issue
Block a user