@noya-app/noya-file-explorer 0.0.30 → 0.0.32

package/dist/index.js

@@ -1109,6 +1109,7 @@ var require_lib = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  GitFileExplorer: () => GitFileExplorer2,
   MediaCollection: () => MediaCollection,
   PLACEHOLDER_ITEM_NAME: () => PLACEHOLDER_ITEM_NAME,
   ResourceExplorer: () => ResourceExplorer,
@@ -1126,7 +1127,7 @@ __export(src_exports, {
   getContentTypeFromFile: () => getContentTypeFromFile,
   getDepthMap: () => getDepthMap,
   getParentDirectories: () => getParentDirectories,
-  getVisibleItems: () => getVisibleItems,
+  getVisibleItems: () => getVisibleItems2,
   gridThumbnailDimension: () => gridThumbnailDimension,
   mediaDeleteMediaItems: () => mediaDeleteMediaItems,
   mediaGetDepthMap: () => mediaGetDepthMap,
@@ -1150,14 +1151,596 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/MediaCollection.tsx
+// src/GitFileExplorer.tsx
 var import_noya_designsystem = require("@noya-app/noya-designsystem");
 var import_noya_icons = require("@noya-app/noya-icons");
-var import_noya_multiplayer_react = require("@noya-app/noya-multiplayer-react");
-var import_noya_utils2 = require("@noya-app/noya-utils");
+var import_react_utils2 = require("@noya-app/react-utils");
+var import_react3 = __toESM(require("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
 var import_react_utils = require("@noya-app/react-utils");
 var import_browser_fs_access = require("browser-fs-access");
 var import_react = require("react");
+function useGitFileOperations({
+  repoId,
+  repoFilesState,
+  gitManager
+}) {
+  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
+  const createFile = (0, import_react.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 = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)(async () => {
+    try {
+      const files = await (0, import_browser_fs_access.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 (0, import_react_utils.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 = (0, import_react.useCallback)(
+    async (event) => {
+      event.preventDefault();
+      try {
+        setIsUploading(true);
+        const droppedFiles = await (0, import_react_utils.collectDroppedFiles)(event.dataTransfer);
+        if (droppedFiles.length === 0) return;
+        const createOperations = await Promise.all(
+          droppedFiles.map(async ({ file, relativePath }) => ({
+            path: relativePath,
+            content: await (0, import_react_utils.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
+var import_react2 = require("react");
+function useGitFileTree({ repoFilesState }) {
+  const [expandedDirs, setExpandedDirs] = (0, import_react2.useState)(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [tempItem, setTempItem] = (0, import_react2.useState)(void 0);
+  const allItems = (0, import_react2.useMemo)(
+    () => parseFilesToTree(repoFilesState.files),
+    [repoFilesState.files]
+  );
+  const allItemsWithTemp = (0, import_react2.useMemo)(() => {
+    if (!tempItem) return allItems;
+    return [...allItems, tempItem];
+  }, [allItems, tempItem]);
+  const visibleItems = (0, import_react2.useMemo)(
+    () => getVisibleItems(allItemsWithTemp, expandedDirs),
+    [allItemsWithTemp, expandedDirs]
+  );
+  const getExpanded = (0, import_react2.useCallback)(
+    (item) => {
+      if (!item.isDirectory) return void 0;
+      return expandedDirs.has(item.path);
+    },
+    [expandedDirs]
+  );
+  const setExpanded = (0, import_react2.useCallback)((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 = (0, import_react2.useCallback)((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 = (0, import_react2.useCallback)(() => {
+    const newItem = createTempFileItem();
+    setTempItem(newItem);
+    return newItem;
+  }, []);
+  const clearTempItem = (0, import_react2.useCallback)(() => {
+    setTempItem(void 0);
+  }, []);
+  return {
+    visibleItems,
+    tempItem,
+    getExpanded,
+    setExpanded,
+    toggleExpanded,
+    addTempItem,
+    clearTempItem
+  };
+}
+
+// src/GitFileExplorer.tsx
+function useDelayedTrue(condition, delayMs) {
+  const [delayedValue, setDelayedValue] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (!condition) {
+      setDelayedValue(false);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setDelayedValue(true);
+    }, delayMs);
+    return () => clearTimeout(timeout);
+  }, [condition, delayMs]);
+  return delayedValue;
+}
+var GitFileExplorerInner = (0, import_react3.memo)(
+  (0, import_react3.forwardRef)(function GitFileExplorer({
+    repoId,
+    repoFilesState,
+    gitManager,
+    selectedIds: selectedIdsProp,
+    onSelectionChange,
+    onFileSelect,
+    className,
+    title = "Files"
+  }, ref) {
+    const [internalSelectedIds, setInternalSelectedIds] = (0, import_react3.useState)(
+      []
+    );
+    const selectedIds = selectedIdsProp ?? internalSelectedIds;
+    const baseSetSelectedIds = onSelectionChange ?? setInternalSelectedIds;
+    const dropTargetRef = (0, import_react3.useRef)(null);
+    const collectionRef = (0, import_react3.useRef)(null);
+    const openConfirmationDialog = (0, import_noya_designsystem.useOpenConfirmationDialog)();
+    const {
+      visibleItems,
+      getExpanded,
+      setExpanded,
+      toggleExpanded,
+      addTempItem,
+      clearTempItem
+    } = useGitFileTree({ repoFilesState });
+    const setSelectedIds = (0, import_react3.useCallback)(
+      (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 } = (0, import_react_utils2.useFileDropTarget)(
+      dropTargetRef,
+      handleFileDrop
+    );
+    const handleAddFile = (0, import_react3.useCallback)(() => {
+      const newItem = addTempItem();
+      setTimeout(() => {
+        collectionRef.current?.editName(newItem.id);
+      }, 50);
+    }, [addTempItem]);
+    const handleStartRename = (0, import_react3.useCallback)((itemId) => {
+      collectionRef.current?.editName(itemId);
+    }, []);
+    const handleRename = (0, import_react3.useCallback)(
+      async (item, newName) => {
+        if (isTempItem(item)) {
+          clearTempItem();
+          if (!newName) return;
+        }
+        await renameFile(item, newName);
+      },
+      [renameFile, clearTempItem]
+    );
+    const handleDelete = (0, import_react3.useCallback)(
+      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 = (0, import_react3.useCallback)(
+      (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 = (0, import_react3.useMemo)(
+      () => (0, import_noya_designsystem.createSectionedMenu)([
+        {
+          title: "New File",
+          value: "newFile",
+          icon: /* @__PURE__ */ import_react3.default.createElement(import_noya_icons.PlusIcon, null)
+        },
+        {
+          title: "Upload Files",
+          value: "uploadFiles",
+          icon: /* @__PURE__ */ import_react3.default.createElement(import_noya_icons.UploadIcon, null)
+        }
+      ]),
+      []
+    );
+    const handleHeaderMenuAction = (0, import_react3.useCallback)(
+      (action) => {
+        switch (action) {
+          case "newFile":
+            handleAddFile();
+            break;
+          case "uploadFiles":
+            uploadFiles();
+            break;
+        }
+      },
+      [handleAddFile, uploadFiles]
+    );
+    const handleMenuAction = (0, import_react3.useCallback)(
+      (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 = (0, import_react3.useMemo)(() => {
+      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 (0, import_noya_designsystem.createSectionedMenu)(
+        [
+          {
+            title: "Add File",
+            value: "addFile",
+            icon: /* @__PURE__ */ import_react3.default.createElement(import_noya_icons.PlusIcon, null)
+          }
+        ],
+        [
+          singleSelected && isFile && {
+            title: "Rename",
+            value: "rename",
+            icon: /* @__PURE__ */ import_react3.default.createElement(import_noya_icons.InputIcon, null)
+          },
+          hasSelection && {
+            title: "Delete",
+            value: "delete",
+            icon: /* @__PURE__ */ import_react3.default.createElement(import_noya_icons.TrashIcon, null)
+          }
+        ]
+      );
+    }, [selectedIds, visibleItems]);
+    (0, import_react3.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 = (0, import_react3.useCallback)(() => {
+      const hasError = !!repoFilesState.error;
+      let content = null;
+      if (isLoading && showLoading) {
+        content = /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Small, null, "Loading files...");
+      } else if (isLoading) {
+        content = null;
+      } else if (hasError) {
+        content = /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Small, null, "Error: ", repoFilesState.error);
+      } else {
+        content = /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Small, null, "No files yet"), /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Button, { onClick: handleAddFile }, "Add a file"));
+      }
+      return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+      import_noya_designsystem.Section,
+      {
+        title,
+        className: (0, import_noya_designsystem.cx)("n-px-3", className),
+        right: /* @__PURE__ */ import_react3.default.createElement("div", { className: "n-flex n-items-center n-gap-1" }, isRefreshing && /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Small, { color: "textDisabled" }, "Syncing..."), isUploading && /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Small, { color: "textDisabled" }, "Uploading..."), /* @__PURE__ */ import_react3.default.createElement(
+          import_noya_designsystem.DropdownMenu,
+          {
+            items: headerMenuItems,
+            onSelect: handleHeaderMenuAction
+          },
+          /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.IconButton, { iconName: "DotsVerticalIcon" })
+        ))
+      },
+      /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          ref: dropTargetRef,
+          className: (0, import_noya_designsystem.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__ */ import_react3.default.createElement(
+          import_noya_designsystem.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__ */ import_react3.default.createElement(
+              import_noya_designsystem.MediaThumbnail,
+              {
+                iconName: item.isDirectory ? "FolderIcon" : void 0,
+                fileName: item.isDirectory ? void 0 : item.name,
+                selected,
+                size: "small"
+              }
+            )
+          }
+        )
+      )
+    );
+  })
+);
+var GitFileExplorer2 = (0, import_react3.memo)(
+  (0, import_react3.forwardRef)(function GitFileExplorer3(props, ref) {
+    if (!props.repoFilesState) {
+      return /* @__PURE__ */ import_react3.default.createElement(import_noya_designsystem.Section, { title: props.title, className: (0, import_noya_designsystem.cx)("n-px-3", props.className) }, null);
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(
+      GitFileExplorerInner,
+      {
+        ...props,
+        repoFilesState: props.repoFilesState,
+        ref
+      }
+    );
+  })
+);
+
+// src/MediaCollection.tsx
+var import_noya_designsystem2 = require("@noya-app/noya-designsystem");
+var import_noya_icons2 = require("@noya-app/noya-icons");
+var import_noya_multiplayer_react = require("@noya-app/noya-multiplayer-react");
+var import_noya_utils2 = require("@noya-app/noya-utils");
+var import_react_utils3 = require("@noya-app/react-utils");
+var import_browser_fs_access2 = require("browser-fs-access");
+var import_react4 = require("react");
 
 // src/utils/mediaItemTree.ts
 var import_noya_utils = require("@noya-app/noya-utils");
@@ -1242,7 +1825,7 @@ var createMediaItemTree = (mediaMap) => {
 
 // src/MediaCollection.tsx
 var import_imfs4 = require("imfs");
-var import_react2 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/utils/files.ts
 var import_imfs3 = require("imfs");
@@ -1252,7 +1835,7 @@ var import_tree_visit3 = __toESM(require_lib());
 var import_noya_schemas = require("@noya-app/noya-schemas");
 var import_imfs2 = require("imfs");
 var import_tree_visit2 = __toESM(require_lib());
-var getVisibleItems = ({
+var getVisibleItems2 = ({
   expandedMap,
   fileKindFilter,
   rootItemId,
@@ -1697,7 +2280,7 @@ function encodeFileContentForThumbnail(pathProp, item) {
   }
   return void 0;
 }
-var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
+var MediaThumbnailInternal = (0, import_react_utils3.memoGeneric)(
   ({
     item,
     selected,
@@ -1727,8 +2310,8 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
     }
     const fileName = pathProp ? import_imfs4.path.basename(pathProp) : void 0;
     const dimensions = width && height ? { width, height } : void 0;
-    return /* @__PURE__ */ import_react2.default.createElement(
-      import_noya_designsystem.MediaThumbnail,
+    return /* @__PURE__ */ import_react5.default.createElement(
+      import_noya_designsystem2.MediaThumbnail,
       {
         contentType,
         iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
@@ -1742,8 +2325,8 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
     );
   }
 );
-var MediaCollection = (0, import_react.memo)(
-  (0, import_react.forwardRef)(function MediaCollection2({
+var MediaCollection = (0, import_react4.memo)(
+  (0, import_react4.forwardRef)(function MediaCollection2({
     sortableId,
     onSelectionChange,
     selectedIds: selectedIdsProp,
@@ -1774,35 +2357,35 @@ var MediaCollection = (0, import_react.memo)(
     onDidDeleteItems,
     onAssetsUploaded
   }, ref) {
-    const setMedia = (0, import_react.useCallback)(
+    const setMedia = (0, import_react4.useCallback)(
       (...args) => {
         setMediaProp?.(...args);
       },
       [setMediaProp]
     );
-    const tree = (0, import_react.useMemo)(() => createMediaItemTree(media), [media]);
-    const [tempItem, setTempItem] = (0, import_react.useState)(
+    const tree = (0, import_react4.useMemo)(() => createMediaItemTree(media), [media]);
+    const [tempItem, setTempItem] = (0, import_react4.useState)(
       void 0
     );
-    const mediaWithTempItem = (0, import_react.useMemo)(
+    const mediaWithTempItem = (0, import_react4.useMemo)(
       () => ({
         ...media,
         ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
       }),
       [media, tempItem]
     );
-    const treeWithTempItem = (0, import_react.useMemo)(
+    const treeWithTempItem = (0, import_react4.useMemo)(
       () => createMediaItemTree(mediaWithTempItem),
       [mediaWithTempItem]
     );
-    const temp = (0, import_react.useMemo)(
+    const temp = (0, import_react4.useMemo)(
       () => ({
         media: mediaWithTempItem,
         tree: treeWithTempItem
       }),
       [mediaWithTempItem, treeWithTempItem]
     );
-    const [selectedIds, setSelectedIds] = (0, import_react_utils.useControlledOrUncontrolled)(
+    const [selectedIds, setSelectedIds] = (0, import_react_utils3.useControlledOrUncontrolled)(
       {
         defaultValue: [],
         value: selectedIdsProp,
@@ -1811,8 +2394,8 @@ var MediaCollection = (0, import_react.memo)(
     );
     const assetManager = (0, import_noya_multiplayer_react.useAssetManager)();
     const assets = (0, import_noya_multiplayer_react.useAssets)();
-    const [expandedMap, setExpandedMap] = (0, import_react.useState)({});
-    const visibleItems = (0, import_react.useMemo)(
+    const [expandedMap, setExpandedMap] = (0, import_react4.useState)({});
+    const visibleItems = (0, import_react4.useMemo)(
       () => mediaGetVisibleItems({
         expandedMap,
         fileKindFilter,
@@ -1830,12 +2413,12 @@ var MediaCollection = (0, import_react.memo)(
         showRootItem
       ]
     );
-    const depthMap = (0, import_react.useMemo)(
+    const depthMap = (0, import_react4.useMemo)(
       () => mediaGetDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
       [treeWithTempItem, showAllDescendants]
     );
-    const collectionRef = (0, import_react.useRef)(null);
-    const selectedMediaItems = (0, import_react.useMemo)(
+    const collectionRef = (0, import_react4.useRef)(null);
+    const selectedMediaItems = (0, import_react4.useMemo)(
       () => treeWithTempItem.mediaItemsWithRoot.filter(
         (item) => selectedIds.includes(item.id)
       ),
@@ -1856,12 +2439,12 @@ var MediaCollection = (0, import_react.memo)(
       if (!itemPath || !firstSelectedPath) return false;
       return itemPath.startsWith(import_imfs4.path.dirname(firstSelectedPath));
     });
-    (0, import_react.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       if (initialExpanded) {
         setExpandedMap(initialExpanded);
       }
     }, [initialExpanded]);
-    const getExpanded = (0, import_react.useCallback)(
+    const getExpanded = (0, import_react4.useCallback)(
       (item) => {
         if (!expandable) return void 0;
         if (item.kind !== "folder") return void 0;
@@ -1870,8 +2453,8 @@ var MediaCollection = (0, import_react.memo)(
       },
       [expandedMap, expandable]
     );
-    const openConfirmationDialog = (0, import_noya_designsystem.useOpenConfirmationDialog)();
-    const handleDelete = (0, import_react.useCallback)(
+    const openConfirmationDialog = (0, import_noya_designsystem2.useOpenConfirmationDialog)();
+    const handleDelete = (0, import_react4.useCallback)(
       async (selectedIds2) => {
         const ok = await openConfirmationDialog({
           title: "Delete items",
@@ -1904,7 +2487,7 @@ var MediaCollection = (0, import_react.memo)(
         openConfirmationDialog
       ]
     );
-    const onRename = (0, import_react.useCallback)(
+    const onRename = (0, import_react4.useCallback)(
       (selectedItem, newName) => {
         if (!renamable) return;
         const selectedItemPath = treeWithTempItem.idToPathMap.get(
@@ -1934,7 +2517,7 @@ var MediaCollection = (0, import_react.memo)(
       },
       [renamable, setMedia, temp.media, temp.tree, treeWithTempItem.idToPathMap]
     );
-    const handleAddFolder = (0, import_react.useCallback)(
+    const handleAddFolder = (0, import_react4.useCallback)(
       (currentFolderId) => {
         const newFolder = createMediaFolder();
         const currentFolderPath = tree.idToPathMap.get(currentFolderId);
@@ -1949,7 +2532,7 @@ var MediaCollection = (0, import_react.memo)(
       },
       [tree]
     );
-    const handleAddFile = (0, import_react.useCallback)(
+    const handleAddFile = (0, import_react4.useCallback)(
       (currentFolderId) => {
         const newFile = createMediaFile({
           content: "",
@@ -1969,7 +2552,7 @@ var MediaCollection = (0, import_react.memo)(
       },
       [tree.idToPathMap]
     );
-    const handleMoveUpAFolder = (0, import_react.useCallback)(
+    const handleMoveUpAFolder = (0, import_react4.useCallback)(
       (selectedIds2) => {
         const newMedia = mediaMoveUpAFolder({
           tree,
@@ -1981,11 +2564,11 @@ var MediaCollection = (0, import_react.memo)(
       },
       [media, tree, setMedia]
     );
-    const [isUploading, setIsUploading] = (0, import_react.useState)(false);
-    const handleUpload = (0, import_react.useCallback)(
+    const [isUploading, setIsUploading] = (0, import_react4.useState)(false);
+    const handleUpload = (0, import_react4.useCallback)(
       async (selectedId) => {
         try {
-          const files = await (0, import_browser_fs_access.fileOpen)({ multiple: true });
+          const files = await (0, import_browser_fs_access2.fileOpen)({ multiple: true });
           if (!files || !Array.isArray(files) || files.length === 0) return;
           const parentPath = tree.idToPathMap.get(selectedId);
           if (!parentPath) return;
@@ -2022,18 +2605,18 @@ var MediaCollection = (0, import_react.memo)(
       },
       [tree.idToPathMap, setMedia, media, assetManager, onAssetsUploaded]
     );
-    const handleDownload = (0, import_react.useCallback)(
+    const handleDownload = (0, import_react4.useCallback)(
       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);
           if (!asset?.url) return;
-          return (0, import_react_utils.downloadUrl)(asset.url, tree.getNameForId(item.id));
+          return (0, import_react_utils3.downloadUrl)(asset.url, tree.getNameForId(item.id));
         });
         await Promise.all(downloadPromises);
       },
       [assets, tree]
     );
-    const handlePreview = (0, import_react.useCallback)(
+    const handlePreview = (0, import_react4.useCallback)(
       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);
@@ -2044,10 +2627,10 @@ var MediaCollection = (0, import_react.memo)(
       },
       [assets]
     );
-    const handleReplace = (0, import_react.useCallback)(
+    const handleReplace = (0, import_react4.useCallback)(
       async (selectedItem) => {
         try {
-          const file = await (0, import_browser_fs_access.fileOpen)();
+          const file = await (0, import_browser_fs_access2.fileOpen)();
           if (!file) return;
           const created = await assetManager.create(file);
           const assetStableId = created.id;
@@ -2073,13 +2656,13 @@ var MediaCollection = (0, import_react.memo)(
       },
       [media, setMedia, assetManager, tree]
     );
-    const handleRename = (0, import_react.useCallback)(
+    const handleRename = (0, import_react4.useCallback)(
       (selectedItemId) => {
         collectionRef.current?.editName(selectedItemId);
       },
       [collectionRef]
     );
-    const handleMoveMediaInsideFolder = (0, import_react.useCallback)(
+    const handleMoveMediaInsideFolder = (0, import_react4.useCallback)(
       (sourceItem, targetItem) => {
         const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
@@ -2097,52 +2680,52 @@ var MediaCollection = (0, import_react.memo)(
       },
       [media, setMedia, tree]
     );
-    const assetContextMenuItems = (0, import_react.useMemo)(() => {
-      return (0, import_noya_designsystem.createSectionedMenu)(
+    const assetContextMenuItems = (0, import_react4.useMemo)(() => {
+      return (0, import_noya_designsystem2.createSectionedMenu)(
         [
           !rootSelected && singleItemSelected && {
             title: "Rename",
             value: "rename",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.InputIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.InputIcon, null)
           },
           onlySingleAssetSelected && {
             title: "Replace",
             value: "replace",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.UpdateIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.UpdateIcon, null)
           },
           !rootSelected && {
             title: "Delete",
             value: "delete",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.TrashIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.TrashIcon, null)
           }
         ],
         [
           onlySingleFolderSelected && {
             title: "Upload Files",
             value: "upload",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.UploadIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.UploadIcon, null)
           },
           onlySingleFolderSelected && {
             title: "Add Folder",
             value: "addFolder",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.FolderIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.FolderIcon, null)
           },
           onlyAssetsSelected && tree.mediaItemsWithRoot.length > 0 && {
             title: "Download",
             value: "download",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.DownloadIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.DownloadIcon, null)
           },
           onlySingleAssetSelected && {
             title: "Preview",
             value: "preview",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.OpenInNewWindowIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.OpenInNewWindowIcon, null)
           }
         ],
         [
           !rootSelected && sameParentSelected && {
             title: "Move up a folder",
             value: "move",
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.ResetIcon, null)
+            icon: /* @__PURE__ */ import_react5.default.createElement(import_noya_icons2.ResetIcon, null)
           }
         ]
       );
@@ -2155,7 +2738,7 @@ var MediaCollection = (0, import_react.memo)(
       tree.mediaItemsWithRoot.length,
       sameParentSelected
     ]);
-    const handleMenuAction = (0, import_react.useCallback)(
+    const handleMenuAction = (0, import_react4.useCallback)(
       async (action, selectedItems) => {
         if (selectedItems.length === 0) return;
         switch (action) {
@@ -2197,7 +2780,7 @@ var MediaCollection = (0, import_react.memo)(
         handleMoveUpAFolder
       ]
     );
-    const handleSetExpanded = (0, import_react.useCallback)(
+    const handleSetExpanded = (0, import_react4.useCallback)(
       (item, expanded) => {
         setExpandedMap(
           (prev) => mediaUpdateExpandedMap({
@@ -2211,13 +2794,13 @@ var MediaCollection = (0, import_react.memo)(
       },
       [expandable, tree]
     );
-    const renderAction = (0, import_react.useMemo)(() => {
+    const renderAction = (0, import_react4.useMemo)(() => {
       if (renderActionProp) return renderActionProp;
       return ({
         selected,
         onOpenChange
-      }) => /* @__PURE__ */ import_react2.default.createElement(
-        import_noya_designsystem.ActionMenu,
+      }) => /* @__PURE__ */ import_react5.default.createElement(
+        import_noya_designsystem2.ActionMenu,
         {
           menuItems: assetContextMenuItems,
           onSelect: (action) => handleMenuAction(action, selectedMediaItems),
@@ -2225,8 +2808,8 @@ var MediaCollection = (0, import_react.memo)(
           onOpenChange,
           variant: viewType === "grid" ? "normal" : "bare",
           style: {
-            backgroundColor: selected ? import_noya_designsystem.cssVars.colors.selectedListItemBackground : "transparent",
-            color: selected ? import_noya_designsystem.cssVars.colors.selectedListItemText : void 0
+            backgroundColor: selected ? import_noya_designsystem2.cssVars.colors.selectedListItemBackground : "transparent",
+            color: selected ? import_noya_designsystem2.cssVars.colors.selectedListItemText : void 0
           }
         }
       );
@@ -2237,7 +2820,7 @@ var MediaCollection = (0, import_react.memo)(
       selectedMediaItems,
       viewType
     ]);
-    (0, import_react.useImperativeHandle)(ref, () => ({
+    (0, import_react4.useImperativeHandle)(ref, () => ({
       upload: (selectedId) => handleUpload(selectedId),
       delete: handleDelete,
       download: handleDownload,
@@ -2250,12 +2833,12 @@ var MediaCollection = (0, import_react.memo)(
       moveMediaInsideFolder: handleMoveMediaInsideFolder,
       getItemAtIndex: (index) => visibleItems[index]
     }));
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
-      import_noya_designsystem.FileExplorerLayout,
+    return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+      import_noya_designsystem2.FileExplorerLayout,
       {
         title: title ?? rootMediaItemName,
-        right: !readOnly && /* @__PURE__ */ import_react2.default.createElement(
-          import_noya_designsystem.FileExplorerUploadButton,
+        right: !readOnly && /* @__PURE__ */ import_react5.default.createElement(
+          import_noya_designsystem2.FileExplorerUploadButton,
           {
             showUploadButton,
             onUpload: () => handleUpload(rootMediaItem.id),
@@ -2265,8 +2848,8 @@ var MediaCollection = (0, import_react.memo)(
         ),
         className
       },
-      /* @__PURE__ */ import_react2.default.createElement(
-        import_noya_designsystem.FileExplorerCollection,
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_noya_designsystem2.FileExplorerCollection,
         {
           ref: collectionRef,
           sortableId,
@@ -2309,7 +2892,7 @@ var MediaCollection = (0, import_react.memo)(
           onRename,
           renamable,
           selectedIds,
-          renderThumbnail: (props) => /* @__PURE__ */ import_react2.default.createElement(
+          renderThumbnail: (props) => /* @__PURE__ */ import_react5.default.createElement(
             MediaThumbnailInternal,
             {
               ...props,
@@ -2322,9 +2905,9 @@ var MediaCollection = (0, import_react.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__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerDetail, { selected, size }, (0, import_noya_designsystem.formatByteSize)(asset.size));
+            return /* @__PURE__ */ import_react5.default.createElement(import_noya_designsystem2.FileExplorerDetail, { selected, size }, (0, import_noya_designsystem2.formatByteSize)(asset.size));
           },
-          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerEmptyState, null),
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react5.default.createElement(import_noya_designsystem2.FileExplorerEmptyState, null),
           itemRoleDescription: "clickable file item",
           getDropTargetParentIndex: (overIndex) => {
             const item = visibleItems[overIndex];
@@ -2397,16 +2980,16 @@ function acceptsMediaItemDrop(parameters) {
 }
 
 // src/ResourceExplorer.tsx
-var import_noya_designsystem2 = require("@noya-app/noya-designsystem");
-var import_noya_icons2 = require("@noya-app/noya-icons");
+var import_noya_designsystem3 = require("@noya-app/noya-designsystem");
+var import_noya_icons3 = require("@noya-app/noya-icons");
 var import_noya_multiplayer_react2 = require("@noya-app/noya-multiplayer-react");
 var import_noya_schemas3 = require("@noya-app/noya-schemas");
 var import_noya_utils4 = require("@noya-app/noya-utils");
-var import_react_utils2 = require("@noya-app/react-utils");
-var import_browser_fs_access2 = require("browser-fs-access");
-var import_react3 = require("react");
+var import_react_utils5 = require("@noya-app/react-utils");
+var import_browser_fs_access3 = require("browser-fs-access");
+var import_react6 = require("react");
 var import_imfs6 = require("imfs");
-var import_react4 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/utils/contentType.ts
 function getContentTypeFromFile(file) {
@@ -2487,13 +3070,8 @@ function getContentTypeFromExtension(extension) {
 // src/utils/handleFileDrop.ts
 var import_noya_schemas2 = require("@noya-app/noya-schemas");
 var import_noya_utils3 = require("@noya-app/noya-utils");
+var import_react_utils4 = require("@noya-app/react-utils");
 var import_imfs5 = require("imfs");
-function isDirectoryEntry(entry) {
-  return entry.isDirectory;
-}
-function isFileEntry(entry) {
-  return entry.isFile;
-}
 async function handleDataTransfer({
   accessibleByFileId,
   dataTransfer,
@@ -2501,66 +3079,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: import_imfs5.path.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, import_imfs5.path.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 (0, import_react_utils4.collectDroppedFiles)(dataTransfer);
     if (dropped.length === 0) return;
     const folderRelativePaths = /* @__PURE__ */ new Set();
     for (const { relativePath } of dropped) {
@@ -2617,7 +3136,7 @@ var gridThumbnailDimension = {
   width: 800,
   height: 800
 };
-var ResourceThumbnail = (0, import_react_utils2.memoGeneric)(
+var ResourceThumbnail = (0, import_react_utils5.memoGeneric)(
   ({
     item,
     selected,
@@ -2642,8 +3161,8 @@ var ResourceThumbnail = (0, import_react_utils2.memoGeneric)(
       contentType = contentTypeProp;
     }
     const fileName = pathProp ? import_imfs6.path.basename(pathProp) : void 0;
-    return /* @__PURE__ */ import_react4.default.createElement(
-      import_noya_designsystem2.MediaThumbnail,
+    return /* @__PURE__ */ import_react7.default.createElement(
+      import_noya_designsystem3.MediaThumbnail,
       {
         contentType,
         iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
@@ -2658,8 +3177,8 @@ var ResourceThumbnail = (0, import_react_utils2.memoGeneric)(
     );
   }
 );
-var ResourceExplorer = (0, import_react3.memo)(
-  (0, import_react3.forwardRef)(
+var ResourceExplorer = (0, import_react6.memo)(
+  (0, import_react6.forwardRef)(
     function ResourceExplorer2({
       parentFileId,
       sortableId,
@@ -2698,44 +3217,44 @@ var ResourceExplorer = (0, import_react3.memo)(
       renderUser,
       showFileSizes = true
     }, ref) {
-      const setMedia = (0, import_react3.useCallback)(
+      const setMedia = (0, import_react6.useCallback)(
         (...args) => {
           setMediaProp?.(...args);
         },
         [setMediaProp]
       );
-      const tree = (0, import_react3.useMemo)(() => (0, import_noya_schemas3.createResourceTree)(media), [media]);
-      const [tempItem, setTempItem] = (0, import_react3.useState)(
+      const tree = (0, import_react6.useMemo)(() => (0, import_noya_schemas3.createResourceTree)(media), [media]);
+      const [tempItem, setTempItem] = (0, import_react6.useState)(
         void 0
       );
-      const mediaWithTempItem = (0, import_react3.useMemo)(
+      const mediaWithTempItem = (0, import_react6.useMemo)(
         () => ({
           ...media,
           ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
         }),
         [media, tempItem]
       );
-      const treeWithTempItem = (0, import_react3.useMemo)(
+      const treeWithTempItem = (0, import_react6.useMemo)(
         () => (0, import_noya_schemas3.createResourceTree)(mediaWithTempItem),
         [mediaWithTempItem]
       );
-      const temp = (0, import_react3.useMemo)(
+      const temp = (0, import_react6.useMemo)(
         () => ({
           media: mediaWithTempItem,
           tree: treeWithTempItem
         }),
         [mediaWithTempItem, treeWithTempItem]
       );
-      const [selectedIds, setSelectedIds] = (0, import_react_utils2.useControlledOrUncontrolled)({
+      const [selectedIds, setSelectedIds] = (0, import_react_utils5.useControlledOrUncontrolled)({
         defaultValue: [],
         value: selectedIdsProp,
         onChange: onSelectionChange
       });
       const assetManager = (0, import_noya_multiplayer_react2.useAssetManager)();
       const assets = (0, import_noya_multiplayer_react2.useAssets)();
-      const [expandedMap, setExpandedMap] = (0, import_react3.useState)({});
-      const visibleItems = (0, import_react3.useMemo)(
-        () => getVisibleItems({
+      const [expandedMap, setExpandedMap] = (0, import_react6.useState)({});
+      const visibleItems = (0, import_react6.useMemo)(
+        () => getVisibleItems2({
           expandedMap,
           fileKindFilter,
           rootItemId,
@@ -2752,12 +3271,12 @@ var ResourceExplorer = (0, import_react3.memo)(
           showRootItem
         ]
       );
-      const depthMap = (0, import_react3.useMemo)(
+      const depthMap = (0, import_react6.useMemo)(
         () => getDepthMap(import_noya_schemas3.rootResource, treeWithTempItem, showAllDescendants),
         [treeWithTempItem, showAllDescendants]
       );
-      const collectionRef = (0, import_react3.useRef)(null);
-      const selectedResources = (0, import_react3.useMemo)(
+      const collectionRef = (0, import_react6.useRef)(null);
+      const selectedResources = (0, import_react6.useMemo)(
         () => treeWithTempItem.resourcesWithRoot.filter(
           (item) => selectedIds.includes(item.id)
         ),
@@ -2778,12 +3297,12 @@ var ResourceExplorer = (0, import_react3.memo)(
         if (!itemPath || !firstSelectedPath) return false;
         return itemPath.startsWith(import_imfs6.path.dirname(firstSelectedPath));
       });
-      (0, import_react3.useEffect)(() => {
+      (0, import_react6.useEffect)(() => {
         if (initialExpanded) {
           setExpandedMap(initialExpanded);
         }
       }, [initialExpanded]);
-      const getExpanded = (0, import_react3.useCallback)(
+      const getExpanded = (0, import_react6.useCallback)(
         (item) => {
           if (!expandable) return void 0;
           if (item.type !== "directory") return void 0;
@@ -2792,8 +3311,8 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [expandedMap, expandable]
       );
-      const openConfirmationDialog = (0, import_noya_designsystem2.useOpenConfirmationDialog)();
-      const handleDelete = (0, import_react3.useCallback)(
+      const openConfirmationDialog = (0, import_noya_designsystem3.useOpenConfirmationDialog)();
+      const handleDelete = (0, import_react6.useCallback)(
         async (selectedIds2) => {
           const ok = await openConfirmationDialog({
             title: "Delete items",
@@ -2826,7 +3345,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           openConfirmationDialog
         ]
       );
-      const onRename = (0, import_react3.useCallback)(
+      const onRename = (0, import_react6.useCallback)(
         (selectedItem, newName) => {
           if (!renamable) return;
           const selectedItemPath = treeWithTempItem.idToPathMap.get(
@@ -2862,7 +3381,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           treeWithTempItem.idToPathMap
         ]
       );
-      const handleAddFolder = (0, import_react3.useCallback)(
+      const handleAddFolder = (0, import_react6.useCallback)(
         (currentFolderId) => {
           const currentFolderPath = tree.idToPathMap.get(currentFolderId);
           if (!currentFolderPath) return;
@@ -2883,7 +3402,7 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [parentFileId, tree]
       );
-      const handleMoveUpAFolder = (0, import_react3.useCallback)(
+      const handleMoveUpAFolder = (0, import_react6.useCallback)(
         (selectedIds2) => {
           const newMedia = moveUpAFolder({
             tree,
@@ -2895,11 +3414,11 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [media, tree, setMedia]
       );
-      const [isUploading, setIsUploading] = (0, import_react3.useState)(false);
-      const handleUpload = (0, import_react3.useCallback)(
+      const [isUploading, setIsUploading] = (0, import_react6.useState)(false);
+      const handleUpload = (0, import_react6.useCallback)(
         async (selectedId) => {
           try {
-            const files = await (0, import_browser_fs_access2.fileOpen)({ multiple: true });
+            const files = await (0, import_browser_fs_access3.fileOpen)({ multiple: true });
             if (!files || !Array.isArray(files) || files.length === 0) return;
             const parentPath = tree.idToPathMap.get(selectedId);
             if (!parentPath) return;
@@ -2944,18 +3463,18 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [tree, setMedia, media, onAssetsUploaded, parentFileId]
       );
-      const handleDownload = (0, import_react3.useCallback)(
+      const handleDownload = (0, import_react6.useCallback)(
         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);
             if (!asset?.url) return;
-            return (0, import_react_utils2.downloadUrl)(asset.url, tree.getNameForId(item.id));
+            return (0, import_react_utils5.downloadUrl)(asset.url, tree.getNameForId(item.id));
           });
           await Promise.all(downloadPromises);
         },
         [assets, tree]
       );
-      const handlePreview = (0, import_react3.useCallback)(
+      const handlePreview = (0, import_react6.useCallback)(
         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);
@@ -2966,10 +3485,10 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [assets]
       );
-      const handleReplace = (0, import_react3.useCallback)(
+      const handleReplace = (0, import_react6.useCallback)(
         async (selectedItem) => {
           try {
-            const file = await (0, import_browser_fs_access2.fileOpen)();
+            const file = await (0, import_browser_fs_access3.fileOpen)();
             if (!file) return;
             const created = await assetManager.create(file);
             const assetStableId = created.id;
@@ -2995,13 +3514,13 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [media, setMedia, assetManager, tree]
       );
-      const handleRename = (0, import_react3.useCallback)(
+      const handleRename = (0, import_react6.useCallback)(
         (selectedItemId) => {
           collectionRef.current?.editName(selectedItemId);
         },
         [collectionRef]
       );
-      const handleMoveMediaInsideFolder = (0, import_react3.useCallback)(
+      const handleMoveMediaInsideFolder = (0, import_react6.useCallback)(
         (sourceItems, targetItem) => {
           const newMedia = moveMediaInsideFolder({
             sourceItemIds: sourceItems.map((item) => item.id),
@@ -3019,52 +3538,52 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [media, setMedia, tree]
       );
-      const assetContextMenuItems = (0, import_react3.useMemo)(() => {
-        return (0, import_noya_designsystem2.createSectionedMenu)(
+      const assetContextMenuItems = (0, import_react6.useMemo)(() => {
+        return (0, import_noya_designsystem3.createSectionedMenu)(
           [
             !rootSelected && singleItemSelected && {
               title: "Rename",
               value: "rename",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.InputIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.InputIcon, null)
             },
             onlySingleAssetSelected && {
               title: "Replace",
               value: "replace",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.UpdateIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.UpdateIcon, null)
             },
             !rootSelected && {
               title: "Delete",
               value: "delete",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.TrashIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.TrashIcon, null)
             }
           ],
           [
             onlySingleFolderSelected && {
               title: "Upload Files",
               value: "upload",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.UploadIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.UploadIcon, null)
             },
             onlySingleFolderSelected && {
               title: "Add Folder",
               value: "addFolder",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.FolderIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.FolderIcon, null)
             },
             onlyAssetsSelected && tree.resourcesWithRoot.length > 0 && {
               title: "Download",
               value: "download",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.DownloadIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.DownloadIcon, null)
             },
             onlySingleAssetSelected && {
               title: "Preview",
               value: "preview",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.OpenInNewWindowIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.OpenInNewWindowIcon, null)
             }
           ],
           [
             !rootSelected && sameParentSelected && {
               title: "Move up a folder",
               value: "move",
-              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.ResetIcon, null)
+              icon: /* @__PURE__ */ import_react7.default.createElement(import_noya_icons3.ResetIcon, null)
             }
           ]
         );
@@ -3077,7 +3596,7 @@ var ResourceExplorer = (0, import_react3.memo)(
         tree.resourcesWithRoot.length,
         sameParentSelected
       ]);
-      const handleMenuAction = (0, import_react3.useCallback)(
+      const handleMenuAction = (0, import_react6.useCallback)(
         async (action, selectedItems) => {
           if (selectedItems.length === 0) return;
           switch (action) {
@@ -3119,7 +3638,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           handleMoveUpAFolder
         ]
       );
-      const handleSetExpanded = (0, import_react3.useCallback)(
+      const handleSetExpanded = (0, import_react6.useCallback)(
         (item, expanded) => {
           setExpandedMap(
             (prev) => updateExpandedMap({
@@ -3133,12 +3652,12 @@ var ResourceExplorer = (0, import_react3.memo)(
         },
         [expandable, tree]
       );
-      const renderAction = (0, import_react3.useMemo)(() => {
+      const renderAction = (0, import_react6.useMemo)(() => {
         if (renderActionProp) return renderActionProp;
         return ({
           selected,
           onOpenChange
-        }) => /* @__PURE__ */ import_react4.default.createElement(
+        }) => /* @__PURE__ */ import_react7.default.createElement(
           "div",
           {
             style: {
@@ -3147,8 +3666,8 @@ var ResourceExplorer = (0, import_react3.memo)(
               justifyContent: "flex-end"
             }
           },
-          /* @__PURE__ */ import_react4.default.createElement(
-            import_noya_designsystem2.ActionMenu,
+          /* @__PURE__ */ import_react7.default.createElement(
+            import_noya_designsystem3.ActionMenu,
             {
               menuItems: assetContextMenuItems,
               onSelect: (action) => handleMenuAction(action, selectedResources),
@@ -3156,8 +3675,8 @@ var ResourceExplorer = (0, import_react3.memo)(
               onOpenChange,
               variant: viewType === "grid" ? "normal" : "bare",
               style: {
-                backgroundColor: selected ? import_noya_designsystem2.cssVars.colors.selectedListItemBackground : "transparent",
-                color: selected ? import_noya_designsystem2.cssVars.colors.selectedListItemText : void 0
+                backgroundColor: selected ? import_noya_designsystem3.cssVars.colors.selectedListItemBackground : "transparent",
+                color: selected ? import_noya_designsystem3.cssVars.colors.selectedListItemText : void 0
               }
             }
           )
@@ -3169,7 +3688,7 @@ var ResourceExplorer = (0, import_react3.memo)(
         selectedResources,
         viewType
       ]);
-      (0, import_react3.useImperativeHandle)(ref, () => ({
+      (0, import_react6.useImperativeHandle)(ref, () => ({
         upload: (selectedId) => handleUpload(selectedId),
         delete: handleDelete,
         download: handleDownload,
@@ -3181,7 +3700,7 @@ var ResourceExplorer = (0, import_react3.memo)(
         moveMediaInsideFolder: handleMoveMediaInsideFolder,
         getItemAtIndex: (index) => visibleItems[index]
       }));
-      const diffResources = (0, import_react3.useMemo)(() => {
+      const diffResources = (0, import_react6.useMemo)(() => {
         if (!publishedResources) return;
         const diff = (0, import_noya_schemas3.diffResourceMaps)(publishedResources, media, "stableId");
         return {
@@ -3196,9 +3715,9 @@ var ResourceExplorer = (0, import_react3.memo)(
           )
         };
       }, [media, publishedResources]);
-      const keyExtractor = (0, import_react3.useCallback)((item) => item.id, []);
-      const renderCollection = (virtualizedHeight) => /* @__PURE__ */ import_react4.default.createElement(
-        import_noya_designsystem2.FileExplorerCollection,
+      const keyExtractor = (0, import_react6.useCallback)((item) => item.id, []);
+      const renderCollection = (virtualizedHeight) => /* @__PURE__ */ import_react7.default.createElement(
+        import_noya_designsystem3.FileExplorerCollection,
         {
           ref: collectionRef,
           sortableId,
@@ -3248,7 +3767,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           itemClassName,
           itemStyle,
           virtualized: virtualizedHeight,
-          renderThumbnail: (props) => /* @__PURE__ */ import_react4.default.createElement(
+          renderThumbnail: (props) => /* @__PURE__ */ import_react7.default.createElement(
             ResourceThumbnail,
             {
               ...props,
@@ -3264,13 +3783,13 @@ var ResourceExplorer = (0, import_react3.memo)(
               resource: file,
               diff: diffResources
             });
-            return /* @__PURE__ */ import_react4.default.createElement(
+            return /* @__PURE__ */ import_react7.default.createElement(
               "div",
               {
                 style: { display: "flex", alignItems: "center", gap: "6px" }
               },
-              publishStatus && /* @__PURE__ */ import_react4.default.createElement(
-                import_noya_designsystem2.Chip,
+              publishStatus && /* @__PURE__ */ import_react7.default.createElement(
+                import_noya_designsystem3.Chip,
                 {
                   colorScheme: publishStatus === "Modified" ? "info" : publishStatus === "Added" ? "secondary" : "primary"
                 },
@@ -3284,17 +3803,17 @@ var ResourceExplorer = (0, import_react3.memo)(
             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__ */ import_react4.default.createElement(
-              import_noya_designsystem2.FileExplorerDetail,
+            return /* @__PURE__ */ import_react7.default.createElement(
+              import_noya_designsystem3.FileExplorerDetail,
               {
                 selected,
                 size,
                 style: { minWidth: "75px", textAlign: "right" }
               },
-              (0, import_noya_designsystem2.formatByteSize)(asset.size)
+              (0, import_noya_designsystem3.formatByteSize)(asset.size)
             );
           },
-          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react4.default.createElement(import_noya_designsystem2.FileExplorerEmptyState, null),
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react7.default.createElement(import_noya_designsystem3.FileExplorerEmptyState, null),
           itemRoleDescription: "clickable file item",
           getDropTargetParentIndex: (overIndex) => {
             const item = visibleItems[overIndex];
@@ -3361,12 +3880,12 @@ var ResourceExplorer = (0, import_react3.memo)(
           }
         }
       );
-      return /* @__PURE__ */ import_react4.default.createElement(
-        import_noya_designsystem2.FileExplorerLayout,
+      return /* @__PURE__ */ import_react7.default.createElement(
+        import_noya_designsystem3.FileExplorerLayout,
         {
           title: title ?? import_noya_schemas3.rootResourceName,
-          right: !readOnly && /* @__PURE__ */ import_react4.default.createElement(
-            import_noya_designsystem2.FileExplorerUploadButton,
+          right: !readOnly && /* @__PURE__ */ import_react7.default.createElement(
+            import_noya_designsystem3.FileExplorerUploadButton,
             {
               showUploadButton,
               onUpload: () => handleUpload(import_noya_schemas3.rootResource.id),
@@ -3376,7 +3895,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           ),
           className
         },
-        virtualized ? /* @__PURE__ */ import_react4.default.createElement(import_react_utils2.SingleDimensionAutoSizer, { dimension: "height" }, (height) => renderCollection(height)) : renderCollection(void 0)
+        virtualized ? /* @__PURE__ */ import_react7.default.createElement(import_react_utils5.SingleDimensionAutoSizer, { dimension: "height" }, (height) => renderCollection(height)) : renderCollection(void 0)
       );
     }
   )
@@ -3413,6 +3932,7 @@ function getPublishStatus({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GitFileExplorer,
   MediaCollection,
   PLACEHOLDER_ITEM_NAME,
   ResourceExplorer,