s3kit 0.1.0 → 0.1.1

package/dist/react/index.cjs

@@ -123,11 +123,25 @@ var S3FileManagerClient = class {
   getPreviewUrl(options) {
     return fetchJson(this.f, this.endpoint("/preview"), options);
   }
+  getFolderLock(options) {
+    return fetchJson(this.f, this.endpoint("/folder/lock/get"), options);
+  }
+  getFileAttributes(options) {
+    return fetchJson(this.f, this.endpoint("/file/attributes/get"), options);
+  }
+  setFileAttributes(options) {
+    return fetchJson(this.f, this.endpoint("/file/attributes/set"), options);
+  }
   async uploadFiles(args) {
     const prepare = {
       items: args.files.map((f) => ({
         path: f.path,
-        contentType: f.contentType ?? f.file.type
+        contentType: f.contentType ?? f.file.type,
+        ...f.cacheControl !== void 0 ? { cacheControl: f.cacheControl } : {},
+        ...f.contentDisposition !== void 0 ? { contentDisposition: f.contentDisposition } : {},
+        ...f.metadata !== void 0 ? { metadata: f.metadata } : {},
+        ...f.expiresAt !== void 0 ? { expiresAt: f.expiresAt } : {},
+        ...f.ifNoneMatch !== void 0 ? { ifNoneMatch: f.ifNoneMatch } : {}
       })),
       ...args.expiresInSeconds !== void 0 ? { expiresInSeconds: args.expiresInSeconds } : {}
     };
@@ -605,10 +619,15 @@ function FileManager({
   const [hoverRow, setHoverRow] = (0, import_react6.useState)(null);
   const [previewData, setPreviewData] = (0, import_react6.useState)(null);
   const [previewDisplay, setPreviewDisplay] = (0, import_react6.useState)(null);
+  const [fileAttributes, setFileAttributes] = (0, import_react6.useState)(null);
+  const [attributesLoading, setAttributesLoading] = (0, import_react6.useState)(false);
+  const [attributesError, setAttributesError] = (0, import_react6.useState)(null);
   const [isPreviewClosing, setIsPreviewClosing] = (0, import_react6.useState)(false);
   const [sidebarWidth, setSidebarWidth] = (0, import_react6.useState)(320);
   const [isResizing, setIsResizing] = (0, import_react6.useState)(false);
   const [inlinePreviews, setInlinePreviews] = (0, import_react6.useState)({});
+  const [folderLocks, setFolderLocks] = (0, import_react6.useState)({});
+  const [pendingFolderMoves, setPendingFolderMoves] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const [isSelectionMode, setIsSelectionMode] = (0, import_react6.useState)(false);
   const [searchQuery, setSearchQuery] = (0, import_react6.useState)("");
   const [sortBy, setSortBy] = (0, import_react6.useState)("name");
@@ -659,7 +678,111 @@ function FileManager({
   const longPressTimerRef = (0, import_react6.useRef)(null);
   const suppressClickRef = (0, import_react6.useRef)(false);
   const dragSelectionBaseRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const requestFolderLock = (0, import_react6.useCallback)(
+    (path2) => {
+      if (folderLocks[path2]) return;
+      setFolderLocks((prev) => ({ ...prev, [path2]: { status: "loading" } }));
+      const run = async () => {
+        try {
+          const out = await client.getFolderLock({ path: path2 });
+          const isActive = out?.expiresAt && new Date(out.expiresAt).getTime() > Date.now() ? true : false;
+          setFolderLocks((prev) => ({
+            ...prev,
+            [path2]: isActive && out ? { status: "locked", lock: out } : { status: "unlocked" }
+          }));
+        } catch {
+          setFolderLocks((prev) => ({ ...prev, [path2]: { status: "unlocked" } }));
+        }
+      };
+      void run();
+    },
+    [client, folderLocks]
+  );
+  const getFolderLockLabel = (0, import_react6.useCallback)(
+    (entry) => {
+      if (entry.type !== "folder") return null;
+      if (entry.path === `${TRASH_PATH}/`) return null;
+      if (pendingFolderMoves.has(entry.path)) return "Renaming";
+      const lock = folderLocks[entry.path];
+      if (lock?.status === "locked") return "Locked";
+      return null;
+    },
+    [folderLocks, pendingFolderMoves]
+  );
+  const handleEntryHover = (0, import_react6.useCallback)(
+    (entry) => {
+      setHoverRow(entry.path);
+      if (entry.type === "folder" && entry.path !== `${TRASH_PATH}/`) {
+        requestFolderLock(entry.path);
+      }
+    },
+    [requestFolderLock]
+  );
+  const resolveEntryEtag = (0, import_react6.useCallback)(
+    (entry) => {
+      if (entry.type !== "file") return void 0;
+      if (fileAttributes?.path === entry.path && fileAttributes.etag) return fileAttributes.etag;
+      return entry.etag;
+    },
+    [fileAttributes]
+  );
+  const parseApiError = (0, import_react6.useCallback)((err) => {
+    const fallback = err instanceof Error ? { code: void 0, message: err.message } : { code: void 0, message: "Request failed" };
+    if (!(err instanceof Error)) return fallback;
+    const raw = err.message;
+    if (!raw.trim().startsWith("{")) return fallback;
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed?.error) {
+        return { code: parsed.error.code, message: parsed.error.message ?? raw };
+      }
+    } catch {
+      return fallback;
+    }
+    return fallback;
+  }, []);
+  const isConflictError = (0, import_react6.useCallback)(
+    (err) => {
+      const info = parseApiError(err);
+      if (info.code === "conflict") return true;
+      if (info.message && /conflict|already in progress/i.test(info.message)) return true;
+      return false;
+    },
+    [parseApiError]
+  );
+  const showConflictAlert = (0, import_react6.useCallback)(() => {
+    window.alert("This item changed elsewhere. Refresh and try again.");
+  }, []);
+  const renderFolderLockBadge = (0, import_react6.useCallback)(
+    (entry, variant) => {
+      const label = getFolderLockLabel(entry);
+      if (!label) return null;
+      const isPending = label === "Renaming";
+      const style2 = {
+        display: "inline-flex",
+        alignItems: "center",
+        fontSize: 10,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        padding: "4px 6px",
+        borderRadius: 6,
+        border: `1px solid ${isPending ? theme.accent : theme.border}`,
+        backgroundColor: isPending ? theme.accent : theme.bgSecondary,
+        color: isPending ? theme.bg : theme.textSecondary
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          style: variant === "grid" ? { ...style2, position: "absolute", top: 10, right: 10 } : { ...style2, marginLeft: 8 },
+          children: label
+        }
+      );
+    },
+    [getFolderLockLabel, theme]
+  );
   const lastSelectionSigRef = (0, import_react6.useRef)("");
+  const lastSelectedPathsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
   const [dragSelect, setDragSelect] = (0, import_react6.useState)(null);
   const handleKeyDown = (0, import_react6.useCallback)(
     (e) => {
@@ -925,6 +1048,9 @@ function FileManager({
       setPath("");
     }
   }, [hideTrash, view]);
+  (0, import_react6.useEffect)(() => {
+    lastSelectedPathsRef.current = /* @__PURE__ */ new Set();
+  }, [mode]);
   (0, import_react6.useEffect)(() => {
     const timeoutId = setTimeout(() => {
       performSearch(searchQuery);
@@ -941,7 +1067,16 @@ function FileManager({
     if (sig === lastSelectionSigRef.current) return;
     lastSelectionSigRef.current = sig;
     onSelectionChange?.(selectedEntries);
-  }, [entries, searchResults, selected, searchQuery, onSelectionChange]);
+    const nextSelectedPaths = new Set(selectedEntries.map((entry) => entry.path));
+    if (mode === "picker" && onFileSelect) {
+      selectedEntries.forEach((entry) => {
+        if (entry.type === "file" && !lastSelectedPathsRef.current.has(entry.path)) {
+          onFileSelect(entry);
+        }
+      });
+    }
+    lastSelectedPathsRef.current = nextSelectedPaths;
+  }, [entries, searchResults, selected, searchQuery, onSelectionChange, onFileSelect, mode]);
   (0, import_react6.useEffect)(() => {
     const source = searchQuery.trim() ? searchResults : entries;
     const selectedFiles = source.filter((entry) => selected.has(entry.path)).filter((entry) => entry.type === "file");
@@ -983,6 +1118,45 @@ function FileManager({
       setPreviewData(null);
     }
   }, [selected, lastSelected, client]);
+  (0, import_react6.useEffect)(() => {
+    if (selected.size !== 1) return;
+    const selectedPath = Array.from(selected)[0];
+    if (!selectedPath) return;
+    const source = searchQuery.trim() ? searchResults : entries;
+    const entry = source.find((item) => item.path === selectedPath);
+    if (entry?.type === "folder") {
+      requestFolderLock(entry.path);
+    }
+  }, [entries, requestFolderLock, searchQuery, searchResults, selected]);
+  (0, import_react6.useEffect)(() => {
+    const entry = previewData?.entry;
+    if (!entry || entry.type !== "file") {
+      setFileAttributes(null);
+      setAttributesError(null);
+      return;
+    }
+    let cancelled = false;
+    setAttributesLoading(true);
+    setAttributesError(null);
+    const run = async () => {
+      try {
+        const out = await client.getFileAttributes({ path: entry.path });
+        if (cancelled) return;
+        setFileAttributes(out);
+      } catch (e) {
+        if (cancelled) return;
+        const message = e instanceof Error ? e.message : "Failed to load attributes";
+        setAttributesError(message);
+        setFileAttributes(null);
+      } finally {
+        if (!cancelled) setAttributesLoading(false);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, previewData?.entry]);
   (0, import_react6.useEffect)(() => {
     if (previewData) {
       setPreviewDisplay(previewData);
@@ -1123,6 +1297,7 @@ function FileManager({
     if (isRenaming) return;
     const target = renameTarget ?? lastSelected;
     if (!target) return;
+    const isFolder = target.type === "folder";
     const oldPath = target.path;
     const parent = getParentPath(oldPath);
     const existingNames = new Set(
@@ -1137,16 +1312,40 @@ function FileManager({
       return;
     }
     try {
+      if (isFolder) {
+        setPendingFolderMoves((prev) => {
+          const next = new Set(prev);
+          next.add(oldPath);
+          return next;
+        });
+      }
       setIsRenaming(true);
-      await client.move({ fromPath: oldPath, toPath: newPath });
+      const renameEtag = target.type === "file" ? resolveEntryEtag(target) : void 0;
+      await client.move({
+        fromPath: oldPath,
+        toPath: newPath,
+        ...renameEtag ? { ifMatch: renameEtag } : {}
+      });
       setRenameOpen(false);
       setRenameTarget(null);
       refresh();
     } catch (e) {
       console.error("Rename failed", e);
-      alert("Rename failed");
+      if (isConflictError(e)) {
+        showConflictAlert();
+      } else {
+        alert("Rename failed");
+      }
     } finally {
       setIsRenaming(false);
+      if (isFolder) {
+        setPendingFolderMoves((prev) => {
+          const next = new Set(prev);
+          next.delete(oldPath);
+          return next;
+        });
+        setFolderLocks((prev) => ({ ...prev, [oldPath]: { status: "unlocked" } }));
+      }
     }
   }
   async function deleteEntries(targets) {
@@ -1155,12 +1354,26 @@ function FileManager({
       for (const target of targets) {
         if (target.path.startsWith(TRASH_PATH)) continue;
         const dest = joinPath(TRASH_PATH, target.path);
-        await client.move({ fromPath: target.path, toPath: dest });
+        const moveEtag = target.type === "file" ? resolveEntryEtag(target) : void 0;
+        await client.move({
+          fromPath: target.path,
+          toPath: dest,
+          ...moveEtag ? { ifMatch: moveEtag } : {}
+        });
       }
     } else {
-      const files = targets.filter((e) => e.type === "file").map((e) => e.path);
+      const files = targets.filter((e) => e.type === "file");
       const folders = targets.filter((e) => e.type === "folder");
-      if (files.length > 0) await client.deleteFiles({ paths: files });
+      if (files.length > 0)
+        await client.deleteFiles({
+          items: files.map((file) => {
+            const deleteEtag = resolveEntryEtag(file);
+            return {
+              path: file.path,
+              ...deleteEtag ? { ifMatch: deleteEtag } : {}
+            };
+          })
+        });
       for (const folder of folders) {
         await client.deleteFolder({ path: folder.path, recursive: true });
       }
@@ -1178,7 +1391,11 @@ function FileManager({
       refresh();
     } catch (e) {
       console.error("Delete failed", e);
-      alert("Delete failed");
+      if (isConflictError(e)) {
+        showConflictAlert();
+      } else {
+        alert("Delete failed");
+      }
     } finally {
       setIsDeleting(false);
     }
@@ -1189,15 +1406,29 @@ function FileManager({
       if (!target.path.startsWith(TRASH_PATH)) continue;
       const originalPath = target.path.slice(TRASH_PATH.length + 1);
       if (!originalPath) continue;
-      await client.move({ fromPath: target.path, toPath: originalPath });
+      const restoreEtag = target.type === "file" ? resolveEntryEtag(target) : void 0;
+      await client.move({
+        fromPath: target.path,
+        toPath: originalPath,
+        ...restoreEtag ? { ifMatch: restoreEtag } : {}
+      });
     }
   }
   async function onRestore() {
     if (!can.restore) return;
     const source = searchQuery.trim() ? searchResults : entries;
     const targets = source.filter((e) => selected.has(e.path));
-    await restoreEntries(targets);
-    refresh();
+    try {
+      await restoreEntries(targets);
+      refresh();
+    } catch (e) {
+      console.error("Restore failed", e);
+      if (isConflictError(e)) {
+        showConflictAlert();
+      } else {
+        alert("Restore failed");
+      }
+    }
   }
   async function onEmptyTrash() {
     if (!can.restore) return;
@@ -1506,11 +1737,26 @@ function FileManager({
     const dest = window.prompt("Copy to folder path", path || "");
     if (!dest) return;
     const baseDest = dest.replace(/\/+$/, "");
-    for (const entry of entriesToCopy) {
-      if (entry.path.startsWith(TRASH_PATH)) continue;
-      const targetName = entry.name || entry.path.split("/").pop() || entry.path;
-      const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
-      await client.copy({ fromPath: entry.path, toPath });
+    try {
+      for (const entry of entriesToCopy) {
+        if (entry.path.startsWith(TRASH_PATH)) continue;
+        const targetName = entry.name || entry.path.split("/").pop() || entry.path;
+        const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
+        const copyEtag = entry.type === "file" ? resolveEntryEtag(entry) : void 0;
+        await client.copy({
+          fromPath: entry.path,
+          toPath,
+          ...copyEtag ? { ifMatch: copyEtag } : {}
+        });
+      }
+    } catch (e) {
+      console.error("Copy failed", e);
+      if (isConflictError(e)) {
+        showConflictAlert();
+      } else {
+        alert("Copy failed");
+      }
+      return;
     }
     refresh();
   }
@@ -1519,11 +1765,26 @@ function FileManager({
     const dest = window.prompt("Move to folder path", path || "");
     if (!dest) return;
     const baseDest = dest.replace(/\/+$/, "");
-    for (const entry of entriesToMove) {
-      if (entry.path.startsWith(TRASH_PATH)) continue;
-      const targetName = entry.name || entry.path.split("/").pop() || entry.path;
-      const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
-      await client.move({ fromPath: entry.path, toPath });
+    try {
+      for (const entry of entriesToMove) {
+        if (entry.path.startsWith(TRASH_PATH)) continue;
+        const targetName = entry.name || entry.path.split("/").pop() || entry.path;
+        const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
+        const moveEtag = entry.type === "file" ? resolveEntryEtag(entry) : void 0;
+        await client.move({
+          fromPath: entry.path,
+          toPath,
+          ...moveEtag ? { ifMatch: moveEtag } : {}
+        });
+      }
+    } catch (e) {
+      console.error("Move failed", e);
+      if (isConflictError(e)) {
+        showConflictAlert();
+      } else {
+        alert("Move failed");
+      }
+      return;
     }
     refresh();
   }
@@ -2314,7 +2575,7 @@ function FileManager({
                                       },
                                       onClick: (e) => handleEntryClickWithSelection(entry, index, filteredEntries, e),
                                       onDoubleClick: () => openEntry(entry),
-                                      onMouseEnter: () => setHoverRow(entry.path),
+                                      onMouseEnter: () => handleEntryHover(entry),
                                       onMouseLeave: () => setHoverRow(null),
                                       onTouchStart: () => {
                                         if (!isMobile) return;
@@ -2350,7 +2611,8 @@ function FileManager({
                                             },
                                             children: entryLabel
                                           }
-                                        )
+                                        ),
+                                        renderFolderLockBadge(entry, "grid")
                                       ]
                                     },
                                     entry.path
@@ -2380,7 +2642,7 @@ function FileManager({
                                       },
                                       onClick: (e) => handleEntryClickWithSelection(entry, index, filteredEntries, e),
                                       onDoubleClick: () => openEntry(entry),
-                                      onMouseEnter: () => setHoverRow(entry.path),
+                                      onMouseEnter: () => handleEntryHover(entry),
                                       onMouseLeave: () => setHoverRow(null),
                                       onTouchStart: () => {
                                         if (!isMobile) return;
@@ -2466,7 +2728,7 @@ function FileManager({
                                               e.stopPropagation();
                                             }
                                           },
-                                          onMouseEnter: () => setHoverRow(entry.path),
+                                          onMouseEnter: () => handleEntryHover(entry),
                                           onMouseLeave: () => setHoverRow(null),
                                           onTouchStart: () => {
                                             if (!isMobile) return;
@@ -2502,7 +2764,8 @@ function FileManager({
                                                 },
                                                 children: entryLabel
                                               }
-                                            )
+                                            ),
+                                            renderFolderLockBadge(entry, "grid")
                                           ]
                                         }
                                       ),
@@ -2743,7 +3006,7 @@ function FileManager({
                                   handleEntryClickWithSelection(entry, index, filteredEntries, e);
                                 },
                                 onDoubleClick: () => openEntry(entry),
-                                onMouseEnter: () => setHoverRow(entry.path),
+                                onMouseEnter: () => handleEntryHover(entry),
                                 onMouseLeave: () => setHoverRow(null),
                                 onTouchStart: () => {
                                   if (!isMobile) return;
@@ -2840,7 +3103,7 @@ function FileManager({
                                   handleEntryClickWithSelection(entry, index, filteredEntries, e);
                                 },
                                 onDoubleClick: () => openEntry(entry),
-                                onMouseEnter: () => setHoverRow(entry.path),
+                                onMouseEnter: () => handleEntryHover(entry),
                                 onMouseLeave: () => setHoverRow(null),
                                 onTouchStart: () => {
                                   if (!isMobile) return;
@@ -2923,7 +3186,8 @@ function FileManager({
                                                 }
                                                 return getFileIcon(entry.name);
                                               })(),
-                                              entryLabel
+                                              entryLabel,
+                                              renderFolderLockBadge(entry, "list")
                                             ]
                                           }
                                         ),
@@ -2998,7 +3262,7 @@ function FileManager({
                                       }
                                       e.stopPropagation();
                                     },
-                                    onMouseEnter: () => setHoverRow(entry.path),
+                                    onMouseEnter: () => handleEntryHover(entry),
                                     onMouseLeave: () => setHoverRow(null),
                                     onTouchStart: () => {
                                       if (!isMobile) return;
@@ -3081,7 +3345,8 @@ function FileManager({
                                                     }
                                                     return getFileIcon(entry.name);
                                                   })(),
-                                                  entryLabel
+                                                  entryLabel,
+                                                  renderFolderLockBadge(entry, "list")
                                                 ]
                                               }
                                             ),
@@ -3735,6 +4000,44 @@ function FileManager({
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Modified" }),
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: previewDisplay.entry.type === "file" && previewDisplay.entry.lastModified ? new Date(previewDisplay.entry.lastModified).toLocaleString() : "--" })
                       ] }),
+                      attributesLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Attributes" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: "Loading..." })
+                      ] }),
+                      attributesError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Attributes" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: attributesError })
+                      ] }),
+                      !attributesLoading && !attributesError && previewDisplay.entry.type === "file" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Content Type" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.contentType ?? "--" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Cache Control" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.cacheControl ?? "--" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Disposition" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.contentDisposition ?? "--" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "ETag" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.etag ?? previewDisplay.entry.etag ?? "--" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Expires" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.expiresAt ? new Date(fileAttributes.expiresAt).toLocaleString() : "--" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: FileManager_default.metaItem, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaLabel, children: "Metadata" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: FileManager_default.metaValue, children: fileAttributes?.metadata && Object.keys(fileAttributes.metadata).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: Object.entries(fileAttributes.metadata).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                            k,
+                            ": ",
+                            v
+                          ] }, k)) }) : "--" })
+                        ] })
+                      ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "div",
                         {