@annondeveloper/ui-kit 0.1.0 → 0.2.1

package/src/components/copy-block.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import type React from 'react'
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { Copy, Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '../utils'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Props for the CopyBlock component. */
+export interface CopyBlockProps {
+  /** The text content to display and copy. */
+  content: string
+  /** Language hint for styling/accessibility (e.g. "json", "bash", "sql"). */
+  language?: string
+  /** Show line numbers in the gutter. Default false. */
+  showLineNumbers?: boolean
+  /** Max height in pixels before collapsing with a "Show more" toggle. */
+  maxHeight?: number
+  /** Optional label displayed above the code block. */
+  label?: string
+  /** Additional class name for the root container. */
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// CopyBlock
+// ---------------------------------------------------------------------------
+
+/**
+ * @description A monospace code/text display block with one-click copy, animated feedback,
+ * optional line numbers, collapsible overflow (show more/less), and dark-mode optimized styling.
+ * Designed for displaying code snippets, CLI commands, config blocks, and JSON payloads.
+ */
+export function CopyBlock({
+  content,
+  language,
+  showLineNumbers = false,
+  maxHeight,
+  label,
+  className,
+}: CopyBlockProps): React.JSX.Element {
+  const prefersReducedMotion = useReducedMotion()
+  const [copied, setCopied] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(true)
+  const [needsCollapse, setNeedsCollapse] = useState(false)
+  const contentRef = useRef<HTMLPreElement>(null)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => () => { if (copyTimerRef.current) clearTimeout(copyTimerRef.current) }, [])
+
+  // Check if content exceeds maxHeight
+  useEffect(() => {
+    if (!maxHeight || !contentRef.current) return
+    setNeedsCollapse(contentRef.current.scrollHeight > maxHeight)
+  }, [content, maxHeight])
+
+  const lines = useMemo(() => content.split('\n'), [content])
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard API not available
+      console.warn('Clipboard API not available')
+    }
+  }, [content])
+
+  const shouldCollapse = maxHeight && needsCollapse && isCollapsed
+
+  return (
+    <div
+      className={cn(
+        'relative group rounded-xl overflow-hidden',
+        'border border-[hsl(var(--border-subtle))]',
+        'bg-[hsl(var(--bg-base))]',
+        className,
+      )}
+    >
+      {/* Header bar */}
+      {(label || language) && (
+        <div className="flex items-center justify-between px-4 py-2 border-b border-[hsl(var(--border-subtle)/0.5)] bg-[hsl(var(--bg-surface)/0.3)]">
+          <div className="flex items-center gap-2">
+            {label && (
+              <span className="text-[11px] font-medium text-[hsl(var(--text-secondary))]">
+                {label}
+              </span>
+            )}
+            {language && (
+              <span className="inline-flex items-center rounded-md bg-[hsl(var(--bg-overlay)/0.5)] px-1.5 py-0.5 text-[10px] font-mono text-[hsl(var(--text-tertiary))]">
+                {language}
+              </span>
+            )}
+          </div>
+
+          {/* Copy button (always visible in header) */}
+          <button
+            onClick={handleCopy}
+            className={cn(
+              'inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium transition-all',
+              copied
+                ? 'text-[hsl(var(--status-ok))] bg-[hsl(var(--status-ok)/0.1)]'
+                : 'text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))] hover:bg-[hsl(var(--bg-elevated))]',
+            )}
+          >
+            <AnimatePresence mode="wait">
+              {copied ? (
+                <motion.span
+                  key="check"
+                  initial={prefersReducedMotion ? undefined : { scale: 0.5, opacity: 0 }}
+                  animate={prefersReducedMotion ? undefined : { scale: 1, opacity: 1 }}
+                  exit={prefersReducedMotion ? undefined : { scale: 0.5, opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  className="inline-flex items-center gap-1"
+                >
+                  <Check className="h-3.5 w-3.5" />
+                  Copied!
+                </motion.span>
+              ) : (
+                <motion.span
+                  key="copy"
+                  initial={prefersReducedMotion ? undefined : { scale: 0.5, opacity: 0 }}
+                  animate={prefersReducedMotion ? undefined : { scale: 1, opacity: 1 }}
+                  exit={prefersReducedMotion ? undefined : { scale: 0.5, opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  className="inline-flex items-center gap-1"
+                >
+                  <Copy className="h-3.5 w-3.5" />
+                  Copy
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </button>
+        </div>
+      )}
+
+      {/* Copy button for headerless blocks */}
+      {!label && !language && (
+        <button
+          onClick={handleCopy}
+          className={cn(
+            'absolute top-2 right-2 z-10 rounded-md p-1.5 transition-all',
+            'opacity-0 group-hover:opacity-100',
+            copied
+              ? 'text-[hsl(var(--status-ok))] bg-[hsl(var(--status-ok)/0.1)]'
+              : 'text-[hsl(var(--text-tertiary))] hover:text-[hsl(var(--text-primary))] bg-[hsl(var(--bg-elevated)/0.8)] hover:bg-[hsl(var(--bg-elevated))]',
+          )}
+          title={copied ? 'Copied!' : 'Copy to clipboard'}
+        >
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+        </button>
+      )}
+
+      {/* Content area */}
+      <div
+        className="overflow-x-auto"
+        style={shouldCollapse ? { maxHeight, overflow: 'hidden' } : undefined}
+      >
+        <pre
+          ref={contentRef}
+          className={cn(
+            'p-4 text-[13px] leading-relaxed font-mono',
+            'text-[hsl(var(--text-primary))]',
+            'whitespace-pre overflow-x-auto',
+          )}
+        >
+          {showLineNumbers ? (
+            <table className="border-collapse w-full">
+              <tbody>
+                {lines.map((line, i) => (
+                  <tr key={i} className="hover:bg-[hsl(var(--bg-surface)/0.3)]">
+                    <td className="select-none text-right pr-4 text-[hsl(var(--text-disabled))] text-[11px] tabular-nums w-8 align-top">
+                      {i + 1}
+                    </td>
+                    <td className="whitespace-pre">{line}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            content
+          )}
+        </pre>
+      </div>
+
+      {/* Collapse gradient + toggle */}
+      {maxHeight && needsCollapse && (
+        <>
+          {isCollapsed && (
+            <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-[hsl(var(--bg-base))] to-transparent pointer-events-none" />
+          )}
+          <div className="relative border-t border-[hsl(var(--border-subtle)/0.3)]">
+            <button
+              onClick={() => setIsCollapsed(c => !c)}
+              className={cn(
+                'w-full flex items-center justify-center gap-1.5 py-2 text-[11px] font-medium',
+                'text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))]',
+                'hover:bg-[hsl(var(--bg-surface)/0.3)] transition-colors',
+              )}
+            >
+              {isCollapsed ? (
+                <>
+                  Show more ({lines.length} lines)
+                  <ChevronDown className="h-3.5 w-3.5" />
+                </>
+              ) : (
+                <>
+                  Show less
+                  <ChevronUp className="h-3.5 w-3.5" />
+                </>
+              )}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/data-table.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import {
   useReactTable, getCoreRowModel, getSortedRowModel,
@@ -18,6 +19,7 @@ import type { LucideIcon } from 'lucide-react'
 import { TruncatedText } from './truncated-text'
 import { EmptyState } from './empty-state'
 import { Skeleton } from './skeleton'
+import { Select } from './select'
 import { cn } from '../utils'
 
 // ---------------------------------------------------------------------------
@@ -365,7 +367,7 @@ export function DataTable<T>({
   exportFilename,
   stickyFirstColumn = false,
   density: densityProp,
-}: DataTableProps<T>) {
+}: DataTableProps<T>): React.JSX.Element {
   const prefersReducedMotion = useReducedMotion()
 
   const [density, setDensity] = useState<Density>(() => {
@@ -678,18 +680,12 @@ export function DataTable<T>({
           </span>
 
           <div className="flex items-center gap-2">
-            <select
-              value={pageSize}
-              onChange={e => table.setPageSize(Number(e.target.value))}
-              className="rounded-md border border-[hsl(var(--border-subtle))]
-                bg-[hsl(var(--bg-surface))] px-2 py-1 text-[12px]
-                text-[hsl(var(--text-secondary))] outline-none
-                focus:border-[hsl(var(--brand-primary))] transition-colors"
-            >
-              {PAGE_SIZES.map(size => (
-                <option key={size} value={size}>{size} / page</option>
-              ))}
-            </select>
+            <Select
+              value={String(pageSize)}
+              onValueChange={v => table.setPageSize(Number(v))}
+              options={PAGE_SIZES.map(size => ({ value: String(size), label: `${size} / page` }))}
+              className="w-[110px] text-[12px]"
+            />
 
             <div className="flex items-center gap-1">
               <PaginationButton

package/src/components/diff-viewer.tsx

@@ -0,0 +1,340 @@
+'use client'
+
+import type React from 'react'
+import { useMemo, useState } from 'react'
+import { cn } from '../utils'
+
+export interface DiffViewerProps {
+  /** The original text. */
+  oldValue: string
+  /** The modified text. */
+  newValue: string
+  /** Display mode. */
+  mode?: 'inline' | 'side-by-side'
+  /** Language hint for potential styling. */
+  language?: string
+  /** Show line numbers in the gutter. */
+  showLineNumbers?: boolean
+  className?: string
+}
+
+type LineType = 'added' | 'removed' | 'unchanged'
+
+interface DiffLine {
+  type: LineType
+  content: string
+  oldLineNo?: number
+  newLineNo?: number
+}
+
+const MAX_LINES = 2000
+
+/** Simple line-by-line diff using longest common subsequence. */
+function computeDiff(oldLines: string[], newLines: string[]): DiffLine[] {
+  // Fall back to simple line-by-line comparison for large inputs
+  if (oldLines.length > MAX_LINES || newLines.length > MAX_LINES) {
+    const result: DiffLine[] = oldLines.map((l, i) => ({
+      type: (l === (newLines[i] ?? '') ? 'unchanged' : 'removed') as LineType,
+      content: l,
+      oldLineNo: i + 1,
+      newLineNo: i + 1,
+    }))
+    for (let i = oldLines.length; i < newLines.length; i++) {
+      result.push({
+        type: 'added' as LineType,
+        content: newLines[i],
+        oldLineNo: undefined,
+        newLineNo: i + 1,
+      })
+    }
+    return result
+  }
+
+  // Build LCS table
+  const m = oldLines.length
+  const n = newLines.length
+  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0))
+
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
+      }
+    }
+  }
+
+  // Backtrack to produce diff
+  const result: DiffLine[] = []
+  let i = m
+  let j = n
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      result.push({ type: 'unchanged', content: oldLines[i - 1], oldLineNo: i, newLineNo: j })
+      i--
+      j--
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.push({ type: 'added', content: newLines[j - 1], newLineNo: j })
+      j--
+    } else {
+      result.push({ type: 'removed', content: oldLines[i - 1], oldLineNo: i })
+      i--
+    }
+  }
+
+  return result.reverse()
+}
+
+const TYPE_BG: Record<LineType, string> = {
+  added: 'bg-[hsl(var(--status-ok))]/10',
+  removed: 'bg-[hsl(var(--status-critical))]/10',
+  unchanged: '',
+}
+
+const TYPE_PREFIX: Record<LineType, string> = {
+  added: '+',
+  removed: '-',
+  unchanged: ' ',
+}
+
+const TYPE_PREFIX_COLOR: Record<LineType, string> = {
+  added: 'text-[hsl(var(--status-ok))]',
+  removed: 'text-[hsl(var(--status-critical))]',
+  unchanged: 'text-[hsl(var(--text-tertiary))]',
+}
+
+/**
+ * @description A diff viewer showing line-by-line differences between two text values.
+ * Supports inline and side-by-side modes, collapsible unchanged sections, and line numbers.
+ */
+export function DiffViewer({
+  oldValue,
+  newValue,
+  mode = 'inline',
+  language,
+  showLineNumbers = true,
+  className,
+}: DiffViewerProps): React.JSX.Element {
+  const [expandedSections, setExpandedSections] = useState<Set<number>>(new Set())
+
+  const diffLines = useMemo(() => {
+    const oldLines = oldValue.split('\n')
+    const newLines = newValue.split('\n')
+    return computeDiff(oldLines, newLines)
+  }, [oldValue, newValue])
+
+  // Group unchanged sections for collapsing
+  const sections = useMemo(() => {
+    const groups: { type: 'changes' | 'unchanged'; lines: DiffLine[]; startIdx: number }[] = []
+    let current: DiffLine[] = []
+    let currentType: 'changes' | 'unchanged' | null = null
+    let startIdx = 0
+
+    for (let i = 0; i < diffLines.length; i++) {
+      const lineType = diffLines[i].type === 'unchanged' ? 'unchanged' : 'changes'
+      if (lineType !== currentType) {
+        if (current.length > 0 && currentType !== null) {
+          groups.push({ type: currentType, lines: current, startIdx })
+        }
+        current = [diffLines[i]]
+        currentType = lineType
+        startIdx = i
+      } else {
+        current.push(diffLines[i])
+      }
+    }
+    if (current.length > 0 && currentType !== null) {
+      groups.push({ type: currentType, lines: current, startIdx })
+    }
+    return groups
+  }, [diffLines])
+
+  const toggleSection = (idx: number) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev)
+      if (next.has(idx)) {
+        next.delete(idx)
+      } else {
+        next.add(idx)
+      }
+      return next
+    })
+  }
+
+  if (mode === 'side-by-side') {
+    return <SideBySide diffLines={diffLines} showLineNumbers={showLineNumbers} language={language} className={className} />
+  }
+
+  return (
+    <div
+      className={cn(
+        'w-full overflow-x-auto rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))]',
+        'font-mono text-xs leading-5',
+        className,
+      )}
+      data-language={language}
+    >
+      {sections.map((section, sIdx) => {
+        // Collapse unchanged sections longer than 6 lines
+        if (section.type === 'unchanged' && section.lines.length > 6 && !expandedSections.has(sIdx)) {
+          const topContext = section.lines.slice(0, 3)
+          const bottomContext = section.lines.slice(-3)
+          const hiddenCount = section.lines.length - 6
+
+          return (
+            <div key={sIdx}>
+              {topContext.map((line, i) => (
+                <InlineLine key={`${sIdx}-t-${i}`} line={line} showLineNumbers={showLineNumbers} />
+              ))}
+              <button
+                type="button"
+                onClick={() => toggleSection(sIdx)}
+                className={cn(
+                  'w-full px-3 py-1 text-center text-[10px]',
+                  'text-[hsl(var(--text-tertiary))] bg-[hsl(var(--bg-overlay))]/50',
+                  'hover:bg-[hsl(var(--bg-overlay))] cursor-pointer transition-colors duration-100',
+                )}
+              >
+                ... {hiddenCount} unchanged {hiddenCount === 1 ? 'line' : 'lines'} ...
+              </button>
+              {bottomContext.map((line, i) => (
+                <InlineLine key={`${sIdx}-b-${i}`} line={line} showLineNumbers={showLineNumbers} />
+              ))}
+            </div>
+          )
+        }
+
+        return (
+          <div key={sIdx}>
+            {section.type === 'unchanged' && expandedSections.has(sIdx) && (
+              <button
+                type="button"
+                onClick={() => toggleSection(sIdx)}
+                className={cn(
+                  'w-full px-3 py-0.5 text-center text-[10px]',
+                  'text-[hsl(var(--text-tertiary))] bg-[hsl(var(--bg-overlay))]/30',
+                  'hover:bg-[hsl(var(--bg-overlay))] cursor-pointer transition-colors duration-100',
+                )}
+              >
+                collapse {section.lines.length} unchanged lines
+              </button>
+            )}
+            {section.lines.map((line, i) => (
+              <InlineLine key={`${sIdx}-${i}`} line={line} showLineNumbers={showLineNumbers} />
+            ))}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function InlineLine({ line, showLineNumbers }: { line: DiffLine; showLineNumbers: boolean }): React.JSX.Element {
+  return (
+    <div className={cn('flex', TYPE_BG[line.type])}>
+      {showLineNumbers && (
+        <span className="shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums">
+          {line.oldLineNo ?? ''}
+        </span>
+      )}
+      {showLineNumbers && (
+        <span className="shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums">
+          {line.newLineNo ?? ''}
+        </span>
+      )}
+      <span className={cn('shrink-0 w-4 text-center select-none font-bold', TYPE_PREFIX_COLOR[line.type])}>
+        {TYPE_PREFIX[line.type]}
+      </span>
+      <span className="flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]">
+        {line.content}
+      </span>
+    </div>
+  )
+}
+
+function SideBySide({
+  diffLines,
+  showLineNumbers,
+  language,
+  className,
+}: {
+  diffLines: DiffLine[]
+  showLineNumbers: boolean
+  language?: string
+  className?: string
+}): React.JSX.Element {
+  // Build paired rows for side-by-side
+  const pairs: { left?: DiffLine; right?: DiffLine }[] = []
+  let i = 0
+  while (i < diffLines.length) {
+    const line = diffLines[i]
+    if (line.type === 'unchanged') {
+      pairs.push({ left: line, right: line })
+      i++
+    } else if (line.type === 'removed') {
+      // Look for a matching added line
+      if (i + 1 < diffLines.length && diffLines[i + 1].type === 'added') {
+        pairs.push({ left: line, right: diffLines[i + 1] })
+        i += 2
+      } else {
+        pairs.push({ left: line })
+        i++
+      }
+    } else {
+      pairs.push({ right: line })
+      i++
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'w-full overflow-x-auto rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))]',
+        'font-mono text-xs leading-5',
+        className,
+      )}
+      data-language={language}
+    >
+      <div className="grid grid-cols-2 divide-x divide-[hsl(var(--border-subtle))]">
+        {/* Left: old */}
+        <div>
+          {pairs.map((pair, idx) => (
+            <div
+              key={`l-${idx}`}
+              className={cn('flex', pair.left ? TYPE_BG[pair.left.type] : '')}
+            >
+              {showLineNumbers && (
+                <span className="shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums">
+                  {pair.left?.oldLineNo ?? ''}
+                </span>
+              )}
+              <span className="flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]">
+                {pair.left?.content ?? ''}
+              </span>
+            </div>
+          ))}
+        </div>
+        {/* Right: new */}
+        <div>
+          {pairs.map((pair, idx) => (
+            <div
+              key={`r-${idx}`}
+              className={cn('flex', pair.right ? TYPE_BG[pair.right.type] : '')}
+            >
+              {showLineNumbers && (
+                <span className="shrink-0 w-9 px-1.5 text-right select-none text-[hsl(var(--text-tertiary))]/50 tabular-nums">
+                  {pair.right?.newLineNo ?? ''}
+                </span>
+              )}
+              <span className="flex-1 px-2 whitespace-pre text-[hsl(var(--text-primary))]">
+                {pair.right?.content ?? ''}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/dropdown-menu.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { type ReactNode } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
@@ -42,7 +43,7 @@ const contentVariants = {
  * Features Framer Motion entry/exit animations, keyboard accessibility,
  * and a danger variant for destructive actions.
  */
-export function DropdownMenu({ trigger, items, align = 'end', className }: DropdownMenuProps) {
+export function DropdownMenu({ trigger, items, align = 'end', className }: DropdownMenuProps): React.JSX.Element {
   const prefersReducedMotion = useReducedMotion()
 
   return (

package/src/components/empty-state.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 import type { LucideIcon } from 'lucide-react'
 
@@ -19,7 +20,7 @@ export interface EmptyStateProps {
  * @description A decorative empty state placeholder with icon, title, description, and optional actions.
  * Features a subtle gradient background and glass-morphism styling.
  */
-export function EmptyState({ icon: Icon, title, description, actions, className }: EmptyStateProps) {
+export function EmptyState({ icon: Icon, title, description, actions, className }: EmptyStateProps): React.JSX.Element {
   return (
     <div
       className={cn(

package/src/components/filter-pill.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { cn } from '../utils'
 
 export interface FilterPillProps {
@@ -18,7 +19,7 @@ export interface FilterPillProps {
  * @description A rounded pill-style filter toggle with active state and optional count.
  * Uses CSS custom property tokens for dark/light mode compatibility.
  */
-export function FilterPill({ label, count, active, onClick, className }: FilterPillProps) {
+export function FilterPill({ label, count, active, onClick, className }: FilterPillProps): React.JSX.Element {
   return (
     <button
       type="button"