shadcn/app/public/registry/styles/default/code-compare.json

{
  "name": "code-compare",
  "description": "Side-by-side code comparison",
  "dependencies": [
    "react-diff-viewer"
  ],
  "files": [
    {
      "name": "code-compare.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  Check,\n  ChevronDown,\n  ChevronUp,\n  Copy,\n  GitMerge,\n  MoreHorizontal,\n  RotateCcw,\n  Settings,\n  SplitSquareHorizontal,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { CodeDiff } from \"@/registry/default/ui/code-diff\"\nimport { CodeSnippet } from \"@/registry/default/ui/code-snippet\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nconst codeCompareVariants = cva(\n  \"relative flex flex-col overflow-hidden rounded-lg border bg-background\",\n  {\n    variants: {\n      layout: {\n        horizontal: \"flex-col\",\n        vertical: \"flex-row\",\n      },\n      size: {\n        sm: \"text-xs\",\n        default: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      layout: \"horizontal\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface CompareFile {\n  id: string\n  filename: string\n  content: string\n  language: string\n  label?: string\n  version?: string\n  lastModified?: Date\n}\n\nexport interface ConflictMarker {\n  startLine: number\n  endLine: number\n  type: \"conflict\" | \"incoming\" | \"current\"\n  content: string\n}\n\nexport interface CodeCompareProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof codeCompareVariants> {\n  files: CompareFile[]\n  defaultView?: \"side-by-side\" | \"unified\" | \"three-way\"\n  showLineNumbers?: boolean\n  showCopyButton?: boolean\n  allowMerge?: boolean\n  conflictMarkers?: ConflictMarker[]\n  onMergeConflict?: (resolution: string) => void\n  onFileSelect?: (fileId: string) => void\n  height?: string\n  syncScroll?: boolean\n}\n\ninterface MergeState {\n  resolved: Record<string, string>\n  conflicts: ConflictMarker[]\n}\n\nconst CodeCompare = React.forwardRef<HTMLDivElement, CodeCompareProps>(\n  (\n    {\n      className,\n      layout,\n      size,\n      files,\n      defaultView = \"side-by-side\",\n      showLineNumbers = true,\n      showCopyButton = true,\n      allowMerge = false,\n      conflictMarkers = [],\n      onMergeConflict,\n      onFileSelect,\n      height = \"600px\",\n      syncScroll = true,\n      ...props\n    },\n    ref\n  ) => {\n    const [view, setView] = React.useState(defaultView)\n    const [selectedFiles, setSelectedFiles] = React.useState<string[]>(() => {\n      if (files.length >= 2) {\n        return [files[0].id, files[1].id]\n      }\n      return files.length > 0 ? [files[0].id] : []\n    })\n    const [mergeState, setMergeState] = React.useState<MergeState>({\n      resolved: {},\n      conflicts: conflictMarkers,\n    })\n    const [copied, setCopied] = React.useState(false)\n\n    const scrollRefs = React.useRef<Record<string, HTMLDivElement | null>>({})\n\n    // Sync scroll between panes\n    const handleScroll = React.useCallback(\n      (sourceId: string, scrollTop: number) => {\n        if (!syncScroll) return\n\n        Object.entries(scrollRefs.current).forEach(([id, ref]) => {\n          if (id !== sourceId && ref) {\n            ref.scrollTop = scrollTop\n          }\n        })\n      },\n      [syncScroll]\n    )\n\n    const copyComparison = React.useCallback(async () => {\n      const comparison = selectedFiles\n        .map((fileId) => {\n          const file = files.find((f) => f.id === fileId)\n          return file ? `=== ${file.filename} ===\\n${file.content}` : \"\"\n        })\n        .join(\"\\n\\n\")\n\n      try {\n        await navigator.clipboard.writeText(comparison)\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      } catch (error) {\n        console.error(\"Failed to copy comparison:\", error)\n      }\n    }, [files, selectedFiles])\n\n    const resolveConflict = React.useCallback(\n      (conflictIndex: number, resolution: string) => {\n        setMergeState((prev) => ({\n          ...prev,\n          resolved: {\n            ...prev.resolved,\n            [conflictIndex]: resolution,\n          },\n        }))\n\n        onMergeConflict?.(resolution)\n      },\n      [onMergeConflict]\n    )\n\n    const getFileStats = React.useCallback(\n      (file1: CompareFile, file2: CompareFile) => {\n        const lines1 = file1.content.split(\"\\n\")\n        const lines2 = file2.content.split(\"\\n\")\n\n        // Simple line-by-line comparison\n        let added = 0\n        let removed = 0\n        let modified = 0\n\n        const maxLines = Math.max(lines1.length, lines2.length)\n\n        for (let i = 0; i < maxLines; i++) {\n          const line1 = lines1[i]\n          const line2 = lines2[i]\n\n          if (line1 === undefined) {\n            added++\n          } else if (line2 === undefined) {\n            removed++\n          } else if (line1 !== line2) {\n            modified++\n          }\n        }\n\n        return { added, removed, modified }\n      },\n      []\n    )\n\n    const renderFileSelector = () => (\n      <div className=\"flex items-center gap-2 flex-wrap\">\n        {files.map((file, index) => (\n          <div key={file.id} className=\"flex items-center gap-2\">\n            <Button\n              variant={selectedFiles.includes(file.id) ? \"default\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => {\n                if (view === \"three-way\") {\n                  // For three-way, allow up to 3 files\n                  setSelectedFiles((prev) => {\n                    if (prev.includes(file.id)) {\n                      return prev.filter((id) => id !== file.id)\n                    }\n                    return prev.length < 3\n                      ? [...prev, file.id]\n                      : [prev[1], prev[2], file.id]\n                  })\n                } else {\n                  // For side-by-side/unified, allow up to 2 files\n                  setSelectedFiles((prev) => {\n                    if (prev.includes(file.id)) {\n                      return prev.filter((id) => id !== file.id)\n                    }\n                    return prev.length < 2\n                      ? [...prev, file.id]\n                      : [prev[1], file.id]\n                  })\n                }\n                onFileSelect?.(file.id)\n              }}\n              className=\"gap-2\"\n            >\n              {file.label || file.filename}\n              {file.version && (\n                <Badge variant=\"secondary\" className=\"text-xs\">\n                  {file.version}\n                </Badge>\n              )}\n            </Button>\n            {index < files.length - 1 && view !== \"three-way\" && (\n              <span className=\"text-muted-foreground\">vs</span>\n            )}\n          </div>\n        ))}\n      </div>\n    )\n\n    const renderSideBySide = () => {\n      const [file1, file2] = selectedFiles\n        .map((id) => files.find((f) => f.id === id))\n        .filter(Boolean) as CompareFile[]\n\n      if (!file1 || !file2) {\n        return (\n          <div className=\"flex items-center justify-center h-32 text-muted-foreground\">\n            Select two files to compare\n          </div>\n        )\n      }\n\n      const stats = getFileStats(file1, file2)\n\n      return (\n        <div className=\"flex flex-col h-full\">\n          {/* Stats */}\n          <div className=\"flex items-center justify-between border-b px-4 py-2 bg-muted/30\">\n            <div className=\"flex items-center gap-4\">\n              <span className=\"text-sm font-medium\">Comparison</span>\n              <div className=\"flex items-center gap-3 text-xs\">\n                <span className=\"text-green-600\">+{stats.added}</span>\n                <span className=\"text-red-600\">-{stats.removed}</span>\n                <span className=\"text-yellow-600\">~{stats.modified}</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Comparison */}\n          <div className=\"flex-1 min-h-0\">\n            <CodeDiff\n              oldCode={file1.content}\n              newCode={file2.content}\n              language={file1.language}\n              oldFilename={file1.filename}\n              newFilename={file2.filename}\n              showLineNumbers={showLineNumbers}\n              showCopyButton={false}\n              maxHeight=\"100%\"\n              defaultView=\"split\"\n              className=\"border-0 rounded-none h-full\"\n            />\n          </div>\n        </div>\n      )\n    }\n\n    const renderUnified = () => {\n      const [file1, file2] = selectedFiles\n        .map((id) => files.find((f) => f.id === id))\n        .filter(Boolean) as CompareFile[]\n\n      if (!file1 || !file2) {\n        return (\n          <div className=\"flex items-center justify-center h-32 text-muted-foreground\">\n            Select two files to compare\n          </div>\n        )\n      }\n\n      return (\n        <CodeDiff\n          oldCode={file1.content}\n          newCode={file2.content}\n          language={file1.language}\n          filename={`${file1.filename} → ${file2.filename}`}\n          showLineNumbers={showLineNumbers}\n          showCopyButton={false}\n          maxHeight=\"100%\"\n          defaultView=\"unified\"\n          className=\"border-0 rounded-none\"\n        />\n      )\n    }\n\n    const renderThreeWay = () => {\n      const [base, current, incoming] = selectedFiles\n        .map((id) => files.find((f) => f.id === id))\n        .filter(Boolean) as CompareFile[]\n\n      if (!base || !current || !incoming) {\n        return (\n          <div className=\"flex items-center justify-center h-32 text-muted-foreground\">\n            Select three files for three-way merge (base, current, incoming)\n          </div>\n        )\n      }\n\n      return (\n        <div className=\"grid grid-cols-3 gap-0 h-full\">\n          {/* Base */}\n          <div className=\"border-r\">\n            <div className=\"border-b px-4 py-2 bg-muted/30\">\n              <span className=\"text-sm font-medium\">\n                Base ({base.filename})\n              </span>\n            </div>\n            <ScrollArea\n              className=\"h-full\"\n              ref={(ref) => {\n                scrollRefs.current[\"base\"] = ref\n              }}\n              onScrollCapture={(e) => {\n                const target = e.target as HTMLDivElement\n                handleScroll(\"base\", target.scrollTop)\n              }}\n            >\n              <CodeSnippet\n                code={base.content}\n                language={base.language}\n                showLineNumbers={showLineNumbers}\n                showCopyButton={false}\n                showHeader={false}\n                className=\"border-0 rounded-none\"\n              />\n            </ScrollArea>\n          </div>\n\n          {/* Current */}\n          <div className=\"border-r\">\n            <div className=\"border-b px-4 py-2 bg-blue-500/10\">\n              <span className=\"text-sm font-medium text-blue-600 dark:text-blue-400\">\n                Current ({current.filename})\n              </span>\n            </div>\n            <ScrollArea\n              className=\"h-full\"\n              ref={(ref) => {\n                scrollRefs.current[\"current\"] = ref\n              }}\n              onScrollCapture={(e) => {\n                const target = e.target as HTMLDivElement\n                handleScroll(\"current\", target.scrollTop)\n              }}\n            >\n              <CodeSnippet\n                code={current.content}\n                language={current.language}\n                showLineNumbers={showLineNumbers}\n                showCopyButton={false}\n                showHeader={false}\n                className=\"border-0 rounded-none\"\n              />\n            </ScrollArea>\n          </div>\n\n          {/* Incoming */}\n          <div>\n            <div className=\"border-b px-4 py-2 bg-green-500/10\">\n              <span className=\"text-sm font-medium text-green-600 dark:text-green-400\">\n                Incoming ({incoming.filename})\n              </span>\n            </div>\n            <ScrollArea\n              className=\"h-full\"\n              ref={(ref) => {\n                scrollRefs.current[\"incoming\"] = ref\n              }}\n              onScrollCapture={(e) => {\n                const target = e.target as HTMLDivElement\n                handleScroll(\"incoming\", target.scrollTop)\n              }}\n            >\n              <CodeSnippet\n                code={incoming.content}\n                language={incoming.language}\n                showLineNumbers={showLineNumbers}\n                showCopyButton={false}\n                showHeader={false}\n                className=\"border-0 rounded-none\"\n              />\n            </ScrollArea>\n          </div>\n        </div>\n      )\n    }\n\n    const renderMergeConflicts = () => {\n      if (!allowMerge || mergeState.conflicts.length === 0) return null\n\n      return (\n        <div className=\"border-t bg-muted/30\">\n          <div className=\"px-4 py-2\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-sm font-medium\">Merge Conflicts</span>\n              <Badge variant=\"destructive\" className=\"text-xs\">\n                {mergeState.conflicts.length}\n              </Badge>\n            </div>\n            <div className=\"mt-2 space-y-2\">\n              {mergeState.conflicts.map((conflict, index) => (\n                <div key={index} className=\"flex items-center gap-2 text-xs\">\n                  <span>\n                    Lines {conflict.startLine}-{conflict.endLine}\n                  </span>\n                  <div className=\"flex gap-1\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => resolveConflict(index, \"current\")}\n                      className=\"h-6 text-xs\"\n                    >\n                      Keep Current\n                    </Button>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => resolveConflict(index, \"incoming\")}\n                      className=\"h-6 text-xs\"\n                    >\n                      Accept Incoming\n                    </Button>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(codeCompareVariants({ layout, size }), className)}\n        style={{ height }}\n        {...props}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between border-b px-4 py-2\">\n          <div className=\"flex items-center gap-4\">{renderFileSelector()}</div>\n\n          <div className=\"flex items-center gap-2\">\n            <Tabs value={view} onValueChange={(value) => setView(value as any)}>\n              <TabsList className=\"grid w-full grid-cols-3\">\n                <TabsTrigger value=\"side-by-side\" className=\"text-xs\">\n                  Side by Side\n                </TabsTrigger>\n                <TabsTrigger value=\"unified\" className=\"text-xs\">\n                  Unified\n                </TabsTrigger>\n                <TabsTrigger value=\"three-way\" className=\"text-xs\">\n                  Three-way\n                </TabsTrigger>\n              </TabsList>\n            </Tabs>\n\n            {showCopyButton && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={copyComparison}\n                className=\"h-8 w-8 p-0\"\n              >\n                {copied ? (\n                  <Check className=\"h-3.5 w-3.5 text-green-500\" />\n                ) : (\n                  <Copy className=\"h-3.5 w-3.5\" />\n                )}\n              </Button>\n            )}\n\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"sm\" className=\"h-8 w-8 p-0\">\n                  <MoreHorizontal className=\"h-3.5 w-3.5\" />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                <DropdownMenuItem\n                  onClick={() => setSelectedFiles([])}\n                  className=\"gap-2\"\n                >\n                  <RotateCcw className=\"h-4 w-4\" />\n                  Reset Selection\n                </DropdownMenuItem>\n                <DropdownMenuItem className=\"gap-2\">\n                  <Settings className=\"h-4 w-4\" />\n                  Settings\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 min-h-0\">\n          {view === \"side-by-side\" && renderSideBySide()}\n          {view === \"unified\" && renderUnified()}\n          {view === \"three-way\" && renderThreeWay()}\n        </div>\n\n        {/* Merge conflicts */}\n        {renderMergeConflicts()}\n      </div>\n    )\n  }\n)\n\nCodeCompare.displayName = \"CodeCompare\"\n\nexport { CodeCompare, codeCompareVariants }\n"
    }
  ],
  "type": "components:code"
}