Add Nebula Shell v0 prototype and redesign

Introduce a working v0 Nebula Shell prototype (Tauri frontend) and redesign docs. Adds a complete frontend under src/ (views: home, lock, library, settings, overlays), core adapters (input, nav, passkey, router, state), global styles and shell guidelines, and view-specific HTML/CSS/JS. Update README with prototype notes, install/run/build instructions and controller testing tips. Update package.json to add dev/build scripts and add @nebulaproject/core as a dependency. Also include a detailed REDESIGN_DOCUMENTATION.md describing the Xbox-inspired horizontal dashboard, component patterns, and developer notes.
This commit is contained in:
2026-02-15 22:52:35 +13:00
parent 0102d06bba
commit 89eedf5522
31 changed files with 9242 additions and 42 deletions
+53
View File
@@ -0,0 +1,53 @@
# Nebula Shell UI Guidelines (Dashboard Refresh)
## Layout Structure
- Home uses a left-aligned horizontal tile rail (`.tile-rail`) with one primary row of large app tiles.
- Top bar is shared across shell views with brand left and time/profile right.
- Settings uses a horizontal category bar at top and card panel content below.
- Lock screen keeps immersive centered time/date and reveals PIN panel on first input.
## Animation Guidelines
- Use cubic-bezier curves only:
- `--nebula-ease-console`: focus travel and panel transitions.
- `--nebula-ease-standard`: opacity and ambient motion.
- `--nebula-ease-snap`: press pulse feedback.
- Focus transitions target `120ms180ms` (`--nebula-duration-fast` / `--nebula-duration-nav`).
- Use transform/opacity for movement and avoid layout-triggering transitions.
- Page changes use `.view` to `.view-entered` slide-in transitions.
- Press feedback uses `.is-pressed` and `uiPressPulse` keyframes.
## Component Breakdown
### TopBar
- Class roots: `.shell-topbar`, `.shell-brand`, `.shell-status`, `.shell-time`, `.shell-avatar`, `.shell-accent-line`.
- Purpose: persistent identity + status + navigation-reactive accent line.
- Reactive token: `--nebula-accent-line-x` updates from focus manager.
### TileRow
- Class root: `.tile-rail`.
- Purpose: horizontal app rail with controller-first left/right travel and smooth scroll.
- Behavior: focus auto-centers via `scrollTo` and updates parallax variables.
### Tile
- Class roots: `.tile`, `.dashboard-tile`, `.tile-icon`, `.tile-label`, `.tile-meta`.
- Focus state: `.is-focused` scales tile and adds cyan glow outline.
- Press state: `.is-pressed` triggers pulse animation and hook events.
### BackgroundLayer
- DOM root: `#nebula-background` with `.nebula-layer` children (`gradient`, `starfield`, `fog`, `vignette`).
- Purpose: animated nebula depth stack with subtle star motion and fog drift.
- Parallax token: `--bg-parallax-x` supports focus-driven depth shift.
### FocusManager
- Implementation root: `src/core/nav.js`.
- Responsibilities:
- Maintain focused element and directional navigation.
- Apply `.is-focused` state and `aria-selected`.
- Publish focus telemetry events (`nebula-focus-change`).
- Update CSS vars (`--nebula-accent-line-x`, `--nebula-focus-strength`).
## UI Hook Contract (No Audio Implementation)
- `window` `CustomEvent("nebula-ui-hook")` details:
- `type: "focus" | "move" | "accept" | "back"`
- Optional metadata (`target`, `action`, `focusKey`)
- Intended use: external UI audio/haptics bridge without coupling shell visuals to playback.