@noya-app/noya-file-explorer 0.0.31 → 0.0.33

package/dist/index.mjs

@@ -1100,10 +1100,620 @@ var require_lib = __commonJS({
   }
 });
 
+// src/GitFileExplorer.tsx
+import {
+  Button,
+  createSectionedMenu,
+  cx,
+  DropdownMenu,
+  IconButton,
+  List,
+  MediaThumbnail,
+  Section,
+  Small,
+  useOpenConfirmationDialog
+} from "@noya-app/noya-designsystem";
+import {
+  InputIcon,
+  PlusIcon,
+  TrashIcon,
+  UploadIcon
+} from "@noya-app/noya-icons";
+import { useFileDropTarget } from "@noya-app/react-utils";
+import React, {
+  forwardRef,
+  memo,
+  useCallback as useCallback3,
+  useEffect,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState3
+} from "react";
+
+// src/git/gitFileTree.ts
+function parseFilesToTree(files) {
+  const items = [];
+  const seenDirs = /* @__PURE__ */ new Set();
+  const sortedFiles = [...files].sort();
+  for (const filePath of sortedFiles) {
+    const parts = filePath.split("/");
+    let currentPath = "";
+    for (let i = 0; i < parts.length - 1; i++) {
+      currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+      if (!seenDirs.has(currentPath)) {
+        seenDirs.add(currentPath);
+        items.push({
+          id: `dir:${currentPath}`,
+          name: parts[i],
+          path: currentPath,
+          isDirectory: true,
+          depth: i
+        });
+      }
+    }
+    items.push({
+      id: `file:${filePath}`,
+      name: parts[parts.length - 1],
+      path: filePath,
+      isDirectory: false,
+      depth: parts.length - 1
+    });
+  }
+  return items;
+}
+function getVisibleItems(items, expandedDirs) {
+  const visible = [];
+  const collapsedPrefixes = [];
+  for (const item of items) {
+    const isHidden = collapsedPrefixes.some(
+      (prefix) => item.path.startsWith(prefix + "/")
+    );
+    if (isHidden) continue;
+    visible.push(item);
+    if (item.isDirectory && !expandedDirs.has(item.path)) {
+      collapsedPrefixes.push(item.path);
+    }
+  }
+  return visible;
+}
+function createTempFileItem(name = "") {
+  return {
+    id: "temp:new-file",
+    name,
+    path: name,
+    isDirectory: false,
+    depth: 0
+  };
+}
+function isTempItem(item) {
+  return item.id === "temp:new-file";
+}
+function computeRenamedPath(oldPath, newName) {
+  const pathParts = oldPath.split("/");
+  pathParts[pathParts.length - 1] = newName;
+  return pathParts.join("/");
+}
+
+// src/git/useGitFileOperations.ts
+import {
+  collectDroppedFiles,
+  readFileAsText
+} from "@noya-app/react-utils";
+import { fileOpen } from "browser-fs-access";
+import { useCallback, useState } from "react";
+function useGitFileOperations({
+  repoId,
+  repoFilesState,
+  gitManager
+}) {
+  const [isUploading, setIsUploading] = useState(false);
+  const createFile = useCallback(
+    async (path7, content = "") => {
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { create: [{ path: path7, content }] },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to create file: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref]
+  );
+  const renameFile = useCallback(
+    async (item, newName) => {
+      if (isTempItem(item)) {
+        if (!newName) return;
+        await createFile(newName);
+        return;
+      }
+      if (item.isDirectory) {
+        alert("Renaming directories is not yet supported");
+        return;
+      }
+      if (newName === item.name) return;
+      const newPath = computeRenamedPath(item.path, newName);
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { rename: [{ oldPath: item.path, newPath }] },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to rename file: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref, createFile]
+  );
+  const deleteFiles = useCallback(
+    async (items) => {
+      const pathsToDelete = /* @__PURE__ */ new Set();
+      for (const item of items) {
+        if (item.isDirectory) {
+          const dirPrefix = item.path + "/";
+          for (const filePath of repoFilesState.files) {
+            if (filePath.startsWith(dirPrefix)) {
+              pathsToDelete.add(filePath);
+            }
+          }
+        } else {
+          pathsToDelete.add(item.path);
+        }
+      }
+      if (pathsToDelete.size === 0) {
+        return;
+      }
+      try {
+        await gitManager.patchFiles(
+          repoId,
+          { delete: Array.from(pathsToDelete).map((path7) => ({ path: path7 })) },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to delete files: ${error}`);
+        throw error;
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref, repoFilesState.files]
+  );
+  const uploadFiles = useCallback(async () => {
+    try {
+      const files = await fileOpen({ multiple: true });
+      if (!files || Array.isArray(files) && files.length === 0) return;
+      const fileArray = Array.isArray(files) ? files : [files];
+      setIsUploading(true);
+      const createOperations = await Promise.all(
+        fileArray.map(async (file) => ({
+          path: file.name,
+          content: await readFileAsText(file)
+        }))
+      );
+      await gitManager.patchFiles(
+        repoId,
+        { create: createOperations },
+        repoFilesState.ref
+      );
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+      } else {
+        alert(`Failed to upload files: ${error}`);
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }, [gitManager, repoId, repoFilesState.ref]);
+  const handleFileDrop = useCallback(
+    async (event) => {
+      event.preventDefault();
+      try {
+        setIsUploading(true);
+        const droppedFiles = await collectDroppedFiles(event.dataTransfer);
+        if (droppedFiles.length === 0) return;
+        const createOperations = await Promise.all(
+          droppedFiles.map(async ({ file, relativePath }) => ({
+            path: relativePath,
+            content: await readFileAsText(file)
+          }))
+        );
+        await gitManager.patchFiles(
+          repoId,
+          { create: createOperations },
+          repoFilesState.ref
+        );
+      } catch (error) {
+        alert(`Failed to upload files: ${error}`);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [gitManager, repoId, repoFilesState.ref]
+  );
+  return {
+    isUploading,
+    createFile,
+    renameFile,
+    deleteFiles,
+    uploadFiles,
+    handleFileDrop
+  };
+}
+
+// src/git/useGitFileTree.ts
+import { useCallback as useCallback2, useMemo, useState as useState2 } from "react";
+function useGitFileTree({ repoFilesState }) {
+  const [expandedDirs, setExpandedDirs] = useState2(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [tempItem, setTempItem] = useState2(void 0);
+  const allItems = useMemo(
+    () => parseFilesToTree(repoFilesState.files),
+    [repoFilesState.files]
+  );
+  const allItemsWithTemp = useMemo(() => {
+    if (!tempItem) return allItems;
+    return [...allItems, tempItem];
+  }, [allItems, tempItem]);
+  const visibleItems = useMemo(
+    () => getVisibleItems(allItemsWithTemp, expandedDirs),
+    [allItemsWithTemp, expandedDirs]
+  );
+  const getExpanded = useCallback2(
+    (item) => {
+      if (!item.isDirectory) return void 0;
+      return expandedDirs.has(item.path);
+    },
+    [expandedDirs]
+  );
+  const setExpanded = useCallback2((item, expanded) => {
+    if (!item.isDirectory) return;
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (expanded) {
+        next.add(item.path);
+      } else {
+        next.delete(item.path);
+      }
+      return next;
+    });
+  }, []);
+  const toggleExpanded = useCallback2((item) => {
+    if (!item.isDirectory) return;
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(item.path)) {
+        next.delete(item.path);
+      } else {
+        next.add(item.path);
+      }
+      return next;
+    });
+  }, []);
+  const addTempItem = useCallback2(() => {
+    const newItem = createTempFileItem();
+    setTempItem(newItem);
+    return newItem;
+  }, []);
+  const clearTempItem = useCallback2(() => {
+    setTempItem(void 0);
+  }, []);
+  return {
+    visibleItems,
+    tempItem,
+    getExpanded,
+    setExpanded,
+    toggleExpanded,
+    addTempItem,
+    clearTempItem
+  };
+}
+
+// src/GitFileExplorer.tsx
+function useDelayedTrue(condition, delayMs) {
+  const [delayedValue, setDelayedValue] = useState3(false);
+  useEffect(() => {
+    if (!condition) {
+      setDelayedValue(false);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setDelayedValue(true);
+    }, delayMs);
+    return () => clearTimeout(timeout);
+  }, [condition, delayMs]);
+  return delayedValue;
+}
+var GitFileExplorerInner = memo(
+  forwardRef(function GitFileExplorer({
+    repoId,
+    repoFilesState,
+    gitManager,
+    selectedIds: selectedIdsProp,
+    onSelectionChange,
+    onFileSelect,
+    className,
+    title = "Files"
+  }, ref) {
+    const [internalSelectedIds, setInternalSelectedIds] = useState3(
+      []
+    );
+    const selectedIds = selectedIdsProp ?? internalSelectedIds;
+    const baseSetSelectedIds = onSelectionChange ?? setInternalSelectedIds;
+    const dropTargetRef = useRef(null);
+    const collectionRef = useRef(null);
+    const openConfirmationDialog = useOpenConfirmationDialog();
+    const {
+      visibleItems,
+      getExpanded,
+      setExpanded,
+      toggleExpanded,
+      addTempItem,
+      clearTempItem
+    } = useGitFileTree({ repoFilesState });
+    const setSelectedIds = useCallback3(
+      (ids) => {
+        baseSetSelectedIds(ids);
+        if (ids.length === 1) {
+          const item = visibleItems.find((i) => i.id === ids[0]);
+          if (item && !item.isDirectory) {
+            onFileSelect?.(item.path);
+          }
+        }
+      },
+      [baseSetSelectedIds, visibleItems, onFileSelect]
+    );
+    const {
+      isUploading,
+      renameFile,
+      deleteFiles,
+      uploadFiles,
+      handleFileDrop
+    } = useGitFileOperations({ repoId, repoFilesState, gitManager });
+    const { dropTargetProps, isDropTargetActive } = useFileDropTarget(
+      dropTargetRef,
+      handleFileDrop
+    );
+    const handleAddFile = useCallback3(() => {
+      const newItem = addTempItem();
+      setTimeout(() => {
+        collectionRef.current?.editName(newItem.id);
+      }, 50);
+    }, [addTempItem]);
+    const handleStartRename = useCallback3((itemId) => {
+      collectionRef.current?.editName(itemId);
+    }, []);
+    const handleRename = useCallback3(
+      async (item, newName) => {
+        if (isTempItem(item)) {
+          clearTempItem();
+          if (!newName) return;
+        }
+        await renameFile(item, newName);
+      },
+      [renameFile, clearTempItem]
+    );
+    const handleDelete = useCallback3(
+      async (items) => {
+        if (items.length === 0) return;
+        const fileCount = items.filter((item) => !item.isDirectory).length;
+        const dirCount = items.filter((item) => item.isDirectory).length;
+        let description;
+        if (dirCount > 0 && fileCount > 0) {
+          description = `Are you sure you want to delete ${fileCount} file(s) and ${dirCount} folder(s)? This action cannot be undone.`;
+        } else if (dirCount > 0) {
+          description = `Are you sure you want to delete ${dirCount} folder(s) and all their contents? This action cannot be undone.`;
+        } else {
+          description = `Are you sure you want to delete ${fileCount} file(s)? This action cannot be undone.`;
+        }
+        const confirmed = await openConfirmationDialog({
+          title: "Delete",
+          description
+        });
+        if (!confirmed) return;
+        await deleteFiles(items);
+        setSelectedIds([]);
+      },
+      [deleteFiles, setSelectedIds, openConfirmationDialog]
+    );
+    const handleDoubleClick = useCallback3(
+      (itemId) => {
+        const item = visibleItems.find((i) => i.id === itemId);
+        if (!item) return;
+        if (item.isDirectory) {
+          toggleExpanded(item);
+        } else {
+          onFileSelect?.(item.path);
+        }
+      },
+      [visibleItems, toggleExpanded, onFileSelect]
+    );
+    const headerMenuItems = useMemo2(
+      () => createSectionedMenu([
+        {
+          title: "New File",
+          value: "newFile",
+          icon: /* @__PURE__ */ React.createElement(PlusIcon, null)
+        },
+        {
+          title: "Upload Files",
+          value: "uploadFiles",
+          icon: /* @__PURE__ */ React.createElement(UploadIcon, null)
+        }
+      ]),
+      []
+    );
+    const handleHeaderMenuAction = useCallback3(
+      (action) => {
+        switch (action) {
+          case "newFile":
+            handleAddFile();
+            break;
+          case "uploadFiles":
+            uploadFiles();
+            break;
+        }
+      },
+      [handleAddFile, uploadFiles]
+    );
+    const handleMenuAction = useCallback3(
+      (action, items) => {
+        switch (action) {
+          case "addFile":
+            handleAddFile();
+            break;
+          case "rename":
+            if (items.length === 1) {
+              handleStartRename(items[0].id);
+            }
+            break;
+          case "delete":
+            handleDelete(items);
+            break;
+        }
+      },
+      [handleAddFile, handleStartRename, handleDelete]
+    );
+    const menuItems = useMemo2(() => {
+      const singleSelected = selectedIds.length === 1;
+      const hasSelection = selectedIds.length > 0;
+      const selectedItem = singleSelected ? visibleItems.find((item) => selectedIds.includes(item.id)) : void 0;
+      const isFile = selectedItem && !selectedItem.isDirectory;
+      return createSectionedMenu(
+        [
+          {
+            title: "Add File",
+            value: "addFile",
+            icon: /* @__PURE__ */ React.createElement(PlusIcon, null)
+          }
+        ],
+        [
+          singleSelected && isFile && {
+            title: "Rename",
+            value: "rename",
+            icon: /* @__PURE__ */ React.createElement(InputIcon, null)
+          },
+          hasSelection && {
+            title: "Delete",
+            value: "delete",
+            icon: /* @__PURE__ */ React.createElement(TrashIcon, null)
+          }
+        ]
+      );
+    }, [selectedIds, visibleItems]);
+    useImperativeHandle(ref, () => ({
+      addFile: handleAddFile,
+      delete: (ids) => {
+        const items = visibleItems.filter((item) => ids.includes(item.id));
+        handleDelete(items);
+      },
+      rename: (id) => {
+        handleStartRename(id);
+      }
+    }));
+    const isRefreshing = repoFilesState.fetchState === "refreshing";
+    const isLoading = repoFilesState.fetchState === "loading";
+    const showLoading = useDelayedTrue(isLoading, 500);
+    const renderEmptyState = useCallback3(() => {
+      const hasError = !!repoFilesState.error;
+      let content = null;
+      if (isLoading && showLoading) {
+        content = /* @__PURE__ */ React.createElement(Small, null, "Loading files...");
+      } else if (isLoading) {
+        content = null;
+      } else if (hasError) {
+        content = /* @__PURE__ */ React.createElement(Small, null, "Error: ", repoFilesState.error);
+      } else {
+        content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Small, null, "No files yet"), /* @__PURE__ */ React.createElement(Button, { onClick: handleAddFile }, "Add a file"));
+      }
+      return /* @__PURE__ */ React.createElement("div", { className: "n-mx-3 n-flex-1 n-flex n-flex-col n-items-center n-justify-center n-gap-2" }, content);
+    }, [repoFilesState.error, handleAddFile, isLoading, showLoading]);
+    return /* @__PURE__ */ React.createElement(
+      Section,
+      {
+        title,
+        className: cx("n-px-3", className),
+        right: /* @__PURE__ */ React.createElement("div", { className: "n-flex n-items-center n-gap-1" }, isRefreshing && /* @__PURE__ */ React.createElement(Small, { color: "textDisabled" }, "Syncing..."), isUploading && /* @__PURE__ */ React.createElement(Small, { color: "textDisabled" }, "Uploading..."), /* @__PURE__ */ React.createElement(
+          DropdownMenu,
+          {
+            items: headerMenuItems,
+            onSelect: handleHeaderMenuAction
+          },
+          /* @__PURE__ */ React.createElement(IconButton, { iconName: "DotsVerticalIcon" })
+        ))
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: dropTargetRef,
+          className: cx(
+            "n-flex n-flex-col n-flex-1 -n-mx-3",
+            isDropTargetActive && "n-bg-blue-500/10 n-ring-2 n-ring-blue-500 n-ring-inset"
+          ),
+          ...dropTargetProps
+        },
+        /* @__PURE__ */ React.createElement(
+          List,
+          {
+            ref: collectionRef,
+            className: "n-flex-1",
+            scrollable: true,
+            expandable: true,
+            renamable: true,
+            size: "small",
+            items: visibleItems,
+            getId: (item) => item.id,
+            getName: (item) => isTempItem(item) ? "" : item.name,
+            getDepth: (item) => item.depth,
+            getExpanded,
+            setExpanded,
+            getRenamable: (item) => !item.isDirectory,
+            getPlaceholder: () => "Enter file name",
+            selectedIds,
+            onSelectionChange: setSelectedIds,
+            onDoubleClickItem: handleDoubleClick,
+            onRename: handleRename,
+            menuItems,
+            onSelectMenuItem: handleMenuAction,
+            renderEmptyState,
+            renameSelectsBeforeDot: true,
+            renderThumbnail: ({ item, selected }) => /* @__PURE__ */ React.createElement(
+              MediaThumbnail,
+              {
+                iconName: item.isDirectory ? "FolderIcon" : void 0,
+                fileName: item.isDirectory ? void 0 : item.name,
+                selected,
+                size: "small"
+              }
+            )
+          }
+        )
+      )
+    );
+  })
+);
+var GitFileExplorer2 = memo(
+  forwardRef(function GitFileExplorer3(props, ref) {
+    if (!props.repoFilesState) {
+      return /* @__PURE__ */ React.createElement(Section, { title: props.title, className: cx("n-px-3", props.className) }, null);
+    }
+    return /* @__PURE__ */ React.createElement(
+      GitFileExplorerInner,
+      {
+        ...props,
+        repoFilesState: props.repoFilesState,
+        ref
+      }
+    );
+  })
+);
+
 // src/MediaCollection.tsx
 import {
   ActionMenu,
-  createSectionedMenu,
+  createSectionedMenu as createSectionedMenu2,
   cssVars,
   FileExplorerCollection,
   FileExplorerDetail,
@@ -1111,18 +1721,18 @@ import {
   FileExplorerLayout,
   FileExplorerUploadButton,
   formatByteSize,
-  MediaThumbnail,
-  useOpenConfirmationDialog
+  MediaThumbnail as MediaThumbnail2,
+  useOpenConfirmationDialog as useOpenConfirmationDialog2
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon,
   FolderIcon,
-  InputIcon,
+  InputIcon as InputIcon2,
   OpenInNewWindowIcon,
   ResetIcon,
-  TrashIcon,
+  TrashIcon as TrashIcon2,
   UpdateIcon,
-  UploadIcon
+  UploadIcon as UploadIcon2
 } from "@noya-app/noya-icons";
 import {
   useAsset,
@@ -1135,16 +1745,16 @@ import {
   memoGeneric,
   useControlledOrUncontrolled
 } from "@noya-app/react-utils";
-import { fileOpen } from "browser-fs-access";
+import { fileOpen as fileOpen2 } from "browser-fs-access";
 import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState
+  forwardRef as forwardRef2,
+  memo as memo2,
+  useCallback as useCallback4,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState4
 } from "react";
 
 // src/utils/mediaItemTree.ts
@@ -1230,7 +1840,7 @@ var createMediaItemTree = (mediaMap) => {
 
 // src/MediaCollection.tsx
 import { path as path4 } from "imfs";
-import React from "react";
+import React2 from "react";
 
 // src/utils/files.ts
 var import_tree_visit3 = __toESM(require_lib());
@@ -1243,7 +1853,7 @@ import {
   rootResource
 } from "@noya-app/noya-schemas";
 import { path as path2 } from "imfs";
-var getVisibleItems = ({
+var getVisibleItems2 = ({
   expandedMap,
   fileKindFilter,
   rootItemId,
@@ -1718,8 +2328,8 @@ var MediaThumbnailInternal = memoGeneric(
     }
     const fileName = pathProp ? path4.basename(pathProp) : void 0;
     const dimensions = width && height ? { width, height } : void 0;
-    return /* @__PURE__ */ React.createElement(
-      MediaThumbnail,
+    return /* @__PURE__ */ React2.createElement(
+      MediaThumbnail2,
       {
         contentType,
         iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
@@ -1733,8 +2343,8 @@ var MediaThumbnailInternal = memoGeneric(
     );
   }
 );
-var MediaCollection = memo(
-  forwardRef(function MediaCollection2({
+var MediaCollection = memo2(
+  forwardRef2(function MediaCollection2({
     sortableId,
     onSelectionChange,
     selectedIds: selectedIdsProp,
@@ -1765,28 +2375,28 @@ var MediaCollection = memo(
     onDidDeleteItems,
     onAssetsUploaded
   }, ref) {
-    const setMedia = useCallback(
+    const setMedia = useCallback4(
       (...args) => {
         setMediaProp?.(...args);
       },
       [setMediaProp]
     );
-    const tree = useMemo(() => createMediaItemTree(media), [media]);
-    const [tempItem, setTempItem] = useState(
+    const tree = useMemo3(() => createMediaItemTree(media), [media]);
+    const [tempItem, setTempItem] = useState4(
       void 0
     );
-    const mediaWithTempItem = useMemo(
+    const mediaWithTempItem = useMemo3(
       () => ({
         ...media,
         ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
       }),
       [media, tempItem]
     );
-    const treeWithTempItem = useMemo(
+    const treeWithTempItem = useMemo3(
       () => createMediaItemTree(mediaWithTempItem),
       [mediaWithTempItem]
     );
-    const temp = useMemo(
+    const temp = useMemo3(
       () => ({
         media: mediaWithTempItem,
         tree: treeWithTempItem
@@ -1802,8 +2412,8 @@ var MediaCollection = memo(
     );
     const assetManager = useAssetManager();
     const assets = useAssets();
-    const [expandedMap, setExpandedMap] = useState({});
-    const visibleItems = useMemo(
+    const [expandedMap, setExpandedMap] = useState4({});
+    const visibleItems = useMemo3(
       () => mediaGetVisibleItems({
         expandedMap,
         fileKindFilter,
@@ -1821,12 +2431,12 @@ var MediaCollection = memo(
         showRootItem
       ]
     );
-    const depthMap = useMemo(
+    const depthMap = useMemo3(
       () => mediaGetDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
       [treeWithTempItem, showAllDescendants]
     );
-    const collectionRef = useRef(null);
-    const selectedMediaItems = useMemo(
+    const collectionRef = useRef2(null);
+    const selectedMediaItems = useMemo3(
       () => treeWithTempItem.mediaItemsWithRoot.filter(
         (item) => selectedIds.includes(item.id)
       ),
@@ -1847,12 +2457,12 @@ var MediaCollection = memo(
       if (!itemPath || !firstSelectedPath) return false;
       return itemPath.startsWith(path4.dirname(firstSelectedPath));
     });
-    useEffect(() => {
+    useEffect2(() => {
       if (initialExpanded) {
         setExpandedMap(initialExpanded);
       }
     }, [initialExpanded]);
-    const getExpanded = useCallback(
+    const getExpanded = useCallback4(
       (item) => {
         if (!expandable) return void 0;
         if (item.kind !== "folder") return void 0;
@@ -1861,8 +2471,8 @@ var MediaCollection = memo(
       },
       [expandedMap, expandable]
     );
-    const openConfirmationDialog = useOpenConfirmationDialog();
-    const handleDelete = useCallback(
+    const openConfirmationDialog = useOpenConfirmationDialog2();
+    const handleDelete = useCallback4(
       async (selectedIds2) => {
         const ok = await openConfirmationDialog({
           title: "Delete items",
@@ -1895,7 +2505,7 @@ var MediaCollection = memo(
         openConfirmationDialog
       ]
     );
-    const onRename = useCallback(
+    const onRename = useCallback4(
       (selectedItem, newName) => {
         if (!renamable) return;
         const selectedItemPath = treeWithTempItem.idToPathMap.get(
@@ -1925,7 +2535,7 @@ var MediaCollection = memo(
       },
       [renamable, setMedia, temp.media, temp.tree, treeWithTempItem.idToPathMap]
     );
-    const handleAddFolder = useCallback(
+    const handleAddFolder = useCallback4(
       (currentFolderId) => {
         const newFolder = createMediaFolder();
         const currentFolderPath = tree.idToPathMap.get(currentFolderId);
@@ -1940,7 +2550,7 @@ var MediaCollection = memo(
       },
       [tree]
     );
-    const handleAddFile = useCallback(
+    const handleAddFile = useCallback4(
       (currentFolderId) => {
         const newFile = createMediaFile({
           content: "",
@@ -1960,7 +2570,7 @@ var MediaCollection = memo(
       },
       [tree.idToPathMap]
     );
-    const handleMoveUpAFolder = useCallback(
+    const handleMoveUpAFolder = useCallback4(
       (selectedIds2) => {
         const newMedia = mediaMoveUpAFolder({
           tree,
@@ -1972,11 +2582,11 @@ var MediaCollection = memo(
       },
       [media, tree, setMedia]
     );
-    const [isUploading, setIsUploading] = useState(false);
-    const handleUpload = useCallback(
+    const [isUploading, setIsUploading] = useState4(false);
+    const handleUpload = useCallback4(
       async (selectedId) => {
         try {
-          const files = await fileOpen({ multiple: true });
+          const files = await fileOpen2({ multiple: true });
           if (!files || !Array.isArray(files) || files.length === 0) return;
           const parentPath = tree.idToPathMap.get(selectedId);
           if (!parentPath) return;
@@ -2013,7 +2623,7 @@ var MediaCollection = memo(
       },
       [tree.idToPathMap, setMedia, media, assetManager, onAssetsUploaded]
     );
-    const handleDownload = useCallback(
+    const handleDownload = useCallback4(
       async (selectedItems) => {
         const downloadPromises = selectedItems.filter((item) => item.kind === "asset").map(async (item) => {
           const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
@@ -2024,7 +2634,7 @@ var MediaCollection = memo(
       },
       [assets, tree]
     );
-    const handlePreview = useCallback(
+    const handlePreview = useCallback4(
       async (selectedItems) => {
         const previewPromises = selectedItems.filter((item) => item.kind === "asset").map(async (item) => {
           const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
@@ -2035,10 +2645,10 @@ var MediaCollection = memo(
       },
       [assets]
     );
-    const handleReplace = useCallback(
+    const handleReplace = useCallback4(
       async (selectedItem) => {
         try {
-          const file = await fileOpen();
+          const file = await fileOpen2();
           if (!file) return;
           const created = await assetManager.create(file);
           const assetStableId = created.id;
@@ -2064,13 +2674,13 @@ var MediaCollection = memo(
       },
       [media, setMedia, assetManager, tree]
     );
-    const handleRename = useCallback(
+    const handleRename = useCallback4(
       (selectedItemId) => {
         collectionRef.current?.editName(selectedItemId);
       },
       [collectionRef]
     );
-    const handleMoveMediaInsideFolder = useCallback(
+    const handleMoveMediaInsideFolder = useCallback4(
       (sourceItem, targetItem) => {
         const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
@@ -2088,52 +2698,52 @@ var MediaCollection = memo(
       },
       [media, setMedia, tree]
     );
-    const assetContextMenuItems = useMemo(() => {
-      return createSectionedMenu(
+    const assetContextMenuItems = useMemo3(() => {
+      return createSectionedMenu2(
         [
           !rootSelected && singleItemSelected && {
             title: "Rename",
             value: "rename",
-            icon: /* @__PURE__ */ React.createElement(InputIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(InputIcon2, null)
           },
           onlySingleAssetSelected && {
             title: "Replace",
             value: "replace",
-            icon: /* @__PURE__ */ React.createElement(UpdateIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(UpdateIcon, null)
           },
           !rootSelected && {
             title: "Delete",
             value: "delete",
-            icon: /* @__PURE__ */ React.createElement(TrashIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(TrashIcon2, null)
           }
         ],
         [
           onlySingleFolderSelected && {
             title: "Upload Files",
             value: "upload",
-            icon: /* @__PURE__ */ React.createElement(UploadIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(UploadIcon2, null)
           },
           onlySingleFolderSelected && {
             title: "Add Folder",
             value: "addFolder",
-            icon: /* @__PURE__ */ React.createElement(FolderIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(FolderIcon, null)
           },
           onlyAssetsSelected && tree.mediaItemsWithRoot.length > 0 && {
             title: "Download",
             value: "download",
-            icon: /* @__PURE__ */ React.createElement(DownloadIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(DownloadIcon, null)
           },
           onlySingleAssetSelected && {
             title: "Preview",
             value: "preview",
-            icon: /* @__PURE__ */ React.createElement(OpenInNewWindowIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(OpenInNewWindowIcon, null)
           }
         ],
         [
           !rootSelected && sameParentSelected && {
             title: "Move up a folder",
             value: "move",
-            icon: /* @__PURE__ */ React.createElement(ResetIcon, null)
+            icon: /* @__PURE__ */ React2.createElement(ResetIcon, null)
           }
         ]
       );
@@ -2146,7 +2756,7 @@ var MediaCollection = memo(
       tree.mediaItemsWithRoot.length,
       sameParentSelected
     ]);
-    const handleMenuAction = useCallback(
+    const handleMenuAction = useCallback4(
       async (action, selectedItems) => {
         if (selectedItems.length === 0) return;
         switch (action) {
@@ -2188,7 +2798,7 @@ var MediaCollection = memo(
         handleMoveUpAFolder
       ]
     );
-    const handleSetExpanded = useCallback(
+    const handleSetExpanded = useCallback4(
       (item, expanded) => {
         setExpandedMap(
           (prev) => mediaUpdateExpandedMap({
@@ -2202,12 +2812,12 @@ var MediaCollection = memo(
       },
       [expandable, tree]
     );
-    const renderAction = useMemo(() => {
+    const renderAction = useMemo3(() => {
       if (renderActionProp) return renderActionProp;
       return ({
         selected,
         onOpenChange
-      }) => /* @__PURE__ */ React.createElement(
+      }) => /* @__PURE__ */ React2.createElement(
         ActionMenu,
         {
           menuItems: assetContextMenuItems,
@@ -2228,7 +2838,7 @@ var MediaCollection = memo(
       selectedMediaItems,
       viewType
     ]);
-    useImperativeHandle(ref, () => ({
+    useImperativeHandle2(ref, () => ({
       upload: (selectedId) => handleUpload(selectedId),
       delete: handleDelete,
       download: handleDownload,
@@ -2241,11 +2851,11 @@ var MediaCollection = memo(
       moveMediaInsideFolder: handleMoveMediaInsideFolder,
       getItemAtIndex: (index) => visibleItems[index]
     }));
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
       FileExplorerLayout,
       {
         title: title ?? rootMediaItemName,
-        right: !readOnly && /* @__PURE__ */ React.createElement(
+        right: !readOnly && /* @__PURE__ */ React2.createElement(
           FileExplorerUploadButton,
           {
             showUploadButton,
@@ -2256,7 +2866,7 @@ var MediaCollection = memo(
         ),
         className
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React2.createElement(
         FileExplorerCollection,
         {
           ref: collectionRef,
@@ -2300,7 +2910,7 @@ var MediaCollection = memo(
           onRename,
           renamable,
           selectedIds,
-          renderThumbnail: (props) => /* @__PURE__ */ React.createElement(
+          renderThumbnail: (props) => /* @__PURE__ */ React2.createElement(
             MediaThumbnailInternal,
             {
               ...props,
@@ -2313,9 +2923,9 @@ var MediaCollection = memo(
             if (file.kind !== "asset") return null;
             const asset = assets.find((a) => a.stableId === file.assetId) ?? assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
-            return /* @__PURE__ */ React.createElement(FileExplorerDetail, { selected, size }, formatByteSize(asset.size));
+            return /* @__PURE__ */ React2.createElement(FileExplorerDetail, { selected, size }, formatByteSize(asset.size));
           },
-          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React.createElement(FileExplorerEmptyState, null),
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React2.createElement(FileExplorerEmptyState, null),
           itemRoleDescription: "clickable file item",
           getDropTargetParentIndex: (overIndex) => {
             const item = visibleItems[overIndex];
@@ -2391,7 +3001,7 @@ function acceptsMediaItemDrop(parameters) {
 import {
   ActionMenu as ActionMenu2,
   Chip,
-  createSectionedMenu as createSectionedMenu2,
+  createSectionedMenu as createSectionedMenu3,
   cssVars as cssVars2,
   FileExplorerCollection as FileExplorerCollection2,
   FileExplorerDetail as FileExplorerDetail2,
@@ -2399,18 +3009,18 @@ import {
   FileExplorerLayout as FileExplorerLayout2,
   FileExplorerUploadButton as FileExplorerUploadButton2,
   formatByteSize as formatByteSize2,
-  MediaThumbnail as MediaThumbnail2,
-  useOpenConfirmationDialog as useOpenConfirmationDialog2
+  MediaThumbnail as MediaThumbnail3,
+  useOpenConfirmationDialog as useOpenConfirmationDialog3
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon as DownloadIcon2,
   FolderIcon as FolderIcon2,
-  InputIcon as InputIcon2,
+  InputIcon as InputIcon3,
   OpenInNewWindowIcon as OpenInNewWindowIcon2,
   ResetIcon as ResetIcon2,
-  TrashIcon as TrashIcon2,
+  TrashIcon as TrashIcon3,
   UpdateIcon as UpdateIcon2,
-  UploadIcon as UploadIcon2
+  UploadIcon as UploadIcon3
 } from "@noya-app/noya-icons";
 import {
   useAsset as useAsset2,
@@ -2433,19 +3043,19 @@ import {
   SingleDimensionAutoSizer,
   useControlledOrUncontrolled as useControlledOrUncontrolled2
 } from "@noya-app/react-utils";
-import { fileOpen as fileOpen2 } from "browser-fs-access";
+import { fileOpen as fileOpen3 } from "browser-fs-access";
 import {
-  forwardRef as forwardRef2,
-  memo as memo2,
-  useCallback as useCallback2,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState2
+  forwardRef as forwardRef3,
+  memo as memo3,
+  useCallback as useCallback5,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo4,
+  useRef as useRef3,
+  useState as useState5
 } from "react";
 import { path as path6 } from "imfs";
-import React2 from "react";
+import React3 from "react";
 
 // src/utils/contentType.ts
 function getContentTypeFromFile(file) {
@@ -2529,13 +3139,8 @@ import {
   createDirectoryResource
 } from "@noya-app/noya-schemas";
 import { Base64, uuid as uuid2 } from "@noya-app/noya-utils";
+import { collectDroppedFiles as collectDroppedFiles2 } from "@noya-app/react-utils";
 import { path as path5 } from "imfs";
-function isDirectoryEntry(entry) {
-  return entry.isDirectory;
-}
-function isFileEntry(entry) {
-  return entry.isFile;
-}
 async function handleDataTransfer({
   accessibleByFileId,
   dataTransfer,
@@ -2543,66 +3148,7 @@ async function handleDataTransfer({
   resourceMap
 }) {
   try {
-    const dataTransferItems = Array.from(dataTransfer.items ?? []);
-    const supportsEntries = dataTransferItems.some(
-      (item) => typeof item?.webkitGetAsEntry === "function"
-    );
-    const collectFromEntry = async (entry, basePath) => {
-      if (!entry) return [];
-      if (isFileEntry(entry)) {
-        const file = await new Promise(
-          (resolve) => entry.file((f) => resolve(f))
-        );
-        return [
-          {
-            file,
-            relativePath: path5.join(basePath, file.name)
-          }
-        ];
-      }
-      if (isDirectoryEntry(entry)) {
-        const reader = entry.createReader();
-        const readAll = async () => {
-          const all = [];
-          while (true) {
-            const entries = await new Promise(
-              (resolve) => reader.readEntries((ents) => resolve(ents))
-            );
-            if (!entries.length) break;
-            all.push(...entries);
-          }
-          return all;
-        };
-        const children = await readAll();
-        const results = await Promise.all(
-          children.map(
-            (child) => collectFromEntry(child, path5.join(basePath, entry.name))
-          )
-        );
-        return results.flat();
-      }
-      return [];
-    };
-    let dropped = [];
-    if (supportsEntries) {
-      const topLevelEntries = dataTransferItems.flatMap((item) => {
-        const entry = item.webkitGetAsEntry?.();
-        if (!entry) return [];
-        return [entry];
-      });
-      const nested = await Promise.all(
-        topLevelEntries.map((entry) => collectFromEntry(entry, ""))
-      );
-      dropped = nested.flat();
-    } else {
-      const files = Array.from(dataTransfer.files);
-      if (files.length === 0) return;
-      dropped = files.map((file) => ({
-        file,
-        // Best effort: try webkitRelativePath; fall back to name
-        relativePath: file.webkitRelativePath && file.webkitRelativePath.length > 0 ? file.webkitRelativePath : file.name
-      }));
-    }
+    const dropped = await collectDroppedFiles2(dataTransfer);
     if (dropped.length === 0) return;
     const folderRelativePaths = /* @__PURE__ */ new Set();
     for (const { relativePath } of dropped) {
@@ -2684,8 +3230,8 @@ var ResourceThumbnail = memoGeneric2(
       contentType = contentTypeProp;
     }
     const fileName = pathProp ? path6.basename(pathProp) : void 0;
-    return /* @__PURE__ */ React2.createElement(
-      MediaThumbnail2,
+    return /* @__PURE__ */ React3.createElement(
+      MediaThumbnail3,
       {
         contentType,
         iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
@@ -2700,8 +3246,8 @@ var ResourceThumbnail = memoGeneric2(
     );
   }
 );
-var ResourceExplorer = memo2(
-  forwardRef2(
+var ResourceExplorer = memo3(
+  forwardRef3(
     function ResourceExplorer2({
       parentFileId,
       sortableId,
@@ -2740,28 +3286,28 @@ var ResourceExplorer = memo2(
       renderUser,
       showFileSizes = true
     }, ref) {
-      const setMedia = useCallback2(
+      const setMedia = useCallback5(
         (...args) => {
           setMediaProp?.(...args);
         },
         [setMediaProp]
       );
-      const tree = useMemo2(() => createResourceTree2(media), [media]);
-      const [tempItem, setTempItem] = useState2(
+      const tree = useMemo4(() => createResourceTree2(media), [media]);
+      const [tempItem, setTempItem] = useState5(
         void 0
       );
-      const mediaWithTempItem = useMemo2(
+      const mediaWithTempItem = useMemo4(
         () => ({
           ...media,
           ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
         }),
         [media, tempItem]
       );
-      const treeWithTempItem = useMemo2(
+      const treeWithTempItem = useMemo4(
         () => createResourceTree2(mediaWithTempItem),
         [mediaWithTempItem]
       );
-      const temp = useMemo2(
+      const temp = useMemo4(
         () => ({
           media: mediaWithTempItem,
           tree: treeWithTempItem
@@ -2775,9 +3321,9 @@ var ResourceExplorer = memo2(
       });
       const assetManager = useAssetManager2();
       const assets = useAssets2();
-      const [expandedMap, setExpandedMap] = useState2({});
-      const visibleItems = useMemo2(
-        () => getVisibleItems({
+      const [expandedMap, setExpandedMap] = useState5({});
+      const visibleItems = useMemo4(
+        () => getVisibleItems2({
           expandedMap,
           fileKindFilter,
           rootItemId,
@@ -2794,12 +3340,12 @@ var ResourceExplorer = memo2(
           showRootItem
         ]
       );
-      const depthMap = useMemo2(
+      const depthMap = useMemo4(
         () => getDepthMap(rootResource2, treeWithTempItem, showAllDescendants),
         [treeWithTempItem, showAllDescendants]
       );
-      const collectionRef = useRef2(null);
-      const selectedResources = useMemo2(
+      const collectionRef = useRef3(null);
+      const selectedResources = useMemo4(
         () => treeWithTempItem.resourcesWithRoot.filter(
           (item) => selectedIds.includes(item.id)
         ),
@@ -2820,12 +3366,12 @@ var ResourceExplorer = memo2(
         if (!itemPath || !firstSelectedPath) return false;
         return itemPath.startsWith(path6.dirname(firstSelectedPath));
       });
-      useEffect2(() => {
+      useEffect3(() => {
         if (initialExpanded) {
           setExpandedMap(initialExpanded);
         }
       }, [initialExpanded]);
-      const getExpanded = useCallback2(
+      const getExpanded = useCallback5(
         (item) => {
           if (!expandable) return void 0;
           if (item.type !== "directory") return void 0;
@@ -2834,8 +3380,8 @@ var ResourceExplorer = memo2(
         },
         [expandedMap, expandable]
       );
-      const openConfirmationDialog = useOpenConfirmationDialog2();
-      const handleDelete = useCallback2(
+      const openConfirmationDialog = useOpenConfirmationDialog3();
+      const handleDelete = useCallback5(
         async (selectedIds2) => {
           const ok = await openConfirmationDialog({
             title: "Delete items",
@@ -2868,7 +3414,7 @@ var ResourceExplorer = memo2(
           openConfirmationDialog
         ]
       );
-      const onRename = useCallback2(
+      const onRename = useCallback5(
         (selectedItem, newName) => {
           if (!renamable) return;
           const selectedItemPath = treeWithTempItem.idToPathMap.get(
@@ -2904,7 +3450,7 @@ var ResourceExplorer = memo2(
           treeWithTempItem.idToPathMap
         ]
       );
-      const handleAddFolder = useCallback2(
+      const handleAddFolder = useCallback5(
         (currentFolderId) => {
           const currentFolderPath = tree.idToPathMap.get(currentFolderId);
           if (!currentFolderPath) return;
@@ -2925,7 +3471,7 @@ var ResourceExplorer = memo2(
         },
         [parentFileId, tree]
       );
-      const handleMoveUpAFolder = useCallback2(
+      const handleMoveUpAFolder = useCallback5(
         (selectedIds2) => {
           const newMedia = moveUpAFolder({
             tree,
@@ -2937,11 +3483,11 @@ var ResourceExplorer = memo2(
         },
         [media, tree, setMedia]
       );
-      const [isUploading, setIsUploading] = useState2(false);
-      const handleUpload = useCallback2(
+      const [isUploading, setIsUploading] = useState5(false);
+      const handleUpload = useCallback5(
         async (selectedId) => {
           try {
-            const files = await fileOpen2({ multiple: true });
+            const files = await fileOpen3({ multiple: true });
             if (!files || !Array.isArray(files) || files.length === 0) return;
             const parentPath = tree.idToPathMap.get(selectedId);
             if (!parentPath) return;
@@ -2986,7 +3532,7 @@ var ResourceExplorer = memo2(
         },
         [tree, setMedia, media, onAssetsUploaded, parentFileId]
       );
-      const handleDownload = useCallback2(
+      const handleDownload = useCallback5(
         async (selectedItems) => {
           const downloadPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
             const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
@@ -2997,7 +3543,7 @@ var ResourceExplorer = memo2(
         },
         [assets, tree]
       );
-      const handlePreview = useCallback2(
+      const handlePreview = useCallback5(
         async (selectedItems) => {
           const previewPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
             const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
@@ -3008,10 +3554,10 @@ var ResourceExplorer = memo2(
         },
         [assets]
       );
-      const handleReplace = useCallback2(
+      const handleReplace = useCallback5(
         async (selectedItem) => {
           try {
-            const file = await fileOpen2();
+            const file = await fileOpen3();
             if (!file) return;
             const created = await assetManager.create(file);
             const assetStableId = created.id;
@@ -3037,13 +3583,13 @@ var ResourceExplorer = memo2(
         },
         [media, setMedia, assetManager, tree]
       );
-      const handleRename = useCallback2(
+      const handleRename = useCallback5(
         (selectedItemId) => {
           collectionRef.current?.editName(selectedItemId);
         },
         [collectionRef]
       );
-      const handleMoveMediaInsideFolder = useCallback2(
+      const handleMoveMediaInsideFolder = useCallback5(
         (sourceItems, targetItem) => {
           const newMedia = moveMediaInsideFolder({
             sourceItemIds: sourceItems.map((item) => item.id),
@@ -3061,52 +3607,52 @@ var ResourceExplorer = memo2(
         },
         [media, setMedia, tree]
       );
-      const assetContextMenuItems = useMemo2(() => {
-        return createSectionedMenu2(
+      const assetContextMenuItems = useMemo4(() => {
+        return createSectionedMenu3(
           [
             !rootSelected && singleItemSelected && {
               title: "Rename",
               value: "rename",
-              icon: /* @__PURE__ */ React2.createElement(InputIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(InputIcon3, null)
             },
             onlySingleAssetSelected && {
               title: "Replace",
               value: "replace",
-              icon: /* @__PURE__ */ React2.createElement(UpdateIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(UpdateIcon2, null)
             },
             !rootSelected && {
               title: "Delete",
               value: "delete",
-              icon: /* @__PURE__ */ React2.createElement(TrashIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(TrashIcon3, null)
             }
           ],
           [
             onlySingleFolderSelected && {
               title: "Upload Files",
               value: "upload",
-              icon: /* @__PURE__ */ React2.createElement(UploadIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(UploadIcon3, null)
             },
             onlySingleFolderSelected && {
               title: "Add Folder",
               value: "addFolder",
-              icon: /* @__PURE__ */ React2.createElement(FolderIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(FolderIcon2, null)
             },
             onlyAssetsSelected && tree.resourcesWithRoot.length > 0 && {
               title: "Download",
               value: "download",
-              icon: /* @__PURE__ */ React2.createElement(DownloadIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(DownloadIcon2, null)
             },
             onlySingleAssetSelected && {
               title: "Preview",
               value: "preview",
-              icon: /* @__PURE__ */ React2.createElement(OpenInNewWindowIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(OpenInNewWindowIcon2, null)
             }
           ],
           [
             !rootSelected && sameParentSelected && {
               title: "Move up a folder",
               value: "move",
-              icon: /* @__PURE__ */ React2.createElement(ResetIcon2, null)
+              icon: /* @__PURE__ */ React3.createElement(ResetIcon2, null)
             }
           ]
         );
@@ -3119,7 +3665,7 @@ var ResourceExplorer = memo2(
         tree.resourcesWithRoot.length,
         sameParentSelected
       ]);
-      const handleMenuAction = useCallback2(
+      const handleMenuAction = useCallback5(
         async (action, selectedItems) => {
           if (selectedItems.length === 0) return;
           switch (action) {
@@ -3161,7 +3707,7 @@ var ResourceExplorer = memo2(
           handleMoveUpAFolder
         ]
       );
-      const handleSetExpanded = useCallback2(
+      const handleSetExpanded = useCallback5(
         (item, expanded) => {
           setExpandedMap(
             (prev) => updateExpandedMap({
@@ -3175,12 +3721,12 @@ var ResourceExplorer = memo2(
         },
         [expandable, tree]
       );
-      const renderAction = useMemo2(() => {
+      const renderAction = useMemo4(() => {
         if (renderActionProp) return renderActionProp;
         return ({
           selected,
           onOpenChange
-        }) => /* @__PURE__ */ React2.createElement(
+        }) => /* @__PURE__ */ React3.createElement(
           "div",
           {
             style: {
@@ -3189,7 +3735,7 @@ var ResourceExplorer = memo2(
               justifyContent: "flex-end"
             }
           },
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             ActionMenu2,
             {
               menuItems: assetContextMenuItems,
@@ -3211,7 +3757,7 @@ var ResourceExplorer = memo2(
         selectedResources,
         viewType
       ]);
-      useImperativeHandle2(ref, () => ({
+      useImperativeHandle3(ref, () => ({
         upload: (selectedId) => handleUpload(selectedId),
         delete: handleDelete,
         download: handleDownload,
@@ -3223,7 +3769,7 @@ var ResourceExplorer = memo2(
         moveMediaInsideFolder: handleMoveMediaInsideFolder,
         getItemAtIndex: (index) => visibleItems[index]
       }));
-      const diffResources = useMemo2(() => {
+      const diffResources = useMemo4(() => {
         if (!publishedResources) return;
         const diff = diffResourceMaps(publishedResources, media, "stableId");
         return {
@@ -3238,8 +3784,8 @@ var ResourceExplorer = memo2(
           )
         };
       }, [media, publishedResources]);
-      const keyExtractor = useCallback2((item) => item.id, []);
-      const renderCollection = (virtualizedHeight) => /* @__PURE__ */ React2.createElement(
+      const keyExtractor = useCallback5((item) => item.id, []);
+      const renderCollection = (virtualizedHeight) => /* @__PURE__ */ React3.createElement(
         FileExplorerCollection2,
         {
           ref: collectionRef,
@@ -3290,7 +3836,7 @@ var ResourceExplorer = memo2(
           itemClassName,
           itemStyle,
           virtualized: virtualizedHeight,
-          renderThumbnail: (props) => /* @__PURE__ */ React2.createElement(
+          renderThumbnail: (props) => /* @__PURE__ */ React3.createElement(
             ResourceThumbnail,
             {
               ...props,
@@ -3306,12 +3852,12 @@ var ResourceExplorer = memo2(
               resource: file,
               diff: diffResources
             });
-            return /* @__PURE__ */ React2.createElement(
+            return /* @__PURE__ */ React3.createElement(
               "div",
               {
                 style: { display: "flex", alignItems: "center", gap: "6px" }
               },
-              publishStatus && /* @__PURE__ */ React2.createElement(
+              publishStatus && /* @__PURE__ */ React3.createElement(
                 Chip,
                 {
                   colorScheme: publishStatus === "Modified" ? "info" : publishStatus === "Added" ? "secondary" : "primary"
@@ -3326,7 +3872,7 @@ var ResourceExplorer = memo2(
             if (file.type !== "asset") return null;
             const asset = assets.find((a) => a.stableId === file.assetId) ?? assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
-            return /* @__PURE__ */ React2.createElement(
+            return /* @__PURE__ */ React3.createElement(
               FileExplorerDetail2,
               {
                 selected,
@@ -3336,7 +3882,7 @@ var ResourceExplorer = memo2(
               formatByteSize2(asset.size)
             );
           },
-          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React2.createElement(FileExplorerEmptyState2, null),
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React3.createElement(FileExplorerEmptyState2, null),
           itemRoleDescription: "clickable file item",
           getDropTargetParentIndex: (overIndex) => {
             const item = visibleItems[overIndex];
@@ -3403,11 +3949,11 @@ var ResourceExplorer = memo2(
           }
         }
       );
-      return /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(
         FileExplorerLayout2,
         {
           title: title ?? rootResourceName,
-          right: !readOnly && /* @__PURE__ */ React2.createElement(
+          right: !readOnly && /* @__PURE__ */ React3.createElement(
             FileExplorerUploadButton2,
             {
               showUploadButton,
@@ -3418,7 +3964,7 @@ var ResourceExplorer = memo2(
           ),
           className
         },
-        virtualized ? /* @__PURE__ */ React2.createElement(SingleDimensionAutoSizer, { dimension: "height" }, (height) => renderCollection(height)) : renderCollection(void 0)
+        virtualized ? /* @__PURE__ */ React3.createElement(SingleDimensionAutoSizer, { dimension: "height" }, (height) => renderCollection(height)) : renderCollection(void 0)
       );
     }
   )
@@ -3454,6 +4000,7 @@ function getPublishStatus({
   );
 }
 export {
+  GitFileExplorer2 as GitFileExplorer,
   MediaCollection,
   PLACEHOLDER_ITEM_NAME,
   ResourceExplorer,
@@ -3471,7 +4018,7 @@ export {
   getContentTypeFromFile,
   getDepthMap,
   getParentDirectories,
-  getVisibleItems,
+  getVisibleItems2 as getVisibleItems,
   gridThumbnailDimension,
   mediaDeleteMediaItems,
   mediaGetDepthMap,