feat: add MultiSelect composite component

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

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

@@ -0,0 +1,148 @@
+.wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  gap: 8px;
+  min-width: 0;
+}
+
+.trigger:focus-visible {
+  border-color: var(--amber);
+  box-shadow: 0 0 0 3px var(--amber-bg);
+}
+
+.trigger[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.triggerText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.triggerPlaceholder {
+  color: var(--text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  color: var(--text-faint);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.panel {
+  position: fixed;
+  z-index: 1000;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  animation: panelIn 0.12s ease-out;
+}
+
+@keyframes panelIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.search {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 12px;
+  outline: none;
+}
+
+.search::placeholder {
+  color: var(--text-faint);
+}
+
+.optionList {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  transition: background 0.1s;
+}
+
+.option:hover {
+  background: var(--bg-hover);
+}
+
+.checkbox {
+  accent-color: var(--amber);
+  cursor: pointer;
+}
+
+.optionLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty {
+  padding: 12px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+  font-family: var(--font-body);
+}
+
+.footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.applyBtn {
+  padding: 4px 16px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--amber);
+  color: var(--bg-base);
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.applyBtn:hover {
+  background: var(--amber-hover);
+}

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

@@ -0,0 +1,162 @@
+import { useState, useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './MultiSelect.module.css'
+
+export interface MultiSelectOption {
+  value: string
+  label: string
+}
+
+interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+  placeholder?: string
+  searchable?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+export function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select...',
+  searchable = true,
+  disabled = false,
+  className,
+}: MultiSelectProps) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [pending, setPending] = useState<string[]>(value)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+
+  // Sync pending with value when opening
+  useEffect(() => {
+    if (open) {
+      setPending(value)
+      setSearch('')
+    }
+  }, [open, value])
+
+  // Position the panel below the trigger
+  useEffect(() => {
+    if (open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect()
+      setPos({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+      })
+    }
+  }, [open])
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return
+    function handleClick(e: MouseEvent) {
+      if (
+        panelRef.current && !panelRef.current.contains(e.target as Node) &&
+        triggerRef.current && !triggerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open])
+
+  function toggleOption(optValue: string) {
+    setPending((prev) =>
+      prev.includes(optValue) ? prev.filter((v) => v !== optValue) : [...prev, optValue]
+    )
+  }
+
+  function handleApply() {
+    onChange(pending)
+    setOpen(false)
+  }
+
+  const filtered = options.filter((opt) =>
+    opt.label.toLowerCase().includes(search.toLowerCase())
+  )
+
+  const triggerLabel = value.length > 0 ? `${value.length} selected` : placeholder
+
+  return (
+    <div className={`${styles.wrap} ${className ?? ''}`}>
+      <button
+        ref={triggerRef}
+        className={styles.trigger}
+        onClick={() => !disabled && setOpen(!open)}
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-disabled={disabled}
+        type="button"
+      >
+        <span className={value.length > 0 ? styles.triggerText : styles.triggerPlaceholder}>
+          {triggerLabel}
+        </span>
+        <span className={styles.chevron} aria-hidden="true">▾</span>
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={panelRef}
+          className={styles.panel}
+          style={{ top: pos.top, left: pos.left, width: Math.max(pos.width, 200) }}
+        >
+          {searchable && (
+            <input
+              className={styles.search}
+              placeholder="Search..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              autoFocus
+            />
+          )}
+          <div className={styles.optionList} role="listbox">
+            {filtered.map((opt) => (
+              <label key={opt.value} className={styles.option} role="option" aria-selected={pending.includes(opt.value)}>
+                <input
+                  type="checkbox"
+                  className={styles.checkbox}
+                  checked={pending.includes(opt.value)}
+                  onChange={() => toggleOption(opt.value)}
+                  aria-label={opt.label}
+                />
+                <span className={styles.optionLabel}>{opt.label}</span>
+              </label>
+            ))}
+            {filtered.length === 0 && (
+              <div className={styles.empty}>No matches</div>
+            )}
+          </div>
+          <div className={styles.footer}>
+            <button
+              className={styles.applyBtn}
+              onClick={handleApply}
+              type="button"
+            >
+              Apply ({pending.length})
+            </button>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

src/design-system/composites/index.ts

@@ -6,6 +6,8 @@ export { BarChart } from './BarChart/BarChart'
 export { Breadcrumb } from './Breadcrumb/Breadcrumb'
 export { CommandPalette } from './CommandPalette/CommandPalette'
 export type { SearchResult, SearchCategory, ScopeFilter } from './CommandPalette/types'
+export { ConfirmDialog } from './ConfirmDialog/ConfirmDialog'
+export type { ConfirmDialogProps } from './ConfirmDialog/ConfirmDialog'
 export { DataTable } from './DataTable/DataTable'
 export type { Column, DataTableProps } from './DataTable/types'
 export { DetailPanel } from './DetailPanel/DetailPanel'
@@ -17,6 +19,8 @@ export { FilterBar } from './FilterBar/FilterBar'
 export { LineChart } from './LineChart/LineChart'
 export { MenuItem } from './MenuItem/MenuItem'
 export { Modal } from './Modal/Modal'
+export { MultiSelect } from './MultiSelect/MultiSelect'
+export type { MultiSelectOption } from './MultiSelect/MultiSelect'
 export { Popover } from './Popover/Popover'
 export { ProcessorTimeline } from './ProcessorTimeline/ProcessorTimeline'
 export type { ProcessorStep } from './ProcessorTimeline/ProcessorTimeline'