@hanzo/ui 5.3.19 → 5.3.22

package/dist/code/compare.mjs

@@ -1,6 +1,423 @@
-import*as o from'react';import {cva}from'class-variance-authority';import {Check,Copy,MoreHorizontal,RotateCcw,Settings}from'lucide-react';import {cn}from'@hanzo/ui/lib/utils';import {Badge}from'@hanzo/ui/badge';import {Button}from'@hanzo/ui/button';import {CodeDiff}from'@hanzo/ui/code/diff';import {CodeSnippet}from'@hanzo/ui/code/snippet';import {DropdownMenu,DropdownMenuTrigger,DropdownMenuContent,DropdownMenuItem}from'@hanzo/ui/dropdown-menu';import {ScrollArea}from'@hanzo/ui/scroll-area';import {Tabs,TabsList,TabsTrigger}from'@hanzo/ui/tabs';import {jsxs,jsx}from'react/jsx-runtime';var te=Object.defineProperty;var m=(v,x)=>te(v,"name",{value:x,configurable:true});var ge=cva("relative flex flex-col overflow-hidden rounded-lg border bg-background",{variants:{layout:{horizontal:"flex-col",vertical:"flex-row"},size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{layout:"horizontal",size:"default"}}),pe=o.forwardRef(({className:v,layout:x,size:V,files:i,defaultView:j="side-by-side",showLineNumbers:u=true,showCopyButton:E=true,allowMerge:A=false,conflictMarkers:I=[],onMergeConflict:S,onFileSelect:P,height:$="600px",syncScroll:M=true,...U},q)=>{let[c,G]=o.useState(j),[d,b]=o.useState(()=>i.length>=2?[i[0].id,i[1].id]:i.length>0?[i[0].id]:[]),[h,K]=o.useState({resolved:{},conflicts:I}),[O,T]=o.useState(false),g=o.useRef({}),N=o.useCallback((e,n)=>{M&&Object.entries(g.current).forEach(([a,s])=>{a!==e&&s&&(s.scrollTop=n);});},[M]),W=o.useCallback(async()=>{let e=d.map(n=>{let a=i.find(s=>s.id===n);return a?`=== ${a.filename} ===
-${a.content}`:""}).join(`
+"use client";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Check, Copy, MoreHorizontal, RotateCcw, Settings } from 'lucide-react';
+import { cn } from '@hanzo/ui/lib/utils';
+import { Badge } from '@hanzo/ui/badge';
+import { Button } from '@hanzo/ui/button';
+import { CodeDiff } from '@hanzo/ui/code/diff';
+import { CodeSnippet } from '@hanzo/ui/code/snippet';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@hanzo/ui/dropdown-menu';
+import { ScrollArea } from '@hanzo/ui/scroll-area';
+import { Tabs, TabsList, TabsTrigger } from '@hanzo/ui/tabs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-`);try{await navigator.clipboard.writeText(e),T(!0),setTimeout(()=>T(!1),2e3);}catch(n){console.error("Failed to copy comparison:",n);}},[i,d]),B=o.useCallback((e,n)=>{K(a=>({...a,resolved:{...a.resolved,[e]:n}})),S?.(n);},[S]),J=o.useCallback((e,n)=>{let a=e.content.split(`
-`),s=n.content.split(`
-`),l=0,k=0,R=0,ee=Math.max(a.length,s.length);for(let p=0;p<ee;p++){let D=a[p],L=s[p];D===void 0?l++:L===void 0?k++:D!==L&&R++;}return {added:l,removed:k,modified:R}},[]),Q=m(()=>jsx("div",{className:"flex items-center gap-2 flex-wrap",children:i.map((e,n)=>jsxs("div",{className:"flex items-center gap-2",children:[jsxs(Button,{variant:d.includes(e.id)?"default":"outline",size:"sm",onClick:()=>{b(c==="three-way"?a=>a.includes(e.id)?a.filter(s=>s!==e.id):a.length<3?[...a,e.id]:[a[1],a[2],e.id]:a=>a.includes(e.id)?a.filter(s=>s!==e.id):a.length<2?[...a,e.id]:[a[1],e.id]),P?.(e.id);},className:"gap-2",children:[e.label||e.filename,e.version&&jsx(Badge,{variant:"secondary",className:"text-xs",children:e.version})]}),n<i.length-1&&c!=="three-way"&&jsx("span",{className:"text-muted-foreground",children:"vs"})]},e.id))}),"renderFileSelector"),X=m(()=>{let[e,n]=d.map(s=>i.find(l=>l.id===s)).filter(Boolean);if(!e||!n)return jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground",children:"Select two files to compare"});let a=J(e,n);return jsxs("div",{className:"flex flex-col h-full",children:[jsx("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:jsxs("div",{className:"flex items-center gap-4",children:[jsx("span",{className:"text-sm font-medium",children:"Comparison"}),jsxs("div",{className:"flex items-center gap-3 text-xs",children:[jsxs("span",{className:"text-green-600",children:["+",a.added]}),jsxs("span",{className:"text-red-600",children:["-",a.removed]}),jsxs("span",{className:"text-yellow-600",children:["~",a.modified]})]})]})}),jsx("div",{className:"flex-1 min-h-0",children:jsx(CodeDiff,{oldCode:e.content,newCode:n.content,language:e.language,oldFilename:e.filename,newFilename:n.filename,showLineNumbers:u,showCopyButton:false,maxHeight:"100%",defaultView:"split",className:"border-0 rounded-none h-full"})})]})},"renderSideBySide"),Y=m(()=>{let[e,n]=d.map(a=>i.find(s=>s.id===a)).filter(Boolean);return !e||!n?jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground",children:"Select two files to compare"}):jsx(CodeDiff,{oldCode:e.content,newCode:n.content,language:e.language,filename:`${e.filename} \u2192 ${n.filename}`,showLineNumbers:u,showCopyButton:false,maxHeight:"100%",defaultView:"unified",className:"border-0 rounded-none"})},"renderUnified"),Z=m(()=>{let[e,n,a]=d.map(s=>i.find(l=>l.id===s)).filter(Boolean);return !e||!n||!a?jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground",children:"Select three files for three-way merge (base, current, incoming)"}):jsxs("div",{className:"grid grid-cols-3 gap-0 h-full",children:[jsxs("div",{className:"border-r",children:[jsx("div",{className:"border-b px-4 py-2 bg-muted/30",children:jsxs("span",{className:"text-sm font-medium",children:["Base (",e.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:s=>{g.current.base=s;},onScrollCapture:s=>{let l=s.target;N("base",l.scrollTop);},children:jsx(CodeSnippet,{code:e.content,language:e.language,showLineNumbers:u,showCopyButton:false,showHeader:false,className:"border-0 rounded-none"})})]}),jsxs("div",{className:"border-r",children:[jsx("div",{className:"border-b px-4 py-2 bg-blue-500/10",children:jsxs("span",{className:"text-sm font-medium text-blue-600 dark:text-blue-400",children:["Current (",n.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:s=>{g.current.current=s;},onScrollCapture:s=>{let l=s.target;N("current",l.scrollTop);},children:jsx(CodeSnippet,{code:n.content,language:n.language,showLineNumbers:u,showCopyButton:false,showHeader:false,className:"border-0 rounded-none"})})]}),jsxs("div",{children:[jsx("div",{className:"border-b px-4 py-2 bg-green-500/10",children:jsxs("span",{className:"text-sm font-medium text-green-600 dark:text-green-400",children:["Incoming (",a.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:s=>{g.current.incoming=s;},onScrollCapture:s=>{let l=s.target;N("incoming",l.scrollTop);},children:jsx(CodeSnippet,{code:a.content,language:a.language,showLineNumbers:u,showCopyButton:false,showHeader:false,className:"border-0 rounded-none"})})]})]})},"renderThreeWay"),_=m(()=>!A||h.conflicts.length===0?null:jsx("div",{className:"border-t bg-muted/30",children:jsxs("div",{className:"px-4 py-2",children:[jsxs("div",{className:"flex items-center justify-between",children:[jsx("span",{className:"text-sm font-medium",children:"Merge Conflicts"}),jsx(Badge,{variant:"destructive",className:"text-xs",children:h.conflicts.length})]}),jsx("div",{className:"mt-2 space-y-2",children:h.conflicts.map((e,n)=>jsxs("div",{className:"flex items-center gap-2 text-xs",children:[jsxs("span",{children:["Lines ",e.startLine,"-",e.endLine]}),jsxs("div",{className:"flex gap-1",children:[jsx(Button,{variant:"outline",size:"sm",onClick:()=>B(n,"current"),className:"h-6 text-xs",children:"Keep Current"}),jsx(Button,{variant:"outline",size:"sm",onClick:()=>B(n,"incoming"),className:"h-6 text-xs",children:"Accept Incoming"})]})]},n))})]})}),"renderMergeConflicts");return jsxs("div",{ref:q,className:cn(ge({layout:x,size:V}),v),style:{height:$},...U,children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2",children:[jsx("div",{className:"flex items-center gap-4",children:Q()}),jsxs("div",{className:"flex items-center gap-2",children:[jsx(Tabs,{value:c,onValueChange:e=>G(e),children:jsxs(TabsList,{className:"grid w-full grid-cols-3",children:[jsx(TabsTrigger,{value:"side-by-side",className:"text-xs",children:"Side by Side"}),jsx(TabsTrigger,{value:"unified",className:"text-xs",children:"Unified"}),jsx(TabsTrigger,{value:"three-way",className:"text-xs",children:"Three-way"})]})}),E&&jsx(Button,{variant:"ghost",size:"sm",onClick:W,className:"h-8 w-8 p-0",children:O?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"})}),jsxs(DropdownMenu,{children:[jsx(DropdownMenuTrigger,{asChild:true,children:jsx(Button,{variant:"ghost",size:"sm",className:"h-8 w-8 p-0",children:jsx(MoreHorizontal,{className:"h-3.5 w-3.5"})})}),jsxs(DropdownMenuContent,{align:"end",children:[jsxs(DropdownMenuItem,{onClick:()=>b([]),className:"gap-2",children:[jsx(RotateCcw,{className:"h-4 w-4"}),"Reset Selection"]}),jsxs(DropdownMenuItem,{className:"gap-2",children:[jsx(Settings,{className:"h-4 w-4"}),"Settings"]})]})]})]})]}),jsxs("div",{className:"flex-1 min-h-0",children:[c==="side-by-side"&&X(),c==="unified"&&Y(),c==="three-way"&&Z()]}),_()]})});pe.displayName="CodeCompare";export{pe as CodeCompare,ge as codeCompareVariants};
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var codeCompareVariants = cva(
+  "relative flex flex-col overflow-hidden rounded-lg border bg-background",
+  {
+    variants: {
+      layout: {
+        horizontal: "flex-col",
+        vertical: "flex-row"
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      layout: "horizontal",
+      size: "default"
+    }
+  }
+);
+var CodeCompare = React.forwardRef(
+  ({
+    className,
+    layout,
+    size,
+    files,
+    defaultView = "side-by-side",
+    showLineNumbers = true,
+    showCopyButton = true,
+    allowMerge = false,
+    conflictMarkers = [],
+    onMergeConflict,
+    onFileSelect,
+    height = "600px",
+    syncScroll = true,
+    ...props
+  }, ref) => {
+    const [view, setView] = React.useState(defaultView);
+    const [selectedFiles, setSelectedFiles] = React.useState(() => {
+      if (files.length >= 2) {
+        return [files[0].id, files[1].id];
+      }
+      return files.length > 0 ? [files[0].id] : [];
+    });
+    const [mergeState, setMergeState] = React.useState({
+      resolved: {},
+      conflicts: conflictMarkers
+    });
+    const [copied, setCopied] = React.useState(false);
+    const scrollRefs = React.useRef({});
+    const handleScroll = React.useCallback(
+      (sourceId, scrollTop) => {
+        if (!syncScroll) return;
+        Object.entries(scrollRefs.current).forEach(([id, ref2]) => {
+          if (id !== sourceId && ref2) {
+            ref2.scrollTop = scrollTop;
+          }
+        });
+      },
+      [syncScroll]
+    );
+    const copyComparison = React.useCallback(async () => {
+      const comparison = selectedFiles.map((fileId) => {
+        const file = files.find((f) => f.id === fileId);
+        return file ? `=== ${file.filename} ===
+${file.content}` : "";
+      }).join("\n\n");
+      try {
+        await navigator.clipboard.writeText(comparison);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (error) {
+        console.error("Failed to copy comparison:", error);
+      }
+    }, [files, selectedFiles]);
+    const resolveConflict = React.useCallback(
+      (conflictIndex, resolution) => {
+        setMergeState((prev) => ({
+          ...prev,
+          resolved: {
+            ...prev.resolved,
+            [conflictIndex]: resolution
+          }
+        }));
+        onMergeConflict?.(resolution);
+      },
+      [onMergeConflict]
+    );
+    const getFileStats = React.useCallback(
+      (file1, file2) => {
+        const lines1 = file1.content.split("\n");
+        const lines2 = file2.content.split("\n");
+        let added = 0;
+        let removed = 0;
+        let modified = 0;
+        const maxLines = Math.max(lines1.length, lines2.length);
+        for (let i = 0; i < maxLines; i++) {
+          const line1 = lines1[i];
+          const line2 = lines2[i];
+          if (line1 === void 0) {
+            added++;
+          } else if (line2 === void 0) {
+            removed++;
+          } else if (line1 !== line2) {
+            modified++;
+          }
+        }
+        return { added, removed, modified };
+      },
+      []
+    );
+    const renderFileSelector = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: files.map((file, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: selectedFiles.includes(file.id) ? "default" : "outline",
+          size: "sm",
+          onClick: () => {
+            if (view === "three-way") {
+              setSelectedFiles((prev) => {
+                if (prev.includes(file.id)) {
+                  return prev.filter((id) => id !== file.id);
+                }
+                return prev.length < 3 ? [...prev, file.id] : [prev[1], prev[2], file.id];
+              });
+            } else {
+              setSelectedFiles((prev) => {
+                if (prev.includes(file.id)) {
+                  return prev.filter((id) => id !== file.id);
+                }
+                return prev.length < 2 ? [...prev, file.id] : [prev[1], file.id];
+              });
+            }
+            onFileSelect?.(file.id);
+          },
+          className: "gap-2",
+          children: [
+            file.label || file.filename,
+            file.version && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: file.version })
+          ]
+        }
+      ),
+      index < files.length - 1 && view !== "three-way" && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "vs" })
+    ] }, file.id)) }), "renderFileSelector");
+    const renderSideBySide = /* @__PURE__ */ __name(() => {
+      const [file1, file2] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
+      if (!file1 || !file2) {
+        return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: "Select two files to compare" });
+      }
+      const stats = getFileStats(file1, file2);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Comparison" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-green-600", children: [
+              "+",
+              stats.added
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-red-600", children: [
+              "-",
+              stats.removed
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-yellow-600", children: [
+              "~",
+              stats.modified
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+          CodeDiff,
+          {
+            oldCode: file1.content,
+            newCode: file2.content,
+            language: file1.language,
+            oldFilename: file1.filename,
+            newFilename: file2.filename,
+            showLineNumbers,
+            showCopyButton: false,
+            maxHeight: "100%",
+            defaultView: "split",
+            className: "border-0 rounded-none h-full"
+          }
+        ) })
+      ] });
+    }, "renderSideBySide");
+    const renderUnified = /* @__PURE__ */ __name(() => {
+      const [file1, file2] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
+      if (!file1 || !file2) {
+        return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: "Select two files to compare" });
+      }
+      return /* @__PURE__ */ jsx(
+        CodeDiff,
+        {
+          oldCode: file1.content,
+          newCode: file2.content,
+          language: file1.language,
+          filename: `${file1.filename} \u2192 ${file2.filename}`,
+          showLineNumbers,
+          showCopyButton: false,
+          maxHeight: "100%",
+          defaultView: "unified",
+          className: "border-0 rounded-none"
+        }
+      );
+    }, "renderUnified");
+    const renderThreeWay = /* @__PURE__ */ __name(() => {
+      const [base, current, incoming] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
+      if (!base || !current || !incoming) {
+        return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: "Select three files for three-way merge (base, current, incoming)" });
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-0 h-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-r", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-muted/30", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
+            "Base (",
+            base.filename,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "h-full",
+              ref: (ref2) => {
+                scrollRefs.current["base"] = ref2;
+              },
+              onScrollCapture: (e) => {
+                const target = e.target;
+                handleScroll("base", target.scrollTop);
+              },
+              children: /* @__PURE__ */ jsx(
+                CodeSnippet,
+                {
+                  code: base.content,
+                  language: base.language,
+                  showLineNumbers,
+                  showCopyButton: false,
+                  showHeader: false,
+                  className: "border-0 rounded-none"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border-r", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-blue-500/10", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: [
+            "Current (",
+            current.filename,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "h-full",
+              ref: (ref2) => {
+                scrollRefs.current["current"] = ref2;
+              },
+              onScrollCapture: (e) => {
+                const target = e.target;
+                handleScroll("current", target.scrollTop);
+              },
+              children: /* @__PURE__ */ jsx(
+                CodeSnippet,
+                {
+                  code: current.content,
+                  language: current.language,
+                  showLineNumbers,
+                  showCopyButton: false,
+                  showHeader: false,
+                  className: "border-0 rounded-none"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-green-500/10", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: [
+            "Incoming (",
+            incoming.filename,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "h-full",
+              ref: (ref2) => {
+                scrollRefs.current["incoming"] = ref2;
+              },
+              onScrollCapture: (e) => {
+                const target = e.target;
+                handleScroll("incoming", target.scrollTop);
+              },
+              children: /* @__PURE__ */ jsx(
+                CodeSnippet,
+                {
+                  code: incoming.content,
+                  language: incoming.language,
+                  showLineNumbers,
+                  showCopyButton: false,
+                  showHeader: false,
+                  className: "border-0 rounded-none"
+                }
+              )
+            }
+          )
+        ] })
+      ] });
+    }, "renderThreeWay");
+    const renderMergeConflicts = /* @__PURE__ */ __name(() => {
+      if (!allowMerge || mergeState.conflicts.length === 0) return null;
+      return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/30", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Merge Conflicts" }),
+          /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: mergeState.conflicts.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: mergeState.conflicts.map((conflict, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Lines ",
+            conflict.startLine,
+            "-",
+            conflict.endLine
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => resolveConflict(index, "current"),
+                className: "h-6 text-xs",
+                children: "Keep Current"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => resolveConflict(index, "incoming"),
+                className: "h-6 text-xs",
+                children: "Accept Incoming"
+              }
+            )
+          ] })
+        ] }, index)) })
+      ] }) });
+    }, "renderMergeConflicts");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(codeCompareVariants({ layout, size }), className),
+        style: { height },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: renderFileSelector() }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Tabs, { value: view, onValueChange: (value) => setView(value), children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "side-by-side", className: "text-xs", children: "Side by Side" }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "unified", className: "text-xs", children: "Unified" }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "three-way", className: "text-xs", children: "Three-way" })
+              ] }) }),
+              showCopyButton && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: copyComparison,
+                  className: "h-8 w-8 p-0",
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-3.5 w-3.5" }) }) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => setSelectedFiles([]),
+                      className: "gap-2",
+                      children: [
+                        /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
+                        "Reset Selection"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", children: [
+                    /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+                    "Settings"
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", children: [
+            view === "side-by-side" && renderSideBySide(),
+            view === "unified" && renderUnified(),
+            view === "three-way" && renderThreeWay()
+          ] }),
+          renderMergeConflicts()
+        ]
+      }
+    );
+  }
+);
+CodeCompare.displayName = "CodeCompare";
+
+export { CodeCompare, codeCompareVariants };