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

package/dist/index.mjs

@@ -38,10 +38,10 @@ var require_access = __commonJS({
         const accessed = _getPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path5 = indexPath.slice();
-      while (path5.length > 0) {
-        let index = path5.shift();
-        const children = options.getChildren(node, path5);
+      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;
@@ -54,12 +54,12 @@ var require_access = __commonJS({
       return _getPath(node, indexPath, options).slice(0, -1);
     }
     function _getPath(node, indexPath, options) {
-      let path5 = indexPath.slice();
+      let path7 = indexPath.slice();
       let result = [node];
-      while (path5.length > 0) {
-        let index = path5.shift();
+      while (path7.length > 0) {
+        let index = path7.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        const children = options.getChildren(node, path5, context);
+        const children = options.getChildren(node, path7, context);
         const child = children[index];
         if (!child) {
           return result;
@@ -74,20 +74,20 @@ var require_access = __commonJS({
         const accessed = accessPath(node, indexPath, options);
         return accessed[accessed.length - 1];
       }
-      let path5 = indexPath.slice();
-      while (path5.length > 0) {
-        let index = path5.shift();
-        node = options.getChildren(node, path5)[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 path5 = indexPath.slice();
+      let path7 = indexPath.slice();
       let result = [node];
-      while (path5.length > 0) {
-        let index = path5.shift();
+      while (path7.length > 0) {
+        let index = path7.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        node = options.getChildren(node, path5, context)[index];
+        node = options.getChildren(node, path7, context)[index];
         result.push(node);
       }
       return result;
@@ -129,9 +129,9 @@ var require_ancestors = __commonJS({
   "../../node_modules/tree-visit/lib/ancestors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ancestorPaths = ancestorPaths2;
+    exports.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;
@@ -601,40 +601,40 @@ var require_transformPath = __commonJS({
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.transformPath = transformPath;
     var sort_1 = require_sort();
-    function commonAncestor(path5, otherPath) {
-      const length = Math.min(path5.length, otherPath.length);
+    function commonAncestor(path7, otherPath) {
+      const length = Math.min(path7.length, otherPath.length);
       for (let i = 0; i < length; i++) {
-        if (path5[i] !== otherPath[i]) {
-          return path5.slice(0, i);
+        if (path7[i] !== otherPath[i]) {
+          return path7.slice(0, i);
         }
       }
-      return path5.slice(0, length);
+      return path7.slice(0, length);
     }
-    function transformPath(path5, operation, otherPath, count = 1) {
-      if (otherPath.length > path5.length || (0, sort_1.comparePathsByComponent)(otherPath, path5) > 0) {
-        return path5;
+    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(path5, otherPath);
-      const adjustmentIndex = common.length === path5.length || common.length === otherPath.length ? common.length - 1 : common.length;
-      const pathValue = path5[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 = [...path5];
+        const newPath = [...path7];
         newPath[adjustmentIndex] += count;
         return newPath;
       } else if (operation === "remove") {
         if (otherPathValue === pathValue) {
           return void 0;
         } else if (otherPathValue < pathValue) {
-          const newPath = [...path5];
+          const newPath = [...path7];
           newPath[adjustmentIndex] -= count;
           return newPath;
         }
       }
-      return path5;
+      return path7;
     }
   }
 });
@@ -800,15 +800,15 @@ var require_operation = __commonJS({
       switch (operation.type) {
         case "insert": {
           const otherPath = parentPath.concat(operation.index);
-          return transformedPaths.map((path5) => path5 ? (0, transformPath_1.transformPath)(path5, "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((path5) => {
+          return transformedPaths.map((path7) => {
             for (const otherPath of otherPaths) {
-              path5 = path5 ? (0, transformPath_1.transformPath)(path5, "remove", otherPath) : void 0;
+              path7 = path7 ? (0, transformPath_1.transformPath)(path7, "remove", otherPath) : void 0;
             }
-            return path5;
+            return path7;
           });
         }
         case "removeThenInsert": {
@@ -945,22 +945,22 @@ var require_splice = __commonJS({
       return _spliceWithPathTracking(node, options);
     }
     function _spliceWithPathTracking(node, options) {
-      const { path: path5, deleteCount = 0, nodes, track } = options;
-      if (path5.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(path5, deleteCount);
-      const operations = (0, operation_1.getInsertionOperations)(path5, 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(path5, deleteCount) {
+    function getPathsToRemove(path7, deleteCount) {
       let pathsToRemove = [];
-      let parentPath = path5.slice(0, -1);
-      let index = path5[path5.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,7 +1111,8 @@ import {
   FileExplorerLayout,
   FileExplorerUploadButton,
   formatByteSize,
-  MediaThumbnail
+  MediaThumbnail,
+  useOpenConfirmationDialog
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon,
@@ -1232,7 +1233,15 @@ import { path as path4 } from "imfs";
 import React from "react";
 
 // src/utils/files.ts
+var import_tree_visit3 = __toESM(require_lib());
+import { path as path3 } from "imfs";
+
+// src/utils/resourceUtils.ts
 var import_tree_visit2 = __toESM(require_lib());
+import {
+  createResourceTree,
+  rootResource
+} from "@noya-app/noya-schemas";
 import { path as path2 } from "imfs";
 var getVisibleItems = ({
   expandedMap,
@@ -1243,7 +1252,7 @@ var getVisibleItems = ({
   showRootItem
 }) => {
   const filteredItems = [];
-  const relativeRootItem = tree.find(rootMediaItem, (item) => item.id === rootItemId) ?? rootMediaItem;
+  const relativeRootItem = tree.find(rootResource, (item) => item.id === rootItemId) ?? rootResource;
   tree.visit(relativeRootItem, (item) => {
     if (relativeRootItem.id === item.id) {
       if (showRootItem) {
@@ -1251,16 +1260,16 @@ var getVisibleItems = ({
       }
       return;
     }
-    if (item.kind === "noyaFile" && fileKindFilter === "all") {
+    if (item.type === "file" && fileKindFilter === "all") {
       filteredItems.push(item);
     }
-    if (item.kind === "file" && fileKindFilter === "all") {
+    if (item.type === "asset" && (fileKindFilter === "assets" || fileKindFilter === "all")) {
       filteredItems.push(item);
     }
-    if (item.kind === "asset" && (fileKindFilter === "assets" || fileKindFilter === "all")) {
+    if (item.type === "directory" && (fileKindFilter === "directories" || fileKindFilter === "all")) {
       filteredItems.push(item);
     }
-    if (item.kind === "folder" && (fileKindFilter === "directories" || fileKindFilter === "all")) {
+    if (item.type === "resource" && (fileKindFilter === "resources" || fileKindFilter === "all")) {
       filteredItems.push(item);
     }
     if (!expandedMap[item.id] || !showAllDescendants) return "skip";
@@ -1272,7 +1281,7 @@ var basenameValidator = (basename) => {
   const invalidCharsRegex = /[/\\<>:"|?*]/;
   return !invalidCharsRegex.test(basename);
 };
-var validateMediaItemRename = ({
+var validateResourceRename = ({
   basename,
   selectedItemPath,
   media
@@ -1290,7 +1299,7 @@ var movePathsIntoTarget = ({
   tree
 }) => {
   const ancestors = (0, import_tree_visit2.ancestorPaths)(
-    sourceItemPaths.map((path5) => path5.split("/"))
+    sourceItemPaths.map((path7) => path7.split("/"))
   );
   const mediaClone = { ...media };
   for (const ancestor of ancestors) {
@@ -1308,7 +1317,7 @@ var movePathsIntoTarget = ({
         ancestorPath,
         newAncestorPath
       );
-      const newPathIsValid = validateMediaItemRename({
+      const newPathIsValid = validateResourceRename({
         basename: path2.basename(descendantPath),
         selectedItemPath: newDescendantPath,
         media
@@ -1327,17 +1336,17 @@ var moveUpAFolder = ({
   selectedIds
 }) => {
   const indexPath = tree.findPath(
-    rootMediaItem,
+    rootResource,
     (item) => item.id === selectedIds[0]
   );
   if (!indexPath) return;
   const grandparentFolder = tree.access(
-    rootMediaItem,
+    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((path5) => Boolean(path5));
+  const sourceItemPaths = selectedIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
   return movePathsIntoTarget({
     media,
     targetItemPath: grandparentFolderPath,
@@ -1366,7 +1375,7 @@ var updateExpandedMap = ({
   const newExpandedMap = { ...expandedMap };
   const inner = (item2, expanded2) => {
     if (!expandable) return {};
-    if (item2.id === rootMediaItem.id) return {};
+    if (item2.id === rootResource.id) return {};
     if (!expanded2) {
       const children = tree.getChildren(item2, []);
       children.forEach((child) => inner(child, false));
@@ -1376,13 +1385,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 [];
@@ -1403,7 +1412,7 @@ var moveMediaInsideFolder = ({
 }) => {
   const targetItemPath = tree.idToPathMap.get(targetItemId);
   if (!targetItemPath) return media;
-  const sourceItemPaths = sourceItemIds.map((id) => tree.idToPathMap.get(id)).filter((path5) => Boolean(path5));
+  const sourceItemPaths = sourceItemIds.map((id) => tree.idToPathMap.get(id)).filter((path7) => Boolean(path7));
   return movePathsIntoTarget({
     media,
     sourceItemPaths,
@@ -1411,16 +1420,13 @@ var moveMediaInsideFolder = ({
     tree
   });
 };
-var getParentDirectories = (mediaMap, folderId) => {
-  const tree = createMediaItemTree(mediaMap);
-  const indexPath = tree.findPath(
-    rootMediaItem,
-    (item) => item.id === folderId
-  );
-  if (!indexPath) return [rootMediaItem];
-  return tree.accessPath(rootMediaItem, indexPath);
+var getParentDirectories = (resourceMap, folderId) => {
+  const tree = createResourceTree(resourceMap);
+  const indexPath = tree.findPath(rootResource, (item) => item.id === folderId);
+  if (!indexPath) return [rootResource];
+  return tree.accessPath(rootResource, indexPath);
 };
-var renameMediaItemAndDescendantPaths = ({
+var renameResourceAndDescendantPaths = ({
   newName,
   selectedItemPath,
   media,
@@ -1438,175 +1444,280 @@ var renameMediaItemAndDescendantPaths = ({
       selectedItemPath,
       newItemPath
     );
-    mediaClone[newDescendantPath] = mediaClone[descendantPath];
+    mediaClone[newDescendantPath] = {
+      ...mediaClone[descendantPath],
+      path: newDescendantPath
+    };
     delete mediaClone[descendantPath];
   }
   return mediaClone;
 };
 
-// src/utils/handleFileDrop.ts
-import { path as path3 } from "imfs";
-function isDirectoryEntry(entry) {
-  return entry.isDirectory;
-}
-function isFileEntry(entry) {
-  return entry.isFile;
-}
-async function handleDataTransfer({
-  dataTransfer,
-  rootItemPath,
+// 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 = path3.join(path3.dirname(selectedItemPath), basename);
+  const newPathExists = media[newItemPath];
+  if (newPathExists) return false;
+  return true;
+};
+var mediaMovePathsIntoTarget = ({
   media,
-  uploadAsset
-}) {
-  try {
-    const dataTransferItems = Array.from(dataTransfer.items ?? []);
-    const supportsEntries = dataTransferItems.some(
-      (item) => typeof item?.webkitGetAsEntry === "function"
+  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 = path3.join(
+      targetItemPath,
+      path3.basename(ancestorPath)
     );
-    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: path3.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, path3.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, ""))
+    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
       );
-      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 = path3.dirname(relativePath);
-      if (dir && dir !== ".") {
-        const parts = dir.split("/").filter(Boolean);
-        let acc = "";
-        for (const part of parts) {
-          acc = acc ? path3.join(acc, part) : part;
-          folderRelativePaths.add(acc);
-        }
+      const newPathIsValid = mediaValidateMediaItemRename({
+        basename: path3.basename(descendantPath),
+        selectedItemPath: newDescendantPath,
+        media
+      });
+      if (newPathIsValid) {
+        mediaClone[newDescendantPath] = mediaClone[descendantPath];
+        delete mediaClone[descendantPath];
       }
     }
-    const folderEntries = Array.from(folderRelativePaths).map((rel) => path3.join(rootItemPath, rel)).filter((full) => !media[full]).map((full) => [full, createMediaFolder()]);
-    const uploadResults = await Promise.all(
-      dropped.map(
-        async ({ file, relativePath }) => {
-          const asset = await uploadAsset(file);
-          return [
-            path3.join(rootItemPath, relativePath),
-            createMediaAsset({ assetId: asset.id })
-          ];
-        }
-      )
-    );
-    return {
-      ...media,
-      ...Object.fromEntries([...folderEntries, ...uploadResults])
-    };
-  } catch (error) {
-    console.error("Failed to upload dropped files:", error);
   }
-}
-
-// src/MediaCollection.tsx
-var extensionToContentType = {
-  svg: "image/svg+xml",
-  png: "image/png",
-  jpeg: "image/jpeg"
+  return mediaClone;
 };
-function encodeFileContentForThumbnail(pathProp, item) {
-  const extension = path4.extname(pathProp).slice(1);
-  const contentType = extensionToContentType[extension];
-  if (contentType) {
-    if (item.encoding === "base64") {
-      return {
-        contentType,
-        url: `data:${contentType};base64,${item.content}`
-      };
+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 {
-      try {
-        return {
-          contentType,
-          url: `data:${contentType},${encodeURIComponent(item.content)}`
-        };
-      } catch (error) {
-        console.warn("Failed to encode content:", error);
-        return { contentType };
-      }
-    }
-  }
-  return void 0;
-}
-var MediaThumbnailInternal = memoGeneric(
-  ({
-    item,
-    selected,
-    size,
-    path: pathProp,
-    renderThumbnailIcon
-  }) => {
-    const asset = useAsset(item.kind === "asset" ? item.assetId : void 0);
-    const isRoot = item.id === rootMediaItem.id;
-    const isFolder = item.kind === "folder";
-    const isFile = item.kind === "file";
-    let contentType;
-    let url;
-    if (asset) {
-      contentType = asset.contentType;
-      url = asset.url;
-    } else if (isFile && pathProp) {
-      const encoded = encodeFileContentForThumbnail(pathProp, item);
-      if (encoded) {
-        contentType = encoded.contentType;
-        url = encoded.url;
-      }
+      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,
+    (item) => item.id === folderId
+  );
+  if (!indexPath) return [rootMediaItem];
+  return tree.accessPath(rootMediaItem, indexPath);
+};
+var mediaRenameMediaItemAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree
+}) => {
+  const mediaClone = { ...media };
+  const selectedItem = mediaClone[selectedItemPath];
+  if (!selectedItem) return mediaClone;
+  const parentPath = path3.dirname(selectedItemPath);
+  const newItemPath = path3.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];
+    delete mediaClone[descendantPath];
+  }
+  return mediaClone;
+};
+
+// src/MediaCollection.tsx
+var extensionToContentType = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpeg: "image/jpeg"
+};
+function encodeFileContentForThumbnail(pathProp, item) {
+  const extension = path4.extname(pathProp).slice(1);
+  const contentType = extensionToContentType[extension];
+  if (contentType) {
+    if (item.encoding === "base64") {
+      return {
+        contentType,
+        url: `data:${contentType};base64,${item.content}`
+      };
+    } else {
+      try {
+        return {
+          contentType,
+          url: `data:${contentType},${encodeURIComponent(item.content)}`
+        };
+      } catch (error) {
+        console.warn("Failed to encode content:", error);
+        return { contentType };
+      }
+    }
+  }
+  return void 0;
+}
+var MediaThumbnailInternal = memoGeneric(
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+    renderThumbnailIcon
+  }) => {
+    const asset = useAsset(item.kind === "asset" ? item.assetId : void 0);
+    const isRoot = item.id === rootMediaItem.id;
+    const isFolder = item.kind === "folder";
+    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) {
+        contentType = encoded.contentType;
+        url = encoded.url;
+      }
     }
     const fileName = pathProp ? path4.basename(pathProp) : void 0;
+    const dimensions = width && height ? { width, height } : void 0;
     return /* @__PURE__ */ React.createElement(
       MediaThumbnail,
       {
@@ -1616,7 +1727,8 @@ var MediaThumbnailInternal = memoGeneric(
         selected,
         size,
         fileName,
-        renderThumbnailIcon
+        renderThumbnailIcon,
+        dimensions
       }
     );
   }
@@ -1650,7 +1762,8 @@ var MediaCollection = memo(
     sharedDragProps,
     onClickItem,
     renderThumbnailIcon,
-    onDidDeleteItems
+    onDidDeleteItems,
+    onAssetsUploaded
   }, ref) {
     const setMedia = useCallback(
       (...args) => {
@@ -1691,7 +1804,7 @@ var MediaCollection = memo(
     const assets = useAssets();
     const [expandedMap, setExpandedMap] = useState({});
     const visibleItems = useMemo(
-      () => getVisibleItems({
+      () => mediaGetVisibleItems({
         expandedMap,
         fileKindFilter,
         rootItemId,
@@ -1709,7 +1822,7 @@ var MediaCollection = memo(
       ]
     );
     const depthMap = useMemo(
-      () => getDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
+      () => mediaGetDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
       [treeWithTempItem, showAllDescendants]
     );
     const collectionRef = useRef(null);
@@ -1748,17 +1861,23 @@ var MediaCollection = memo(
       },
       [expandedMap, expandable]
     );
+    const openConfirmationDialog = useOpenConfirmationDialog();
     const handleDelete = useCallback(
-      (selectedIds2) => {
+      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(
-          ([path5, item]) => {
+          ([path7, item]) => {
             if (selectedIds2.includes(item.id)) {
-              return [[path5, item]];
+              return [[path7, item]];
             }
             return [];
           }
         );
-        const newMedia = deleteMediaItems({
+        const newMedia = mediaDeleteMediaItems({
           selectedIds: selectedIds2,
           media,
           tree
@@ -1767,7 +1886,14 @@ var MediaCollection = memo(
         setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
         onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree, onDidDeleteItems]
+      [
+        media,
+        setMedia,
+        setSelectedIds,
+        tree,
+        onDidDeleteItems,
+        openConfirmationDialog
+      ]
     );
     const onRename = useCallback(
       (selectedItem, newName) => {
@@ -1776,7 +1902,7 @@ var MediaCollection = memo(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const renameIsValid = validateMediaItemRename({
+        const renameIsValid = mediaValidateMediaItemRename({
           basename: newName,
           selectedItemPath,
           media: temp.media
@@ -1785,7 +1911,7 @@ var MediaCollection = memo(
           setTempItem(void 0);
           return;
         }
-        const mediaWithRenamedDescendantPaths = renameMediaItemAndDescendantPaths({
+        const mediaWithRenamedDescendantPaths = mediaRenameMediaItemAndDescendantPaths({
           newName,
           selectedItemPath,
           media: temp.media,
@@ -1836,7 +1962,7 @@ var MediaCollection = memo(
     );
     const handleMoveUpAFolder = useCallback(
       (selectedIds2) => {
-        const newMedia = moveUpAFolder({
+        const newMedia = mediaMoveUpAFolder({
           tree,
           media,
           selectedIds: selectedIds2
@@ -1863,23 +1989,28 @@ var MediaCollection = memo(
             };
           });
           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 = useCallback(
       async (selectedItems) => {
@@ -1923,7 +2054,10 @@ var MediaCollection = 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]
@@ -1936,7 +2070,7 @@ var MediaCollection = memo(
     );
     const handleMoveMediaInsideFolder = useCallback(
       (sourceItem, targetItem) => {
-        const newMedia = moveMediaInsideFolder({
+        const newMedia = mediaMoveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
           media,
@@ -2055,7 +2189,7 @@ var MediaCollection = memo(
     const handleSetExpanded = useCallback(
       (item, expanded) => {
         setExpandedMap(
-          (prev) => updateExpandedMap({
+          (prev) => mediaUpdateExpandedMap({
             item,
             expanded,
             expandable,
@@ -2225,22 +2359,6 @@ var MediaCollection = memo(
             if (position === "inside") {
               handleMoveMediaInsideFolder(sourceItem, targetItem);
             }
-          },
-          onFilesDrop: async (event) => {
-            event.preventDefault();
-            const rootItemPath = tree.idToPathMap.get(rootItemId);
-            if (!rootItemPath) return;
-            const newMedia = await handleDataTransfer({
-              dataTransfer: event.dataTransfer,
-              rootItemPath,
-              media,
-              uploadAsset: (file) => assetManager.create(file)
-            });
-            if (!newMedia) return;
-            setMedia(
-              { name: "Add media files", timestamp: Date.now() },
-              newMedia
-            );
           }
         }
       )
@@ -2266,28 +2384,1032 @@ function acceptsMediaItemDrop(parameters) {
   }
   return true;
 }
+
+// src/ResourceExplorer.tsx
+import {
+  ActionMenu as ActionMenu2,
+  Chip,
+  createSectionedMenu as createSectionedMenu2,
+  cssVars as cssVars2,
+  FileExplorerCollection as FileExplorerCollection2,
+  FileExplorerDetail as FileExplorerDetail2,
+  FileExplorerEmptyState as FileExplorerEmptyState2,
+  FileExplorerLayout as FileExplorerLayout2,
+  FileExplorerUploadButton as FileExplorerUploadButton2,
+  formatByteSize as formatByteSize2,
+  MediaThumbnail as MediaThumbnail2,
+  useOpenConfirmationDialog as useOpenConfirmationDialog2
+} from "@noya-app/noya-designsystem";
+import {
+  DownloadIcon as DownloadIcon2,
+  FolderIcon as FolderIcon2,
+  InputIcon as InputIcon2,
+  OpenInNewWindowIcon as OpenInNewWindowIcon2,
+  ResetIcon as ResetIcon2,
+  TrashIcon as TrashIcon2,
+  UpdateIcon as UpdateIcon2,
+  UploadIcon as UploadIcon2
+} from "@noya-app/noya-icons";
+import {
+  useAsset as useAsset2,
+  useAssetManager as useAssetManager2,
+  useAssets as useAssets2
+} from "@noya-app/noya-multiplayer-react";
+import {
+  createAssetResource as createAssetResource2,
+  createDirectoryResource as createDirectoryResource2,
+  createResourceTree as createResourceTree2,
+  diffResourceMaps,
+  PLACEHOLDER_ITEM_NAME as PLACEHOLDER_ITEM_NAME2,
+  rootResource as rootResource2,
+  rootResourceName
+} from "@noya-app/noya-schemas";
+import { Base64 as Base642, groupBy as groupBy2, isDeepEqual as isDeepEqual2, uuid as uuid3 } from "@noya-app/noya-utils";
+import {
+  AutoSizer,
+  downloadUrl as downloadUrl2,
+  memoGeneric as memoGeneric2,
+  useControlledOrUncontrolled as useControlledOrUncontrolled2
+} from "@noya-app/react-utils";
+import { fileOpen as fileOpen2 } from "browser-fs-access";
+import {
+  forwardRef as forwardRef2,
+  memo as memo2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { path as path6 } from "imfs";
+import React2 from "react";
+
+// src/utils/handleFileDrop.ts
+import {
+  createAssetResource,
+  createDirectoryResource
+} from "@noya-app/noya-schemas";
+import { Base64, uuid as uuid2 } from "@noya-app/noya-utils";
+import { path as path5 } from "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: path5.join(basePath, file.name)
+          }
+        ];
+      }
+      if (isDirectoryEntry(entry)) {
+        const reader = entry.createReader();
+        const readAll = async () => {
+          const all = [];
+          while (true) {
+            const entries = await new Promise(
+              (resolve) => reader.readEntries((ents) => resolve(ents))
+            );
+            if (!entries.length) break;
+            all.push(...entries);
+          }
+          return all;
+        };
+        const children = await readAll();
+        const results = await Promise.all(
+          children.map(
+            (child) => collectFromEntry(child, path5.join(basePath, entry.name))
+          )
+        );
+        return results.flat();
+      }
+      return [];
+    };
+    let dropped = [];
+    if (supportsEntries) {
+      const topLevelEntries = dataTransferItems.flatMap((item) => {
+        const entry = item.webkitGetAsEntry?.();
+        if (!entry) return [];
+        return [entry];
+      });
+      const nested = await Promise.all(
+        topLevelEntries.map((entry) => collectFromEntry(entry, ""))
+      );
+      dropped = nested.flat();
+    } else {
+      const files = Array.from(dataTransfer.files);
+      if (files.length === 0) return;
+      dropped = files.map((file) => ({
+        file,
+        // Best effort: try webkitRelativePath; fall back to name
+        relativePath: file.webkitRelativePath && file.webkitRelativePath.length > 0 ? file.webkitRelativePath : file.name
+      }));
+    }
+    if (dropped.length === 0) return;
+    const folderRelativePaths = /* @__PURE__ */ new Set();
+    for (const { relativePath } of dropped) {
+      const dir = path5.dirname(relativePath);
+      if (dir && dir !== ".") {
+        const parts = dir.split("/").filter(Boolean);
+        let acc = "";
+        for (const part of parts) {
+          acc = acc ? path5.join(acc, part) : part;
+          folderRelativePaths.add(acc);
+        }
+      }
+    }
+    const folderEntries = Array.from(folderRelativePaths).map((rel) => path5.join(rootItemPath, rel)).filter((full) => !resourceMap[full]).map((full) => [
+      full,
+      createDirectoryResource({
+        id: uuid2(),
+        path: full,
+        accessibleByFileId,
+        stableId: uuid2()
+      })
+    ]);
+    const uploadResults = await Promise.all(
+      dropped.map(
+        async ({ file, relativePath }) => {
+          return [
+            path5.join(rootItemPath, relativePath),
+            createAssetResource({
+              id: uuid2(),
+              asset: {
+                content: Base64.encode(await file.arrayBuffer()),
+                contentType: file.type,
+                encoding: "base64"
+              },
+              path: path5.join(rootItemPath, relativePath),
+              accessibleByFileId,
+              stableId: uuid2()
+            })
+          ];
+        }
+      )
+    );
+    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 = memoGeneric2(
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+    renderThumbnailIcon,
+    className,
+    url: urlProp,
+    contentType: contentTypeProp,
+    viewType
+  }) => {
+    const asset = useAsset2(item.type === "asset" ? item.assetId : void 0);
+    const isRoot = item.id === rootResource2.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 ? path6.basename(pathProp) : void 0;
+    return /* @__PURE__ */ React2.createElement(
+      MediaThumbnail2,
+      {
+        contentType,
+        iconName: isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : void 0,
+        url,
+        selected,
+        size,
+        fileName,
+        renderThumbnailIcon,
+        dimensions: viewType === "grid" ? gridThumbnailDimension : void 0,
+        className
+      }
+    );
+  }
+);
+var ResourceExplorer = memo2(
+  forwardRef2(
+    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 = rootResource2.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 = useCallback2(
+        (...args) => {
+          setMediaProp?.(...args);
+        },
+        [setMediaProp]
+      );
+      const tree = useMemo2(() => createResourceTree2(media), [media]);
+      const [tempItem, setTempItem] = useState2(
+        void 0
+      );
+      const mediaWithTempItem = useMemo2(
+        () => ({
+          ...media,
+          ...tempItem ? { [tempItem[0]]: tempItem[1] } : {}
+        }),
+        [media, tempItem]
+      );
+      const treeWithTempItem = useMemo2(
+        () => createResourceTree2(mediaWithTempItem),
+        [mediaWithTempItem]
+      );
+      const temp = useMemo2(
+        () => ({
+          media: mediaWithTempItem,
+          tree: treeWithTempItem
+        }),
+        [mediaWithTempItem, treeWithTempItem]
+      );
+      const [selectedIds, setSelectedIds] = useControlledOrUncontrolled2({
+        defaultValue: [],
+        value: selectedIdsProp,
+        onChange: onSelectionChange
+      });
+      const assetManager = useAssetManager2();
+      const assets = useAssets2();
+      const [expandedMap, setExpandedMap] = useState2({});
+      const visibleItems = useMemo2(
+        () => getVisibleItems({
+          expandedMap,
+          fileKindFilter,
+          rootItemId,
+          tree: treeWithTempItem,
+          showAllDescendants,
+          showRootItem
+        }),
+        [
+          expandedMap,
+          fileKindFilter,
+          rootItemId,
+          treeWithTempItem,
+          showAllDescendants,
+          showRootItem
+        ]
+      );
+      const depthMap = useMemo2(
+        () => getDepthMap(rootResource2, treeWithTempItem, showAllDescendants),
+        [treeWithTempItem, showAllDescendants]
+      );
+      const collectionRef = useRef2(null);
+      const selectedResources = useMemo2(
+        () => treeWithTempItem.resourcesWithRoot.filter(
+          (item) => selectedIds.includes(item.id)
+        ),
+        [treeWithTempItem, selectedIds]
+      );
+      const groupedItems = groupBy2(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(rootResource2.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(path6.dirname(firstSelectedPath));
+      });
+      useEffect2(() => {
+        if (initialExpanded) {
+          setExpandedMap(initialExpanded);
+        }
+      }, [initialExpanded]);
+      const getExpanded = useCallback2(
+        (item) => {
+          if (!expandable) return void 0;
+          if (item.type !== "directory") return void 0;
+          if (item.id === rootResource2.id) return void 0;
+          return expandedMap[item.id] ?? false;
+        },
+        [expandedMap, expandable]
+      );
+      const openConfirmationDialog = useOpenConfirmationDialog2();
+      const handleDelete = useCallback2(
+        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([rootResource2.id]);
+          setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+          onDidDeleteItems?.(deletedItems);
+        },
+        [
+          media,
+          setMedia,
+          setSelectedIds,
+          tree,
+          onDidDeleteItems,
+          openConfirmationDialog
+        ]
+      );
+      const onRename = useCallback2(
+        (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 = useCallback2(
+        (currentFolderId) => {
+          const currentFolderPath = tree.idToPathMap.get(currentFolderId);
+          if (!currentFolderPath) return;
+          const newFolderPath = path6.join(
+            currentFolderPath,
+            PLACEHOLDER_ITEM_NAME2
+          );
+          const newFolder = createDirectoryResource2({
+            path: newFolderPath,
+            accessibleByFileId: parentFileId,
+            id: newFolderPath,
+            stableId: uuid3()
+          });
+          setTempItem([newFolderPath, newFolder]);
+          setTimeout(() => {
+            collectionRef.current?.editName(newFolder.id);
+          }, 50);
+        },
+        [parentFileId, tree]
+      );
+      const handleMoveUpAFolder = useCallback2(
+        (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] = useState2(false);
+      const handleUpload = useCallback2(
+        async (selectedId) => {
+          try {
+            const files = await fileOpen2({ 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 = path6.join(parentPath, path6.basename(file.name));
+              return {
+                assetPath,
+                asset: createAssetResource2({
+                  id: uuid3(),
+                  asset: {
+                    content: Base642.encode(await file.arrayBuffer()),
+                    contentType: file.type,
+                    encoding: "base64"
+                  },
+                  path: assetPath,
+                  accessibleByFileId: parentFileId,
+                  stableId: uuid3()
+                })
+              };
+            });
+            setIsUploading(true);
+            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,
+                ...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 = useCallback2(
+        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 downloadUrl2(asset.url, tree.getNameForId(item.id));
+          });
+          await Promise.all(downloadPromises);
+        },
+        [assets, tree]
+      );
+      const handlePreview = useCallback2(
+        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 = useCallback2(
+        async (selectedItem) => {
+          try {
+            const file = await fileOpen2();
+            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]: createAssetResource2({
+                  ...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 = useCallback2(
+        (selectedItemId) => {
+          collectionRef.current?.editName(selectedItemId);
+        },
+        [collectionRef]
+      );
+      const handleMoveMediaInsideFolder = useCallback2(
+        (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 = useMemo2(() => {
+        return createSectionedMenu2(
+          [
+            !rootSelected && singleItemSelected && {
+              title: "Rename",
+              value: "rename",
+              icon: /* @__PURE__ */ React2.createElement(InputIcon2, null)
+            },
+            onlySingleAssetSelected && {
+              title: "Replace",
+              value: "replace",
+              icon: /* @__PURE__ */ React2.createElement(UpdateIcon2, null)
+            },
+            !rootSelected && {
+              title: "Delete",
+              value: "delete",
+              icon: /* @__PURE__ */ React2.createElement(TrashIcon2, null)
+            }
+          ],
+          [
+            onlySingleFolderSelected && {
+              title: "Upload Files",
+              value: "upload",
+              icon: /* @__PURE__ */ React2.createElement(UploadIcon2, null)
+            },
+            onlySingleFolderSelected && {
+              title: "Add Folder",
+              value: "addFolder",
+              icon: /* @__PURE__ */ React2.createElement(FolderIcon2, null)
+            },
+            onlyAssetsSelected && tree.resourcesWithRoot.length > 0 && {
+              title: "Download",
+              value: "download",
+              icon: /* @__PURE__ */ React2.createElement(DownloadIcon2, null)
+            },
+            onlySingleAssetSelected && {
+              title: "Preview",
+              value: "preview",
+              icon: /* @__PURE__ */ React2.createElement(OpenInNewWindowIcon2, null)
+            }
+          ],
+          [
+            !rootSelected && sameParentSelected && {
+              title: "Move up a folder",
+              value: "move",
+              icon: /* @__PURE__ */ React2.createElement(ResetIcon2, null)
+            }
+          ]
+        );
+      }, [
+        rootSelected,
+        singleItemSelected,
+        onlySingleAssetSelected,
+        onlySingleFolderSelected,
+        onlyAssetsSelected,
+        tree.resourcesWithRoot.length,
+        sameParentSelected
+      ]);
+      const handleMenuAction = useCallback2(
+        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 = useCallback2(
+        (item, expanded) => {
+          setExpandedMap(
+            (prev) => updateExpandedMap({
+              item,
+              expanded,
+              expandable,
+              expandedMap: prev,
+              tree
+            })
+          );
+        },
+        [expandable, tree]
+      );
+      const renderAction = useMemo2(() => {
+        if (renderActionProp) return renderActionProp;
+        return ({
+          selected,
+          onOpenChange
+        }) => /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              minWidth: "75px",
+              display: "flex",
+              justifyContent: "flex-end"
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            ActionMenu2,
+            {
+              menuItems: assetContextMenuItems,
+              onSelect: (action) => handleMenuAction(action, selectedResources),
+              selected,
+              onOpenChange,
+              variant: viewType === "grid" ? "normal" : "bare",
+              style: {
+                backgroundColor: selected ? cssVars2.colors.selectedListItemBackground : "transparent",
+                color: selected ? cssVars2.colors.selectedListItemText : void 0
+              }
+            }
+          )
+        );
+      }, [
+        assetContextMenuItems,
+        handleMenuAction,
+        renderActionProp,
+        selectedResources,
+        viewType
+      ]);
+      useImperativeHandle2(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 = useMemo2(() => {
+        if (!publishedResources) return;
+        const diff = 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 = useCallback2((item) => item.id, []);
+      const renderCollection = (virtualizedSize) => /* @__PURE__ */ React2.createElement(
+        FileExplorerCollection2,
+        {
+          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 === rootResource2.id) return false;
+            return true;
+          },
+          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__ */ React2.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__ */ React2.createElement(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: "1.5px" }
+              },
+              publishStatus && /* @__PURE__ */ React2.createElement(
+                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__ */ React2.createElement(
+              FileExplorerDetail2,
+              {
+                selected,
+                size,
+                style: { minWidth: "75px", textAlign: "right" }
+              },
+              formatByteSize2(asset.size)
+            );
+          },
+          renderEmptyState: () => renderEmptyState?.() ?? /* @__PURE__ */ React2.createElement(FileExplorerEmptyState2, 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];
+            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 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__ */ React2.createElement(
+        FileExplorerLayout2,
+        {
+          title: title ?? rootResourceName,
+          right: !readOnly && /* @__PURE__ */ React2.createElement(
+            FileExplorerUploadButton2,
+            {
+              showUploadButton,
+              onUpload: () => handleUpload(rootResource2.id),
+              isUploading
+            },
+            right
+          ),
+          className
+        },
+        virtualized ? /* @__PURE__ */ React2.createElement(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(
+    rootResource2,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    rootResource2,
+    (item) => item.id === targetItem.id
+  );
+  if (!sourcePath || !targetPath) return false;
+  if (isDeepEqual2(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"
+  );
+}
 export {
   MediaCollection,
   PLACEHOLDER_ITEM_NAME,
+  ResourceExplorer,
+  ResourceThumbnail,
   acceptsMediaItemDrop,
+  acceptsResourceDrop,
   basenameValidator,
   createMediaAsset,
   createMediaFile,
   createMediaFolder,
   createMediaItem,
   createMediaItemTree,
-  deleteMediaItems,
+  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.mjs.map