@noya-app/noya-file-explorer 0.0.18 → 0.0.20

package/dist/index.js

@@ -1122,6 +1122,8 @@ __export(src_exports, {
   createMediaItem: () => createMediaItem,
   createMediaItemTree: () => createMediaItemTree,
   deleteResources: () => deleteResources,
+  getContentTypeFromExtension: () => getContentTypeFromExtension,
+  getContentTypeFromFile: () => getContentTypeFromFile,
   getDepthMap: () => getDepthMap,
   getParentDirectories: () => getParentDirectories,
   getVisibleItems: () => getVisibleItems,
@@ -1988,11 +1990,12 @@ var MediaCollection = (0, import_react.memo)(
           const parentPath = tree.idToPathMap.get(selectedId);
           if (!parentPath) return;
           const uploadPromises = files.map(async (file) => {
-            const asset = await assetManager.create(file);
+            const created = await assetManager.create(file);
+            const assetStableId = created.id;
             const assetPath = import_imfs4.path.join(parentPath, import_imfs4.path.basename(file.name));
             return {
               assetPath,
-              asset: createMediaAsset({ assetId: asset.id })
+              asset: createMediaAsset({ assetId: assetStableId })
             };
           });
           setIsUploading(true);
@@ -2022,7 +2025,7 @@ var MediaCollection = (0, import_react.memo)(
     const handleDownload = (0, import_react.useCallback)(
       async (selectedItems) => {
         const downloadPromises = selectedItems.filter((item) => item.kind === "asset").map(async (item) => {
-          const asset = assets.find((a) => a.id === item.assetId);
+          const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
           if (!asset?.url) return;
           return (0, import_react_utils.downloadUrl)(asset.url, tree.getNameForId(item.id));
         });
@@ -2033,7 +2036,7 @@ var MediaCollection = (0, import_react.memo)(
     const handlePreview = (0, import_react.useCallback)(
       async (selectedItems) => {
         const previewPromises = selectedItems.filter((item) => item.kind === "asset").map(async (item) => {
-          const asset = assets.find((a) => a.id === item.assetId);
+          const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
           if (!asset?.url) return;
           return window?.open(asset.url, "_blank");
         });
@@ -2046,7 +2049,8 @@ var MediaCollection = (0, import_react.memo)(
         try {
           const file = await (0, import_browser_fs_access.fileOpen)();
           if (!file) return;
-          const asset = await assetManager.create(file);
+          const created = await assetManager.create(file);
+          const assetStableId = created.id;
           const oldFile = selectedItem;
           const oldFilePath = tree.idToPathMap.get(oldFile.id);
           if (!oldFilePath || oldFile.kind !== "asset") return;
@@ -2056,7 +2060,7 @@ var MediaCollection = (0, import_react.memo)(
               ...media,
               [oldFilePath]: createMediaAsset({
                 ...oldFile,
-                assetId: asset.id
+                assetId: assetStableId
               })
             }
           );
@@ -2316,7 +2320,7 @@ var MediaCollection = (0, import_react.memo)(
           renderAction,
           renderDetail: (file, selected) => {
             if (file.kind !== "asset") return null;
-            const asset = assets.find((a) => a.id === file.assetId);
+            const asset = assets.find((a) => a.stableId === file.assetId) ?? assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
             return /* @__PURE__ */ import_react2.default.createElement(import_noya_designsystem.FileExplorerDetail, { selected, size }, (0, import_noya_designsystem.formatByteSize)(asset.size));
           },
@@ -2404,6 +2408,82 @@ var import_react3 = require("react");
 var import_imfs6 = require("imfs");
 var import_react4 = __toESM(require("react"));
 
+// src/utils/contentType.ts
+function getContentTypeFromFile(file) {
+  if (file.type) {
+    return file.type;
+  }
+  const extension = file.name.split(".").pop()?.toLowerCase();
+  return getContentTypeFromExtension(extension);
+}
+function getContentTypeFromExtension(extension) {
+  if (!extension) {
+    return "application/octet-stream";
+  }
+  const extensionToMimeType = {
+    // Text files
+    md: "text/markdown",
+    markdown: "text/markdown",
+    txt: "text/plain",
+    json: "application/json",
+    xml: "application/xml",
+    csv: "text/csv",
+    html: "text/html",
+    htm: "text/html",
+    css: "text/css",
+    js: "text/javascript",
+    mjs: "text/javascript",
+    ts: "text/typescript",
+    tsx: "text/typescript",
+    jsx: "text/javascript",
+    // Images
+    svg: "image/svg+xml",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    bmp: "image/bmp",
+    ico: "image/x-icon",
+    tiff: "image/tiff",
+    tif: "image/tiff",
+    // Documents
+    pdf: "application/pdf",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    xls: "application/vnd.ms-excel",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ppt: "application/vnd.ms-powerpoint",
+    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    // Audio
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    ogg: "audio/ogg",
+    m4a: "audio/mp4",
+    flac: "audio/flac",
+    // Video
+    mp4: "video/mp4",
+    webm: "video/webm",
+    mov: "video/quicktime",
+    avi: "video/x-msvideo",
+    mkv: "video/x-matroska",
+    // Archives
+    zip: "application/zip",
+    tar: "application/x-tar",
+    gz: "application/gzip",
+    "7z": "application/x-7z-compressed",
+    rar: "application/vnd.rar",
+    // Fonts
+    woff: "font/woff",
+    woff2: "font/woff2",
+    ttf: "font/ttf",
+    otf: "font/otf",
+    // Other
+    sketch: "application/x-sketch"
+  };
+  return extensionToMimeType[extension] || "application/octet-stream";
+}
+
 // src/utils/handleFileDrop.ts
 var import_noya_schemas2 = require("@noya-app/noya-schemas");
 var import_noya_utils3 = require("@noya-app/noya-utils");
@@ -2512,7 +2592,7 @@ async function handleDataTransfer({
               id: (0, import_noya_utils3.uuid)(),
               asset: {
                 content: import_noya_utils3.Base64.encode(await file.arrayBuffer()),
-                contentType: file.type,
+                contentType: getContentTypeFromFile(file),
                 encoding: "base64"
               },
               path: import_imfs5.path.join(rootItemPath, relativePath),
@@ -2615,7 +2695,8 @@ var ResourceExplorer = (0, import_react3.memo)(
       itemStyle,
       publishedResources,
       virtualized = false,
-      renderUser
+      renderUser,
+      showFileSizes = true
     }, ref) {
       const setMedia = (0, import_react3.useCallback)(
         (...args) => {
@@ -2830,7 +2911,7 @@ var ResourceExplorer = (0, import_react3.memo)(
                   id: (0, import_noya_utils4.uuid)(),
                   asset: {
                     content: import_noya_utils4.Base64.encode(await file.arrayBuffer()),
-                    contentType: file.type,
+                    contentType: getContentTypeFromFile(file),
                     encoding: "base64"
                   },
                   path: assetPath,
@@ -2866,7 +2947,7 @@ var ResourceExplorer = (0, import_react3.memo)(
       const handleDownload = (0, import_react3.useCallback)(
         async (selectedItems) => {
           const downloadPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
-            const asset = assets.find((a) => a.id === item.assetId);
+            const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
             if (!asset?.url) return;
             return (0, import_react_utils2.downloadUrl)(asset.url, tree.getNameForId(item.id));
           });
@@ -2877,7 +2958,7 @@ var ResourceExplorer = (0, import_react3.memo)(
       const handlePreview = (0, import_react3.useCallback)(
         async (selectedItems) => {
           const previewPromises = selectedItems.filter((item) => item.type === "asset").map(async (item) => {
-            const asset = assets.find((a) => a.id === item.assetId);
+            const asset = assets.find((a) => a.stableId === item.assetId) ?? assets.find((a) => a.id === item.assetId);
             if (!asset?.url) return;
             return window?.open(asset.url, "_blank");
           });
@@ -2890,7 +2971,8 @@ var ResourceExplorer = (0, import_react3.memo)(
           try {
             const file = await (0, import_browser_fs_access2.fileOpen)();
             if (!file) return;
-            const asset = await assetManager.create(file);
+            const created = await assetManager.create(file);
+            const assetStableId = created.id;
             const oldFile = selectedItem;
             const oldFilePath = tree.idToPathMap.get(oldFile.id);
             if (!oldFilePath || oldFile.type !== "asset") return;
@@ -2900,7 +2982,7 @@ var ResourceExplorer = (0, import_react3.memo)(
                 ...media,
                 [oldFilePath]: (0, import_noya_schemas3.createAssetResource)({
                   ...oldFile,
-                  assetId: asset.id
+                  assetId: assetStableId
                 })
               }
             );
@@ -3146,6 +3228,7 @@ var ResourceExplorer = (0, import_react3.memo)(
           },
           getExpanded,
           setExpanded: handleSetExpanded,
+          renameSelectsBeforeDot: true,
           getRenamable: (item) => {
             if (item.id === import_noya_schemas3.rootResource.id) return false;
             return true;
@@ -3184,7 +3267,7 @@ var ResourceExplorer = (0, import_react3.memo)(
             return /* @__PURE__ */ import_react4.default.createElement(
               "div",
               {
-                style: { display: "flex", alignItems: "center", gap: "1.5px" }
+                style: { display: "flex", alignItems: "center", gap: "6px" }
               },
               publishStatus && /* @__PURE__ */ import_react4.default.createElement(
                 import_noya_designsystem2.Chip,
@@ -3197,8 +3280,9 @@ var ResourceExplorer = (0, import_react3.memo)(
             );
           },
           renderDetail: (file, selected) => {
+            if (!showFileSizes) return null;
             if (file.type !== "asset") return null;
-            const asset = assets.find((a) => a.id === file.assetId);
+            const asset = assets.find((a) => a.stableId === file.assetId) ?? assets.find((a) => a.id === file.assetId);
             if (!asset) return null;
             return /* @__PURE__ */ import_react4.default.createElement(
               import_noya_designsystem2.FileExplorerDetail,
@@ -3345,6 +3429,8 @@ function getPublishStatus({
   createMediaItem,
   createMediaItemTree,
   deleteResources,
+  getContentTypeFromExtension,
+  getContentTypeFromFile,
   getDepthMap,
   getParentDirectories,
   getVisibleItems,