@noya-app/noya-file-explorer 0.0.15 → 0.0.17

package/dist/index.js

@@ -44,10 +44,10 @@ var require_access = __commonJS({
         const accessed = _getPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path4 = indexPath.slice();
-      while (path4.length > 0) {
-        let index = path4.shift();
-        const children = options.getChildren(node, path4);
+      let path7 = indexPath.slice();
+      while (path7.length > 0) {
+        let index = path7.shift();
+        const children = options.getChildren(node, path7);
         const child = children[index];
         if (!child) {
           return void 0;
@@ -60,12 +60,12 @@ var require_access = __commonJS({
       return _getPath(node, indexPath, options).slice(0, -1);
     }
     function _getPath(node, indexPath, options) {
-      let path4 = indexPath.slice();
+      let path7 = indexPath.slice();
       let result = [node];
-      while (path4.length > 0) {
-        let index = path4.shift();
+      while (path7.length > 0) {
+        let index = path7.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        const children = options.getChildren(node, path4, context);
+        const children = options.getChildren(node, path7, context);
         const child = children[index];
         if (!child) {
           return result;
@@ -80,20 +80,20 @@ var require_access = __commonJS({
         const accessed = accessPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path4 = indexPath.slice();
-      while (path4.length > 0) {
-        let index = path4.shift();
-        node = options.getChildren(node, path4)[index];
+      let path7 = indexPath.slice();
+      while (path7.length > 0) {
+        let index = path7.shift();
+        node = options.getChildren(node, path7)[index];
       }
       return node;
     }
     function accessPath(node, indexPath, options) {
-      let path4 = indexPath.slice();
+      let path7 = indexPath.slice();
       let result = [node];
-      while (path4.length > 0) {
-        let index = path4.shift();
+      while (path7.length > 0) {
+        let index = path7.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        node = options.getChildren(node, path4, context)[index];
+        node = options.getChildren(node, path7, context)[index];
         result.push(node);
       }
       return result;
@@ -135,9 +135,9 @@ var require_ancestors = __commonJS({
   "../../node_modules/tree-visit/lib/ancestors.js"(exports2) {
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
-    exports2.ancestorPaths = ancestorPaths2;
+    exports2.ancestorPaths = ancestorPaths3;
     var sort_1 = require_sort();
-    function ancestorPaths2(paths, options) {
+    function ancestorPaths3(paths, options) {
       var _a;
       const result = /* @__PURE__ */ new Map();
       const compare = (_a = options === null || options === void 0 ? void 0 : options.compare) !== null && _a !== void 0 ? _a : sort_1.comparePathsByComponent;
@@ -607,40 +607,40 @@ var require_transformPath = __commonJS({
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.transformPath = transformPath;
     var sort_1 = require_sort();
-    function commonAncestor(path4, otherPath) {
-      const length = Math.min(path4.length, otherPath.length);
+    function commonAncestor(path7, otherPath) {
+      const length = Math.min(path7.length, otherPath.length);
       for (let i = 0; i < length; i++) {
-        if (path4[i] !== otherPath[i]) {
-          return path4.slice(0, i);
+        if (path7[i] !== otherPath[i]) {
+          return path7.slice(0, i);
         }
       }
-      return path4.slice(0, length);
+      return path7.slice(0, length);
     }
-    function transformPath(path4, operation, otherPath, count = 1) {
-      if (otherPath.length > path4.length || (0, sort_1.comparePathsByComponent)(otherPath, path4) > 0) {
-        return path4;
+    function transformPath(path7, operation, otherPath, count = 1) {
+      if (otherPath.length > path7.length || (0, sort_1.comparePathsByComponent)(otherPath, path7) > 0) {
+        return path7;
       }
       if (otherPath.length === 0 && operation === "remove") {
         return void 0;
       }
-      const common = commonAncestor(path4, otherPath);
-      const adjustmentIndex = common.length === path4.length || common.length === otherPath.length ? common.length - 1 : common.length;
-      const pathValue = path4[adjustmentIndex];
+      const common = commonAncestor(path7, otherPath);
+      const adjustmentIndex = common.length === path7.length || common.length === otherPath.length ? common.length - 1 : common.length;
+      const pathValue = path7[adjustmentIndex];
       const otherPathValue = otherPath[adjustmentIndex];
       if (operation === "insert" && otherPathValue <= pathValue) {
-        const newPath = [...path4];
+        const newPath = [...path7];
         newPath[adjustmentIndex] += count;
         return newPath;
       } else if (operation === "remove") {
         if (otherPathValue === pathValue) {
           return void 0;
         } else if (otherPathValue < pathValue) {
-          const newPath = [...path4];
+          const newPath = [...path7];
           newPath[adjustmentIndex] -= count;
           return newPath;
         }
       }
-      return path4;
+      return path7;
     }
   }
 });
@@ -806,15 +806,15 @@ var require_operation = __commonJS({
       switch (operation.type) {
         case "insert": {
           const otherPath = parentPath.concat(operation.index);
-          return transformedPaths.map((path4) => path4 ? (0, transformPath_1.transformPath)(path4, "insert", otherPath, operation.nodes.length) : void 0);
+          return transformedPaths.map((path7) => path7 ? (0, transformPath_1.transformPath)(path7, "insert", otherPath, operation.nodes.length) : void 0);
         }
         case "remove": {
           const otherPaths = [...operation.indexes].reverse().map((index) => parentPath.concat(index));
-          return transformedPaths.map((path4) => {
+          return transformedPaths.map((path7) => {
             for (const otherPath of otherPaths) {
-              path4 = path4 ? (0, transformPath_1.transformPath)(path4, "remove", otherPath) : void 0;
+              path7 = path7 ? (0, transformPath_1.transformPath)(path7, "remove", otherPath) : void 0;
             }
-            return path4;
+            return path7;
           });
         }
         case "removeThenInsert": {
@@ -951,22 +951,22 @@ var require_splice = __commonJS({
       return _spliceWithPathTracking(node, options);
     }
     function _spliceWithPathTracking(node, options) {
-      const { path: path4, deleteCount = 0, nodes, track } = options;
-      if (path4.length === 0) {
+      const { path: path7, deleteCount = 0, nodes, track } = options;
+      if (path7.length === 0) {
         throw new Error(`Can't splice at the root`);
       }
-      const pathsToRemove = getPathsToRemove(path4, deleteCount);
-      const operations = (0, operation_1.getInsertionOperations)(path4, nodes, (0, operation_1.getRemovalOperations)(pathsToRemove));
+      const pathsToRemove = getPathsToRemove(path7, deleteCount);
+      const operations = (0, operation_1.getInsertionOperations)(path7, nodes, (0, operation_1.getRemovalOperations)(pathsToRemove));
       const transformedPaths = track ? (0, operation_1.transformPathsByOperations)(track, operations) : [];
       return {
         node: (0, operation_1.applyOperations)(node, operations, options),
         paths: transformedPaths
       };
     }
-    function getPathsToRemove(path4, deleteCount) {
+    function getPathsToRemove(path7, deleteCount) {
       let pathsToRemove = [];
-      let parentPath = path4.slice(0, -1);
-      let index = path4[path4.length - 1];
+      let parentPath = path7.slice(0, -1);
+      let index = path7[path7.length - 1];
       for (let i = 0; i < deleteCount; i++) {
         pathsToRemove.push(parentPath.concat(index + i));
       }
@@ -1111,38 +1111,43 @@ var src_exports = {};
 __export(src_exports, {
   MediaCollection: () => MediaCollection,
   PLACEHOLDER_ITEM_NAME: () => PLACEHOLDER_ITEM_NAME,
+  ResourceExplorer: () => ResourceExplorer,
+  ResourceThumbnail: () => ResourceThumbnail,
+  acceptsMediaItemDrop: () => acceptsMediaItemDrop,
+  acceptsResourceDrop: () => acceptsResourceDrop,
   basenameValidator: () => basenameValidator,
   createMediaAsset: () => createMediaAsset,
   createMediaFile: () => createMediaFile,
   createMediaFolder: () => createMediaFolder,
   createMediaItem: () => createMediaItem,
   createMediaItemTree: () => createMediaItemTree,
-  deleteMediaItems: () => deleteMediaItems,
-  formatByteSize: () => formatByteSize,
+  deleteResources: () => deleteResources,
   getDepthMap: () => getDepthMap,
   getParentDirectories: () => getParentDirectories,
   getVisibleItems: () => getVisibleItems,
+  gridThumbnailDimension: () => gridThumbnailDimension,
+  mediaDeleteMediaItems: () => mediaDeleteMediaItems,
+  mediaGetDepthMap: () => mediaGetDepthMap,
+  mediaGetParentDirectories: () => mediaGetParentDirectories,
+  mediaGetVisibleItems: () => mediaGetVisibleItems,
+  mediaMoveMediaInsideFolder: () => mediaMoveMediaInsideFolder,
+  mediaMovePathsIntoTarget: () => mediaMovePathsIntoTarget,
+  mediaMoveUpAFolder: () => mediaMoveUpAFolder,
+  mediaRenameMediaItemAndDescendantPaths: () => mediaRenameMediaItemAndDescendantPaths,
+  mediaUpdateExpandedMap: () => mediaUpdateExpandedMap,
+  mediaValidateMediaItemRename: () => mediaValidateMediaItemRename,
   moveMediaInsideFolder: () => moveMediaInsideFolder,
   movePathsIntoTarget: () => movePathsIntoTarget,
   moveUpAFolder: () => moveUpAFolder,
-  renameMediaItemAndDescendantPaths: () => renameMediaItemAndDescendantPaths,
+  renameResourceAndDescendantPaths: () => renameResourceAndDescendantPaths,
   rootMediaItem: () => rootMediaItem,
   rootMediaItemName: () => rootMediaItemName,
   rootMediaItemPath: () => rootMediaItemPath,
   updateExpandedMap: () => updateExpandedMap,
-  validateMediaItemRename: () => validateMediaItemRename
+  validateResourceRename: () => validateResourceRename
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/formatByteSize.ts
-var byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-function formatByteSize(size) {
-  const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
-  const unit = byteSizeUnits[unitIndex];
-  const value = size / Math.pow(1024, unitIndex);
-  return `${value.toFixed(1)} ${unit}`;
-}
-
 // src/MediaCollection.tsx
 var import_noya_designsystem = require("@noya-app/noya-designsystem");
 var import_noya_icons = require("@noya-app/noya-icons");
@@ -1234,10 +1239,15 @@ var createMediaItemTree = (mediaMap) => {
 };
 
 // src/MediaCollection.tsx
-var import_imfs3 = require("imfs");
+var import_imfs4 = require("imfs");
 var import_react2 = __toESM(require("react"));
 
 // src/utils/files.ts
+var import_imfs3 = require("imfs");
+var import_tree_visit3 = __toESM(require_lib());
+
+// src/utils/resourceUtils.ts
+var import_noya_schemas = require("@noya-app/noya-schemas");
 var import_imfs2 = require("imfs");
 var import_tree_visit2 = __toESM(require_lib());
 var getVisibleItems = ({
@@ -1249,7 +1259,7 @@ var getVisibleItems = ({
   showRootItem
 }) => {
   const filteredItems = [];
-  const relativeRootItem = tree.find(rootMediaItem, (item) => item.id === rootItemId) ?? rootMediaItem;
+  const relativeRootItem = tree.find(import_noya_schemas.rootResource, (item) => item.id === rootItemId) ?? import_noya_schemas.rootResource;
   tree.visit(relativeRootItem, (item) => {
     if (relativeRootItem.id === item.id) {
       if (showRootItem) {
@@ -1257,13 +1267,16 @@ var getVisibleItems = ({
       }
       return;
     }
-    if (item.kind === "file" && fileKindFilter === "all") {
+    if (item.type === "file" && fileKindFilter === "all") {
       filteredItems.push(item);
     }
-    if (item.kind === "asset" && (fileKindFilter === "assets" || fileKindFilter === "all")) {
+    if (item.type === "asset" && (fileKindFilter === "assets" || fileKindFilter === "all")) {
       filteredItems.push(item);
     }
-    if (item.kind === "folder" && (fileKindFilter === "directories" || fileKindFilter === "all")) {
+    if (item.type === "directory" && (fileKindFilter === "directories" || fileKindFilter === "all")) {
+      filteredItems.push(item);
+    }
+    if (item.type === "resource" && (fileKindFilter === "resources" || fileKindFilter === "all")) {
       filteredItems.push(item);
     }
     if (!expandedMap[item.id] || !showAllDescendants) return "skip";
@@ -1275,7 +1288,7 @@ var basenameValidator = (basename) => {
   const invalidCharsRegex = /[/\\<>:"|?*]/;
   return !invalidCharsRegex.test(basename);
 };
-var validateMediaItemRename = ({
+var validateResourceRename = ({
   basename,
   selectedItemPath,
   media
@@ -1293,7 +1306,7 @@ var movePathsIntoTarget = ({
   tree
 }) => {
   const ancestors = (0, import_tree_visit2.ancestorPaths)(
-    sourceItemPaths.map((path4) => path4.split("/"))
+    sourceItemPaths.map((path7) => path7.split("/"))
   );
   const mediaClone = { ...media };
   for (const ancestor of ancestors) {
@@ -1311,7 +1324,7 @@ var movePathsIntoTarget = ({
         ancestorPath,
         newAncestorPath
       );
-      const newPathIsValid = validateMediaItemRename({
+      const newPathIsValid = validateResourceRename({
         basename: import_imfs2.path.basename(descendantPath),
         selectedItemPath: newDescendantPath,
         media
@@ -1330,17 +1343,17 @@ var moveUpAFolder = ({
   selectedIds
 }) => {
   const indexPath = tree.findPath(
-    rootMediaItem,
+    import_noya_schemas.rootResource,
     (item) => item.id === selectedIds[0]
   );
   if (!indexPath) return;
   const grandparentFolder = tree.access(
-    rootMediaItem,
+    import_noya_schemas.rootResource,
     indexPath.slice(0, indexPath.length - 2)
   );
   const grandparentFolderPath = tree.idToPathMap.get(grandparentFolder.id);
   if (!grandparentFolderPath) return;
-  const sourceItemPaths = selectedIds.map((id) => tree.idToPathMap.get(id)).filter((path4) => Boolean(path4));
+  const sourceItemPaths = selectedIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
   return movePathsIntoTarget({
     media,
     targetItemPath: grandparentFolderPath,
@@ -1369,7 +1382,7 @@ var updateExpandedMap = ({
   const newExpandedMap = { ...expandedMap };
   const inner = (item2, expanded2) => {
     if (!expandable) return {};
-    if (item2.id === rootMediaItem.id) return {};
+    if (item2.id === import_noya_schemas.rootResource.id) return {};
     if (!expanded2) {
       const children = tree.getChildren(item2, []);
       children.forEach((child) => inner(child, false));
@@ -1379,13 +1392,13 @@ var updateExpandedMap = ({
   inner(item, expanded);
   return newExpandedMap;
 };
-var deleteMediaItems = ({
+var deleteResources = ({
   selectedIds,
   media,
   tree
 }) => {
   const itemsToDelete = selectedIds.flatMap((mediaItemId) => {
-    const mediaItem = tree.mediaItemsWithRoot.find(
+    const mediaItem = tree.resourcesWithRoot.find(
       (item) => item.id === mediaItemId
     );
     if (!mediaItem) return [];
@@ -1406,7 +1419,7 @@ var moveMediaInsideFolder = ({
 }) => {
   const targetItemPath = tree.idToPathMap.get(targetItemId);
   if (!targetItemPath) return media;
-  const sourceItemPaths = sourceItemIds.map((id) => tree.idToPathMap.get(id)).filter((path4) => Boolean(path4));
+  const sourceItemPaths = sourceItemIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
   return movePathsIntoTarget({
     media,
     sourceItemPaths,
@@ -1414,7 +1427,213 @@ var moveMediaInsideFolder = ({
     tree
   });
 };
-var getParentDirectories = (mediaMap, folderId) => {
+var getParentDirectories = (resourceMap, folderId) => {
+  const tree = (0, import_noya_schemas.createResourceTree)(resourceMap);
+  const indexPath = tree.findPath(import_noya_schemas.rootResource, (item) => item.id === folderId);
+  if (!indexPath) return [import_noya_schemas.rootResource];
+  return tree.accessPath(import_noya_schemas.rootResource, indexPath);
+};
+var renameResourceAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree
+}) => {
+  const mediaClone = { ...media };
+  const selectedItem = mediaClone[selectedItemPath];
+  if (!selectedItem) return mediaClone;
+  const parentPath = import_imfs2.path.dirname(selectedItemPath);
+  const newItemPath = import_imfs2.path.join(parentPath, newName);
+  const descendants = tree.flat(selectedItem).map((item) => tree.idToPathMap.get(item.id));
+  for (const descendantPath of descendants) {
+    if (!descendantPath) continue;
+    const newDescendantPath = descendantPath.replace(
+      selectedItemPath,
+      newItemPath
+    );
+    mediaClone[newDescendantPath] = {
+      ...mediaClone[descendantPath],
+      path: newDescendantPath
+    };
+    delete mediaClone[descendantPath];
+  }
+  return mediaClone;
+};
+
+// src/utils/files.ts
+var mediaGetVisibleItems = ({
+  expandedMap,
+  fileKindFilter,
+  rootItemId,
+  tree,
+  showAllDescendants,
+  showRootItem
+}) => {
+  const filteredItems = [];
+  const relativeRootItem = tree.find(rootMediaItem, (item) => item.id === rootItemId) ?? rootMediaItem;
+  tree.visit(relativeRootItem, (item) => {
+    if (relativeRootItem.id === item.id) {
+      if (showRootItem) {
+        filteredItems.push(item);
+      }
+      return;
+    }
+    if (item.kind === "noyaFile" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
+    if (item.kind === "file" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
+    if (item.kind === "asset" && (fileKindFilter === "assets" || fileKindFilter === "all")) {
+      filteredItems.push(item);
+    }
+    if (item.kind === "folder" && (fileKindFilter === "directories" || fileKindFilter === "all")) {
+      filteredItems.push(item);
+    }
+    if (!expandedMap[item.id] || !showAllDescendants) return "skip";
+  });
+  return filteredItems;
+};
+var mediaValidateMediaItemRename = ({
+  basename,
+  selectedItemPath,
+  media
+}) => {
+  if (!basenameValidator(basename)) return false;
+  const newItemPath = import_imfs3.path.join(import_imfs3.path.dirname(selectedItemPath), basename);
+  const newPathExists = media[newItemPath];
+  if (newPathExists) return false;
+  return true;
+};
+var mediaMovePathsIntoTarget = ({
+  media,
+  sourceItemPaths,
+  targetItemPath,
+  tree
+}) => {
+  const ancestors = (0, import_tree_visit3.ancestorPaths)(
+    sourceItemPaths.map((path7) => path7.split("/"))
+  );
+  const mediaClone = { ...media };
+  for (const ancestor of ancestors) {
+    const ancestorPath = ancestor.join("/");
+    const ancestorItem = mediaClone[ancestorPath];
+    const newAncestorPath = import_imfs3.path.join(
+      targetItemPath,
+      import_imfs3.path.basename(ancestorPath)
+    );
+    if (!ancestorItem) continue;
+    const descendantPaths = tree.flat(ancestorItem).map((item) => tree.idToPathMap.get(item.id));
+    for (const descendantPath of descendantPaths) {
+      if (!descendantPath) continue;
+      const newDescendantPath = descendantPath.replace(
+        ancestorPath,
+        newAncestorPath
+      );
+      const newPathIsValid = mediaValidateMediaItemRename({
+        basename: import_imfs3.path.basename(descendantPath),
+        selectedItemPath: newDescendantPath,
+        media
+      });
+      if (newPathIsValid) {
+        mediaClone[newDescendantPath] = mediaClone[descendantPath];
+        delete mediaClone[descendantPath];
+      }
+    }
+  }
+  return mediaClone;
+};
+var mediaMoveUpAFolder = ({
+  tree,
+  media,
+  selectedIds
+}) => {
+  const indexPath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === selectedIds[0]
+  );
+  if (!indexPath) return;
+  const grandparentFolder = tree.access(
+    rootMediaItem,
+    indexPath.slice(0, indexPath.length - 2)
+  );
+  const grandparentFolderPath = tree.idToPathMap.get(grandparentFolder.id);
+  if (!grandparentFolderPath) return;
+  const sourceItemPaths = selectedIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
+  return mediaMovePathsIntoTarget({
+    media,
+    targetItemPath: grandparentFolderPath,
+    sourceItemPaths,
+    tree
+  });
+};
+var mediaGetDepthMap = (item, tree, showAllDescendants) => {
+  const depthMap = {};
+  tree.visit(item, (item2, indexPath) => {
+    if (showAllDescendants) {
+      depthMap[item2.id] = Math.max(indexPath.length - 1, 0);
+    } else {
+      depthMap[item2.id] = 0;
+    }
+  });
+  return depthMap;
+};
+var mediaUpdateExpandedMap = ({
+  item,
+  expanded,
+  expandable,
+  expandedMap,
+  tree
+}) => {
+  const newExpandedMap = { ...expandedMap };
+  const inner = (item2, expanded2) => {
+    if (!expandable) return {};
+    if (item2.id === rootMediaItem.id) return {};
+    if (!expanded2) {
+      const children = tree.getChildren(item2, []);
+      children.forEach((child) => inner(child, false));
+    }
+    newExpandedMap[item2.id] = expanded2;
+  };
+  inner(item, expanded);
+  return newExpandedMap;
+};
+var mediaDeleteMediaItems = ({
+  selectedIds,
+  media,
+  tree
+}) => {
+  const itemsToDelete = selectedIds.flatMap((mediaItemId) => {
+    const mediaItem = tree.mediaItemsWithRoot.find(
+      (item) => item.id === mediaItemId
+    );
+    if (!mediaItem) return [];
+    return tree.flat(mediaItem);
+  });
+  const itemKeysToDelete = new Set(
+    itemsToDelete.map((item) => tree.idToPathMap.get(item.id))
+  );
+  return Object.fromEntries(
+    Object.entries(media).filter(([key]) => !itemKeysToDelete.has(key))
+  );
+};
+var mediaMoveMediaInsideFolder = ({
+  sourceItemIds,
+  targetItemId,
+  media,
+  tree
+}) => {
+  const targetItemPath = tree.idToPathMap.get(targetItemId);
+  if (!targetItemPath) return media;
+  const sourceItemPaths = sourceItemIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
+  return mediaMovePathsIntoTarget({
+    media,
+    sourceItemPaths,
+    targetItemPath,
+    tree
+  });
+};
+var mediaGetParentDirectories = (mediaMap, folderId) => {
   const tree = createMediaItemTree(mediaMap);
   const indexPath = tree.findPath(
     rootMediaItem,
@@ -1423,7 +1642,7 @@ var getParentDirectories = (mediaMap, folderId) => {
   if (!indexPath) return [rootMediaItem];
   return tree.accessPath(rootMediaItem, indexPath);
 };
-var renameMediaItemAndDescendantPaths = ({
+var mediaRenameMediaItemAndDescendantPaths = ({
   newName,
   selectedItemPath,
   media,
@@ -1432,8 +1651,8 @@ var renameMediaItemAndDescendantPaths = ({
   const mediaClone = { ...media };
   const selectedItem = mediaClone[selectedItemPath];
   if (!selectedItem) return mediaClone;
-  const parentPath = import_imfs2.path.dirname(selectedItemPath);
-  const newItemPath = import_imfs2.path.join(parentPath, newName);
+  const parentPath = import_imfs3.path.dirname(selectedItemPath);
+  const newItemPath = import_imfs3.path.join(parentPath, newName);
   const descendants = tree.flat(selectedItem).map((item) => tree.idToPathMap.get(item.id));
   for (const descendantPath of descendants) {
     if (!descendantPath) continue;
@@ -1454,7 +1673,7 @@ var extensionToContentType = {
   jpeg: "image/jpeg"
 };
 function encodeFileContentForThumbnail(pathProp, item) {
-  const extension = import_imfs3.path.extname(pathProp).slice(1);
+  const extension = import_imfs4.path.extname(pathProp).slice(1);
   const contentType = extensionToContentType[extension];
   if (contentType) {
     if (item.encoding === "base64") {
@@ -1481,7 +1700,8 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
     item,
     selected,
     size,
-    path: pathProp
+    path: pathProp,
+    renderThumbnailIcon
   }) => {
     const asset = (0, import_noya_multiplayer_react.useAsset)(item.kind === "asset" ? item.assetId : void 0);
     const isRoot = item.id === rootMediaItem.id;
@@ -1489,9 +1709,13 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
     const isFile = item.kind === "file";
     let contentType;
     let url;
+    let width;
+    let height;
     if (asset) {
       contentType = asset.contentType;
       url = asset.url;
+      width = asset.width ?? void 0;
+      height = asset.height ?? void 0;
     } else if (isFile && pathProp) {
       const encoded = encodeFileContentForThumbnail(pathProp, item);
       if (encoded) {
@@ -1499,7 +1723,8 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
         url = encoded.url;
       }
     }
-    const fileName = pathProp ? import_imfs3.path.basename(pathProp) : void 0;
+    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,
       {
@@ -1508,7 +1733,9 @@ var MediaThumbnailInternal = (0, import_react_utils.memoGeneric)(
         url,
         selected,
         size,
-        fileName
+        fileName,
+        renderThumbnailIcon,
+        dimensions
       }
     );
   }
@@ -1540,7 +1767,10 @@ var MediaCollection = (0, import_react.memo)(
     sortable = false,
     renderEmptyState,
     sharedDragProps,
-    onClickItem
+    onClickItem,
+    renderThumbnailIcon,
+    onDidDeleteItems,
+    onAssetsUploaded
   }, ref) {
     const setMedia = (0, import_react.useCallback)(
       (...args) => {
@@ -1581,7 +1811,7 @@ var MediaCollection = (0, import_react.memo)(
     const assets = (0, import_noya_multiplayer_react.useAssets)();
     const [expandedMap, setExpandedMap] = (0, import_react.useState)({});
     const visibleItems = (0, import_react.useMemo)(
-      () => getVisibleItems({
+      () => mediaGetVisibleItems({
         expandedMap,
         fileKindFilter,
         rootItemId,
@@ -1599,7 +1829,7 @@ var MediaCollection = (0, import_react.memo)(
       ]
     );
     const depthMap = (0, import_react.useMemo)(
-      () => getDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
+      () => mediaGetDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
       [treeWithTempItem, showAllDescendants]
     );
     const collectionRef = (0, import_react.useRef)(null);
@@ -1622,7 +1852,7 @@ var MediaCollection = (0, import_react.memo)(
       const itemPath = tree.idToPathMap.get(item.id);
       const firstSelectedPath = tree.idToPathMap.get(selectedIds[0]);
       if (!itemPath || !firstSelectedPath) return false;
-      return itemPath.startsWith(import_imfs3.path.dirname(firstSelectedPath));
+      return itemPath.startsWith(import_imfs4.path.dirname(firstSelectedPath));
     });
     (0, import_react.useEffect)(() => {
       if (initialExpanded) {
@@ -1638,17 +1868,39 @@ var MediaCollection = (0, import_react.memo)(
       },
       [expandedMap, expandable]
     );
+    const openConfirmationDialog = (0, import_noya_designsystem.useOpenConfirmationDialog)();
     const handleDelete = (0, import_react.useCallback)(
-      (selectedIds2) => {
-        const newMedia = deleteMediaItems({
+      async (selectedIds2) => {
+        const ok = await openConfirmationDialog({
+          title: "Delete items",
+          description: "Are you sure you want to delete these items? This action cannot be undone."
+        });
+        if (!ok) return;
+        const deletedItems = Object.entries(media).flatMap(
+          ([path7, item]) => {
+            if (selectedIds2.includes(item.id)) {
+              return [[path7, item]];
+            }
+            return [];
+          }
+        );
+        const newMedia = mediaDeleteMediaItems({
           selectedIds: selectedIds2,
           media,
           tree
         });
         setSelectedIds([rootMediaItem.id]);
         setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+        onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree]
+      [
+        media,
+        setMedia,
+        setSelectedIds,
+        tree,
+        onDidDeleteItems,
+        openConfirmationDialog
+      ]
     );
     const onRename = (0, import_react.useCallback)(
       (selectedItem, newName) => {
@@ -1657,7 +1909,7 @@ var MediaCollection = (0, import_react.memo)(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const renameIsValid = validateMediaItemRename({
+        const renameIsValid = mediaValidateMediaItemRename({
           basename: newName,
           selectedItemPath,
           media: temp.media
@@ -1666,7 +1918,7 @@ var MediaCollection = (0, import_react.memo)(
           setTempItem(void 0);
           return;
         }
-        const mediaWithRenamedDescendantPaths = renameMediaItemAndDescendantPaths({
+        const mediaWithRenamedDescendantPaths = mediaRenameMediaItemAndDescendantPaths({
           newName,
           selectedItemPath,
           media: temp.media,
@@ -1686,7 +1938,7 @@ var MediaCollection = (0, import_react.memo)(
         const currentFolderPath = tree.idToPathMap.get(currentFolderId);
         if (!currentFolderPath) return;
         setTempItem([
-          import_imfs3.path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          import_imfs4.path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
           newFolder
         ]);
         setTimeout(() => {
@@ -1706,7 +1958,7 @@ var MediaCollection = (0, import_react.memo)(
         );
         if (!currentFolderPath) return;
         setTempItem([
-          import_imfs3.path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          import_imfs4.path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
           newFile
         ]);
         setTimeout(() => {
@@ -1717,7 +1969,7 @@ var MediaCollection = (0, import_react.memo)(
     );
     const handleMoveUpAFolder = (0, import_react.useCallback)(
       (selectedIds2) => {
-        const newMedia = moveUpAFolder({
+        const newMedia = mediaMoveUpAFolder({
           tree,
           media,
           selectedIds: selectedIds2
@@ -1737,30 +1989,35 @@ var MediaCollection = (0, import_react.memo)(
           if (!parentPath) return;
           const uploadPromises = files.map(async (file) => {
             const asset = await assetManager.create(file);
-            const assetPath = import_imfs3.path.join(parentPath, import_imfs3.path.basename(file.name));
+            const assetPath = import_imfs4.path.join(parentPath, import_imfs4.path.basename(file.name));
             return {
               assetPath,
               asset: createMediaAsset({ assetId: asset.id })
             };
           });
           setIsUploading(true);
-          const newMediaMap = await Promise.all(uploadPromises);
+          const uploadedAssets = await Promise.all(uploadPromises);
+          const newMediaMap = Object.fromEntries(
+            uploadedAssets.map(({ assetPath, asset }) => [assetPath, asset])
+          );
           setMedia(
             { name: "Add media items", timestamp: Date.now() },
             {
               ...media,
-              ...Object.fromEntries(
-                newMediaMap.map(({ assetPath, asset }) => [assetPath, asset])
-              )
+              ...newMediaMap
             }
           );
+          onAssetsUploaded?.(newMediaMap);
         } catch (error) {
-          console.error("Failed to upload files:", error);
+          if (error instanceof Error && error.name === "AbortError") {
+          } else {
+            console.error("Failed to upload files:", error);
+          }
         } finally {
           setIsUploading(false);
         }
       },
-      [tree.idToPathMap, setMedia, media, assetManager]
+      [tree.idToPathMap, setMedia, media, assetManager, onAssetsUploaded]
     );
     const handleDownload = (0, import_react.useCallback)(
       async (selectedItems) => {
@@ -1804,7 +2061,10 @@ var MediaCollection = (0, import_react.memo)(
             }
           );
         } catch (error) {
-          console.error("Failed to upload file:", error);
+          if (error instanceof Error && error.name === "AbortError") {
+          } else {
+            console.error("Failed to upload files:", error);
+          }
         }
       },
       [media, setMedia, assetManager, tree]
@@ -1817,10 +2077,7 @@ var MediaCollection = (0, import_react.memo)(
     );
     const handleMoveMediaInsideFolder = (0, import_react.useCallback)(
       (sourceItem, targetItem) => {
-        const sourceItemPath = tree.idToPathMap.get(sourceItem.id);
-        const targetItemPath = tree.idToPathMap.get(targetItem.id);
-        if (!sourceItemPath || !targetItemPath) return;
-        const newMedia = moveMediaInsideFolder({
+        const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
           media,
@@ -1857,12 +2114,12 @@ var MediaCollection = (0, import_react.memo)(
         ],
         [
           onlySingleFolderSelected && {
-            title: "Add media",
+            title: "Upload Files",
             value: "upload",
             icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.UploadIcon, null)
           },
           onlySingleFolderSelected && {
-            title: "Add a Folder",
+            title: "Add Folder",
             value: "addFolder",
             icon: /* @__PURE__ */ import_react2.default.createElement(import_noya_icons.FolderIcon, null)
           },
@@ -1939,7 +2196,7 @@ var MediaCollection = (0, import_react.memo)(
     const handleSetExpanded = (0, import_react.useCallback)(
       (item, expanded) => {
         setExpandedMap(
-          (prev) => updateExpandedMap({
+          (prev) => mediaUpdateExpandedMap({
             item,
             expanded,
             expandable,
@@ -1986,7 +2243,8 @@ var MediaCollection = (0, import_react.memo)(
       moveUpAFolder: handleMoveUpAFolder,
       replace: handleReplace,
       preview: handlePreview,
-      moveMediaInsideFolder: handleMoveMediaInsideFolder
+      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,
@@ -2028,6 +2286,7 @@ var MediaCollection = (0, import_react.memo)(
                 return "Enter folder name";
               case "asset":
               case "file":
+              case "noyaFile":
                 return "Enter file name";
             }
           },
@@ -2050,7 +2309,8 @@ var MediaCollection = (0, import_react.memo)(
             MediaThumbnailInternal,
             {
               ...props,
-              path: tree.idToPathMap.get(props.item.id)
+              path: tree.idToPathMap.get(props.item.id),
+              renderThumbnailIcon
             }
           ),
           renderAction,
@@ -2058,7 +2318,7 @@ var MediaCollection = (0, import_react.memo)(
             if (file.kind !== "asset") return null;
             const asset = assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
-            return /* @__PURE__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerDetail, { selected, size }, formatByteSize(asset.size));
+            return /* @__PURE__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerDetail, { selected, size }, (0, import_noya_designsystem.formatByteSize)(asset.size));
           },
           renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerEmptyState, null),
           itemRoleDescription: "clickable file item",
@@ -2079,93 +2339,1034 @@ var MediaCollection = (0, import_react.memo)(
             if (sourceListId !== targetListId) {
               return false;
             }
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
+              return false;
+            }
             const sourceItem = visibleItems[sourceIndex];
             const targetItem = visibleItems[targetIndex];
-            if (position !== "inside" || targetItem.kind === "asset") {
-              return false;
+            return acceptsMediaItemDrop({
+              position,
+              sourceItem,
+              targetItem,
+              tree
+            });
+          },
+          onMoveItem: ({
+            sourceListId,
+            sourceIndex,
+            targetListId,
+            targetIndex,
+            position
+          }) => {
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
+              return;
+            }
+            const sourceItem = visibleItems[sourceIndex];
+            const targetItem = visibleItems[targetIndex];
+            if (position === "inside") {
+              handleMoveMediaInsideFolder(sourceItem, targetItem);
             }
-            const sourcePath = tree.findPath(
-              rootMediaItem,
-              (item) => item.id === sourceItem.id
+          }
+        }
+      )
+    ));
+  })
+);
+function acceptsMediaItemDrop(parameters) {
+  const { position, sourceItem, targetItem, tree } = parameters;
+  if (position !== "inside" || targetItem.kind === "asset") {
+    return false;
+  }
+  const sourcePath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === targetItem.id
+  );
+  if (!sourcePath || !targetPath) return false;
+  if ((0, import_noya_utils2.isDeepEqual)(sourcePath, targetPath.slice(0, sourcePath.length))) {
+    return false;
+  }
+  return true;
+}
+
+// src/ResourceExplorer.tsx
+var import_noya_designsystem2 = require("@noya-app/noya-designsystem");
+var import_noya_icons2 = 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_imfs6 = require("imfs");
+var import_react4 = __toESM(require("react"));
+
+// src/utils/handleFileDrop.ts
+var import_noya_schemas2 = require("@noya-app/noya-schemas");
+var import_noya_utils3 = require("@noya-app/noya-utils");
+var import_imfs5 = require("imfs");
+function isDirectoryEntry(entry) {
+  return entry.isDirectory;
+}
+function isFileEntry(entry) {
+  return entry.isFile;
+}
+async function handleDataTransfer({
+  accessibleByFileId,
+  dataTransfer,
+  rootItemPath,
+  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))
             );
-            const targetPath = tree.findPath(
-              rootMediaItem,
-              (item) => item.id === targetItem.id
+            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
+      }));
+    }
+    if (dropped.length === 0) return;
+    const folderRelativePaths = /* @__PURE__ */ new Set();
+    for (const { relativePath } of dropped) {
+      const dir = import_imfs5.path.dirname(relativePath);
+      if (dir && dir !== ".") {
+        const parts = dir.split("/").filter(Boolean);
+        let acc = "";
+        for (const part of parts) {
+          acc = acc ? import_imfs5.path.join(acc, part) : part;
+          folderRelativePaths.add(acc);
+        }
+      }
+    }
+    const folderEntries = Array.from(folderRelativePaths).map((rel) => import_imfs5.path.join(rootItemPath, rel)).filter((full) => !resourceMap[full]).map((full) => [
+      full,
+      (0, import_noya_schemas2.createDirectoryResource)({
+        id: (0, import_noya_utils3.uuid)(),
+        path: full,
+        accessibleByFileId,
+        stableId: (0, import_noya_utils3.uuid)()
+      })
+    ]);
+    const uploadResults = await Promise.all(
+      dropped.map(
+        async ({ file, relativePath }) => {
+          return [
+            import_imfs5.path.join(rootItemPath, relativePath),
+            (0, import_noya_schemas2.createAssetResource)({
+              id: (0, import_noya_utils3.uuid)(),
+              asset: {
+                content: import_noya_utils3.Base64.encode(await file.arrayBuffer()),
+                contentType: file.type,
+                encoding: "base64"
+              },
+              path: import_imfs5.path.join(rootItemPath, relativePath),
+              accessibleByFileId,
+              stableId: (0, import_noya_utils3.uuid)()
+            })
+          ];
+        }
+      )
+    );
+    return {
+      ...resourceMap,
+      ...Object.fromEntries([...folderEntries, ...uploadResults])
+    };
+  } catch (error) {
+    console.error("Failed to upload dropped files:", error);
+  }
+}
+
+// src/ResourceExplorer.tsx
+var gridThumbnailDimension = {
+  width: 800,
+  height: 800
+};
+var ResourceThumbnail = (0, import_react_utils2.memoGeneric)(
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+    renderThumbnailIcon,
+    className,
+    url: urlProp,
+    contentType: contentTypeProp,
+    viewType
+  }) => {
+    const asset = (0, import_noya_multiplayer_react2.useAsset)(item.type === "asset" ? item.assetId : void 0);
+    const isRoot = item.id === import_noya_schemas3.rootResource.id;
+    const isFolder = item.type === "directory";
+    let contentType;
+    let url;
+    if (asset) {
+      contentType = asset.contentType;
+      url = asset.url;
+    } else if (urlProp) {
+      url = urlProp;
+      contentType = contentTypeProp;
+    }
+    const fileName = pathProp ? import_imfs6.path.basename(pathProp) : void 0;
+    return /* @__PURE__ */ import_react4.default.createElement(
+      import_noya_designsystem2.MediaThumbnail,
+      {
+        contentType,
+        iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
+        url,
+        selected,
+        size,
+        fileName,
+        renderThumbnailIcon,
+        dimensions: viewType === "grid" ? gridThumbnailDimension : void 0,
+        className
+      }
+    );
+  }
+);
+var ResourceExplorer = (0, import_react3.memo)(
+  (0, import_react3.forwardRef)(
+    function ResourceExplorer2({
+      parentFileId,
+      sortableId,
+      onSelectionChange,
+      selectedIds: selectedIdsProp,
+      media,
+      setMedia: setMediaProp,
+      readOnly = false,
+      viewType = "list",
+      fileKindFilter = "all",
+      showRootItem = false,
+      initialExpanded,
+      expandable = true,
+      renamable = true,
+      onDoubleClickItem,
+      rootItemId = import_noya_schemas3.rootResource.id,
+      title,
+      size = "medium",
+      right,
+      renderAction: renderActionProp,
+      className,
+      showUploadButton = true,
+      showAllDescendants = true,
+      scrollable = false,
+      sortable = false,
+      renderEmptyState,
+      sharedDragProps,
+      onClickItem,
+      renderThumbnailIcon,
+      onDidDeleteItems,
+      onAssetsUploaded,
+      itemClassName,
+      itemStyle,
+      publishedResources,
+      virtualized = false,
+      renderUser
+    }, ref) {
+      const setMedia = (0, import_react3.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)(
+        void 0
+      );
+      const mediaWithTempItem = (0, import_react3.useMemo)(
+        () => ({
+          ...media,
+          ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
+        }),
+        [media, tempItem]
+      );
+      const treeWithTempItem = (0, import_react3.useMemo)(
+        () => (0, import_noya_schemas3.createResourceTree)(mediaWithTempItem),
+        [mediaWithTempItem]
+      );
+      const temp = (0, import_react3.useMemo)(
+        () => ({
+          media: mediaWithTempItem,
+          tree: treeWithTempItem
+        }),
+        [mediaWithTempItem, treeWithTempItem]
+      );
+      const [selectedIds, setSelectedIds] = (0, import_react_utils2.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({
+          expandedMap,
+          fileKindFilter,
+          rootItemId,
+          tree: treeWithTempItem,
+          showAllDescendants,
+          showRootItem
+        }),
+        [
+          expandedMap,
+          fileKindFilter,
+          rootItemId,
+          treeWithTempItem,
+          showAllDescendants,
+          showRootItem
+        ]
+      );
+      const depthMap = (0, import_react3.useMemo)(
+        () => getDepthMap(import_noya_schemas3.rootResource, treeWithTempItem, showAllDescendants),
+        [treeWithTempItem, showAllDescendants]
+      );
+      const collectionRef = (0, import_react3.useRef)(null);
+      const selectedResources = (0, import_react3.useMemo)(
+        () => treeWithTempItem.resourcesWithRoot.filter(
+          (item) => selectedIds.includes(item.id)
+        ),
+        [treeWithTempItem, selectedIds]
+      );
+      const groupedItems = (0, import_noya_utils4.groupBy)(selectedResources, (item) => item.type);
+      const selectedAssetItems = groupedItems.asset ?? [];
+      const selectedFolderItems = groupedItems.folder ?? [];
+      const singleItemSelected = selectedResources.length === 1;
+      const onlyAssetsSelected = selectedAssetItems.length > 0 && selectedAssetItems.length === selectedResources.length;
+      const onlyFoldersSelected = selectedFolderItems.length > 0 && selectedFolderItems.length === selectedResources.length;
+      const onlySingleFolderSelected = onlyFoldersSelected && selectedFolderItems.length === 1;
+      const onlySingleAssetSelected = onlyAssetsSelected && selectedAssetItems.length === 1;
+      const rootSelected = selectedIds.includes(import_noya_schemas3.rootResource.id);
+      const sameParentSelected = selectedResources.every((item) => {
+        const itemPath = tree.idToPathMap.get(item.id);
+        const firstSelectedPath = tree.idToPathMap.get(selectedIds[0]);
+        if (!itemPath || !firstSelectedPath) return false;
+        return itemPath.startsWith(import_imfs6.path.dirname(firstSelectedPath));
+      });
+      (0, import_react3.useEffect)(() => {
+        if (initialExpanded) {
+          setExpandedMap(initialExpanded);
+        }
+      }, [initialExpanded]);
+      const getExpanded = (0, import_react3.useCallback)(
+        (item) => {
+          if (!expandable) return void 0;
+          if (item.type !== "directory") return void 0;
+          if (item.id === import_noya_schemas3.rootResource.id) return void 0;
+          return expandedMap[item.id] ?? false;
+        },
+        [expandedMap, expandable]
+      );
+      const openConfirmationDialog = (0, import_noya_designsystem2.useOpenConfirmationDialog)();
+      const handleDelete = (0, import_react3.useCallback)(
+        async (selectedIds2) => {
+          const ok = await openConfirmationDialog({
+            title: "Delete items",
+            description: "Are you sure you want to delete these items? This action cannot be undone."
+          });
+          if (!ok) return;
+          const deletedItems = Object.entries(media).flatMap(
+            ([path7, item]) => {
+              if (selectedIds2.includes(item.id)) {
+                return [[path7, item]];
+              }
+              return [];
+            }
+          );
+          const newMedia = deleteResources({
+            selectedIds: selectedIds2,
+            media,
+            tree
+          });
+          setSelectedIds([import_noya_schemas3.rootResource.id]);
+          setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+          onDidDeleteItems?.(deletedItems);
+        },
+        [
+          media,
+          setMedia,
+          setSelectedIds,
+          tree,
+          onDidDeleteItems,
+          openConfirmationDialog
+        ]
+      );
+      const onRename = (0, import_react3.useCallback)(
+        (selectedItem, newName) => {
+          if (!renamable) return;
+          const selectedItemPath = treeWithTempItem.idToPathMap.get(
+            selectedItem.id
+          );
+          if (!selectedItemPath) return;
+          const renameIsValid = validateResourceRename({
+            basename: newName,
+            selectedItemPath,
+            media: temp.media
+          });
+          if (!renameIsValid) {
+            setTempItem(void 0);
+            return;
+          }
+          const mediaWithRenamedDescendantPaths = renameResourceAndDescendantPaths({
+            newName,
+            selectedItemPath,
+            media: temp.media,
+            tree: temp.tree
+          });
+          setMedia(
+            { name: "Rename media item", timestamp: Date.now() },
+            mediaWithRenamedDescendantPaths
+          );
+          setTempItem(void 0);
+        },
+        [
+          renamable,
+          setMedia,
+          temp.media,
+          temp.tree,
+          treeWithTempItem.idToPathMap
+        ]
+      );
+      const handleAddFolder = (0, import_react3.useCallback)(
+        (currentFolderId) => {
+          const currentFolderPath = tree.idToPathMap.get(currentFolderId);
+          if (!currentFolderPath) return;
+          const newFolderPath = import_imfs6.path.join(
+            currentFolderPath,
+            import_noya_schemas3.PLACEHOLDER_ITEM_NAME
+          );
+          const newFolder = (0, import_noya_schemas3.createDirectoryResource)({
+            path: newFolderPath,
+            accessibleByFileId: parentFileId,
+            id: newFolderPath,
+            stableId: (0, import_noya_utils4.uuid)()
+          });
+          setTempItem([newFolderPath, newFolder]);
+          setTimeout(() => {
+            collectionRef.current?.editName(newFolder.id);
+          }, 50);
+        },
+        [parentFileId, tree]
+      );
+      const handleMoveUpAFolder = (0, import_react3.useCallback)(
+        (selectedIds2) => {
+          const newMedia = moveUpAFolder({
+            tree,
+            media,
+            selectedIds: selectedIds2
+          });
+          if (!newMedia) return;
+          setMedia({ name: "Move items", timestamp: Date.now() }, newMedia);
+        },
+        [media, tree, setMedia]
+      );
+      const [isUploading, setIsUploading] = (0, import_react3.useState)(false);
+      const handleUpload = (0, import_react3.useCallback)(
+        async (selectedId) => {
+          try {
+            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;
+            const uploadPromises = files.map(async (file) => {
+              const assetPath = import_imfs6.path.join(parentPath, import_imfs6.path.basename(file.name));
+              return {
+                assetPath,
+                asset: (0, import_noya_schemas3.createAssetResource)({
+                  id: (0, import_noya_utils4.uuid)(),
+                  asset: {
+                    content: import_noya_utils4.Base64.encode(await file.arrayBuffer()),
+                    contentType: file.type,
+                    encoding: "base64"
+                  },
+                  path: assetPath,
+                  accessibleByFileId: parentFileId,
+                  stableId: (0, import_noya_utils4.uuid)()
+                })
+              };
+            });
+            setIsUploading(true);
+            const uploadedAssets = await Promise.all(uploadPromises);
+            const newMediaMap = Object.fromEntries(
+              uploadedAssets.map(({ assetPath, asset }) => [assetPath, asset])
             );
-            if (!sourcePath || !targetPath) return false;
-            if ((0, import_noya_utils2.isDeepEqual)(sourcePath, targetPath.slice(0, sourcePath.length))) {
-              return false;
+            setMedia(
+              { name: "Add media items", timestamp: Date.now() },
+              {
+                ...media,
+                ...newMediaMap
+              }
+            );
+            onAssetsUploaded?.(newMediaMap);
+          } catch (error) {
+            if (error instanceof Error && error.name === "AbortError") {
+            } else {
+              console.error("Failed to upload files:", error);
+            }
+          } finally {
+            setIsUploading(false);
+          }
+        },
+        [tree, setMedia, media, onAssetsUploaded, parentFileId]
+      );
+      const handleDownload = (0, import_react3.useCallback)(
+        async (selectedItems) => {
+          const downloadPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
+            const asset = assets.find((a) => a.id === item.assetId);
+            if (!asset?.url) return;
+            return (0, import_react_utils2.downloadUrl)(asset.url, tree.getNameForId(item.id));
+          });
+          await Promise.all(downloadPromises);
+        },
+        [assets, tree]
+      );
+      const handlePreview = (0, import_react3.useCallback)(
+        async (selectedItems) => {
+          const previewPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
+            const asset = assets.find((a) => a.id === item.assetId);
+            if (!asset?.url) return;
+            return window?.open(asset.url, "_blank");
+          });
+          await Promise.all(previewPromises);
+        },
+        [assets]
+      );
+      const handleReplace = (0, import_react3.useCallback)(
+        async (selectedItem) => {
+          try {
+            const file = await (0, import_browser_fs_access2.fileOpen)();
+            if (!file) return;
+            const asset = await assetManager.create(file);
+            const oldFile = selectedItem;
+            const oldFilePath = tree.idToPathMap.get(oldFile.id);
+            if (!oldFilePath || oldFile.type !== "asset") return;
+            setMedia(
+              { name: "Replace media file", timestamp: Date.now() },
+              {
+                ...media,
+                [oldFilePath]: (0, import_noya_schemas3.createAssetResource)({
+                  ...oldFile,
+                  assetId: asset.id
+                })
+              }
+            );
+          } catch (error) {
+            if (error instanceof Error && error.name === "AbortError") {
+            } else {
+              console.error("Failed to upload files:", error);
             }
+          }
+        },
+        [media, setMedia, assetManager, tree]
+      );
+      const handleRename = (0, import_react3.useCallback)(
+        (selectedItemId) => {
+          collectionRef.current?.editName(selectedItemId);
+        },
+        [collectionRef]
+      );
+      const handleMoveMediaInsideFolder = (0, import_react3.useCallback)(
+        (sourceItems, targetItem) => {
+          const newMedia = moveMediaInsideFolder({
+            sourceItemIds: sourceItems.map((item) => item.id),
+            targetItemId: targetItem.id,
+            media,
+            tree
+          });
+          setMedia(
+            {
+              name: "Move media file inside folder",
+              timestamp: Date.now()
+            },
+            newMedia
+          );
+        },
+        [media, setMedia, tree]
+      );
+      const assetContextMenuItems = (0, import_react3.useMemo)(() => {
+        return (0, import_noya_designsystem2.createSectionedMenu)(
+          [
+            !rootSelected && singleItemSelected && {
+              title: "Rename",
+              value: "rename",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.InputIcon, null)
+            },
+            onlySingleAssetSelected && {
+              title: "Replace",
+              value: "replace",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.UpdateIcon, null)
+            },
+            !rootSelected && {
+              title: "Delete",
+              value: "delete",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.TrashIcon, null)
+            }
+          ],
+          [
+            onlySingleFolderSelected && {
+              title: "Upload Files",
+              value: "upload",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.UploadIcon, null)
+            },
+            onlySingleFolderSelected && {
+              title: "Add Folder",
+              value: "addFolder",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.FolderIcon, null)
+            },
+            onlyAssetsSelected && tree.resourcesWithRoot.length > 0 && {
+              title: "Download",
+              value: "download",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.DownloadIcon, null)
+            },
+            onlySingleAssetSelected && {
+              title: "Preview",
+              value: "preview",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.OpenInNewWindowIcon, null)
+            }
+          ],
+          [
+            !rootSelected && sameParentSelected && {
+              title: "Move up a folder",
+              value: "move",
+              icon: /* @__PURE__ */ import_react4.default.createElement(import_noya_icons2.ResetIcon, null)
+            }
+          ]
+        );
+      }, [
+        rootSelected,
+        singleItemSelected,
+        onlySingleAssetSelected,
+        onlySingleFolderSelected,
+        onlyAssetsSelected,
+        tree.resourcesWithRoot.length,
+        sameParentSelected
+      ]);
+      const handleMenuAction = (0, import_react3.useCallback)(
+        async (action, selectedItems) => {
+          if (selectedItems.length === 0) return;
+          switch (action) {
+            case "rename":
+              handleRename(selectedItems[0].id);
+              return;
+            case "delete":
+              handleDelete(selectedIds);
+              return;
+            case "replace":
+              handleReplace(selectedItems[0]);
+              return;
+            case "upload":
+              handleUpload(selectedItems[0].id);
+              return;
+            case "addFolder":
+              handleAddFolder(selectedItems[0].id);
+              return;
+            case "preview":
+              handlePreview(selectedItems);
+              return;
+            case "download":
+              handleDownload(selectedItems);
+              return;
+            case "move":
+              handleMoveUpAFolder(selectedIds);
+              return;
+          }
+        },
+        [
+          handleRename,
+          handleDelete,
+          selectedIds,
+          handleReplace,
+          handleUpload,
+          handleAddFolder,
+          handlePreview,
+          handleDownload,
+          handleMoveUpAFolder
+        ]
+      );
+      const handleSetExpanded = (0, import_react3.useCallback)(
+        (item, expanded) => {
+          setExpandedMap(
+            (prev) => updateExpandedMap({
+              item,
+              expanded,
+              expandable,
+              expandedMap: prev,
+              tree
+            })
+          );
+        },
+        [expandable, tree]
+      );
+      const renderAction = (0, import_react3.useMemo)(() => {
+        if (renderActionProp) return renderActionProp;
+        return ({
+          selected,
+          onOpenChange
+        }) => /* @__PURE__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: {
+              minWidth: "75px",
+              display: "flex",
+              justifyContent: "flex-end"
+            }
+          },
+          /* @__PURE__ */ import_react4.default.createElement(
+            import_noya_designsystem2.ActionMenu,
+            {
+              menuItems: assetContextMenuItems,
+              onSelect: (action) => handleMenuAction(action, selectedResources),
+              selected,
+              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
+              }
+            }
+          )
+        );
+      }, [
+        assetContextMenuItems,
+        handleMenuAction,
+        renderActionProp,
+        selectedResources,
+        viewType
+      ]);
+      (0, import_react3.useImperativeHandle)(ref, () => ({
+        upload: (selectedId) => handleUpload(selectedId),
+        delete: handleDelete,
+        download: handleDownload,
+        rename: handleRename,
+        addFolder: handleAddFolder,
+        moveUpAFolder: handleMoveUpAFolder,
+        replace: handleReplace,
+        preview: handlePreview,
+        moveMediaInsideFolder: handleMoveMediaInsideFolder,
+        getItemAtIndex: (index) => visibleItems[index]
+      }));
+      const diffResources = (0, import_react3.useMemo)(() => {
+        if (!publishedResources) return;
+        const diff = (0, import_noya_schemas3.diffResourceMaps)(publishedResources, media, "stableId");
+        return {
+          added: new Set(
+            diff.addedResources.map((resource) => resource.stableId)
+          ),
+          removed: new Set(
+            diff.removedResources.map((resource) => resource.stableId)
+          ),
+          modified: new Set(
+            diff.modifiedResources.map((resource) => resource.stableId)
+          )
+        };
+      }, [media, publishedResources]);
+      const keyExtractor = (0, import_react3.useCallback)((item) => item.id, []);
+      const renderCollection = (virtualizedSize) => /* @__PURE__ */ import_react4.default.createElement(
+        import_noya_designsystem2.FileExplorerCollection,
+        {
+          ref: collectionRef,
+          sortableId,
+          scrollable,
+          sharedDragProps,
+          items: visibleItems,
+          viewType,
+          size,
+          getId: keyExtractor,
+          getName: (file) => {
+            if (file.id === tempItem?.[1].id) {
+              return "";
+            }
+            return treeWithTempItem.getNameForId(file.id);
+          },
+          expandable,
+          sortable,
+          getPlaceholder: (item) => {
+            switch (item.type) {
+              case "directory":
+                return "Enter folder name";
+              case "resource":
+              case "asset":
+              case "file":
+                return "Enter file name";
+            }
+          },
+          getExpanded,
+          setExpanded: handleSetExpanded,
+          getRenamable: (item) => {
+            if (item.id === import_noya_schemas3.rootResource.id) return false;
             return true;
           },
-          onMoveItem: ({ sourceIndex, targetIndex, position }) => {
+          getDepth: (item) => depthMap[item.id],
+          menuItems: assetContextMenuItems,
+          onSelectMenuItem: handleMenuAction,
+          onSelectionChange: setSelectedIds,
+          onClickItem,
+          onClick: () => {
+            setSelectedIds([]);
+          },
+          onDoubleClickItem,
+          onRename,
+          renamable,
+          selectedIds,
+          itemClassName,
+          itemStyle,
+          virtualized: virtualizedSize,
+          renderThumbnail: (props) => /* @__PURE__ */ import_react4.default.createElement(
+            ResourceThumbnail,
+            {
+              ...props,
+              path: tree.idToPathMap.get(props.item.id),
+              renderThumbnailIcon,
+              viewType
+            }
+          ),
+          renderAction,
+          renderRight: (file) => {
+            if (file.type !== "asset") return null;
+            const publishStatus = getPublishStatus({
+              resource: file,
+              diff: diffResources
+            });
+            return /* @__PURE__ */ import_react4.default.createElement(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: "1.5px" }
+              },
+              publishStatus && /* @__PURE__ */ import_react4.default.createElement(
+                import_noya_designsystem2.Chip,
+                {
+                  colorScheme: publishStatus === "Modified" ? "info" : publishStatus === "Added" ? "secondary" : "primary"
+                },
+                publishStatus
+              ),
+              renderUser?.(file)
+            );
+          },
+          renderDetail: (file, selected) => {
+            if (file.type !== "asset") return null;
+            const asset = assets.find((a) => a.id === file.assetId);
+            if (!asset) return null;
+            return /* @__PURE__ */ import_react4.default.createElement(
+              import_noya_designsystem2.FileExplorerDetail,
+              {
+                selected,
+                size,
+                style: { minWidth: "75px", textAlign: "right" }
+              },
+              (0, import_noya_designsystem2.formatByteSize)(asset.size)
+            );
+          },
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ import_react4.default.createElement(import_noya_designsystem2.FileExplorerEmptyState, null),
+          itemRoleDescription: "clickable file item",
+          getDropTargetParentIndex: (overIndex) => {
+            const item = visibleItems[overIndex];
+            const parentIndex = visibleItems.findIndex(
+              (i) => i.id === tree.getParentIdForId(item.id)
+            );
+            return parentIndex === -1 ? void 0 : parentIndex;
+          },
+          acceptsDrop: ({
+            sourceIndex,
+            targetIndex,
+            position,
+            sourceListId,
+            targetListId
+          }) => {
+            if (sourceListId !== targetListId) {
+              return false;
+            }
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
+              return false;
+            }
             const sourceItem = visibleItems[sourceIndex];
             const targetItem = visibleItems[targetIndex];
-            if (position === "inside") {
-              handleMoveMediaInsideFolder(sourceItem, targetItem);
+            return acceptsResourceDrop({
+              position,
+              sourceItem,
+              targetItem,
+              tree
+            });
+          },
+          onMoveItem: ({
+            sourceListId,
+            sourceIndex,
+            targetListId,
+            targetIndex,
+            position
+          }) => {
+            if (sourceListId !== sortableId || targetListId !== sortableId || position !== "inside") {
+              return;
             }
+            const selectedItems = visibleItems.filter(
+              (item) => selectedIds.includes(item.id)
+            );
+            const sourceItem = visibleItems[sourceIndex];
+            const itemsToMove = selectedIds.includes(sourceItem.id) ? selectedItems : [sourceItem];
+            const targetItem = visibleItems[targetIndex];
+            handleMoveMediaInsideFolder(itemsToMove, targetItem);
           },
           onFilesDrop: async (event) => {
             event.preventDefault();
-            const files = Array.from(event.dataTransfer.files);
-            if (files.length === 0) return;
-            try {
-              const uploadPromises = files.map(async (file) => {
-                const asset = await assetManager.create(file);
-                return {
-                  asset: createMediaAsset({
-                    assetId: asset.id
-                  }),
-                  name: file.name
-                };
-              });
-              const newMediaItems = await Promise.all(uploadPromises);
-              const rootItemPath = tree.idToPathMap.get(rootItemId);
-              if (!rootItemPath) return;
-              setMedia(
-                { name: "Add media files", timestamp: Date.now() },
-                {
-                  ...media,
-                  ...Object.fromEntries(
-                    newMediaItems.map((item) => [
-                      import_imfs3.path.join(rootItemPath, item.name),
-                      item.asset
-                    ])
-                  )
-                }
-              );
-            } catch (error) {
-              console.error("Failed to upload dropped files:", error);
-            }
+            const rootItemPath = tree.idToPathMap.get(rootItemId);
+            if (!rootItemPath) return;
+            const newMedia = await handleDataTransfer({
+              dataTransfer: event.dataTransfer,
+              rootItemPath,
+              resourceMap: media,
+              accessibleByFileId: parentFileId
+            });
+            if (!newMedia) return;
+            setMedia(
+              { name: "Add media files", timestamp: Date.now() },
+              newMedia
+            );
           }
         }
-      )
-    ));
-  })
+      );
+      return /* @__PURE__ */ import_react4.default.createElement(
+        import_noya_designsystem2.FileExplorerLayout,
+        {
+          title: title ?? import_noya_schemas3.rootResourceName,
+          right: !readOnly && /* @__PURE__ */ import_react4.default.createElement(
+            import_noya_designsystem2.FileExplorerUploadButton,
+            {
+              showUploadButton,
+              onUpload: () => handleUpload(import_noya_schemas3.rootResource.id),
+              isUploading
+            },
+            right
+          ),
+          className
+        },
+        virtualized ? /* @__PURE__ */ import_react4.default.createElement(import_react_utils2.AutoSizer, null, ({ width, height }) => (
+          // add 24px to account for the -mx-3 on the Collection component
+          renderCollection({ width: width + 24, height })
+        )) : renderCollection(void 0)
+      );
+    }
+  )
 );
+function acceptsResourceDrop(parameters) {
+  const { position, sourceItem, targetItem, tree } = parameters;
+  if (position !== "inside" || targetItem.type === "asset") {
+    return false;
+  }
+  const sourcePath = tree.findPath(
+    import_noya_schemas3.rootResource,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    import_noya_schemas3.rootResource,
+    (item) => item.id === targetItem.id
+  );
+  if (!sourcePath || !targetPath) return false;
+  if ((0, import_noya_utils4.isDeepEqual)(sourcePath, targetPath.slice(0, sourcePath.length))) {
+    return false;
+  }
+  return true;
+}
+function getPublishStatus({
+  resource,
+  diff
+}) {
+  if (!diff) return void 0;
+  return diff.modified.has(resource.stableId) ? "Modified" : diff.added.has(resource.stableId) ? "Added" : diff.removed.has(resource.stableId) ? "Removed" : (
+    // We don't have to check for the specific ID, since if anything had been published
+    // but removed, it will be in the removed set
+    "Published"
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MediaCollection,
   PLACEHOLDER_ITEM_NAME,
+  ResourceExplorer,
+  ResourceThumbnail,
+  acceptsMediaItemDrop,
+  acceptsResourceDrop,
   basenameValidator,
   createMediaAsset,
   createMediaFile,
   createMediaFolder,
   createMediaItem,
   createMediaItemTree,
-  deleteMediaItems,
-  formatByteSize,
+  deleteResources,
   getDepthMap,
   getParentDirectories,
   getVisibleItems,
+  gridThumbnailDimension,
+  mediaDeleteMediaItems,
+  mediaGetDepthMap,
+  mediaGetParentDirectories,
+  mediaGetVisibleItems,
+  mediaMoveMediaInsideFolder,
+  mediaMovePathsIntoTarget,
+  mediaMoveUpAFolder,
+  mediaRenameMediaItemAndDescendantPaths,
+  mediaUpdateExpandedMap,
+  mediaValidateMediaItemRename,
   moveMediaInsideFolder,
   movePathsIntoTarget,
   moveUpAFolder,
-  renameMediaItemAndDescendantPaths,
+  renameResourceAndDescendantPaths,
   rootMediaItem,
   rootMediaItemName,
   rootMediaItemPath,
   updateExpandedMap,
-  validateMediaItemRename
+  validateResourceRename
 });
 //# sourceMappingURL=index.js.map