@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/widgets/FileExplorer.js

@@ -1,520 +1,632 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { memo, useState, useMemo, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { AstroIcon } from "../display/AstroIcon.js";
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/FileExplorer.tsx
+/**
+* @zendir/ui - FileExplorer Component
+*
+* Hierarchical file browser for mission data management and file operations.
+* Supports tree navigation, file actions (download, delete, upload),
+* search, breadcrumbs, and multiple selection.
+*
+* Features:
+* - Tree view and list view modes
+* - Breadcrumb navigation
+* - File type icons
+* - Search/filter
+* - Multi-select with checkboxes
+* - File actions (open, download, delete, rename)
+* - Upload dropzone
+* - File size and modified date display
+* - Sort by name, size, date
+*
+* @example
+* ```tsx
+* <FileExplorer
+*   files={fileTree}
+*   onFileOpen={(file) => console.log('Open:', file)}
+*   onFileDownload={(file) => console.log('Download:', file)}
+* />
+* ```
+*/
 function formatFileSize(bytes) {
-  if (bytes === void 0 || bytes === null) return "—";
-  if (bytes === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+	if (bytes === void 0 || bytes === null) return "—";
+	if (bytes === 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
 }
 function formatDate(date) {
-  if (!date) return "—";
-  const d = typeof date === "string" ? new Date(date) : date;
-  if (isNaN(d.getTime())) return String(date);
-  return d.toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" }) + " " + d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" });
+	if (!date) return "—";
+	const d = typeof date === "string" ? new Date(date) : date;
+	if (isNaN(d.getTime())) return String(date);
+	return d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "2-digit",
+		year: "numeric"
+	}) + " " + d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit"
+	});
 }
 function getFileIconName(file) {
-  var _a;
-  if (file.isDirectory) return "folder";
-  const ext = ((_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) ?? "";
-  const iconMap = {
-    rb: "code",
-    py: "code",
-    js: "code",
-    ts: "code",
-    jsx: "code",
-    tsx: "code",
-    json: "insert-drive-file",
-    yaml: "insert-drive-file",
-    yml: "insert-drive-file",
-    xml: "insert-drive-file",
-    csv: "table-chart",
-    txt: "short-text",
-    md: "description",
-    log: "insert-drive-file",
-    gz: "archive",
-    zip: "archive",
-    tar: "archive",
-    bin: "storage",
-    dat: "storage",
-    png: "image",
-    jpg: "image",
-    gif: "image",
-    svg: "image",
-    pdf: "picture-as-pdf",
-    doc: "insert-drive-file",
-    xls: "table-chart",
-    ppt: "insert-drive-file"
-  };
-  return iconMap[ext] || "insert-drive-file";
+	if (file.isDirectory) return "folder";
+	return {
+		rb: "code",
+		py: "code",
+		js: "code",
+		ts: "code",
+		jsx: "code",
+		tsx: "code",
+		json: "insert-drive-file",
+		yaml: "insert-drive-file",
+		yml: "insert-drive-file",
+		xml: "insert-drive-file",
+		csv: "table-chart",
+		txt: "short-text",
+		md: "description",
+		log: "insert-drive-file",
+		gz: "archive",
+		zip: "archive",
+		tar: "archive",
+		bin: "storage",
+		dat: "storage",
+		png: "image",
+		jpg: "image",
+		gif: "image",
+		svg: "image",
+		pdf: "picture-as-pdf",
+		doc: "insert-drive-file",
+		xls: "table-chart",
+		ppt: "insert-drive-file"
+	}[file.name.split(".").pop()?.toLowerCase() ?? ""] || "insert-drive-file";
 }
 function flattenVisible(files, expanded, depth = 0) {
-  const result = [];
-  for (const f of files) {
-    result.push({ file: f, depth });
-    if (f.isDirectory && expanded.has(f.path) && f.children) {
-      result.push(...flattenVisible(f.children, expanded, depth + 1));
-    }
-  }
-  return result;
+	const result = [];
+	for (const f of files) {
+		result.push({
+			file: f,
+			depth
+		});
+		if (f.isDirectory && expanded.has(f.path) && f.children) result.push(...flattenVisible(f.children, expanded, depth + 1));
+	}
+	return result;
 }
 function filterFiles(files, query) {
-  const q = query.toLowerCase();
-  return files.reduce((acc, f) => {
-    if (f.isDirectory && f.children) {
-      const filteredChildren = filterFiles(f.children, query);
-      if (filteredChildren.length > 0 || f.name.toLowerCase().includes(q)) {
-        acc.push({ ...f, children: filteredChildren });
-      }
-    } else if (f.name.toLowerCase().includes(q)) {
-      acc.push(f);
-    }
-    return acc;
-  }, []);
+	const q = query.toLowerCase();
+	return files.reduce((acc, f) => {
+		if (f.isDirectory && f.children) {
+			const filteredChildren = filterFiles(f.children, query);
+			if (filteredChildren.length > 0 || f.name.toLowerCase().includes(q)) acc.push({
+				...f,
+				children: filteredChildren
+			});
+		} else if (f.name.toLowerCase().includes(q)) acc.push(f);
+		return acc;
+	}, []);
 }
 function sortFiles(files, sortBy, sortDir) {
-  const sorted = [...files].sort((a, b) => {
-    if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
-    let cmp = 0;
-    if (sortBy === "name") cmp = a.name.localeCompare(b.name);
-    else if (sortBy === "size") cmp = (a.size ?? 0) - (b.size ?? 0);
-    else if (sortBy === "modified") {
-      const da = a.modified ? new Date(a.modified).getTime() : 0;
-      const db = b.modified ? new Date(b.modified).getTime() : 0;
-      cmp = da - db;
-    }
-    return sortDir === "asc" ? cmp : -cmp;
-  });
-  return sorted.map(
-    (f) => f.isDirectory && f.children ? { ...f, children: sortFiles(f.children, sortBy, sortDir) } : f
-  );
+	return [...files].sort((a, b) => {
+		if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+		let cmp = 0;
+		if (sortBy === "name") cmp = a.name.localeCompare(b.name);
+		else if (sortBy === "size") cmp = (a.size ?? 0) - (b.size ?? 0);
+		else if (sortBy === "modified") cmp = (a.modified ? new Date(a.modified).getTime() : 0) - (b.modified ? new Date(b.modified).getTime() : 0);
+		return sortDir === "asc" ? cmp : -cmp;
+	}).map((f) => f.isDirectory && f.children ? {
+		...f,
+		children: sortFiles(f.children, sortBy, sortDir)
+	} : f);
 }
-const FileExplorer = memo(function FileExplorer2({
-  files,
-  height = 500,
-  title,
-  viewMode: initialViewMode = "list",
-  showSearch = true,
-  showBreadcrumbs = true,
-  showDetails = true,
-  multiSelect = false,
-  allowUpload = false,
-  allowDelete = false,
-  onFileOpen,
-  onFileDownload: _onFileDownload,
-  onFileDelete,
-  onFileUpload,
-  onSelectionChange: _onSelectionChange,
-  className = "",
-  bordered = true,
-  style: styleProp
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
-  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
-  const [currentPath, setCurrentPath] = useState([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortBy, setSortBy] = useState("name");
-  const [sortDir, setSortDir] = useState("asc");
-  const [isDragging, setIsDragging] = useState(false);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(240);
-  const listRef = React.useRef(null);
-  const processedFiles = useMemo(() => {
-    let result = files;
-    if (searchQuery.trim()) result = filterFiles(result, searchQuery);
-    return sortFiles(result, sortBy, sortDir);
-  }, [files, searchQuery, sortBy, sortDir]);
-  const currentFiles = useMemo(() => {
-    let current = processedFiles;
-    for (const dir of currentPath) {
-      const found = current.find((f) => f.isDirectory && f.name === dir);
-      if (found && found.children) current = found.children;
-      else break;
-    }
-    return current;
-  }, [processedFiles, currentPath]);
-  const visibleItems = useMemo(() => {
-    if (initialViewMode === "tree") return flattenVisible(processedFiles, expanded);
-    return currentFiles.map((f) => ({ file: f, depth: 0 }));
-  }, [processedFiles, expanded, currentFiles, initialViewMode]);
-  const toggleExpand = useCallback((path) => {
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) next.delete(path);
-      else next.add(path);
-      return next;
-    });
-  }, []);
-  const toggleSelect = useCallback((path) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) next.delete(path);
-      else {
-        if (!multiSelect) next.clear();
-        next.add(path);
-      }
-      return next;
-    });
-  }, [multiSelect]);
-  const handleFileClick = useCallback((file) => {
-    if (file.isDirectory) {
-      if (initialViewMode === "list") {
-        setCurrentPath((prev) => [...prev, file.name]);
-      } else {
-        toggleExpand(file.path);
-      }
-    } else {
-      toggleSelect(file.path);
-    }
-  }, [initialViewMode, toggleExpand, toggleSelect]);
-  const handleFileDoubleClick = useCallback((file) => {
-    if (!file.isDirectory) onFileOpen == null ? void 0 : onFileOpen(file);
-  }, [onFileOpen]);
-  const navigateTo = useCallback((idx) => {
-    setCurrentPath((prev) => prev.slice(0, idx));
-  }, []);
-  const handleDrop = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (!allowUpload || !onFileUpload) return;
-    const droppedFiles = Array.from(e.dataTransfer.files);
-    if (droppedFiles.length > 0) {
-      onFileUpload(droppedFiles, "/" + currentPath.join("/"));
-    }
-  }, [allowUpload, onFileUpload, currentPath]);
-  const handleSort = useCallback((col) => {
-    if (sortBy === col) setSortDir((d) => d === "asc" ? "desc" : "asc");
-    else {
-      setSortBy(col);
-      setSortDir("asc");
-    }
-  }, [sortBy]);
-  const selectedFiles = useMemo(
-    () => visibleItems.filter((v) => selected.has(v.file.path)).map((v) => v.file),
-    [visibleItems, selected]
-  );
-  const rowHeightPx = Number.parseInt(String(tokens.elementSize.sm), 10) || 32;
-  const overscanRows = 12;
-  const totalRows = visibleItems.length;
-  const startRow = Math.max(0, Math.floor(scrollTop / rowHeightPx) - overscanRows);
-  const visibleRows = Math.ceil(viewportHeight / rowHeightPx) + overscanRows * 2;
-  const endRow = Math.min(totalRows, startRow + visibleRows);
-  const virtualVisibleItems = useMemo(
-    () => visibleItems.slice(startRow, endRow),
-    [visibleItems, startRow, endRow]
-  );
-  React.useEffect(() => {
-    const el = listRef.current;
-    if (!el) return void 0;
-    const updateHeight = () => setViewportHeight(Math.max(rowHeightPx * 4, el.clientHeight || 240));
-    updateHeight();
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(updateHeight);
-      observer.observe(el);
-      return () => observer.disconnect();
-    }
-    window.addEventListener("resize", updateHeight);
-    return () => window.removeEventListener("resize", updateHeight);
-  }, [rowHeightPx]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `file-explorer ${className}`,
-      style: {
-        height: typeof height === "number" ? height : void 0,
-        background: tokens.colors.background.base,
-        ...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: tokens.typography.fontFamily.primary,
-        color: tokens.colors.text.primary,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          backdropFilter: "blur(8px)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between"
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.medium, fontSize: tokens.typography.fontSize.sm }, children: title || "File Explorer" }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: tokens.spacing.sm }, children: [
-            allowUpload && /* @__PURE__ */ jsx("button", { "aria-label": "Upload files", style: {
-              background: tokens.colors.interactive.default,
-              color: tokens.colors.text.inverse,
-              border: "none",
-              borderRadius: tokens.borderRadius.md,
-              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-              fontSize: tokens.typography.fontSize.xxs,
-              cursor: "pointer",
-              fontWeight: tokens.typography.fontWeight.medium,
-              transition: "opacity 150ms ease"
-            }, children: "Upload" }),
-            allowDelete && selectedFiles.length > 0 && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onFileDelete == null ? void 0 : onFileDelete(selectedFiles),
-                "aria-label": `Delete ${selectedFiles.length} selected files`,
-                style: {
-                  background: `${tokens.colors.status.critical}22`,
-                  color: tokens.colors.status.critical,
-                  border: `1px solid ${tokens.colors.status.critical}44`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-                  fontSize: tokens.typography.fontSize.xxs,
-                  cursor: "pointer",
-                  fontWeight: tokens.typography.fontWeight.medium,
-                  transition: "opacity 150ms ease"
-                },
-                children: [
-                  "Delete (",
-                  selectedFiles.length,
-                  ")"
-                ]
-              }
-            )
-          ] })
-        ] }),
-        (showSearch || showBreadcrumbs) && /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          display: "flex",
-          alignItems: "center",
-          gap: tokens.spacing.sm,
-          background: tokens.colors.background.surface
-        }, children: [
-          showBreadcrumbs && initialViewMode === "list" && /* @__PURE__ */ jsxs("nav", { "aria-label": "File path", style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, fontSize: tokens.typography.fontSize.xs, flex: 1 }, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Navigate to root",
-                onClick: () => navigateTo(0),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") navigateTo(0);
-                },
-                style: { cursor: "pointer", color: tokens.colors.interactive.default, fontWeight: tokens.typography.fontWeight.medium },
-                children: "/"
-              }
-            ),
-            currentPath.map((dir, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: tokens.colors.text.muted }, children: "/" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": `Navigate to ${dir}`,
-                  onClick: () => navigateTo(idx + 1),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") navigateTo(idx + 1);
-                  },
-                  style: {
-                    cursor: "pointer",
-                    color: idx === currentPath.length - 1 ? tokens.colors.text.primary : tokens.colors.interactive.default,
-                    fontWeight: idx === currentPath.length - 1 ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal
-                  },
-                  children: dir
-                }
-              )
-            ] }, idx))
-          ] }),
-          showSearch && /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: searchQuery,
-              onChange: (e) => setSearchQuery(e.target.value),
-              placeholder: "Search files...",
-              "aria-label": "Search files",
-              style: {
-                background: tokens.colors.background.base,
-                color: tokens.colors.text.primary,
-                border: `1px solid ${tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-                fontSize: tokens.typography.fontSize.xs,
-                outline: "none",
-                minWidth: 150,
-                transition: "border-color 150ms ease"
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { role: "row", style: {
-          display: "grid",
-          gridTemplateColumns: showDetails ? "1fr auto auto" : "1fr",
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.muted,
-          fontWeight: tokens.typography.fontWeight.medium,
-          textTransform: "uppercase",
-          letterSpacing: "0.5px"
-        }, children: [
-          /* @__PURE__ */ jsxs("span", { role: "columnheader", tabIndex: 0, "aria-label": "Sort by name", onClick: () => handleSort("name"), onKeyDown: (e) => {
-            if (e.key === "Enter") handleSort("name");
-          }, style: { cursor: "pointer" }, children: [
-            "Name ",
-            sortBy === "name" && (sortDir === "asc" ? "▲" : "▼")
-          ] }),
-          showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("span", { role: "columnheader", tabIndex: 0, "aria-label": "Sort by size", onClick: () => handleSort("size"), onKeyDown: (e) => {
-              if (e.key === "Enter") handleSort("size");
-            }, style: { cursor: "pointer", minWidth: 70, textAlign: "right" }, children: [
-              "Size ",
-              sortBy === "size" && (sortDir === "asc" ? "▲" : "▼")
-            ] }),
-            /* @__PURE__ */ jsxs("span", { role: "columnheader", tabIndex: 0, "aria-label": "Sort by modified date", onClick: () => handleSort("modified"), onKeyDown: (e) => {
-              if (e.key === "Enter") handleSort("modified");
-            }, style: { cursor: "pointer", minWidth: 140, textAlign: "right" }, children: [
-              "Modified ",
-              sortBy === "modified" && (sortDir === "asc" ? "▲" : "▼")
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: listRef,
-            style: {
-              flex: 1,
-              overflow: "auto",
-              position: "relative",
-              border: isDragging ? `2px dashed ${tokens.colors.interactive.default}` : "2px solid transparent"
-            },
-            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-            onDragOver: allowUpload ? (e) => {
-              e.preventDefault();
-              setIsDragging(true);
-            } : void 0,
-            onDragLeave: allowUpload ? () => setIsDragging(false) : void 0,
-            onDrop: allowUpload ? handleDrop : void 0,
-            children: [
-              isDragging && /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                inset: 0,
-                background: `${tokens.colors.interactive.default}11`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: tokens.typography.fontSize.sm,
-                color: tokens.colors.interactive.default,
-                fontWeight: tokens.typography.fontWeight.medium,
-                zIndex: 10
-              }, children: "Drop files to upload" }),
-              visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                height: "100%",
-                color: tokens.colors.text.muted,
-                fontSize: tokens.typography.fontSize.sm
-              }, children: searchQuery ? "No matching files" : "Empty directory" }) : /* @__PURE__ */ jsx("div", { style: { height: totalRows * rowHeightPx, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: startRow * rowHeightPx, left: 0, right: 0 }, children: virtualVisibleItems.map(({ file, depth }) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "treeitem",
-                  tabIndex: 0,
-                  "aria-label": `${file.isDirectory ? "Folder" : "File"}: ${file.name}`,
-                  "aria-selected": selected.has(file.path),
-                  onClick: () => handleFileClick(file),
-                  onDoubleClick: () => handleFileDoubleClick(file),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") handleFileDoubleClick(file);
-                    if (e.key === " ") {
-                      e.preventDefault();
-                      handleFileClick(file);
-                    }
-                  },
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: showDetails ? "1fr auto auto" : "1fr",
-                    padding: `0 ${tokens.spacing.smd}`,
-                    paddingLeft: `calc(${tokens.spacing.smd} + ${depth * 20}px)`,
-                    height: tokens.elementSize.sm,
-                    alignItems: "center",
-                    borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                    cursor: "pointer",
-                    background: selected.has(file.path) ? `${tokens.colors.interactive.default}15` : "transparent",
-                    transition: "background 150ms ease"
-                  },
-                  onMouseEnter: (e) => {
-                    if (!selected.has(file.path)) e.currentTarget.style.background = tokens.colors.background.surface;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = selected.has(file.path) ? `${tokens.colors.interactive.default}15` : "transparent";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, overflow: "hidden" }, children: [
-                      multiSelect && /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: selected.has(file.path),
-                          onChange: () => toggleSelect(file.path),
-                          onClick: (e) => e.stopPropagation(),
-                          "aria-label": `Select ${file.name}`,
-                          style: { accentColor: tokens.colors.interactive.default }
-                        }
-                      ),
-                      initialViewMode === "tree" && file.isDirectory && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, width: 12, textAlign: "center" }, children: expanded.has(file.path) ? "▼" : "▶" }),
-                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", fontSize: tokens.typography.fontSize.sm }, children: /* @__PURE__ */ jsx(AstroIcon, { name: getFileIconName(file), size: "small", label: "", style: { fontSize: "inherit" } }) }),
-                      /* @__PURE__ */ jsx("span", { style: {
-                        fontSize: tokens.typography.fontSize.xs,
-                        fontWeight: file.isDirectory ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal,
-                        color: file.isDirectory ? tokens.colors.interactive.default : tokens.colors.text.primary,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap"
-                      }, children: file.name })
-                    ] }),
-                    showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.muted, textAlign: "right", minWidth: 70, fontFamily: tokens.typography.fontFamily.mono }, children: file.isDirectory ? "—" : formatFileSize(file.size) }),
-                      /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.muted, textAlign: "right", minWidth: 140, fontFamily: tokens.typography.fontFamily.mono }, children: formatDate(file.modified) })
-                    ] })
-                  ]
-                },
-                file.path
-              )) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.muted,
-          display: "flex",
-          justifyContent: "space-between"
-        }, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            visibleItems.length,
-            " items"
-          ] }),
-          selected.size > 0 && /* @__PURE__ */ jsxs("span", { children: [
-            selected.size,
-            " selected"
-          ] })
-        ] })
-      ]
-    }
-  );
+var FileExplorer = memo(function FileExplorer({ files, height = 500, title, viewMode: initialViewMode = "list", showSearch = true, showBreadcrumbs = true, showDetails = true, multiSelect = false, allowUpload = false, allowDelete = false, onFileOpen, onFileDownload: _onFileDownload, onFileDelete, onFileUpload, onSelectionChange: _onSelectionChange, className = "", bordered = true, style: styleProp }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+	const [currentPath, setCurrentPath] = useState([]);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [sortBy, setSortBy] = useState("name");
+	const [sortDir, setSortDir] = useState("asc");
+	const [isDragging, setIsDragging] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(240);
+	const listRef = React.useRef(null);
+	const processedFiles = useMemo(() => {
+		let result = files;
+		if (searchQuery.trim()) result = filterFiles(result, searchQuery);
+		return sortFiles(result, sortBy, sortDir);
+	}, [
+		files,
+		searchQuery,
+		sortBy,
+		sortDir
+	]);
+	const currentFiles = useMemo(() => {
+		let current = processedFiles;
+		for (const dir of currentPath) {
+			const found = current.find((f) => f.isDirectory && f.name === dir);
+			if (found && found.children) current = found.children;
+			else break;
+		}
+		return current;
+	}, [processedFiles, currentPath]);
+	const visibleItems = useMemo(() => {
+		if (initialViewMode === "tree") return flattenVisible(processedFiles, expanded);
+		return currentFiles.map((f) => ({
+			file: f,
+			depth: 0
+		}));
+	}, [
+		processedFiles,
+		expanded,
+		currentFiles,
+		initialViewMode
+	]);
+	const toggleExpand = useCallback((path) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(path)) next.delete(path);
+			else next.add(path);
+			return next;
+		});
+	}, []);
+	const toggleSelect = useCallback((path) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (next.has(path)) next.delete(path);
+			else {
+				if (!multiSelect) next.clear();
+				next.add(path);
+			}
+			return next;
+		});
+	}, [multiSelect]);
+	const handleFileClick = useCallback((file) => {
+		if (file.isDirectory) if (initialViewMode === "list") setCurrentPath((prev) => [...prev, file.name]);
+		else toggleExpand(file.path);
+		else toggleSelect(file.path);
+	}, [
+		initialViewMode,
+		toggleExpand,
+		toggleSelect
+	]);
+	const handleFileDoubleClick = useCallback((file) => {
+		if (!file.isDirectory) onFileOpen?.(file);
+	}, [onFileOpen]);
+	const navigateTo = useCallback((idx) => {
+		setCurrentPath((prev) => prev.slice(0, idx));
+	}, []);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(false);
+		if (!allowUpload || !onFileUpload) return;
+		const droppedFiles = Array.from(e.dataTransfer.files);
+		if (droppedFiles.length > 0) onFileUpload(droppedFiles, "/" + currentPath.join("/"));
+	}, [
+		allowUpload,
+		onFileUpload,
+		currentPath
+	]);
+	const handleSort = useCallback((col) => {
+		if (sortBy === col) setSortDir((d) => d === "asc" ? "desc" : "asc");
+		else {
+			setSortBy(col);
+			setSortDir("asc");
+		}
+	}, [sortBy]);
+	const selectedFiles = useMemo(() => visibleItems.filter((v) => selected.has(v.file.path)).map((v) => v.file), [visibleItems, selected]);
+	const rowHeightPx = Number.parseInt(String(tokens.elementSize.sm), 10) || 32;
+	const overscanRows = 12;
+	const totalRows = visibleItems.length;
+	const startRow = Math.max(0, Math.floor(scrollTop / rowHeightPx) - overscanRows);
+	const visibleRows = Math.ceil(viewportHeight / rowHeightPx) + overscanRows * 2;
+	const endRow = Math.min(totalRows, startRow + visibleRows);
+	const virtualVisibleItems = useMemo(() => visibleItems.slice(startRow, endRow), [
+		visibleItems,
+		startRow,
+		endRow
+	]);
+	React.useEffect(() => {
+		const el = listRef.current;
+		if (!el) return void 0;
+		const updateHeight = () => setViewportHeight(Math.max(rowHeightPx * 4, el.clientHeight || 240));
+		updateHeight();
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver(updateHeight);
+			observer.observe(el);
+			return () => observer.disconnect();
+		}
+		window.addEventListener("resize", updateHeight);
+		return () => window.removeEventListener("resize", updateHeight);
+	}, [rowHeightPx]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `file-explorer ${className}`,
+		style: {
+			height: typeof height === "number" ? height : void 0,
+			background: tokens.colors.background.base,
+			...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			...styleProp
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						fontWeight: tokens.typography.fontWeight.medium,
+						fontSize: tokens.typography.fontSize.sm
+					},
+					children: title || "File Explorer"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: tokens.spacing.sm
+					},
+					children: [allowUpload && /* @__PURE__ */ jsx("button", {
+						"aria-label": "Upload files",
+						style: {
+							background: tokens.colors.interactive.default,
+							color: tokens.colors.text.inverse,
+							border: "none",
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							cursor: "pointer",
+							fontWeight: tokens.typography.fontWeight.medium,
+							transition: "opacity 150ms ease"
+						},
+						children: "Upload"
+					}), allowDelete && selectedFiles.length > 0 && /* @__PURE__ */ jsxs("button", {
+						onClick: () => onFileDelete?.(selectedFiles),
+						"aria-label": `Delete ${selectedFiles.length} selected files`,
+						style: {
+							background: `${tokens.colors.status.critical}22`,
+							color: tokens.colors.status.critical,
+							border: `1px solid ${tokens.colors.status.critical}44`,
+							borderRadius: tokens.borderRadius.md,
+							padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+							fontSize: tokens.typography.fontSize.xxs,
+							cursor: "pointer",
+							fontWeight: tokens.typography.fontWeight.medium,
+							transition: "opacity 150ms ease"
+						},
+						children: [
+							"Delete (",
+							selectedFiles.length,
+							")"
+						]
+					})]
+				})]
+			}),
+			(showSearch || showBreadcrumbs) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					background: tokens.colors.background.surface
+				},
+				children: [showBreadcrumbs && initialViewMode === "list" && /* @__PURE__ */ jsxs("nav", {
+					"aria-label": "File path",
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.xs,
+						fontSize: tokens.typography.fontSize.xs,
+						flex: 1
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": "Navigate to root",
+						onClick: () => navigateTo(0),
+						onKeyDown: (e) => {
+							if (e.key === "Enter") navigateTo(0);
+						},
+						style: {
+							cursor: "pointer",
+							color: tokens.colors.interactive.default,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: "/"
+					}), currentPath.map((dir, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: { color: tokens.colors.text.muted },
+						children: "/"
+					}), /* @__PURE__ */ jsx("span", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": `Navigate to ${dir}`,
+						onClick: () => navigateTo(idx + 1),
+						onKeyDown: (e) => {
+							if (e.key === "Enter") navigateTo(idx + 1);
+						},
+						style: {
+							cursor: "pointer",
+							color: idx === currentPath.length - 1 ? tokens.colors.text.primary : tokens.colors.interactive.default,
+							fontWeight: idx === currentPath.length - 1 ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal
+						},
+						children: dir
+					})] }, idx))]
+				}), showSearch && /* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: searchQuery,
+					onChange: (e) => setSearchQuery(e.target.value),
+					placeholder: "Search files...",
+					"aria-label": "Search files",
+					style: {
+						background: tokens.colors.background.base,
+						color: tokens.colors.text.primary,
+						border: `1px solid ${tokens.colors.border.muted}`,
+						borderRadius: tokens.borderRadius.md,
+						padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+						fontSize: tokens.typography.fontSize.xs,
+						outline: "none",
+						minWidth: 150,
+						transition: "border-color 150ms ease"
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "row",
+				style: {
+					display: "grid",
+					gridTemplateColumns: showDetails ? "1fr auto auto" : "1fr",
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.muted,
+					fontWeight: tokens.typography.fontWeight.medium,
+					textTransform: "uppercase",
+					letterSpacing: "0.5px"
+				},
+				children: [/* @__PURE__ */ jsxs("span", {
+					role: "columnheader",
+					tabIndex: 0,
+					"aria-label": "Sort by name",
+					onClick: () => handleSort("name"),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") handleSort("name");
+					},
+					style: { cursor: "pointer" },
+					children: ["Name ", sortBy === "name" && (sortDir === "asc" ? "▲" : "▼")]
+				}), showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					role: "columnheader",
+					tabIndex: 0,
+					"aria-label": "Sort by size",
+					onClick: () => handleSort("size"),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") handleSort("size");
+					},
+					style: {
+						cursor: "pointer",
+						minWidth: 70,
+						textAlign: "right"
+					},
+					children: [
+						"Size",
+						" ",
+						sortBy === "size" && (sortDir === "asc" ? "▲" : "▼")
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					role: "columnheader",
+					tabIndex: 0,
+					"aria-label": "Sort by modified date",
+					onClick: () => handleSort("modified"),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") handleSort("modified");
+					},
+					style: {
+						cursor: "pointer",
+						minWidth: 140,
+						textAlign: "right"
+					},
+					children: [
+						"Modified",
+						" ",
+						sortBy === "modified" && (sortDir === "asc" ? "▲" : "▼")
+					]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: listRef,
+				style: {
+					flex: 1,
+					overflow: "auto",
+					position: "relative",
+					border: isDragging ? `2px dashed ${tokens.colors.interactive.default}` : "2px solid transparent"
+				},
+				onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+				onDragOver: allowUpload ? (e) => {
+					e.preventDefault();
+					setIsDragging(true);
+				} : void 0,
+				onDragLeave: allowUpload ? () => setIsDragging(false) : void 0,
+				onDrop: allowUpload ? handleDrop : void 0,
+				children: [isDragging && /* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						inset: 0,
+						background: `${tokens.colors.interactive.default}11`,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						fontSize: tokens.typography.fontSize.sm,
+						color: tokens.colors.interactive.default,
+						fontWeight: tokens.typography.fontWeight.medium,
+						zIndex: 10
+					},
+					children: "Drop files to upload"
+				}), visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						height: "100%",
+						color: tokens.colors.text.muted,
+						fontSize: tokens.typography.fontSize.sm
+					},
+					children: searchQuery ? "No matching files" : "Empty directory"
+				}) : /* @__PURE__ */ jsx("div", {
+					style: {
+						height: totalRows * rowHeightPx,
+						position: "relative"
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							top: startRow * rowHeightPx,
+							left: 0,
+							right: 0
+						},
+						children: virtualVisibleItems.map(({ file, depth }) => /* @__PURE__ */ jsxs("div", {
+							role: "treeitem",
+							tabIndex: 0,
+							"aria-label": `${file.isDirectory ? "Folder" : "File"}: ${file.name}`,
+							"aria-selected": selected.has(file.path),
+							onClick: () => handleFileClick(file),
+							onDoubleClick: () => handleFileDoubleClick(file),
+							onKeyDown: (e) => {
+								if (e.key === "Enter") handleFileDoubleClick(file);
+								if (e.key === " ") {
+									e.preventDefault();
+									handleFileClick(file);
+								}
+							},
+							style: {
+								display: "grid",
+								gridTemplateColumns: showDetails ? "1fr auto auto" : "1fr",
+								padding: `0 ${tokens.spacing.smd}`,
+								paddingLeft: `calc(${tokens.spacing.smd} + ${depth * 20}px)`,
+								height: tokens.elementSize.sm,
+								alignItems: "center",
+								borderBottom: `1px solid ${tokens.colors.border.muted}`,
+								cursor: "pointer",
+								background: selected.has(file.path) ? `${tokens.colors.interactive.default}15` : "transparent",
+								transition: "background 150ms ease"
+							},
+							onMouseEnter: (e) => {
+								if (!selected.has(file.path)) e.currentTarget.style.background = tokens.colors.background.surface;
+							},
+							onMouseLeave: (e) => {
+								e.currentTarget.style.background = selected.has(file.path) ? `${tokens.colors.interactive.default}15` : "transparent";
+							},
+							children: [/* @__PURE__ */ jsxs("span", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: tokens.spacing.sm,
+									overflow: "hidden"
+								},
+								children: [
+									multiSelect && /* @__PURE__ */ jsx("input", {
+										type: "checkbox",
+										checked: selected.has(file.path),
+										onChange: () => toggleSelect(file.path),
+										onClick: (e) => e.stopPropagation(),
+										"aria-label": `Select ${file.name}`,
+										style: { accentColor: tokens.colors.interactive.default }
+									}),
+									initialViewMode === "tree" && file.isDirectory && /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										style: {
+											fontSize: tokens.typography.fontSize.xxs,
+											color: tokens.colors.text.muted,
+											width: 12,
+											textAlign: "center"
+										},
+										children: expanded.has(file.path) ? "▼" : "▶"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										style: {
+											display: "inline-flex",
+											alignItems: "center",
+											fontSize: tokens.typography.fontSize.sm
+										},
+										children: /* @__PURE__ */ jsx(AstroIcon, {
+											name: getFileIconName(file),
+											size: "small",
+											label: "",
+											style: { fontSize: "inherit" }
+										})
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											fontSize: tokens.typography.fontSize.xs,
+											fontWeight: file.isDirectory ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal,
+											color: file.isDirectory ? tokens.colors.interactive.default : tokens.colors.text.primary,
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap"
+										},
+										children: file.name
+									})
+								]
+							}), showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.text.muted,
+									textAlign: "right",
+									minWidth: 70,
+									fontFamily: tokens.typography.fontFamily.mono
+								},
+								children: file.isDirectory ? "—" : formatFileSize(file.size)
+							}), /* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.text.muted,
+									textAlign: "right",
+									minWidth: 140,
+									fontFamily: tokens.typography.fontFamily.mono
+								},
+								children: formatDate(file.modified)
+							})] })]
+						}, file.path))
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.muted,
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [visibleItems.length, " items"] }), selected.size > 0 && /* @__PURE__ */ jsxs("span", { children: [selected.size, " selected"] })]
+			})
+		]
+	});
 });
-export {
-  FileExplorer
-};
-//# sourceMappingURL=FileExplorer.js.map
+//#endregion
+export { FileExplorer, FileExplorer as default };
+
+//# sourceMappingURL=FileExplorer.js.map