@hanzo/ui 5.3.26 → 5.3.28

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