@toolr/ui-design 0.1.0

package/components/ui/form-actions.tsx

@@ -0,0 +1,127 @@
+import { IconButton, type IconName, type IconButtonProps, type IconButtonStatus } from './icon-button.tsx'
+
+export interface FormActionsProps {
+  /** Cancel handler — renders X button. Optional (e.g. AlertModal has no cancel). */
+  onCancel?: () => void
+  cancelTooltip?: string
+
+  /** Back handler — optional, renders left-arrow on the left side */
+  onBack?: () => void
+  backTooltip?: string
+
+  /** Minimize handler — optional, renders minimize icon before Cancel */
+  onMinimize?: () => void
+  minimizeTooltip?: string
+
+  /** Confirm handler — optional, renders between Cancel and Next */
+  onConfirm?: () => void
+  confirmTooltip?: string
+  confirmIcon?: IconName
+  confirmColor?: IconButtonProps['color']
+  confirmDisabled?: boolean
+  confirmStatus?: IconButtonStatus
+
+  /** Next handler — optional, renders right-arrow for wizard navigation */
+  onNext?: () => void
+  nextTooltip?: string
+
+  /** Status text shown on the left side of the footer */
+  statusText?: string
+
+  border?: boolean
+  padding?: 'compact' | 'normal' | 'modal'
+}
+
+const PADDING_CLASSES = {
+  compact: 'pt-2',
+  normal: 'pt-2 border-t border-neutral-700',
+  modal: 'px-4 py-3 border-t border-neutral-700',
+} as const
+
+const DEFAULT_BORDER = {
+  compact: false,
+  normal: true,
+  modal: true,
+} as const
+
+export function FormActions({
+  onCancel,
+  cancelTooltip = 'Cancel',
+  onBack,
+  backTooltip = 'Back',
+  onMinimize,
+  minimizeTooltip = 'Minimize',
+  onConfirm,
+  confirmTooltip = 'Confirm',
+  confirmIcon = 'check',
+  confirmColor = 'blue',
+  confirmDisabled,
+  confirmStatus,
+  onNext,
+  nextTooltip = 'Next',
+  statusText,
+  border,
+  padding = 'normal',
+}: FormActionsProps) {
+  const showBorder = border ?? DEFAULT_BORDER[padding]
+  const base = PADDING_CLASSES[padding]
+  const paddingClass = showBorder
+    ? base
+    : base.replace(/\s*border-t\s+border-\[#374151\]/g, '')
+
+  const hasLeft = onBack || statusText
+
+  return (
+    <div className={`flex items-center ${hasLeft ? 'justify-between' : 'justify-end'} gap-2 ${paddingClass}`}>
+      {hasLeft && (
+        <div className="flex items-center gap-2">
+          {onBack && (
+            <IconButton
+              icon="arrow-left"
+              color="neutral"
+              onClick={onBack}
+              tooltip={{ description: backTooltip }}
+            />
+          )}
+          {statusText && <span className="text-xs text-neutral-500">{statusText}</span>}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        {onMinimize && (
+          <IconButton
+            icon="minimize"
+            color="neutral"
+            onClick={onMinimize}
+            tooltip={{ description: minimizeTooltip }}
+          />
+        )}
+        {onCancel && (
+          <IconButton
+            icon="x"
+            color="neutral"
+            onClick={onCancel}
+            tooltip={{ description: cancelTooltip }}
+          />
+        )}
+        {onConfirm && (
+          <IconButton
+            icon={confirmIcon}
+            color={confirmColor}
+            onClick={onConfirm}
+            disabled={confirmDisabled}
+            status={confirmStatus}
+            tooltip={{ description: confirmTooltip }}
+          />
+        )}
+        {onNext && (
+          <IconButton
+            icon="arrow-right"
+            color="blue"
+            onClick={onNext}
+            tooltip={{ description: nextTooltip }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/components/ui/frontmatter-form-header.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { Checkbox } from './checkbox.tsx'
+
+export interface FrontmatterFormHeaderProps {
+  collapsed: boolean
+  onToggle: () => void
+  /** Summary text shown when collapsed */
+  renderSummary: () => string
+  children: ReactNode
+  /** Whether frontmatter is currently enabled (content has ---) */
+  frontmatterEnabled?: boolean
+  /** Toggle frontmatter on/off */
+  onFrontmatterToggle?: (enabled: boolean) => void
+  readOnly?: boolean
+}
+
+export function FrontmatterFormHeader({
+  collapsed,
+  onToggle,
+  renderSummary,
+  children,
+  frontmatterEnabled,
+  onFrontmatterToggle,
+  readOnly,
+}: FrontmatterFormHeaderProps) {
+  const hasFm = frontmatterEnabled !== false
+
+  return (
+    <div className="bg-neutral-900 border-b border-neutral-800 select-none">
+      {/* Header bar — always visible, always expandable */}
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex items-center gap-2 w-full px-3 py-3 hover:bg-neutral-800/50 cursor-pointer transition-colors"
+      >
+        <ChevronRight
+          className={`w-3.5 h-3.5 text-neutral-500 transition-transform duration-150 ${
+            collapsed ? '' : 'rotate-90'
+          }`}
+        />
+        <span className="text-xs font-medium text-neutral-400 uppercase tracking-wide">
+          Configuration
+        </span>
+        {collapsed && hasFm && (
+          <span className="text-[11px] text-neutral-500 font-mono ml-2 truncate">
+            {renderSummary()}
+          </span>
+        )}
+        {collapsed && !hasFm && (
+          <span className="text-[11px] text-neutral-600 ml-2">No frontmatter</span>
+        )}
+      </button>
+
+      {/* Expanded area */}
+      {!collapsed && (
+        <div className="px-3 pb-3 pt-1">
+          {/* Frontmatter checkbox — always first */}
+          {onFrontmatterToggle && (
+            <div className="inline-flex items-center gap-1.5 mb-3">
+              <Checkbox
+                checked={hasFm}
+                onChange={(checked) => onFrontmatterToggle(checked)}
+                disabled={readOnly}
+              />
+              <span
+                className="text-xs text-neutral-400 cursor-pointer"
+                onClick={() => !readOnly && onFrontmatterToggle(!hasFm)}
+              >
+                Add YAML frontmatter to file
+              </span>
+            </div>
+          )}
+          {/* Form content — only when frontmatter is enabled */}
+          {hasFm && children}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/icon-button.tsx

@@ -0,0 +1,388 @@
+/**
+ * IconButton - Icon-only button with tooltip and variant support
+ *
+ * Used by:
+ * - Toolbars - action buttons (save, edit, delete)
+ * - Panel headers - expand/collapse, settings
+ * - Card actions - quick actions on cards
+ *
+ * Features:
+ * - Multiple size variants (xss, xs, sm, md, lg)
+ * - Color variants (gray, green, red, blue, etc.)
+ * - Optional badge with count
+ * - Strikethrough state for disabled appearance
+ * - Portal-based tooltip via Tooltip component
+ */
+
+import type { MouseEvent, ReactNode } from 'react'
+import {
+  ArrowDownToLine,
+  ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
+  ChevronLeft, ChevronRight, ChevronUp, ChevronDown,
+  ChevronsUpDown, ChevronsDownUp,
+  Check, X, Plus, Minus, Pencil, Trash2, Copy, Save,
+  RefreshCw, RotateCcw, Undo2, Redo2,
+  Search, Filter, Download, Upload, ExternalLink, Link2, Unlink2,
+  Eye, EyeOff, Lock, Unlock, Settings, MoreHorizontal, MoreVertical,
+  Loader2, CheckCircle2, AlertTriangle, XCircle,
+  Info, HelpCircle,
+  User, Users, Folder, File, FileText, Image, Code, Terminal,
+  Star, Heart, Bell, Bookmark, Tag, Pin, Mail, Send,
+  Globe, Database, Cloud,
+  Wand2, Shield, ShieldCheck, Zap, Sparkles,
+  Play, Pause, Square, StopCircle, CirclePlay,
+  Menu, GripVertical, Maximize2, Minimize2,
+  Scan,
+  Webhook, Bot, Puzzle, Plug,
+  PanelBottomClose,
+  Package, Wrench, Store, ScrollText, Cpu, FlaskConical, Layers, Timer, Camera,
+  AlertCircle, FileCode, Gauge, Home, PieChart, Settings2,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Tooltip, type TooltipContent } from './tooltip.tsx'
+
+export const iconMap = {
+  'arrow-down-to-line': ArrowDownToLine,
+  'arrow-left': ArrowLeft,
+  'arrow-right': ArrowRight,
+  'arrow-up': ArrowUp,
+  'arrow-down': ArrowDown,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  'chevron-up': ChevronUp,
+  'chevron-down': ChevronDown,
+  'chevrons-up-down': ChevronsUpDown,
+  'chevrons-down-up': ChevronsDownUp,
+  'check': Check,
+  'x': X,
+  'plus': Plus,
+  'minus': Minus,
+  'pencil': Pencil,
+  'trash': Trash2,
+  'copy': Copy,
+  'save': Save,
+  'refresh': RefreshCw,
+  'rotate': RotateCcw,
+  'undo': Undo2,
+  'redo': Redo2,
+  'search': Search,
+  'filter': Filter,
+  'download': Download,
+  'upload': Upload,
+  'external-link': ExternalLink,
+  'link': Link2,
+  'unlink': Unlink2,
+  'eye': Eye,
+  'eye-off': EyeOff,
+  'lock': Lock,
+  'unlock': Unlock,
+  'settings': Settings,
+  'more-h': MoreHorizontal,
+  'more-v': MoreVertical,
+  'loader': Loader2,
+  'check-circle': CheckCircle2,
+  'alert-triangle': AlertTriangle,
+  'x-circle': XCircle,
+  'info': Info,
+  'help': HelpCircle,
+  'user': User,
+  'users': Users,
+  'folder': Folder,
+  'file': File,
+  'file-text': FileText,
+  'image': Image,
+  'code': Code,
+  'terminal': Terminal,
+  'star': Star,
+  'heart': Heart,
+  'bell': Bell,
+  'bookmark': Bookmark,
+  'tag': Tag,
+  'pin': Pin,
+  'mail': Mail,
+  'send': Send,
+  'globe': Globe,
+  'database': Database,
+  'cloud': Cloud,
+  'wand': Wand2,
+  'shield': Shield,
+  'shield-check': ShieldCheck,
+  'zap': Zap,
+  'sparkles': Sparkles,
+  'play': Play,
+  'pause': Pause,
+  'stop': Square,
+  'stop-circle': StopCircle,
+  'circle-play': CirclePlay,
+  'scan': Scan,
+  'menu': Menu,
+  'grip': GripVertical,
+  'maximize': Maximize2,
+  'minimize': Minimize2,
+  'webhook': Webhook,
+  'bot': Bot,
+  'puzzle': Puzzle,
+  'plug': Plug,
+  'panel-bottom-close': PanelBottomClose,
+  'package': Package,
+  'wrench': Wrench,
+  'store': Store,
+  'scroll-text': ScrollText,
+  'cpu': Cpu,
+  'flask-conical': FlaskConical,
+  'layers': Layers,
+  'timer': Timer,
+  'camera': Camera,
+  'alert-circle': AlertCircle,
+  'file-code': FileCode,
+  'gauge': Gauge,
+  'home': Home,
+  'pie-chart': PieChart,
+  'settings-2': Settings2,
+} as const
+
+export type IconName = keyof typeof iconMap
+
+export interface ActionItem {
+  icon: IconName
+  onClick: () => void
+  color?: IconButtonColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  variant?: IconButtonVariant
+  tooltip?: TooltipContent
+  disabled?: boolean
+  status?: IconButtonStatus
+  active?: boolean
+  href?: string
+  testId?: string
+}
+
+export type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error'
+
+export type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+export type IconButtonVariant = 'filled' | 'outline'
+
+export interface IconButtonProps {
+  icon: IconName | ReactNode
+  onClick?: (e?: MouseEvent) => void
+  /** When provided, renders an <a> tag instead of <button>. Opens in a new tab. */
+  href?: string
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  color?: IconButtonColor
+  variant?: IconButtonVariant
+  active?: boolean
+  disabled?: boolean
+  /** Async action status. Overrides icon, color, and active state when set. */
+  status?: IconButtonStatus
+  /** Tooltip shown on hover. Title and description are required. */
+  tooltip?: TooltipContent
+  tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
+  badge?: number | string
+  badgeColor?: 'red' | 'blue' | 'green' | 'orange'
+  strikethrough?: boolean
+  className?: string
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+const sizeClasses = {
+  xss: 'w-[18px] h-[18px] rounded-[3px]',
+  xs: 'w-6 h-6 rounded-[5px]',
+  sm: 'w-7 h-7 rounded-md',
+  md: 'w-8 h-8 rounded-md',
+  lg: 'w-9 h-9 rounded-md',
+}
+
+const iconSizeClasses = {
+  xss: 'w-2.5 h-2.5',
+  xs: 'w-3 h-3',
+  sm: 'w-3.5 h-3.5',
+  md: 'w-4 h-4',
+  lg: 'w-5 h-5',
+}
+
+// Color variants
+const colorClasses = {
+  green: { text: 'text-green-400', border: 'border-green-500/30', hover: 'hover:bg-green-500/20 hover:border-green-500/40 hover:text-green-300', active: 'bg-green-500/20 text-green-300 border-green-500/40' },
+  red: { text: 'text-red-400', border: 'border-red-500/30', hover: 'hover:bg-red-500/20 hover:border-red-500/40 hover:text-red-300', active: 'bg-red-500/20 text-red-300 border-red-500/40' },
+  blue: { text: 'text-blue-400', border: 'border-blue-500/30', hover: 'hover:bg-blue-500/20 hover:border-blue-500/40 hover:text-blue-300', active: 'bg-blue-500/20 text-blue-300 border-blue-500/40' },
+  orange: { text: 'text-orange-400', border: 'border-orange-500/30', hover: 'hover:bg-orange-500/20 hover:border-orange-500/40 hover:text-orange-300', active: 'bg-orange-500/20 text-orange-300 border-orange-500/40' },
+  cyan: { text: 'text-cyan-400', border: 'border-cyan-500/30', hover: 'hover:bg-cyan-500/20 hover:border-cyan-500/40 hover:text-cyan-300', active: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40' },
+  yellow: { text: 'text-yellow-400', border: 'border-yellow-500/30', hover: 'hover:bg-yellow-500/20 hover:border-yellow-500/40 hover:text-yellow-300', active: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40' },
+  purple: { text: 'text-purple-400', border: 'border-purple-500/30', hover: 'hover:bg-purple-500/20 hover:border-purple-500/40 hover:text-purple-300', active: 'bg-purple-500/20 text-purple-300 border-purple-500/40' },
+  indigo: { text: 'text-indigo-400', border: 'border-indigo-500/30', hover: 'hover:bg-indigo-500/20 hover:border-indigo-500/40 hover:text-indigo-300', active: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40' },
+  emerald: { text: 'text-emerald-400', border: 'border-emerald-500/30', hover: 'hover:bg-emerald-500/20 hover:border-emerald-500/40 hover:text-emerald-300', active: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40' },
+  amber: { text: 'text-amber-400', border: 'border-amber-500/30', hover: 'hover:bg-amber-500/20 hover:border-amber-500/40 hover:text-amber-300', active: 'bg-amber-500/20 text-amber-300 border-amber-500/40' },
+  violet: { text: 'text-violet-400', border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40 hover:text-violet-300', active: 'bg-violet-500/20 text-violet-300 border-violet-500/40' },
+  neutral: { text: 'text-neutral-400', border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40 hover:text-neutral-300', active: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40' },
+  sky: { text: 'text-sky-400', border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40 hover:text-sky-300', active: 'bg-sky-500/20 text-sky-300 border-sky-500/40' },
+}
+
+const badgeColorClasses = {
+  red: 'bg-red-500',
+  blue: 'bg-blue-500',
+  green: 'bg-green-500',
+  orange: 'bg-orange-500',
+}
+
+// Map IconButton tooltip positions to Tooltip component positions
+const mapTooltipPosition = (
+  pos: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
+): { position: 'top' | 'bottom' | 'left' | 'right'; align: 'start' | 'center' | 'end' } => {
+  switch (pos) {
+    case 'left':
+      return { position: 'left', align: 'center' }
+    case 'right':
+      return { position: 'right', align: 'center' }
+    case 'top':
+      return { position: 'top', align: 'center' }
+    case 'top-left':
+      return { position: 'top', align: 'end' }
+    case 'top-right':
+      return { position: 'top', align: 'start' }
+    case 'bottom-left':
+      return { position: 'bottom', align: 'end' }
+    case 'bottom':
+    default:
+      return { position: 'bottom', align: 'end' }
+  }
+}
+
+const statusIcons: Record<IconButtonStatus, LucideIcon> = {
+  loading: Loader2,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: XCircle,
+}
+
+const statusConfig = {
+  loading: { color: undefined, active: true, animation: 'animate-spin' },
+  success: { color: 'green' as const, active: true, animation: 'animate-pulse' },
+  warning: { color: 'amber' as const, active: true, animation: 'animate-pulse' },
+  error: { color: 'red' as const, active: true, animation: 'animate-pulse' },
+}
+
+function resolveIcon(icon: IconName | ReactNode, status: IconButtonStatus | undefined): LucideIcon | null {
+  if (status) return statusIcons[status]
+  if (typeof icon === 'string') return iconMap[icon as IconName]
+  return null
+}
+
+export function IconButton({
+  icon,
+  onClick,
+  href,
+  size = 'sm',
+  color = 'neutral',
+  variant = 'outline',
+  active = false,
+  disabled = false,
+  status,
+  tooltip,
+  tooltipPosition = 'bottom',
+  badge,
+  badgeColor = 'red',
+  strikethrough = false,
+  className = '',
+  testId,
+}: IconButtonProps) {
+  const resolvedColor = status ? (statusConfig[status].color ?? color) : color
+  const resolvedActive = status ? statusConfig[status].active : active
+
+  const colorStyle = colorClasses[resolvedColor] ?? colorClasses.neutral
+  const { position, align } = mapTooltipPosition(tooltipPosition)
+
+  const isOutline = variant === 'outline'
+  const borderClass = isOutline ? colorStyle.border : 'border-neutral-600'
+
+  const sharedClassName = `
+    relative flex items-center justify-center border transition-colors ${isOutline ? '' : 'bg-neutral-800'}
+    ${sizeClasses[size]}
+    ${colorStyle.text} ${borderClass}
+    ${resolvedActive ? colorStyle.active : ''}
+    ${!disabled && !resolvedActive ? colorStyle.hover : ''}
+    ${className}
+  `
+
+  const iconClass = iconSizeClasses[size]
+  const animationClass = status ? statusConfig[status].animation : ''
+  const Icon = resolveIcon(icon, status)
+  const isReactNodeIcon = !Icon && typeof icon !== 'string'
+
+  const inner = (
+    <>
+      <span className={`relative flex items-center justify-center ${iconClass} ${animationClass}`}>
+        {Icon ? <Icon className={iconClass} /> : isReactNodeIcon ? icon : null}
+        {strikethrough && !status && (
+          <span className="absolute inset-0 flex items-center justify-center">
+            <span className="w-5 h-0.5 bg-current rotate-[-45deg] rounded-full" />
+          </span>
+        )}
+      </span>
+      {badge !== undefined && (
+        <span
+          className={`absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center px-1 text-xs font-bold text-white rounded-full ${badgeColorClasses[badgeColor]}`}
+        >
+          {typeof badge === 'number' && badge > 99 ? '99+' : badge}
+        </span>
+      )}
+    </>
+  )
+
+  const button = href ? (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={tooltip?.title}
+      data-testid={testId}
+      className={`${sharedClassName} cursor-pointer no-underline`}
+    >
+      {inner}
+    </a>
+  ) : (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={tooltip?.title}
+      data-testid={testId}
+      className={`${sharedClassName} cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`}
+    >
+      {inner}
+    </button>
+  )
+
+  // Wrap with Tooltip if tooltip prop is provided
+  if (tooltip) {
+    return (
+      <Tooltip content={tooltip} position={position} align={align}>
+        {button}
+      </Tooltip>
+    )
+  }
+
+  return button
+}
+
+export interface CollapseButtonProps {
+  collapsed: boolean
+  onToggle: () => void
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right'
+}
+
+export function CollapseButton({ collapsed, onToggle, size = 'xss', tooltipPosition = 'bottom-left' }: CollapseButtonProps) {
+  return (
+    <IconButton
+      icon={collapsed ? 'chevrons-up-down' : 'chevrons-down-up'}
+      onClick={onToggle}
+      tooltip={{
+        title: collapsed ? 'Expand all' : 'Collapse all',
+        description: collapsed ? 'Expand all folders' : 'Collapse all folders',
+      }}
+      tooltipPosition={tooltipPosition}
+      size={size}
+    />
+  )
+}