@toolr/ui-design 0.1.0

package/components/ui/modal.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Info, AlertTriangle, AlertCircle, Check } from 'lucide-react'
+import { IconButton, type ActionItem } from './icon-button.tsx'
+import { FormActions } from './form-actions.tsx'
+import type { ReactNode } from 'react'
+
+export type ModalKind = 'info' | 'warning' | 'error' | 'orange' | 'success'
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
+
+const SIZE_CLASSES: Record<ModalSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+}
+
+const KIND_ICON: Record<ModalKind, ReactNode> = {
+  info: <Info className="w-6 h-6 text-blue-400" />,
+  warning: <AlertTriangle className="w-6 h-6 text-yellow-400" />,
+  error: <AlertCircle className="w-6 h-6 text-red-400" />,
+  orange: <AlertTriangle className="w-6 h-6 text-orange-400" />,
+  success: <Check className="w-6 h-6 text-green-400" />,
+}
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  kind?: ModalKind
+  /** Modal width size */
+  size?: ModalSize
+  /** Hide the close button in the header (useful when footer has action buttons) */
+  hideCloseButton?: boolean
+  /** Optional actions to render in the header (top right) */
+  headerActions?: ActionItem[]
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', hideCloseButton = false, headerActions, testId }: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isOpen, onClose])
+
+  useEffect(() => {
+    if (!isOpen) return
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div
+        ref={modalRef}
+        data-testid={testId}
+        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-2xl ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
+      >
+        <div className="flex items-center gap-3 px-5 py-4 border-b border-neutral-800">
+          {KIND_ICON[kind]}
+          <h3 className="text-lg font-semibold text-white flex-1">{title}</h3>
+          {headerActions?.map((a, i) => <IconButton key={i} {...a} />)}
+          {!hideCloseButton && (
+            <IconButton
+              icon="x"
+              onClick={onClose}
+              size="sm"
+              color="neutral"
+              tooltip={{ description: 'Close this modal' }}
+              testId="modal-close"
+            />
+          )}
+        </div>
+        <div className="px-5 py-4">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+export interface ConfirmModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void | Promise<void>
+  title: string
+  message: string
+  warning?: string
+  warningItems?: string[]
+  kind?: ModalKind
+  confirmColor?: 'red' | 'blue' | 'orange' | 'yellow'
+  isLoading?: boolean
+  confirmDisabled?: boolean
+}
+
+export function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  warning,
+  warningItems,
+  kind = 'warning',
+  confirmColor = 'blue',
+  isLoading = false,
+  confirmDisabled = false,
+}: ConfirmModalProps) {
+  const [isConfirming, setIsConfirming] = useState(false)
+
+  const isDisabled = isLoading || isConfirming || confirmDisabled
+  const isInProgress = isLoading || isConfirming
+
+  const handleConfirm = async () => {
+    setIsConfirming(true)
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+    await new Promise(resolve => setTimeout(resolve, 50))
+    try {
+      await onConfirm()
+    } finally {
+      setIsConfirming(false)
+      onClose()
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
+      <div className="text-neutral-300 mb-6">
+        {message}
+        {warning && (
+          <div className="mt-3 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+            <p className="text-amber-300 text-sm font-medium">{warning}</p>
+            {warningItems && warningItems.length > 0 && (
+              <ul className="mt-2 space-y-1">
+                {warningItems.map((item, i) => (
+                  <li key={i} className="text-amber-300/80 text-sm ml-4 list-disc">{item}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+      <FormActions
+        padding="compact"
+        border={false}
+        onCancel={onClose}
+        cancelTooltip="Cancel this action"
+        onConfirm={handleConfirm}
+        confirmTooltip={`Confirm: ${title}`}
+        confirmColor={confirmColor}
+        confirmDisabled={isDisabled}
+        confirmStatus={isInProgress ? 'loading' : undefined}
+      />
+    </Modal>
+  )
+}
+
+export interface AlertModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  message: string
+  kind?: ModalKind
+}
+
+export function AlertModal({
+  isOpen,
+  onClose,
+  title,
+  message,
+  kind = 'info',
+}: AlertModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
+      <div className="text-neutral-300 mb-6">{message}</div>
+      <FormActions
+        padding="compact"
+        border={false}
+        onConfirm={onClose}
+        confirmTooltip="Dismiss this alert"
+      />
+    </Modal>
+  )
+}

package/components/ui/nav-card.tsx

@@ -0,0 +1,81 @@
+/** Navigation card with icon, description, badge, and hover lift effect. */
+
+import {
+  Settings, Puzzle, Zap, Shield, Folder, Code, Database, Globe,
+  Terminal, Star, Bell, User, Users, File, Tag, Sparkles, Search,
+  Lock, Mail, Cloud, Heart, Bookmark, Pin, Bot, Plug,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import { Badge, type BadgeColor } from './badge.tsx'
+import { cn } from '../lib/cn.ts'
+
+const iconSubset: Partial<Record<IconName, LucideIcon>> = {
+  settings: Settings, puzzle: Puzzle, zap: Zap, shield: Shield,
+  folder: Folder, code: Code, database: Database, globe: Globe,
+  terminal: Terminal, star: Star, bell: Bell, user: User,
+  users: Users, file: File, tag: Tag, sparkles: Sparkles,
+  search: Search, lock: Lock, mail: Mail, cloud: Cloud,
+  heart: Heart, bookmark: Bookmark, pin: Pin, bot: Bot, plug: Plug,
+}
+
+export interface NavCardProps {
+  title: string
+  description?: string
+  icon?: IconName
+  iconColor?: string
+  badge?: number | string
+  badgeColor?: BadgeColor
+  onClick?: () => void
+  disabled?: boolean
+  className?: string
+}
+
+export function NavCard({
+  title,
+  description,
+  icon,
+  iconColor = '#60a5fa',
+  badge,
+  badgeColor = 'blue',
+  onClick,
+  disabled = false,
+  className,
+}: NavCardProps) {
+  const Icon = icon ? iconSubset[icon] : undefined
+
+  return (
+    <button
+      type="button"
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      className={cn(
+        'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-800 p-4 transition-all duration-200 cursor-pointer',
+        !disabled && 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20 hover:border-neutral-600 hover:bg-neutral-700',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+    >
+      {badge !== undefined && (
+        <span className="absolute top-3 right-3">
+          <Badge value={badge} color={badgeColor} size="xs" />
+        </span>
+      )}
+
+      {Icon && (
+        <div
+          className="w-9 h-9 rounded-lg flex items-center justify-center mb-3"
+          style={{ backgroundColor: `${iconColor}15` }}
+        >
+          <Icon className="w-4.5 h-4.5" style={{ color: iconColor }} />
+        </div>
+      )}
+
+      <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+
+      {description && (
+        <p className="mt-1 text-xs text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
+      )}
+    </button>
+  )
+}

package/components/ui/navigation-bar.tsx

@@ -0,0 +1,285 @@
+/** Navigation bar with back/forward controls, history dropdown, and inline breadcrumb path. */
+
+import { useState, useRef, useCallback } from 'react'
+import {
+  ChevronLeft, ChevronRight, History,
+  Menu, Home, Layers,
+  Settings, Folder, File, Code, Terminal, Database,
+  Globe, Star, Users, User, Tag, Search, Heart,
+  Zap, Shield, ShieldCheck, Sparkles, Eye, Lock,
+  Cloud, Wand2, Bell, Bookmark, Pin, Mail, Send,
+  Image, Bot, Puzzle, Plug, Webhook,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import type { BreadcrumbSegment } from './breadcrumb.tsx'
+import { cn } from '../lib/cn.ts'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
+
+const iconSubset: Partial<Record<IconName, LucideIcon>> = {
+  menu: Menu,
+  home: Home,
+  layers: Layers,
+  folder: Folder,
+  file: File,
+  settings: Settings,
+  code: Code,
+  terminal: Terminal,
+  database: Database,
+  globe: Globe,
+  star: Star,
+  users: Users,
+  user: User,
+  tag: Tag,
+  zap: Zap,
+  shield: Shield,
+  'shield-check': ShieldCheck,
+  sparkles: Sparkles,
+  eye: Eye,
+  lock: Lock,
+  search: Search,
+  heart: Heart,
+  cloud: Cloud,
+  wand: Wand2,
+  bell: Bell,
+  bookmark: Bookmark,
+  pin: Pin,
+  mail: Mail,
+  send: Send,
+  image: Image,
+  bot: Bot,
+  puzzle: Puzzle,
+  plug: Plug,
+  webhook: Webhook,
+}
+
+export interface NavigationBarProps {
+  segments: BreadcrumbSegment[]
+  canGoBack?: boolean
+  canGoForward?: boolean
+  onBack?: () => void
+  onForward?: () => void
+  showHistory?: boolean
+  historyEntries?: BreadcrumbSegment[][]
+  onHistorySelect?: (index: number) => void
+  leadingAction?: { icon: IconName; onClick?: () => void }
+  separator?: 'chevron' | 'slash' | 'dot'
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeConfig = {
+  xss: { text: 'text-[10px]', segIcon: 'w-2.5 h-2.5', navIcon: 'w-2.5 h-2.5', navBtn: 'w-[18px] h-[18px] rounded-[3px]', px: 'px-1', py: 'py-0.5', sep: 'w-2 h-2', divH: 'h-3' },
+  xs:  { text: 'text-xs', segIcon: 'w-3 h-3', navIcon: 'w-3 h-3', navBtn: 'w-6 h-6 rounded-[5px]', px: 'px-1.5', py: 'py-0.5', sep: 'w-2.5 h-2.5', divH: 'h-3.5' },
+  sm:  { text: 'text-sm', segIcon: 'w-3.5 h-3.5', navIcon: 'w-3.5 h-3.5', navBtn: 'w-7 h-7 rounded-md', px: 'px-2', py: 'py-1', sep: 'w-3 h-3', divH: 'h-4' },
+  md:  { text: 'text-base', segIcon: 'w-4 h-4', navIcon: 'w-4 h-4', navBtn: 'w-8 h-8 rounded-md', px: 'px-2.5', py: 'py-1', sep: 'w-3.5 h-3.5', divH: 'h-5' },
+  lg:  { text: 'text-lg', segIcon: 'w-5 h-5', navIcon: 'w-5 h-5', navBtn: 'w-9 h-9 rounded-md', px: 'px-3', py: 'py-1.5', sep: 'w-4 h-4', divH: 'h-6' },
+}
+
+const colorMap: Record<string, { bg: string; text: string }> = {
+  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
+  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
+  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
+  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
+  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
+  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
+  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
+  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
+  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
+  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
+  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
+  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
+  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
+  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
+  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
+}
+
+function NavButton({ icon: Icon, onClick, disabled, size, active }: {
+  icon: LucideIcon
+  onClick?: () => void
+  disabled?: boolean
+  size: keyof typeof sizeConfig
+  active?: boolean
+}) {
+  const s = sizeConfig[size]
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'flex items-center justify-center transition-colors',
+        s.navBtn,
+        disabled
+          ? 'text-neutral-600 cursor-not-allowed'
+          : active
+            ? 'text-white bg-neutral-700/50 border border-neutral-600 cursor-pointer'
+            : 'text-neutral-400 border border-neutral-700/50 hover:text-white hover:bg-neutral-700/50 cursor-pointer',
+      )}
+    >
+      <Icon className={s.navIcon} />
+    </button>
+  )
+}
+
+function Divider({ size }: { size: keyof typeof sizeConfig }) {
+  return <div className={cn('w-px bg-neutral-700/50 mx-1', sizeConfig[size].divH)} />
+}
+
+function SegmentSeparator({ type, size }: { type: 'chevron' | 'slash' | 'dot'; size: keyof typeof sizeConfig }) {
+  const s = sizeConfig[size]
+  if (type === 'chevron') return <ChevronRight className={cn(s.sep, 'text-neutral-600 flex-shrink-0')} />
+  if (type === 'slash') return <span className={cn(s.text, 'text-neutral-600 flex-shrink-0')}>/</span>
+  return <span className={cn(s.text, 'text-neutral-600 flex-shrink-0')}>&middot;</span>
+}
+
+function SegmentIcon({ icon, color, size }: { icon: IconName; color?: string; size: keyof typeof sizeConfig }) {
+  const Icon = iconSubset[icon]
+  if (!Icon) return null
+  const c = color && colorMap[color] ? colorMap[color] : null
+  return (
+    <span className={c?.text || ''}>
+      <Icon className={sizeConfig[size].segIcon} />
+    </span>
+  )
+}
+
+export function NavigationBar({
+  segments,
+  canGoBack = false,
+  canGoForward = false,
+  onBack,
+  onForward,
+  showHistory = false,
+  historyEntries,
+  onHistorySelect,
+  leadingAction,
+  separator = 'chevron',
+  size = 'sm',
+  className,
+}: NavigationBarProps) {
+  const s = sizeConfig[size]
+  const hasNav = !!(onBack || onForward)
+  const LeadIcon = leadingAction ? iconSubset[leadingAction.icon] : null
+
+  const [historyOpen, setHistoryOpen] = useState(false)
+  const historyRef = useRef<HTMLDivElement>(null)
+  const closeHistory = useCallback(() => setHistoryOpen(false), [])
+  useClickOutside(historyRef, historyOpen, closeHistory)
+
+  const hasHistoryEntries = historyEntries && historyEntries.length > 0
+
+  return (
+    <nav className={cn('flex items-center', className)}>
+      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg')}>
+        {leadingAction && LeadIcon && (
+          <>
+            <NavButton icon={LeadIcon} onClick={leadingAction.onClick} size={size} />
+            <Divider size={size} />
+          </>
+        )}
+
+        {hasNav && (
+          <>
+            <div className="flex items-center gap-0.5">
+              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} />
+              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} />
+            </div>
+            <Divider size={size} />
+          </>
+        )}
+
+        {showHistory && (
+          <>
+            <div className="relative" ref={historyRef}>
+              <NavButton
+                icon={History}
+                onClick={() => setHistoryOpen(o => !o)}
+                disabled={!hasHistoryEntries}
+                size={size}
+                active={historyOpen}
+              />
+              {historyOpen && hasHistoryEntries && (
+                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50">
+                  <div className="px-3 py-1.5 border-b border-neutral-700/50">
+                    <p className="text-xs font-medium text-neutral-500">History</p>
+                  </div>
+                  <div className="max-h-[300px] overflow-y-auto py-1">
+                    {historyEntries.map((entry, i) => (
+                      <button
+                        key={i}
+                        type="button"
+                        onClick={() => {
+                          onHistorySelect?.(i)
+                          setHistoryOpen(false)
+                        }}
+                        className="w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-800 transition-colors cursor-pointer"
+                      >
+                        {entry.map((seg, segIdx) => (
+                          <span key={seg.id} className="flex items-center gap-1 min-w-0">
+                            {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
+                            {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
+                            <span className={cn(
+                              'text-xs truncate',
+                              seg.color && colorMap[seg.color] ? colorMap[seg.color].text : 'text-neutral-300',
+                            )}>
+                              {seg.label}
+                            </span>
+                          </span>
+                        ))}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="px-3 py-1.5 border-t border-neutral-700/50">
+                    <p className="text-xs text-neutral-600">Click to navigate</p>
+                  </div>
+                </div>
+              )}
+            </div>
+            <Divider size={size} />
+          </>
+        )}
+
+        {segments.map((segment, index) => {
+          const isLast = index === segments.length - 1
+          const isClickable = !isLast && !!segment.onClick
+          const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null
+
+          return (
+            <div key={segment.id} className="flex items-center gap-1">
+              {index > 0 && <SegmentSeparator type={separator} size={size} />}
+              {isClickable ? (
+                <button
+                  type="button"
+                  onClick={segment.onClick}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    s.text,
+                    'font-medium hover:text-white',
+                    colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
+                  )}
+                >
+                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+                  <span className="truncate max-w-[200px]">{segment.label}</span>
+                </button>
+              ) : (
+                <div
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    s.text,
+                    isLast
+                      ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
+                      : ['font-medium', colors ? colors.text : 'text-neutral-300'],
+                  )}
+                >
+                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+                  <span className="truncate max-w-[200px]">{segment.label}</span>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}