From f7e9c88762631aec939641748a1b28a1153968a8 Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 22:59:26 +0000
Subject: [PATCH] US-002: Add TypeScript types and CSS custom properties for
 depth features

Add foundation types and styles for upcoming depth enhancements:

TypeScript types (src/types/pmr.ts):
- SkillCategory type for grouping skills
- KPIStory interface for rich KPI detail content
- story? field added to KPI interface
- ConstellationNode and ConstellationLink for D3 career graph
- DetailPanelContent discriminated union for panel routing
- EducationExtra interface for expanded education detail

CSS custom properties (src/index.css):
- --subnav-height: 36px (section jump bar)
- --panel-narrow: 400px, --panel-wide: 60vw (detail panel widths)
- --backdrop-blur: 4px, --backdrop-bg (panel overlay)
- @keyframes panel-slide-in, panel-slide-out, backdrop-fade-in
- prefers-reduced-motion overrides for instant panel animations

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/index.css    | 39 ++++++++++++++++++++++++++++++++++++++
 src/types/pmr.ts | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)

diff --git a/src/index.css b/src/index.css
index 706400b..be85030 100644
--- a/src/index.css
+++ b/src/index.css
@@ -124,6 +124,7 @@
   --border-light: #E4EDEB;
   --sidebar-width: 272px;
   --topbar-height: 48px;
+  --subnav-height: 36px;
   --radius-card: 8px;
   --radius-sm: 6px;
   --shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
@@ -132,6 +133,12 @@
   --font-body: var(--font-ui);
   --font-mono-dashboard: 'Geist Mono', 'Fira Code', monospace;
 
+  /* Detail panel */
+  --panel-narrow: 400px;
+  --panel-wide: 60vw;
+  --backdrop-blur: 4px;
+  --backdrop-bg: rgba(26,43,42,0.15);
+
   /* Legacy PMR tokens — kept for backward compat during transition (cleaned up in Task 21) */
   --pmr-content: #F0F5F4;
   --pmr-card: #FFFFFF;
@@ -400,10 +407,42 @@ textarea:focus-visible {
   outline-offset: 0px;
 }
 
+/* ===== DETAIL PANEL ANIMATIONS ===== */
+@keyframes panel-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes panel-slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes backdrop-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   /* Disable pulse animation on status badge dot */
   @keyframes pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 1; }
   }
+
+  /* Instant panel animations */
+  @keyframes panel-slide-in {
+    from { transform: none; }
+    to { transform: none; }
+  }
+
+  @keyframes panel-slide-out {
+    from { transform: none; }
+    to { transform: none; }
+  }
+
+  @keyframes backdrop-fade-in {
+    from { opacity: 1; }
+    to { opacity: 1; }
+  }
 }
diff --git a/src/types/pmr.ts b/src/types/pmr.ts
index 99bc2cb..bdf2267 100644
--- a/src/types/pmr.ts
+++ b/src/types/pmr.ts
@@ -132,6 +132,7 @@ export interface KPI {
   sub: string
   colorVariant: 'green' | 'amber' | 'teal'
   explanation: string
+  story?: KPIStory      // NEW: rich detail for panel
 }
 
 export interface SkillMedication {
@@ -145,3 +146,51 @@ export interface SkillMedication {
   status: 'Active' | 'Historical'
   icon: string
 }
+
+// Skill categories for grouped display
+export type SkillCategory = 'Technical' | 'Domain' | 'Leadership'
+
+// Extended KPI with story content for detail panel
+export interface KPIStory {
+  context: string       // What this number covers
+  role: string          // Your role / what you did
+  outcomes: string[]    // Key decisions or results
+  period?: string       // Time period
+}
+
+// Constellation-specific types
+export interface ConstellationNode {
+  id: string
+  type: 'role' | 'skill'
+  label: string
+  shortLabel?: string    // abbreviated for small nodes
+  organization?: string
+  startYear?: number
+  endYear?: number | null
+  orgColor?: string
+  domain?: 'clinical' | 'technical' | 'leadership'
+}
+
+export interface ConstellationLink {
+  source: string
+  target: string
+  strength: number
+}
+
+// Detail panel content union
+export type DetailPanelContent =
+  | { type: 'kpi'; kpi: KPI }
+  | { type: 'skill'; skill: SkillMedication }
+  | { type: 'skills-all'; category?: SkillCategory }
+  | { type: 'consultation'; consultation: Consultation }
+  | { type: 'project'; investigation: Investigation }
+  | { type: 'education'; document: Document }
+  | { type: 'career-role'; consultation: Consultation }
+
+// Education extras (for detail panel)
+export interface EducationExtra {
+  documentId: string
+  extracurriculars?: string[]
+  researchDescription?: string
+  programmeDetail?: string
+}