Files

T

mjasin 55cc3ae10d feat(ui/arch): Optimize Graph Dynamics, Immersive Reader, and Core Stability (#19 )

This PR introduces a major optimization of graph dynamics, immersive reading experience, and architectural stabilization.

### 🚀 Key Improvements

- **Knowledge Graph (Fix #16)**:
  - Implemented smooth D3.js transitions using the General Update Pattern.
  - Added "Neon Flash" entry animations and dynamic node dimming for better focus.
- **Immersive Reader (Fix #12)**:
  - Standardized centered layout (`max-width: 800px`) with **Merriweather** typography.
  - Optimized line-height and letter-spacing for premium readability.
- **Technical Code Blocks (Fix #20)**:
  - High-contrast dark containers for code snippets.
  - **JetBrains Mono** integration and neon-accented scrollbars.
- **Architectural Stabilization**:
  - Enforced a strict **'no async void'** policy in UI services using `Func<Task>`.
  - Resolved WASM runtime DI errors by implementing dummy service proxies for server-side dependencies.
  - Replaced generic 'Not Found' message with a branded Nexus preloader.

Fixes #7, Fixes #12, Fixes #16, Fixes #20.

Reviewed-on: #19
Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Co-committed-by: Marek Jasiński <jasins.marek@gmail.com>

2026-05-08 18:16:09 +00:00

2.2 KiB

Raw Permalink Blame History

name, description

name	description
nexus-ui-engine	Design System & Component rules for Blazor

UI Standards

Atomic Design:
- Build reusable components in NexusReader.UI.Shared/Components.
- Atoms: Base elements (NexusButton, NexusIcon, NexusTypography).
- Molecules: Small groups (AiAssistantBubble, KnowledgeCheck).
- Organisms: High-level sections (KnowledgeGraph, ReaderCanvas).
Styling & Isolation:
- Mandatory use of scoped CSS (.razor.css).
- No global CSS except for design tokens in app.css.
- Use ::deep only when absolutely necessary to style child components.
Design System (Nexus Neon):
- Color Palette:
  - Primary Accent: --nexus-neon (#00ff99) - Used for borders, highlights, and icons.
  - Dark Mode: --nexus-bg (#0a0a0a), --nexus-card (#141414).
  - Light Mode: --nexus-bg (#f8f9fa), --nexus-card (#ffffff).
- Typography:
  - UI Elements: Inter (Sans-Serif) for controls, menus, and labels.
  - Reading Content: Merriweather (Serif) with line-height: 1.65 and letter-spacing: -0.01em for high readability.
- Effects:
  - Subtle neon glows (box-shadow: 0 0 15px rgba(0, 255, 153, 0.3)).
  - Glassmorphism for overlays and modals.
Adaptive Layouts:
- Support .platform-mobile and .platform-desktop context classes.
- Handle safe-area insets (--safe-area-inset-*) for mobile devices.
- Immersive Reader (Zen Mode):
  - Centered content flow: max-width: 800px, margin: 0 auto.
  - Paper-white background: #F9F9F9 for light mode reader canvas.
  - Dedicated Scrollbars: Custom styled, thin scrollbars with --nexus-neon accents.
  - Reachability: Large padding-bottom (e.g., 15rem) to ensure comfortable reading of end-of-page content.
Accessibility (A11y):
- Touch Targets: Min 44x44px on mobile (enforced via CSS variables).
- Contrast: Minimum ratio of 4.5:1.
- Semantic HTML: Use appropriate tags (<button>, <article>, <nav>).
Interactive Flow:
- AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
- Interactive elements must have clear :hover, :active, and :focus states.

2.2 KiB Raw Permalink Blame History

UI Standards

2.2 KiB

Raw Permalink Blame History