@toolr/ui-design 0.1.0

package/components/ui/setting-row.tsx

@@ -0,0 +1,97 @@
+/**
+ * SettingRow - A settings row with built-in control types
+ *
+ * Used by:
+ * - Settings pages - boolean toggles, dropdowns, text inputs
+ * - Configuration panels - key-value setting rows
+ *
+ * Control types:
+ * - toggle: renders a Toggle switch
+ * - select: renders a Select dropdown
+ * - input: renders a text Input
+ */
+
+import { Toggle, type ToggleColor, type ToggleSize, type ToggleVariant } from './toggle.tsx'
+import { Select, type SelectOption } from './select.tsx'
+import { Input } from './input.tsx'
+
+interface SettingRowBase {
+  label: string
+  description?: string
+  disabled?: boolean
+  className?: string
+}
+
+interface SettingRowToggle extends SettingRowBase {
+  type: 'toggle'
+  checked: boolean
+  onChange: (checked: boolean) => void
+  color?: ToggleColor
+  size?: ToggleSize
+  variant?: ToggleVariant
+}
+
+interface SettingRowSelect extends SettingRowBase {
+  type: 'select'
+  value: string
+  options: SelectOption[]
+  onChange: (value: string) => void
+  selectSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  selectVariant?: 'filled' | 'outline'
+}
+
+interface SettingRowInput extends SettingRowBase {
+  type: 'input'
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  inputSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  inputVariant?: 'filled' | 'outline'
+}
+
+export type SettingRowProps = SettingRowToggle | SettingRowSelect | SettingRowInput
+
+export function SettingRow(props: SettingRowProps) {
+  const { label, description, disabled, className = '' } = props
+
+  return (
+    <div className={`flex items-start justify-between gap-4 ${className}`}>
+      <div>
+        <label className="text-neutral-200 leading-7">{label}</label>
+        {description && <p className="text-sm text-neutral-500">{description}</p>}
+      </div>
+      {props.type === 'toggle' && (
+        <Toggle
+          checked={props.checked}
+          onChange={props.onChange}
+          disabled={disabled}
+          color={props.color}
+          size={props.size}
+          variant={props.variant}
+        />
+      )}
+      {props.type === 'select' && (
+        <Select
+          value={props.value}
+          options={props.options}
+          onChange={props.onChange}
+          disabled={disabled}
+          size={props.selectSize ?? 'sm'}
+          variant={props.selectVariant ?? 'outline'}
+        />
+      )}
+      {props.type === 'input' && (
+        <div className="w-44 shrink-0">
+          <Input
+            value={props.value}
+            onChange={props.onChange}
+            disabled={disabled}
+            placeholder={props.placeholder}
+            size={props.inputSize ?? 'sm'}
+            variant={props.inputVariant ?? 'outline'}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/snapshot-card.tsx

@@ -0,0 +1,107 @@
+/** Snapshot card with status stripe, stats grid, and sync/view actions. */
+
+import { RefreshCw, Eye } from 'lucide-react'
+import { cn } from '../lib/cn.ts'
+import { Label, type LabelColor } from './label.tsx'
+import type { IconName } from './icon-button.tsx'
+
+type SnapshotStatus = 'synced' | 'pending' | 'conflict' | 'outdated'
+
+export interface SnapshotCardProps {
+  title: string
+  timestamp?: string
+  status: SnapshotStatus
+  description?: string
+  stats?: { label: string; value: string | number }[]
+  onSync?: () => void
+  onView?: () => void
+  className?: string
+}
+
+const statusStripeColor: Record<SnapshotStatus, string> = {
+  synced: 'bg-green-400',
+  pending: 'bg-amber-400',
+  conflict: 'bg-red-400',
+  outdated: 'bg-neutral-500',
+}
+
+const statusLabelConfig: Record<SnapshotStatus, { text: string; color: LabelColor; icon: IconName; tooltip: string }> = {
+  synced: { text: 'Synced', color: 'green', icon: 'check-circle', tooltip: 'Snapshot is in sync' },
+  pending: { text: 'Pending', color: 'amber', icon: 'loader', tooltip: 'Snapshot is awaiting sync' },
+  conflict: { text: 'Conflict', color: 'red', icon: 'alert-triangle', tooltip: 'Snapshot has conflicts' },
+  outdated: { text: 'Outdated', color: 'neutral', icon: 'info', tooltip: 'Snapshot is outdated' },
+}
+
+export function SnapshotCard({
+  title,
+  timestamp,
+  status,
+  description,
+  stats,
+  onSync,
+  onView,
+  className,
+}: SnapshotCardProps) {
+  return (
+    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>
+      <div className={cn('h-1', statusStripeColor[status])} />
+
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="text-sm font-medium text-neutral-200 truncate">{title}</h3>
+          <Label
+            text={statusLabelConfig[status].text}
+            color={statusLabelConfig[status].color}
+            icon={statusLabelConfig[status].icon}
+            tooltip={{ description: statusLabelConfig[status].tooltip }}
+            size="xs"
+          />
+        </div>
+
+        {timestamp && (
+          <p className="mt-1 text-[10px] text-neutral-500">{timestamp}</p>
+        )}
+
+        {description && (
+          <p className="mt-2 text-xs text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
+        )}
+
+        {stats && stats.length > 0 && (
+          <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
+            {stats.map((stat) => (
+              <div key={stat.label}>
+                <p className="text-[10px] text-neutral-500">{stat.label}</p>
+                <p className="text-xs font-medium text-neutral-200">{stat.value}</p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(onSync || onView) && (
+          <div className="mt-3 pt-3 border-t border-neutral-700 flex items-center gap-2">
+            {onSync && (
+              <button
+                type="button"
+                onClick={onSync}
+                className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-blue-400/15 text-blue-400 hover:bg-blue-400/25 transition-colors cursor-pointer"
+              >
+                <RefreshCw className={cn('w-3 h-3', status === 'pending' && 'animate-spin')} />
+                Sync
+              </button>
+            )}
+            {onView && (
+              <button
+                type="button"
+                onClick={onView}
+                className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md text-neutral-400 hover:bg-neutral-700 transition-colors cursor-pointer"
+              >
+                <Eye className="w-3 h-3" />
+                View
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/ui/snippets-panel.tsx

@@ -0,0 +1,161 @@
+/** Searchable panel for browsing, copying, and inserting code snippets. */
+
+import { useState, useMemo } from 'react'
+import { Search } from 'lucide-react'
+import { cn } from '../lib/cn.ts'
+import { IconButton } from './icon-button.tsx'
+
+export interface Snippet {
+  id: string
+  label: string
+  language?: string
+  description?: string
+  code: string
+  tags?: string[]
+}
+
+export interface SnippetsPanelProps {
+  snippets: Snippet[]
+  onInsert?: (id: string) => void
+  onCopy?: (id: string) => void
+  showSearch?: boolean
+  className?: string
+}
+
+const LANGUAGE_COLORS: Record<string, string> = {
+  typescript: '#3178c6',
+  javascript: '#f7df1e',
+  tsx: '#3178c6',
+  jsx: '#f7df1e',
+  css: '#264de4',
+  html: '#e34c26',
+  json: '#f9e2af',
+  python: '#3572a5',
+  rust: '#dea584',
+  go: '#00add8',
+  bash: 'blue-400',
+  shell: 'blue-400',
+  sql: '#e38c00',
+}
+
+function matchesSearch(snippet: Snippet, query: string): boolean {
+  if (snippet.label.toLowerCase().includes(query)) return true
+  if (snippet.description?.toLowerCase().includes(query)) return true
+  if (snippet.language?.toLowerCase().includes(query)) return true
+  if (snippet.tags?.some((t) => t.toLowerCase().includes(query))) return true
+  return false
+}
+
+export function SnippetsPanel({
+  snippets,
+  onInsert,
+  onCopy,
+  showSearch = false,
+  className,
+}: SnippetsPanelProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredSnippets = useMemo(
+    () => searchQuery ? snippets.filter((s) => matchesSearch(s, searchQuery.toLowerCase())) : snippets,
+    [snippets, searchQuery],
+  )
+
+  return (
+    <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
+      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
+        <span className="text-[10px] text-neutral-500">{snippets.length} snippets</span>
+      </div>
+      {showSearch && (
+        <div className="px-2 py-2 border-b border-neutral-700">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs">
+            <Search className="w-3 h-3 text-neutral-500 shrink-0" />
+            <input
+              type="text"
+              placeholder="Search snippets..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-xs"
+            />
+          </div>
+        </div>
+      )}
+      <div className="flex-1 overflow-y-auto p-2 space-y-2">
+        {filteredSnippets.map((snippet: Snippet) => (
+          <SnippetCard
+            key={snippet.id}
+            snippet={snippet}
+            onInsert={onInsert}
+            onCopy={onCopy}
+          />
+        ))}
+        {filteredSnippets.length === 0 && (
+          <p className="text-[11px] text-neutral-500 text-center py-4">No snippets found</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface SnippetCardProps {
+  snippet: Snippet
+  onInsert?: (id: string) => void
+  onCopy?: (id: string) => void
+}
+
+function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
+  const langColor = snippet.language ? LANGUAGE_COLORS[snippet.language.toLowerCase()] ?? '#6b7280' : '#6b7280'
+
+  return (
+    <div className="rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors">
+      <div className="flex items-center justify-between gap-2 px-2.5 py-1.5">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
+          {snippet.language && (
+            <span
+              className="px-1.5 py-0.5 text-[9px] font-medium rounded shrink-0"
+              style={{ color: langColor, backgroundColor: `${langColor}20` }}
+            >
+              {snippet.language}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0">
+          {onInsert && (
+            <IconButton
+              icon="arrow-down-to-line"
+              onClick={() => onInsert(snippet.id)}
+              size="xss"
+              tooltip={{ title: 'Insert snippet', description: 'Insert this snippet' }}
+            />
+          )}
+          {onCopy && (
+            <IconButton
+              icon="copy"
+              onClick={() => onCopy(snippet.id)}
+              size="xss"
+              tooltip={{ title: 'Copy snippet', description: 'Copy to clipboard' }}
+            />
+          )}
+        </div>
+      </div>
+      {snippet.description && (
+        <p className="px-2.5 pb-1.5 text-[11px] text-neutral-400 leading-relaxed">{snippet.description}</p>
+      )}
+      <div className="mx-2.5 mb-2 rounded bg-black border border-neutral-700 overflow-hidden">
+        <pre className="p-2 text-[11px] text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+          <code>{snippet.code}</code>
+        </pre>
+      </div>
+      {snippet.tags && snippet.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 px-2.5 pb-2">
+          {snippet.tags.map((tag) => (
+            <span key={tag} className="px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/sort-dropdown.tsx

@@ -0,0 +1,109 @@
+import { useState, useRef, useEffect } from 'react'
+import { ArrowUp, ArrowDown, ChevronDown, Check } from 'lucide-react'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
+import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
+import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+const VARIANT_CLASSES = {
+  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
+  outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-800' },
+}
+
+export interface SortField {
+  value: string
+  label: string
+  /** Label suffix when ascending (default: "↑") */
+  ascLabel?: string
+  /** Label suffix when descending (default: "↓") */
+  descLabel?: string
+}
+
+export interface SortDropdownProps {
+  field: string
+  ascending: boolean
+  onFieldChange: (field: string) => void
+  onToggleDirection: () => void
+  fields: SortField[]
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+}
+
+export function SortDropdown({
+  field,
+  ascending,
+  onFieldChange,
+  onToggleDirection,
+  fields,
+  variant = 'outline',
+  color = 'blue',
+}: SortDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [highlightIdx, setHighlightIdx] = useState(-1)
+  const ref = useRef<HTMLDivElement>(null)
+  const menuRef = useDropdownMaxHeight<HTMLDivElement>(isOpen)
+  const v = VARIANT_CLASSES[variant]
+
+  useClickOutside(ref, isOpen, () => setIsOpen(false))
+
+  useEffect(() => {
+    if (isOpen) setHighlightIdx(fields.findIndex((f) => f.value === field))
+  }, [isOpen, fields, field])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightIdx((i) => Math.min(i + 1, fields.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()
+      onFieldChange(fields[highlightIdx].value)
+      setIsOpen(false)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+    }
+  }
+
+  const current = fields.find((f) => f.value === field) ?? fields[0]
+  const DirIcon = ascending ? ArrowUp : ArrowDown
+
+  return (
+    <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-xs transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
+      >
+        <span
+          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
+          onClick={(e) => { e.stopPropagation(); onToggleDirection() }}
+          role="button"
+        >
+          <DirIcon className="w-3 h-3" />
+        </span>
+        <span className="whitespace-nowrap">{current.label}</span>
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+          {fields.map((f, idx) => (
+            <button
+              key={f.value}
+              onClick={() => { onFieldChange(f.value); setIsOpen(false) }}
+              onPointerEnter={() => setHighlightIdx(idx)}
+              className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
+                idx === highlightIdx ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : field === f.value ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+              }`}
+            >
+              <Check className={`w-3 h-3 shrink-0 ${field === f.value ? FORM_COLORS[color].accent : 'invisible'}`} />
+              <span>{f.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/status-card.tsx

@@ -0,0 +1,96 @@
+/** Status card displaying a list of labeled items with color-coded status indicators. */
+
+import {
+  Settings, Shield, Database, Globe, Zap, Code, Terminal,
+  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug,
+} 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>> = {
+  settings: Settings, shield: Shield, database: Database, globe: Globe,
+  zap: Zap, code: Code, terminal: Terminal, star: Star, cloud: Cloud,
+  bell: Bell, heart: Heart, sparkles: Sparkles, bot: Bot, plug: Plug,
+}
+
+type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+
+export interface StatusItem {
+  label: string
+  value: string | number
+  status: StatusType
+}
+
+export interface StatusCardProps {
+  title: string
+  icon?: IconName
+  iconColor?: string
+  items: StatusItem[]
+  action?: { label: string; onClick: () => void }
+  className?: string
+}
+
+const statusDotColor: Record<StatusType, string> = {
+  success: 'bg-green-400',
+  warning: 'bg-amber-400',
+  error: 'bg-red-400',
+  info: 'bg-blue-400',
+  neutral: 'bg-neutral-500',
+}
+
+const statusValueColor: Record<StatusType, string> = {
+  success: 'text-green-400',
+  warning: 'text-amber-400',
+  error: 'text-red-400',
+  info: 'text-blue-400',
+  neutral: 'text-neutral-400',
+}
+
+export function StatusCard({
+  title,
+  icon,
+  iconColor = 'blue-400',
+  items,
+  action,
+  className,
+}: StatusCardProps) {
+  const Icon = icon ? iconSubset[icon] : undefined
+
+  return (
+    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>
+      <div className="flex items-center gap-2.5 px-4 py-3 border-b border-neutral-700">
+        {Icon && (
+          <Icon className="w-4 h-4 shrink-0" style={{ color: iconColor }} />
+        )}
+        <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+      </div>
+
+      <div className="divide-y divide-[#374151]/60">
+        {items.map((item) => (
+          <div key={item.label} className="flex items-center justify-between px-4 py-2.5">
+            <span className="text-xs text-neutral-400">{item.label}</span>
+            <div className="flex items-center gap-2">
+              <span className={cn('text-xs font-medium', statusValueColor[item.status])}>
+                {item.value}
+              </span>
+              <span className={cn('w-2 h-2 rounded-full shrink-0', statusDotColor[item.status])} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {action && (
+        <div className="px-4 py-2.5 border-t border-neutral-700">
+          <button
+            type="button"
+            onClick={action.onClick}
+            className="text-xs text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
+          >
+            {action.label}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}