triqura-ecd/docs/swift/e0-design-tokens-and-components.md

Epic 0 — Design Tokens & Component Inventory

Datum: 27-12-2024 Auteur: AI Assistant Status: ✅ Completed

---

E0.S1 — Design Tokens Audit

🎯 Doel: Alle kleuren, spacing, typography gedocumenteerd voor v3.0 gebruik.

Colors (blijven hetzelfde voor v3.0)

Base Colors

--color-bg: #F8FAFC;              /* App background */
--color-surface: #FFFFFF;          /* Cards, blocks, surfaces */
--color-surface-secondary: #F1F5F9; /* Secondary surfaces */
--color-text: #0F172A;             /* Primary text (slate-900) */
--color-text-secondary: #475569;   /* Secondary text (slate-600) */
--color-border: #E2E8F0;           /* Borders (slate-200) */

Brand Colors (Teal-first Design System)

--color-brand: #0F766E;            /* teal-700 - PRIMARY (5.47:1 WCAG AA) */
--color-brand-hover: #115E59;      /* teal-800 */
--color-brand-active: #0D9488;     /* teal-600 */
--color-brand-subtle: #F0FDFA;     /* teal-50 */

AI Feature Colors (Amber)

--color-ai: #D97706;               /* amber-600 - PRIMARY AI (3.19:1 WCAG AA large) */
--color-ai-hover: #B45309;         /* amber-700 */
--color-ai-subtle: #FFFBEB;        /* amber-50 */

Status & Feedback Colors

--color-success: #16A34A;          /* green-600 */
--color-success-subtle: #ECFDF5;   /* green-50 */
--color-warning: #EAB308;          /* yellow-500 */
--color-warning-subtle: #FEFCE8;   /* yellow-50 */
--color-error: #DC2626;            /* red-600 */
--color-error-subtle: #FEF2F2;     /* red-50 */
--color-info: #0F766E;             /* teal-700 - Brand consistency */
--color-info-subtle: #CCFBF1;      /* teal-100 */

Form/Input Colors

--color-input-bg: #FFFFFF;
--color-input-text: #0F172A;
--color-input-placeholder: #94A3B8; /* slate-400 */
--color-input-border: #CBD5E1;      /* slate-300 */
--color-input-border-hover: #94A3B8;
--color-input-focus: #0F766E;       /* teal-700 */
--color-input-focus-border: #115E59; /* teal-800 */
--color-input-disabled-bg: #F1F5F9;
--color-input-disabled-text: #94A3B8;

---

🆕 NEW: Chat Message Colors (v3.0 only)

Voor de nieuwe chat interface:

/* User messages (rechts, amber tint) */
--chat-user-bg: #FFFBEB;           /* amber-50 */
--chat-user-border: #FED7AA;       /* amber-200 */
--chat-user-text: #0F172A;         /* text-primary */

/* Assistant messages (links, slate tint) */
--chat-assistant-bg: #F1F5F9;      /* slate-100 */
--chat-assistant-border: #CBD5E1;  /* slate-300 */
--chat-assistant-text: #0F172A;    /* text-primary */

/* System messages (centered, subtle) */
--chat-system-text: #64748B;       /* slate-500 */

/* Error messages (links, red tint) */
--chat-error-bg: #FEF2F2;          /* red-50 */
--chat-error-border: #FECACA;      /* red-200 */
--chat-error-text: #991B1B;        /* red-800 */

Tailwind classes voor chat messages:

const MESSAGE_STYLES = {
  user: {
    container: 'self-end bg-amber-50 border border-amber-200 text-slate-900',
    borderRadius: 'rounded-2xl rounded-tr-sm',
  },
  assistant: {
    container: 'self-start bg-slate-100 border border-slate-300 text-slate-900',
    borderRadius: 'rounded-2xl rounded-tl-sm',
  },
  system: {
    container: 'self-center text-slate-500 text-sm',
    borderRadius: '',
  },
  error: {
    container: 'self-start bg-red-50 border border-red-200 text-red-800',
    borderRadius: 'rounded-2xl',
  },
};

---

Verpleegkundig Category Colors (blijven hetzelfde)

Gebruikt in DagnotatieBlock, OverdrachtBlock:

export const CATEGORY_CONFIG = {
  medicatie: {
    label: 'Medicatie',
    icon: 'Pill',
    bgColor: 'bg-blue-100',      // #DBEAFE
    textColor: 'text-blue-700',  // #1D4ED8
  },
  adl: {
    label: 'ADL/verzorging',
    icon: 'Utensils',
    bgColor: 'bg-green-100',     // #DCFCE7
    textColor: 'text-green-700', // #15803D
  },
  gedrag: {
    label: 'Gedragsobservatie',
    icon: 'User',
    bgColor: 'bg-purple-100',    // #F3E8FF
    textColor: 'text-purple-700', // #7E22CE
  },
  incident: {
    label: 'Incident',
    icon: 'AlertTriangle',
    bgColor: 'bg-red-100',       // #FEE2E2
    textColor: 'text-red-700',   // #B91C1C
  },
  observatie: {
    label: 'Observatie',
    icon: 'Eye',
    bgColor: 'bg-slate-100',     // #F1F5F9
    textColor: 'text-slate-700', // #334155
  },
};

---

Swift Shift Colors (blijven hetzelfde)

Gebruikt in ContextBar:

const SHIFT_CONFIG = {
  ochtend: {
    icon: Sunrise,
    label: 'Ochtenddienst',
    color: 'text-amber-600',     // #D97706
  },
  middag: {
    icon: Sun,
    label: 'Middagdienst',
    color: 'text-yellow-600',    // #CA8A04
  },
  avond: {
    icon: Sunset,
    label: 'Avonddienst',
    color: 'text-orange-600',    // #EA580C
  },
  nacht: {
    icon: Moon,
    label: 'Nachtdienst',
    color: 'text-indigo-600',    // #4F46E5
  },
};

---

Shadows (blijven hetzelfde)

--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);

Tailwind classes:

• shadow-sm — Subtle shadows (cards, inputs)
• shadow-md — Medium shadows (dropdowns, popovers)
• shadow-lg — Large shadows (modals, dialogs)

---

Border Radius (blijven hetzelfde)

--radius: 0.625rem;  /* 10px - base radius */

Tailwind classes:

• rounded-sm — 4px (small elements)
• rounded-md — 8px (buttons, inputs)
• rounded-lg — 10px (cards, blocks)
• rounded-2xl — 16px (chat bubbles, large cards)
• rounded-full — 9999px (avatars, badges)

---

Typography Scale

/* Font sizes */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */

/* Line heights */
--line-height-tight: 1.2;     /* Headings */
--line-height-relaxed: 1.8;   /* Body text */

Tailwind classes:

• text-xs — Metadata, labels
• text-sm — Secondary text, descriptions
• text-base — Body text (default)
• text-lg — Input fields, chat messages
• text-xl — Headings, titles

---

Spacing Scale (blijven hetzelfde)

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

Tailwind classes:

• p-2 / m-2 — 8px padding/margin
• p-4 / m-4 — 16px (most common)
• p-6 / m-6 — 24px (cards, blocks)
• gap-4 — 16px gap in flex/grid

---

🎨 Design Token Usage in v3.0

Chat Panel

• Background: bg-white (--color-surface)
• Border right: border-r border-slate-200 (--color-border)
• Width: w-[40%] (desktop), w-full (mobile)

Chat Messages

• User: bg-amber-50 border-amber-200 (NEW)
• Assistant: bg-slate-100 border-slate-300 (NEW)
• Padding: p-3 (12px) of p-4 (16px)
• Border radius: rounded-2xl met accent rounded-tr-sm (user) of rounded-tl-sm (assistant)

Artifact Area

• Background: bg-slate-50 (--color-surface-secondary)
• Width: w-[60%] (desktop), w-full (mobile)

Artifact Container (bestaande blocks blijven ongewijzigd)

• Background: bg-white
• Border: border border-slate-200
• Border radius: rounded-lg
• Shadow: shadow-lg
• Padding: p-6

---

E0.S2 — Component Inventory

🎯 Doel: Lijst van alle blocks die herbruikbaar zijn vs. nieuwe componenten voor v3.0.

✅ Bestaande Components (blijven ongewijzigd)

Deze components werken in v3.0 zonder wijzigingen (alleen de wrapper wijzigt):

Component	Locatie	Functie	Wijzigingen v3.0
ContextBar	components/swift/command-center/context-bar.tsx	Dienst, patient selector, user info	✅ Geen wijzigingen
OfflineBanner	components/swift/command-center/offline-banner.tsx	Offline detectie en banner	✅ Geen wijzigingen
DagnotatieBlock	components/swift/blocks/dagnotitie-block.tsx	Dagnotitie maken	✅ Geen wijzigingen
ZoekenBlock	components/swift/blocks/zoeken-block.tsx	Patient zoeken	✅ Geen wijzigingen
OverdrachtBlock	components/swift/blocks/overdracht-block.tsx	Dienst overdracht	⚠️ Uitbreiding: AI-filtering (E5.S1)
PatientContextCard	components/swift/blocks/patient-context-card.tsx	Patient overzicht	✅ Geen wijzigingen
FallbackPicker	components/swift/blocks/fallback-picker.tsx	Intent fallback	✅ Geen wijzigingen
BlockContainer	components/swift/blocks/block-container.tsx	Generic wrapper voor blocks	✅ Geen wijzigingen

Total: 8 components blijven werken zoals ze zijn (behalve OverdrachtBlock met uitbreiding in E5).

---

🔄 Components die WIJZIGEN

Component	Locatie	v2.1 Functie	v3.0 Wijziging
CommandCenter	components/swift/command-center/command-center.tsx	4-zone layout (context, canvas, recent, input)	→ Split-screen layout (40/60)
CommandInput	components/swift/command-center/command-input.tsx	Single-line command input	→ Multi-line chat input (onderaan chat panel)
CanvasArea	components/swift/command-center/canvas-area.tsx	Centered block display	→ Vervangen door ArtifactArea (rechts, 60%)
RecentStrip	components/swift/command-center/recent-strip.tsx	Recent actions strip	→ Verwijderen of integreren in chat history

Total: 4 components wijzigen.

---

🆕 Nieuwe Components voor v3.0

Deze components moeten worden gebouwd:

Component	Locatie	Functie	Epic	Story Points
ChatPanel	components/swift/chat/chat-panel.tsx	Scrollable message list, auto-scroll	E2	5 SP
ChatMessage	components/swift/chat/chat-message.tsx	Message bubble (user/assistant/system/error)	E2	3 SP
ChatInput	components/swift/chat/chat-input.tsx	Multi-line input onderaan chat	E2	2 SP
StreamingIndicator	components/swift/chat/streaming-indicator.tsx	Pulsating dots tijdens AI response	E2	1 SP
ChatActionLink	components/swift/chat/chat-action-link.tsx	Klikbare action links in chat	E3	1 SP
ArtifactArea	components/swift/artifacts/artifact-area.tsx	Right-side area (60%) voor blocks	E1	2 SP
ArtifactContainer	components/swift/artifacts/artifact-container.tsx	Wrapper met tabs (max 3 artifacts)	E4	5 SP
ArtifactTab	components/swift/artifacts/artifact-tab.tsx	Tab component voor artifact switching	E4	2 SP
ArtifactPlaceholder	components/swift/artifacts/artifact-placeholder.tsx	Placeholder: "Artifacts verschijnen hier"	E4	1 SP
LinkedEvidence	components/swift/shared/linked-evidence.tsx	Bronnotitie links met hover preview	E5	3 SP

Total: 10 nieuwe components, 25 Story Points

---

📊 Component Architecture (v3.0)

components/swift/
├── command-center/
│   ├── command-center.tsx         🔄 WIJZIGT - Split-screen layout
│   ├── context-bar.tsx            ✅ BLIJFT
│   └── offline-banner.tsx         ✅ BLIJFT
│
├── chat/                           🆕 NIEUW
│   ├── chat-panel.tsx
│   ├── chat-message.tsx
│   ├── chat-input.tsx
│   ├── streaming-indicator.tsx
│   └── chat-action-link.tsx
│
├── artifacts/                      🆕 NIEUW
│   ├── artifact-area.tsx
│   ├── artifact-container.tsx
│   ├── artifact-tab.tsx
│   └── artifact-placeholder.tsx
│
├── blocks/                         ✅ BLIJVEN
│   ├── dagnotitie-block.tsx
│   ├── zoeken-block.tsx
│   ├── overdracht-block.tsx       ⚠️ + AI-filtering (E5)
│   ├── patient-context-card.tsx
│   ├── fallback-picker.tsx
│   └── block-container.tsx
│
└── shared/                         🆕 NIEUW (partial)
    └── linked-evidence.tsx

---

🎯 Component Reuse Strategy

Maximize reuse:

1. ✅ Alle blocks blijven werken — Geen refactor nodig
2. ✅ Context Bar blijft — Shift colors, patient selector unchanged
3. ✅ Offline Banner blijft — Error handling unchanged
4. ✅ Block styling blijft — Category colors, sizes, shadows unchanged

Minimize new code:

1. 🆕 Chat components — 10 nieuwe components, maar simpel (message bubbles, input)
2. 🆕 Artifact wrapper — 4 components voor tab management
3. 🔄 Layout refactor — Alleen CommandCenter wijzigt naar split-screen

Total new code estimate:

• New components: ~600 LOC (10 components × ~60 LOC average)
• Modified components: ~200 LOC (4 components × ~50 LOC changes)
• Total: ~800 LOC (reasonable scope)

---

✅ E0.S1 & E0.S2 Complete

E0.S1 - Design Tokens Audit: ✅ Compleet

• Alle kleuren gedocumenteerd
• Chat message colors toegevoegd (NEW)
• Spacing, shadows, typography verified
• Verpleegkundig category colors verified
• Shift colors verified

E0.S2 - Component Inventory: ✅ Compleet

• 8 bestaande components blijven werken
• 4 components wijzigen (layout refactor)
• 10 nieuwe components nodig (~25 SP)
• Architecture diagram gemaakt

Next: E0.S3 - Medical scribe system prompt

---

Referenties

• app/globals.css — Design tokens definitie
• tailwind.config.ts — Tailwind color palette
• lib/types/report.ts — Category config
• components/swift/command-center/context-bar.tsx — Shift config
• components/swift/blocks/ — Bestaande blocks