feat: Modal and DetailPanel composites

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/composites/DetailPanel/DetailPanel.module.css

@@ -0,0 +1,108 @@
+.panel {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.25s ease, opacity 0.2s ease;
+  opacity: 0;
+  border-left: 1px solid transparent;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  flex-shrink: 0;
+}
+
+.panel.open {
+  width: 400px;
+  opacity: 1;
+  border-left-color: var(--border);
+  animation: slideInRight 0.25s ease-out both;
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.closeBtn {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.closeBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-faint);
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.tab {
+  padding: 9px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-body);
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text-secondary);
+}
+
+.tab.activeTab {
+  color: var(--amber);
+  border-bottom-color: var(--amber);
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--bg-raised);
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  background: var(--bg-surface);
+}

src/design-system/composites/DetailPanel/DetailPanel.tsx

@@ -0,0 +1,67 @@
+import { useState, type ReactNode } from 'react'
+import styles from './DetailPanel.module.css'
+
+interface Tab {
+  label: string
+  value: string
+  content: ReactNode
+}
+
+interface DetailPanelProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  tabs: Tab[]
+  actions?: ReactNode
+  className?: string
+}
+
+export function DetailPanel({ open, onClose, title, tabs, actions, className }: DetailPanelProps) {
+  const [activeTab, setActiveTab] = useState(tabs[0]?.value ?? '')
+
+  const activeContent = tabs.find((t) => t.value === activeTab)?.content
+
+  return (
+    <aside
+      className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
+      aria-hidden={!open}
+    >
+      <div className={styles.header}>
+        <span className={styles.title}>{title}</span>
+        <button
+          className={styles.closeBtn}
+          onClick={onClose}
+          aria-label="Close panel"
+          type="button"
+        >
+          &times;
+        </button>
+      </div>
+
+      {tabs.length > 0 && (
+        <div className={styles.tabs}>
+          {tabs.map((tab) => (
+            <button
+              key={tab.value}
+              className={`${styles.tab} ${tab.value === activeTab ? styles.activeTab : ''}`}
+              onClick={() => setActiveTab(tab.value)}
+              type="button"
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className={styles.body}>
+        {activeContent}
+      </div>
+
+      {actions && (
+        <div className={styles.actions}>
+          {actions}
+        </div>
+      )}
+    </aside>
+  )
+}

src/design-system/composites/Modal/Modal.module.css

@@ -0,0 +1,71 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 22, 18, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+  animation: backdropIn 0.15s ease-out;
+}
+
+@keyframes backdropIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.dialog {
+  width: 100%;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  animation: dialogIn 0.2s ease-out;
+}
+
+@keyframes dialogIn {
+  from { opacity: 0; transform: scale(0.97) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.closeBtn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.15s;
+}
+
+.closeBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-faint);
+}
+
+.body {
+  padding: 20px;
+}

src/design-system/composites/Modal/Modal.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Modal } from './Modal'
+
+describe('Modal', () => {
+  it('renders children when open', () => {
+    render(<Modal open onClose={() => {}}>Content</Modal>)
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('does not render when closed', () => {
+    render(<Modal open={false} onClose={() => {}}>Content</Modal>)
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+  })
+
+  it('renders title when provided', () => {
+    render(<Modal open onClose={() => {}} title="My Modal">Content</Modal>)
+    expect(screen.getByText('My Modal')).toBeInTheDocument()
+  })
+
+  it('calls onClose on Esc', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Modal open onClose={onClose}>Content</Modal>)
+    await user.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('calls onClose on backdrop click', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Modal open onClose={onClose}>Content</Modal>)
+    const backdrop = screen.getByTestId('modal-backdrop')
+    await user.click(backdrop)
+    expect(onClose).toHaveBeenCalled()
+  })
+})

src/design-system/composites/Modal/Modal.tsx

@@ -0,0 +1,67 @@
+import { useEffect, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './Modal.module.css'
+
+interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  children: ReactNode
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeWidths = {
+  sm: 400,
+  md: 560,
+  lg: 720,
+}
+
+export function Modal({ open, onClose, title, children, size = 'md', className }: ModalProps) {
+  // Close on Esc
+  useEffect(() => {
+    if (!open) return
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return createPortal(
+    <div
+      className={styles.backdrop}
+      data-testid="modal-backdrop"
+      onClick={onClose}
+    >
+      <div
+        className={`${styles.dialog} ${className ?? ''}`}
+        style={{ maxWidth: sizeWidths[size] }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? 'modal-title' : undefined}
+      >
+        {title && (
+          <div className={styles.header}>
+            <h2 id="modal-title" className={styles.title}>{title}</h2>
+            <button
+              className={styles.closeBtn}
+              onClick={onClose}
+              aria-label="Close"
+              type="button"
+            >
+              &times;
+            </button>
+          </div>
+        )}
+        <div className={styles.body}>
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}