@hanzo/ui 5.3.35 → 5.3.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (254) hide show
  1. package/bin/create-registry.js +0 -0
  2. package/bin/npx-registry-mcp.js +0 -0
  3. package/bin/registry-mcp-wrapper.sh +0 -0
  4. package/bin/registry-mcp.js +0 -0
  5. package/bin/start-mcp-server.sh +0 -0
  6. package/bin/test-mcp.sh +0 -0
  7. package/dist/3d/button.js +1 -297
  8. package/dist/3d/button.mjs +1 -272
  9. package/dist/3d/card.js +1 -233
  10. package/dist/3d/card.mjs +1 -206
  11. package/dist/3d/carousel.js +1 -370
  12. package/dist/3d/carousel.mjs +1 -343
  13. package/dist/3d/grid.js +1 -361
  14. package/dist/3d/grid.mjs +1 -336
  15. package/dist/3d/index.js +1 -1517
  16. package/dist/3d/index.mjs +1 -1471
  17. package/dist/3d/marquee.js +1 -351
  18. package/dist/3d/marquee.mjs +1 -326
  19. package/dist/3d/pin.js +1 -45
  20. package/dist/3d/pin.mjs +1 -23
  21. package/dist/accordion.js +1 -79
  22. package/dist/accordion.mjs +1 -54
  23. package/dist/alert-dialog.js +1 -224
  24. package/dist/alert-dialog.mjs +1 -191
  25. package/dist/alert.js +1 -97
  26. package/dist/alert.mjs +1 -91
  27. package/dist/animation/animated-background.js +1 -423
  28. package/dist/animation/animated-background.mjs +1 -417
  29. package/dist/animation/animated-beam.js +1 -118
  30. package/dist/animation/animated-beam.mjs +1 -96
  31. package/dist/animation/animated-cursor.js +1 -274
  32. package/dist/animation/animated-cursor.mjs +1 -269
  33. package/dist/animation/animated-icon.js +2 -356
  34. package/dist/animation/animated-icon.mjs +2 -350
  35. package/dist/animation/animated-list.js +1 -338
  36. package/dist/animation/animated-list.mjs +1 -332
  37. package/dist/animation/animated-number.js +1 -282
  38. package/dist/animation/animated-number.mjs +1 -276
  39. package/dist/animation/animated-testimonials.js +1 -96
  40. package/dist/animation/animated-testimonials.mjs +1 -74
  41. package/dist/animation/animated-tooltip.js +1 -66
  42. package/dist/animation/animated-tooltip.mjs +1 -44
  43. package/dist/animation/apple-cards-carousel.js +1 -307
  44. package/dist/animation/apple-cards-carousel.mjs +1 -284
  45. package/dist/animation/apple-hello-effect.js +1 -59
  46. package/dist/animation/apple-hello-effect.mjs +1 -37
  47. package/dist/animation/index.js +2 -1951
  48. package/dist/animation/index.mjs +2 -1920
  49. package/dist/avatar.js +1 -70
  50. package/dist/avatar.mjs +1 -46
  51. package/dist/badge.js +1 -60
  52. package/dist/badge.mjs +1 -54
  53. package/dist/blocks/index.js +2 -1684
  54. package/dist/blocks/index.mjs +2 -1645
  55. package/dist/breadcrumb.js +1 -106
  56. package/dist/breadcrumb.mjs +1 -98
  57. package/dist/calendar-ext/index.js +1 -207
  58. package/dist/calendar-ext/index.mjs +1 -169
  59. package/dist/calendar.js +1 -193
  60. package/dist/calendar.mjs +1 -168
  61. package/dist/carousel.js +1 -282
  62. package/dist/carousel.mjs +1 -253
  63. package/dist/charts/index.js +6 -5840
  64. package/dist/charts/index.mjs +6 -5749
  65. package/dist/checkbox.js +1 -59
  66. package/dist/checkbox.mjs +1 -34
  67. package/dist/code/block.js +2 -225
  68. package/dist/code/block.mjs +2 -202
  69. package/dist/code/compare.js +5 -444
  70. package/dist/code/compare.mjs +5 -421
  71. package/dist/code/diff.js +12 -429
  72. package/dist/code/diff.mjs +11 -405
  73. package/dist/code/editor.js +1 -242
  74. package/dist/code/editor.mjs +1 -217
  75. package/dist/code/explorer.js +1 -290
  76. package/dist/code/explorer.mjs +1 -267
  77. package/dist/code/index.js +26 -2514
  78. package/dist/code/index.mjs +24 -2471
  79. package/dist/code/preview.js +6 -363
  80. package/dist/code/preview.mjs +6 -340
  81. package/dist/code/snippet.js +2 -273
  82. package/dist/code/snippet.mjs +2 -249
  83. package/dist/code/tabs.js +1 -74
  84. package/dist/code/tabs.mjs +1 -52
  85. package/dist/code/terminal.js +3 -436
  86. package/dist/code/terminal.mjs +3 -413
  87. package/dist/collapsible.js +1 -32
  88. package/dist/collapsible.mjs +1 -8
  89. package/dist/command.js +1 -282
  90. package/dist/command.mjs +1 -251
  91. package/dist/context-menu.js +1 -206
  92. package/dist/context-menu.mjs +1 -170
  93. package/dist/desktop/hooks.js +1 -223
  94. package/dist/desktop/hooks.mjs +1 -198
  95. package/dist/desktop/index.js +1 -685
  96. package/dist/desktop/index.mjs +1 -657
  97. package/dist/desktop/spotlight.js +1 -260
  98. package/dist/desktop/spotlight.mjs +1 -235
  99. package/dist/desktop/window.js +1 -273
  100. package/dist/desktop/window.mjs +1 -247
  101. package/dist/device/index.js +1 -2
  102. package/dist/device/index.mjs +0 -1
  103. package/dist/dialog.js +1 -245
  104. package/dist/dialog.mjs +1 -213
  105. package/dist/dock/basic.js +1 -173
  106. package/dist/dock/basic.mjs +1 -150
  107. package/dist/dock/index.js +1 -647
  108. package/dist/dock/index.mjs +1 -620
  109. package/dist/dock/limelight-nav.js +1 -314
  110. package/dist/dock/limelight-nav.mjs +1 -293
  111. package/dist/dock/macos.js +1 -140
  112. package/dist/dock/macos.mjs +1 -117
  113. package/dist/dock/menu.js +1 -69
  114. package/dist/dock/menu.mjs +1 -47
  115. package/dist/dock/message.js +1 -148
  116. package/dist/dock/message.mjs +1 -126
  117. package/dist/drawer.js +1 -114
  118. package/dist/drawer.mjs +1 -102
  119. package/dist/dropdown-menu.js +1 -201
  120. package/dist/dropdown-menu.mjs +1 -165
  121. package/dist/finance/AdvancedChart.js +2 -47
  122. package/dist/finance/AdvancedChart.mjs +2 -45
  123. package/dist/finance/CompanyProfile.js +2 -47
  124. package/dist/finance/CompanyProfile.mjs +2 -45
  125. package/dist/finance/CryptoScreener.js +2 -44
  126. package/dist/finance/CryptoScreener.mjs +2 -42
  127. package/dist/finance/Financials.js +2 -51
  128. package/dist/finance/Financials.mjs +2 -49
  129. package/dist/finance/ForexScreener.js +2 -45
  130. package/dist/finance/ForexScreener.mjs +2 -43
  131. package/dist/finance/MarketOverview.js +2 -103
  132. package/dist/finance/MarketOverview.mjs +2 -101
  133. package/dist/finance/NewsTimeline.js +2 -43
  134. package/dist/finance/NewsTimeline.mjs +2 -41
  135. package/dist/finance/OrderEntry.js +1 -130
  136. package/dist/finance/OrderEntry.mjs +1 -128
  137. package/dist/finance/OrdersHistory.js +1 -63
  138. package/dist/finance/OrdersHistory.mjs +1 -61
  139. package/dist/finance/PositionsList.js +1 -79
  140. package/dist/finance/PositionsList.mjs +1 -77
  141. package/dist/finance/StockScreener.js +2 -45
  142. package/dist/finance/StockScreener.mjs +2 -43
  143. package/dist/finance/SymbolInfo.js +2 -45
  144. package/dist/finance/SymbolInfo.mjs +2 -43
  145. package/dist/finance/TechnicalAnalysis.js +2 -53
  146. package/dist/finance/TechnicalAnalysis.mjs +2 -51
  147. package/dist/finance/TickerTape.js +2 -55
  148. package/dist/finance/TickerTape.mjs +2 -53
  149. package/dist/finance/TradingPanel.js +1 -190
  150. package/dist/finance/TradingPanel.mjs +1 -188
  151. package/dist/finance/index.js +2 -929
  152. package/dist/finance/index.mjs +2 -913
  153. package/dist/form/index.js +1 -153
  154. package/dist/form/index.mjs +1 -123
  155. package/dist/form.js +1 -171
  156. package/dist/form.mjs +1 -141
  157. package/dist/hover-card.js +1 -57
  158. package/dist/hover-card.mjs +1 -33
  159. package/dist/index.js +192 -9618
  160. package/dist/index.mjs +192 -9202
  161. package/dist/input-otp.js +1 -78
  162. package/dist/input-otp.mjs +1 -53
  163. package/dist/kanban/index.js +1 -593
  164. package/dist/kanban/index.mjs +1 -571
  165. package/dist/lib/utils.js +1 -28
  166. package/dist/lib/utils.mjs +1 -24
  167. package/dist/mermaid/index.js +1 -280
  168. package/dist/mermaid/index.mjs +1 -253
  169. package/dist/navigation/index.js +1 -97
  170. package/dist/navigation/index.mjs +1 -78
  171. package/dist/navigation-menu.js +1 -148
  172. package/dist/navigation-menu.mjs +1 -115
  173. package/dist/pattern/grid-pattern.js +3 -325
  174. package/dist/pattern/grid-pattern.mjs +3 -302
  175. package/dist/pattern/index.js +3 -325
  176. package/dist/pattern/index.mjs +3 -302
  177. package/dist/popover.js +1 -62
  178. package/dist/popover.mjs +1 -36
  179. package/dist/progress.js +1 -61
  180. package/dist/progress.mjs +1 -36
  181. package/dist/project/gantt.js +1 -64
  182. package/dist/project/gantt.mjs +1 -42
  183. package/dist/project/index.js +1 -635
  184. package/dist/project/index.mjs +1 -610
  185. package/dist/project/kanban.js +1 -596
  186. package/dist/project/kanban.mjs +1 -571
  187. package/dist/project/list.js +1 -34
  188. package/dist/project/list.mjs +1 -11
  189. package/dist/radio-group.js +1 -67
  190. package/dist/radio-group.mjs +1 -44
  191. package/dist/resizable.js +1 -71
  192. package/dist/resizable.mjs +1 -47
  193. package/dist/scroll-area.js +1 -88
  194. package/dist/scroll-area.mjs +1 -65
  195. package/dist/select.js +1 -139
  196. package/dist/select.mjs +1 -110
  197. package/dist/separator.js +1 -58
  198. package/dist/separator.mjs +1 -33
  199. package/dist/sheet.js +1 -147
  200. package/dist/sheet.mjs +1 -116
  201. package/dist/skeleton.js +1 -31
  202. package/dist/skeleton.mjs +1 -26
  203. package/dist/slider.js +1 -98
  204. package/dist/slider.mjs +1 -72
  205. package/dist/sonner.js +1 -33
  206. package/dist/sonner.mjs +1 -28
  207. package/dist/spline/index.js +1 -210
  208. package/dist/spline/index.mjs +1 -201
  209. package/dist/spline/media-stack.js +1 -192
  210. package/dist/spline/media-stack.mjs +1 -184
  211. package/dist/spline/player.js +1 -36
  212. package/dist/spline/player.mjs +1 -30
  213. package/dist/switch.js +1 -61
  214. package/dist/switch.mjs +1 -36
  215. package/dist/table.js +1 -109
  216. package/dist/table.mjs +1 -100
  217. package/dist/tabs.js +1 -127
  218. package/dist/tabs.mjs +1 -101
  219. package/dist/tailwind/index.mjs +1 -2011
  220. package/dist/textarea.js +1 -77
  221. package/dist/textarea.mjs +1 -55
  222. package/dist/toggle-group.js +1 -117
  223. package/dist/toggle-group.mjs +1 -92
  224. package/dist/toggle.js +1 -70
  225. package/dist/toggle.mjs +1 -47
  226. package/dist/tooltip.js +1 -66
  227. package/dist/tooltip.mjs +1 -39
  228. package/dist/types/index.mjs +1 -51
  229. package/dist/ui/announcement.js +1 -133
  230. package/dist/ui/announcement.mjs +1 -111
  231. package/dist/ui/avatar-group.js +1 -87
  232. package/dist/ui/avatar-group.mjs +1 -64
  233. package/dist/ui/banner.js +1 -84
  234. package/dist/ui/banner.mjs +1 -61
  235. package/dist/ui/cursor.js +1 -77
  236. package/dist/ui/cursor.mjs +1 -55
  237. package/dist/ui/index.js +1 -494
  238. package/dist/ui/index.mjs +1 -461
  239. package/dist/ui/marquee.js +1 -73
  240. package/dist/ui/marquee.mjs +1 -51
  241. package/dist/ui/pill.js +1 -84
  242. package/dist/ui/pill.mjs +1 -61
  243. package/dist/ui/spinner.js +1 -27
  244. package/dist/ui/spinner.mjs +1 -25
  245. package/dist/ui/tags.js +1 -116
  246. package/dist/ui/tags.mjs +1 -94
  247. package/dist/ui/ticker.js +1 -72
  248. package/dist/ui/ticker.mjs +1 -50
  249. package/dist/util/index.mjs +1 -404
  250. package/package.json +28 -27
  251. package/dist/primitives/index.js +0 -9619
  252. package/dist/primitives/index.mjs +0 -9203
  253. package/dist/primitives-export.js +0 -9619
  254. package/dist/primitives-export.mjs +0 -9203
@@ -1,1504 +1,26 @@
1
1
  "use client";
2
- import * as React6 from 'react';
3
- import { cva } from 'class-variance-authority';
4
- import { FileText, Check, Copy, MoreHorizontal, RotateCcw, Settings, GitCompare, Plus, Minus, Square, SplitSquareHorizontal, ChevronDown, FolderOpen, Folder, ChevronRight, Search, X, Eye, EyeOff, Terminal, RefreshCw, Play, AlertTriangle, Download, Minimize2, Maximize2, File, FileImage, FileCode } from 'lucide-react';
5
- import { codeToHtml, bundledLanguages } from 'shiki';
6
- import { cn } from '@hanzo/ui/lib/utils';
7
- import { Badge } from '@hanzo/ui/badge';
8
- import { Button } from '@hanzo/ui/button';
9
- import { Skeleton } from '@hanzo/ui/skeleton';
10
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
11
- import { CodeDiff } from '@hanzo/ui/code/diff';
12
- import { CodeSnippet } from '@hanzo/ui/code/snippet';
13
- import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@hanzo/ui/dropdown-menu';
14
- import { ScrollArea } from '@hanzo/ui/scroll-area';
15
- import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hanzo/ui/tabs';
16
- import { ToggleGroup, ToggleGroupItem } from '@hanzo/ui/toggle-group';
17
- import Editor from '@monaco-editor/react';
18
- import { useTheme } from 'next-themes';
19
- import { Input } from '@hanzo/ui/input';
20
- import { Separator } from '@hanzo/ui/separator';
21
- import { Toggle } from '@hanzo/ui/toggle';
2
+ import*as U from'react';import {cva}from'class-variance-authority';import {FileText,Check,Copy,MoreHorizontal,RotateCcw,Settings,GitCompare,Plus,Minus,Square,SplitSquareHorizontal,ChevronDown,FolderOpen,Folder,ChevronRight,Search,X,Eye,EyeOff,Terminal,RefreshCw,Play,AlertTriangle,Download,Minimize2,Maximize2,File,FileImage,FileCode}from'lucide-react';import {codeToHtml,bundledLanguages}from'shiki';import {cn}from'@hanzo/ui/lib/utils';import {Badge}from'@hanzo/ui/badge';import {Button}from'@hanzo/ui/button';import {Skeleton}from'@hanzo/ui/skeleton';import {jsxs,jsx,Fragment}from'react/jsx-runtime';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,TabsContent}from'@hanzo/ui/tabs';import {ToggleGroup,ToggleGroupItem}from'@hanzo/ui/toggle-group';import Xt from'@monaco-editor/react';import {useTheme}from'next-themes';import {Input}from'@hanzo/ui/input';import {Separator}from'@hanzo/ui/separator';import {Toggle}from'@hanzo/ui/toggle';var yt=Object.defineProperty;var x=(d,u)=>yt(d,"name",{value:u,configurable:true});var Be=cva("relative overflow-hidden rounded-lg border bg-muted/50",{variants:{theme:{dark:"bg-slate-950 border-slate-800",light:"bg-slate-50 border-slate-200",github:"bg-white border-slate-200","github-dark":"bg-slate-900 border-slate-700","vs-dark":"bg-slate-950 border-slate-800",monokai:"bg-slate-900 border-slate-700",dracula:"bg-slate-900 border-purple-800/30",nord:"bg-slate-800 border-slate-600"},size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{theme:"dark",size:"default"}}),Ve=U.memo(({line:d,lineNumber:u,showLineNumbers:l,isHighlighted:a=false,isDiffAdded:t=false,isDiffRemoved:s=false})=>jsxs("div",{className:cn("group relative flex min-h-[1.5rem] items-center px-4 py-0.5",a&&"bg-blue-500/10 border-l-2 border-l-blue-500",t&&"bg-green-500/10 border-l-2 border-l-green-500",s&&"bg-red-500/10 border-l-2 border-l-red-500"),children:[l&&jsx("span",{className:"mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground",children:u}),(t||s)&&jsx("span",{className:"mr-2 select-none text-xs",children:t?"+":s?"-":" "}),jsx("div",{className:"flex-1 overflow-x-auto",dangerouslySetInnerHTML:{__html:d}})]}));Ve.displayName="CodeLine";var ze=U.forwardRef(({className:d,theme:u,size:l,code:a,language:t="text",filename:s,showLineNumbers:g=true,highlightLines:w=[],showCopyButton:L=true,maxHeight:E="400px",diff:X,...J},Y)=>{let[O,j]=U.useState(""),[H,M]=U.useState(false),[P,$]=U.useState(true),_={dark:"github-dark",light:"github-light",github:"github-light","github-dark":"github-dark","vs-dark":"dark-plus",monokai:"monokai",dracula:"dracula",nord:"nord"};U.useEffect(()=>{x(async()=>{$(true);try{let N=await codeToHtml(a,{lang:t,theme:_[u||"dark"],transformers:[{code(r){let c=r.children.find(b=>b.type==="element"&&b.tagName==="code");c&&"children"in c&&c.children&&(r.children=c.children);}}]}),k=document.createElement("div");k.innerHTML=N;let B=k.querySelector("code");j(B?.innerHTML||N);}catch(N){console.error("Failed to highlight code:",N),j(a);}finally{$(false);}},"highlightCode")();},[a,t,u]);let R=U.useCallback(async()=>{try{await navigator.clipboard.writeText(a),M(!0),setTimeout(()=>M(!1),2e3);}catch(C){console.error("Failed to copy code:",C);}},[a]),F=O.split(`
3
+ `);return jsxs("div",{ref:Y,"data-testid":"code-block",className:cn(Be({theme:u,size:l,className:d})),...J,children:[(s||t||L)&&jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2",children:[jsxs("div",{className:"flex items-center gap-2",children:[s&&jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(FileText,{className:"h-3.5 w-3.5 text-muted-foreground"}),jsx("span",{className:"text-sm font-medium",children:s})]}),t&&jsx(Badge,{variant:"secondary",className:"text-xs",children:t})]}),L&&jsxs(Button,{variant:"ghost",size:"sm",onClick:R,className:"h-8 w-8 p-0",children:[H?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:H?"Copied":"Copy code"})]})]}),jsx("div",{className:"overflow-auto",style:{maxHeight:E},children:P?jsx("div",{className:"p-4 space-y-2",children:Array.from({length:10}).map((C,N)=>jsxs("div",{className:"flex items-center gap-4",children:[g&&jsx(Skeleton,{"data-testid":"skeleton",className:"h-4 w-8"}),jsx(Skeleton,{"data-testid":"skeleton",className:"h-4 flex-1"})]},N))}):jsx("div",{className:"font-mono",children:F.map((C,N)=>{let k=N+1,B=w.includes(k),r=X?.added?.includes(k),c=X?.removed?.includes(k);return jsx(Ve,{line:C,lineNumber:k,showLineNumbers:g,isHighlighted:B,isDiffAdded:r,isDiffRemoved:c},N)})})})]})});ze.displayName="CodeBlock";var Ae=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"}}),Oe=U.forwardRef(({className:d,layout:u,size:l,files:a,defaultView:t="side-by-side",showLineNumbers:s=true,showCopyButton:g=true,allowMerge:w=false,conflictMarkers:L=[],onMergeConflict:E,onFileSelect:X,height:J="600px",syncScroll:Y=true,...O},j)=>{let[H,M]=U.useState(t),[P,$]=U.useState(()=>a.length>=2?[a[0].id,a[1].id]:a.length>0?[a[0].id]:[]),[_,R]=U.useState({resolved:{},conflicts:L}),[F,C]=U.useState(false),N=U.useRef({}),k=U.useCallback((o,p)=>{Y&&Object.entries(N.current).forEach(([n,i])=>{n!==o&&i&&(i.scrollTop=p);});},[Y]),B=U.useCallback(async()=>{let o=P.map(p=>{let n=a.find(i=>i.id===p);return n?`=== ${n.filename} ===
4
+ ${n.content}`:""}).join(`
22
5
 
23
- var __defProp = Object.defineProperty;
24
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
25
- var codeBlockVariants = cva(
26
- "relative overflow-hidden rounded-lg border bg-muted/50",
27
- {
28
- variants: {
29
- theme: {
30
- dark: "bg-slate-950 border-slate-800",
31
- light: "bg-slate-50 border-slate-200",
32
- github: "bg-white border-slate-200",
33
- "github-dark": "bg-slate-900 border-slate-700",
34
- "vs-dark": "bg-slate-950 border-slate-800",
35
- monokai: "bg-slate-900 border-slate-700",
36
- dracula: "bg-slate-900 border-purple-800/30",
37
- nord: "bg-slate-800 border-slate-600"
38
- },
39
- size: {
40
- sm: "text-xs",
41
- default: "text-sm",
42
- lg: "text-base"
43
- }
44
- },
45
- defaultVariants: {
46
- theme: "dark",
47
- size: "default"
48
- }
49
- }
50
- );
51
- var CodeLine = React6.memo(
52
- ({
53
- line,
54
- lineNumber,
55
- showLineNumbers,
56
- isHighlighted = false,
57
- isDiffAdded = false,
58
- isDiffRemoved = false
59
- }) => {
60
- return /* @__PURE__ */ jsxs(
61
- "div",
62
- {
63
- className: cn(
64
- "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
65
- isHighlighted && "bg-blue-500/10 border-l-2 border-l-blue-500",
66
- isDiffAdded && "bg-green-500/10 border-l-2 border-l-green-500",
67
- isDiffRemoved && "bg-red-500/10 border-l-2 border-l-red-500"
68
- ),
69
- children: [
70
- showLineNumbers && /* @__PURE__ */ jsx("span", { className: "mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground", children: lineNumber }),
71
- (isDiffAdded || isDiffRemoved) && /* @__PURE__ */ jsx("span", { className: "mr-2 select-none text-xs", children: isDiffAdded ? "+" : isDiffRemoved ? "-" : " " }),
72
- /* @__PURE__ */ jsx(
73
- "div",
74
- {
75
- className: "flex-1 overflow-x-auto",
76
- dangerouslySetInnerHTML: { __html: line }
77
- }
78
- )
79
- ]
80
- }
81
- );
82
- }
83
- );
84
- CodeLine.displayName = "CodeLine";
85
- var CodeBlock = React6.forwardRef(
86
- ({
87
- className,
88
- theme,
89
- size,
90
- code,
91
- language = "text",
92
- filename,
93
- showLineNumbers = true,
94
- highlightLines = [],
95
- showCopyButton = true,
96
- maxHeight = "400px",
97
- diff,
98
- ...props
99
- }, ref) => {
100
- const [highlightedCode, setHighlightedCode] = React6.useState("");
101
- const [copied, setCopied] = React6.useState(false);
102
- const [isLoading, setIsLoading] = React6.useState(true);
103
- const themeMap = {
104
- dark: "github-dark",
105
- light: "github-light",
106
- github: "github-light",
107
- "github-dark": "github-dark",
108
- "vs-dark": "dark-plus",
109
- monokai: "monokai",
110
- dracula: "dracula",
111
- nord: "nord"
112
- };
113
- React6.useEffect(() => {
114
- const highlightCode = /* @__PURE__ */ __name(async () => {
115
- setIsLoading(true);
116
- try {
117
- const highlighted = await codeToHtml(code, {
118
- lang: language,
119
- theme: themeMap[theme || "dark"],
120
- transformers: [
121
- {
122
- code(node) {
123
- const codeElement2 = node.children.find(
124
- (child) => child.type === "element" && child.tagName === "code"
125
- );
126
- if (codeElement2 && "children" in codeElement2 && codeElement2.children) {
127
- node.children = codeElement2.children;
128
- }
129
- }
130
- }
131
- ]
132
- });
133
- const tempDiv = document.createElement("div");
134
- tempDiv.innerHTML = highlighted;
135
- const codeElement = tempDiv.querySelector("code");
136
- setHighlightedCode(codeElement?.innerHTML || highlighted);
137
- } catch (error) {
138
- console.error("Failed to highlight code:", error);
139
- setHighlightedCode(code);
140
- } finally {
141
- setIsLoading(false);
142
- }
143
- }, "highlightCode");
144
- highlightCode();
145
- }, [code, language, theme]);
146
- const copyToClipboard = React6.useCallback(async () => {
147
- try {
148
- await navigator.clipboard.writeText(code);
149
- setCopied(true);
150
- setTimeout(() => setCopied(false), 2e3);
151
- } catch (error) {
152
- console.error("Failed to copy code:", error);
153
- }
154
- }, [code]);
155
- const lines = highlightedCode.split("\n");
156
- return /* @__PURE__ */ jsxs(
157
- "div",
158
- {
159
- ref,
160
- "data-testid": "code-block",
161
- className: cn(codeBlockVariants({ theme, size, className })),
162
- ...props,
163
- children: [
164
- (filename || language || showCopyButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
165
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
166
- filename && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
167
- /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-muted-foreground" }),
168
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: filename })
169
- ] }),
170
- language && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: language })
171
- ] }),
172
- showCopyButton && /* @__PURE__ */ jsxs(
173
- Button,
174
- {
175
- variant: "ghost",
176
- size: "sm",
177
- onClick: copyToClipboard,
178
- className: "h-8 w-8 p-0",
179
- children: [
180
- copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
181
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: copied ? "Copied" : "Copy code" })
182
- ]
183
- }
184
- )
185
- ] }),
186
- /* @__PURE__ */ jsx("div", { className: "overflow-auto", style: { maxHeight }, children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
187
- showLineNumbers && /* @__PURE__ */ jsx(Skeleton, { "data-testid": "skeleton", className: "h-4 w-8" }),
188
- /* @__PURE__ */ jsx(Skeleton, { "data-testid": "skeleton", className: "h-4 flex-1" })
189
- ] }, i)) }) : /* @__PURE__ */ jsx("div", { className: "font-mono", children: lines.map((line, index) => {
190
- const lineNumber = index + 1;
191
- const isHighlighted = highlightLines.includes(lineNumber);
192
- const isDiffAdded = diff?.added?.includes(lineNumber);
193
- const isDiffRemoved = diff?.removed?.includes(lineNumber);
194
- return /* @__PURE__ */ jsx(
195
- CodeLine,
196
- {
197
- line,
198
- lineNumber,
199
- showLineNumbers,
200
- isHighlighted,
201
- isDiffAdded,
202
- isDiffRemoved
203
- },
204
- index
205
- );
206
- }) }) })
207
- ]
208
- }
209
- );
210
- }
211
- );
212
- CodeBlock.displayName = "CodeBlock";
213
- var codeCompareVariants = cva(
214
- "relative flex flex-col overflow-hidden rounded-lg border bg-background",
215
- {
216
- variants: {
217
- layout: {
218
- horizontal: "flex-col",
219
- vertical: "flex-row"
220
- },
221
- size: {
222
- sm: "text-xs",
223
- default: "text-sm",
224
- lg: "text-base"
225
- }
226
- },
227
- defaultVariants: {
228
- layout: "horizontal",
229
- size: "default"
230
- }
231
- }
232
- );
233
- var CodeCompare = React6.forwardRef(
234
- ({
235
- className,
236
- layout,
237
- size,
238
- files,
239
- defaultView = "side-by-side",
240
- showLineNumbers = true,
241
- showCopyButton = true,
242
- allowMerge = false,
243
- conflictMarkers = [],
244
- onMergeConflict,
245
- onFileSelect,
246
- height = "600px",
247
- syncScroll = true,
248
- ...props
249
- }, ref) => {
250
- const [view, setView] = React6.useState(defaultView);
251
- const [selectedFiles, setSelectedFiles] = React6.useState(() => {
252
- if (files.length >= 2) {
253
- return [files[0].id, files[1].id];
254
- }
255
- return files.length > 0 ? [files[0].id] : [];
256
- });
257
- const [mergeState, setMergeState] = React6.useState({
258
- resolved: {},
259
- conflicts: conflictMarkers
260
- });
261
- const [copied, setCopied] = React6.useState(false);
262
- const scrollRefs = React6.useRef({});
263
- const handleScroll = React6.useCallback(
264
- (sourceId, scrollTop) => {
265
- if (!syncScroll) return;
266
- Object.entries(scrollRefs.current).forEach(([id, ref2]) => {
267
- if (id !== sourceId && ref2) {
268
- ref2.scrollTop = scrollTop;
269
- }
270
- });
271
- },
272
- [syncScroll]
273
- );
274
- const copyComparison = React6.useCallback(async () => {
275
- const comparison = selectedFiles.map((fileId) => {
276
- const file = files.find((f) => f.id === fileId);
277
- return file ? `=== ${file.filename} ===
278
- ${file.content}` : "";
279
- }).join("\n\n");
280
- try {
281
- await navigator.clipboard.writeText(comparison);
282
- setCopied(true);
283
- setTimeout(() => setCopied(false), 2e3);
284
- } catch (error) {
285
- console.error("Failed to copy comparison:", error);
286
- }
287
- }, [files, selectedFiles]);
288
- const resolveConflict = React6.useCallback(
289
- (conflictIndex, resolution) => {
290
- setMergeState((prev) => ({
291
- ...prev,
292
- resolved: {
293
- ...prev.resolved,
294
- [conflictIndex]: resolution
295
- }
296
- }));
297
- onMergeConflict?.(resolution);
298
- },
299
- [onMergeConflict]
300
- );
301
- const getFileStats = React6.useCallback(
302
- (file1, file2) => {
303
- const lines1 = file1.content.split("\n");
304
- const lines2 = file2.content.split("\n");
305
- let added = 0;
306
- let removed = 0;
307
- let modified = 0;
308
- const maxLines = Math.max(lines1.length, lines2.length);
309
- for (let i = 0; i < maxLines; i++) {
310
- const line1 = lines1[i];
311
- const line2 = lines2[i];
312
- if (line1 === void 0) {
313
- added++;
314
- } else if (line2 === void 0) {
315
- removed++;
316
- } else if (line1 !== line2) {
317
- modified++;
318
- }
319
- }
320
- return { added, removed, modified };
321
- },
322
- []
323
- );
324
- 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: [
325
- /* @__PURE__ */ jsxs(
326
- Button,
327
- {
328
- variant: selectedFiles.includes(file.id) ? "default" : "outline",
329
- size: "sm",
330
- onClick: () => {
331
- if (view === "three-way") {
332
- setSelectedFiles((prev) => {
333
- if (prev.includes(file.id)) {
334
- return prev.filter((id) => id !== file.id);
335
- }
336
- return prev.length < 3 ? [...prev, file.id] : [prev[1], prev[2], file.id];
337
- });
338
- } else {
339
- setSelectedFiles((prev) => {
340
- if (prev.includes(file.id)) {
341
- return prev.filter((id) => id !== file.id);
342
- }
343
- return prev.length < 2 ? [...prev, file.id] : [prev[1], file.id];
344
- });
345
- }
346
- onFileSelect?.(file.id);
347
- },
348
- className: "gap-2",
349
- children: [
350
- file.label || file.filename,
351
- file.version && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: file.version })
352
- ]
353
- }
354
- ),
355
- index < files.length - 1 && view !== "three-way" && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "vs" })
356
- ] }, file.id)) }), "renderFileSelector");
357
- const renderSideBySide = /* @__PURE__ */ __name(() => {
358
- const [file1, file2] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
359
- if (!file1 || !file2) {
360
- return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: "Select two files to compare" });
361
- }
362
- const stats = getFileStats(file1, file2);
363
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
364
- /* @__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: [
365
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Comparison" }),
366
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
367
- /* @__PURE__ */ jsxs("span", { className: "text-green-600", children: [
368
- "+",
369
- stats.added
370
- ] }),
371
- /* @__PURE__ */ jsxs("span", { className: "text-red-600", children: [
372
- "-",
373
- stats.removed
374
- ] }),
375
- /* @__PURE__ */ jsxs("span", { className: "text-yellow-600", children: [
376
- "~",
377
- stats.modified
378
- ] })
379
- ] })
380
- ] }) }),
381
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
382
- CodeDiff,
383
- {
384
- oldCode: file1.content,
385
- newCode: file2.content,
386
- language: file1.language,
387
- oldFilename: file1.filename,
388
- newFilename: file2.filename,
389
- showLineNumbers,
390
- showCopyButton: false,
391
- maxHeight: "100%",
392
- defaultView: "split",
393
- className: "border-0 rounded-none h-full"
394
- }
395
- ) })
396
- ] });
397
- }, "renderSideBySide");
398
- const renderUnified = /* @__PURE__ */ __name(() => {
399
- const [file1, file2] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
400
- if (!file1 || !file2) {
401
- return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: "Select two files to compare" });
402
- }
403
- return /* @__PURE__ */ jsx(
404
- CodeDiff,
405
- {
406
- oldCode: file1.content,
407
- newCode: file2.content,
408
- language: file1.language,
409
- filename: `${file1.filename} \u2192 ${file2.filename}`,
410
- showLineNumbers,
411
- showCopyButton: false,
412
- maxHeight: "100%",
413
- defaultView: "unified",
414
- className: "border-0 rounded-none"
415
- }
416
- );
417
- }, "renderUnified");
418
- const renderThreeWay = /* @__PURE__ */ __name(() => {
419
- const [base, current, incoming] = selectedFiles.map((id) => files.find((f) => f.id === id)).filter(Boolean);
420
- if (!base || !current || !incoming) {
421
- 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)" });
422
- }
423
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-0 h-full", children: [
424
- /* @__PURE__ */ jsxs("div", { className: "border-r", children: [
425
- /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-muted/30", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
426
- "Base (",
427
- base.filename,
428
- ")"
429
- ] }) }),
430
- /* @__PURE__ */ jsx(
431
- ScrollArea,
432
- {
433
- className: "h-full",
434
- ref: (ref2) => {
435
- scrollRefs.current["base"] = ref2;
436
- },
437
- onScrollCapture: (e) => {
438
- const target = e.target;
439
- handleScroll("base", target.scrollTop);
440
- },
441
- children: /* @__PURE__ */ jsx(
442
- CodeSnippet,
443
- {
444
- code: base.content,
445
- language: base.language,
446
- showLineNumbers,
447
- showCopyButton: false,
448
- showHeader: false,
449
- className: "border-0 rounded-none"
450
- }
451
- )
452
- }
453
- )
454
- ] }),
455
- /* @__PURE__ */ jsxs("div", { className: "border-r", children: [
456
- /* @__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: [
457
- "Current (",
458
- current.filename,
459
- ")"
460
- ] }) }),
461
- /* @__PURE__ */ jsx(
462
- ScrollArea,
463
- {
464
- className: "h-full",
465
- ref: (ref2) => {
466
- scrollRefs.current["current"] = ref2;
467
- },
468
- onScrollCapture: (e) => {
469
- const target = e.target;
470
- handleScroll("current", target.scrollTop);
471
- },
472
- children: /* @__PURE__ */ jsx(
473
- CodeSnippet,
474
- {
475
- code: current.content,
476
- language: current.language,
477
- showLineNumbers,
478
- showCopyButton: false,
479
- showHeader: false,
480
- className: "border-0 rounded-none"
481
- }
482
- )
483
- }
484
- )
485
- ] }),
486
- /* @__PURE__ */ jsxs("div", { children: [
487
- /* @__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: [
488
- "Incoming (",
489
- incoming.filename,
490
- ")"
491
- ] }) }),
492
- /* @__PURE__ */ jsx(
493
- ScrollArea,
494
- {
495
- className: "h-full",
496
- ref: (ref2) => {
497
- scrollRefs.current["incoming"] = ref2;
498
- },
499
- onScrollCapture: (e) => {
500
- const target = e.target;
501
- handleScroll("incoming", target.scrollTop);
502
- },
503
- children: /* @__PURE__ */ jsx(
504
- CodeSnippet,
505
- {
506
- code: incoming.content,
507
- language: incoming.language,
508
- showLineNumbers,
509
- showCopyButton: false,
510
- showHeader: false,
511
- className: "border-0 rounded-none"
512
- }
513
- )
514
- }
515
- )
516
- ] })
517
- ] });
518
- }, "renderThreeWay");
519
- const renderMergeConflicts = /* @__PURE__ */ __name(() => {
520
- if (!allowMerge || mergeState.conflicts.length === 0) return null;
521
- return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/30", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-2", children: [
522
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
523
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Merge Conflicts" }),
524
- /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: mergeState.conflicts.length })
525
- ] }),
526
- /* @__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: [
527
- /* @__PURE__ */ jsxs("span", { children: [
528
- "Lines ",
529
- conflict.startLine,
530
- "-",
531
- conflict.endLine
532
- ] }),
533
- /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
534
- /* @__PURE__ */ jsx(
535
- Button,
536
- {
537
- variant: "outline",
538
- size: "sm",
539
- onClick: () => resolveConflict(index, "current"),
540
- className: "h-6 text-xs",
541
- children: "Keep Current"
542
- }
543
- ),
544
- /* @__PURE__ */ jsx(
545
- Button,
546
- {
547
- variant: "outline",
548
- size: "sm",
549
- onClick: () => resolveConflict(index, "incoming"),
550
- className: "h-6 text-xs",
551
- children: "Accept Incoming"
552
- }
553
- )
554
- ] })
555
- ] }, index)) })
556
- ] }) });
557
- }, "renderMergeConflicts");
558
- return /* @__PURE__ */ jsxs(
559
- "div",
560
- {
561
- ref,
562
- className: cn(codeCompareVariants({ layout, size }), className),
563
- style: { height },
564
- ...props,
565
- children: [
566
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
567
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: renderFileSelector() }),
568
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
569
- /* @__PURE__ */ jsx(Tabs, { value: view, onValueChange: (value) => setView(value), children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [
570
- /* @__PURE__ */ jsx(TabsTrigger, { value: "side-by-side", className: "text-xs", children: "Side by Side" }),
571
- /* @__PURE__ */ jsx(TabsTrigger, { value: "unified", className: "text-xs", children: "Unified" }),
572
- /* @__PURE__ */ jsx(TabsTrigger, { value: "three-way", className: "text-xs", children: "Three-way" })
573
- ] }) }),
574
- showCopyButton && /* @__PURE__ */ jsx(
575
- Button,
576
- {
577
- variant: "ghost",
578
- size: "sm",
579
- onClick: copyComparison,
580
- className: "h-8 w-8 p-0",
581
- 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" })
582
- }
583
- ),
584
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
585
- /* @__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" }) }) }),
586
- /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
587
- /* @__PURE__ */ jsxs(
588
- DropdownMenuItem,
589
- {
590
- onClick: () => setSelectedFiles([]),
591
- className: "gap-2",
592
- children: [
593
- /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
594
- "Reset Selection"
595
- ]
596
- }
597
- ),
598
- /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", children: [
599
- /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
600
- "Settings"
601
- ] })
602
- ] })
603
- ] })
604
- ] })
605
- ] }),
606
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", children: [
607
- view === "side-by-side" && renderSideBySide(),
608
- view === "unified" && renderUnified(),
609
- view === "three-way" && renderThreeWay()
610
- ] }),
611
- renderMergeConflicts()
612
- ]
613
- }
614
- );
615
- }
616
- );
617
- CodeCompare.displayName = "CodeCompare";
618
- var codeDiffVariants = cva(
619
- "relative overflow-hidden rounded-lg border bg-muted/50",
620
- {
621
- variants: {
622
- theme: {
623
- dark: "bg-slate-950 border-slate-800",
624
- light: "bg-slate-50 border-slate-200",
625
- github: "bg-white border-slate-200",
626
- "github-dark": "bg-slate-900 border-slate-700"
627
- },
628
- size: {
629
- sm: "text-xs",
630
- default: "text-sm",
631
- lg: "text-base"
632
- }
633
- },
634
- defaultVariants: {
635
- theme: "dark",
636
- size: "default"
637
- }
638
- }
639
- );
640
- var DiffLine = React6.memo(
641
- ({
642
- change,
643
- showLineNumbers,
644
- isUnified = false,
645
- highlightedContent
646
- }) => {
647
- const getLineClasses = /* @__PURE__ */ __name(() => {
648
- const base = "group relative flex min-h-[1.5rem] items-center py-0.5";
649
- if (isUnified) {
650
- switch (change.type) {
651
- case "add":
652
- return cn(base, "bg-green-500/10 border-l-2 border-l-green-500");
653
- case "remove":
654
- return cn(base, "bg-red-500/10 border-l-2 border-l-red-500");
655
- default:
656
- return cn(base, "hover:bg-muted/50");
657
- }
658
- }
659
- return cn(base, "hover:bg-muted/50");
660
- }, "getLineClasses");
661
- const getLinePrefix = /* @__PURE__ */ __name(() => {
662
- if (!isUnified) return null;
663
- switch (change.type) {
664
- case "add":
665
- return /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 text-green-500 mr-2 flex-shrink-0" });
666
- case "remove":
667
- return /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3 text-red-500 mr-2 flex-shrink-0" });
668
- default:
669
- return /* @__PURE__ */ jsx("span", { className: "w-3 mr-2 flex-shrink-0" });
670
- }
671
- }, "getLinePrefix");
672
- return /* @__PURE__ */ jsx("div", { className: getLineClasses(), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center px-4 w-full", children: [
673
- showLineNumbers && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mr-4", children: !isUnified ? /* @__PURE__ */ jsxs(Fragment, { children: [
674
- /* @__PURE__ */ jsx("span", { className: "inline-block w-8 select-none text-right text-xs text-muted-foreground", children: change.oldLineNumber || "" }),
675
- /* @__PURE__ */ jsx("span", { className: "inline-block w-8 select-none text-right text-xs text-muted-foreground", children: change.newLineNumber || "" })
676
- ] }) : /* @__PURE__ */ jsx("span", { className: "inline-block w-8 select-none text-right text-xs text-muted-foreground", children: change.lineNumber }) }),
677
- getLinePrefix(),
678
- /* @__PURE__ */ jsx(
679
- "div",
680
- {
681
- className: "flex-1 overflow-x-auto font-mono",
682
- dangerouslySetInnerHTML: {
683
- __html: highlightedContent || change.content
684
- }
685
- }
686
- )
687
- ] }) });
688
- }
689
- );
690
- DiffLine.displayName = "DiffLine";
691
- function generateDiff(oldCode, newCode) {
692
- const oldLines = oldCode.split("\n");
693
- const newLines = newCode.split("\n");
694
- const changes = [];
695
- let oldIndex = 0;
696
- let newIndex = 0;
697
- let lineNumber = 1;
698
- while (oldIndex < oldLines.length || newIndex < newLines.length) {
699
- const oldLine = oldLines[oldIndex];
700
- const newLine = newLines[newIndex];
701
- if (oldIndex >= oldLines.length) {
702
- changes.push({
703
- type: "add",
704
- lineNumber: lineNumber++,
705
- content: newLine,
706
- newLineNumber: newIndex + 1
707
- });
708
- newIndex++;
709
- } else if (newIndex >= newLines.length) {
710
- changes.push({
711
- type: "remove",
712
- lineNumber: lineNumber++,
713
- content: oldLine,
714
- oldLineNumber: oldIndex + 1
715
- });
716
- oldIndex++;
717
- } else if (oldLine === newLine) {
718
- changes.push({
719
- type: "unchanged",
720
- lineNumber: lineNumber++,
721
- content: oldLine,
722
- oldLineNumber: oldIndex + 1,
723
- newLineNumber: newIndex + 1
724
- });
725
- oldIndex++;
726
- newIndex++;
727
- } else {
728
- changes.push({
729
- type: "remove",
730
- lineNumber: lineNumber++,
731
- content: oldLine,
732
- oldLineNumber: oldIndex + 1
733
- });
734
- changes.push({
735
- type: "add",
736
- lineNumber: lineNumber++,
737
- content: newLine,
738
- newLineNumber: newIndex + 1
739
- });
740
- oldIndex++;
741
- newIndex++;
742
- }
743
- }
744
- return changes;
745
- }
746
- __name(generateDiff, "generateDiff");
747
- var CodeDiff2 = React6.forwardRef(
748
- ({
749
- className,
750
- theme,
751
- size,
752
- oldCode,
753
- newCode,
754
- language = "text",
755
- filename,
756
- oldFilename,
757
- newFilename,
758
- showLineNumbers = true,
759
- showCopyButton = true,
760
- maxHeight = "500px",
761
- defaultView = "unified",
762
- collapseUnchanged = false,
763
- contextLines = 3,
764
- ...props
765
- }, ref) => {
766
- const [view, setView] = React6.useState(defaultView);
767
- const [copied, setCopied] = React6.useState(false);
768
- const [isLoading, setIsLoading] = React6.useState(true);
769
- const [highlightedOldCode, setHighlightedOldCode] = React6.useState("");
770
- const [highlightedNewCode, setHighlightedNewCode] = React6.useState("");
771
- const [changes, setChanges] = React6.useState([]);
772
- const themeMap = {
773
- dark: "github-dark",
774
- light: "github-light",
775
- github: "github-light",
776
- "github-dark": "github-dark"
777
- };
778
- React6.useEffect(() => {
779
- const highlightCode = /* @__PURE__ */ __name(async () => {
780
- setIsLoading(true);
781
- try {
782
- const [oldHighlighted, newHighlighted] = await Promise.all([
783
- codeToHtml(oldCode, {
784
- lang: language,
785
- theme: themeMap[theme || "dark"]
786
- }),
787
- codeToHtml(newCode, {
788
- lang: language,
789
- theme: themeMap[theme || "dark"]
790
- })
791
- ]);
792
- const extractContent = /* @__PURE__ */ __name((html) => {
793
- const tempDiv = document.createElement("div");
794
- tempDiv.innerHTML = html;
795
- const codeElement = tempDiv.querySelector("code");
796
- return codeElement?.innerHTML || html;
797
- }, "extractContent");
798
- setHighlightedOldCode(extractContent(oldHighlighted));
799
- setHighlightedNewCode(extractContent(newHighlighted));
800
- const diffChanges = generateDiff(oldCode, newCode);
801
- setChanges(diffChanges);
802
- } catch (error) {
803
- console.error("Failed to highlight code:", error);
804
- setHighlightedOldCode(oldCode);
805
- setHighlightedNewCode(newCode);
806
- setChanges(generateDiff(oldCode, newCode));
807
- } finally {
808
- setIsLoading(false);
809
- }
810
- }, "highlightCode");
811
- highlightCode();
812
- }, [oldCode, newCode, language, theme]);
813
- const copyToClipboard = React6.useCallback(async () => {
814
- try {
815
- const diffText = view === "unified" ? changes.map((change) => {
816
- const prefix = change.type === "add" ? "+" : change.type === "remove" ? "-" : " ";
817
- return `${prefix}${change.content}`;
818
- }).join("\n") : `--- ${oldFilename || "old"}
819
- +++ ${newFilename || "new"}
820
- ${oldCode}
6
+ `);try{await navigator.clipboard.writeText(o),C(!0),setTimeout(()=>C(!1),2e3);}catch(p){console.error("Failed to copy comparison:",p);}},[a,P]),r=U.useCallback((o,p)=>{R(n=>({...n,resolved:{...n.resolved,[o]:p}})),E?.(p);},[E]),c=U.useCallback((o,p)=>{let n=o.content.split(`
7
+ `),i=p.content.split(`
8
+ `),e=0,f=0,z=0,m=Math.max(n.length,i.length);for(let T=0;T<m;T++){let ce=n[T],ne=i[T];ce===void 0?e++:ne===void 0?f++:ce!==ne&&z++;}return {added:e,removed:f,modified:z}},[]),b=x(()=>jsx("div",{className:"flex items-center gap-2 flex-wrap",children:a.map((o,p)=>jsxs("div",{className:"flex items-center gap-2",children:[jsxs(Button,{variant:P.includes(o.id)?"default":"outline",size:"sm",onClick:()=>{$(H==="three-way"?n=>n.includes(o.id)?n.filter(i=>i!==o.id):n.length<3?[...n,o.id]:[n[1],n[2],o.id]:n=>n.includes(o.id)?n.filter(i=>i!==o.id):n.length<2?[...n,o.id]:[n[1],o.id]),X?.(o.id);},className:"gap-2",children:[o.label||o.filename,o.version&&jsx(Badge,{variant:"secondary",className:"text-xs",children:o.version})]}),p<a.length-1&&H!=="three-way"&&jsx("span",{className:"text-muted-foreground",children:"vs"})]},o.id))}),"renderFileSelector"),V=x(()=>{let[o,p]=P.map(i=>a.find(e=>e.id===i)).filter(Boolean);if(!o||!p)return jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground",children:"Select two files to compare"});let n=c(o,p);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:["+",n.added]}),jsxs("span",{className:"text-red-600",children:["-",n.removed]}),jsxs("span",{className:"text-yellow-600",children:["~",n.modified]})]})]})}),jsx("div",{className:"flex-1 min-h-0",children:jsx(CodeDiff,{oldCode:o.content,newCode:p.content,language:o.language,oldFilename:o.filename,newFilename:p.filename,showLineNumbers:s,showCopyButton:false,maxHeight:"100%",defaultView:"split",className:"border-0 rounded-none h-full"})})]})},"renderSideBySide"),G=x(()=>{let[o,p]=P.map(n=>a.find(i=>i.id===n)).filter(Boolean);return !o||!p?jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground",children:"Select two files to compare"}):jsx(CodeDiff,{oldCode:o.content,newCode:p.content,language:o.language,filename:`${o.filename} \u2192 ${p.filename}`,showLineNumbers:s,showCopyButton:false,maxHeight:"100%",defaultView:"unified",className:"border-0 rounded-none"})},"renderUnified"),Q=x(()=>{let[o,p,n]=P.map(i=>a.find(e=>e.id===i)).filter(Boolean);return !o||!p||!n?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 (",o.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:i=>{N.current.base=i;},onScrollCapture:i=>{let e=i.target;k("base",e.scrollTop);},children:jsx(CodeSnippet,{code:o.content,language:o.language,showLineNumbers:s,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 (",p.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:i=>{N.current.current=i;},onScrollCapture:i=>{let e=i.target;k("current",e.scrollTop);},children:jsx(CodeSnippet,{code:p.content,language:p.language,showLineNumbers:s,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 (",n.filename,")"]})}),jsx(ScrollArea,{className:"h-full",ref:i=>{N.current.incoming=i;},onScrollCapture:i=>{let e=i.target;k("incoming",e.scrollTop);},children:jsx(CodeSnippet,{code:n.content,language:n.language,showLineNumbers:s,showCopyButton:false,showHeader:false,className:"border-0 rounded-none"})})]})]})},"renderThreeWay"),D=x(()=>!w||_.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:_.conflicts.length})]}),jsx("div",{className:"mt-2 space-y-2",children:_.conflicts.map((o,p)=>jsxs("div",{className:"flex items-center gap-2 text-xs",children:[jsxs("span",{children:["Lines ",o.startLine,"-",o.endLine]}),jsxs("div",{className:"flex gap-1",children:[jsx(Button,{variant:"outline",size:"sm",onClick:()=>r(p,"current"),className:"h-6 text-xs",children:"Keep Current"}),jsx(Button,{variant:"outline",size:"sm",onClick:()=>r(p,"incoming"),className:"h-6 text-xs",children:"Accept Incoming"})]})]},p))})]})}),"renderMergeConflicts");return jsxs("div",{ref:j,className:cn(Ae({layout:u,size:l}),d),style:{height:J},...O,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:b()}),jsxs("div",{className:"flex items-center gap-2",children:[jsx(Tabs,{value:H,onValueChange:o=>M(o),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"})]})}),g&&jsx(Button,{variant:"ghost",size:"sm",onClick:B,className:"h-8 w-8 p-0",children:F?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:()=>$([]),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:[H==="side-by-side"&&V(),H==="unified"&&G(),H==="three-way"&&Q()]}),D()]})});Oe.displayName="CodeCompare";var Je=cva("relative overflow-hidden rounded-lg border bg-muted/50",{variants:{theme:{dark:"bg-slate-950 border-slate-800",light:"bg-slate-50 border-slate-200",github:"bg-white border-slate-200","github-dark":"bg-slate-900 border-slate-700"},size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{theme:"dark",size:"default"}}),ye=U.memo(({change:d,showLineNumbers:u,isUnified:l=false,highlightedContent:a})=>{let t=x(()=>{let g="group relative flex min-h-[1.5rem] items-center py-0.5";if(l)switch(d.type){case "add":return cn(g,"bg-green-500/10 border-l-2 border-l-green-500");case "remove":return cn(g,"bg-red-500/10 border-l-2 border-l-red-500");default:return cn(g,"hover:bg-muted/50")}return cn(g,"hover:bg-muted/50")},"getLineClasses"),s=x(()=>{if(!l)return null;switch(d.type){case "add":return jsx(Plus,{className:"h-3 w-3 text-green-500 mr-2 flex-shrink-0"});case "remove":return jsx(Minus,{className:"h-3 w-3 text-red-500 mr-2 flex-shrink-0"});default:return jsx("span",{className:"w-3 mr-2 flex-shrink-0"})}},"getLinePrefix");return jsx("div",{className:t(),children:jsxs("div",{className:"flex items-center px-4 w-full",children:[u&&jsx("div",{className:"flex items-center gap-2 mr-4",children:l?jsx("span",{className:"inline-block w-8 select-none text-right text-xs text-muted-foreground",children:d.lineNumber}):jsxs(Fragment,{children:[jsx("span",{className:"inline-block w-8 select-none text-right text-xs text-muted-foreground",children:d.oldLineNumber||""}),jsx("span",{className:"inline-block w-8 select-none text-right text-xs text-muted-foreground",children:d.newLineNumber||""})]})}),s(),jsx("div",{className:"flex-1 overflow-x-auto font-mono",dangerouslySetInnerHTML:{__html:a||d.content}})]})})});ye.displayName="DiffLine";function Ue(d,u){let l=d.split(`
9
+ `),a=u.split(`
10
+ `),t=[],s=0,g=0,w=1;for(;s<l.length||g<a.length;){let L=l[s],E=a[g];s>=l.length?(t.push({type:"add",lineNumber:w++,content:E,newLineNumber:g+1}),g++):g>=a.length?(t.push({type:"remove",lineNumber:w++,content:L,oldLineNumber:s+1}),s++):L===E?(t.push({type:"unchanged",lineNumber:w++,content:L,oldLineNumber:s+1,newLineNumber:g+1}),s++,g++):(t.push({type:"remove",lineNumber:w++,content:L,oldLineNumber:s+1}),t.push({type:"add",lineNumber:w++,content:E,newLineNumber:g+1}),s++,g++);}return t}x(Ue,"generateDiff");var Xe=U.forwardRef(({className:d,theme:u,size:l,oldCode:a,newCode:t,language:s="text",filename:g,oldFilename:w,newFilename:L,showLineNumbers:E=true,showCopyButton:X=true,maxHeight:J="500px",defaultView:Y="unified",collapseUnchanged:O=false,contextLines:j=3,...H},M)=>{let[P,$]=U.useState(Y),[_,R]=U.useState(false),[F,C]=U.useState(true),[N,k]=U.useState(""),[B,r]=U.useState(""),[c,b]=U.useState([]),V={dark:"github-dark",light:"github-light",github:"github-light","github-dark":"github-dark"};U.useEffect(()=>{x(async()=>{C(true);try{let[i,e]=await Promise.all([codeToHtml(a,{lang:s,theme:V[u||"dark"]}),codeToHtml(t,{lang:s,theme:V[u||"dark"]})]),f=x(m=>{let T=document.createElement("div");return T.innerHTML=m,T.querySelector("code")?.innerHTML||m},"extractContent");k(f(i)),r(f(e));let z=Ue(a,t);b(z);}catch(i){console.error("Failed to highlight code:",i),k(a),r(t),b(Ue(a,t));}finally{C(false);}},"highlightCode")();},[a,t,s,u]);let G=U.useCallback(async()=>{try{let n=P==="unified"?c.map(i=>`${i.type==="add"?"+":i.type==="remove"?"-":" "}${i.content}`).join(`
11
+ `):`--- ${w||"old"}
12
+ +++ ${L||"new"}
13
+ ${a}
821
14
 
822
- ${newCode}`;
823
- await navigator.clipboard.writeText(diffText);
824
- setCopied(true);
825
- setTimeout(() => setCopied(false), 2e3);
826
- } catch (error) {
827
- console.error("Failed to copy diff:", error);
828
- }
829
- }, [changes, view, oldCode, newCode, oldFilename, newFilename]);
830
- const filteredChanges = React6.useMemo(() => {
831
- if (!collapseUnchanged) return changes;
832
- const result = [];
833
- let i = 0;
834
- while (i < changes.length) {
835
- const change = changes[i];
836
- if (change.type !== "unchanged") {
837
- result.push(change);
838
- i++;
839
- continue;
840
- }
841
- const unchangedStart = i;
842
- while (i < changes.length && changes[i].type === "unchanged") {
843
- i++;
844
- }
845
- const unchangedCount = i - unchangedStart;
846
- if (unchangedCount <= contextLines * 2) {
847
- for (let j = unchangedStart; j < i; j++) {
848
- result.push(changes[j]);
849
- }
850
- } else {
851
- for (let j = unchangedStart; j < unchangedStart + contextLines; j++) {
852
- result.push(changes[j]);
853
- }
854
- result.push({
855
- type: "unchanged",
856
- lineNumber: -1,
857
- content: `... ${unchangedCount - contextLines * 2} unchanged lines ...`
858
- });
859
- for (let j = i - contextLines; j < i; j++) {
860
- result.push(changes[j]);
861
- }
862
- }
863
- }
864
- return result;
865
- }, [changes, collapseUnchanged, contextLines]);
866
- const stats = React6.useMemo(() => {
867
- const additions = changes.filter((c) => c.type === "add").length;
868
- const deletions = changes.filter((c) => c.type === "remove").length;
869
- return { additions, deletions };
870
- }, [changes]);
871
- const renderUnifiedView = /* @__PURE__ */ __name(() => {
872
- const oldLines = highlightedOldCode.split("\n");
873
- const newLines = highlightedNewCode.split("\n");
874
- return /* @__PURE__ */ jsx("div", { className: "font-mono", children: filteredChanges.map((change, index) => {
875
- if (change.lineNumber === -1) {
876
- return /* @__PURE__ */ jsx(
877
- "div",
878
- {
879
- className: "flex items-center justify-center py-2 text-muted-foreground bg-muted/30",
880
- children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: change.content })
881
- },
882
- index
883
- );
884
- }
885
- let highlightedContent = change.content;
886
- if (change.type === "add" && change.newLineNumber) {
887
- highlightedContent = newLines[change.newLineNumber - 1] || change.content;
888
- } else if (change.type === "remove" && change.oldLineNumber) {
889
- highlightedContent = oldLines[change.oldLineNumber - 1] || change.content;
890
- } else if (change.type === "unchanged" && change.oldLineNumber) {
891
- highlightedContent = oldLines[change.oldLineNumber - 1] || change.content;
892
- }
893
- return /* @__PURE__ */ jsx(
894
- DiffLine,
895
- {
896
- change,
897
- showLineNumbers,
898
- isUnified: true,
899
- highlightedContent
900
- },
901
- index
902
- );
903
- }) });
904
- }, "renderUnifiedView");
905
- const renderSplitView = /* @__PURE__ */ __name(() => {
906
- const oldLines = highlightedOldCode.split("\n");
907
- const newLines = highlightedNewCode.split("\n");
908
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-0", children: [
909
- /* @__PURE__ */ jsxs("div", { className: "border-r", children: [
910
- /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-red-500/10", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-red-600 dark:text-red-400", children: oldFilename || filename || "Old" }) }),
911
- /* @__PURE__ */ jsx("div", { className: "font-mono", children: oldLines.map((line, index) => /* @__PURE__ */ jsx(
912
- DiffLine,
913
- {
914
- change: {
915
- type: "remove",
916
- lineNumber: index + 1,
917
- content: line,
918
- oldLineNumber: index + 1
919
- },
920
- showLineNumbers,
921
- highlightedContent: line
922
- },
923
- `old-${index}`
924
- )) })
925
- ] }),
926
- /* @__PURE__ */ jsxs("div", { children: [
927
- /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 bg-green-500/10", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: newFilename || filename || "New" }) }),
928
- /* @__PURE__ */ jsx("div", { className: "font-mono", children: newLines.map((line, index) => /* @__PURE__ */ jsx(
929
- DiffLine,
930
- {
931
- change: {
932
- type: "add",
933
- lineNumber: index + 1,
934
- content: line,
935
- newLineNumber: index + 1
936
- },
937
- showLineNumbers,
938
- highlightedContent: line
939
- },
940
- `new-${index}`
941
- )) })
942
- ] })
943
- ] });
944
- }, "renderSplitView");
945
- return /* @__PURE__ */ jsxs(
946
- "div",
947
- {
948
- ref,
949
- className: cn(codeDiffVariants({ theme, size, className })),
950
- ...props,
951
- children: [
952
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
953
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
954
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
955
- /* @__PURE__ */ jsx(GitCompare, { className: "h-4 w-4 text-muted-foreground" }),
956
- filename && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: filename }),
957
- language && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: language })
958
- ] }),
959
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
960
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
961
- /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 text-green-500" }),
962
- stats.additions
963
- ] }),
964
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
965
- /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3 text-red-500" }),
966
- stats.deletions
967
- ] })
968
- ] })
969
- ] }),
970
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
971
- /* @__PURE__ */ jsxs(
972
- ToggleGroup,
973
- {
974
- type: "single",
975
- value: view,
976
- onValueChange: (value) => value && setView(value),
977
- size: "sm",
978
- children: [
979
- /* @__PURE__ */ jsx(ToggleGroupItem, { value: "unified", "aria-label": "Unified view", children: /* @__PURE__ */ jsx(Square, { className: "h-3 w-3" }) }),
980
- /* @__PURE__ */ jsx(ToggleGroupItem, { value: "split", "aria-label": "Split view", children: /* @__PURE__ */ jsx(SplitSquareHorizontal, { className: "h-3 w-3" }) })
981
- ]
982
- }
983
- ),
984
- showCopyButton && /* @__PURE__ */ jsxs(
985
- Button,
986
- {
987
- variant: "ghost",
988
- size: "sm",
989
- onClick: copyToClipboard,
990
- className: "h-8 w-8 p-0",
991
- children: [
992
- copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
993
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: copied ? "Copied" : "Copy diff" })
994
- ]
995
- }
996
- )
997
- ] })
998
- ] }),
999
- /* @__PURE__ */ jsx("div", { className: "overflow-auto", style: { maxHeight }, children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
1000
- showLineNumbers && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-8" }),
1001
- /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
1002
- ] }, i)) }) : view === "unified" ? renderUnifiedView() : renderSplitView() })
1003
- ]
1004
- }
1005
- );
1006
- }
1007
- );
1008
- CodeDiff2.displayName = "CodeDiff";
1009
- var defaultLanguages = [
1010
- "javascript",
1011
- "typescript",
1012
- "python",
1013
- "java",
1014
- "csharp",
1015
- "cpp",
1016
- "c",
1017
- "go",
1018
- "rust",
1019
- "ruby",
1020
- "php",
1021
- "swift",
1022
- "kotlin",
1023
- "dart",
1024
- "html",
1025
- "css",
1026
- "scss",
1027
- "json",
1028
- "xml",
1029
- "yaml",
1030
- "sql",
1031
- "markdown",
1032
- "shell",
1033
- "plaintext"
1034
- ];
1035
- var languageDisplayNames = {
1036
- javascript: "JavaScript",
1037
- typescript: "TypeScript",
1038
- python: "Python",
1039
- java: "Java",
1040
- csharp: "C#",
1041
- cpp: "C++",
1042
- c: "C",
1043
- go: "Go",
1044
- rust: "Rust",
1045
- ruby: "Ruby",
1046
- php: "PHP",
1047
- swift: "Swift",
1048
- kotlin: "Kotlin",
1049
- dart: "Dart",
1050
- html: "HTML",
1051
- css: "CSS",
1052
- scss: "SCSS",
1053
- json: "JSON",
1054
- xml: "XML",
1055
- yaml: "YAML",
1056
- sql: "SQL",
1057
- markdown: "Markdown",
1058
- shell: "Shell",
1059
- plaintext: "Plain Text"
1060
- };
1061
- var CodeEditor = React6.forwardRef(
1062
- ({
1063
- value,
1064
- defaultValue = "",
1065
- language = "javascript",
1066
- height = "400px",
1067
- theme: themeProp = "auto",
1068
- onChange,
1069
- onMount,
1070
- readOnly = false,
1071
- lineNumbers = true,
1072
- minimap = false,
1073
- wordWrap = "on",
1074
- fontSize = 14,
1075
- className,
1076
- showCopyButton = true,
1077
- showLanguageSelector = true,
1078
- availableLanguages = defaultLanguages
1079
- }, ref) => {
1080
- const { theme: systemTheme } = useTheme();
1081
- const [selectedLanguage, setSelectedLanguage] = React6.useState(language);
1082
- const [copied, setCopied] = React6.useState(false);
1083
- const [editorValue, setEditorValue] = React6.useState(value || defaultValue);
1084
- React6.useEffect(() => {
1085
- if (value !== void 0) {
1086
- setEditorValue(value);
1087
- }
1088
- }, [value]);
1089
- const handleCopy = React6.useCallback(async () => {
1090
- try {
1091
- await navigator.clipboard.writeText(editorValue);
1092
- setCopied(true);
1093
- setTimeout(() => setCopied(false), 2e3);
1094
- } catch (err) {
1095
- console.error("Failed to copy:", err);
1096
- }
1097
- }, [editorValue]);
1098
- const handleChange = React6.useCallback(
1099
- (newValue, ev) => {
1100
- setEditorValue(newValue || "");
1101
- if (onChange) {
1102
- onChange(newValue, ev);
1103
- }
1104
- },
1105
- [onChange]
1106
- );
1107
- const resolveTheme = React6.useMemo(() => {
1108
- if (themeProp === "auto") {
1109
- return systemTheme === "dark" ? "vs-dark" : "light";
1110
- }
1111
- return themeProp === "dark" ? "vs-dark" : "light";
1112
- }, [themeProp, systemTheme]);
1113
- return /* @__PURE__ */ jsxs(
1114
- "div",
1115
- {
1116
- ref,
1117
- className: cn(
1118
- "relative overflow-hidden rounded-md border bg-background",
1119
- className
1120
- ),
1121
- children: [
1122
- (showLanguageSelector || showCopyButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b bg-muted/50 px-3 py-2", children: [
1123
- showLanguageSelector && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
1124
- /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
1125
- Button,
1126
- {
1127
- variant: "ghost",
1128
- size: "sm",
1129
- className: "h-8 gap-1 px-2 text-xs font-mono",
1130
- children: [
1131
- languageDisplayNames[selectedLanguage] || selectedLanguage,
1132
- /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
1133
- ]
1134
- }
1135
- ) }),
1136
- /* @__PURE__ */ jsx(
1137
- DropdownMenuContent,
1138
- {
1139
- align: "start",
1140
- className: "max-h-80 overflow-auto",
1141
- children: availableLanguages.map((lang) => /* @__PURE__ */ jsx(
1142
- DropdownMenuItem,
1143
- {
1144
- onClick: () => setSelectedLanguage(lang),
1145
- className: "font-mono text-xs",
1146
- children: languageDisplayNames[lang] || lang
1147
- },
1148
- lang
1149
- ))
1150
- }
1151
- )
1152
- ] }),
1153
- showCopyButton && /* @__PURE__ */ jsx(
1154
- Button,
1155
- {
1156
- variant: "ghost",
1157
- size: "sm",
1158
- className: "h-8 gap-1.5 px-2 text-xs",
1159
- onClick: handleCopy,
1160
- disabled: !editorValue,
1161
- children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
1162
- /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }),
1163
- "Copied!"
1164
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1165
- /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }),
1166
- "Copy"
1167
- ] })
1168
- }
1169
- )
1170
- ] }),
1171
- /* @__PURE__ */ jsx(
1172
- Editor,
1173
- {
1174
- height,
1175
- defaultLanguage: language,
1176
- language: selectedLanguage,
1177
- value: editorValue,
1178
- defaultValue,
1179
- theme: resolveTheme,
1180
- onChange: handleChange,
1181
- onMount,
1182
- options: {
1183
- readOnly,
1184
- lineNumbers: lineNumbers ? "on" : "off",
1185
- minimap: {
1186
- enabled: minimap
1187
- },
1188
- wordWrap,
1189
- fontSize,
1190
- scrollBeyondLastLine: false,
1191
- automaticLayout: true,
1192
- tabSize: 2,
1193
- insertSpaces: true,
1194
- formatOnPaste: true,
1195
- formatOnType: true,
1196
- scrollbar: {
1197
- vertical: "auto",
1198
- horizontal: "auto",
1199
- verticalScrollbarSize: 10,
1200
- horizontalScrollbarSize: 10
1201
- },
1202
- padding: {
1203
- top: 16,
1204
- bottom: 16
1205
- }
1206
- }
1207
- }
1208
- )
1209
- ]
1210
- }
1211
- );
1212
- }
1213
- );
1214
- CodeEditor.displayName = "CodeEditor";
1215
- var codeExplorerVariants = cva(
1216
- "relative flex flex-col overflow-hidden rounded-lg border bg-background",
1217
- {
1218
- variants: {
1219
- size: {
1220
- sm: "text-xs",
1221
- default: "text-sm",
1222
- lg: "text-base"
1223
- }
1224
- },
1225
- defaultVariants: {
1226
- size: "default"
1227
- }
1228
- }
1229
- );
1230
- var getFileIcon = /* @__PURE__ */ __name((fileName, isFolder = false) => {
1231
- if (isFolder) return Folder;
1232
- const ext = fileName.split(".").pop()?.toLowerCase();
1233
- switch (ext) {
1234
- case "js":
1235
- case "jsx":
1236
- case "ts":
1237
- case "tsx":
1238
- case "vue":
1239
- case "svelte":
1240
- return FileCode;
1241
- case "json":
1242
- case "xml":
1243
- case "yaml":
1244
- case "yml":
1245
- case "toml":
1246
- case "ini":
1247
- return FileText;
1248
- case "png":
1249
- case "jpg":
1250
- case "jpeg":
1251
- case "gif":
1252
- case "svg":
1253
- case "webp":
1254
- case "ico":
1255
- return FileImage;
1256
- default:
1257
- return File;
1258
- }
1259
- }, "getFileIcon");
1260
- var formatFileSize = /* @__PURE__ */ __name((bytes) => {
1261
- if (!bytes) return "";
1262
- const units = ["B", "KB", "MB", "GB"];
1263
- let size = bytes;
1264
- let unitIndex = 0;
1265
- while (size >= 1024 && unitIndex < units.length - 1) {
1266
- size /= 1024;
1267
- unitIndex++;
1268
- }
1269
- return `${size.toFixed(1)} ${units[unitIndex]}`;
1270
- }, "formatFileSize");
1271
- var formatModifiedDate = /* @__PURE__ */ __name((date) => {
1272
- if (!date) return "";
1273
- const now = /* @__PURE__ */ new Date();
1274
- const diff = now.getTime() - date.getTime();
1275
- const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
1276
- if (days === 0) return "Today";
1277
- if (days === 1) return "Yesterday";
1278
- if (days < 7) return `${days} days ago`;
1279
- if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
1280
- if (days < 365) return `${Math.floor(days / 30)} months ago`;
1281
- return `${Math.floor(days / 365)} years ago`;
1282
- }, "formatModifiedDate");
1283
- var CodeExplorer = React6.forwardRef(
1284
- ({
1285
- className,
1286
- size,
1287
- files,
1288
- onFileSelect,
1289
- onFolderToggle,
1290
- selectedFile,
1291
- showSearch = true,
1292
- showFileIcons = true,
1293
- showFileSize = false,
1294
- showModifiedDate = false,
1295
- height = "400px",
1296
- defaultExpanded = [],
1297
- searchPlaceholder = "Search files...",
1298
- emptyMessage = "No files found",
1299
- ...props
1300
- }, ref) => {
1301
- const [searchTerm, setSearchTerm] = React6.useState("");
1302
- const [expandedFolders, setExpandedFolders] = React6.useState(
1303
- new Set(defaultExpanded)
1304
- );
1305
- const buildFileTree = React6.useCallback(
1306
- (nodes) => {
1307
- return nodes.map((node) => ({
1308
- ...node,
1309
- isExpanded: expandedFolders.has(node.id),
1310
- children: node.children ? buildFileTree(node.children) : void 0
1311
- }));
1312
- },
1313
- [expandedFolders]
1314
- );
1315
- const filterFiles = React6.useCallback(
1316
- (nodes, term) => {
1317
- if (!term) return nodes;
1318
- const filtered = [];
1319
- for (const node of nodes) {
1320
- if (node.name.toLowerCase().includes(term.toLowerCase())) {
1321
- filtered.push(node);
1322
- } else if (node.type === "folder" && node.children) {
1323
- const filteredChildren = filterFiles(node.children, term);
1324
- if (filteredChildren.length > 0) {
1325
- filtered.push({
1326
- ...node,
1327
- children: filteredChildren,
1328
- isExpanded: true
1329
- // Auto-expand folders with matches
1330
- });
1331
- }
1332
- }
1333
- }
1334
- return filtered;
1335
- },
1336
- []
1337
- );
1338
- const processedFiles = React6.useMemo(() => {
1339
- const withExpansion = buildFileTree(files);
1340
- return searchTerm ? filterFiles(withExpansion, searchTerm) : withExpansion;
1341
- }, [files, searchTerm, buildFileTree, filterFiles]);
1342
- const toggleFolder = React6.useCallback(
1343
- (folder) => {
1344
- setExpandedFolders((prev) => {
1345
- const newSet = new Set(prev);
1346
- if (newSet.has(folder.id)) {
1347
- newSet.delete(folder.id);
1348
- } else {
1349
- newSet.add(folder.id);
1350
- }
1351
- return newSet;
1352
- });
1353
- onFolderToggle?.(folder);
1354
- },
1355
- [onFolderToggle]
1356
- );
1357
- const renderFileNode = React6.useCallback(
1358
- (node, depth = 0) => {
1359
- const Icon = showFileIcons ? getFileIcon(node.name, node.type === "folder") : null;
1360
- const FolderIcon = node.type === "folder" && node.isExpanded ? FolderOpen : Folder;
1361
- const isSelected = selectedFile === node.id || selectedFile === node.path;
1362
- return /* @__PURE__ */ jsxs("div", { children: [
1363
- /* @__PURE__ */ jsxs(
1364
- "div",
1365
- {
1366
- className: cn(
1367
- "flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",
1368
- isSelected && "bg-muted",
1369
- "rounded-sm"
1370
- ),
1371
- style: { paddingLeft: `${depth * 16 + 8}px` },
1372
- onClick: () => {
1373
- if (node.type === "folder") {
1374
- toggleFolder(node);
1375
- } else {
1376
- onFileSelect?.(node);
1377
- }
1378
- },
1379
- children: [
1380
- node.type === "folder" && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center", children: node.isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }) }),
1381
- showFileIcons && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center flex-shrink-0", children: node.type === "folder" ? /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 text-blue-500" }) : Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }) : null }),
1382
- /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.name }),
1383
- showFileSize && node.type === "file" && node.size && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatFileSize(node.size) }),
1384
- showModifiedDate && node.modified && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatModifiedDate(node.modified) })
1385
- ]
1386
- }
1387
- ),
1388
- node.type === "folder" && node.isExpanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => renderFileNode(child, depth + 1)) })
1389
- ] }, node.id);
1390
- },
1391
- [
1392
- showFileIcons,
1393
- showFileSize,
1394
- showModifiedDate,
1395
- selectedFile,
1396
- toggleFolder,
1397
- onFileSelect
1398
- ]
1399
- );
1400
- const clearSearch = /* @__PURE__ */ __name(() => {
1401
- setSearchTerm("");
1402
- }, "clearSearch");
1403
- return /* @__PURE__ */ jsxs(
1404
- "div",
1405
- {
1406
- ref,
1407
- className: cn(codeExplorerVariants({ size }), className),
1408
- style: { height },
1409
- ...props,
1410
- children: [
1411
- showSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
1412
- /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
1413
- /* @__PURE__ */ jsx(
1414
- Input,
1415
- {
1416
- value: searchTerm,
1417
- onChange: (e) => setSearchTerm(e.target.value),
1418
- placeholder: searchPlaceholder,
1419
- className: "pl-8 pr-8 h-8"
1420
- }
1421
- ),
1422
- searchTerm && /* @__PURE__ */ jsx(
1423
- Button,
1424
- {
1425
- variant: "ghost",
1426
- size: "sm",
1427
- onClick: clearSearch,
1428
- className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
1429
- children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
1430
- }
1431
- )
1432
- ] }) }),
1433
- /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: processedFiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-24 text-muted-foreground", children: searchTerm ? `No files match "${searchTerm}"` : emptyMessage }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: processedFiles.map((node) => renderFileNode(node, 0)) }) }) }),
1434
- /* @__PURE__ */ jsxs("div", { className: "border-t px-4 py-2 text-xs text-muted-foreground", children: [
1435
- (() => {
1436
- const countFiles = /* @__PURE__ */ __name((nodes) => {
1437
- let files2 = 0;
1438
- let folders = 0;
1439
- for (const node of nodes) {
1440
- if (node.type === "file") {
1441
- files2++;
1442
- } else {
1443
- folders++;
1444
- if (node.children) {
1445
- const childCounts = countFiles(node.children);
1446
- files2 += childCounts.files;
1447
- folders += childCounts.folders;
1448
- }
1449
- }
1450
- }
1451
- return { files: files2, folders };
1452
- }, "countFiles");
1453
- const { files: fileCount, folders: folderCount } = countFiles(processedFiles);
1454
- const parts = [];
1455
- if (fileCount > 0)
1456
- parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"}`);
1457
- if (folderCount > 0)
1458
- parts.push(`${folderCount} folder${folderCount === 1 ? "" : "s"}`);
1459
- return parts.join(", ") || "Empty";
1460
- })(),
1461
- searchTerm && /* @__PURE__ */ jsx("span", { children: " (filtered)" })
1462
- ] })
1463
- ]
1464
- }
1465
- );
1466
- }
1467
- );
1468
- CodeExplorer.displayName = "CodeExplorer";
1469
- var codePreviewVariants = cva(
1470
- "relative overflow-hidden rounded-lg border bg-background",
1471
- {
1472
- variants: {
1473
- size: {
1474
- sm: "text-xs",
1475
- default: "text-sm",
1476
- lg: "text-base"
1477
- }
1478
- },
1479
- defaultVariants: {
1480
- size: "default"
1481
- }
1482
- }
1483
- );
1484
- var runHTMLCode = /* @__PURE__ */ __name((files) => {
1485
- const htmlFile = files.find((f) => f.type === "html");
1486
- const cssFiles = files.filter((f) => f.type === "css");
1487
- const jsFiles = files.filter((f) => f.type === "js");
1488
- let html = htmlFile?.content || "<div>No HTML file provided</div>";
1489
- if (cssFiles.length > 0) {
1490
- const cssContent = cssFiles.map((f) => f.content).join("\n");
1491
- html = `<style>${cssContent}</style>
1492
- ${html}`;
1493
- }
1494
- if (jsFiles.length > 0) {
1495
- const jsContent = jsFiles.map((f) => f.content).join("\n");
1496
- html = `${html}
1497
- <script>${jsContent}</script>`;
1498
- }
1499
- return html;
1500
- }, "runHTMLCode");
1501
- var consoleScript = `
15
+ ${t}`;await navigator.clipboard.writeText(n),R(!0),setTimeout(()=>R(!1),2e3);}catch(n){console.error("Failed to copy diff:",n);}},[c,P,a,t,w,L]),Q=U.useMemo(()=>{if(!O)return c;let n=[],i=0;for(;i<c.length;){let e=c[i];if(e.type!=="unchanged"){n.push(e),i++;continue}let f=i;for(;i<c.length&&c[i].type==="unchanged";)i++;let z=i-f;if(z<=j*2)for(let m=f;m<i;m++)n.push(c[m]);else {for(let m=f;m<f+j;m++)n.push(c[m]);n.push({type:"unchanged",lineNumber:-1,content:`... ${z-j*2} unchanged lines ...`});for(let m=i-j;m<i;m++)n.push(c[m]);}}return n},[c,O,j]),D=U.useMemo(()=>{let n=c.filter(e=>e.type==="add").length,i=c.filter(e=>e.type==="remove").length;return {additions:n,deletions:i}},[c]),o=x(()=>{let n=N.split(`
16
+ `),i=B.split(`
17
+ `);return jsx("div",{className:"font-mono",children:Q.map((e,f)=>{if(e.lineNumber===-1)return jsx("div",{className:"flex items-center justify-center py-2 text-muted-foreground bg-muted/30",children:jsx("span",{className:"text-xs",children:e.content})},f);let z=e.content;return e.type==="add"&&e.newLineNumber?z=i[e.newLineNumber-1]||e.content:(e.type==="remove"&&e.oldLineNumber||e.type==="unchanged"&&e.oldLineNumber)&&(z=n[e.oldLineNumber-1]||e.content),jsx(ye,{change:e,showLineNumbers:E,isUnified:true,highlightedContent:z},f)})})},"renderUnifiedView"),p=x(()=>{let n=N.split(`
18
+ `),i=B.split(`
19
+ `);return jsxs("div",{className:"grid grid-cols-2 gap-0",children:[jsxs("div",{className:"border-r",children:[jsx("div",{className:"border-b px-4 py-2 bg-red-500/10",children:jsx("span",{className:"text-sm font-medium text-red-600 dark:text-red-400",children:w||g||"Old"})}),jsx("div",{className:"font-mono",children:n.map((e,f)=>jsx(ye,{change:{type:"remove",lineNumber:f+1,content:e,oldLineNumber:f+1},showLineNumbers:E,highlightedContent:e},`old-${f}`))})]}),jsxs("div",{children:[jsx("div",{className:"border-b px-4 py-2 bg-green-500/10",children:jsx("span",{className:"text-sm font-medium text-green-600 dark:text-green-400",children:L||g||"New"})}),jsx("div",{className:"font-mono",children:i.map((e,f)=>jsx(ye,{change:{type:"add",lineNumber:f+1,content:e,newLineNumber:f+1},showLineNumbers:E,highlightedContent:e},`new-${f}`))})]})]})},"renderSplitView");return jsxs("div",{ref:M,className:cn(Je({theme:u,size:l,className:d})),...H,children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2",children:[jsxs("div",{className:"flex items-center gap-4",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(GitCompare,{className:"h-4 w-4 text-muted-foreground"}),g&&jsx("span",{className:"text-sm font-medium",children:g}),s&&jsx(Badge,{variant:"secondary",className:"text-xs",children:s})]}),jsxs("div",{className:"flex items-center gap-2 text-xs text-muted-foreground",children:[jsxs("span",{className:"flex items-center gap-1",children:[jsx(Plus,{className:"h-3 w-3 text-green-500"}),D.additions]}),jsxs("span",{className:"flex items-center gap-1",children:[jsx(Minus,{className:"h-3 w-3 text-red-500"}),D.deletions]})]})]}),jsxs("div",{className:"flex items-center gap-2",children:[jsxs(ToggleGroup,{type:"single",value:P,onValueChange:n=>n&&$(n),size:"sm",children:[jsx(ToggleGroupItem,{value:"unified","aria-label":"Unified view",children:jsx(Square,{className:"h-3 w-3"})}),jsx(ToggleGroupItem,{value:"split","aria-label":"Split view",children:jsx(SplitSquareHorizontal,{className:"h-3 w-3"})})]}),X&&jsxs(Button,{variant:"ghost",size:"sm",onClick:G,className:"h-8 w-8 p-0",children:[_?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:_?"Copied":"Copy diff"})]})]})]}),jsx("div",{className:"overflow-auto",style:{maxHeight:J},children:F?jsx("div",{className:"p-4 space-y-2",children:Array.from({length:10}).map((n,i)=>jsxs("div",{className:"flex items-center gap-4",children:[E&&jsx(Skeleton,{className:"h-4 w-8"}),jsx(Skeleton,{className:"h-4 flex-1"})]},i))}):P==="unified"?o():p()})]})});Xe.displayName="CodeDiff";var oa=["javascript","typescript","python","java","csharp","cpp","c","go","rust","ruby","php","swift","kotlin","dart","html","css","scss","json","xml","yaml","sql","markdown","shell","plaintext"],Qe={javascript:"JavaScript",typescript:"TypeScript",python:"Python",java:"Java",csharp:"C#",cpp:"C++",c:"C",go:"Go",rust:"Rust",ruby:"Ruby",php:"PHP",swift:"Swift",kotlin:"Kotlin",dart:"Dart",html:"HTML",css:"CSS",scss:"SCSS",json:"JSON",xml:"XML",yaml:"YAML",sql:"SQL",markdown:"Markdown",shell:"Shell",plaintext:"Plain Text"},et=U.forwardRef(({value:d,defaultValue:u="",language:l="javascript",height:a="400px",theme:t="auto",onChange:s,onMount:g,readOnly:w=false,lineNumbers:L=true,minimap:E=false,wordWrap:X="on",fontSize:J=14,className:Y,showCopyButton:O=true,showLanguageSelector:j=true,availableLanguages:H=oa},M)=>{let{theme:P}=useTheme(),[$,_]=U.useState(l),[R,F]=U.useState(false),[C,N]=U.useState(d||u);U.useEffect(()=>{d!==void 0&&N(d);},[d]);let k=U.useCallback(async()=>{try{await navigator.clipboard.writeText(C),F(!0),setTimeout(()=>F(!1),2e3);}catch(c){console.error("Failed to copy:",c);}},[C]),B=U.useCallback((c,b)=>{N(c||""),s&&s(c,b);},[s]),r=U.useMemo(()=>t==="auto"?P==="dark"?"vs-dark":"light":t==="dark"?"vs-dark":"light",[t,P]);return jsxs("div",{ref:M,className:cn("relative overflow-hidden rounded-md border bg-background",Y),children:[(j||O)&&jsxs("div",{className:"flex items-center justify-between border-b bg-muted/50 px-3 py-2",children:[j&&jsxs(DropdownMenu,{children:[jsx(DropdownMenuTrigger,{asChild:true,children:jsxs(Button,{variant:"ghost",size:"sm",className:"h-8 gap-1 px-2 text-xs font-mono",children:[Qe[$]||$,jsx(ChevronDown,{className:"h-3 w-3"})]})}),jsx(DropdownMenuContent,{align:"start",className:"max-h-80 overflow-auto",children:H.map(c=>jsx(DropdownMenuItem,{onClick:()=>_(c),className:"font-mono text-xs",children:Qe[c]||c},c))})]}),O&&jsx(Button,{variant:"ghost",size:"sm",className:"h-8 gap-1.5 px-2 text-xs",onClick:k,disabled:!C,children:R?jsxs(Fragment,{children:[jsx(Check,{className:"h-3 w-3"}),"Copied!"]}):jsxs(Fragment,{children:[jsx(Copy,{className:"h-3 w-3"}),"Copy"]})})]}),jsx(Xt,{height:a,defaultLanguage:l,language:$,value:C,defaultValue:u,theme:r,onChange:B,onMount:g,options:{readOnly:w,lineNumbers:L?"on":"off",minimap:{enabled:E},wordWrap:X,fontSize:J,scrollBeyondLastLine:false,automaticLayout:true,tabSize:2,insertSpaces:true,formatOnPaste:true,formatOnType:true,scrollbar:{vertical:"auto",horizontal:"auto",verticalScrollbarSize:10,horizontalScrollbarSize:10},padding:{top:16,bottom:16}}})]})});et.displayName="CodeEditor";var st=cva("relative flex flex-col overflow-hidden rounded-lg border bg-background",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),ya=x((d,u=false)=>{if(u)return Folder;switch(d.split(".").pop()?.toLowerCase()){case "js":case "jsx":case "ts":case "tsx":case "vue":case "svelte":return FileCode;case "json":case "xml":case "yaml":case "yml":case "toml":case "ini":return FileText;case "png":case "jpg":case "jpeg":case "gif":case "svg":case "webp":case "ico":return FileImage;default:return File}},"getFileIcon"),wa=x(d=>{if(!d)return "";let u=["B","KB","MB","GB"],l=d,a=0;for(;l>=1024&&a<u.length-1;)l/=1024,a++;return `${l.toFixed(1)} ${u[a]}`},"formatFileSize"),Na=x(d=>{if(!d)return "";let l=new Date().getTime()-d.getTime(),a=Math.floor(l/(1e3*60*60*24));return a===0?"Today":a===1?"Yesterday":a<7?`${a} days ago`:a<30?`${Math.floor(a/7)} weeks ago`:a<365?`${Math.floor(a/30)} months ago`:`${Math.floor(a/365)} years ago`},"formatModifiedDate"),rt=U.forwardRef(({className:d,size:u,files:l,onFileSelect:a,onFolderToggle:t,selectedFile:s,showSearch:g=true,showFileIcons:w=true,showFileSize:L=false,showModifiedDate:E=false,height:X$1="400px",defaultExpanded:J=[],searchPlaceholder:Y="Search files...",emptyMessage:O="No files found",...j},H)=>{let[M,P]=U.useState(""),[$,_]=U.useState(new Set(J)),R=U.useCallback(r=>r.map(c=>({...c,isExpanded:$.has(c.id),children:c.children?R(c.children):void 0})),[$]),F=U.useCallback((r,c)=>{if(!c)return r;let b=[];for(let V of r)if(V.name.toLowerCase().includes(c.toLowerCase()))b.push(V);else if(V.type==="folder"&&V.children){let G=F(V.children,c);G.length>0&&b.push({...V,children:G,isExpanded:true});}return b},[]),C=U.useMemo(()=>{let r=R(l);return M?F(r,M):r},[l,M,R,F]),N=U.useCallback(r=>{_(c=>{let b=new Set(c);return b.has(r.id)?b.delete(r.id):b.add(r.id),b}),t?.(r);},[t]),k=U.useCallback((r,c=0)=>{let b=w?ya(r.name,r.type==="folder"):null,V=r.type==="folder"&&r.isExpanded?FolderOpen:Folder,G=s===r.id||s===r.path;return jsxs("div",{children:[jsxs("div",{className:cn("flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",G&&"bg-muted","rounded-sm"),style:{paddingLeft:`${c*16+8}px`},onClick:()=>{r.type==="folder"?N(r):a?.(r);},children:[r.type==="folder"&&jsx("div",{className:"w-4 h-4 flex items-center justify-center",children:r.isExpanded?jsx(ChevronDown,{className:"h-3 w-3"}):jsx(ChevronRight,{className:"h-3 w-3"})}),w&&jsx("div",{className:"w-4 h-4 flex items-center justify-center flex-shrink-0",children:r.type==="folder"?jsx(V,{className:"h-4 w-4 text-blue-500"}):b?jsx(b,{className:"h-4 w-4 text-muted-foreground"}):null}),jsx("span",{className:"flex-1 truncate",children:r.name}),L&&r.type==="file"&&r.size&&jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:wa(r.size)}),E&&r.modified&&jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:Na(r.modified)})]}),r.type==="folder"&&r.isExpanded&&r.children&&jsx("div",{children:r.children.map(Q=>k(Q,c+1))})]},r.id)},[w,L,E,s,N,a]),B=x(()=>{P("");},"clearSearch");return jsxs("div",{ref:H,className:cn(st({size:u}),d),style:{height:X$1},...j,children:[g&&jsx("div",{className:"flex items-center gap-2 border-b px-4 py-2",children:jsxs("div",{className:"relative flex-1",children:[jsx(Search,{className:"absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"}),jsx(Input,{value:M,onChange:r=>P(r.target.value),placeholder:Y,className:"pl-8 pr-8 h-8"}),M&&jsx(Button,{variant:"ghost",size:"sm",onClick:B,className:"absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",children:jsx(X,{className:"h-3 w-3"})})]})}),jsx(ScrollArea,{className:"flex-1",children:jsx("div",{className:"p-2",children:C.length===0?jsx("div",{className:"flex items-center justify-center h-24 text-muted-foreground",children:M?`No files match "${M}"`:O}):jsx("div",{className:"space-y-0.5",children:C.map(r=>k(r,0))})})}),jsxs("div",{className:"border-t px-4 py-2 text-xs text-muted-foreground",children:[(()=>{let r=x(G=>{let Q=0,D=0;for(let o of G)if(o.type==="file")Q++;else if(D++,o.children){let p=r(o.children);Q+=p.files,D+=p.folders;}return {files:Q,folders:D}},"countFiles"),{files:c,folders:b}=r(C),V=[];return c>0&&V.push(`${c} file${c===1?"":"s"}`),b>0&&V.push(`${b} folder${b===1?"":"s"}`),V.join(", ")||"Empty"})(),M&&jsx("span",{children:" (filtered)"})]})]})});rt.displayName="CodeExplorer";var mt=cva("relative overflow-hidden rounded-lg border bg-background",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),Ia=x(d=>{let u=d.find(s=>s.type==="html"),l=d.filter(s=>s.type==="css"),a=d.filter(s=>s.type==="js"),t=u?.content||"<div>No HTML file provided</div>";if(l.length>0&&(t=`<style>${l.map(g=>g.content).join(`
20
+ `)}</style>
21
+ ${t}`),a.length>0){let s=a.map(g=>g.content).join(`
22
+ `);t=`${t}
23
+ <script>${s}</script>`;}return t},"runHTMLCode"),ja=`
1502
24
  <script>
1503
25
  const originalConsole = window.console;
1504
26
  const logs = [];
@@ -1535,976 +57,7 @@ var consoleScript = `
1535
57
  }, '*');
1536
58
  });
1537
59
  </script>
1538
- `;
1539
- var CodePreview = React6.forwardRef(
1540
- ({
1541
- className,
1542
- size,
1543
- files,
1544
- defaultFile,
1545
- showPreview = true,
1546
- showConsole = true,
1547
- autoRun = false,
1548
- maxHeight = "600px",
1549
- previewHeight = "300px",
1550
- consoleHeight = "150px",
1551
- allowFullscreen = true,
1552
- customRunner,
1553
- ...props
1554
- }, ref) => {
1555
- const [activeFile, setActiveFile] = React6.useState(
1556
- defaultFile || files[0]?.filename || ""
1557
- );
1558
- const [previewContent, setPreviewContent] = React6.useState("");
1559
- const [isRunning, setIsRunning] = React6.useState(false);
1560
- const [results, setResults] = React6.useState([]);
1561
- const [isPreviewVisible, setIsPreviewVisible] = React6.useState(showPreview);
1562
- const [isConsoleVisible, setIsConsoleVisible] = React6.useState(showConsole);
1563
- const [isFullscreen, setIsFullscreen] = React6.useState(false);
1564
- const [copied, setCopied] = React6.useState({});
1565
- const iframeRef = React6.useRef(null);
1566
- files.find((f) => f.filename === activeFile) || files[0];
1567
- React6.useEffect(() => {
1568
- const handleMessage = /* @__PURE__ */ __name((event) => {
1569
- if (event.data?.type === "console" || event.data?.type === "error") {
1570
- setResults((prev) => [...prev, event.data.data]);
1571
- }
1572
- }, "handleMessage");
1573
- window.addEventListener("message", handleMessage);
1574
- return () => window.removeEventListener("message", handleMessage);
1575
- }, []);
1576
- const runCode = React6.useCallback(async () => {
1577
- setIsRunning(true);
1578
- setResults([]);
1579
- try {
1580
- let output;
1581
- if (customRunner) {
1582
- output = await customRunner(files);
1583
- } else {
1584
- output = runHTMLCode(files);
1585
- }
1586
- output = consoleScript + output;
1587
- setPreviewContent(output);
1588
- if (iframeRef.current) {
1589
- const doc = iframeRef.current.contentDocument;
1590
- if (doc) {
1591
- doc.open();
1592
- doc.write(output);
1593
- doc.close();
1594
- }
1595
- }
1596
- } catch (error) {
1597
- setResults([
1598
- {
1599
- type: "error",
1600
- content: error instanceof Error ? error.message : String(error),
1601
- timestamp: Date.now()
1602
- }
1603
- ]);
1604
- } finally {
1605
- setIsRunning(false);
1606
- }
1607
- }, [files, customRunner]);
1608
- React6.useEffect(() => {
1609
- if (autoRun) {
1610
- const timer = setTimeout(runCode, 1e3);
1611
- return () => clearTimeout(timer);
1612
- }
1613
- }, [files, autoRun, runCode]);
1614
- const copyFileContent = React6.useCallback(
1615
- async (filename) => {
1616
- const file = files.find((f) => f.filename === filename);
1617
- if (!file) return;
1618
- try {
1619
- await navigator.clipboard.writeText(file.content);
1620
- setCopied((prev) => ({ ...prev, [filename]: true }));
1621
- setTimeout(() => {
1622
- setCopied((prev) => ({ ...prev, [filename]: false }));
1623
- }, 2e3);
1624
- } catch (error) {
1625
- console.error("Failed to copy code:", error);
1626
- }
1627
- },
1628
- [files]
1629
- );
1630
- const clearConsole = /* @__PURE__ */ __name(() => {
1631
- setResults([]);
1632
- }, "clearConsole");
1633
- const renderConsole = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
1634
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
1635
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1636
- /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" }),
1637
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Console" }),
1638
- results.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: results.length })
1639
- ] }),
1640
- /* @__PURE__ */ jsx(
1641
- Button,
1642
- {
1643
- variant: "ghost",
1644
- size: "sm",
1645
- onClick: clearConsole,
1646
- className: "h-8 w-8 p-0",
1647
- children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
1648
- }
1649
- )
1650
- ] }),
1651
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-2 space-y-1 font-mono text-xs", children: results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground italic", children: "No output" }) : results.map((result, index) => /* @__PURE__ */ jsxs(
1652
- "div",
1653
- {
1654
- className: cn(
1655
- "flex items-start gap-2 p-2 rounded",
1656
- result.type === "error" && "bg-red-500/10 text-red-600 dark:text-red-400",
1657
- result.type === "log" && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
1658
- result.type === "output" && "bg-green-500/10 text-green-600 dark:text-green-400"
1659
- ),
1660
- children: [
1661
- /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(result.timestamp).toLocaleTimeString() }),
1662
- /* @__PURE__ */ jsx("pre", { className: "flex-1 whitespace-pre-wrap break-words", children: result.content })
1663
- ]
1664
- },
1665
- index
1666
- )) })
1667
- ] }), "renderConsole");
1668
- const layout = isFullscreen ? "fixed inset-0 z-50 bg-background" : "";
1669
- return /* @__PURE__ */ jsxs(
1670
- "div",
1671
- {
1672
- ref,
1673
- className: cn(codePreviewVariants({ size }), layout, className),
1674
- style: { maxHeight: isFullscreen ? "100vh" : maxHeight },
1675
- ...props,
1676
- children: [
1677
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2", children: [
1678
- /* @__PURE__ */ jsx(
1679
- Tabs,
1680
- {
1681
- value: activeFile,
1682
- onValueChange: setActiveFile,
1683
- className: "flex-1",
1684
- children: /* @__PURE__ */ jsx(TabsList, { className: "h-auto p-0 bg-transparent", children: files.map((file) => /* @__PURE__ */ jsxs(
1685
- TabsTrigger,
1686
- {
1687
- value: file.filename,
1688
- className: "relative flex items-center gap-2 data-[state=active]:bg-muted",
1689
- children: [
1690
- /* @__PURE__ */ jsx("span", { children: file.filename }),
1691
- /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: file.language }),
1692
- /* @__PURE__ */ jsx(
1693
- Button,
1694
- {
1695
- variant: "ghost",
1696
- size: "sm",
1697
- onClick: (e) => {
1698
- e.stopPropagation();
1699
- copyFileContent(file.filename);
1700
- },
1701
- className: "h-6 w-6 p-0 opacity-0 group-hover:opacity-100",
1702
- children: copied[file.filename] ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
1703
- }
1704
- )
1705
- ]
1706
- },
1707
- file.filename
1708
- )) })
1709
- }
1710
- ),
1711
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1712
- /* @__PURE__ */ jsx(
1713
- Toggle,
1714
- {
1715
- pressed: isPreviewVisible,
1716
- onPressedChange: setIsPreviewVisible,
1717
- "aria-label": "Toggle preview",
1718
- size: "sm",
1719
- children: isPreviewVisible ? /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" })
1720
- }
1721
- ),
1722
- /* @__PURE__ */ jsx(
1723
- Toggle,
1724
- {
1725
- pressed: isConsoleVisible,
1726
- onPressedChange: setIsConsoleVisible,
1727
- "aria-label": "Toggle console",
1728
- size: "sm",
1729
- children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
1730
- }
1731
- ),
1732
- /* @__PURE__ */ jsxs(
1733
- Button,
1734
- {
1735
- variant: "outline",
1736
- size: "sm",
1737
- onClick: runCode,
1738
- disabled: isRunning,
1739
- className: "gap-2",
1740
- children: [
1741
- isRunning ? /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
1742
- "Run"
1743
- ]
1744
- }
1745
- ),
1746
- allowFullscreen && /* @__PURE__ */ jsx(
1747
- Button,
1748
- {
1749
- variant: "ghost",
1750
- size: "sm",
1751
- onClick: () => setIsFullscreen(!isFullscreen),
1752
- className: "h-8 w-8 p-0",
1753
- children: isFullscreen ? /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
1754
- }
1755
- )
1756
- ] })
1757
- ] }),
1758
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
1759
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(Tabs, { value: activeFile, onValueChange: setActiveFile, children: files.map((file) => /* @__PURE__ */ jsx(
1760
- TabsContent,
1761
- {
1762
- value: file.filename,
1763
- className: "m-0 h-full",
1764
- children: /* @__PURE__ */ jsx(
1765
- CodeSnippet,
1766
- {
1767
- code: file.content,
1768
- language: file.language,
1769
- showLineNumbers: true,
1770
- showCopyButton: false,
1771
- showHeader: false,
1772
- maxHeight: "100%",
1773
- className: "border-0 rounded-none"
1774
- }
1775
- )
1776
- },
1777
- file.filename
1778
- )) }) }),
1779
- (isPreviewVisible || isConsoleVisible) && /* @__PURE__ */ jsxs(Fragment, { children: [
1780
- /* @__PURE__ */ jsx(Separator, {}),
1781
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row min-h-0", children: [
1782
- isPreviewVisible && /* @__PURE__ */ jsxs(
1783
- "div",
1784
- {
1785
- className: "flex-1 min-h-0 border-r last:border-r-0",
1786
- style: { height: previewHeight },
1787
- children: [
1788
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2 bg-muted/30", children: [
1789
- /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
1790
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Preview" }),
1791
- results.filter((r) => r.type === "error").length > 0 && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" })
1792
- ] }),
1793
- /* @__PURE__ */ jsx(
1794
- "iframe",
1795
- {
1796
- ref: iframeRef,
1797
- className: "w-full h-full bg-white",
1798
- sandbox: "allow-scripts allow-same-origin",
1799
- srcDoc: previewContent
1800
- }
1801
- )
1802
- ]
1803
- }
1804
- ),
1805
- isConsoleVisible && /* @__PURE__ */ jsx(
1806
- "div",
1807
- {
1808
- className: "flex-1 min-h-0",
1809
- style: { height: consoleHeight },
1810
- children: renderConsole()
1811
- }
1812
- )
1813
- ] })
1814
- ] })
1815
- ] }),
1816
- isFullscreen && /* @__PURE__ */ jsx(
1817
- "div",
1818
- {
1819
- className: "absolute inset-0 bg-black/50",
1820
- onClick: () => setIsFullscreen(false)
1821
- }
1822
- )
1823
- ]
1824
- }
1825
- );
1826
- }
1827
- );
1828
- CodePreview.displayName = "CodePreview";
1829
- var codeSnippetVariants = cva("relative group", {
1830
- variants: {
1831
- variant: {
1832
- default: "rounded-lg border bg-muted/50",
1833
- inline: "inline-block rounded-md bg-muted px-2 py-1",
1834
- minimal: "bg-transparent"
1835
- },
1836
- theme: {
1837
- dark: "bg-slate-950 border-slate-800",
1838
- light: "bg-slate-50 border-slate-200",
1839
- github: "bg-white border-slate-200",
1840
- "github-dark": "bg-slate-900 border-slate-700",
1841
- terminal: "bg-black border-green-500/30 text-green-400",
1842
- retro: "bg-amber-50 border-amber-200 text-amber-900"
1843
- },
1844
- size: {
1845
- xs: "text-xs",
1846
- sm: "text-sm",
1847
- default: "text-sm",
1848
- lg: "text-base"
1849
- }
1850
- },
1851
- defaultVariants: {
1852
- variant: "default",
1853
- theme: "dark",
1854
- size: "default"
1855
- }
1856
- });
1857
- var CodeSnippet3 = React6.forwardRef(
1858
- ({
1859
- className,
1860
- variant,
1861
- theme,
1862
- size,
1863
- code,
1864
- language = "text",
1865
- filename,
1866
- showLineNumbers = false,
1867
- highlightLines = [],
1868
- showCopyButton = true,
1869
- showLanguageBadge = true,
1870
- showHeader = true,
1871
- maxHeight,
1872
- expandable = false,
1873
- collapsedHeight = "200px",
1874
- wrapLines = false,
1875
- startLineNumber = 1,
1876
- ...props
1877
- }, ref) => {
1878
- const [highlightedCode, setHighlightedCode] = React6.useState("");
1879
- const [copied, setCopied] = React6.useState(false);
1880
- const [isLoading, setIsLoading] = React6.useState(true);
1881
- const [isExpanded, setIsExpanded] = React6.useState(!expandable);
1882
- const themeMap = {
1883
- dark: "github-dark",
1884
- light: "github-light",
1885
- github: "github-light",
1886
- "github-dark": "github-dark",
1887
- terminal: "github-dark",
1888
- retro: "github-light"
1889
- };
1890
- React6.useEffect(() => {
1891
- const highlightCode = /* @__PURE__ */ __name(async () => {
1892
- setIsLoading(true);
1893
- try {
1894
- const supportedLang = Object.keys(bundledLanguages).includes(language);
1895
- const highlighted = await codeToHtml(code, {
1896
- lang: supportedLang ? language : "text",
1897
- theme: themeMap[theme || "dark"]
1898
- });
1899
- const tempDiv = document.createElement("div");
1900
- tempDiv.innerHTML = highlighted;
1901
- const codeElement = tempDiv.querySelector("code");
1902
- setHighlightedCode(codeElement?.innerHTML || highlighted);
1903
- } catch (error) {
1904
- console.error("Failed to highlight code:", error);
1905
- const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
1906
- setHighlightedCode(escaped);
1907
- } finally {
1908
- setIsLoading(false);
1909
- }
1910
- }, "highlightCode");
1911
- highlightCode();
1912
- }, [code, language, theme]);
1913
- const copyToClipboard = React6.useCallback(async () => {
1914
- try {
1915
- await navigator.clipboard.writeText(code);
1916
- setCopied(true);
1917
- setTimeout(() => setCopied(false), 2e3);
1918
- } catch (error) {
1919
- console.error("Failed to copy code:", error);
1920
- }
1921
- }, [code]);
1922
- const lines = highlightedCode.split("\n").filter((line, index, array) => {
1923
- return line.trim() !== "" || index < array.length - 1;
1924
- });
1925
- const renderInline = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
1926
- "code",
1927
- {
1928
- className: cn(
1929
- codeSnippetVariants({ variant, theme, size }),
1930
- "font-mono",
1931
- className
1932
- ),
1933
- dangerouslySetInnerHTML: { __html: highlightedCode }
1934
- }
1935
- ), "renderInline");
1936
- const renderBlock = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(
1937
- "div",
1938
- {
1939
- ref,
1940
- className: cn(
1941
- codeSnippetVariants({ variant, theme, size }),
1942
- "overflow-hidden",
1943
- className
1944
- ),
1945
- ...props,
1946
- children: [
1947
- showHeader && (filename || language || showCopyButton || expandable) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
1948
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1949
- filename && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1950
- /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-muted-foreground" }),
1951
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: filename })
1952
- ] }),
1953
- showLanguageBadge && language && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: language })
1954
- ] }),
1955
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1956
- expandable && /* @__PURE__ */ jsxs(
1957
- Button,
1958
- {
1959
- variant: "ghost",
1960
- size: "sm",
1961
- onClick: () => setIsExpanded(!isExpanded),
1962
- className: "h-8 w-8 p-0",
1963
- children: [
1964
- isExpanded ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" }),
1965
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: isExpanded ? "Collapse" : "Expand" })
1966
- ]
1967
- }
1968
- ),
1969
- showCopyButton && /* @__PURE__ */ jsxs(
1970
- Button,
1971
- {
1972
- variant: "ghost",
1973
- size: "sm",
1974
- onClick: copyToClipboard,
1975
- className: "h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
1976
- children: [
1977
- copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
1978
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: copied ? "Copied" : "Copy code" })
1979
- ]
1980
- }
1981
- )
1982
- ] })
1983
- ] }),
1984
- /* @__PURE__ */ jsx(
1985
- "div",
1986
- {
1987
- className: cn("overflow-auto", !wrapLines && "overflow-x-auto"),
1988
- style: {
1989
- maxHeight: isExpanded ? maxHeight : collapsedHeight
1990
- },
1991
- children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2", children: Array.from({ length: Math.min(lines.length || 5, 10) }).map(
1992
- (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
1993
- showLineNumbers && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-8" }),
1994
- /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
1995
- ] }, i)
1996
- ) }) : /* @__PURE__ */ jsx("div", { className: "font-mono", children: lines.map((line, index) => {
1997
- const lineNumber = index + startLineNumber;
1998
- const isHighlighted = highlightLines.includes(lineNumber);
1999
- return /* @__PURE__ */ jsxs(
2000
- "div",
2001
- {
2002
- className: cn(
2003
- "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
2004
- isHighlighted && "bg-blue-500/10 border-l-2 border-l-blue-500",
2005
- !wrapLines && "whitespace-nowrap"
2006
- ),
2007
- children: [
2008
- showLineNumbers && /* @__PURE__ */ jsx("span", { className: "mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground", children: lineNumber }),
2009
- /* @__PURE__ */ jsx(
2010
- "div",
2011
- {
2012
- className: cn(
2013
- "flex-1",
2014
- wrapLines ? "whitespace-pre-wrap break-words" : "overflow-x-auto"
2015
- ),
2016
- dangerouslySetInnerHTML: { __html: line }
2017
- }
2018
- )
2019
- ]
2020
- },
2021
- index
2022
- );
2023
- }) })
2024
- }
2025
- ),
2026
- expandable && !isExpanded && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
2027
- variant === "minimal" && showCopyButton && /* @__PURE__ */ jsx(
2028
- Button,
2029
- {
2030
- variant: "ghost",
2031
- size: "sm",
2032
- onClick: copyToClipboard,
2033
- className: "absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
2034
- 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" })
2035
- }
2036
- )
2037
- ]
2038
- }
2039
- ), "renderBlock");
2040
- if (variant === "inline") {
2041
- return renderInline();
2042
- }
2043
- return renderBlock();
2044
- }
2045
- );
2046
- CodeSnippet3.displayName = "CodeSnippet";
2047
- var InlineCode = React6.forwardRef(({ children, language, className, ...props }, ref) => {
2048
- return /* @__PURE__ */ jsx(
2049
- CodeSnippet3,
2050
- {
2051
- ref,
2052
- code: children,
2053
- language,
2054
- variant: "inline",
2055
- showCopyButton: false,
2056
- showLanguageBadge: false,
2057
- showHeader: false,
2058
- className,
2059
- ...props
2060
- }
2061
- );
2062
- });
2063
- InlineCode.displayName = "InlineCode";
2064
- var CodeTabs = React6.forwardRef(
2065
- ({ className, tabs = [], defaultTab = 0, ...props }, ref) => {
2066
- const [activeTab, setActiveTab] = React6.useState(defaultTab);
2067
- if (tabs.length === 0) {
2068
- return /* @__PURE__ */ jsx(
2069
- "div",
2070
- {
2071
- ref,
2072
- className: cn(
2073
- "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
2074
- className
2075
- ),
2076
- ...props,
2077
- children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No code tabs available. Add tabs to display code snippets." })
2078
- }
2079
- );
2080
- }
2081
- return /* @__PURE__ */ jsxs(
2082
- "div",
2083
- {
2084
- ref,
2085
- className: cn(
2086
- "rounded-lg border bg-card text-card-foreground shadow-sm",
2087
- className
2088
- ),
2089
- ...props,
2090
- children: [
2091
- /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 p-2", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
2092
- "button",
2093
- {
2094
- onClick: () => setActiveTab(index),
2095
- className: cn(
2096
- "rounded-md px-4 py-2 text-sm font-medium transition-colors",
2097
- activeTab === index ? "bg-primary text-primary-foreground" : "hover:bg-muted"
2098
- ),
2099
- children: tab.label
2100
- },
2101
- index
2102
- )) }) }),
2103
- /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-4", children: /* @__PURE__ */ jsx("code", { className: "text-sm", children: tabs[activeTab]?.code }) }) })
2104
- ]
2105
- }
2106
- );
2107
- }
2108
- );
2109
- CodeTabs.displayName = "CodeTabs";
2110
- var codeTerminalVariants = cva(
2111
- "relative flex flex-col overflow-hidden rounded-lg border",
2112
- {
2113
- variants: {
2114
- theme: {
2115
- dark: "bg-black border-gray-700 text-green-400",
2116
- light: "bg-white border-gray-300 text-gray-900",
2117
- matrix: "bg-black border-green-500 text-green-400",
2118
- hacker: "bg-gray-900 border-yellow-500 text-yellow-400",
2119
- retro: "bg-amber-900 border-amber-600 text-amber-100",
2120
- modern: "bg-slate-900 border-slate-700 text-slate-100"
2121
- },
2122
- size: {
2123
- sm: "text-xs",
2124
- default: "text-sm",
2125
- lg: "text-base"
2126
- }
2127
- },
2128
- defaultVariants: {
2129
- theme: "dark",
2130
- size: "default"
2131
- }
2132
- }
2133
- );
2134
- var ansiColors = {
2135
- black: "text-black",
2136
- red: "text-red-500",
2137
- green: "text-green-500",
2138
- yellow: "text-yellow-500",
2139
- blue: "text-blue-500",
2140
- magenta: "text-magenta-500",
2141
- cyan: "text-cyan-500",
2142
- white: "text-white",
2143
- gray: "text-gray-500",
2144
- brightRed: "text-red-400",
2145
- brightGreen: "text-green-400",
2146
- brightYellow: "text-yellow-400",
2147
- brightBlue: "text-blue-400",
2148
- brightMagenta: "text-magenta-400",
2149
- brightCyan: "text-cyan-400",
2150
- brightWhite: "text-gray-100"
2151
- };
2152
- var parseAnsiContent = /* @__PURE__ */ __name((content) => {
2153
- const ansiRegex = /\x1b\[([0-9;]*)m/g;
2154
- const parts = [];
2155
- let lastIndex = 0;
2156
- let currentClasses = [];
2157
- let match;
2158
- while ((match = ansiRegex.exec(content)) !== null) {
2159
- if (match.index > lastIndex) {
2160
- parts.push({
2161
- text: content.slice(lastIndex, match.index),
2162
- classes: [...currentClasses]
2163
- });
2164
- }
2165
- const codes = match[1].split(";").map((code) => parseInt(code) || 0);
2166
- codes.forEach((code) => {
2167
- switch (code) {
2168
- case 0:
2169
- currentClasses = [];
2170
- break;
2171
- // reset
2172
- case 30:
2173
- currentClasses.push(ansiColors.black);
2174
- break;
2175
- case 31:
2176
- currentClasses.push(ansiColors.red);
2177
- break;
2178
- case 32:
2179
- currentClasses.push(ansiColors.green);
2180
- break;
2181
- case 33:
2182
- currentClasses.push(ansiColors.yellow);
2183
- break;
2184
- case 34:
2185
- currentClasses.push(ansiColors.blue);
2186
- break;
2187
- case 35:
2188
- currentClasses.push(ansiColors.magenta);
2189
- break;
2190
- case 36:
2191
- currentClasses.push(ansiColors.cyan);
2192
- break;
2193
- case 37:
2194
- currentClasses.push(ansiColors.white);
2195
- break;
2196
- case 90:
2197
- currentClasses.push(ansiColors.gray);
2198
- break;
2199
- case 91:
2200
- currentClasses.push(ansiColors.brightRed);
2201
- break;
2202
- case 92:
2203
- currentClasses.push(ansiColors.brightGreen);
2204
- break;
2205
- case 93:
2206
- currentClasses.push(ansiColors.brightYellow);
2207
- break;
2208
- case 94:
2209
- currentClasses.push(ansiColors.brightBlue);
2210
- break;
2211
- case 95:
2212
- currentClasses.push(ansiColors.brightMagenta);
2213
- break;
2214
- case 96:
2215
- currentClasses.push(ansiColors.brightCyan);
2216
- break;
2217
- case 97:
2218
- currentClasses.push(ansiColors.brightWhite);
2219
- break;
2220
- }
2221
- });
2222
- lastIndex = match.index + match[0].length;
2223
- }
2224
- if (lastIndex < content.length) {
2225
- parts.push({
2226
- text: content.slice(lastIndex),
2227
- classes: [...currentClasses]
2228
- });
2229
- }
2230
- return parts.map((part, index) => /* @__PURE__ */ jsx("span", { className: cn(part.classes), children: part.text }, index));
2231
- }, "parseAnsiContent");
2232
- var CodeTerminal = React6.forwardRef(
2233
- ({
2234
- className,
2235
- theme,
2236
- size,
2237
- title = "Terminal",
2238
- prompt = "$",
2239
- maxLines = 1e3,
2240
- showLineNumbers = false,
2241
- allowInput = true,
2242
- allowClear = true,
2243
- allowCopy = true,
2244
- allowDownload = false,
2245
- allowFullscreen = true,
2246
- height = "400px",
2247
- autoScroll = true,
2248
- history = [],
2249
- onCommand,
2250
- onClear,
2251
- initialLines = [],
2252
- ...props
2253
- }, ref) => {
2254
- const [lines, setLines] = React6.useState(initialLines);
2255
- const [input, setInput] = React6.useState("");
2256
- const [historyIndex, setHistoryIndex] = React6.useState(-1);
2257
- const [isFullscreen, setIsFullscreen] = React6.useState(false);
2258
- const [commandHistory, setCommandHistory] = React6.useState(history);
2259
- const scrollAreaRef = React6.useRef(null);
2260
- const inputRef = React6.useRef(null);
2261
- React6.useEffect(() => {
2262
- if (autoScroll && scrollAreaRef.current) {
2263
- scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
2264
- }
2265
- }, [lines, autoScroll]);
2266
- const addLine = React6.useCallback(
2267
- (line) => {
2268
- const newLine = {
2269
- ...line,
2270
- id: `line-${Date.now()}-${Math.random()}`,
2271
- timestamp: Date.now()
2272
- };
2273
- setLines((prev) => {
2274
- const updated = [...prev, newLine];
2275
- return updated.length > maxLines ? updated.slice(-maxLines) : updated;
2276
- });
2277
- },
2278
- [maxLines]
2279
- );
2280
- const handleCommand = React6.useCallback(
2281
- async (command) => {
2282
- if (!command.trim()) return;
2283
- setCommandHistory((prev) => [...prev, command]);
2284
- setHistoryIndex(-1);
2285
- addLine({
2286
- type: "input",
2287
- content: `${prompt} ${command}`,
2288
- command
2289
- });
2290
- if (command === "clear") {
2291
- if (onClear) {
2292
- onClear();
2293
- } else {
2294
- setLines([]);
2295
- }
2296
- return;
2297
- }
2298
- if (command === "history") {
2299
- commandHistory.forEach((cmd, index) => {
2300
- addLine({
2301
- type: "output",
2302
- content: `${index + 1} ${cmd}`
2303
- });
2304
- });
2305
- return;
2306
- }
2307
- if (command.startsWith("echo ")) {
2308
- addLine({
2309
- type: "output",
2310
- content: command.slice(5)
2311
- });
2312
- return;
2313
- }
2314
- if (onCommand) {
2315
- try {
2316
- await onCommand(command);
2317
- } catch (error) {
2318
- addLine({
2319
- type: "error",
2320
- content: error instanceof Error ? error.message : String(error),
2321
- exitCode: 1
2322
- });
2323
- }
2324
- } else {
2325
- addLine({
2326
- type: "error",
2327
- content: `Command not found: ${command}`,
2328
- exitCode: 127
2329
- });
2330
- }
2331
- },
2332
- [prompt, addLine, onCommand, onClear, commandHistory]
2333
- );
2334
- const handleInputSubmit = /* @__PURE__ */ __name((e) => {
2335
- e.preventDefault();
2336
- if (input.trim()) {
2337
- handleCommand(input);
2338
- setInput("");
2339
- }
2340
- }, "handleInputSubmit");
2341
- const handleKeyDown = /* @__PURE__ */ __name((e) => {
2342
- if (e.key === "ArrowUp") {
2343
- e.preventDefault();
2344
- if (historyIndex < commandHistory.length - 1) {
2345
- const newIndex = historyIndex + 1;
2346
- setHistoryIndex(newIndex);
2347
- setInput(commandHistory[commandHistory.length - 1 - newIndex] || "");
2348
- }
2349
- } else if (e.key === "ArrowDown") {
2350
- e.preventDefault();
2351
- if (historyIndex > 0) {
2352
- const newIndex = historyIndex - 1;
2353
- setHistoryIndex(newIndex);
2354
- setInput(commandHistory[commandHistory.length - 1 - newIndex] || "");
2355
- } else if (historyIndex === 0) {
2356
- setHistoryIndex(-1);
2357
- setInput("");
2358
- }
2359
- }
2360
- }, "handleKeyDown");
2361
- const copyContent = React6.useCallback(async () => {
2362
- const content = lines.map((line) => line.content).join("\n");
2363
- try {
2364
- await navigator.clipboard.writeText(content);
2365
- } catch (error) {
2366
- console.error("Failed to copy terminal content:", error);
2367
- }
2368
- }, [lines]);
2369
- const downloadContent = React6.useCallback(() => {
2370
- const content = lines.map(
2371
- (line) => `[${new Date(line.timestamp).toISOString()}] ${line.content}`
2372
- ).join("\n");
2373
- const blob = new Blob([content], { type: "text/plain" });
2374
- const url = URL.createObjectURL(blob);
2375
- const a = document.createElement("a");
2376
- a.href = url;
2377
- a.download = `terminal-${Date.now()}.txt`;
2378
- document.body.appendChild(a);
2379
- a.click();
2380
- document.body.removeChild(a);
2381
- URL.revokeObjectURL(url);
2382
- }, [lines]);
2383
- const clearTerminal = /* @__PURE__ */ __name(() => {
2384
- if (onClear) {
2385
- onClear();
2386
- } else {
2387
- setLines([]);
2388
- }
2389
- }, "clearTerminal");
2390
- const handleTerminalClick = /* @__PURE__ */ __name(() => {
2391
- if (allowInput && inputRef.current) {
2392
- inputRef.current.focus();
2393
- }
2394
- }, "handleTerminalClick");
2395
- return /* @__PURE__ */ jsxs(
2396
- "div",
2397
- {
2398
- ref,
2399
- className: cn(
2400
- codeTerminalVariants({ theme, size }),
2401
- isFullscreen && "fixed inset-0 z-50",
2402
- className
2403
- ),
2404
- style: { height: isFullscreen ? "100vh" : height },
2405
- onClick: handleTerminalClick,
2406
- ...props,
2407
- children: [
2408
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
2409
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
2410
- /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
2411
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-red-500" }),
2412
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-500" }),
2413
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-green-500" })
2414
- ] }),
2415
- /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" }),
2416
- /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: title }),
2417
- lines.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
2418
- lines.length,
2419
- " lines"
2420
- ] })
2421
- ] }),
2422
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
2423
- allowClear && /* @__PURE__ */ jsx(
2424
- Button,
2425
- {
2426
- variant: "ghost",
2427
- size: "sm",
2428
- onClick: clearTerminal,
2429
- className: "h-8 w-8 p-0",
2430
- children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3.5 w-3.5" })
2431
- }
2432
- ),
2433
- allowCopy && /* @__PURE__ */ jsx(
2434
- Button,
2435
- {
2436
- variant: "ghost",
2437
- size: "sm",
2438
- onClick: copyContent,
2439
- className: "h-8 w-8 p-0",
2440
- children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
2441
- }
2442
- ),
2443
- allowDownload && /* @__PURE__ */ jsx(
2444
- Button,
2445
- {
2446
- variant: "ghost",
2447
- size: "sm",
2448
- onClick: downloadContent,
2449
- className: "h-8 w-8 p-0",
2450
- children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
2451
- }
2452
- ),
2453
- allowFullscreen && /* @__PURE__ */ jsx(
2454
- Button,
2455
- {
2456
- variant: "ghost",
2457
- size: "sm",
2458
- onClick: () => setIsFullscreen(!isFullscreen),
2459
- className: "h-8 w-8 p-0",
2460
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" })
2461
- }
2462
- )
2463
- ] })
2464
- ] }),
2465
- /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0", children: [
2466
- /* @__PURE__ */ jsx(ScrollArea, { ref: scrollAreaRef, className: "flex-1 p-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-1 font-mono", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
2467
- showLineNumbers && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-12 text-right flex-shrink-0", children: index + 1 }),
2468
- /* @__PURE__ */ jsx(
2469
- "div",
2470
- {
2471
- className: cn(
2472
- "flex-1 whitespace-pre-wrap break-words",
2473
- line.type === "input" && "text-inherit",
2474
- line.type === "output" && "text-muted-foreground",
2475
- line.type === "error" && "text-red-400",
2476
- line.type === "system" && "text-blue-400"
2477
- ),
2478
- children: typeof line.content === "string" && line.content.includes("\x1B[") ? parseAnsiContent(line.content) : line.content
2479
- }
2480
- )
2481
- ] }, line.id)) }) }),
2482
- allowInput && /* @__PURE__ */ jsxs(Fragment, { children: [
2483
- /* @__PURE__ */ jsx(Separator, {}),
2484
- /* @__PURE__ */ jsx("form", { onSubmit: handleInputSubmit, className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 font-mono", children: [
2485
- /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 flex-shrink-0" }),
2486
- /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: prompt }),
2487
- /* @__PURE__ */ jsx(
2488
- Input,
2489
- {
2490
- ref: inputRef,
2491
- value: input,
2492
- onChange: (e) => setInput(e.target.value),
2493
- onKeyDown: handleKeyDown,
2494
- className: "flex-1 border-0 bg-transparent p-0 focus-visible:ring-0 font-mono",
2495
- placeholder: "Enter command...",
2496
- autoComplete: "off",
2497
- autoFocus: true
2498
- }
2499
- )
2500
- ] }) })
2501
- ] })
2502
- ] })
2503
- ]
2504
- }
2505
- );
2506
- }
2507
- );
2508
- CodeTerminal.displayName = "CodeTerminal";
2509
-
2510
- export { CodeBlock, CodeCompare, CodeDiff2 as CodeDiff, CodeEditor, CodeExplorer, CodePreview, CodeSnippet3 as CodeSnippet, CodeTabs, CodeTerminal, InlineCode, codeBlockVariants, codeCompareVariants, codeDiffVariants, codeExplorerVariants, codePreviewVariants, codeSnippetVariants, codeTerminalVariants };
60
+ `,pt=U.forwardRef(({className:d,size:u,files:l,defaultFile:a,showPreview:t=true,showConsole:s=true,autoRun:g=false,maxHeight:w="600px",previewHeight:L="300px",consoleHeight:E="150px",allowFullscreen:X$1=true,customRunner:J,...Y},O)=>{let [j,H]=U.useState(a||l[0]?.filename||""),[M,P]=U.useState(""),[$,_]=U.useState(false),[R,F]=U.useState([]),[C,N]=U.useState(t),[k,B]=U.useState(s),[r,c]=U.useState(false),[b,V]=U.useState({}),G=U.useRef(null);l.find(e=>e.filename===j)||l[0];U.useEffect(()=>{let e=x(f=>{(f.data?.type==="console"||f.data?.type==="error")&&F(z=>[...z,f.data.data]);},"handleMessage");return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[]);let D=U.useCallback(async()=>{_(true),F([]);try{let e;if(J?e=await J(l):e=Ia(l),e=ja+e,P(e),G.current){let f=G.current.contentDocument;f&&(f.open(),f.write(e),f.close());}}catch(e){F([{type:"error",content:e instanceof Error?e.message:String(e),timestamp:Date.now()}]);}finally{_(false);}},[l,J]);U.useEffect(()=>{if(g){let e=setTimeout(D,1e3);return ()=>clearTimeout(e)}},[l,g,D]);let o=U.useCallback(async e=>{let f=l.find(z=>z.filename===e);if(f)try{await navigator.clipboard.writeText(f.content),V(z=>({...z,[e]:!0})),setTimeout(()=>{V(z=>({...z,[e]:!1}));},2e3);}catch(z){console.error("Failed to copy code:",z);}},[l]),p=x(()=>{F([]);},"clearConsole"),n=x(()=>jsxs("div",{className:"flex flex-col h-full",children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(Terminal,{className:"h-4 w-4"}),jsx("span",{className:"text-sm font-medium",children:"Console"}),R.length>0&&jsx(Badge,{variant:"secondary",className:"text-xs",children:R.length})]}),jsx(Button,{variant:"ghost",size:"sm",onClick:p,className:"h-8 w-8 p-0",children:jsx(X,{className:"h-3.5 w-3.5"})})]}),jsx("div",{className:"flex-1 overflow-auto p-2 space-y-1 font-mono text-xs",children:R.length===0?jsx("div",{className:"text-muted-foreground italic",children:"No output"}):R.map((e,f)=>jsxs("div",{className:cn("flex items-start gap-2 p-2 rounded",e.type==="error"&&"bg-red-500/10 text-red-600 dark:text-red-400",e.type==="log"&&"bg-blue-500/10 text-blue-600 dark:text-blue-400",e.type==="output"&&"bg-green-500/10 text-green-600 dark:text-green-400"),children:[jsx("span",{className:"text-xs text-muted-foreground",children:new Date(e.timestamp).toLocaleTimeString()}),jsx("pre",{className:"flex-1 whitespace-pre-wrap break-words",children:e.content})]},f))})]}),"renderConsole"),i=r?"fixed inset-0 z-50 bg-background":"";return jsxs("div",{ref:O,className:cn(mt({size:u}),i,d),style:{maxHeight:r?"100vh":w},...Y,children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2",children:[jsx(Tabs,{value:j,onValueChange:H,className:"flex-1",children:jsx(TabsList,{className:"h-auto p-0 bg-transparent",children:l.map(e=>jsxs(TabsTrigger,{value:e.filename,className:"relative flex items-center gap-2 data-[state=active]:bg-muted",children:[jsx("span",{children:e.filename}),jsx(Badge,{variant:"outline",className:"text-xs",children:e.language}),jsx(Button,{variant:"ghost",size:"sm",onClick:f=>{f.stopPropagation(),o(e.filename);},className:"h-6 w-6 p-0 opacity-0 group-hover:opacity-100",children:b[e.filename]?jsx(Check,{className:"h-3 w-3 text-green-500"}):jsx(Copy,{className:"h-3 w-3"})})]},e.filename))})}),jsxs("div",{className:"flex items-center gap-2",children:[jsx(Toggle,{pressed:C,onPressedChange:N,"aria-label":"Toggle preview",size:"sm",children:C?jsx(Eye,{className:"h-4 w-4"}):jsx(EyeOff,{className:"h-4 w-4"})}),jsx(Toggle,{pressed:k,onPressedChange:B,"aria-label":"Toggle console",size:"sm",children:jsx(Terminal,{className:"h-4 w-4"})}),jsxs(Button,{variant:"outline",size:"sm",onClick:D,disabled:$,className:"gap-2",children:[$?jsx(RefreshCw,{className:"h-4 w-4 animate-spin"}):jsx(Play,{className:"h-4 w-4"}),"Run"]}),X$1&&jsx(Button,{variant:"ghost",size:"sm",onClick:()=>c(!r),className:"h-8 w-8 p-0",children:r?jsx(Square,{className:"h-4 w-4"}):jsx(Settings,{className:"h-4 w-4"})})]})]}),jsxs("div",{className:"flex flex-col h-full",children:[jsx("div",{className:"flex-1 min-h-0",children:jsx(Tabs,{value:j,onValueChange:H,children:l.map(e=>jsx(TabsContent,{value:e.filename,className:"m-0 h-full",children:jsx(CodeSnippet,{code:e.content,language:e.language,showLineNumbers:true,showCopyButton:false,showHeader:false,maxHeight:"100%",className:"border-0 rounded-none"})},e.filename))})}),(C||k)&&jsxs(Fragment,{children:[jsx(Separator,{}),jsxs("div",{className:"flex flex-col lg:flex-row min-h-0",children:[C&&jsxs("div",{className:"flex-1 min-h-0 border-r last:border-r-0",style:{height:L},children:[jsxs("div",{className:"flex items-center gap-2 border-b px-4 py-2 bg-muted/30",children:[jsx(Eye,{className:"h-4 w-4"}),jsx("span",{className:"text-sm font-medium",children:"Preview"}),R.filter(e=>e.type==="error").length>0&&jsx(AlertTriangle,{className:"h-4 w-4 text-red-500"})]}),jsx("iframe",{ref:G,className:"w-full h-full bg-white",sandbox:"allow-scripts allow-same-origin",srcDoc:M})]}),k&&jsx("div",{className:"flex-1 min-h-0",style:{height:E},children:n()})]})]})]}),r&&jsx("div",{className:"absolute inset-0 bg-black/50",onClick:()=>c(false)})]})});pt.displayName="CodePreview";var Le=cva("relative group",{variants:{variant:{default:"rounded-lg border bg-muted/50",inline:"inline-block rounded-md bg-muted px-2 py-1",minimal:"bg-transparent"},theme:{dark:"bg-slate-950 border-slate-800",light:"bg-slate-50 border-slate-200",github:"bg-white border-slate-200","github-dark":"bg-slate-900 border-slate-700",terminal:"bg-black border-green-500/30 text-green-400",retro:"bg-amber-50 border-amber-200 text-amber-900"},size:{xs:"text-xs",sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{variant:"default",theme:"dark",size:"default"}}),Me=U.forwardRef(({className:d,variant:u,theme:l,size:a,code:t,language:s="text",filename:g,showLineNumbers:w=false,highlightLines:L=[],showCopyButton:E=true,showLanguageBadge:X=true,showHeader:J=true,maxHeight:Y,expandable:O=false,collapsedHeight:j="200px",wrapLines:H=false,startLineNumber:M=1,...P},$)=>{let[_,R]=U.useState(""),[F,C]=U.useState(false),[N,k]=U.useState(true),[B,r]=U.useState(!O),c={dark:"github-dark",light:"github-light",github:"github-light","github-dark":"github-dark",terminal:"github-dark",retro:"github-light"};U.useEffect(()=>{x(async()=>{k(true);try{let o=Object.keys(bundledLanguages).includes(s),p=await codeToHtml(t,{lang:o?s:"text",theme:c[l||"dark"]}),n=document.createElement("div");n.innerHTML=p;let i=n.querySelector("code");R(i?.innerHTML||p);}catch(o){console.error("Failed to highlight code:",o);let p=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");R(p);}finally{k(false);}},"highlightCode")();},[t,s,l]);let b=U.useCallback(async()=>{try{await navigator.clipboard.writeText(t),C(!0),setTimeout(()=>C(!1),2e3);}catch(D){console.error("Failed to copy code:",D);}},[t]),V=_.split(`
61
+ `).filter((D,o,p)=>D.trim()!==""||o<p.length-1),G=x(()=>jsx("code",{className:cn(Le({variant:u,theme:l,size:a}),"font-mono",d),dangerouslySetInnerHTML:{__html:_}}),"renderInline"),Q=x(()=>jsxs("div",{ref:$,className:cn(Le({variant:u,theme:l,size:a}),"overflow-hidden",d),...P,children:[J&&(g||s||E||O)&&jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxs("div",{className:"flex items-center gap-2",children:[g&&jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(FileText,{className:"h-3.5 w-3.5 text-muted-foreground"}),jsx("span",{className:"text-sm font-medium",children:g})]}),X&&s&&jsx(Badge,{variant:"secondary",className:"text-xs",children:s})]}),jsxs("div",{className:"flex items-center gap-1",children:[O&&jsxs(Button,{variant:"ghost",size:"sm",onClick:()=>r(!B),className:"h-8 w-8 p-0",children:[B?jsx(Minimize2,{className:"h-3.5 w-3.5"}):jsx(Maximize2,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:B?"Collapse":"Expand"})]}),E&&jsxs(Button,{variant:"ghost",size:"sm",onClick:b,className:"h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:[F?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:F?"Copied":"Copy code"})]})]})]}),jsx("div",{className:cn("overflow-auto",!H&&"overflow-x-auto"),style:{maxHeight:B?Y:j},children:N?jsx("div",{className:"p-4 space-y-2",children:Array.from({length:Math.min(V.length||5,10)}).map((D,o)=>jsxs("div",{className:"flex items-center gap-4",children:[w&&jsx(Skeleton,{className:"h-4 w-8"}),jsx(Skeleton,{className:"h-4 flex-1"})]},o))}):jsx("div",{className:"font-mono",children:V.map((D,o)=>{let p=o+M,n=L.includes(p);return jsxs("div",{className:cn("group relative flex min-h-[1.5rem] items-center px-4 py-0.5",n&&"bg-blue-500/10 border-l-2 border-l-blue-500",!H&&"whitespace-nowrap"),children:[w&&jsx("span",{className:"mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground",children:p}),jsx("div",{className:cn("flex-1",H?"whitespace-pre-wrap break-words":"overflow-x-auto"),dangerouslySetInnerHTML:{__html:D}})]},o)})})}),O&&!B&&jsx("div",{className:"absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none"}),u==="minimal"&&E&&jsx(Button,{variant:"ghost",size:"sm",onClick:b,className:"absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:F?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"})})]}),"renderBlock");return u==="inline"?G():Q()});Me.displayName="CodeSnippet";var ht=U.forwardRef(({children:d,language:u,className:l,...a},t)=>jsx(Me,{ref:t,code:d,language:u,variant:"inline",showCopyButton:false,showLanguageBadge:false,showHeader:false,className:l,...a}));ht.displayName="InlineCode";var bt=U.forwardRef(({className:d,tabs:u=[],defaultTab:l=0,...a},t)=>{let[s,g]=U.useState(l);return u.length===0?jsx("div",{ref:t,className:cn("rounded-lg border bg-card p-6 text-card-foreground shadow-sm",d),...a,children:jsx("p",{className:"text-sm text-muted-foreground",children:"No code tabs available. Add tabs to display code snippets."})}):jsxs("div",{ref:t,className:cn("rounded-lg border bg-card text-card-foreground shadow-sm",d),...a,children:[jsx("div",{className:"border-b",children:jsx("div",{className:"flex gap-1 p-2",children:u.map((w,L)=>jsx("button",{onClick:()=>g(L),className:cn("rounded-md px-4 py-2 text-sm font-medium transition-colors",s===L?"bg-primary text-primary-foreground":"hover:bg-muted"),children:w.label},L))})}),jsx("div",{className:"p-4",children:jsx("pre",{className:"overflow-x-auto rounded-md bg-muted p-4",children:jsx("code",{className:"text-sm",children:u[s]?.code})})})]})});bt.displayName="CodeTabs";var xt=cva("relative flex flex-col overflow-hidden rounded-lg border",{variants:{theme:{dark:"bg-black border-gray-700 text-green-400",light:"bg-white border-gray-300 text-gray-900",matrix:"bg-black border-green-500 text-green-400",hacker:"bg-gray-900 border-yellow-500 text-yellow-400",retro:"bg-amber-900 border-amber-600 text-amber-100",modern:"bg-slate-900 border-slate-700 text-slate-100"},size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{theme:"dark",size:"default"}}),ee={black:"text-black",red:"text-red-500",green:"text-green-500",yellow:"text-yellow-500",blue:"text-blue-500",magenta:"text-magenta-500",cyan:"text-cyan-500",white:"text-white",gray:"text-gray-500",brightRed:"text-red-400",brightGreen:"text-green-400",brightYellow:"text-yellow-400",brightBlue:"text-blue-400",brightMagenta:"text-magenta-400",brightCyan:"text-cyan-400",brightWhite:"text-gray-100"},os=x(d=>{let u=/\x1b\[([0-9;]*)m/g,l=[],a=0,t=[],s;for(;(s=u.exec(d))!==null;)s.index>a&&l.push({text:d.slice(a,s.index),classes:[...t]}),s[1].split(";").map(w=>parseInt(w)||0).forEach(w=>{switch(w){case 0:t=[];break;case 30:t.push(ee.black);break;case 31:t.push(ee.red);break;case 32:t.push(ee.green);break;case 33:t.push(ee.yellow);break;case 34:t.push(ee.blue);break;case 35:t.push(ee.magenta);break;case 36:t.push(ee.cyan);break;case 37:t.push(ee.white);break;case 90:t.push(ee.gray);break;case 91:t.push(ee.brightRed);break;case 92:t.push(ee.brightGreen);break;case 93:t.push(ee.brightYellow);break;case 94:t.push(ee.brightBlue);break;case 95:t.push(ee.brightMagenta);break;case 96:t.push(ee.brightCyan);break;case 97:t.push(ee.brightWhite);break}}),a=s.index+s[0].length;return a<d.length&&l.push({text:d.slice(a),classes:[...t]}),l.map((g,w)=>jsx("span",{className:cn(g.classes),children:g.text},w))},"parseAnsiContent"),vt=U.forwardRef(({className:d,theme:u,size:l,title:a="Terminal",prompt:t="$",maxLines:s=1e3,showLineNumbers:g=false,allowInput:w=true,allowClear:L=true,allowCopy:E=true,allowDownload:X=false,allowFullscreen:J=true,height:Y="400px",autoScroll:O=true,history:j=[],onCommand:H,onClear:M,initialLines:P=[],...$},_)=>{let[R,F]=U.useState(P),[C,N]=U.useState(""),[k,B]=U.useState(-1),[r,c]=U.useState(false),[b,V]=U.useState(j),G=U.useRef(null),Q=U.useRef(null);U.useEffect(()=>{O&&G.current&&(G.current.scrollTop=G.current.scrollHeight);},[R,O]);let D=U.useCallback(m=>{let T={...m,id:`line-${Date.now()}-${Math.random()}`,timestamp:Date.now()};F(ce=>{let ne=[...ce,T];return ne.length>s?ne.slice(-s):ne});},[s]),o=U.useCallback(async m=>{if(m.trim()){if(V(T=>[...T,m]),B(-1),D({type:"input",content:`${t} ${m}`,command:m}),m==="clear"){M?M():F([]);return}if(m==="history"){b.forEach((T,ce)=>{D({type:"output",content:`${ce+1} ${T}`});});return}if(m.startsWith("echo ")){D({type:"output",content:m.slice(5)});return}if(H)try{await H(m);}catch(T){D({type:"error",content:T instanceof Error?T.message:String(T),exitCode:1});}else D({type:"error",content:`Command not found: ${m}`,exitCode:127});}},[t,D,H,M,b]),p=x(m=>{m.preventDefault(),C.trim()&&(o(C),N(""));},"handleInputSubmit"),n=x(m=>{if(m.key==="ArrowUp"){if(m.preventDefault(),k<b.length-1){let T=k+1;B(T),N(b[b.length-1-T]||"");}}else if(m.key==="ArrowDown")if(m.preventDefault(),k>0){let T=k-1;B(T),N(b[b.length-1-T]||"");}else k===0&&(B(-1),N(""));},"handleKeyDown"),i=U.useCallback(async()=>{let m=R.map(T=>T.content).join(`
62
+ `);try{await navigator.clipboard.writeText(m);}catch(T){console.error("Failed to copy terminal content:",T);}},[R]),e=U.useCallback(()=>{let m=R.map(He=>`[${new Date(He.timestamp).toISOString()}] ${He.content}`).join(`
63
+ `),T=new Blob([m],{type:"text/plain"}),ce=URL.createObjectURL(T),ne=document.createElement("a");ne.href=ce,ne.download=`terminal-${Date.now()}.txt`,document.body.appendChild(ne),ne.click(),document.body.removeChild(ne),URL.revokeObjectURL(ce);},[R]),f=x(()=>{M?M():F([]);},"clearTerminal"),z=x(()=>{w&&Q.current&&Q.current.focus();},"handleTerminalClick");return jsxs("div",{ref:_,className:cn(xt({theme:u,size:l}),r&&"fixed inset-0 z-50",d),style:{height:r?"100vh":Y},onClick:z,...$,children:[jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsxs("div",{className:"flex gap-1",children:[jsx("div",{className:"w-3 h-3 rounded-full bg-red-500"}),jsx("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),jsx("div",{className:"w-3 h-3 rounded-full bg-green-500"})]}),jsx(Terminal,{className:"h-4 w-4"}),jsx("span",{className:"text-sm font-medium",children:a}),R.length>0&&jsxs("span",{className:"text-xs text-muted-foreground",children:[R.length," lines"]})]}),jsxs("div",{className:"flex items-center gap-1",children:[L&&jsx(Button,{variant:"ghost",size:"sm",onClick:f,className:"h-8 w-8 p-0",children:jsx(RefreshCw,{className:"h-3.5 w-3.5"})}),E&&jsx(Button,{variant:"ghost",size:"sm",onClick:i,className:"h-8 w-8 p-0",children:jsx(Copy,{className:"h-3.5 w-3.5"})}),X&&jsx(Button,{variant:"ghost",size:"sm",onClick:e,className:"h-8 w-8 p-0",children:jsx(Download,{className:"h-3.5 w-3.5"})}),J&&jsx(Button,{variant:"ghost",size:"sm",onClick:()=>c(!r),className:"h-8 w-8 p-0",children:r?jsx(Minimize2,{className:"h-3.5 w-3.5"}):jsx(Maximize2,{className:"h-3.5 w-3.5"})})]})]}),jsxs("div",{className:"flex-1 flex flex-col min-h-0",children:[jsx(ScrollArea,{ref:G,className:"flex-1 p-4",children:jsx("div",{className:"space-y-1 font-mono",children:R.map((m,T)=>jsxs("div",{className:"flex items-start gap-2",children:[g&&jsx("span",{className:"text-xs text-muted-foreground w-12 text-right flex-shrink-0",children:T+1}),jsx("div",{className:cn("flex-1 whitespace-pre-wrap break-words",m.type==="input"&&"text-inherit",m.type==="output"&&"text-muted-foreground",m.type==="error"&&"text-red-400",m.type==="system"&&"text-blue-400"),children:typeof m.content=="string"&&m.content.includes("\x1B[")?os(m.content):m.content})]},m.id))})}),w&&jsxs(Fragment,{children:[jsx(Separator,{}),jsx("form",{onSubmit:p,className:"p-4",children:jsxs("div",{className:"flex items-center gap-2 font-mono",children:[jsx(ChevronRight,{className:"h-4 w-4 flex-shrink-0"}),jsx("span",{className:"flex-shrink-0",children:t}),jsx(Input,{ref:Q,value:C,onChange:m=>N(m.target.value),onKeyDown:n,className:"flex-1 border-0 bg-transparent p-0 focus-visible:ring-0 font-mono",placeholder:"Enter command...",autoComplete:"off",autoFocus:true})]})})]})]})]})});vt.displayName="CodeTerminal";export{ze as CodeBlock,Oe as CodeCompare,Xe as CodeDiff,et as CodeEditor,rt as CodeExplorer,pt as CodePreview,Me as CodeSnippet,bt as CodeTabs,vt as CodeTerminal,ht as InlineCode,Be as codeBlockVariants,Ae as codeCompareVariants,Je as codeDiffVariants,st as codeExplorerVariants,mt as codePreviewVariants,Le as codeSnippetVariants,xt as codeTerminalVariants};