@toolr/ui-design 0.1.0

package/components/ui/segmented-toggle.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react'
+import { Tooltip, type TooltipContent, type TooltipPosition } from './tooltip.tsx'
+
+export interface SegmentedToggleOption<T extends string> {
+  value: T
+  icon: ReactNode
+  tooltip: TooltipContent
+}
+
+export interface SegmentedToggleProps<T extends string> {
+  options: SegmentedToggleOption<T>[]
+  value: T
+  onChange: (value: T) => void
+  accentColor?: 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky'
+  /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
+  variant?: 'filled' | 'outline'
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  tooltipPosition?: TooltipPosition
+  testId?: string
+  disabled?: boolean
+  /** Tooltip shown on the entire toggle when disabled */
+  disabledTooltip?: TooltipContent
+}
+
+/** Button sizes match IconButton dimensions */
+const BUTTON_SIZE_CLASSES = {
+  xss: 'w-[18px] h-[18px]',
+  xs: 'w-6 h-6',
+  sm: 'w-7 h-7',
+  md: 'w-8 h-8',
+  lg: 'w-9 h-9',
+}
+
+const ROUNDING_CLASSES = {
+  xss: 'rounded-[3px]',
+  xs: 'rounded-[5px]',
+  sm: 'rounded-md',
+  md: 'rounded-md',
+  lg: 'rounded-md',
+}
+
+const ACTIVE_COLORS: Record<string, string> = {
+  blue: 'bg-blue-500/20 text-blue-300 border-blue-500/40',
+  purple: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
+  orange: 'bg-orange-500/20 text-orange-300 border-orange-500/40',
+  green: 'bg-green-500/20 text-green-300 border-green-500/40',
+  pink: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
+  amber: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  emerald: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40',
+  teal: 'bg-teal-500/20 text-teal-300 border-teal-500/40',
+  sky: 'bg-sky-500/20 text-sky-300 border-sky-500/40',
+}
+
+const HOVER_COLORS: Record<string, string> = {
+  blue: 'hover:bg-blue-500/15 hover:text-blue-300',
+  purple: 'hover:bg-purple-500/15 hover:text-purple-300',
+  orange: 'hover:bg-orange-500/15 hover:text-orange-300',
+  green: 'hover:bg-green-500/15 hover:text-green-300',
+  pink: 'hover:bg-pink-500/15 hover:text-pink-300',
+  amber: 'hover:bg-amber-500/15 hover:text-amber-300',
+  emerald: 'hover:bg-emerald-500/15 hover:text-emerald-300',
+  teal: 'hover:bg-teal-500/15 hover:text-teal-300',
+  sky: 'hover:bg-sky-500/15 hover:text-sky-300',
+}
+
+const OUTLINE_CONTAINER: Record<string, string> = {
+  blue: 'flex items-center border border-blue-500/50 rounded-md',
+  purple: 'flex items-center border border-purple-500/50 rounded-md',
+  orange: 'flex items-center border border-orange-500/50 rounded-md',
+  green: 'flex items-center border border-green-500/50 rounded-md',
+  pink: 'flex items-center border border-pink-500/50 rounded-md',
+  amber: 'flex items-center border border-amber-500/50 rounded-md',
+  emerald: 'flex items-center border border-emerald-500/50 rounded-md',
+  teal: 'flex items-center border border-teal-500/50 rounded-md',
+  sky: 'flex items-center border border-sky-500/50 rounded-md',
+}
+
+export function SegmentedToggle<T extends string>({
+  options,
+  value,
+  onChange,
+  accentColor = 'blue',
+  variant = 'outline',
+  size = 'sm',
+  tooltipPosition = 'bottom',
+  testId,
+  disabled = false,
+  disabledTooltip,
+}: SegmentedToggleProps<T>) {
+  const isOutline = variant === 'outline'
+  const containerClasses = isOutline
+    ? OUTLINE_CONTAINER[accentColor] || OUTLINE_CONTAINER.blue
+    : 'flex items-center bg-neutral-800/50 border border-neutral-700 rounded-md'
+
+  const toggle = (
+    <div
+      className={`${containerClasses} ${disabled ? 'opacity-40 pointer-events-none' : ''}`}
+      data-testid={testId}
+    >
+      {options.map((option, i) => {
+        const isActive = value === option.value
+        const isFirst = i === 0
+        const isLast = i === options.length - 1
+        const rounding = isFirst && isLast ? ROUNDING_CLASSES[size] : isFirst ? `rounded-l-[5px]` : isLast ? `rounded-r-[5px]` : ''
+        return (
+          <Tooltip key={option.value} content={option.tooltip} position={tooltipPosition}>
+            <button
+              onClick={() => onChange(option.value)}
+              disabled={disabled}
+              className={`flex items-center justify-center ${BUTTON_SIZE_CLASSES[size]} ${rounding} text-xs font-medium transition-all cursor-pointer ${
+                isActive
+                  ? ACTIVE_COLORS[accentColor] || ACTIVE_COLORS.blue
+                  : `text-neutral-400 ${HOVER_COLORS[accentColor] || HOVER_COLORS.blue}`
+              }`}
+            >
+              {option.icon}
+            </button>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+
+  if (disabled && disabledTooltip) {
+    return (
+      <Tooltip content={disabledTooltip} position={tooltipPosition}>
+        <div className="pointer-events-auto">{toggle}</div>
+      </Tooltip>
+    )
+  }
+
+  return toggle
+}

package/components/ui/select.tsx

@@ -0,0 +1,172 @@
+import { useState, useRef, useEffect, useCallback, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Check } from 'lucide-react'
+import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
+import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+export interface SelectOption<T extends string | number = string> {
+  value: T
+  label: string
+  icon?: ReactNode
+}
+
+export interface SelectProps<T extends string | number = string> {
+  value: T
+  options: SelectOption<T>[]
+  onChange: (value: T) => void
+  placeholder?: string
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  align?: 'left' | 'right'
+  disabled?: boolean
+  className?: string
+}
+
+const VARIANT_CLASSES = {
+  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-neutral-800' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800', menuBg: 'bg-neutral-800/90 backdrop-blur-sm' },
+}
+
+const SIZE_CLASSES = {
+  xss: 'h-[18px] px-1.5 text-[10px]',
+  xs: 'h-6 px-2 text-xs',
+  sm: 'h-7 px-2 text-xs',
+  md: 'h-8 px-3 text-sm',
+  lg: 'h-9 px-3 text-sm',
+}
+
+export function Select<T extends string | number = string>({
+  value,
+  options,
+  onChange,
+  placeholder = 'Select...',
+  variant = 'outline',
+  color = 'blue',
+  size = 'sm',
+  align = 'left',
+  disabled = false,
+  className = '',
+}: SelectProps<T>) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [highlightIdx, setHighlightIdx] = useState(-1)
+  const ref = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useDropdownMaxHeight<HTMLDivElement>(isOpen)
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number; minWidth: number } | null>(null)
+
+  const updateMenuPos = useCallback(() => {
+    if (!buttonRef.current) return
+    const rect = buttonRef.current.getBoundingClientRect()
+    const left = align === 'right' ? rect.right : rect.left
+    setMenuPos({ top: rect.bottom + 4, left, minWidth: Math.max(rect.width, 140) })
+  }, [align])
+
+  const open = useCallback(() => {
+    setHighlightIdx(options.findIndex((o) => o.value === value))
+    updateMenuPos()
+    setIsOpen(true)
+  }, [options, value, updateMenuPos])
+
+  const close = useCallback(() => {
+    setHighlightIdx(-1)
+    setIsOpen(false)
+  }, [])
+
+  // Close on click outside both the trigger and the portal menu
+  useEffect(() => {
+    if (!isOpen) return
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (ref.current?.contains(target)) return
+      if (menuRef.current?.contains(target)) return
+      close()
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [isOpen, close])
+
+  useEffect(() => {
+    if (highlightIdx >= 0 && menuRef.current) {
+      menuRef.current.querySelector<HTMLElement>(`[data-idx="${highlightIdx}"]`)?.scrollIntoView({ block: 'nearest' })
+    }
+  }, [highlightIdx, menuRef])
+
+  const v = VARIANT_CLASSES[variant]
+  const s = SIZE_CLASSES[size]
+  const selectedOption = options.find((o) => o.value === value)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightIdx((i) => Math.min(i + 1, options.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && highlightIdx >= 0) {
+      e.preventDefault()
+      onChange(options[highlightIdx].value)
+      close()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+    }
+  }
+
+  return (
+    <div className={`inline-flex ${className}`} ref={ref} onKeyDown={handleKeyDown}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => !disabled && (isOpen ? close() : open())}
+        disabled={disabled}
+        className={`flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[color].border} text-neutral-200 focus:outline-none ${FORM_COLORS[color].focus} transition-colors ${
+          disabled ? 'opacity-50 cursor-not-allowed' : `cursor-pointer ${FORM_COLORS[color].hover}`
+        } ${s}`}
+      >
+        {selectedOption?.icon}
+        <span className={`whitespace-nowrap ${selectedOption ? '' : 'text-neutral-500'}`}>
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <ChevronDown className={`w-3 h-3 ml-auto text-neutral-500 transition-transform shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+      {isOpen && menuPos && createPortal(
+        <div
+          ref={menuRef}
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          style={{
+            top: menuPos.top,
+            left: align === 'right' ? undefined : menuPos.left,
+            right: align === 'right' ? window.innerWidth - menuPos.left : undefined,
+            minWidth: menuPos.minWidth,
+          }}
+        >
+          {options.map((opt, idx) => {
+            const isHighlighted = highlightIdx === idx
+            const isSelected = value === opt.value
+            return (
+              <button
+                key={String(opt.value)}
+                type="button"
+                data-idx={idx}
+                onClick={() => { onChange(opt.value); close() }}
+                onPointerEnter={() => setHighlightIdx(idx)}
+                className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
+                  isHighlighted
+                    ? 'bg-neutral-600 text-neutral-200'
+                    : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+                }`}
+              >
+                <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : 'invisible'}`} />
+                {opt.icon}
+                <span>{opt.label}</span>
+              </button>
+            )
+          })}
+        </div>,
+        document.body,
+      )}
+    </div>
+  )
+}

package/components/ui/selection-grid.tsx

@@ -0,0 +1,313 @@
+import {
+  Check, Settings, Code, Folder, File, Terminal, Globe, Database, Cloud,
+  Sparkles, Zap, Shield, ShieldCheck, Wand2, Star, Heart, Bell,
+  Search, Filter, Eye, Lock, User, Users, Image, Tag, Pin, Mail,
+  Send, Bookmark, Play, Pause, Bot, Plug, Puzzle, Webhook, Scan,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import { ConfirmBadge, type ConfirmBadgeColor } from './confirm-badge.tsx'
+import { cn } from '../lib/cn.ts'
+import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
+
+const iconMap: Partial<Record<IconName, LucideIcon>> = {
+  'check': Check,
+  'settings': Settings,
+  'code': Code,
+  'folder': Folder,
+  'file': File,
+  'terminal': Terminal,
+  'globe': Globe,
+  'database': Database,
+  'cloud': Cloud,
+  'sparkles': Sparkles,
+  'zap': Zap,
+  'shield': Shield,
+  'shield-check': ShieldCheck,
+  'wand': Wand2,
+  'star': Star,
+  'heart': Heart,
+  'bell': Bell,
+  'search': Search,
+  'filter': Filter,
+  'eye': Eye,
+  'lock': Lock,
+  'user': User,
+  'users': Users,
+  'image': Image,
+  'tag': Tag,
+  'pin': Pin,
+  'mail': Mail,
+  'send': Send,
+  'bookmark': Bookmark,
+  'play': Play,
+  'pause': Pause,
+  'bot': Bot,
+  'plug': Plug,
+  'puzzle': Puzzle,
+  'webhook': Webhook,
+  'scan': Scan,
+}
+
+/* ── Preset logos (shared AiToolIcon) ─────────────────────── */
+
+type IconProps = { className?: string; style?: React.CSSProperties }
+
+function makeToolLogo(toolKey: AiToolKey): React.ComponentType<IconProps> {
+  function ToolLogo({ className, style }: IconProps) {
+    return <AiToolIcon tool={toolKey} className={className} style={style} />
+  }
+  return ToolLogo
+}
+
+/* ── Preset types & data ──────────────────────────────────── */
+
+export type CodingToolId = 'claude-code' | 'github-copilot' | 'codex-cli' | 'gemini-cli' | 'opencode'
+
+export type CodingToolPresetConfig = CodingToolId | {
+  id: CodingToolId
+  description?: string
+  disabled?: boolean
+}
+
+const CODING_TOOL_PRESETS: Record<CodingToolId, { name: string; description: string; color: string; badgeColor: ConfirmBadgeColor; Logo: React.ComponentType<IconProps> }> = {
+  'claude-code': { name: AI_TOOL_NAMES.claude, description: 'Security & architecture focus', color: '#a78bfa', badgeColor: 'violet', Logo: makeToolLogo('claude') },
+  'github-copilot': { name: AI_TOOL_NAMES.copilot, description: 'Code quality & patterns', color: '#f97316', badgeColor: 'orange', Logo: makeToolLogo('copilot') },
+  'codex-cli': { name: AI_TOOL_NAMES.codex, description: 'Performance & optimization', color: '#60a5fa', badgeColor: 'blue', Logo: makeToolLogo('codex') },
+  'gemini-cli': { name: AI_TOOL_NAMES.gemini, description: 'Best practices & docs', color: '#22d3ee', badgeColor: 'cyan', Logo: makeToolLogo('gemini') },
+  'opencode': { name: AI_TOOL_NAMES.opencode, description: 'Provider-agnostic AI coding agent', color: '#a1a1aa', badgeColor: 'neutral', Logo: makeToolLogo('opencode') },
+}
+
+function resolvePresets(presets: CodingToolPresetConfig[]): SelectionCardItem[] {
+  const result: SelectionCardItem[] = []
+  for (const p of presets) {
+    const id = typeof p === 'string' ? p : p.id
+    const data = CODING_TOOL_PRESETS[id]
+    if (!data) continue
+    const item: SelectionCardItem = {
+      id,
+      IconComponent: data.Logo,
+      name: data.name,
+      description: data.description,
+      color: data.color,
+      badgeColor: data.badgeColor,
+    }
+    if (typeof p === 'object') {
+      if (p.description !== undefined) item.description = p.description
+      if (p.disabled !== undefined) item.disabled = p.disabled
+    }
+    result.push(item)
+  }
+  return result
+}
+
+/* ── Public types ─────────────────────────────────────────── */
+
+export interface SelectionCardItem {
+  id: string
+  icon?: IconName
+  /** Custom SVG icon component. Receives className and style. Takes precedence over `icon`. */
+  IconComponent?: React.ComponentType<IconProps>
+  name: string
+  description?: string
+  /** Accent color for selected state border/bg. CSS color string like '#a78bfa' */
+  color?: string
+  /** Named color for the confirm badge. Defaults to 'blue'. */
+  badgeColor?: ConfirmBadgeColor
+  disabled?: boolean
+}
+
+export interface SelectionGridProps {
+  /** Custom items with manual icon/name/color configuration */
+  items?: SelectionCardItem[]
+  /** Built-in coding tool presets. Pass tool IDs or config objects. Ignored when `items` is provided. */
+  presets?: CodingToolPresetConfig[]
+  selectedIds: string[]
+  onSelect: (ids: string[]) => void
+  /** Single selection or multiple */
+  mode?: 'single' | 'multiple'
+  /** Grid (icon-top cards) or list (icon-left rows) */
+  layout?: 'grid' | 'list'
+  /** Number of columns for grid layout (auto if not set) */
+  columns?: number
+  className?: string
+}
+
+/* ── Helpers ───────────────────────────────────────────────── */
+
+const DEFAULT_COLOR = 'blue-400'
+
+function resolveColor(color?: string): string {
+  return color || DEFAULT_COLOR
+}
+
+function autoColumns(itemCount: number): number {
+  if (itemCount <= 2) return itemCount
+  if (itemCount <= 4) return itemCount
+  return 5
+}
+
+/* ── Component ─────────────────────────────────────────────── */
+
+export function SelectionGrid({
+  items: itemsProp,
+  presets,
+  selectedIds,
+  onSelect,
+  mode = 'multiple',
+  layout = 'grid',
+  columns,
+  className,
+}: SelectionGridProps) {
+  const items = itemsProp || (presets ? resolvePresets(presets) : [])
+
+  function handleClick(item: SelectionCardItem) {
+    if (item.disabled) return
+
+    if (mode === 'single') {
+      onSelect([item.id])
+      return
+    }
+
+    if (selectedIds.includes(item.id)) {
+      onSelect(selectedIds.filter((id) => id !== item.id))
+    } else {
+      onSelect([...selectedIds, item.id])
+    }
+  }
+
+  const cols = columns || autoColumns(items.length)
+
+  if (layout === 'list') {
+    return (
+      <div
+        className={cn('grid gap-3', className)}
+        style={{ gridTemplateColumns: `repeat(${columns || 1}, 1fr)` }}
+      >
+        {items.map((item) => (
+          <ListCard
+            key={item.id}
+            item={item}
+            selected={selectedIds.includes(item.id)}
+            onClick={() => handleClick(item)}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn('grid gap-3', className)}
+      style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}
+    >
+      {items.map((item) => (
+        <GridCard
+          key={item.id}
+          item={item}
+          selected={selectedIds.includes(item.id)}
+          onClick={() => handleClick(item)}
+        />
+      ))}
+    </div>
+  )
+}
+
+/* ── Card subcomponents ────────────────────────────────────── */
+
+interface CardProps {
+  item: SelectionCardItem
+  selected: boolean
+  onClick: () => void
+}
+
+function GridCard({ item, selected, onClick }: CardProps) {
+  const color = resolveColor(item.color)
+  const Icon = item.IconComponent || (item.icon ? iconMap[item.icon] : undefined)
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={item.disabled}
+      className={cn(
+        'relative p-3 rounded-lg text-center transition-all border-2 flex flex-col items-center',
+        item.disabled
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          : selected
+            ? 'cursor-pointer'
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+      )}
+      style={
+        selected && !item.disabled
+          ? { borderColor: color, backgroundColor: `${color}15` }
+          : undefined
+      }
+    >
+      {selected && !item.disabled && (
+        <span className="absolute top-1 right-1">
+          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
+        </span>
+      )}
+
+      {Icon && (
+        <Icon
+          className="w-7 h-7 mb-1"
+          style={{ color: item.disabled ? undefined : (item.color || '#9ca3af') }}
+        />
+      )}
+
+      <span className="text-xs font-medium text-neutral-200 block">{item.name}</span>
+
+      {item.description && (
+        <span className="text-xs text-neutral-500 block mt-0.5">{item.description}</span>
+      )}
+    </button>
+  )
+}
+
+function ListCard({ item, selected, onClick }: CardProps) {
+  const color = resolveColor(item.color)
+  const Icon = item.IconComponent || (item.icon ? iconMap[item.icon] : undefined)
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={item.disabled}
+      className={cn(
+        'relative p-3 rounded-lg transition-all border-2 flex items-center gap-3 text-left',
+        item.disabled
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          : selected
+            ? 'cursor-pointer'
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+      )}
+      style={
+        selected && !item.disabled
+          ? { borderColor: color, backgroundColor: `${color}15` }
+          : undefined
+      }
+    >
+      {selected && !item.disabled && (
+        <span className="absolute top-1 right-1">
+          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
+        </span>
+      )}
+
+      {Icon && (
+        <Icon
+          className="w-5 h-5 flex-shrink-0"
+          style={{ color: item.disabled ? undefined : (item.color || '#9ca3af') }}
+        />
+      )}
+
+      <div className="min-w-0">
+        <span className="text-xs font-medium text-neutral-200 block">{item.name}</span>
+        {item.description && (
+          <span className="text-xs text-neutral-500 block mt-0.5">{item.description}</span>
+        )}
+      </div>
+    </button>
+  )
+}