@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md

@@ -0,0 +1,482 @@
+# Patterns — Page Layouts (Aurora Command UI)
+
+Requires `design-tokens.md` + `components.md` loaded first.
+
+These patterns define full-page compositions for aurora-command-ui. All surfaces are dark glass over the aurora gradient substrate.
+
+---
+
+## Foundation rule — always first
+
+Before any layout: the aurora gradient background must be set on the root shell.
+
+```css
+.aurora-shell {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+}
+```
+
+Glass panels placed over this shell will reveal the aurora through transparency. If the background is solid, the glass effect fails entirely.
+
+---
+
+## 1. Aurora App Shell (base layout)
+
+The foundation for all app and dashboard views.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  AURORA GRADIENT BACKGROUND (fixed, full viewport)              │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │ GLASS TOP BAR (sticky)                                   │   │
+│  │ [Logo] ──────── [Tab Nav — center] ──────── [Actions]   │   │
+│  ├─────────────────┬────────────────────────────────────────┤   │
+│  │ GLASS SIDEBAR   │  SCROLLABLE CONTENT AREA              │   │
+│  │ 200-220px       │  [MONO SECTION HEADER]                │   │
+│  │ h: 100vh-topbar │  [GLASS STAT ROW]                     │   │
+│  │ overflow-y:auto │  [GLASS DATA GRID]                    │   │
+│  │                 │  [MONO SECTION HEADER]                │   │
+│  │                 │  [GLASS TABLE / CHART]                │   │
+│  └─────────────────┴────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**CSS skeleton:**
+```css
+.aurora-shell {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+}
+
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Top bar */
+.topbar {
+  height: 52px;
+  flex-shrink: 0;
+  background: var(--glass-shell);
+  backdrop-filter: var(--glass-blur-lg);
+  -webkit-backdrop-filter: var(--glass-blur-lg);
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+/* Body row */
+.body-row {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 210px;
+  flex-shrink: 0;
+  background: var(--glass-shell);
+  backdrop-filter: var(--glass-blur-md);
+  -webkit-backdrop-filter: var(--glass-blur-md);
+  border-right: 1px solid var(--glass-border);
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-3);
+}
+
+/* Content */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-5) var(--space-6);
+}
+```
+
+**Fallback (no backdrop-filter):**
+```css
+@supports not (backdrop-filter: blur(1px)) {
+  .topbar, .sidebar { background: var(--glass-fallback); }
+}
+```
+
+---
+
+## 2. Dashboard Shell — Eclipse Command
+
+For operational dashboards (SOC, infra, monitoring, live analytics). Dense information above the fold.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  TOPBAR: [Logo] ── [OVERVIEW / ALERTS / AGENTS / CONFIG] ───   │
+├─────────────────────────────────────────────────────────────────┤
+│  STAT ROW (4 glass stat cards, full width)                      │
+│  [Total Events] [Active Alerts] [Agents Online] [Latency p99]  │
+├─────────────────┬───────────────────────────────────────────────┤
+│  GLASS SIDEBAR  │  [MONO: LIVE ACTIVITY ▸]                     │
+│  Nav tree       │  ┌── HERO CHART PANEL (2/3 width) ────────┐  │
+│                 │  │ Area chart — glass container — gradient │  │
+│                 │  └─────────────────────────────────────────┘  │
+│                 │  ┌── SECONDARY PANEL (1/3 width)          │  │
+│                 │  │ Alert tape / Activity feed             │  │
+│                 │  └─────────────────────────────────────────┘  │
+│                 │  [MONO: ENTITY STATUS ▸]                     │
+│                 │  ┌── DATA TABLE (full width) ─────────────┐  │
+│                 └───────────────────────────────────────────────┘
+```
+
+**Content grid:**
+```css
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+}
+
+.main-split {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-3);
+}
+
+.full-table-section {
+  width: 100%;
+}
+```
+
+---
+
+## 3. Dashboard Shell — Quiet Aurora
+
+For analytics and BI dashboards. Less density, more narrative structure. One dominant metric above the fold.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  TOPBAR                                                         │
+├─────────────────────────────────────────────────────────────────┤
+│  [HERO METRIC PANEL — full width or 2/3]                        │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │ MONO LABEL: REVENUE PERFORMANCE                         │   │
+│  │ $4,820,190  ↑ 12.4%  [this quarter vs last]             │   │
+│  │ [Area chart spanning full panel — aurora fill]          │   │
+│  └──────────────────────────────────────────────────────────┘   │
+├─────────────────┬───────────────────────────────────────────────┤
+│  GLASS SIDEBAR  │  SUPPORTING CARDS GRID (3-col)               │
+│                 │  [Conversion] [AOV] [CAC]                     │
+│                 │  [Table: Top Segments]                        │
+└─────────────────┴───────────────────────────────────────────────┘
+```
+
+**Hero panel:**
+```css
+.hero-metric-panel {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Aurora glow behind stat number */
+.hero-metric-panel::after {
+  content: '';
+  position: absolute;
+  top: 0; left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 1px;
+  background: var(--accent-gradient);
+  opacity: 0.6;
+}
+```
+
+---
+
+## 4. Detail / Profile Page
+
+For viewing a single entity — agent, user, contact, project, asset.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  TOPBAR                                                         │
+├─────────────────────────────────────────────────────────────────┤
+│  Breadcrumbs: Section › Entity Name                             │
+│  ┌── PROFILE HEADER GLASS PANEL (full width) ──────────────┐   │
+│  │ [Avatar 80px] [Name text-3xl] [Badges] [Status chip]    │   │
+│  │ [Mono: stat row] [Actions: Edit / Message / ...]        │   │
+│  └──────────────────────────────────────────────────────────┘   │
+│  [TAB BAR: Overview / Activity / Settings / Integrations]       │
+├─────────────────┬───────────────────────────────────────────────┤
+│  SIDEBAR DETAIL │  CONTENT TAB PANEL                           │
+│  Compact info   │  [MONO SECTION HEADER]                       │
+│  Key–value rows │  [GLASS CARD GRID: 2-col]                    │
+│                 │  [MONO SECTION HEADER]                       │
+│                 │  [GLASS TABLE]                               │
+└─────────────────┴───────────────────────────────────────────────┘
+```
+
+**Profile header:**
+```css
+.profile-header {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  margin-bottom: var(--space-4);
+  position: relative;
+}
+
+.profile-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--glass-highlight);
+  pointer-events: none;
+}
+
+.profile-name {
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-heading);
+}
+```
+
+---
+
+## 5. Settings Page (Compact Density)
+
+Follows the admin compact density scale from `design-tokens.md`.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  TOPBAR                                                         │
+├────────────┬────────────────────────────────────────────────────┤
+│ SETTINGS   │  [MONO: ACCOUNT SETTINGS ▸]                       │
+│ SIDEBAR    │  ┌── L1 glass card ──────────────────────────┐   │
+│  – Account │  │ HEADING: Profile (text-base semibold)     │   │
+│  – Security│  │ ┌── L2 nested card ────────────────────┐  │   │
+│  – API     │  │ │ Name / Email / Avatar fields         │  │   │
+│  – Billing │  │ └──────────────────────────────────────┘  │   │
+│  – Team    │  │ [Save Changes button]                     │   │
+│            │  └───────────────────────────────────────────┘   │
+│            │  ┌── L1 glass card: Security ─────────────┐     │
+│            │  └───────────────────────────────────────────┘   │
+└────────────┴────────────────────────────────────────────────────┘
+```
+
+Settings sidebar is narrower (180px). Uses `--text-sm` for nav items. No backdrop-blur on settings sidebar — just glass-border right edge.
+
+---
+
+## 6. Auth / Login Page
+
+Aurora background in full focus. Single centered glass card.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  AURORA GRADIENT (full viewport, fixed)                         │
+│                                                                 │
+│            [Decorative aurora orb — top-right, blurred]         │
+│            [Decorative aurora orb — bottom-left, blurred]       │
+│                                                                 │
+│  ┌─────────────────────────────────┐                            │
+│  │  GLASS AUTH CARD (max 400px)    │                            │
+│  │  Logo + Product name            │                            │
+│  │  MONO: SIGN IN TO AURORA        │                            │
+│  │  [Email input (glass)]          │                            │
+│  │  [Password input (glass)]       │                            │
+│  │  [Sign In button — gradient]    │                            │
+│  │  Forgot password / Sign up      │                            │
+│  └─────────────────────────────────┘                            │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**Auth page:**
+```css
+.auth-page {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-lg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-8) var(--space-8);
+  position: relative;
+}
+
+.auth-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--glass-highlight);
+  pointer-events: none;
+}
+
+/* Decorative aurora orbs */
+.aurora-orb {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.aurora-orb-1 {
+  width: 500px; height: 500px;
+  top: -150px; right: -100px;
+  background: radial-gradient(circle, rgba(0,200,232,0.5), rgba(124,58,237,0.3));
+}
+
+.aurora-orb-2 {
+  width: 400px; height: 400px;
+  bottom: -100px; left: -80px;
+  background: radial-gradient(circle, rgba(124,58,237,0.5), rgba(0,200,232,0.2));
+}
+```
+
+---
+
+## 7. List → Detail Layout
+
+For entity galleries, queues, feeds, inbox-style views.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  TOPBAR                                                         │
+├──────────────────────────┬──────────────────────────────────────┤
+│  LIST PANEL (360px)      │  DETAIL PANEL (flex: 1)             │
+│  ┌── glass card ──────┐  │  [Profile header]                   │
+│  │ Entity row 1       │  │  [Tab bar]                          │
+│  └────────────────────┘  │  [Detail content]                   │
+│  ┌── glass card ──────┐  │                                     │
+│  │ Entity row 2       │  │                                     │
+│  └────────────────────┘  │                                     │
+│  [Load more...]          │                                     │
+└──────────────────────────┴──────────────────────────────────────┘
+```
+
+```css
+.list-detail-layout {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  height: calc(100vh - 52px);
+  overflow: hidden;
+}
+
+.list-panel {
+  border-right: 1px solid var(--glass-border);
+  overflow-y: auto;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.detail-panel {
+  overflow-y: auto;
+  padding: var(--space-5) var(--space-6);
+}
+```
+
+---
+
+## 8. Command Strip Pattern
+
+A command-center signature from cognitive-core-ui, adapted for dark glass surfaces. A horizontal strip showing live system status above the main content.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ ● SYSTEM STATUS    ● 3 ACTIVE ALERTS    ● 847ms LATENCY  [TEAL] │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.command-strip {
+  height: 32px;
+  background: rgba(0, 200, 232, 0.06);
+  border-bottom: 1px solid rgba(0, 200, 232, 0.15);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-6);
+  gap: var(--space-6);
+  overflow-x: auto;
+}
+
+.command-strip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.command-strip-item .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  box-shadow: 0 0 6px var(--accent-primary);
+}
+
+.command-strip-item.alert .dot { background: var(--semantic-amber); box-shadow: 0 0 6px var(--semantic-amber); }
+.command-strip-item.critical .dot { background: var(--semantic-red); box-shadow: 0 0 6px var(--semantic-red); }
+```
+
+---
+
+## Responsive notes
+
+- **Sidebar collapse**: below 1024px, the sidebar becomes a slide-over glass panel (position: fixed, full height).
+- **Stat row**: `grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))` — gracefully drops to 2-col on tablet.
+- **List-detail**: below 768px, the list panel becomes a separate screen/tab — detail occupies full width.
+- **Top bar**: below 768px, collapse the center tab nav into a hamburger menu.
+
+---
+
+## Anti-patterns
+
+- Do NOT float glass cards over a solid `#000` or `#0b0f15` background — the glass will look like a flat opaque panel.
+- Do NOT skip the `::before` top reflection on glass cards — it is part of the visual signature.
+- Do NOT use a stats row of 4 equal cards as the only above-the-fold content every time. Vary with hero metric panels, chart panels, or alert clusters.
+- Do NOT use the same padding scale for marketing pages and dashboards. Use compact density in operational UI.