@hanzo/ui 5.3.35 → 5.3.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/create-registry.js +0 -0
- package/bin/npx-registry-mcp.js +0 -0
- package/bin/registry-mcp-wrapper.sh +0 -0
- package/bin/registry-mcp.js +0 -0
- package/bin/start-mcp-server.sh +0 -0
- package/bin/test-mcp.sh +0 -0
- package/dist/3d/button.js +1 -297
- package/dist/3d/button.mjs +1 -272
- package/dist/3d/card.js +1 -233
- package/dist/3d/card.mjs +1 -206
- package/dist/3d/carousel.js +1 -370
- package/dist/3d/carousel.mjs +1 -343
- package/dist/3d/grid.js +1 -361
- package/dist/3d/grid.mjs +1 -336
- package/dist/3d/index.js +1 -1517
- package/dist/3d/index.mjs +1 -1471
- package/dist/3d/marquee.js +1 -351
- package/dist/3d/marquee.mjs +1 -326
- package/dist/3d/pin.js +1 -45
- package/dist/3d/pin.mjs +1 -23
- package/dist/accordion.js +1 -79
- package/dist/accordion.mjs +1 -54
- package/dist/alert-dialog.js +1 -224
- package/dist/alert-dialog.mjs +1 -191
- package/dist/alert.js +1 -97
- package/dist/alert.mjs +1 -91
- package/dist/animation/animated-background.js +1 -423
- package/dist/animation/animated-background.mjs +1 -417
- package/dist/animation/animated-beam.js +1 -118
- package/dist/animation/animated-beam.mjs +1 -96
- package/dist/animation/animated-cursor.js +1 -274
- package/dist/animation/animated-cursor.mjs +1 -269
- package/dist/animation/animated-icon.js +2 -356
- package/dist/animation/animated-icon.mjs +2 -350
- package/dist/animation/animated-list.js +1 -338
- package/dist/animation/animated-list.mjs +1 -332
- package/dist/animation/animated-number.js +1 -282
- package/dist/animation/animated-number.mjs +1 -276
- package/dist/animation/animated-testimonials.js +1 -96
- package/dist/animation/animated-testimonials.mjs +1 -74
- package/dist/animation/animated-tooltip.js +1 -66
- package/dist/animation/animated-tooltip.mjs +1 -44
- package/dist/animation/apple-cards-carousel.js +1 -307
- package/dist/animation/apple-cards-carousel.mjs +1 -284
- package/dist/animation/apple-hello-effect.js +1 -59
- package/dist/animation/apple-hello-effect.mjs +1 -37
- package/dist/animation/index.js +2 -1951
- package/dist/animation/index.mjs +2 -1920
- package/dist/avatar.js +1 -70
- package/dist/avatar.mjs +1 -46
- package/dist/badge.js +1 -60
- package/dist/badge.mjs +1 -54
- package/dist/blocks/index.js +2 -1684
- package/dist/blocks/index.mjs +2 -1645
- package/dist/breadcrumb.js +1 -106
- package/dist/breadcrumb.mjs +1 -98
- package/dist/calendar-ext/index.js +1 -207
- package/dist/calendar-ext/index.mjs +1 -169
- package/dist/calendar.js +1 -193
- package/dist/calendar.mjs +1 -168
- package/dist/carousel.js +1 -282
- package/dist/carousel.mjs +1 -253
- package/dist/charts/index.js +6 -5840
- package/dist/charts/index.mjs +6 -5749
- package/dist/checkbox.js +1 -59
- package/dist/checkbox.mjs +1 -34
- package/dist/code/block.js +2 -225
- package/dist/code/block.mjs +2 -202
- package/dist/code/compare.js +5 -444
- package/dist/code/compare.mjs +5 -421
- package/dist/code/diff.js +12 -429
- package/dist/code/diff.mjs +11 -405
- package/dist/code/editor.js +1 -242
- package/dist/code/editor.mjs +1 -217
- package/dist/code/explorer.js +1 -290
- package/dist/code/explorer.mjs +1 -267
- package/dist/code/index.js +26 -2514
- package/dist/code/index.mjs +24 -2471
- package/dist/code/preview.js +6 -363
- package/dist/code/preview.mjs +6 -340
- package/dist/code/snippet.js +2 -273
- package/dist/code/snippet.mjs +2 -249
- package/dist/code/tabs.js +1 -74
- package/dist/code/tabs.mjs +1 -52
- package/dist/code/terminal.js +3 -436
- package/dist/code/terminal.mjs +3 -413
- package/dist/collapsible.js +1 -32
- package/dist/collapsible.mjs +1 -8
- package/dist/command.js +1 -282
- package/dist/command.mjs +1 -251
- package/dist/context-menu.js +1 -206
- package/dist/context-menu.mjs +1 -170
- package/dist/desktop/hooks.js +1 -223
- package/dist/desktop/hooks.mjs +1 -198
- package/dist/desktop/index.js +1 -685
- package/dist/desktop/index.mjs +1 -657
- package/dist/desktop/spotlight.js +1 -260
- package/dist/desktop/spotlight.mjs +1 -235
- package/dist/desktop/window.js +1 -273
- package/dist/desktop/window.mjs +1 -247
- package/dist/device/index.js +1 -2
- package/dist/device/index.mjs +0 -1
- package/dist/dialog.js +1 -245
- package/dist/dialog.mjs +1 -213
- package/dist/dock/basic.js +1 -173
- package/dist/dock/basic.mjs +1 -150
- package/dist/dock/index.js +1 -647
- package/dist/dock/index.mjs +1 -620
- package/dist/dock/limelight-nav.js +1 -314
- package/dist/dock/limelight-nav.mjs +1 -293
- package/dist/dock/macos.js +1 -140
- package/dist/dock/macos.mjs +1 -117
- package/dist/dock/menu.js +1 -69
- package/dist/dock/menu.mjs +1 -47
- package/dist/dock/message.js +1 -148
- package/dist/dock/message.mjs +1 -126
- package/dist/drawer.js +1 -114
- package/dist/drawer.mjs +1 -102
- package/dist/dropdown-menu.js +1 -201
- package/dist/dropdown-menu.mjs +1 -165
- package/dist/finance/AdvancedChart.js +2 -47
- package/dist/finance/AdvancedChart.mjs +2 -45
- package/dist/finance/CompanyProfile.js +2 -47
- package/dist/finance/CompanyProfile.mjs +2 -45
- package/dist/finance/CryptoScreener.js +2 -44
- package/dist/finance/CryptoScreener.mjs +2 -42
- package/dist/finance/Financials.js +2 -51
- package/dist/finance/Financials.mjs +2 -49
- package/dist/finance/ForexScreener.js +2 -45
- package/dist/finance/ForexScreener.mjs +2 -43
- package/dist/finance/MarketOverview.js +2 -103
- package/dist/finance/MarketOverview.mjs +2 -101
- package/dist/finance/NewsTimeline.js +2 -43
- package/dist/finance/NewsTimeline.mjs +2 -41
- package/dist/finance/OrderEntry.js +1 -130
- package/dist/finance/OrderEntry.mjs +1 -128
- package/dist/finance/OrdersHistory.js +1 -63
- package/dist/finance/OrdersHistory.mjs +1 -61
- package/dist/finance/PositionsList.js +1 -79
- package/dist/finance/PositionsList.mjs +1 -77
- package/dist/finance/StockScreener.js +2 -45
- package/dist/finance/StockScreener.mjs +2 -43
- package/dist/finance/SymbolInfo.js +2 -45
- package/dist/finance/SymbolInfo.mjs +2 -43
- package/dist/finance/TechnicalAnalysis.js +2 -53
- package/dist/finance/TechnicalAnalysis.mjs +2 -51
- package/dist/finance/TickerTape.js +2 -55
- package/dist/finance/TickerTape.mjs +2 -53
- package/dist/finance/TradingPanel.js +1 -190
- package/dist/finance/TradingPanel.mjs +1 -188
- package/dist/finance/index.js +2 -929
- package/dist/finance/index.mjs +2 -913
- package/dist/form/index.js +1 -153
- package/dist/form/index.mjs +1 -123
- package/dist/form.js +1 -171
- package/dist/form.mjs +1 -141
- package/dist/hover-card.js +1 -57
- package/dist/hover-card.mjs +1 -33
- package/dist/index.js +192 -9618
- package/dist/index.mjs +192 -9202
- package/dist/input-otp.js +1 -78
- package/dist/input-otp.mjs +1 -53
- package/dist/kanban/index.js +1 -593
- package/dist/kanban/index.mjs +1 -571
- package/dist/lib/utils.js +1 -28
- package/dist/lib/utils.mjs +1 -24
- package/dist/mermaid/index.js +1 -280
- package/dist/mermaid/index.mjs +1 -253
- package/dist/navigation/index.js +1 -97
- package/dist/navigation/index.mjs +1 -78
- package/dist/navigation-menu.js +1 -148
- package/dist/navigation-menu.mjs +1 -115
- package/dist/pattern/grid-pattern.js +3 -325
- package/dist/pattern/grid-pattern.mjs +3 -302
- package/dist/pattern/index.js +3 -325
- package/dist/pattern/index.mjs +3 -302
- package/dist/popover.js +1 -62
- package/dist/popover.mjs +1 -36
- package/dist/progress.js +1 -61
- package/dist/progress.mjs +1 -36
- package/dist/project/gantt.js +1 -64
- package/dist/project/gantt.mjs +1 -42
- package/dist/project/index.js +1 -635
- package/dist/project/index.mjs +1 -610
- package/dist/project/kanban.js +1 -596
- package/dist/project/kanban.mjs +1 -571
- package/dist/project/list.js +1 -34
- package/dist/project/list.mjs +1 -11
- package/dist/radio-group.js +1 -67
- package/dist/radio-group.mjs +1 -44
- package/dist/resizable.js +1 -71
- package/dist/resizable.mjs +1 -47
- package/dist/scroll-area.js +1 -88
- package/dist/scroll-area.mjs +1 -65
- package/dist/select.js +1 -139
- package/dist/select.mjs +1 -110
- package/dist/separator.js +1 -58
- package/dist/separator.mjs +1 -33
- package/dist/sheet.js +1 -147
- package/dist/sheet.mjs +1 -116
- package/dist/skeleton.js +1 -31
- package/dist/skeleton.mjs +1 -26
- package/dist/slider.js +1 -98
- package/dist/slider.mjs +1 -72
- package/dist/sonner.js +1 -33
- package/dist/sonner.mjs +1 -28
- package/dist/spline/index.js +1 -210
- package/dist/spline/index.mjs +1 -201
- package/dist/spline/media-stack.js +1 -192
- package/dist/spline/media-stack.mjs +1 -184
- package/dist/spline/player.js +1 -36
- package/dist/spline/player.mjs +1 -30
- package/dist/switch.js +1 -61
- package/dist/switch.mjs +1 -36
- package/dist/table.js +1 -109
- package/dist/table.mjs +1 -100
- package/dist/tabs.js +1 -127
- package/dist/tabs.mjs +1 -101
- package/dist/tailwind/index.mjs +1 -2011
- package/dist/textarea.js +1 -77
- package/dist/textarea.mjs +1 -55
- package/dist/toggle-group.js +1 -117
- package/dist/toggle-group.mjs +1 -92
- package/dist/toggle.js +1 -70
- package/dist/toggle.mjs +1 -47
- package/dist/tooltip.js +1 -66
- package/dist/tooltip.mjs +1 -39
- package/dist/types/index.mjs +1 -51
- package/dist/ui/announcement.js +1 -133
- package/dist/ui/announcement.mjs +1 -111
- package/dist/ui/avatar-group.js +1 -87
- package/dist/ui/avatar-group.mjs +1 -64
- package/dist/ui/banner.js +1 -84
- package/dist/ui/banner.mjs +1 -61
- package/dist/ui/cursor.js +1 -77
- package/dist/ui/cursor.mjs +1 -55
- package/dist/ui/index.js +1 -494
- package/dist/ui/index.mjs +1 -461
- package/dist/ui/marquee.js +1 -73
- package/dist/ui/marquee.mjs +1 -51
- package/dist/ui/pill.js +1 -84
- package/dist/ui/pill.mjs +1 -61
- package/dist/ui/spinner.js +1 -27
- package/dist/ui/spinner.mjs +1 -25
- package/dist/ui/tags.js +1 -116
- package/dist/ui/tags.mjs +1 -94
- package/dist/ui/ticker.js +1 -72
- package/dist/ui/ticker.mjs +1 -50
- package/dist/util/index.mjs +1 -404
- package/package.json +28 -27
- package/dist/primitives/index.js +0 -9619
- package/dist/primitives/index.mjs +0 -9203
- package/dist/primitives-export.js +0 -9619
- package/dist/primitives-export.mjs +0 -9203
package/dist/code/explorer.js
CHANGED
|
@@ -1,291 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var classVarianceAuthority = require('class-variance-authority');
|
|
6
|
-
var lucideReact = require('lucide-react');
|
|
7
|
-
var utils = require('@hanzo/ui/lib/utils');
|
|
8
|
-
var button = require('@hanzo/ui/button');
|
|
9
|
-
var input = require('@hanzo/ui/input');
|
|
10
|
-
var scrollArea = require('@hanzo/ui/scroll-area');
|
|
11
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
|
|
13
|
-
function _interopNamespace(e) {
|
|
14
|
-
if (e && e.__esModule) return e;
|
|
15
|
-
var n = Object.create(null);
|
|
16
|
-
if (e) {
|
|
17
|
-
Object.keys(e).forEach(function (k) {
|
|
18
|
-
if (k !== 'default') {
|
|
19
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function () { return e[k]; }
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
n.default = e;
|
|
28
|
-
return Object.freeze(n);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
|
-
|
|
33
|
-
var __defProp = Object.defineProperty;
|
|
34
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
35
|
-
var codeExplorerVariants = classVarianceAuthority.cva(
|
|
36
|
-
"relative flex flex-col overflow-hidden rounded-lg border bg-background",
|
|
37
|
-
{
|
|
38
|
-
variants: {
|
|
39
|
-
size: {
|
|
40
|
-
sm: "text-xs",
|
|
41
|
-
default: "text-sm",
|
|
42
|
-
lg: "text-base"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
defaultVariants: {
|
|
46
|
-
size: "default"
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
var getFileIcon = /* @__PURE__ */ __name((fileName, isFolder = false) => {
|
|
51
|
-
if (isFolder) return lucideReact.Folder;
|
|
52
|
-
const ext = fileName.split(".").pop()?.toLowerCase();
|
|
53
|
-
switch (ext) {
|
|
54
|
-
case "js":
|
|
55
|
-
case "jsx":
|
|
56
|
-
case "ts":
|
|
57
|
-
case "tsx":
|
|
58
|
-
case "vue":
|
|
59
|
-
case "svelte":
|
|
60
|
-
return lucideReact.FileCode;
|
|
61
|
-
case "json":
|
|
62
|
-
case "xml":
|
|
63
|
-
case "yaml":
|
|
64
|
-
case "yml":
|
|
65
|
-
case "toml":
|
|
66
|
-
case "ini":
|
|
67
|
-
return lucideReact.FileText;
|
|
68
|
-
case "png":
|
|
69
|
-
case "jpg":
|
|
70
|
-
case "jpeg":
|
|
71
|
-
case "gif":
|
|
72
|
-
case "svg":
|
|
73
|
-
case "webp":
|
|
74
|
-
case "ico":
|
|
75
|
-
return lucideReact.FileImage;
|
|
76
|
-
default:
|
|
77
|
-
return lucideReact.File;
|
|
78
|
-
}
|
|
79
|
-
}, "getFileIcon");
|
|
80
|
-
var formatFileSize = /* @__PURE__ */ __name((bytes) => {
|
|
81
|
-
if (!bytes) return "";
|
|
82
|
-
const units = ["B", "KB", "MB", "GB"];
|
|
83
|
-
let size = bytes;
|
|
84
|
-
let unitIndex = 0;
|
|
85
|
-
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
86
|
-
size /= 1024;
|
|
87
|
-
unitIndex++;
|
|
88
|
-
}
|
|
89
|
-
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
|
90
|
-
}, "formatFileSize");
|
|
91
|
-
var formatModifiedDate = /* @__PURE__ */ __name((date) => {
|
|
92
|
-
if (!date) return "";
|
|
93
|
-
const now = /* @__PURE__ */ new Date();
|
|
94
|
-
const diff = now.getTime() - date.getTime();
|
|
95
|
-
const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
|
|
96
|
-
if (days === 0) return "Today";
|
|
97
|
-
if (days === 1) return "Yesterday";
|
|
98
|
-
if (days < 7) return `${days} days ago`;
|
|
99
|
-
if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
|
|
100
|
-
if (days < 365) return `${Math.floor(days / 30)} months ago`;
|
|
101
|
-
return `${Math.floor(days / 365)} years ago`;
|
|
102
|
-
}, "formatModifiedDate");
|
|
103
|
-
var CodeExplorer = React__namespace.forwardRef(
|
|
104
|
-
({
|
|
105
|
-
className,
|
|
106
|
-
size,
|
|
107
|
-
files,
|
|
108
|
-
onFileSelect,
|
|
109
|
-
onFolderToggle,
|
|
110
|
-
selectedFile,
|
|
111
|
-
showSearch = true,
|
|
112
|
-
showFileIcons = true,
|
|
113
|
-
showFileSize = false,
|
|
114
|
-
showModifiedDate = false,
|
|
115
|
-
height = "400px",
|
|
116
|
-
defaultExpanded = [],
|
|
117
|
-
searchPlaceholder = "Search files...",
|
|
118
|
-
emptyMessage = "No files found",
|
|
119
|
-
...props
|
|
120
|
-
}, ref) => {
|
|
121
|
-
const [searchTerm, setSearchTerm] = React__namespace.useState("");
|
|
122
|
-
const [expandedFolders, setExpandedFolders] = React__namespace.useState(
|
|
123
|
-
new Set(defaultExpanded)
|
|
124
|
-
);
|
|
125
|
-
const buildFileTree = React__namespace.useCallback(
|
|
126
|
-
(nodes) => {
|
|
127
|
-
return nodes.map((node) => ({
|
|
128
|
-
...node,
|
|
129
|
-
isExpanded: expandedFolders.has(node.id),
|
|
130
|
-
children: node.children ? buildFileTree(node.children) : void 0
|
|
131
|
-
}));
|
|
132
|
-
},
|
|
133
|
-
[expandedFolders]
|
|
134
|
-
);
|
|
135
|
-
const filterFiles = React__namespace.useCallback(
|
|
136
|
-
(nodes, term) => {
|
|
137
|
-
if (!term) return nodes;
|
|
138
|
-
const filtered = [];
|
|
139
|
-
for (const node of nodes) {
|
|
140
|
-
if (node.name.toLowerCase().includes(term.toLowerCase())) {
|
|
141
|
-
filtered.push(node);
|
|
142
|
-
} else if (node.type === "folder" && node.children) {
|
|
143
|
-
const filteredChildren = filterFiles(node.children, term);
|
|
144
|
-
if (filteredChildren.length > 0) {
|
|
145
|
-
filtered.push({
|
|
146
|
-
...node,
|
|
147
|
-
children: filteredChildren,
|
|
148
|
-
isExpanded: true
|
|
149
|
-
// Auto-expand folders with matches
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
return filtered;
|
|
155
|
-
},
|
|
156
|
-
[]
|
|
157
|
-
);
|
|
158
|
-
const processedFiles = React__namespace.useMemo(() => {
|
|
159
|
-
const withExpansion = buildFileTree(files);
|
|
160
|
-
return searchTerm ? filterFiles(withExpansion, searchTerm) : withExpansion;
|
|
161
|
-
}, [files, searchTerm, buildFileTree, filterFiles]);
|
|
162
|
-
const toggleFolder = React__namespace.useCallback(
|
|
163
|
-
(folder) => {
|
|
164
|
-
setExpandedFolders((prev) => {
|
|
165
|
-
const newSet = new Set(prev);
|
|
166
|
-
if (newSet.has(folder.id)) {
|
|
167
|
-
newSet.delete(folder.id);
|
|
168
|
-
} else {
|
|
169
|
-
newSet.add(folder.id);
|
|
170
|
-
}
|
|
171
|
-
return newSet;
|
|
172
|
-
});
|
|
173
|
-
onFolderToggle?.(folder);
|
|
174
|
-
},
|
|
175
|
-
[onFolderToggle]
|
|
176
|
-
);
|
|
177
|
-
const renderFileNode = React__namespace.useCallback(
|
|
178
|
-
(node, depth = 0) => {
|
|
179
|
-
const Icon = showFileIcons ? getFileIcon(node.name, node.type === "folder") : null;
|
|
180
|
-
const FolderIcon = node.type === "folder" && node.isExpanded ? lucideReact.FolderOpen : lucideReact.Folder;
|
|
181
|
-
const isSelected = selectedFile === node.id || selectedFile === node.path;
|
|
182
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
183
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
184
|
-
"div",
|
|
185
|
-
{
|
|
186
|
-
className: utils.cn(
|
|
187
|
-
"flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",
|
|
188
|
-
isSelected && "bg-muted",
|
|
189
|
-
"rounded-sm"
|
|
190
|
-
),
|
|
191
|
-
style: { paddingLeft: `${depth * 16 + 8}px` },
|
|
192
|
-
onClick: () => {
|
|
193
|
-
if (node.type === "folder") {
|
|
194
|
-
toggleFolder(node);
|
|
195
|
-
} else {
|
|
196
|
-
onFileSelect?.(node);
|
|
197
|
-
}
|
|
198
|
-
},
|
|
199
|
-
children: [
|
|
200
|
-
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" }) }),
|
|
201
|
-
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 }),
|
|
202
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: node.name }),
|
|
203
|
-
showFileSize && node.type === "file" && node.size && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatFileSize(node.size) }),
|
|
204
|
-
showModifiedDate && node.modified && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatModifiedDate(node.modified) })
|
|
205
|
-
]
|
|
206
|
-
}
|
|
207
|
-
),
|
|
208
|
-
node.type === "folder" && node.isExpanded && node.children && /* @__PURE__ */ jsxRuntime.jsx("div", { children: node.children.map((child) => renderFileNode(child, depth + 1)) })
|
|
209
|
-
] }, node.id);
|
|
210
|
-
},
|
|
211
|
-
[
|
|
212
|
-
showFileIcons,
|
|
213
|
-
showFileSize,
|
|
214
|
-
showModifiedDate,
|
|
215
|
-
selectedFile,
|
|
216
|
-
toggleFolder,
|
|
217
|
-
onFileSelect
|
|
218
|
-
]
|
|
219
|
-
);
|
|
220
|
-
const clearSearch = /* @__PURE__ */ __name(() => {
|
|
221
|
-
setSearchTerm("");
|
|
222
|
-
}, "clearSearch");
|
|
223
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
224
|
-
"div",
|
|
225
|
-
{
|
|
226
|
-
ref,
|
|
227
|
-
className: utils.cn(codeExplorerVariants({ size }), className),
|
|
228
|
-
style: { height },
|
|
229
|
-
...props,
|
|
230
|
-
children: [
|
|
231
|
-
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: [
|
|
232
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
|
|
233
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
234
|
-
input.Input,
|
|
235
|
-
{
|
|
236
|
-
value: searchTerm,
|
|
237
|
-
onChange: (e) => setSearchTerm(e.target.value),
|
|
238
|
-
placeholder: searchPlaceholder,
|
|
239
|
-
className: "pl-8 pr-8 h-8"
|
|
240
|
-
}
|
|
241
|
-
),
|
|
242
|
-
searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
|
|
243
|
-
button.Button,
|
|
244
|
-
{
|
|
245
|
-
variant: "ghost",
|
|
246
|
-
size: "sm",
|
|
247
|
-
onClick: clearSearch,
|
|
248
|
-
className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
|
|
249
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
|
|
250
|
-
}
|
|
251
|
-
)
|
|
252
|
-
] }) }),
|
|
253
|
-
/* @__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)) }) }) }),
|
|
254
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t px-4 py-2 text-xs text-muted-foreground", children: [
|
|
255
|
-
(() => {
|
|
256
|
-
const countFiles = /* @__PURE__ */ __name((nodes) => {
|
|
257
|
-
let files2 = 0;
|
|
258
|
-
let folders = 0;
|
|
259
|
-
for (const node of nodes) {
|
|
260
|
-
if (node.type === "file") {
|
|
261
|
-
files2++;
|
|
262
|
-
} else {
|
|
263
|
-
folders++;
|
|
264
|
-
if (node.children) {
|
|
265
|
-
const childCounts = countFiles(node.children);
|
|
266
|
-
files2 += childCounts.files;
|
|
267
|
-
folders += childCounts.folders;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
return { files: files2, folders };
|
|
272
|
-
}, "countFiles");
|
|
273
|
-
const { files: fileCount, folders: folderCount } = countFiles(processedFiles);
|
|
274
|
-
const parts = [];
|
|
275
|
-
if (fileCount > 0)
|
|
276
|
-
parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"}`);
|
|
277
|
-
if (folderCount > 0)
|
|
278
|
-
parts.push(`${folderCount} folder${folderCount === 1 ? "" : "s"}`);
|
|
279
|
-
return parts.join(", ") || "Empty";
|
|
280
|
-
})(),
|
|
281
|
-
searchTerm && /* @__PURE__ */ jsxRuntime.jsx("span", { children: " (filtered)" })
|
|
282
|
-
] })
|
|
283
|
-
]
|
|
284
|
-
}
|
|
285
|
-
);
|
|
286
|
-
}
|
|
287
|
-
);
|
|
288
|
-
CodeExplorer.displayName = "CodeExplorer";
|
|
289
|
-
|
|
290
|
-
exports.CodeExplorer = CodeExplorer;
|
|
291
|
-
exports.codeExplorerVariants = codeExplorerVariants;
|
|
2
|
+
'use strict';var l=require('react'),classVarianceAuthority=require('class-variance-authority'),lucideReact=require('lucide-react'),utils=require('@hanzo/ui/lib/utils'),button=require('@hanzo/ui/button'),input=require('@hanzo/ui/input'),scrollArea=require('@hanzo/ui/scroll-area'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var l__namespace=/*#__PURE__*/_interopNamespace(l);var H=Object.defineProperty;var p=(o,n)=>H(o,"name",{value:n,configurable:true});var te=classVarianceAuthority.cva("relative flex flex-col overflow-hidden rounded-lg border bg-background",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),re=p((o,n=false)=>{if(n)return lucideReact.Folder;switch(o.split(".").pop()?.toLowerCase()){case "js":case "jsx":case "ts":case "tsx":case "vue":case "svelte":return lucideReact.FileCode;case "json":case "xml":case "yaml":case "yml":case "toml":case "ini":return lucideReact.FileText;case "png":case "jpg":case "jpeg":case "gif":case "svg":case "webp":case "ico":return lucideReact.FileImage;default:return lucideReact.File}},"getFileIcon"),se=p(o=>{if(!o)return "";let n=["B","KB","MB","GB"],c=o,s=0;for(;c>=1024&&s<n.length-1;)c/=1024,s++;return `${c.toFixed(1)} ${n[s]}`},"formatFileSize"),ae=p(o=>{if(!o)return "";let c=new Date().getTime()-o.getTime(),s=Math.floor(c/(1e3*60*60*24));return s===0?"Today":s===1?"Yesterday":s<7?`${s} days ago`:s<30?`${Math.floor(s/7)} weeks ago`:s<365?`${Math.floor(s/30)} months ago`:`${Math.floor(s/365)} years ago`},"formatModifiedDate"),ie=l__namespace.forwardRef(({className:o,size:n,files:c,onFileSelect:s,onFolderToggle:F,selectedFile:h,showSearch:j=true,showFileIcons:x=true,showFileSize:w=false,showModifiedDate:T=false,height:z="400px",defaultExpanded:D=[],searchPlaceholder:L="Search files...",emptyMessage:B="No files found",...I},P)=>{let[d,C]=l__namespace.useState(""),[E,V]=l__namespace.useState(new Set(D)),g=l__namespace.useCallback(e=>e.map(r=>({...r,isExpanded:E.has(r.id),children:r.children?g(r.children):void 0})),[E]),v=l__namespace.useCallback((e,r)=>{if(!r)return e;let a=[];for(let i of e)if(i.name.toLowerCase().includes(r.toLowerCase()))a.push(i);else if(i.type==="folder"&&i.children){let f=v(i.children,r);f.length>0&&a.push({...i,children:f,isExpanded:true});}return a},[]),N=l__namespace.useMemo(()=>{let e=g(c);return d?v(e,d):e},[c,d,g,v]),S=l__namespace.useCallback(e=>{V(r=>{let a=new Set(r);return a.has(e.id)?a.delete(e.id):a.add(e.id),a}),F?.(e);},[F]),k=l__namespace.useCallback((e,r=0)=>{let a=x?re(e.name,e.type==="folder"):null,i=e.type==="folder"&&e.isExpanded?lucideReact.FolderOpen:lucideReact.Folder,f=h===e.id||h===e.path;return jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{className:utils.cn("flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",f&&"bg-muted","rounded-sm"),style:{paddingLeft:`${r*16+8}px`},onClick:()=>{e.type==="folder"?S(e):s?.(e);},children:[e.type==="folder"&&jsxRuntime.jsx("div",{className:"w-4 h-4 flex items-center justify-center",children:e.isExpanded?jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-3 w-3"}):jsxRuntime.jsx(lucideReact.ChevronRight,{className:"h-3 w-3"})}),x&&jsxRuntime.jsx("div",{className:"w-4 h-4 flex items-center justify-center flex-shrink-0",children:e.type==="folder"?jsxRuntime.jsx(i,{className:"h-4 w-4 text-blue-500"}):a?jsxRuntime.jsx(a,{className:"h-4 w-4 text-muted-foreground"}):null}),jsxRuntime.jsx("span",{className:"flex-1 truncate",children:e.name}),w&&e.type==="file"&&e.size&&jsxRuntime.jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:se(e.size)}),T&&e.modified&&jsxRuntime.jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:ae(e.modified)})]}),e.type==="folder"&&e.isExpanded&&e.children&&jsxRuntime.jsx("div",{children:e.children.map(u=>k(u,r+1))})]},e.id)},[x,w,T,h,S,s]),A=p(()=>{C("");},"clearSearch");return jsxRuntime.jsxs("div",{ref:P,className:utils.cn(te({size:n}),o),style:{height:z},...I,children:[j&&jsxRuntime.jsx("div",{className:"flex items-center gap-2 border-b px-4 py-2",children:jsxRuntime.jsxs("div",{className:"relative flex-1",children:[jsxRuntime.jsx(lucideReact.Search,{className:"absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"}),jsxRuntime.jsx(input.Input,{value:d,onChange:e=>C(e.target.value),placeholder:L,className:"pl-8 pr-8 h-8"}),d&&jsxRuntime.jsx(button.Button,{variant:"ghost",size:"sm",onClick:A,className:"absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",children:jsxRuntime.jsx(lucideReact.X,{className:"h-3 w-3"})})]})}),jsxRuntime.jsx(scrollArea.ScrollArea,{className:"flex-1",children:jsxRuntime.jsx("div",{className:"p-2",children:N.length===0?jsxRuntime.jsx("div",{className:"flex items-center justify-center h-24 text-muted-foreground",children:d?`No files match "${d}"`:B}):jsxRuntime.jsx("div",{className:"space-y-0.5",children:N.map(e=>k(e,0))})})}),jsxRuntime.jsxs("div",{className:"border-t px-4 py-2 text-xs text-muted-foreground",children:[(()=>{let e=p(f=>{let u=0,y=0;for(let b of f)if(b.type==="file")u++;else if(y++,b.children){let R=e(b.children);u+=R.files,y+=R.folders;}return {files:u,folders:y}},"countFiles"),{files:r,folders:a}=e(N),i=[];return r>0&&i.push(`${r} file${r===1?"":"s"}`),a>0&&i.push(`${a} folder${a===1?"":"s"}`),i.join(", ")||"Empty"})(),d&&jsxRuntime.jsx("span",{children:" (filtered)"})]})]})});ie.displayName="CodeExplorer";exports.CodeExplorer=ie;exports.codeExplorerVariants=te;
|
package/dist/code/explorer.mjs
CHANGED
|
@@ -1,268 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
3
|
-
import { cva } from 'class-variance-authority';
|
|
4
|
-
import { FolderOpen, Folder, ChevronDown, ChevronRight, Search, X, File, FileImage, FileText, FileCode } from 'lucide-react';
|
|
5
|
-
import { cn } from '@hanzo/ui/lib/utils';
|
|
6
|
-
import { Button } from '@hanzo/ui/button';
|
|
7
|
-
import { Input } from '@hanzo/ui/input';
|
|
8
|
-
import { ScrollArea } from '@hanzo/ui/scroll-area';
|
|
9
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
|
-
|
|
11
|
-
var __defProp = Object.defineProperty;
|
|
12
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
13
|
-
var codeExplorerVariants = cva(
|
|
14
|
-
"relative flex flex-col overflow-hidden rounded-lg border bg-background",
|
|
15
|
-
{
|
|
16
|
-
variants: {
|
|
17
|
-
size: {
|
|
18
|
-
sm: "text-xs",
|
|
19
|
-
default: "text-sm",
|
|
20
|
-
lg: "text-base"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: {
|
|
24
|
-
size: "default"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
var getFileIcon = /* @__PURE__ */ __name((fileName, isFolder = false) => {
|
|
29
|
-
if (isFolder) return Folder;
|
|
30
|
-
const ext = fileName.split(".").pop()?.toLowerCase();
|
|
31
|
-
switch (ext) {
|
|
32
|
-
case "js":
|
|
33
|
-
case "jsx":
|
|
34
|
-
case "ts":
|
|
35
|
-
case "tsx":
|
|
36
|
-
case "vue":
|
|
37
|
-
case "svelte":
|
|
38
|
-
return FileCode;
|
|
39
|
-
case "json":
|
|
40
|
-
case "xml":
|
|
41
|
-
case "yaml":
|
|
42
|
-
case "yml":
|
|
43
|
-
case "toml":
|
|
44
|
-
case "ini":
|
|
45
|
-
return FileText;
|
|
46
|
-
case "png":
|
|
47
|
-
case "jpg":
|
|
48
|
-
case "jpeg":
|
|
49
|
-
case "gif":
|
|
50
|
-
case "svg":
|
|
51
|
-
case "webp":
|
|
52
|
-
case "ico":
|
|
53
|
-
return FileImage;
|
|
54
|
-
default:
|
|
55
|
-
return File;
|
|
56
|
-
}
|
|
57
|
-
}, "getFileIcon");
|
|
58
|
-
var formatFileSize = /* @__PURE__ */ __name((bytes) => {
|
|
59
|
-
if (!bytes) return "";
|
|
60
|
-
const units = ["B", "KB", "MB", "GB"];
|
|
61
|
-
let size = bytes;
|
|
62
|
-
let unitIndex = 0;
|
|
63
|
-
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
64
|
-
size /= 1024;
|
|
65
|
-
unitIndex++;
|
|
66
|
-
}
|
|
67
|
-
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
|
68
|
-
}, "formatFileSize");
|
|
69
|
-
var formatModifiedDate = /* @__PURE__ */ __name((date) => {
|
|
70
|
-
if (!date) return "";
|
|
71
|
-
const now = /* @__PURE__ */ new Date();
|
|
72
|
-
const diff = now.getTime() - date.getTime();
|
|
73
|
-
const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
|
|
74
|
-
if (days === 0) return "Today";
|
|
75
|
-
if (days === 1) return "Yesterday";
|
|
76
|
-
if (days < 7) return `${days} days ago`;
|
|
77
|
-
if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
|
|
78
|
-
if (days < 365) return `${Math.floor(days / 30)} months ago`;
|
|
79
|
-
return `${Math.floor(days / 365)} years ago`;
|
|
80
|
-
}, "formatModifiedDate");
|
|
81
|
-
var CodeExplorer = React.forwardRef(
|
|
82
|
-
({
|
|
83
|
-
className,
|
|
84
|
-
size,
|
|
85
|
-
files,
|
|
86
|
-
onFileSelect,
|
|
87
|
-
onFolderToggle,
|
|
88
|
-
selectedFile,
|
|
89
|
-
showSearch = true,
|
|
90
|
-
showFileIcons = true,
|
|
91
|
-
showFileSize = false,
|
|
92
|
-
showModifiedDate = false,
|
|
93
|
-
height = "400px",
|
|
94
|
-
defaultExpanded = [],
|
|
95
|
-
searchPlaceholder = "Search files...",
|
|
96
|
-
emptyMessage = "No files found",
|
|
97
|
-
...props
|
|
98
|
-
}, ref) => {
|
|
99
|
-
const [searchTerm, setSearchTerm] = React.useState("");
|
|
100
|
-
const [expandedFolders, setExpandedFolders] = React.useState(
|
|
101
|
-
new Set(defaultExpanded)
|
|
102
|
-
);
|
|
103
|
-
const buildFileTree = React.useCallback(
|
|
104
|
-
(nodes) => {
|
|
105
|
-
return nodes.map((node) => ({
|
|
106
|
-
...node,
|
|
107
|
-
isExpanded: expandedFolders.has(node.id),
|
|
108
|
-
children: node.children ? buildFileTree(node.children) : void 0
|
|
109
|
-
}));
|
|
110
|
-
},
|
|
111
|
-
[expandedFolders]
|
|
112
|
-
);
|
|
113
|
-
const filterFiles = React.useCallback(
|
|
114
|
-
(nodes, term) => {
|
|
115
|
-
if (!term) return nodes;
|
|
116
|
-
const filtered = [];
|
|
117
|
-
for (const node of nodes) {
|
|
118
|
-
if (node.name.toLowerCase().includes(term.toLowerCase())) {
|
|
119
|
-
filtered.push(node);
|
|
120
|
-
} else if (node.type === "folder" && node.children) {
|
|
121
|
-
const filteredChildren = filterFiles(node.children, term);
|
|
122
|
-
if (filteredChildren.length > 0) {
|
|
123
|
-
filtered.push({
|
|
124
|
-
...node,
|
|
125
|
-
children: filteredChildren,
|
|
126
|
-
isExpanded: true
|
|
127
|
-
// Auto-expand folders with matches
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
return filtered;
|
|
133
|
-
},
|
|
134
|
-
[]
|
|
135
|
-
);
|
|
136
|
-
const processedFiles = React.useMemo(() => {
|
|
137
|
-
const withExpansion = buildFileTree(files);
|
|
138
|
-
return searchTerm ? filterFiles(withExpansion, searchTerm) : withExpansion;
|
|
139
|
-
}, [files, searchTerm, buildFileTree, filterFiles]);
|
|
140
|
-
const toggleFolder = React.useCallback(
|
|
141
|
-
(folder) => {
|
|
142
|
-
setExpandedFolders((prev) => {
|
|
143
|
-
const newSet = new Set(prev);
|
|
144
|
-
if (newSet.has(folder.id)) {
|
|
145
|
-
newSet.delete(folder.id);
|
|
146
|
-
} else {
|
|
147
|
-
newSet.add(folder.id);
|
|
148
|
-
}
|
|
149
|
-
return newSet;
|
|
150
|
-
});
|
|
151
|
-
onFolderToggle?.(folder);
|
|
152
|
-
},
|
|
153
|
-
[onFolderToggle]
|
|
154
|
-
);
|
|
155
|
-
const renderFileNode = React.useCallback(
|
|
156
|
-
(node, depth = 0) => {
|
|
157
|
-
const Icon = showFileIcons ? getFileIcon(node.name, node.type === "folder") : null;
|
|
158
|
-
const FolderIcon = node.type === "folder" && node.isExpanded ? FolderOpen : Folder;
|
|
159
|
-
const isSelected = selectedFile === node.id || selectedFile === node.path;
|
|
160
|
-
return /* @__PURE__ */ jsxs("div", { children: [
|
|
161
|
-
/* @__PURE__ */ jsxs(
|
|
162
|
-
"div",
|
|
163
|
-
{
|
|
164
|
-
className: cn(
|
|
165
|
-
"flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",
|
|
166
|
-
isSelected && "bg-muted",
|
|
167
|
-
"rounded-sm"
|
|
168
|
-
),
|
|
169
|
-
style: { paddingLeft: `${depth * 16 + 8}px` },
|
|
170
|
-
onClick: () => {
|
|
171
|
-
if (node.type === "folder") {
|
|
172
|
-
toggleFolder(node);
|
|
173
|
-
} else {
|
|
174
|
-
onFileSelect?.(node);
|
|
175
|
-
}
|
|
176
|
-
},
|
|
177
|
-
children: [
|
|
178
|
-
node.type === "folder" && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center", children: node.isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }) }),
|
|
179
|
-
showFileIcons && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center flex-shrink-0", children: node.type === "folder" ? /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 text-blue-500" }) : Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }) : null }),
|
|
180
|
-
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.name }),
|
|
181
|
-
showFileSize && node.type === "file" && node.size && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatFileSize(node.size) }),
|
|
182
|
-
showModifiedDate && node.modified && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: formatModifiedDate(node.modified) })
|
|
183
|
-
]
|
|
184
|
-
}
|
|
185
|
-
),
|
|
186
|
-
node.type === "folder" && node.isExpanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => renderFileNode(child, depth + 1)) })
|
|
187
|
-
] }, node.id);
|
|
188
|
-
},
|
|
189
|
-
[
|
|
190
|
-
showFileIcons,
|
|
191
|
-
showFileSize,
|
|
192
|
-
showModifiedDate,
|
|
193
|
-
selectedFile,
|
|
194
|
-
toggleFolder,
|
|
195
|
-
onFileSelect
|
|
196
|
-
]
|
|
197
|
-
);
|
|
198
|
-
const clearSearch = /* @__PURE__ */ __name(() => {
|
|
199
|
-
setSearchTerm("");
|
|
200
|
-
}, "clearSearch");
|
|
201
|
-
return /* @__PURE__ */ jsxs(
|
|
202
|
-
"div",
|
|
203
|
-
{
|
|
204
|
-
ref,
|
|
205
|
-
className: cn(codeExplorerVariants({ size }), className),
|
|
206
|
-
style: { height },
|
|
207
|
-
...props,
|
|
208
|
-
children: [
|
|
209
|
-
showSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
|
|
210
|
-
/* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
|
|
211
|
-
/* @__PURE__ */ jsx(
|
|
212
|
-
Input,
|
|
213
|
-
{
|
|
214
|
-
value: searchTerm,
|
|
215
|
-
onChange: (e) => setSearchTerm(e.target.value),
|
|
216
|
-
placeholder: searchPlaceholder,
|
|
217
|
-
className: "pl-8 pr-8 h-8"
|
|
218
|
-
}
|
|
219
|
-
),
|
|
220
|
-
searchTerm && /* @__PURE__ */ jsx(
|
|
221
|
-
Button,
|
|
222
|
-
{
|
|
223
|
-
variant: "ghost",
|
|
224
|
-
size: "sm",
|
|
225
|
-
onClick: clearSearch,
|
|
226
|
-
className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",
|
|
227
|
-
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
228
|
-
}
|
|
229
|
-
)
|
|
230
|
-
] }) }),
|
|
231
|
-
/* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: processedFiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-24 text-muted-foreground", children: searchTerm ? `No files match "${searchTerm}"` : emptyMessage }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: processedFiles.map((node) => renderFileNode(node, 0)) }) }) }),
|
|
232
|
-
/* @__PURE__ */ jsxs("div", { className: "border-t px-4 py-2 text-xs text-muted-foreground", children: [
|
|
233
|
-
(() => {
|
|
234
|
-
const countFiles = /* @__PURE__ */ __name((nodes) => {
|
|
235
|
-
let files2 = 0;
|
|
236
|
-
let folders = 0;
|
|
237
|
-
for (const node of nodes) {
|
|
238
|
-
if (node.type === "file") {
|
|
239
|
-
files2++;
|
|
240
|
-
} else {
|
|
241
|
-
folders++;
|
|
242
|
-
if (node.children) {
|
|
243
|
-
const childCounts = countFiles(node.children);
|
|
244
|
-
files2 += childCounts.files;
|
|
245
|
-
folders += childCounts.folders;
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
return { files: files2, folders };
|
|
250
|
-
}, "countFiles");
|
|
251
|
-
const { files: fileCount, folders: folderCount } = countFiles(processedFiles);
|
|
252
|
-
const parts = [];
|
|
253
|
-
if (fileCount > 0)
|
|
254
|
-
parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"}`);
|
|
255
|
-
if (folderCount > 0)
|
|
256
|
-
parts.push(`${folderCount} folder${folderCount === 1 ? "" : "s"}`);
|
|
257
|
-
return parts.join(", ") || "Empty";
|
|
258
|
-
})(),
|
|
259
|
-
searchTerm && /* @__PURE__ */ jsx("span", { children: " (filtered)" })
|
|
260
|
-
] })
|
|
261
|
-
]
|
|
262
|
-
}
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
);
|
|
266
|
-
CodeExplorer.displayName = "CodeExplorer";
|
|
267
|
-
|
|
268
|
-
export { CodeExplorer, codeExplorerVariants };
|
|
2
|
+
import*as l from'react';import {cva}from'class-variance-authority';import {FolderOpen,Folder,ChevronDown,ChevronRight,Search,X,File,FileImage,FileText,FileCode}from'lucide-react';import {cn}from'@hanzo/ui/lib/utils';import {Button}from'@hanzo/ui/button';import {Input}from'@hanzo/ui/input';import {ScrollArea}from'@hanzo/ui/scroll-area';import {jsxs,jsx}from'react/jsx-runtime';var H=Object.defineProperty;var p=(o,n)=>H(o,"name",{value:n,configurable:true});var te=cva("relative flex flex-col overflow-hidden rounded-lg border bg-background",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),re=p((o,n=false)=>{if(n)return Folder;switch(o.split(".").pop()?.toLowerCase()){case "js":case "jsx":case "ts":case "tsx":case "vue":case "svelte":return FileCode;case "json":case "xml":case "yaml":case "yml":case "toml":case "ini":return FileText;case "png":case "jpg":case "jpeg":case "gif":case "svg":case "webp":case "ico":return FileImage;default:return File}},"getFileIcon"),se=p(o=>{if(!o)return "";let n=["B","KB","MB","GB"],c=o,s=0;for(;c>=1024&&s<n.length-1;)c/=1024,s++;return `${c.toFixed(1)} ${n[s]}`},"formatFileSize"),ae=p(o=>{if(!o)return "";let c=new Date().getTime()-o.getTime(),s=Math.floor(c/(1e3*60*60*24));return s===0?"Today":s===1?"Yesterday":s<7?`${s} days ago`:s<30?`${Math.floor(s/7)} weeks ago`:s<365?`${Math.floor(s/30)} months ago`:`${Math.floor(s/365)} years ago`},"formatModifiedDate"),ie=l.forwardRef(({className:o,size:n,files:c,onFileSelect:s,onFolderToggle:F,selectedFile:h,showSearch:j=true,showFileIcons:x=true,showFileSize:w=false,showModifiedDate:T=false,height:z="400px",defaultExpanded:D=[],searchPlaceholder:L="Search files...",emptyMessage:B="No files found",...I},P)=>{let[d,C]=l.useState(""),[E,V]=l.useState(new Set(D)),g=l.useCallback(e=>e.map(r=>({...r,isExpanded:E.has(r.id),children:r.children?g(r.children):void 0})),[E]),v=l.useCallback((e,r)=>{if(!r)return e;let a=[];for(let i of e)if(i.name.toLowerCase().includes(r.toLowerCase()))a.push(i);else if(i.type==="folder"&&i.children){let f=v(i.children,r);f.length>0&&a.push({...i,children:f,isExpanded:true});}return a},[]),N=l.useMemo(()=>{let e=g(c);return d?v(e,d):e},[c,d,g,v]),S=l.useCallback(e=>{V(r=>{let a=new Set(r);return a.has(e.id)?a.delete(e.id):a.add(e.id),a}),F?.(e);},[F]),k=l.useCallback((e,r=0)=>{let a=x?re(e.name,e.type==="folder"):null,i=e.type==="folder"&&e.isExpanded?FolderOpen:Folder,f=h===e.id||h===e.path;return jsxs("div",{children:[jsxs("div",{className:cn("flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",f&&"bg-muted","rounded-sm"),style:{paddingLeft:`${r*16+8}px`},onClick:()=>{e.type==="folder"?S(e):s?.(e);},children:[e.type==="folder"&&jsx("div",{className:"w-4 h-4 flex items-center justify-center",children:e.isExpanded?jsx(ChevronDown,{className:"h-3 w-3"}):jsx(ChevronRight,{className:"h-3 w-3"})}),x&&jsx("div",{className:"w-4 h-4 flex items-center justify-center flex-shrink-0",children:e.type==="folder"?jsx(i,{className:"h-4 w-4 text-blue-500"}):a?jsx(a,{className:"h-4 w-4 text-muted-foreground"}):null}),jsx("span",{className:"flex-1 truncate",children:e.name}),w&&e.type==="file"&&e.size&&jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:se(e.size)}),T&&e.modified&&jsx("span",{className:"text-xs text-muted-foreground flex-shrink-0",children:ae(e.modified)})]}),e.type==="folder"&&e.isExpanded&&e.children&&jsx("div",{children:e.children.map(u=>k(u,r+1))})]},e.id)},[x,w,T,h,S,s]),A=p(()=>{C("");},"clearSearch");return jsxs("div",{ref:P,className:cn(te({size:n}),o),style:{height:z},...I,children:[j&&jsx("div",{className:"flex items-center gap-2 border-b px-4 py-2",children:jsxs("div",{className:"relative flex-1",children:[jsx(Search,{className:"absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"}),jsx(Input,{value:d,onChange:e=>C(e.target.value),placeholder:L,className:"pl-8 pr-8 h-8"}),d&&jsx(Button,{variant:"ghost",size:"sm",onClick:A,className:"absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",children:jsx(X,{className:"h-3 w-3"})})]})}),jsx(ScrollArea,{className:"flex-1",children:jsx("div",{className:"p-2",children:N.length===0?jsx("div",{className:"flex items-center justify-center h-24 text-muted-foreground",children:d?`No files match "${d}"`:B}):jsx("div",{className:"space-y-0.5",children:N.map(e=>k(e,0))})})}),jsxs("div",{className:"border-t px-4 py-2 text-xs text-muted-foreground",children:[(()=>{let e=p(f=>{let u=0,y=0;for(let b of f)if(b.type==="file")u++;else if(y++,b.children){let R=e(b.children);u+=R.files,y+=R.folders;}return {files:u,folders:y}},"countFiles"),{files:r,folders:a}=e(N),i=[];return r>0&&i.push(`${r} file${r===1?"":"s"}`),a>0&&i.push(`${a} folder${a===1?"":"s"}`),i.join(", ")||"Empty"})(),d&&jsx("span",{children:" (filtered)"})]})]})});ie.displayName="CodeExplorer";export{ie as CodeExplorer,te as codeExplorerVariants};
|