US-003: Create DetailPanelContext, DetailPanel component, and useFocusTrap hook

Implements core detail panel infrastructure for slide-in content panels:

- DetailPanelContext: Manages panel state (content, open/close, isOpen)
- DetailPanel: Slide-in panel component with backdrop, header, and scrollable body
- useFocusTrap: Keyboard focus trap hook for modal accessibility
- Width mapping: narrow (400px) for kpi/skill/education, wide (60vw) for consultation/project/career-role
- Title mapping derives from content data (kpi.label, skill.name, etc.)
- Close triggers: backdrop click, Escape key, X button
- ARIA: aria-modal, role=dialog, aria-labelledby
- Mobile responsive: both widths become 100vw on <768px
- prefers-reduced-motion: instant appear, no animations
- Placeholder content (real renderers in later stories)
- Export CardHeaderProps interface from Card.tsx
- Add responsive panel width CSS rules

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

This commit is contained in:

A Charlwood

2026-02-13 23:02:59 +00:00

parent f7e9c88762

commit cf5399a767

5 changed files with 379 additions and 1 deletions

									
										src/components/Card.tsx
									
		+1
		-1
	
												View File
												
				@@ -35,7 +35,7 @@ export function Card({ children, full, className, tileId }: CardProps) {

				  )

				}

				interface CardHeaderProps {

				export interface CardHeaderProps {

				  dotColor: 'teal' | 'amber' | 'green' | 'alert' | 'purple'

				  title: string

				  rightText?: string