Files

T

mjasin 06f8c823a6 feat(ui/graph): optimize graph dynamics, immersive reader, and code blocks

- Fix #16: Implement D3.js transitions and active state badges for Knowledge Graph.
- Fix #12: Implement Immersive Reader Layout with Merriweather typography.
- Fix #20: Professional code block styling with high contrast and monospace fonts.
- Resolve DI runtime error in WASM by adding dummy services.
- Replace generic 'Not Found' message with Nexus preloader.
- Enforce 'no async void' architecture across UI services.

2026-05-08 20:13:39 +02:00

2.2 KiB

Raw 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 Blame History

UI Standards

2.2 KiB

Raw Blame History