@annondeveloper/ui-kit 0.1.0 → 0.2.0

package/src/components/smart-table.tsx

@@ -0,0 +1,383 @@
+'use client'
+
+import type React from 'react'
+import { useState, useMemo, useCallback } from 'react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { Sparkles, X, TrendingUp, AlertTriangle, Hash, Regex } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { DataTable, type DataTableProps } from './data-table'
+import { cn } from '../utils'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Describes an auto-detected filter suggestion for a data column. */
+export interface FilterSuggestion {
+  /** Column accessor key. */
+  column: string
+  /** Type of insight: outlier, top-n, pattern, or threshold. */
+  type: 'outlier' | 'top-n' | 'pattern' | 'threshold'
+  /** Human-readable label for the suggestion pill. */
+  label: string
+  /** Apply this filter to the data. */
+  filter: () => void
+}
+
+/** Props for the SmartTable component. */
+export interface SmartTableProps<T> extends DataTableProps<T> {
+  /** Callback fired when a filter suggestion is generated or clicked. */
+  onFilterSuggestion?: (suggestion: FilterSuggestion) => void
+  /** Maximum number of suggestions to show. */
+  maxSuggestions?: number
+}
+
+// ---------------------------------------------------------------------------
+// Analysis helpers
+// ---------------------------------------------------------------------------
+
+function mean(nums: number[]): number {
+  if (nums.length === 0) return 0
+  return nums.reduce((a, b) => a + b, 0) / nums.length
+}
+
+function stdDev(nums: number[]): number {
+  if (nums.length < 2) return 0
+  const m = mean(nums)
+  const variance = nums.reduce((sum, n) => sum + (n - m) ** 2, 0) / nums.length
+  return Math.sqrt(variance)
+}
+
+function analyzeColumn<T>(
+  columnId: string,
+  columnHeader: string,
+  data: T[],
+  getValue: (row: T) => unknown,
+): FilterSuggestion[] {
+  const suggestions: FilterSuggestion[] = []
+  const values = data.map(getValue).filter(v => v != null)
+  if (values.length === 0) return suggestions
+
+  // Check if numeric column
+  const numericValues = values
+    .map(v => (typeof v === 'number' ? v : typeof v === 'string' && v !== '' && !isNaN(Number(v)) ? Number(v) : null))
+    .filter((v): v is number => v !== null)
+
+  if (numericValues.length > values.length * 0.7) {
+    // Outlier detection (>2 std dev from mean)
+    const m = mean(numericValues)
+    const sd = stdDev(numericValues)
+    if (sd > 0) {
+      const outliers = numericValues.filter(v => Math.abs(v - m) > 2 * sd)
+      if (outliers.length > 0 && outliers.length < numericValues.length * 0.3) {
+        suggestions.push({
+          column: columnId,
+          type: 'outlier',
+          label: `${outliers.length} outlier${outliers.length > 1 ? 's' : ''} in ${columnHeader}`,
+          filter: () => {},
+        })
+      }
+    }
+
+    // Threshold suggestion — find if >80% of values are above or below median
+    const sorted = [...numericValues].sort((a, b) => a - b)
+    const median = sorted[Math.floor(sorted.length / 2)] ?? 0
+    const aboveMedian = numericValues.filter(v => v > median)
+    if (aboveMedian.length > 0 && aboveMedian.length < numericValues.length * 0.2) {
+      suggestions.push({
+        column: columnId,
+        type: 'threshold',
+        label: `Top ${aboveMedian.length} high values in ${columnHeader}`,
+        filter: () => {},
+      })
+    }
+  } else {
+    // String column analysis
+    const strValues = values.map(String)
+    const freq = new Map<string, number>()
+    for (const v of strValues) {
+      freq.set(v, (freq.get(v) ?? 0) + 1)
+    }
+
+    // Pattern detection: if one value is >90% dominant
+    for (const [val, count] of freq) {
+      if (count / strValues.length >= 0.9 && freq.size > 1) {
+        const otherCount = strValues.length - count
+        suggestions.push({
+          column: columnId,
+          type: 'pattern',
+          label: `Show non-"${val.length > 20 ? val.slice(0, 20) + '\u2026' : val}" (${otherCount})`,
+          filter: () => {},
+        })
+      }
+    }
+
+    // Top-N: if there are more than 5 unique values, suggest top 5
+    if (freq.size > 5) {
+      const topEntries = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5)
+      const topTotal = topEntries.reduce((s, e) => s + e[1], 0)
+      suggestions.push({
+        column: columnId,
+        type: 'top-n',
+        label: `Top 5 ${columnHeader} (${Math.round((topTotal / strValues.length) * 100)}%)`,
+        filter: () => {},
+      })
+    }
+
+    // Minority value detection: values that appear in <12% of rows
+    const minorityValues = [...freq.entries()].filter(
+      ([, count]) => count / strValues.length < 0.12 && count > 0,
+    )
+    if (minorityValues.length > 0 && minorityValues.length < freq.size) {
+      const totalMinority = minorityValues.reduce((s, [, c]) => s + c, 0)
+      suggestions.push({
+        column: columnId,
+        type: 'pattern',
+        label: `Rare ${columnHeader} values (${totalMinority} rows)`,
+        filter: () => {},
+      })
+    }
+  }
+
+  return suggestions
+}
+
+// ---------------------------------------------------------------------------
+// Suggestion icon mapping
+// ---------------------------------------------------------------------------
+
+const SUGGESTION_ICONS: Record<FilterSuggestion['type'], LucideIcon> = {
+  outlier: AlertTriangle,
+  'top-n': TrendingUp,
+  pattern: Regex,
+  threshold: Hash,
+}
+
+const SUGGESTION_COLORS: Record<FilterSuggestion['type'], string> = {
+  outlier: 'bg-[hsl(var(--status-warning)/0.15)] text-[hsl(var(--status-warning))] border-[hsl(var(--status-warning)/0.3)]',
+  'top-n': 'bg-[hsl(var(--brand-primary)/0.15)] text-[hsl(var(--brand-primary))] border-[hsl(var(--brand-primary)/0.3)]',
+  pattern: 'bg-[hsl(var(--brand-secondary)/0.15)] text-[hsl(var(--brand-secondary))] border-[hsl(var(--brand-secondary)/0.3)]',
+  threshold: 'bg-[hsl(var(--status-critical)/0.15)] text-[hsl(var(--status-critical))] border-[hsl(var(--status-critical)/0.3)]',
+}
+
+// ---------------------------------------------------------------------------
+// SmartTable
+// ---------------------------------------------------------------------------
+
+/**
+ * @description An enhanced DataTable that analyzes column data on mount and auto-generates
+ * smart filter suggestions such as outlier detection, top-N values, dominant patterns,
+ * and threshold-based highlights. Click a suggestion to apply it as a filter.
+ * Wraps the existing DataTable via composition.
+ */
+export function SmartTable<T>({
+  columns,
+  data,
+  onFilterSuggestion,
+  maxSuggestions = 6,
+  ...tableProps
+}: SmartTableProps<T>): React.JSX.Element {
+  const prefersReducedMotion = useReducedMotion()
+  const [dismissed, setDismissed] = useState<Set<string>>(new Set())
+  const [appliedFilter, setAppliedFilter] = useState<string | null>(null)
+  const [filteredData, setFilteredData] = useState<T[] | null>(null)
+
+  // Generate suggestions by analyzing each column
+  const suggestions = useMemo(() => {
+    if (data.length < 3) return []
+
+    const allSuggestions: FilterSuggestion[] = []
+
+    for (const colDef of columns) {
+      const col = colDef as ColumnDef<T, unknown> & { accessorKey?: string; accessorFn?: (row: T) => unknown; header?: string }
+      const columnId = col.accessorKey ?? (col as { id?: string }).id ?? ''
+      const columnHeader = typeof col.header === 'string' ? col.header : columnId
+
+      if (!columnId) continue
+
+      const getValue = col.accessorFn
+        ? col.accessorFn
+        : (row: T) => (row as Record<string, unknown>)[columnId]
+
+      const columnSuggestions = analyzeColumn(columnId, columnHeader, data, getValue)
+
+      // Wire up actual filter functions
+      for (const s of columnSuggestions) {
+        s.filter = () => {
+          const vals = data.map(getValue).filter(v => v != null)
+          let filtered: T[]
+
+          switch (s.type) {
+            case 'outlier': {
+              const nums = vals
+                .map(v => (typeof v === 'number' ? v : Number(v)))
+                .filter(v => !isNaN(v))
+              const m = mean(nums)
+              const sd = stdDev(nums)
+              filtered = data.filter(row => {
+                const v = getValue(row)
+                const n = typeof v === 'number' ? v : Number(v)
+                return !isNaN(n) && Math.abs(n - m) > 2 * sd
+              })
+              break
+            }
+            case 'top-n': {
+              const freq = new Map<string, number>()
+              for (const v of vals) freq.set(String(v), (freq.get(String(v)) ?? 0) + 1)
+              const topKeys = new Set([...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map(e => e[0]))
+              filtered = data.filter(row => topKeys.has(String(getValue(row))))
+              break
+            }
+            case 'threshold': {
+              const nums = vals
+                .map(v => (typeof v === 'number' ? v : Number(v)))
+                .filter(v => !isNaN(v))
+              const sorted = [...nums].sort((a, b) => a - b)
+              const median = sorted[Math.floor(sorted.length / 2)] ?? 0
+              filtered = data.filter(row => {
+                const v = getValue(row)
+                const n = typeof v === 'number' ? v : Number(v)
+                return !isNaN(n) && n > median
+              })
+              break
+            }
+            case 'pattern': {
+              const freq = new Map<string, number>()
+              for (const v of vals) freq.set(String(v), (freq.get(String(v)) ?? 0) + 1)
+              // Find dominant value
+              let dominant = ''
+              let maxCount = 0
+              for (const [k, c] of freq) {
+                if (c > maxCount) { dominant = k; maxCount = c }
+              }
+              if (maxCount / vals.length >= 0.9) {
+                // Show non-dominant
+                filtered = data.filter(row => String(getValue(row)) !== dominant)
+              } else {
+                // Rare values
+                const rareKeys = new Set(
+                  [...freq.entries()].filter(([, c]) => c / vals.length < 0.12).map(e => e[0]),
+                )
+                filtered = data.filter(row => rareKeys.has(String(getValue(row))))
+              }
+              break
+            }
+            default:
+              filtered = data
+          }
+
+          setFilteredData(filtered)
+          setAppliedFilter(s.label)
+          onFilterSuggestion?.(s)
+        }
+      }
+
+      allSuggestions.push(...columnSuggestions)
+    }
+
+    return allSuggestions.slice(0, maxSuggestions)
+  }, [data, columns, maxSuggestions, onFilterSuggestion])
+
+  const visibleSuggestions = suggestions.filter(s => !dismissed.has(s.label))
+
+  const handleDismiss = useCallback((label: string) => {
+    setDismissed(prev => new Set(prev).add(label))
+  }, [])
+
+  const handleClearFilter = useCallback(() => {
+    setFilteredData(null)
+    setAppliedFilter(null)
+  }, [])
+
+  const displayData = filteredData ?? data
+
+  return (
+    <div>
+      {/* Suggestion pills bar */}
+      <AnimatePresence>
+        {visibleSuggestions.length > 0 && !appliedFilter && (
+          <motion.div
+            initial={prefersReducedMotion ? undefined : { opacity: 0, y: -8 }}
+            animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+            exit={prefersReducedMotion ? undefined : { opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="mb-3 flex flex-wrap items-center gap-2"
+          >
+            <span className="flex items-center gap-1.5 text-[11px] font-medium text-[hsl(var(--text-tertiary))] uppercase tracking-wider">
+              <Sparkles className="h-3.5 w-3.5 text-[hsl(var(--brand-primary))]" />
+              Suggested Filters
+            </span>
+
+            {visibleSuggestions.map(suggestion => {
+              const Icon = SUGGESTION_ICONS[suggestion.type]
+              return (
+                <motion.button
+                  key={suggestion.label}
+                  layout={!prefersReducedMotion}
+                  initial={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.9 }}
+                  animate={prefersReducedMotion ? undefined : { opacity: 1, scale: 1 }}
+                  exit={prefersReducedMotion ? undefined : { opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.15 }}
+                  onClick={suggestion.filter}
+                  className={cn(
+                    'group inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[12px] font-medium',
+                    'transition-all hover:shadow-sm cursor-pointer',
+                    SUGGESTION_COLORS[suggestion.type],
+                  )}
+                >
+                  <Icon className="h-3 w-3" />
+                  {suggestion.label}
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => { e.stopPropagation(); handleDismiss(suggestion.label) }}
+                    onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); handleDismiss(suggestion.label) } }}
+                    className="ml-0.5 opacity-0 group-hover:opacity-100 transition-opacity rounded-full p-0.5 hover:bg-[hsl(var(--bg-overlay)/0.3)]"
+                  >
+                    <X className="h-2.5 w-2.5" />
+                  </span>
+                </motion.button>
+              )
+            })}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Active filter indicator */}
+      <AnimatePresence>
+        {appliedFilter && (
+          <motion.div
+            initial={prefersReducedMotion ? undefined : { opacity: 0, y: -4 }}
+            animate={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
+            exit={prefersReducedMotion ? undefined : { opacity: 0, y: -4 }}
+            transition={{ duration: 0.15 }}
+            className="mb-3 flex items-center gap-2"
+          >
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-[hsl(var(--brand-primary)/0.15)] border border-[hsl(var(--brand-primary)/0.3)] px-3 py-1 text-[12px] font-medium text-[hsl(var(--brand-primary))]">
+              <Sparkles className="h-3 w-3" />
+              {appliedFilter}
+              <span className="ml-1 tabular-nums text-[11px] opacity-70">
+                ({displayData.length} row{displayData.length !== 1 ? 's' : ''})
+              </span>
+            </span>
+            <button
+              onClick={handleClearFilter}
+              className="inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] font-medium text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))] hover:bg-[hsl(var(--bg-elevated)/0.5)] transition-colors"
+            >
+              <X className="h-3 w-3" />
+              Clear
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Wrapped DataTable */}
+      <DataTable<T>
+        columns={columns}
+        data={displayData}
+        {...tableProps}
+      />
+    </div>
+  )
+}

package/src/components/sortable-list.tsx

@@ -0,0 +1,268 @@
+'use client'
+
+import type React from 'react'
+import { useState, useCallback, useRef } from 'react'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { GripVertical } from 'lucide-react'
+import { cn } from '../utils'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** A sortable item must have a string id. */
+export interface SortableItem {
+  id: string
+  [key: string]: unknown
+}
+
+/** Props passed to the drag handle in the render function. */
+export interface DragHandleProps {
+  /** Attach to the drag handle element. */
+  onPointerDown: (e: React.PointerEvent) => void
+  /** Whether this item is currently being dragged. */
+  isDragging: boolean
+  /** Keyboard handler for accessible reordering. */
+  onKeyDown: (e: React.KeyboardEvent) => void
+  /** The drag handle should be focusable. */
+  tabIndex: number
+  /** ARIA role for the drag handle. */
+  role: string
+  /** ARIA description for keyboard reordering. */
+  'aria-roledescription': string
+}
+
+/** Props for the SortableList component. */
+export interface SortableListProps<T extends SortableItem> {
+  /** Array of items to display. Each must have a unique `id`. */
+  items: T[]
+  /** Callback when items are reordered. Receives the new array. */
+  onReorder: (items: T[]) => void
+  /** Render function for each item. Receives the item, its index, and drag handle props. */
+  renderItem: (item: T, index: number, dragHandleProps: DragHandleProps) => React.JSX.Element
+  /** Layout direction. Default "vertical". */
+  direction?: 'vertical' | 'horizontal'
+  /** Additional class name for the list container. */
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// SortableList
+// ---------------------------------------------------------------------------
+
+/**
+ * @description A drag-and-drop reorderable list with smooth Framer Motion layout animations.
+ * Pure React implementation using pointer events (no external DnD library).
+ * Supports keyboard reordering (Space to pick up, arrows to move, Enter/Space to drop).
+ * Touch-friendly and accessible.
+ */
+export function SortableList<T extends SortableItem>({
+  items,
+  onReorder,
+  renderItem,
+  direction = 'vertical',
+  className,
+}: SortableListProps<T>): React.JSX.Element {
+  const prefersReducedMotion = useReducedMotion()
+  const [dragIdx, setDragIdx] = useState<number | null>(null)
+  const [overIdx, setOverIdx] = useState<number | null>(null)
+  const [kbPickedIdx, setKbPickedIdx] = useState<number | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const startPos = useRef({ x: 0, y: 0 })
+  const dragItemId = useRef<string | null>(null)
+
+  const handlePointerDown = useCallback(
+    (index: number) => (e: React.PointerEvent) => {
+      e.preventDefault()
+      // Only respond to primary button / touch
+      if (e.button !== 0) return
+
+      setDragIdx(index)
+      setOverIdx(index)
+      dragItemId.current = items[index]?.id ?? null
+      startPos.current = { x: e.clientX, y: e.clientY }
+
+      const handlePointerMove = (ev: PointerEvent) => {
+        if (!containerRef.current) return
+        const container = containerRef.current
+        const children = Array.from(container.children) as HTMLElement[]
+
+        // Find which item we're over
+        for (let i = 0; i < children.length; i++) {
+          const rect = children[i]!.getBoundingClientRect()
+          const midX = rect.left + rect.width / 2
+          const midY = rect.top + rect.height / 2
+          const isOver = direction === 'vertical'
+            ? ev.clientY < midY + rect.height / 2 && ev.clientY > midY - rect.height / 2
+            : ev.clientX < midX + rect.width / 2 && ev.clientX > midX - rect.width / 2
+
+          if (isOver) {
+            setOverIdx(i)
+            break
+          }
+        }
+      }
+
+      const handlePointerUp = () => {
+        document.removeEventListener('pointermove', handlePointerMove)
+        document.removeEventListener('pointerup', handlePointerUp)
+
+        setDragIdx(prev => {
+          setOverIdx(over => {
+            if (prev !== null && over !== null && prev !== over) {
+              const newItems = [...items]
+              const [moved] = newItems.splice(prev, 1)
+              if (moved) newItems.splice(over, 0, moved)
+              // Use setTimeout to avoid state update during render
+              setTimeout(() => onReorder(newItems), 0)
+            }
+            return null
+          })
+          return null
+        })
+      }
+
+      document.addEventListener('pointermove', handlePointerMove)
+      document.addEventListener('pointerup', handlePointerUp)
+    },
+    [items, onReorder, direction],
+  )
+
+  // Keyboard reorder
+  const handleKeyDown = useCallback(
+    (index: number) => (e: React.KeyboardEvent) => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault()
+        if (kbPickedIdx === null) {
+          // Pick up
+          setKbPickedIdx(index)
+        } else {
+          // Drop
+          if (kbPickedIdx !== index) {
+            const newItems = [...items]
+            const [moved] = newItems.splice(kbPickedIdx, 1)
+            if (moved) newItems.splice(index, 0, moved)
+            onReorder(newItems)
+          }
+          setKbPickedIdx(null)
+        }
+      } else if (e.key === 'Escape') {
+        setKbPickedIdx(null)
+      } else if (kbPickedIdx !== null) {
+        const isUp = direction === 'vertical' ? e.key === 'ArrowUp' : e.key === 'ArrowLeft'
+        const isDown = direction === 'vertical' ? e.key === 'ArrowDown' : e.key === 'ArrowRight'
+
+        if (isUp && kbPickedIdx > 0) {
+          e.preventDefault()
+          const newItems = [...items]
+          const [moved] = newItems.splice(kbPickedIdx, 1)
+          const newIdx = kbPickedIdx - 1
+          if (moved) newItems.splice(newIdx, 0, moved)
+          onReorder(newItems)
+          setKbPickedIdx(newIdx)
+        } else if (isDown && kbPickedIdx < items.length - 1) {
+          e.preventDefault()
+          const newItems = [...items]
+          const [moved] = newItems.splice(kbPickedIdx, 1)
+          const newIdx = kbPickedIdx + 1
+          if (moved) newItems.splice(newIdx, 0, moved)
+          onReorder(newItems)
+          setKbPickedIdx(newIdx)
+        }
+      }
+    },
+    [items, onReorder, kbPickedIdx, direction],
+  )
+
+  // Compute visual order during drag
+  const getVisualItems = useCallback(() => {
+    if (dragIdx === null || overIdx === null || dragIdx === overIdx) return items
+    const visual = [...items]
+    const [moved] = visual.splice(dragIdx, 1)
+    if (moved) visual.splice(overIdx, 0, moved)
+    return visual
+  }, [items, dragIdx, overIdx])
+
+  const visualItems = dragIdx !== null ? getVisualItems() : items
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'flex',
+        direction === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
+        className,
+      )}
+      role="listbox"
+      aria-label="Sortable list"
+    >
+      <AnimatePresence>
+        {visualItems.map((item, index) => {
+          const isDragging = dragIdx !== null && item.id === dragItemId.current
+          const isKbPicked = kbPickedIdx !== null && items[kbPickedIdx]?.id === item.id
+
+          const dragHandleProps: DragHandleProps = {
+            onPointerDown: handlePointerDown(items.findIndex(i => i.id === item.id)),
+            isDragging: isDragging || isKbPicked,
+            onKeyDown: handleKeyDown(items.findIndex(i => i.id === item.id)),
+            tabIndex: 0,
+            role: 'option',
+            'aria-roledescription': 'sortable item',
+          }
+
+          return (
+            <motion.div
+              key={item.id}
+              layout={!prefersReducedMotion}
+              transition={prefersReducedMotion ? { duration: 0 } : { type: 'spring', stiffness: 500, damping: 35, mass: 0.5 }}
+              className={cn(
+                'relative',
+                isDragging && 'z-10 opacity-80',
+                isKbPicked && 'ring-2 ring-[hsl(var(--brand-primary))] rounded-lg',
+              )}
+              role="option"
+              aria-selected={isKbPicked}
+            >
+              {/* Drop indicator line */}
+              {dragIdx !== null && overIdx === index && !isDragging && (
+                <div
+                  className={cn(
+                    'absolute z-20 bg-[hsl(var(--brand-primary))] rounded-full',
+                    direction === 'vertical'
+                      ? 'left-0 right-0 -top-px h-0.5'
+                      : 'top-0 bottom-0 -left-px w-0.5',
+                  )}
+                />
+              )}
+              {renderItem(item, index, dragHandleProps)}
+            </motion.div>
+          )
+        })}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+/**
+ * @description Default drag handle component. Renders a GripVertical icon
+ * with proper pointer/keyboard event handlers from DragHandleProps.
+ */
+export function DragHandle(props: DragHandleProps): React.JSX.Element {
+  return (
+    <span
+      onPointerDown={props.onPointerDown}
+      onKeyDown={props.onKeyDown}
+      tabIndex={props.tabIndex}
+      role={props.role}
+      aria-roledescription={props['aria-roledescription']}
+      className={cn(
+        'inline-flex items-center justify-center p-1 rounded cursor-grab touch-none select-none',
+        'text-[hsl(var(--text-disabled))] hover:text-[hsl(var(--text-secondary))] transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))]',
+        props.isDragging && 'cursor-grabbing text-[hsl(var(--brand-primary))]',
+      )}
+    >
+      <GripVertical className="h-4 w-4" />
+    </span>
+  )
+}

package/src/components/sparkline.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 
 export interface SparklineProps {
@@ -45,7 +46,7 @@ export function Sparkline({
   fillOpacity = 0.1,
   showDots = false,
   className,
-}: SparklineProps) {
+}: SparklineProps): React.JSX.Element | null {
   if (data.length < 2) return null
 
   const pad = showDots ? 3 : 1

package/src/components/status-badge.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 
 /** Configuration for a single status entry in a StatusBadge. */
@@ -49,7 +50,7 @@ export interface StatusBadgeProps {
  */
 export function StatusBadge({
   status, label, size = 'md', pulse = false, statusMap, className,
-}: StatusBadgeProps) {
+}: StatusBadgeProps): React.JSX.Element {
   const map = statusMap ?? defaultStatusMap
   const fallback = map['unknown'] ?? defaultStatusMap['unknown']!
   const config = map[status] ?? fallback