@burdenoff/microfe-files 2026.525.3 → 2026.527.2

package/dist/files/components/FileBrowser.js

@@ -6,27 +6,28 @@ import { useDragDrop as te } from "../hooks/useDragDrop.js";
 import { FileCard as ne } from "./FileCard.js";
 import { FileListItem as re } from "./FileListItem.js";
 import { FolderCard as ie } from "./FolderCard.js";
-import { ContextMenu as r, createFileMenuItems as ae, createFolderMenuItems as i } from "./ContextMenu.js";
+import { ContextMenu as r } from "./ContextMenu.js";
+import { createFileMenuItems as ae, createFolderMenuItems as i } from "./contextMenuItems.js";
 import { useState as a } from "react";
-import { Grid3x3 as oe, Loader2 as se, Star as ce } from "lucide-react";
+import { Folder as oe, Loader2 as se, Star as ce } from "lucide-react";
 import { Fragment as le, jsx as o, jsxs as s } from "react/jsx-runtime";
 import { useI18n as ue } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/files/components/FileBrowser.tsx
-var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSortOrder: fe = !1, onFilePreview: d, onFileShare: f, onFileDelete: p, onFileRestore: m, onFileFavorite: h, onFileRename: g, onFileDownload: _, onFileCopy: v, onFileMove: y, onFileInfo: b, onFileActivity: x, onFolderOpen: S, onFolderShare: C, onFolderDelete: w, onFolderRestore: T, onFolderRename: E, onFolderFavorite: D, onFolderCopy: pe, onFolderMove: O, onFolderInfo: k, onFolderActivity: me, onMoveFile: he, onCopyFile: ge, onMoveFolder: _e, onCopyFolder: ve }) => {
-	let { t: A } = ue(), { viewMode: j, sortBy: M, sortDirection: ye, selectedFiles: N, selectedFolders: P } = e(), [be, xe] = a(null), [F, I] = a({
+var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSortOrder: fe = !1, onFilePreview: pe, onFileShare: d, onFileDelete: f, onFileRestore: p, onFileFavorite: m, onFileRename: h, onFileDownload: g, onFileCopy: _, onFileMove: v, onFileInfo: y, onFileActivity: b, onFolderOpen: x, onFolderShare: S, onFolderDelete: C, onFolderRestore: w, onFolderRename: T, onFolderFavorite: E, onFolderCopy: me, onFolderMove: D, onFolderInfo: O, onFolderActivity: he, onMoveFile: ge, onCopyFile: _e, onMoveFolder: ve, onCopyFolder: ye }) => {
+	let { t: k } = ue(), { viewMode: A, sortBy: j, sortDirection: be, selectedFiles: M, selectedFolders: N } = e(), [xe, Se] = a(null), [P, F] = a({
 		draggedItem: null,
 		dropTargetFolderId: null
-	}), [L, R] = a(null), { draggedItem: z, startDrag: Se, endDrag: Ce, handleDrop: we } = te({
-		onMoveFile: he,
-		onCopyFile: ge,
-		onMoveFolder: _e,
-		onCopyFolder: ve
-	}), Te = (e, t) => {
-		Se({
+	}), [I, L] = a(null), { draggedItem: R, startDrag: Ce, endDrag: we, handleDrop: Te } = te({
+		onMoveFile: ge,
+		onCopyFile: _e,
+		onMoveFolder: ve,
+		onCopyFolder: ye
+	}), Ee = (e, t) => {
+		Ce({
 			type: "file",
 			item: e,
 			operation: t
-		}), I({
+		}), F({
 			draggedItem: {
 				type: "file",
 				item: e,
@@ -34,12 +35,12 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 			},
 			dropTargetFolderId: null
 		});
-	}, Ee = (e, t) => {
-		Se({
+	}, De = (e, t) => {
+		Ce({
 			type: "folder",
 			item: e,
 			operation: t
-		}), I({
+		}), F({
 			draggedItem: {
 				type: "folder",
 				item: e,
@@ -47,80 +48,80 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 			},
 			dropTargetFolderId: null
 		});
-	}, B = () => {
-		Ce(), I({
+	}, z = () => {
+		we(), F({
 			draggedItem: null,
 			dropTargetFolderId: null
 		});
-	}, V = async (e) => {
-		z && (await we(e.id), I({
+	}, Oe = async (e) => {
+		R && (await Te(e.id), F({
 			draggedItem: null,
 			dropTargetFolderId: null
 		}));
-	}, De = (e) => {
-		I((t) => ({
+	}, ke = (e) => {
+		F((t) => ({
 			...t,
 			dropTargetFolderId: e
 		}));
-	}, Oe = () => {
-		I((e) => ({
+	}, Ae = () => {
+		F((e) => ({
 			...e,
 			dropTargetFolderId: null
 		}));
-	}, H = (e, t, n) => {
-		R({
+	}, B = (e, t, n) => {
+		L({
 			item: e,
 			type: "file",
 			x: t,
 			y: n
 		});
-	}, U = (e, t, n) => {
-		R({
+	}, V = (e, t, n) => {
+		L({
 			item: e,
 			type: "folder",
 			x: t,
 			y: n
 		});
-	}, W = () => {
-		R(null);
-	}, G = (e) => e.canRead === !0 || e.canUpdate === !0 || e.canWrite === !0, K = (e) => e.canUpdate === !0 || e.canWrite === !0, q = (e) => e.canShare === !0 || K(e), J = (e) => e.canDelete === !0, Y = (e) => e.canRead === !0 || e.permissions?.canRead === !0, X = (e) => e.canUpdate === !0 || e.permissions?.canWrite === !0, Z = (e) => e.permissions?.canShare === !0 || X(e), Q = (e) => e.canDelete === !0 || e.permissions?.canDelete === !0, $ = () => {
-		if (!L) return [];
-		if (L.type === "file") {
-			let e = L.item;
+	}, H = () => {
+		L(null);
+	}, U = (e) => e.canRead === !0 || e.canUpdate === !0 || e.canWrite === !0, W = (e) => e.canUpdate === !0 || e.canWrite === !0, G = (e) => e.canShare === !0 || W(e), K = (e) => e.canDelete === !0, q = (e) => e.canRead === !0 || e.permissions?.canRead === !0, J = (e) => e.canUpdate === !0 || e.permissions?.canWrite === !0, Y = (e) => e.permissions?.canShare === !0 || J(e), X = (e) => e.canDelete === !0 || e.permissions?.canDelete === !0, Z = () => {
+		if (!I) return [];
+		if (I.type === "file") {
+			let e = I.item;
 			return ae({
-				onShare: f && q(e) ? () => f(e) : void 0,
-				onDownload: _ && G(e) ? () => _(e) : void 0,
-				onCopy: v && G(e) ? () => v(e) : void 0,
-				onRename: g && K(e) ? () => g(e) : void 0,
-				onStar: h && K(e) ? () => h(e) : void 0,
-				onMove: y && K(e) ? () => y(e) : void 0,
-				onInfo: b ? () => b(e) : void 0,
-				onActivity: x ? () => x(e) : void 0,
-				onDelete: p && J(e) ? () => p(e) : void 0,
-				onRestore: m && K(e) ? () => m(e) : void 0,
+				onShare: d && G(e) ? () => d(e) : void 0,
+				onDownload: g && U(e) ? () => g(e) : void 0,
+				onCopy: _ && U(e) ? () => _(e) : void 0,
+				onRename: h && W(e) ? () => h(e) : void 0,
+				onStar: m && W(e) ? () => m(e) : void 0,
+				onMove: v && W(e) ? () => v(e) : void 0,
+				onInfo: y ? () => y(e) : void 0,
+				onActivity: b ? () => b(e) : void 0,
+				onDelete: f && K(e) ? () => f(e) : void 0,
+				onRestore: p && W(e) ? () => p(e) : void 0,
 				isStarred: e.starred
-			}, A);
+			}, k);
 		} else {
-			let e = L.item;
+			let e = I.item;
 			return i({
-				onShare: C && Z(e) ? () => C(e) : void 0,
-				onRename: E && X(e) ? () => E(e) : void 0,
-				onStar: D && X(e) ? () => D(e) : void 0,
-				onMove: O && X(e) ? () => O(e) : void 0,
-				onInfo: k ? () => k(e) : void 0,
-				onDelete: w && Q(e) ? () => w(e) : void 0,
-				onRestore: T && X(e) ? () => T(e) : void 0,
+				onShare: S && Y(e) ? () => S(e) : void 0,
+				onRename: T && J(e) ? () => T(e) : void 0,
+				onStar: E && J(e) ? () => E(e) : void 0,
+				onMove: D && J(e) ? () => D(e) : void 0,
+				onInfo: O ? () => O(e) : void 0,
+				onDelete: C && X(e) ? () => C(e) : void 0,
+				onRestore: w && J(e) ? () => w(e) : void 0,
 				isStarred: e.starred
-			}, A);
+			}, k);
 		}
-	}, ke = fe ? c : t(c, M, ye), Ae = fe ? l : t(l, M, ye);
+	}, Q = fe ? c : t(c, j, be), $ = fe ? l : t(l, j, be);
 	return de ? /* @__PURE__ */ o("div", {
 		className: "flex items-center justify-center min-h-[500px]",
 		children: /* @__PURE__ */ s("div", {
 			className: "flex flex-col items-center gap-4",
 			children: [/* @__PURE__ */ o(se, { className: "size-10 animate-spin text-action-primary-bg" }), /* @__PURE__ */ o("span", {
 				className: "text-sm text-text-secondary",
-				children: n(A, "files.browser.loading", "Loading files…")
+				children: n(k, "files.browser.loading", "Loading files…")
 			})]
 		})
 	}) : u ? /* @__PURE__ */ o("div", {
@@ -130,25 +131,26 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 			children: [
 				/* @__PURE__ */ o("div", {
 					className: "mb-3 text-xl font-semibold text-status-error-text",
-					children: n(A, "files.browser.loadError", "Failed to load files")
+					children: n(k, "files.browser.loadError", "Failed to load files")
 				}),
 				/* @__PURE__ */ o("p", {
 					className: "mb-6 text-sm text-text-secondary",
-					children: u.message || n(A, "files.browser.unexpectedError", "An unexpected error occurred")
+					children: u.message || n(k, "files.browser.unexpectedError", "An unexpected error occurred")
 				}),
 				/* @__PURE__ */ o("button", {
+					type: "button",
 					onClick: () => window.location.reload(),
 					className: "rounded-lg bg-action-primary-bg px-6 py-2.5 text-sm font-medium text-text-inverse transition-colors hover:bg-action-primary-bg-hover",
-					children: n(A, "files.browser.retry", "Retry")
+					children: n(k, "files.browser.retry", "Retry")
 				})
 			]
 		})
-	}) : c.length === 0 && l.length === 0 ? /* @__PURE__ */ o(le, { children: L && /* @__PURE__ */ o(r, {
-		x: L.x,
-		y: L.y,
-		onClose: W,
-		items: $()
-	}) }) : j === "list" ? j === "list" ? /* @__PURE__ */ s("div", {
+	}) : c.length === 0 && l.length === 0 ? /* @__PURE__ */ o(le, { children: I && /* @__PURE__ */ o(r, {
+		x: I.x,
+		y: I.y,
+		onClose: H,
+		items: Z()
+	}) }) : A === "list" ? A === "list" ? /* @__PURE__ */ s("div", {
 		className: "@container bg-bg-canvas",
 		children: [
 			/* @__PURE__ */ s("div", {
@@ -158,52 +160,52 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 					/* @__PURE__ */ o("div", { className: "flex-shrink-0 w-6" }),
 					/* @__PURE__ */ o("div", {
 						className: "flex-1",
-						children: n(A, "files.browser.name", "Name")
+						children: n(k, "files.browser.name", "Name")
 					}),
 					/* @__PURE__ */ o("div", {
 						className: "hidden @lg:block flex-shrink-0 w-40",
-						children: n(A, "files.browser.owner", "Owner")
+						children: n(k, "files.browser.owner", "Owner")
 					}),
 					/* @__PURE__ */ o("div", {
 						className: "hidden @md:block flex-shrink-0 w-24 text-right",
-						children: n(A, "files.browser.size", "Size")
+						children: n(k, "files.browser.size", "Size")
 					}),
 					/* @__PURE__ */ o("div", {
 						className: "hidden @lg:block flex-shrink-0 w-32 text-right",
-						children: n(A, "files.browser.modified", "Modified")
+						children: n(k, "files.browser.modified", "Modified")
 					}),
 					/* @__PURE__ */ o("div", { className: "flex-shrink-0 w-32" })
 				]
 			}),
 			/* @__PURE__ */ s("div", {
 				className: "divide-y divide-border-subtle",
-				children: [Ae.map((t) => /* @__PURE__ */ s("div", {
-					className: `group flex items-center gap-3 border-b border-border-subtle bg-bg-surface p-3 transition-colors hover:bg-bg-sunken focus-within:bg-bg-sunken ${F.dropTargetFolderId === t.id && z?.item.id !== t.id ? "bg-action-primary-bg/10" : ""} ${z?.item.id === t.id ? "opacity-50" : ""}`,
+				children: [$.map((t) => /* @__PURE__ */ s("div", {
+					className: `group flex items-center gap-3 border-b border-border-subtle bg-bg-surface p-3 transition-colors hover:bg-bg-sunken focus-within:bg-bg-sunken ${P.dropTargetFolderId === t.id && R?.item.id !== t.id ? "bg-action-primary-bg/10" : ""} ${R?.item.id === t.id ? "opacity-50" : ""}`,
 					onClick: () => {
-						Y(t) && S?.(t);
+						q(t) && x?.(t);
 					},
 					onKeyDown: (e) => {
-						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), Y(t) && S?.(t));
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), q(t) && x?.(t));
 					},
 					onDragOver: (e) => {
-						z && z.item.id !== t.id && X(t) && (e.preventDefault(), De(t.id));
+						R && R.item.id !== t.id && J(t) && (e.preventDefault(), ke(t.id));
 					},
-					onDragLeave: Oe,
+					onDragLeave: Ae,
 					onDrop: async (e) => {
-						e.preventDefault(), z && z.item.id !== t.id && X(t) && await V(t);
+						e.preventDefault(), R && R.item.id !== t.id && J(t) && await Oe(t);
 					},
 					onContextMenu: (e) => {
-						e.preventDefault(), U(t, e.clientX, e.clientY);
+						e.preventDefault(), V(t, e.clientX, e.clientY);
 					},
 					role: "button",
 					tabIndex: 0,
-					"aria-label": n(A, "files.browser.openFolder", "Open folder"),
+					"aria-label": n(k, "files.browser.openFolder", "Open folder"),
 					children: [
 						/* @__PURE__ */ o("div", {
 							className: "flex-shrink-0",
 							children: /* @__PURE__ */ o("input", {
 								type: "checkbox",
-								checked: P.has(t.id),
+								checked: N.has(t.id),
 								onChange: (n) => {
 									n.stopPropagation(), e.getState().toggleFolderSelection(t.id);
 								},
@@ -241,9 +243,9 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 							children: /* @__PURE__ */ s("span", {
 								className: "font-text-sm text-text-secondary",
 								children: [
-									t.filesCount ?? 0,
+									(t.filesCount ?? 0) + (t.subfoldersCount ?? 0),
 									" ",
-									n(A, "files.browser.items", "items")
+									n(k, "files.browser.items", "items")
 								]
 							})
 						}),
@@ -257,13 +259,14 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 						/* @__PURE__ */ s("div", {
 							className: "flex w-32 flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
 							children: [
-								Z(t) && C && /* @__PURE__ */ o("button", {
+								Y(t) && S && /* @__PURE__ */ o("button", {
+									type: "button",
 									onClick: (e) => {
-										e.stopPropagation(), C(t);
+										e.stopPropagation(), S(t);
 									},
 									className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
-									"aria-label": n(A, "files.browser.share", "Share"),
-									title: n(A, "files.browser.shareFolder", "Share folder"),
+									"aria-label": n(k, "files.browser.share", "Share"),
+									title: n(k, "files.browser.shareFolder", "Share folder"),
 									children: /* @__PURE__ */ o("svg", {
 										className: "size-4 text-text-primary",
 										fill: "none",
@@ -277,13 +280,14 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 										})
 									})
 								}),
-								X(t) && E && /* @__PURE__ */ o("button", {
+								J(t) && T && /* @__PURE__ */ o("button", {
+									type: "button",
 									onClick: (e) => {
-										e.stopPropagation(), E(t);
+										e.stopPropagation(), T(t);
 									},
 									className: "hidden @md:block p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
-									"aria-label": n(A, "files.browser.rename", "Rename"),
-									title: n(A, "files.browser.rename", "Rename"),
+									"aria-label": n(k, "files.browser.rename", "Rename"),
+									title: n(k, "files.browser.rename", "Rename"),
 									children: /* @__PURE__ */ o("svg", {
 										className: "size-4 text-text-primary",
 										fill: "none",
@@ -297,13 +301,14 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 										})
 									})
 								}),
-								Q(t) && w && /* @__PURE__ */ o("button", {
+								X(t) && C && /* @__PURE__ */ o("button", {
+									type: "button",
 									onClick: (e) => {
-										e.stopPropagation(), w(t);
+										e.stopPropagation(), C(t);
 									},
 									className: "p-1.5 hover:bg-action-danger-bg-hover rounded transition-colors",
-									"aria-label": n(A, "files.browser.delete", "Delete"),
-									title: n(A, "files.browser.delete", "Delete"),
+									"aria-label": n(k, "files.browser.delete", "Delete"),
+									title: n(k, "files.browser.delete", "Delete"),
 									children: /* @__PURE__ */ o("svg", {
 										className: "size-4 text-status-error-text",
 										fill: "none",
@@ -321,98 +326,114 @@ var c = ({ files: c, folders: l, loading: de = !1, error: u = null, preserveSort
 									onClick: (e) => e.stopPropagation(),
 									children: /* @__PURE__ */ o(ee, {
 										items: i({
-											onShare: Z(t) && C ? () => C(t) : void 0,
-											onRename: X(t) && E ? () => E(t) : void 0,
-											onStar: X(t) && D ? () => D(t) : void 0,
-											onMove: X(t) && O ? () => O(t) : void 0,
-											onInfo: () => k?.(t),
-											onRestore: X(t) && T ? () => T(t) : void 0,
-											onDelete: Q(t) && w ? () => w(t) : void 0,
+											onShare: Y(t) && S ? () => S(t) : void 0,
+											onRename: J(t) && T ? () => T(t) : void 0,
+											onStar: J(t) && E ? () => E(t) : void 0,
+											onMove: J(t) && D ? () => D(t) : void 0,
+											onInfo: () => O?.(t),
+											onRestore: J(t) && w ? () => w(t) : void 0,
+											onDelete: X(t) && C ? () => C(t) : void 0,
 											isStarred: t.starred
-										}, A),
-										isOpen: be === t.id,
-										onToggle: (e) => xe(e ? t.id : null)
+										}, k),
+										isOpen: xe === t.id,
+										onToggle: (e) => Se(e ? t.id : null)
 									})
 								})
 							]
 						})
 					]
-				}, t.id)), ke.map((e) => /* @__PURE__ */ o(re, {
+				}, t.id)), Q.map((e) => /* @__PURE__ */ o(re, {
 					file: e,
-					isSelected: N.has(e.id),
-					isDragging: z?.item.id === e.id,
-					onPreview: G(e) ? d : void 0,
-					onShare: q(e) ? f : void 0,
-					onDelete: J(e) ? p : void 0,
-					onRestore: K(e) ? m : void 0,
-					onFavorite: K(e) ? h : void 0,
-					onRename: K(e) ? g : void 0,
-					onDownload: G(e) ? _ : void 0,
-					onCopy: G(e) ? v : void 0,
-					onMove: K(e) ? y : void 0,
-					onInfo: b,
-					onActivity: x,
-					onDragStart: K(e) ? Te : void 0,
-					onDragEnd: B,
-					onContextMenu: H
+					isSelected: M.has(e.id),
+					isDragging: R?.item.id === e.id,
+					onPreview: U(e) ? pe : void 0,
+					onShare: G(e) ? d : void 0,
+					onDelete: K(e) ? f : void 0,
+					onRestore: W(e) ? p : void 0,
+					onFavorite: W(e) ? m : void 0,
+					onRename: W(e) ? h : void 0,
+					onDownload: U(e) ? g : void 0,
+					onCopy: U(e) ? _ : void 0,
+					onMove: W(e) ? v : void 0,
+					onInfo: y,
+					onActivity: b,
+					onDragStart: W(e) ? Ee : void 0,
+					onDragEnd: z,
+					onContextMenu: B
 				}, e.id))]
 			}),
-			L && /* @__PURE__ */ o(r, {
-				x: L.x,
-				y: L.y,
-				onClose: W,
-				items: $()
+			I && /* @__PURE__ */ o(r, {
+				x: I.x,
+				y: I.y,
+				onClose: H,
+				items: Z()
 			})
 		]
 	}) : null : /* @__PURE__ */ s("div", {
 		className: "@container bg-bg-canvas p-page-padding",
-		children: [/* @__PURE__ */ s("div", {
-			className: "grid grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4 @xl:grid-cols-5 gap-4",
-			children: [Ae.map((e) => /* @__PURE__ */ o(ie, {
-				folder: e,
-				isSelected: P.has(e.id),
-				isDragging: z?.item.id === e.id,
-				isDropTarget: F.dropTargetFolderId === e.id,
-				draggedItem: z,
-				onOpen: Y(e) ? S : void 0,
-				onShare: Z(e) ? C : void 0,
-				onDelete: Q(e) ? w : void 0,
-				onRestore: X(e) ? T : void 0,
-				onRename: X(e) ? E : void 0,
-				onFavorite: X(e) ? D : void 0,
-				onCopy: pe,
-				onMove: X(e) ? O : void 0,
-				onInfo: k,
-				onActivity: me,
-				onDragStart: X(e) ? Ee : void 0,
-				onDragEnd: B,
-				onDrop: X(e) ? V : void 0,
-				onContextMenu: U
-			}, e.id)), ke.map((e) => /* @__PURE__ */ o(ne, {
-				file: e,
-				isSelected: N.has(e.id),
-				isDragging: z?.item.id === e.id,
-				onPreview: G(e) ? d : void 0,
-				onShare: q(e) ? f : void 0,
-				onDelete: J(e) ? p : void 0,
-				onRestore: K(e) ? m : void 0,
-				onFavorite: K(e) ? h : void 0,
-				onRename: K(e) ? g : void 0,
-				onDownload: G(e) ? _ : void 0,
-				onCopy: G(e) ? v : void 0,
-				onMove: K(e) ? y : void 0,
-				onInfo: b,
-				onActivity: x,
-				onDragStart: K(e) ? Te : void 0,
-				onDragEnd: B,
-				onContextMenu: H
-			}, e.id))]
-		}), L && /* @__PURE__ */ o(r, {
-			x: L.x,
-			y: L.y,
-			onClose: W,
-			items: $()
-		})]
+		children: [
+			$.length > 0 && /* @__PURE__ */ s("div", {
+				className: Q.length > 0 ? "mb-6" : "",
+				children: [Q.length > 0 && /* @__PURE__ */ o("h2", {
+					className: "text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-3 px-1",
+					children: n(k, "files.browser.section.folders", "Folders")
+				}), /* @__PURE__ */ o("div", {
+					className: "grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @xl:grid-cols-4 gap-2",
+					children: $.map((e) => /* @__PURE__ */ o(ie, {
+						folder: e,
+						isSelected: N.has(e.id),
+						isDragging: R?.item.id === e.id,
+						isDropTarget: P.dropTargetFolderId === e.id,
+						draggedItem: R,
+						onOpen: q(e) ? x : void 0,
+						onShare: Y(e) ? S : void 0,
+						onDelete: X(e) ? C : void 0,
+						onRestore: J(e) ? w : void 0,
+						onRename: J(e) ? T : void 0,
+						onFavorite: J(e) ? E : void 0,
+						onCopy: me,
+						onMove: J(e) ? D : void 0,
+						onInfo: O,
+						onActivity: he,
+						onDragStart: J(e) ? De : void 0,
+						onDragEnd: z,
+						onDrop: J(e) ? Oe : void 0,
+						onContextMenu: V
+					}, e.id))
+				})]
+			}),
+			Q.length > 0 && /* @__PURE__ */ s("div", { children: [$.length > 0 && /* @__PURE__ */ o("h2", {
+				className: "text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-3 px-1",
+				children: n(k, "files.browser.section.files", "Files")
+			}), /* @__PURE__ */ o("div", {
+				className: "grid grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4 @xl:grid-cols-5 gap-4",
+				children: Q.map((e) => /* @__PURE__ */ o(ne, {
+					file: e,
+					isSelected: M.has(e.id),
+					isDragging: R?.item.id === e.id,
+					onPreview: U(e) ? pe : void 0,
+					onShare: G(e) ? d : void 0,
+					onDelete: K(e) ? f : void 0,
+					onRestore: W(e) ? p : void 0,
+					onFavorite: W(e) ? m : void 0,
+					onRename: W(e) ? h : void 0,
+					onDownload: U(e) ? g : void 0,
+					onCopy: U(e) ? _ : void 0,
+					onMove: W(e) ? v : void 0,
+					onInfo: y,
+					onActivity: b,
+					onDragStart: W(e) ? Ee : void 0,
+					onDragEnd: z,
+					onContextMenu: B
+				}, e.id))
+			})] }),
+			I && /* @__PURE__ */ o(r, {
+				x: I.x,
+				y: I.y,
+				onClose: H,
+				items: Z()
+			})
+		]
 	});
 };
 //#endregion