# Component Rules

## AppShell

Props: `currentRoute`, `environment`, `demoMode`.  
May show: navigation, header, content slots.  
Must not show: raw domain data.  
Mobile: bottom nav. Desktop: sidebar.

## SidebarNav

Props: `items`, `currentRoute`.  
Desktop only. No nested menus deeper than two levels.

## BottomNav

Props: `items`, `currentRoute`.  
iPad/mobile. Touch targets >= 44 px.

## PageHeader

Props: `title`, `subtitle`, `status`, `updatedAt`.  
No raw details.

## NeedsAttentionList

Props: `items`.  
Max 5. Severity sorted. No table layout.

## AttentionItemCard

Props: `title`, `message`, `severity`, `module`, `action`.  
One primary action. Redacted messages only.

## ModuleCard

Props: `module`, `status`, `updatedAt`, `kpis`, `primaryAction`.  
Max 3 KPIs. No raw data.

## KpiPill

Props: `label`, `value`, `severity`.  
Summary values only.

## StatusBadge

Props: `status`.  
Use clear labels: OK, Achtung, Eingeschränkt, Offline.

## ReportList

Props: `reports`.  
Blocked sensitive reports show lock notice, not file links.

## ActivityTimeline

Props: `events`.  
Max 10 on Home. Collapsible.

## EmptyState

Props: `title`, `message`, `nextAction?`.  
Calm, not theatrical.

## ErrorState

Props: `message`, `retryAction?`.  
Only redacted errors.

## StaleDataBanner

Props: `module`, `lastSuccessAt`, `reason`.  
No paths or raw error details.

## SensitiveValue

Props: `policy`, `summary`.  
Default hidden/summary. Exact values not used in MVP.

## BlockedActionNotice

Props: `reason`, `futureRequirement`.  
Explains why action is blocked.