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

package/dist/index.mjs

@@ -38,10 +38,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 path5 = indexPath.slice();
+      while (path5.length > 0) {
+        let index = path5.shift();
+        const children = options.getChildren(node, path5);
         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 path4 = indexPath.slice();
+      let path5 = indexPath.slice();
       let result = [node];
-      while (path4.length > 0) {
-        let index = path4.shift();
+      while (path5.length > 0) {
+        let index = path5.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        const children = options.getChildren(node, path4, context);
+        const children = options.getChildren(node, path5, 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 path4 = indexPath.slice();
-      while (path4.length > 0) {
-        let index = path4.shift();
-        node = options.getChildren(node, path4)[index];
+      let path5 = indexPath.slice();
+      while (path5.length > 0) {
+        let index = path5.shift();
+        node = options.getChildren(node, path5)[index];
       }
       return node;
     }
     function accessPath(node, indexPath, options) {
-      let path4 = indexPath.slice();
+      let path5 = indexPath.slice();
       let result = [node];
-      while (path4.length > 0) {
-        let index = path4.shift();
+      while (path5.length > 0) {
+        let index = path5.shift();
         const context = options.includeTraversalContext ? makeTraversalContext(result) : void 0;
-        node = options.getChildren(node, path4, context)[index];
+        node = options.getChildren(node, path5, context)[index];
         result.push(node);
       }
       return result;
@@ -601,40 +601,40 @@ var require_transformPath = __commonJS({
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.transformPath = transformPath;
     var sort_1 = require_sort();
-    function commonAncestor(path4, otherPath) {
-      const length = Math.min(path4.length, otherPath.length);
+    function commonAncestor(path5, otherPath) {
+      const length = Math.min(path5.length, otherPath.length);
       for (let i = 0; i < length; i++) {
-        if (path4[i] !== otherPath[i]) {
-          return path4.slice(0, i);
+        if (path5[i] !== otherPath[i]) {
+          return path5.slice(0, i);
         }
       }
-      return path4.slice(0, length);
+      return path5.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(path5, operation, otherPath, count = 1) {
+      if (otherPath.length > path5.length || (0, sort_1.comparePathsByComponent)(otherPath, path5) > 0) {
+        return path5;
       }
       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(path5, otherPath);
+      const adjustmentIndex = common.length === path5.length || common.length === otherPath.length ? common.length - 1 : common.length;
+      const pathValue = path5[adjustmentIndex];
       const otherPathValue = otherPath[adjustmentIndex];
       if (operation === "insert" && otherPathValue <= pathValue) {
-        const newPath = [...path4];
+        const newPath = [...path5];
         newPath[adjustmentIndex] += count;
         return newPath;
       } else if (operation === "remove") {
         if (otherPathValue === pathValue) {
           return void 0;
         } else if (otherPathValue < pathValue) {
-          const newPath = [...path4];
+          const newPath = [...path5];
           newPath[adjustmentIndex] -= count;
           return newPath;
         }
       }
-      return path4;
+      return path5;
     }
   }
 });
@@ -800,15 +800,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((path5) => path5 ? (0, transformPath_1.transformPath)(path5, "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((path5) => {
             for (const otherPath of otherPaths) {
-              path4 = path4 ? (0, transformPath_1.transformPath)(path4, "remove", otherPath) : void 0;
+              path5 = path5 ? (0, transformPath_1.transformPath)(path5, "remove", otherPath) : void 0;
             }
-            return path4;
+            return path5;
           });
         }
         case "removeThenInsert": {
@@ -945,22 +945,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: path5, deleteCount = 0, nodes, track } = options;
+      if (path5.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(path5, deleteCount);
+      const operations = (0, operation_1.getInsertionOperations)(path5, 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(path5, deleteCount) {
       let pathsToRemove = [];
-      let parentPath = path4.slice(0, -1);
-      let index = path4[path4.length - 1];
+      let parentPath = path5.slice(0, -1);
+      let index = path5[path5.length - 1];
       for (let i = 0; i < deleteCount; i++) {
         pathsToRemove.push(parentPath.concat(index + i));
       }
@@ -1100,15 +1100,6 @@ var require_lib = __commonJS({
   }
 });
 
-// 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
 import {
   ActionMenu,
@@ -1119,6 +1110,7 @@ import {
   FileExplorerEmptyState,
   FileExplorerLayout,
   FileExplorerUploadButton,
+  formatByteSize,
   MediaThumbnail
 } from "@noya-app/noya-designsystem";
 import {
@@ -1236,7 +1228,7 @@ var createMediaItemTree = (mediaMap) => {
 };
 
 // src/MediaCollection.tsx
-import { path as path3 } from "imfs";
+import { path as path4 } from "imfs";
 import React from "react";
 
 // src/utils/files.ts
@@ -1259,6 +1251,9 @@ var getVisibleItems = ({
       }
       return;
     }
+    if (item.kind === "noyaFile" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
     if (item.kind === "file" && fileKindFilter === "all") {
       filteredItems.push(item);
     }
@@ -1295,7 +1290,7 @@ var movePathsIntoTarget = ({
   tree
 }) => {
   const ancestors = (0, import_tree_visit2.ancestorPaths)(
-    sourceItemPaths.map((path4) => path4.split("/"))
+    sourceItemPaths.map((path5) => path5.split("/"))
   );
   const mediaClone = { ...media };
   for (const ancestor of ancestors) {
@@ -1342,7 +1337,7 @@ var moveUpAFolder = ({
   );
   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((path5) => Boolean(path5));
   return movePathsIntoTarget({
     media,
     targetItemPath: grandparentFolderPath,
@@ -1408,7 +1403,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((path5) => Boolean(path5));
   return movePathsIntoTarget({
     media,
     sourceItemPaths,
@@ -1449,6 +1444,115 @@ var renameMediaItemAndDescendantPaths = ({
   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,
+  media,
+  uploadAsset
+}) {
+  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: 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, ""))
+      );
+      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 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",
@@ -1456,7 +1560,7 @@ var extensionToContentType = {
   jpeg: "image/jpeg"
 };
 function encodeFileContentForThumbnail(pathProp, item) {
-  const extension = path3.extname(pathProp).slice(1);
+  const extension = path4.extname(pathProp).slice(1);
   const contentType = extensionToContentType[extension];
   if (contentType) {
     if (item.encoding === "base64") {
@@ -1483,7 +1587,8 @@ var MediaThumbnailInternal = memoGeneric(
     item,
     selected,
     size,
-    path: pathProp
+    path: pathProp,
+    renderThumbnailIcon
   }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : void 0);
     const isRoot = item.id === rootMediaItem.id;
@@ -1501,7 +1606,7 @@ var MediaThumbnailInternal = memoGeneric(
         url = encoded.url;
       }
     }
-    const fileName = pathProp ? path3.basename(pathProp) : void 0;
+    const fileName = pathProp ? path4.basename(pathProp) : void 0;
     return /* @__PURE__ */ React.createElement(
       MediaThumbnail,
       {
@@ -1510,7 +1615,8 @@ var MediaThumbnailInternal = memoGeneric(
         url,
         selected,
         size,
-        fileName
+        fileName,
+        renderThumbnailIcon
       }
     );
   }
@@ -1542,7 +1648,9 @@ var MediaCollection = memo(
     sortable = false,
     renderEmptyState,
     sharedDragProps,
-    onClickItem
+    onClickItem,
+    renderThumbnailIcon,
+    onDidDeleteItems
   }, ref) {
     const setMedia = useCallback(
       (...args) => {
@@ -1624,7 +1732,7 @@ var MediaCollection = memo(
       const itemPath = tree.idToPathMap.get(item.id);
       const firstSelectedPath = tree.idToPathMap.get(selectedIds[0]);
       if (!itemPath || !firstSelectedPath) return false;
-      return itemPath.startsWith(path3.dirname(firstSelectedPath));
+      return itemPath.startsWith(path4.dirname(firstSelectedPath));
     });
     useEffect(() => {
       if (initialExpanded) {
@@ -1642,6 +1750,14 @@ var MediaCollection = memo(
     );
     const handleDelete = useCallback(
       (selectedIds2) => {
+        const deletedItems = Object.entries(media).flatMap(
+          ([path5, item]) => {
+            if (selectedIds2.includes(item.id)) {
+              return [[path5, item]];
+            }
+            return [];
+          }
+        );
         const newMedia = deleteMediaItems({
           selectedIds: selectedIds2,
           media,
@@ -1649,8 +1765,9 @@ var MediaCollection = memo(
         });
         setSelectedIds([rootMediaItem.id]);
         setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+        onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree]
+      [media, setMedia, setSelectedIds, tree, onDidDeleteItems]
     );
     const onRename = useCallback(
       (selectedItem, newName) => {
@@ -1688,7 +1805,7 @@ var MediaCollection = memo(
         const currentFolderPath = tree.idToPathMap.get(currentFolderId);
         if (!currentFolderPath) return;
         setTempItem([
-          path3.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          path4.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
           newFolder
         ]);
         setTimeout(() => {
@@ -1708,7 +1825,7 @@ var MediaCollection = memo(
         );
         if (!currentFolderPath) return;
         setTempItem([
-          path3.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          path4.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
           newFile
         ]);
         setTimeout(() => {
@@ -1739,7 +1856,7 @@ var MediaCollection = memo(
           if (!parentPath) return;
           const uploadPromises = files.map(async (file) => {
             const asset = await assetManager.create(file);
-            const assetPath = path3.join(parentPath, path3.basename(file.name));
+            const assetPath = path4.join(parentPath, path4.basename(file.name));
             return {
               assetPath,
               asset: createMediaAsset({ assetId: asset.id })
@@ -1819,9 +1936,6 @@ var MediaCollection = memo(
     );
     const handleMoveMediaInsideFolder = useCallback(
       (sourceItem, targetItem) => {
-        const sourceItemPath = tree.idToPathMap.get(sourceItem.id);
-        const targetItemPath = tree.idToPathMap.get(targetItem.id);
-        if (!sourceItemPath || !targetItemPath) return;
         const newMedia = moveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
@@ -1859,12 +1973,12 @@ var MediaCollection = memo(
         ],
         [
           onlySingleFolderSelected && {
-            title: "Add media",
+            title: "Upload Files",
             value: "upload",
             icon: /* @__PURE__ */ React.createElement(UploadIcon, null)
           },
           onlySingleFolderSelected && {
-            title: "Add a Folder",
+            title: "Add Folder",
             value: "addFolder",
             icon: /* @__PURE__ */ React.createElement(FolderIcon, null)
           },
@@ -1988,7 +2102,8 @@ var MediaCollection = memo(
       moveUpAFolder: handleMoveUpAFolder,
       replace: handleReplace,
       preview: handlePreview,
-      moveMediaInsideFolder: handleMoveMediaInsideFolder
+      moveMediaInsideFolder: handleMoveMediaInsideFolder,
+      getItemAtIndex: (index) => visibleItems[index]
     }));
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       FileExplorerLayout,
@@ -2030,6 +2145,7 @@ var MediaCollection = memo(
                 return "Enter folder name";
               case "asset":
               case "file":
+              case "noyaFile":
                 return "Enter file name";
             }
           },
@@ -2052,7 +2168,8 @@ var MediaCollection = memo(
             MediaThumbnailInternal,
             {
               ...props,
-              path: tree.idToPathMap.get(props.item.id)
+              path: tree.idToPathMap.get(props.item.id),
+              renderThumbnailIcon
             }
           ),
           renderAction,
@@ -2081,26 +2198,28 @@ var MediaCollection = memo(
             if (sourceListId !== targetListId) {
               return false;
             }
-            const sourceItem = visibleItems[sourceIndex];
-            const targetItem = visibleItems[targetIndex];
-            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 (isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))) {
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
               return false;
             }
-            return true;
+            const sourceItem = visibleItems[sourceIndex];
+            const targetItem = visibleItems[targetIndex];
+            return acceptsMediaItemDrop({
+              position,
+              sourceItem,
+              targetItem,
+              tree
+            });
           },
-          onMoveItem: ({ sourceIndex, targetIndex, position }) => {
+          onMoveItem: ({
+            sourceListId,
+            sourceIndex,
+            targetListId,
+            targetIndex,
+            position
+          }) => {
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
+              return;
+            }
             const sourceItem = visibleItems[sourceIndex];
             const targetItem = visibleItems[targetIndex];
             if (position === "inside") {
@@ -2109,45 +2228,48 @@ var MediaCollection = memo(
           },
           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) => [
-                      path3.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,
+              media,
+              uploadAsset: (file) => assetManager.create(file)
+            });
+            if (!newMedia) return;
+            setMedia(
+              { name: "Add media files", timestamp: Date.now() },
+              newMedia
+            );
           }
         }
       )
     ));
   })
 );
+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 (isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))) {
+    return false;
+  }
+  return true;
+}
 export {
   MediaCollection,
   PLACEHOLDER_ITEM_NAME,
+  acceptsMediaItemDrop,
   basenameValidator,
   createMediaAsset,
   createMediaFile,
@@ -2155,7 +2277,6 @@ export {
   createMediaItem,
   createMediaItemTree,
   deleteMediaItems,
-  formatByteSize,
   getDepthMap,
   getParentDirectories,
   getVisibleItems,