@toolr/ui-design 0.1.0

package/components/ui/collapsible-section.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import {
+  ChevronRight, Settings, Folder, Code, Terminal, Database,
+  Star, Heart, Bell, Bookmark, Tag, Pin, Mail, Globe, Cloud,
+  Shield, Zap, Sparkles, Search, Filter, Eye, Lock, User, Users,
+  File, Image, Download, Upload, Play, Pause,
+} 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,
+  folder: Folder,
+  code: Code,
+  terminal: Terminal,
+  database: Database,
+  star: Star,
+  heart: Heart,
+  bell: Bell,
+  bookmark: Bookmark,
+  tag: Tag,
+  pin: Pin,
+  mail: Mail,
+  globe: Globe,
+  cloud: Cloud,
+  shield: Shield,
+  zap: Zap,
+  sparkles: Sparkles,
+  search: Search,
+  filter: Filter,
+  eye: Eye,
+  lock: Lock,
+  user: User,
+  users: Users,
+  file: File,
+  image: Image,
+  download: Download,
+  upload: Upload,
+  play: Play,
+  pause: Pause,
+}
+
+export interface CollapsibleSectionProps {
+  title: string
+  icon?: IconName
+  iconColor?: string
+  defaultOpen?: boolean
+  badge?: string | number
+  badgeColor?: BadgeColor
+  children: React.ReactNode
+  className?: string
+}
+
+export function CollapsibleSection({
+  title,
+  icon,
+  iconColor,
+  defaultOpen = false,
+  badge,
+  badgeColor,
+  children,
+  className,
+}: CollapsibleSectionProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  const Icon = icon ? iconSubset[icon] : undefined
+
+  return (
+    <div className={cn('border-b border-neutral-700', className)}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 py-2.5 px-1 text-left hover:bg-neutral-700/30 transition-colors cursor-pointer"
+      >
+        <ChevronRight
+          className={cn(
+            'w-3.5 h-3.5 text-neutral-500 transition-transform duration-150',
+            open && 'rotate-90',
+          )}
+        />
+        {Icon && (
+          <span
+            className="flex items-center justify-center w-5 h-5 rounded bg-neutral-700/60"
+            style={iconColor ? { color: iconColor } : undefined}
+          >
+            <Icon className="w-3.5 h-3.5" />
+          </span>
+        )}
+        <span className="text-sm font-medium text-neutral-200">{title}</span>
+        {badge !== undefined && (
+          <span className="ml-auto">
+            <Badge value={badge} color={badgeColor} size="xss" />
+          </span>
+        )}
+      </button>
+      {open && <div className="pb-3 pl-7 pr-2">{children}</div>}
+    </div>
+  )
+}

package/components/ui/confirm-badge.tsx

@@ -0,0 +1,71 @@
+/**
+ * ConfirmBadge - Outline-styled check badge for indicating selection/confirmation
+ *
+ * Used by:
+ * - SelectionGrid - selected state indicator on cards
+ * - Any UI that needs a small check/confirmed indicator
+ *
+ * Features:
+ * - Outline variant matching IconButton outline style (border + text, no fill)
+ * - 13 color variants
+ * - 5 size variants (xss, xs, sm, md, lg)
+ */
+
+import { Check } from 'lucide-react'
+
+export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+
+export interface ConfirmBadgeProps {
+  color?: ConfirmBadgeColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  className?: string
+  testId?: string
+}
+
+const colorClasses: Record<ConfirmBadgeColor, string> = {
+  green: 'border-green-500/30 text-green-400',
+  red: 'border-red-500/30 text-red-400',
+  blue: 'border-blue-500/30 text-blue-400',
+  orange: 'border-orange-500/30 text-orange-400',
+  cyan: 'border-cyan-500/30 text-cyan-400',
+  yellow: 'border-yellow-500/30 text-yellow-400',
+  purple: 'border-purple-500/30 text-purple-400',
+  indigo: 'border-indigo-500/30 text-indigo-400',
+  emerald: 'border-emerald-500/30 text-emerald-400',
+  amber: 'border-amber-500/30 text-amber-400',
+  violet: 'border-violet-500/30 text-violet-400',
+  neutral: 'border-neutral-500/30 text-neutral-400',
+  sky: 'border-sky-500/30 text-sky-400',
+}
+
+const sizeClasses = {
+  xss: 'w-[14px] h-[14px] rounded-full',
+  xs: 'w-[16px] h-[16px] rounded-full',
+  sm: 'w-[18px] h-[18px] rounded-full',
+  md: 'w-[20px] h-[20px] rounded-full',
+  lg: 'w-[22px] h-[22px] rounded-full',
+}
+
+const iconSizeClasses = {
+  xss: 'w-2 h-2',
+  xs: 'w-2.5 h-2.5',
+  sm: 'w-3 h-3',
+  md: 'w-3.5 h-3.5',
+  lg: 'w-4 h-4',
+}
+
+export function ConfirmBadge({
+  color = 'neutral',
+  size = 'sm',
+  className = '',
+  testId,
+}: ConfirmBadgeProps) {
+  return (
+    <span
+      data-testid={testId}
+      className={`inline-flex items-center justify-center border ${colorClasses[color]} ${sizeClasses[size]} ${className}`}
+    >
+      <Check className={iconSizeClasses[size]} />
+    </span>
+  )
+}

package/components/ui/detail-section.tsx

@@ -0,0 +1,67 @@
+/**
+ * DetailSection - Labeled key-value detail rows with optional section header.
+ *
+ * Used by:
+ * - Execution detail panels (tool info, permissions, output format)
+ * - Server/service info displays
+ * - Any key-value metadata layout
+ */
+
+import {
+  Info, Settings, Code, Shield, Terminal, Database, Globe, Zap,
+  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug, Lock, Eye,
+  File, Folder, User, Users, Tag, Bookmark, Mail, Send, Search,
+  Play, ShieldCheck, Wand2, Copy,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import { cn } from '../lib/cn.ts'
+
+const iconSubset: Partial<Record<IconName, LucideIcon>> = {
+  info: Info, settings: Settings, code: Code, shield: Shield,
+  terminal: Terminal, database: Database, globe: Globe, zap: Zap,
+  star: Star, cloud: Cloud, bell: Bell, heart: Heart,
+  sparkles: Sparkles, bot: Bot, plug: Plug, lock: Lock, eye: Eye,
+  file: File, folder: Folder, user: User, users: Users, tag: Tag,
+  bookmark: Bookmark, mail: Mail, send: Send, search: Search,
+  play: Play, 'shield-check': ShieldCheck, wand: Wand2, copy: Copy,
+}
+
+export interface DetailRow {
+  label: string
+  value: string
+  mono?: boolean
+}
+
+export interface DetailSectionProps {
+  /** Section title (e.g., "Execution Details") */
+  title: string
+  /** Icon before the title */
+  icon?: IconName
+  /** Detail rows to display */
+  rows: DetailRow[]
+  className?: string
+}
+
+export function DetailSection({ title, icon, rows, className }: DetailSectionProps) {
+  const Icon = icon ? iconSubset[icon] : undefined
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-2 mb-3">
+        {Icon && <Icon className="w-4 h-4 text-neutral-500" />}
+        <span className="text-sm font-medium text-neutral-400">{title}</span>
+      </div>
+      <div className="space-y-2">
+        {rows.map((row) => (
+          <div key={row.label} className="flex items-start gap-3">
+            <span className="text-xs text-neutral-500 w-24 shrink-0">{row.label}:</span>
+            <span className={cn('text-xs text-neutral-400', row.mono && 'font-mono')}>
+              {row.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/components/ui/detail-view-wrapper.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react'
+
+export interface DetailViewWrapperProps {
+  /** Main editor content */
+  editorContent?: ReactNode
+
+  /** Action buttons rendered in navigation bar */
+  actions?: ReactNode
+
+  /** Optional bottom panel */
+  bottomPanel?: ReactNode
+  /** Optional right sidebar */
+  rightSidebar?: ReactNode
+  showRightSidebar?: boolean
+}
+
+export function DetailViewWrapper({
+  editorContent,
+  actions,
+  bottomPanel,
+  rightSidebar,
+  showRightSidebar = false,
+}: DetailViewWrapperProps) {
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+      {actions && (
+        <div className="flex items-center justify-end border-b border-neutral-800 bg-neutral-950/50 px-2 h-[36px]">
+          <div className="flex items-center gap-1">{actions}</div>
+        </div>
+      )}
+
+      {/* Main content area */}
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+          {editorContent && (
+            <div className="flex-1 flex flex-col overflow-hidden">{editorContent}</div>
+          )}
+        </div>
+
+        {/* Optional right sidebar */}
+        {showRightSidebar && rightSidebar && (
+          <div className="w-[300px] border-l border-neutral-800 overflow-hidden flex-shrink-0">
+            {rightSidebar}
+          </div>
+        )}
+      </div>
+
+      {/* Optional bottom panel */}
+      {bottomPanel && (
+        <div className="border-t border-neutral-800">{bottomPanel}</div>
+      )}
+    </div>
+  )
+}

package/components/ui/editor-placeholder-card.tsx

@@ -0,0 +1,197 @@
+import { useState, useRef, useLayoutEffect } from 'react'
+import { IconButton, type ActionItem } from './icon-button.tsx'
+import { Input } from './input.tsx'
+
+export interface EditorPlaceholderCardProps {
+  /** Placeholder name (without braces) */
+  name: string
+  /** Description text */
+  description: string
+  /** Value/example content */
+  value?: string
+  /** Whether this placeholder is required */
+  required?: boolean
+  /** Label for the value section (default: "Value:") */
+  valueLabel?: string
+  /** Color scheme */
+  accentColor?: 'purple' | 'blue' | 'neutral' | 'sky'
+  /** Action buttons to show on the right (e.g., edit/delete for settings) */
+  actions?: ActionItem[]
+  /** Show copy button that copies the {{PLACEHOLDER}} syntax */
+  showCopyPlaceholder?: boolean
+  /** Show copy button that copies the actual value */
+  showCopyValue?: boolean
+  /** Hide the value behind ****** with a toggle to reveal */
+  hideValue?: boolean
+  /** Additional class names */
+  className?: string
+}
+
+const COLORS = {
+  purple: {
+    name: 'text-purple-400',
+    nameBg: 'bg-purple-500/10',
+  },
+  blue: {
+    name: 'text-blue-400',
+    nameBg: 'bg-blue-500/10',
+  },
+  neutral: {
+    name: 'text-neutral-400',
+    nameBg: 'bg-neutral-500/10',
+  },
+  sky: {
+    name: 'text-sky-400',
+    nameBg: 'bg-sky-500/10',
+  },
+}
+
+export function EditorPlaceholderCard({
+  name,
+  description,
+  value,
+  required = false,
+  valueLabel = 'Value:',
+  accentColor = 'purple',
+  actions,
+  showCopyPlaceholder = false,
+  showCopyValue = false,
+  hideValue = false,
+  className = '',
+}: EditorPlaceholderCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isCopied, setIsCopied] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const valueRef = useRef<HTMLDivElement>(null)
+
+  const colors = COLORS[accentColor]
+  const hasValue = !!value
+
+  // Check if content overflows (truncated) - sync state with DOM measurement
+  useLayoutEffect(() => {
+    if (valueRef.current && !isExpanded) {
+      const { scrollWidth, clientWidth, scrollHeight, clientHeight } = valueRef.current
+      setIsOverflowing(scrollWidth > clientWidth || scrollHeight > clientHeight)
+    }
+  }, [value, isExpanded])
+
+  const handleCopyPlaceholder = async () => {
+    try {
+      await navigator.clipboard.writeText(`{{${name}}}`)
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 1500)
+    } catch {
+      // Clipboard API not available
+    }
+  }
+
+  const handleCopyValue = async () => {
+    if (!value) return
+    try {
+      await navigator.clipboard.writeText(value)
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 1500)
+    } catch {
+      // Clipboard API not available
+    }
+  }
+
+  return (
+    <div className={`group px-3 py-2.5 ${!hasValue ? 'opacity-60' : ''} ${className}`}>
+      {/* Header: Name + Actions */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          {/* Placeholder name with {{ }} */}
+          <code className={`text-xs font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`}>
+            {'{{' + name + '}}'}
+          </code>
+          {/* Required badge */}
+          {required && (
+            <span className="ml-2 inline-block px-1.5 py-0.5 text-xs font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded">
+              Required
+            </span>
+          )}
+          {/* Description */}
+          <p className="text-xs text-neutral-500 mt-1.5 line-clamp-2">{description}</p>
+        </div>
+
+        {/* Actions (copy for templates, edit/delete for settings) */}
+        <div className="flex items-center gap-1 shrink-0">
+          {showCopyPlaceholder && (
+            <IconButton
+              icon={isCopied ? 'check' : 'copy'}
+              onClick={handleCopyPlaceholder}
+              size="sm"
+              color={isCopied ? 'green' : 'neutral'}
+              tooltip={{ description: `Copy {{${name}}}` }}
+              tooltipPosition="left"
+            />
+          )}
+          {showCopyValue && hasValue && (
+            <IconButton
+              icon={isCopied ? 'check' : 'copy'}
+              onClick={handleCopyValue}
+              size="sm"
+              color={isCopied ? 'green' : 'neutral'}
+              tooltip={{ description: 'Copy value to clipboard' }}
+              tooltipPosition="left"
+            />
+          )}
+          {actions?.map((a, i) => <IconButton key={i} {...a} />)}
+        </div>
+      </div>
+
+      {/* Value section */}
+      {hasValue && (
+        <div className="mt-2">
+          {hideValue ? (
+            <>
+              <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+              <div className="mt-1.5">
+                <Input
+                  type="password"
+                  value={value}
+                  onChange={() => {}}
+                  readOnly
+                  size="xs"
+                  variant="filled"
+                  color="neutral"
+
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-neutral-500 font-medium">{valueLabel}</span>
+                {(isOverflowing || isExpanded) && (
+                  <IconButton
+                    icon={isExpanded ? 'chevron-up' : 'chevron-down'}
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    size="xss"
+                    tooltip={{ description: isExpanded ? 'Show less' : 'Show more' }}
+                  />
+                )}
+              </div>
+              <div
+                ref={valueRef}
+                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-xs text-neutral-400 font-mono ${
+                  isExpanded
+                    ? 'whitespace-pre-wrap break-all max-h-[190px] overflow-y-auto'
+                    : 'truncate'
+                }`}
+              >
+                {value}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* No value hint */}
+      {!hasValue && (
+        <p className="mt-1.5 text-xs text-neutral-600 italic">No value set - add one in Settings</p>
+      )}
+    </div>
+  )
+}

package/components/ui/editor-toolbar.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { IconButton, type ActionItem } from './icon-button.tsx'
+import { Label } from './label.tsx'
+import { ConfirmModal } from './modal.tsx'
+
+export interface EditorToolbarProps {
+  /** Whether content has unsaved changes */
+  isDirty: boolean
+  /** Whether save operation is in progress */
+  isSaving?: boolean
+  /** Called when save button is clicked */
+  onSave: () => void
+  /** Optional: Whether reset is available */
+  canReset?: boolean
+  /** Optional: Called when reset button is clicked */
+  onReset?: () => void
+  /** Optional: Tooltip for reset button */
+  resetTooltip?: {
+    title: string
+    description: string
+  }
+  /** Optional: Whether editor is read-only */
+  isReadOnly?: boolean
+  /** Optional: Validation error preventing save */
+  hasError?: boolean
+  /** Optional: Additional action buttons on the left side */
+  leftActions?: ActionItem[]
+  /** Optional: Additional action buttons on the right side (before save) */
+  rightActions?: ActionItem[]
+}
+
+export function EditorToolbar({
+  isDirty,
+  isSaving = false,
+  onSave,
+  canReset = false,
+  onReset,
+  resetTooltip = {
+    title: 'Reset to Default',
+    description: 'Restore the default content',
+  },
+  isReadOnly = false,
+  hasError = false,
+  leftActions,
+  rightActions,
+}: EditorToolbarProps) {
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
+
+  const showSaveButton = !isReadOnly
+
+  const handleResetClick = () => {
+    setShowConfirmDialog(true)
+  }
+
+  const handleConfirm = () => {
+    setShowConfirmDialog(false)
+    onReset?.()
+  }
+
+  if (!showSaveButton && !canReset && !leftActions?.length && !rightActions?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800">
+        {/* Left side */}
+        <div className="flex items-center gap-2">
+          {leftActions?.map((a, i) => <IconButton key={i} {...a} />)}
+        </div>
+
+        {/* Center - unsaved indicator */}
+        {isDirty && (
+          <Label
+            text="modified"
+            color="yellow"
+            icon="pencil"
+            size="xs"
+            tooltip={{ description: 'File has unsaved changes' }}
+          />
+        )}
+
+        {/* Right side */}
+        <div className="flex items-center gap-2">
+          {rightActions?.map((a, i) => <IconButton key={i} {...a} />)}
+
+          {canReset && onReset && (
+            <IconButton
+              icon="rotate"
+              onClick={handleResetClick}
+              size="sm"
+              color="orange"
+              tooltip={resetTooltip}
+            />
+          )}
+
+          {showSaveButton && (
+            <IconButton
+              icon="save"
+              onClick={onSave}
+              disabled={!isDirty || isSaving || hasError}
+              size="sm"
+              color={isDirty && !hasError ? 'amber' : 'neutral'}
+              status={isSaving ? 'loading' : undefined}
+              tooltip={{ description: 'Save changes to file' }}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Confirmation Dialog */}
+      <ConfirmModal
+        isOpen={showConfirmDialog}
+        onClose={() => setShowConfirmDialog(false)}
+        onConfirm={handleConfirm}
+        title={resetTooltip.title}
+        message={`${resetTooltip.description} Your custom configuration will be lost.`}
+        kind="orange"
+        confirmColor="orange"
+      />
+    </>
+  )
+}