@burdenoff/microfe-files 2026.624.2 → 2026.624.3

package/dist/files/components/CopyDialog.js

@@ -1,141 +1,134 @@
 import { tWithFallback as e } from "../utils/i18n.js";
 import { useFoldersQuery as t } from "../hooks/useFoldersQuery.js";
 import { useState as n } from "react";
-import { ChevronRight as r, Folder as i, Home as a, Loader2 as o, X as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ChevronRight as r, Folder as i, Home as a, Loader2 as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as u, Input as d, ResponsiveDialog as f, ResponsiveDialogContent as p, ResponsiveDialogFooter as m, ResponsiveDialogHeader as h, ResponsiveDialogTitle as g } from "@burdenoff/fe-libs/ui";
 //#region src/files/components/CopyDialog.tsx
-var d = ({ item: d, type: f, onClose: p, onCopy: m, isLoading: h = !1 }) => {
-	let { t: g } = u(), [_, v] = n(null), [y, b] = n([]), [x, S] = n(null), [C, w] = n(`${e(g, "files.copyDialog.copyOf", "Copy of")} ${d.name}`), { data: T, loading: E } = t(_ || void 0), D = T?.getFolders?.folders || [], O = (e) => {
-		v(e.id), b([...y, {
+var _ = ({ item: _, type: v, onClose: y, onCopy: b, isLoading: x = !1 }) => {
+	let { t: S } = l(), [C, w] = n(null), [T, E] = n([]), [D, O] = n(null), [k, A] = n(`${e(S, "files.copyDialog.copyOf", "Copy of")} ${_.name}`), { data: j, loading: M } = t(C || void 0), N = j?.getFolders?.folders || [], P = (e) => {
+		w(e.id), E([...T, {
 			id: e.id,
 			name: e.name
 		}]);
-	}, k = (e) => {
-		if (e === -1) v(null), b([]);
+	}, F = (e) => {
+		if (e === -1) w(null), E([]);
 		else {
-			let t = y[e];
-			v(t.id), b(y.slice(0, e + 1));
+			let t = T[e];
+			w(t.id), E(T.slice(0, e + 1));
 		}
 	};
-	return /* @__PURE__ */ c("div", {
-		className: "fixed inset-0 backdrop-blur-sm flex items-center justify-center z-[100] animate-in fade-in duration-200",
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": e(g, "files.copyDialog.title", "Copy"),
-		children: /* @__PURE__ */ l("div", {
-			className: "bg-bg-surface rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[80vh] flex flex-col animate-in zoom-in-95 duration-200",
+	return /* @__PURE__ */ s(f, {
+		open: !0,
+		onOpenChange: (e) => {
+			!e && !x && y();
+		},
+		children: /* @__PURE__ */ c(p, {
+			className: "flex max-h-[80vh] w-full max-w-md flex-col gap-0 p-0",
 			children: [
-				/* @__PURE__ */ l("div", {
-					className: "flex items-center justify-between px-6 py-4 border-b border-border-default",
-					children: [/* @__PURE__ */ l("h2", {
+				/* @__PURE__ */ s(h, {
+					className: "px-6 py-4 border-b border-border-default text-left",
+					children: /* @__PURE__ */ c(g, {
 						className: "text-lg font-semibold text-text-primary",
 						children: [
-							e(g, "files.copyDialog.makeCopyOf", "Make a copy of"),
+							e(S, "files.copyDialog.makeCopyOf", "Make a copy of"),
 							" ",
 							"\"",
-							d.name,
+							_.name,
 							"\""
 						]
-					}), /* @__PURE__ */ c("button", {
-						type: "button",
-						onClick: p,
-						className: "p-1 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200",
-						"aria-label": e(g, "files.copyDialog.close", "Close copy dialog"),
-						children: /* @__PURE__ */ c(s, { className: "size-5" })
-					})]
+					})
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ c("div", {
 					className: "px-6 py-4 border-b border-border-default",
-					children: [/* @__PURE__ */ c("label", {
+					children: [/* @__PURE__ */ s("label", {
 						className: "block text-sm font-medium text-text-primary mb-2",
-						children: e(g, "files.copyDialog.name", "Name")
-					}), /* @__PURE__ */ c("input", {
+						children: e(S, "files.copyDialog.name", "Name")
+					}), /* @__PURE__ */ s(d, {
 						type: "text",
-						value: C,
-						onChange: (e) => w(e.target.value),
-						"aria-label": e(g, "files.copyDialog.name", "Name"),
-						className: "w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border text-sm transition-colors duration-200",
-						placeholder: e(g, "files.copyDialog.enterName", "Enter name for the copy")
+						value: k,
+						onChange: (e) => A(e.target.value),
+						"aria-label": e(S, "files.copyDialog.name", "Name"),
+						placeholder: e(S, "files.copyDialog.enterName", "Enter name for the copy")
 					})]
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ s("div", {
 					className: "px-6 py-3 border-b border-border-default bg-bg-sunken",
-					children: /* @__PURE__ */ l("div", {
+					children: /* @__PURE__ */ c("div", {
 						className: "flex items-center gap-2 text-sm overflow-x-auto",
-						children: [/* @__PURE__ */ l("button", {
+						children: [/* @__PURE__ */ c("button", {
 							type: "button",
-							onClick: () => k(-1),
+							onClick: () => F(-1),
 							className: "flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap",
-							children: [/* @__PURE__ */ c(a, { className: "size-4" }), /* @__PURE__ */ c("span", { children: e(g, "files.copyDialog.myDrive", "My Drive") })]
-						}), y.map((e, t) => /* @__PURE__ */ l("div", {
+							children: [/* @__PURE__ */ s(a, { className: "size-4" }), /* @__PURE__ */ s("span", { children: e(S, "files.copyDialog.myDrive", "My Drive") })]
+						}), T.map((e, t) => /* @__PURE__ */ c("div", {
 							className: "flex items-center gap-2 whitespace-nowrap",
-							children: [/* @__PURE__ */ c(r, { className: "size-4 text-text-tertiary" }), /* @__PURE__ */ c("button", {
+							children: [/* @__PURE__ */ s(r, { className: "size-4 text-text-tertiary" }), /* @__PURE__ */ s("button", {
 								type: "button",
-								onClick: () => k(t),
-								className: `hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${t === y.length - 1 ? "text-text-primary font-medium" : "text-text-secondary"}`,
+								onClick: () => F(t),
+								className: `hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${t === T.length - 1 ? "text-text-primary font-medium" : "text-text-secondary"}`,
 								children: e.name
 							})]
 						}, e.id))]
 					})
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ s("div", {
 					className: "flex-1 overflow-y-auto px-6 py-4",
-					children: E ? /* @__PURE__ */ c("div", {
+					children: M ? /* @__PURE__ */ s("div", {
 						className: "flex items-center justify-center py-8",
-						children: /* @__PURE__ */ c(o, { className: "size-6 text-text-tertiary animate-spin" })
-					}) : D.length === 0 ? /* @__PURE__ */ l("div", {
+						children: /* @__PURE__ */ s(o, { className: "size-6 text-text-tertiary animate-spin" })
+					}) : N.length === 0 ? /* @__PURE__ */ c("div", {
 						className: "text-center py-8",
-						children: [/* @__PURE__ */ c(i, { className: "size-12 text-text-tertiary mx-auto mb-3" }), /* @__PURE__ */ c("p", {
+						children: [/* @__PURE__ */ s(i, { className: "size-12 text-text-tertiary mx-auto mb-3" }), /* @__PURE__ */ s("p", {
 							className: "text-sm text-text-secondary",
-							children: e(g, "files.copyDialog.noFolders", "No folders here")
+							children: e(S, "files.copyDialog.noFolders", "No folders here")
 						})]
-					}) : /* @__PURE__ */ l("div", {
+					}) : /* @__PURE__ */ c("div", {
 						className: "space-y-1",
-						children: [/* @__PURE__ */ l("button", {
+						children: [/* @__PURE__ */ c("button", {
 							type: "button",
-							onClick: () => S(_),
-							className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${x === _ ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
-							children: [/* @__PURE__ */ c(i, { className: "size-5 text-text-link" }), /* @__PURE__ */ c("span", {
+							onClick: () => O(C),
+							className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${D === C ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
+							children: [/* @__PURE__ */ s(i, { className: "size-5 text-text-link" }), /* @__PURE__ */ s("span", {
 								className: "font-medium text-text-primary",
-								children: e(g, "files.copyDialog.copyHere", "Copy here")
+								children: e(S, "files.copyDialog.copyHere", "Copy here")
 							})]
-						}), D.map((t) => /* @__PURE__ */ l("div", {
-							className: `flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${x === t.id ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
-							children: [/* @__PURE__ */ l("button", {
+						}), N.map((t) => /* @__PURE__ */ c("div", {
+							className: `flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${D === t.id ? "bg-bg-accent border-2 border-action-primary-border" : "hover:bg-action-ghost-bg-hover border-2 border-transparent"}`,
+							children: [/* @__PURE__ */ c("button", {
 								type: "button",
-								onClick: () => S(t.id),
+								onClick: () => O(t.id),
 								className: "flex items-center gap-3 flex-1 min-w-0",
-								children: [/* @__PURE__ */ c(i, { className: "size-5 text-text-link flex-shrink-0" }), /* @__PURE__ */ c("span", {
+								children: [/* @__PURE__ */ s(i, { className: "size-5 text-text-link flex-shrink-0" }), /* @__PURE__ */ s("span", {
 									className: "font-medium text-text-primary truncate",
 									children: t.name
 								})]
-							}), /* @__PURE__ */ c("button", {
+							}), /* @__PURE__ */ s("button", {
 								type: "button",
-								onClick: () => O(t),
+								onClick: () => P(t),
 								className: "p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0",
-								title: e(g, "files.copyDialog.openFolder", "Open folder"),
+								title: e(S, "files.copyDialog.openFolder", "Open folder"),
 								"aria-label": `Open ${t.name}`,
-								children: /* @__PURE__ */ c(r, { className: "size-4" })
+								children: /* @__PURE__ */ s(r, { className: "size-4" })
 							})]
 						}, t.id))]
 					})
 				}),
-				/* @__PURE__ */ l("div", {
-					className: "flex items-center justify-end gap-2 px-6 py-4 border-t border-border-default",
-					children: [/* @__PURE__ */ c("button", {
+				/* @__PURE__ */ c(m, {
+					className: "px-6 py-4 border-t border-border-default",
+					children: [/* @__PURE__ */ s(u, {
 						type: "button",
-						onClick: p,
-						className: "px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
-						children: e(g, "files.common.actions.cancel", "Cancel")
-					}), /* @__PURE__ */ l("button", {
+						variant: "outline",
+						onClick: y,
+						children: e(S, "files.common.actions.cancel", "Cancel")
+					}), /* @__PURE__ */ c(u, {
 						type: "button",
 						onClick: async () => {
-							await m(x, C.trim() || void 0), p();
+							await b(D, k.trim() || void 0), y();
 						},
-						disabled: h || x === void 0 || !C.trim(),
-						className: "px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-sunken disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2",
-						children: [h && /* @__PURE__ */ c(o, { className: "size-4 animate-spin" }), h ? e(g, "files.copyDialog.copying", "Copying...") : e(g, "files.copyDialog.copy", "Copy")]
+						disabled: x || D === void 0 || !k.trim(),
+						children: [x && /* @__PURE__ */ s(o, { className: "size-4 animate-spin" }), x ? e(S, "files.copyDialog.copying", "Copying...") : e(S, "files.copyDialog.copy", "Copy")]
 					})]
 				})
 			]
@@ -143,6 +136,6 @@ var d = ({ item: d, type: f, onClose: p, onCopy: m, isLoading: h = !1 }) => {
 	});
 };
 //#endregion
-export { d as CopyDialog };
+export { _ as CopyDialog };
 
 //# sourceMappingURL=CopyDialog.js.map

package/dist/files/components/CopyDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyDialog.js","names":[],"sources":["../../../src/files/components/CopyDialog.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Folder, Home, ChevronRight, Loader2, X } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { useFoldersQuery } from \"../hooks/useFoldersQuery\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface CopyDialogProps {\n  item: FileItem | FolderItem;\n  type: \"file\" | \"folder\";\n  onClose: () => void;\n  onCopy: (\n    destinationFolderId: string | null,\n    newName?: string,\n  ) => Promise<void>;\n  isLoading?: boolean;\n}\n\nexport const CopyDialog: FC<CopyDialogProps> = ({\n  item,\n  type,\n  onClose,\n  onCopy,\n  isLoading = false,\n}) => {\n  const { t } = useI18n();\n  const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);\n  const [breadcrumbs, setBreadcrumbs] = useState<\n    Array<{ id: string; name: string }>\n  >([]);\n  const [selectedDestination, setSelectedDestination] = useState<string | null>(\n    null,\n  );\n  const [newName, setNewName] = useState(\n    `${tWithFallback(t, \"files.copyDialog.copyOf\", \"Copy of\")} ${item.name}`,\n  );\n\n  // Fetch folders in current location\n  const { data, loading: loadingFolders } = useFoldersQuery(\n    currentFolderId || undefined,\n  );\n  const folders = (data?.getFolders?.folders || []) as FolderItem[];\n\n  const handleFolderClick = (folder: FolderItem) => {\n    setCurrentFolderId(folder.id);\n    setBreadcrumbs([...breadcrumbs, { id: folder.id, name: folder.name }]);\n  };\n\n  const handleBreadcrumbClick = (index: number) => {\n    if (index === -1) {\n      // Go to root\n      setCurrentFolderId(null);\n      setBreadcrumbs([]);\n    } else {\n      const crumb = breadcrumbs[index];\n      setCurrentFolderId(crumb.id);\n      setBreadcrumbs(breadcrumbs.slice(0, index + 1));\n    }\n  };\n\n  const handleCopy = async () => {\n    await onCopy(selectedDestination, newName.trim() || undefined);\n    onClose();\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 backdrop-blur-sm flex items-center justify-center z-[100] animate-in fade-in duration-200\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={tWithFallback(t, \"files.copyDialog.title\", \"Copy\")}\n    >\n      <div className=\"bg-bg-surface rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[80vh] flex flex-col animate-in zoom-in-95 duration-200\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tWithFallback(t, \"files.copyDialog.makeCopyOf\", \"Make a copy of\")}{\" \"}\n            \"{item.name}\"\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n            aria-label={tWithFallback(\n              t,\n              \"files.copyDialog.close\",\n              \"Close copy dialog\",\n            )}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {/* Name input */}\n        <div className=\"px-6 py-4 border-b border-border-default\">\n          <label className=\"block text-sm font-medium text-text-primary mb-2\">\n            {tWithFallback(t, \"files.copyDialog.name\", \"Name\")}\n          </label>\n          <input\n            type=\"text\"\n            value={newName}\n            onChange={(e) => setNewName(e.target.value)}\n            aria-label={tWithFallback(t, \"files.copyDialog.name\", \"Name\")}\n            className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border text-sm transition-colors duration-200\"\n            placeholder={tWithFallback(\n              t,\n              \"files.copyDialog.enterName\",\n              \"Enter name for the copy\",\n            )}\n          />\n        </div>\n\n        {/* Breadcrumb navigation */}\n        <div className=\"px-6 py-3 border-b border-border-default bg-bg-sunken\">\n          <div className=\"flex items-center gap-2 text-sm overflow-x-auto\">\n            <button\n              type=\"button\"\n              onClick={() => handleBreadcrumbClick(-1)}\n              className=\"flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap\"\n            >\n              <Home className=\"size-4\" />\n              <span>\n                {tWithFallback(t, \"files.copyDialog.myDrive\", \"My Drive\")}\n              </span>\n            </button>\n            {breadcrumbs.map((crumb, index) => (\n              <div\n                key={crumb.id}\n                className=\"flex items-center gap-2 whitespace-nowrap\"\n              >\n                <ChevronRight className=\"size-4 text-text-tertiary\" />\n                <button\n                  type=\"button\"\n                  onClick={() => handleBreadcrumbClick(index)}\n                  className={`hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${\n                    index === breadcrumbs.length - 1\n                      ? \"text-text-primary font-medium\"\n                      : \"text-text-secondary\"\n                  }`}\n                >\n                  {crumb.name}\n                </button>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Folder list */}\n        <div className=\"flex-1 overflow-y-auto px-6 py-4\">\n          {loadingFolders ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Loader2 className=\"size-6 text-text-tertiary animate-spin\" />\n            </div>\n          ) : folders.length === 0 ? (\n            <div className=\"text-center py-8\">\n              <Folder className=\"size-12 text-text-tertiary mx-auto mb-3\" />\n              <p className=\"text-sm text-text-secondary\">\n                {tWithFallback(\n                  t,\n                  \"files.copyDialog.noFolders\",\n                  \"No folders here\",\n                )}\n              </p>\n            </div>\n          ) : (\n            <div className=\"space-y-1\">\n              {/* Option to copy to current folder */}\n              <button\n                type=\"button\"\n                onClick={() => setSelectedDestination(currentFolderId)}\n                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${\n                  selectedDestination === currentFolderId\n                    ? \"bg-bg-accent border-2 border-action-primary-border\"\n                    : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n                }`}\n              >\n                <Folder className=\"size-5 text-text-link\" />\n                <span className=\"font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.copyDialog.copyHere\", \"Copy here\")}\n                </span>\n              </button>\n\n              {/* List of subfolders */}\n              {folders.map((folder) => (\n                <div\n                  key={folder.id}\n                  className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${\n                    selectedDestination === folder.id\n                      ? \"bg-bg-accent border-2 border-action-primary-border\"\n                      : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n                  }`}\n                >\n                  <button\n                    type=\"button\"\n                    onClick={() => setSelectedDestination(folder.id)}\n                    className=\"flex items-center gap-3 flex-1 min-w-0\"\n                  >\n                    <Folder className=\"size-5 text-text-link flex-shrink-0\" />\n                    <span className=\"font-medium text-text-primary truncate\">\n                      {folder.name}\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleFolderClick(folder)}\n                    className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0\"\n                    title={tWithFallback(\n                      t,\n                      \"files.copyDialog.openFolder\",\n                      \"Open folder\",\n                    )}\n                    aria-label={`Open ${folder.name}`}\n                  >\n                    <ChevronRight className=\"size-4\" />\n                  </button>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-2 px-6 py-4 border-t border-border-default\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n          >\n            {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            disabled={\n              isLoading || selectedDestination === undefined || !newName.trim()\n            }\n            className=\"px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-sunken disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200 flex items-center gap-2\"\n          >\n            {isLoading && <Loader2 className=\"size-4 animate-spin\" />}\n            {isLoading\n              ? tWithFallback(t, \"files.copyDialog.copying\", \"Copying...\")\n              : tWithFallback(t, \"files.copyDialog.copy\", \"Copy\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CopyDialog.js","names":[],"sources":["../../../src/files/components/CopyDialog.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Folder, Home, ChevronRight, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogFooter,\n  Button,\n  Input,\n} from \"@burdenoff/fe-libs/ui\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { useFoldersQuery } from \"../hooks/useFoldersQuery\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface CopyDialogProps {\n  item: FileItem | FolderItem;\n  type: \"file\" | \"folder\";\n  onClose: () => void;\n  onCopy: (\n    destinationFolderId: string | null,\n    newName?: string,\n  ) => Promise<void>;\n  isLoading?: boolean;\n}\n\nexport const CopyDialog: FC<CopyDialogProps> = ({\n  item,\n  type,\n  onClose,\n  onCopy,\n  isLoading = false,\n}) => {\n  const { t } = useI18n();\n  const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);\n  const [breadcrumbs, setBreadcrumbs] = useState<\n    Array<{ id: string; name: string }>\n  >([]);\n  const [selectedDestination, setSelectedDestination] = useState<string | null>(\n    null,\n  );\n  const [newName, setNewName] = useState(\n    `${tWithFallback(t, \"files.copyDialog.copyOf\", \"Copy of\")} ${item.name}`,\n  );\n\n  // Fetch folders in current location\n  const { data, loading: loadingFolders } = useFoldersQuery(\n    currentFolderId || undefined,\n  );\n  const folders = (data?.getFolders?.folders || []) as FolderItem[];\n\n  const handleFolderClick = (folder: FolderItem) => {\n    setCurrentFolderId(folder.id);\n    setBreadcrumbs([...breadcrumbs, { id: folder.id, name: folder.name }]);\n  };\n\n  const handleBreadcrumbClick = (index: number) => {\n    if (index === -1) {\n      // Go to root\n      setCurrentFolderId(null);\n      setBreadcrumbs([]);\n    } else {\n      const crumb = breadcrumbs[index];\n      setCurrentFolderId(crumb.id);\n      setBreadcrumbs(breadcrumbs.slice(0, index + 1));\n    }\n  };\n\n  const handleCopy = async () => {\n    await onCopy(selectedDestination, newName.trim() || undefined);\n    onClose();\n  };\n\n  return (\n    <ResponsiveDialog\n      open\n      onOpenChange={(next: boolean) => {\n        if (!next && !isLoading) {\n          onClose();\n        }\n      }}\n    >\n      <ResponsiveDialogContent className=\"flex max-h-[80vh] w-full max-w-md flex-col gap-0 p-0\">\n        {/* Header */}\n        <ResponsiveDialogHeader className=\"px-6 py-4 border-b border-border-default text-left\">\n          <ResponsiveDialogTitle className=\"text-lg font-semibold text-text-primary\">\n            {tWithFallback(t, \"files.copyDialog.makeCopyOf\", \"Make a copy of\")}{\" \"}\n            \"{item.name}\"\n          </ResponsiveDialogTitle>\n        </ResponsiveDialogHeader>\n\n        {/* Name input */}\n        <div className=\"px-6 py-4 border-b border-border-default\">\n          <label className=\"block text-sm font-medium text-text-primary mb-2\">\n            {tWithFallback(t, \"files.copyDialog.name\", \"Name\")}\n          </label>\n          <Input\n            type=\"text\"\n            value={newName}\n            onChange={(e) => setNewName(e.target.value)}\n            aria-label={tWithFallback(t, \"files.copyDialog.name\", \"Name\")}\n            placeholder={tWithFallback(\n              t,\n              \"files.copyDialog.enterName\",\n              \"Enter name for the copy\",\n            )}\n          />\n        </div>\n\n        {/* Breadcrumb navigation */}\n        <div className=\"px-6 py-3 border-b border-border-default bg-bg-sunken\">\n          <div className=\"flex items-center gap-2 text-sm overflow-x-auto\">\n            <button\n              type=\"button\"\n              onClick={() => handleBreadcrumbClick(-1)}\n              className=\"flex items-center gap-1.5 text-text-primary hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 whitespace-nowrap\"\n            >\n              <Home className=\"size-4\" />\n              <span>\n                {tWithFallback(t, \"files.copyDialog.myDrive\", \"My Drive\")}\n              </span>\n            </button>\n            {breadcrumbs.map((crumb, index) => (\n              <div\n                key={crumb.id}\n                className=\"flex items-center gap-2 whitespace-nowrap\"\n              >\n                <ChevronRight className=\"size-4 text-text-tertiary\" />\n                <button\n                  type=\"button\"\n                  onClick={() => handleBreadcrumbClick(index)}\n                  className={`hover:bg-action-ghost-bg-hover px-2 py-1 rounded transition-colors duration-200 ${\n                    index === breadcrumbs.length - 1\n                      ? \"text-text-primary font-medium\"\n                      : \"text-text-secondary\"\n                  }`}\n                >\n                  {crumb.name}\n                </button>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Folder list */}\n        <div className=\"flex-1 overflow-y-auto px-6 py-4\">\n          {loadingFolders ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Loader2 className=\"size-6 text-text-tertiary animate-spin\" />\n            </div>\n          ) : folders.length === 0 ? (\n            <div className=\"text-center py-8\">\n              <Folder className=\"size-12 text-text-tertiary mx-auto mb-3\" />\n              <p className=\"text-sm text-text-secondary\">\n                {tWithFallback(\n                  t,\n                  \"files.copyDialog.noFolders\",\n                  \"No folders here\",\n                )}\n              </p>\n            </div>\n          ) : (\n            <div className=\"space-y-1\">\n              {/* Option to copy to current folder */}\n              <button\n                type=\"button\"\n                onClick={() => setSelectedDestination(currentFolderId)}\n                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all duration-200 ${\n                  selectedDestination === currentFolderId\n                    ? \"bg-bg-accent border-2 border-action-primary-border\"\n                    : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n                }`}\n              >\n                <Folder className=\"size-5 text-text-link\" />\n                <span className=\"font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.copyDialog.copyHere\", \"Copy here\")}\n                </span>\n              </button>\n\n              {/* List of subfolders */}\n              {folders.map((folder) => (\n                <div\n                  key={folder.id}\n                  className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${\n                    selectedDestination === folder.id\n                      ? \"bg-bg-accent border-2 border-action-primary-border\"\n                      : \"hover:bg-action-ghost-bg-hover border-2 border-transparent\"\n                  }`}\n                >\n                  <button\n                    type=\"button\"\n                    onClick={() => setSelectedDestination(folder.id)}\n                    className=\"flex items-center gap-3 flex-1 min-w-0\"\n                  >\n                    <Folder className=\"size-5 text-text-link flex-shrink-0\" />\n                    <span className=\"font-medium text-text-primary truncate\">\n                      {folder.name}\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleFolderClick(folder)}\n                    className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200 flex-shrink-0\"\n                    title={tWithFallback(\n                      t,\n                      \"files.copyDialog.openFolder\",\n                      \"Open folder\",\n                    )}\n                    aria-label={`Open ${folder.name}`}\n                  >\n                    <ChevronRight className=\"size-4\" />\n                  </button>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <ResponsiveDialogFooter className=\"px-6 py-4 border-t border-border-default\">\n          <Button type=\"button\" variant=\"outline\" onClick={onClose}>\n            {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n          </Button>\n          <Button\n            type=\"button\"\n            onClick={handleCopy}\n            disabled={\n              isLoading || selectedDestination === undefined || !newName.trim()\n            }\n          >\n            {isLoading && <Loader2 className=\"size-4 animate-spin\" />}\n            {isLoading\n              ? tWithFallback(t, \"files.copyDialog.copying\", \"Copying...\")\n              : tWithFallback(t, \"files.copyDialog.copy\", \"Copy\")}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n};\n"],"mappings":"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"}

package/dist/files/components/FileCard.js

@@ -143,7 +143,10 @@ var C = ({ file: C, isSelected: w = !1, isDragging: T = !1, onSelect: E, onPrevi
 					/* @__PURE__ */ x("div", {
 						className: "hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm",
 						children: [
-							/* @__PURE__ */ b("span", { children: n(C.size) }),
+							/* @__PURE__ */ b("span", {
+								className: "tabular-nums",
+								children: n(C.size)
+							}),
 							/* @__PURE__ */ b("span", {
 								className: "text-border-subtle",
 								children: "•"

package/dist/files/components/FileCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileCard.js","names":[],"sources":["../../../src/files/components/FileCard.tsx"],"sourcesContent":["import { type FC, useState, useMemo } from \"react\";\nimport {\n  Download,\n  Share2,\n  Trash2,\n  Star,\n  RotateCcw,\n  Copy,\n  Edit,\n  FolderInput,\n  Info,\n  Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileCardProps {\n  file: FileItem;\n  isSelected?: boolean;\n  isDragging?: boolean;\n  onSelect?: (fileId: string) => void;\n  onPreview?: (file: FileItem) => void;\n  onShare?: (file: FileItem) => void;\n  onDelete?: (file: FileItem) => void;\n  onRestore?: (file: FileItem) => void;\n  onFavorite?: (file: FileItem) => void;\n  onRename?: (file: FileItem) => void;\n  onDownload?: (file: FileItem) => void;\n  onCopy?: (file: FileItem) => void;\n  onMove?: (file: FileItem) => void;\n  onInfo?: (file: FileItem) => void;\n  onActivity?: (file: FileItem) => void;\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileCardProps extends Omit<\n  FileCardProps,\n  \"onDragStart\" | \"onDragEnd\"\n> {\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\nexport const FileCard: FC<DraggableFileCardProps> = ({\n  file,\n  isSelected = false,\n  isDragging = false,\n  onSelect,\n  onPreview,\n  onShare,\n  onDelete,\n  onRestore,\n  onFavorite,\n  onRename,\n  onDownload,\n  onCopy,\n  onMove,\n  onInfo,\n  onActivity,\n  onDragStart,\n  onDragEnd,\n  onContextMenu,\n}) => {\n  const { t } = useI18n();\n  const [showActions, setShowActions] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { toggleFileSelection } = useFilesStore();\n\n  const openPreview = () => {\n    if (onPreview) {\n      onPreview(file);\n    }\n  };\n\n  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    if (onSelect) {\n      onSelect(file.id);\n    } else {\n      toggleFileSelection(file.id);\n    }\n  };\n\n  const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n    e.stopPropagation();\n    action();\n    setShowActions(false);\n  };\n\n  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n    e.dataTransfer.effectAllowed = \"copyMove\";\n    e.dataTransfer.setData(\"application/x-file-id\", file.id);\n    e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n    const operation = getDragOperation(e);\n    e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n    onDragStart?.(file, operation);\n  };\n\n  const handleDragEnd = () => {\n    onDragEnd?.();\n  };\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onContextMenu?.(file, e.clientX, e.clientY);\n  };\n\n  const FileIconComponent = getFileIcon(file.mimeType);\n\n  // Memoize menu items to prevent re-renders\n  const menuItems = useMemo(\n    () => [\n      ...(onDownload\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.download\", \"Download\"),\n              icon: <Download className=\"size-4\" />,\n              onClick: () => onDownload(file),\n            },\n          ]\n        : []),\n      ...(onShare\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.share\", \"Share\"),\n              icon: <Share2 className=\"size-4\" />,\n              onClick: () => onShare(file),\n            },\n          ]\n        : []),\n      ...(onCopy\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n              icon: <Copy className=\"size-4\" />,\n              onClick: () => onCopy(file),\n            },\n          ]\n        : []),\n      ...(onMove\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n              icon: <FolderInput className=\"size-4\" />,\n              onClick: () => onMove(file),\n            },\n          ]\n        : []),\n      ...(onRename\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n              icon: <Edit className=\"size-4\" />,\n              onClick: () => onRename(file),\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onFavorite\n        ? [\n            {\n              label: file.starred\n                ? tWithFallback(\n                    t,\n                    \"files.card.removeFromStarred\",\n                    \"Remove from starred\",\n                  )\n                : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n              icon: <Star className=\"size-4\" />,\n              onClick: () => onFavorite(file),\n            },\n          ]\n        : []),\n      ...(onInfo\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.details\", \"Details\"),\n              icon: <Info className=\"size-4\" />,\n              onClick: () => onInfo(file),\n            },\n          ]\n        : []),\n      ...(onActivity\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n              icon: <Activity className=\"size-4\" />,\n              onClick: () => onActivity(file),\n            },\n          ]\n        : []),\n      ...(onDelete\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n              icon: <Trash2 className=\"size-4\" />,\n              onClick: () => onDelete(file),\n              variant: \"danger\" as const,\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onRestore\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n              icon: <RotateCcw className=\"size-4\" />,\n              onClick: () => onRestore(file),\n            },\n          ]\n        : []),\n    ],\n    [\n      file,\n      onDownload,\n      onShare,\n      onCopy,\n      onMove,\n      onRename,\n      onFavorite,\n      onInfo,\n      onActivity,\n      onDelete,\n      onRestore,\n      t,\n    ],\n  );\n\n  return (\n    <div\n      className={`@container group relative cursor-pointer overflow-hidden rounded-card border bg-bg-surface shadow-elevation-1 transition-shadow hover:shadow-elevation-2 focus-within:shadow-elevation-2 ${isDragging ? \"opacity-50\" : \"border-border-subtle\"}`}\n      onClick={openPreview}\n      onContextMenu={handleContextMenu}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n      onFocus={() => setShowActions(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setShowActions(false);\n        }\n      }}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          openPreview();\n        }\n      }}\n      draggable={Boolean(onDragStart)}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={`Preview ${file.name}`}\n    >\n      {/* Selection checkbox */}\n      <div\n        className={`absolute top-2 left-2 z-10 transition-opacity ${\n          isSelected\n            ? \"opacity-100\"\n            : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\"\n        }`}\n      >\n        <input\n          type=\"checkbox\"\n          checked={isSelected}\n          onChange={handleCheckboxChange}\n          className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n          aria-label={`Select ${file.name}`}\n        />\n      </div>\n\n      {/* Favorite indicator */}\n      {file.starred && (\n        <div className=\"absolute top-2 right-2 z-10\">\n          <Star className=\"size-4 fill-yellow-400 text-yellow-400\" />\n        </div>\n      )}\n\n      {/* Thumbnail or icon */}\n      <div className=\"aspect-[4/3] bg-bg-sunken flex items-center justify-center overflow-hidden\">\n        {file.thumbnailUrl ? (\n          <img\n            src={file.thumbnailUrl}\n            alt={file.name}\n            className=\"h-full w-full object-contain p-2\"\n          />\n        ) : (\n          <FileIconComponent className=\"size-12 @md:size-16 text-text-muted\" />\n        )}\n      </div>\n\n      {/* File info */}\n      <div className=\"p-3 @md:p-4\">\n        <h3 className=\"font-text-md font-weight-medium text-text-primary truncate mb-1\">\n          {file.name}\n        </h3>\n\n        <div className=\"hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm\">\n          <span>{formatFileSize(file.size)}</span>\n          <span className=\"text-border-subtle\">•</span>\n          <span>{formatFileDate(file.updatedAt)}</span>\n        </div>\n\n        {/* Extended metadata on larger containers */}\n        <div className=\"hidden @md:flex items-center gap-2 mt-2 text-text-muted font-text-xs\">\n          {file.createdBy && (\n            <div className=\"flex items-center gap-1\">\n              {file.createdBy.avatar && (\n                <img\n                  src={file.createdBy.avatar}\n                  alt={file.createdBy.name}\n                  className=\"size-4 rounded-full\"\n                />\n              )}\n              <span>{file.createdBy.name}</span>\n            </div>\n          )}\n          {file.isShared && (\n            <>\n              <span className=\"text-border-subtle\">•</span>\n              <Share2 className=\"size-3\" />\n              <span>{tWithFallback(t, \"files.card.shared\", \"Shared\")}</span>\n            </>\n          )}\n        </div>\n\n        {/* Tags */}\n        {file.tags && file.tags.length > 0 && (\n          <div className=\"hidden @lg:flex flex-wrap gap-1 mt-2\">\n            {file.tags.slice(0, 3).map((tag) => (\n              <span\n                key={tag}\n                className=\"px-2 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n              >\n                {tag}\n              </span>\n            ))}\n            {file.tags.length > 3 && (\n              <span className=\"px-2 py-0.5 text-text-muted font-text-xs\">\n                +{file.tags.length - 3}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Action buttons (on hover) with dropdown menu */}\n      {showActions && (\n        <div className=\"absolute bottom-3 right-3 flex items-center gap-1 bg-bg-elevated border border-border-subtle rounded shadow-elevation-2 p-1\">\n          {onDownload && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDownload(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n              title={tWithFallback(t, \"files.card.download\", \"Download\")}\n            >\n              <Download className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onShare && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onShare(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n              title={tWithFallback(t, \"files.card.share\", \"Share\")}\n            >\n              <Share2 className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onFavorite && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n              title={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n            >\n              <Star\n                className={`size-4 ${\n                  file.starred\n                    ? \"fill-status-warning-text text-status-warning-text\"\n                    : \"text-text-primary\"\n                }`}\n              />\n            </button>\n          )}\n\n          {onRestore && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRestore(file))}\n              className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n              title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n            >\n              <RotateCcw className=\"size-4 text-status-success-text\" />\n            </button>\n          )}\n\n          {/* More options dropdown */}\n          <div onClick={(e) => e.stopPropagation()}>\n            <ActionMenu\n              items={menuItems}\n              align=\"right\"\n              triggerClassName=\"p-1.5\"\n              isOpen={menuOpen}\n              onToggle={setMenuOpen}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FileCard.js","names":[],"sources":["../../../src/files/components/FileCard.tsx"],"sourcesContent":["import { type FC, useState, useMemo } from \"react\";\nimport {\n  Download,\n  Share2,\n  Trash2,\n  Star,\n  RotateCcw,\n  Copy,\n  Edit,\n  FolderInput,\n  Info,\n  Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileCardProps {\n  file: FileItem;\n  isSelected?: boolean;\n  isDragging?: boolean;\n  onSelect?: (fileId: string) => void;\n  onPreview?: (file: FileItem) => void;\n  onShare?: (file: FileItem) => void;\n  onDelete?: (file: FileItem) => void;\n  onRestore?: (file: FileItem) => void;\n  onFavorite?: (file: FileItem) => void;\n  onRename?: (file: FileItem) => void;\n  onDownload?: (file: FileItem) => void;\n  onCopy?: (file: FileItem) => void;\n  onMove?: (file: FileItem) => void;\n  onInfo?: (file: FileItem) => void;\n  onActivity?: (file: FileItem) => void;\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileCardProps extends Omit<\n  FileCardProps,\n  \"onDragStart\" | \"onDragEnd\"\n> {\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\nexport const FileCard: FC<DraggableFileCardProps> = ({\n  file,\n  isSelected = false,\n  isDragging = false,\n  onSelect,\n  onPreview,\n  onShare,\n  onDelete,\n  onRestore,\n  onFavorite,\n  onRename,\n  onDownload,\n  onCopy,\n  onMove,\n  onInfo,\n  onActivity,\n  onDragStart,\n  onDragEnd,\n  onContextMenu,\n}) => {\n  const { t } = useI18n();\n  const [showActions, setShowActions] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { toggleFileSelection } = useFilesStore();\n\n  const openPreview = () => {\n    if (onPreview) {\n      onPreview(file);\n    }\n  };\n\n  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    if (onSelect) {\n      onSelect(file.id);\n    } else {\n      toggleFileSelection(file.id);\n    }\n  };\n\n  const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n    e.stopPropagation();\n    action();\n    setShowActions(false);\n  };\n\n  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n    e.dataTransfer.effectAllowed = \"copyMove\";\n    e.dataTransfer.setData(\"application/x-file-id\", file.id);\n    e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n    const operation = getDragOperation(e);\n    e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n    onDragStart?.(file, operation);\n  };\n\n  const handleDragEnd = () => {\n    onDragEnd?.();\n  };\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onContextMenu?.(file, e.clientX, e.clientY);\n  };\n\n  const FileIconComponent = getFileIcon(file.mimeType);\n\n  // Memoize menu items to prevent re-renders\n  const menuItems = useMemo(\n    () => [\n      ...(onDownload\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.download\", \"Download\"),\n              icon: <Download className=\"size-4\" />,\n              onClick: () => onDownload(file),\n            },\n          ]\n        : []),\n      ...(onShare\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.share\", \"Share\"),\n              icon: <Share2 className=\"size-4\" />,\n              onClick: () => onShare(file),\n            },\n          ]\n        : []),\n      ...(onCopy\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n              icon: <Copy className=\"size-4\" />,\n              onClick: () => onCopy(file),\n            },\n          ]\n        : []),\n      ...(onMove\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n              icon: <FolderInput className=\"size-4\" />,\n              onClick: () => onMove(file),\n            },\n          ]\n        : []),\n      ...(onRename\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n              icon: <Edit className=\"size-4\" />,\n              onClick: () => onRename(file),\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onFavorite\n        ? [\n            {\n              label: file.starred\n                ? tWithFallback(\n                    t,\n                    \"files.card.removeFromStarred\",\n                    \"Remove from starred\",\n                  )\n                : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n              icon: <Star className=\"size-4\" />,\n              onClick: () => onFavorite(file),\n            },\n          ]\n        : []),\n      ...(onInfo\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.details\", \"Details\"),\n              icon: <Info className=\"size-4\" />,\n              onClick: () => onInfo(file),\n            },\n          ]\n        : []),\n      ...(onActivity\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n              icon: <Activity className=\"size-4\" />,\n              onClick: () => onActivity(file),\n            },\n          ]\n        : []),\n      ...(onDelete\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n              icon: <Trash2 className=\"size-4\" />,\n              onClick: () => onDelete(file),\n              variant: \"danger\" as const,\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onRestore\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n              icon: <RotateCcw className=\"size-4\" />,\n              onClick: () => onRestore(file),\n            },\n          ]\n        : []),\n    ],\n    [\n      file,\n      onDownload,\n      onShare,\n      onCopy,\n      onMove,\n      onRename,\n      onFavorite,\n      onInfo,\n      onActivity,\n      onDelete,\n      onRestore,\n      t,\n    ],\n  );\n\n  return (\n    <div\n      className={`@container group relative cursor-pointer overflow-hidden rounded-card border bg-bg-surface shadow-elevation-1 transition-shadow hover:shadow-elevation-2 focus-within:shadow-elevation-2 ${isDragging ? \"opacity-50\" : \"border-border-subtle\"}`}\n      onClick={openPreview}\n      onContextMenu={handleContextMenu}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n      onFocus={() => setShowActions(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setShowActions(false);\n        }\n      }}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          openPreview();\n        }\n      }}\n      draggable={Boolean(onDragStart)}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={`Preview ${file.name}`}\n    >\n      {/* Selection checkbox */}\n      <div\n        className={`absolute top-2 left-2 z-10 transition-opacity ${\n          isSelected\n            ? \"opacity-100\"\n            : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\"\n        }`}\n      >\n        <input\n          type=\"checkbox\"\n          checked={isSelected}\n          onChange={handleCheckboxChange}\n          className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n          aria-label={`Select ${file.name}`}\n        />\n      </div>\n\n      {/* Favorite indicator */}\n      {file.starred && (\n        <div className=\"absolute top-2 right-2 z-10\">\n          <Star className=\"size-4 fill-yellow-400 text-yellow-400\" />\n        </div>\n      )}\n\n      {/* Thumbnail or icon */}\n      <div className=\"aspect-[4/3] bg-bg-sunken flex items-center justify-center overflow-hidden\">\n        {file.thumbnailUrl ? (\n          <img\n            src={file.thumbnailUrl}\n            alt={file.name}\n            className=\"h-full w-full object-contain p-2\"\n          />\n        ) : (\n          <FileIconComponent className=\"size-12 @md:size-16 text-text-muted\" />\n        )}\n      </div>\n\n      {/* File info */}\n      <div className=\"p-3 @md:p-4\">\n        <h3 className=\"font-text-md font-weight-medium text-text-primary truncate mb-1\">\n          {file.name}\n        </h3>\n\n        <div className=\"hidden @sm:flex items-center gap-2 text-text-secondary font-text-sm\">\n          <span className=\"tabular-nums\">{formatFileSize(file.size)}</span>\n          <span className=\"text-border-subtle\">•</span>\n          <span>{formatFileDate(file.updatedAt)}</span>\n        </div>\n\n        {/* Extended metadata on larger containers */}\n        <div className=\"hidden @md:flex items-center gap-2 mt-2 text-text-muted font-text-xs\">\n          {file.createdBy && (\n            <div className=\"flex items-center gap-1\">\n              {file.createdBy.avatar && (\n                <img\n                  src={file.createdBy.avatar}\n                  alt={file.createdBy.name}\n                  className=\"size-4 rounded-full\"\n                />\n              )}\n              <span>{file.createdBy.name}</span>\n            </div>\n          )}\n          {file.isShared && (\n            <>\n              <span className=\"text-border-subtle\">•</span>\n              <Share2 className=\"size-3\" />\n              <span>{tWithFallback(t, \"files.card.shared\", \"Shared\")}</span>\n            </>\n          )}\n        </div>\n\n        {/* Tags */}\n        {file.tags && file.tags.length > 0 && (\n          <div className=\"hidden @lg:flex flex-wrap gap-1 mt-2\">\n            {file.tags.slice(0, 3).map((tag) => (\n              <span\n                key={tag}\n                className=\"px-2 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n              >\n                {tag}\n              </span>\n            ))}\n            {file.tags.length > 3 && (\n              <span className=\"px-2 py-0.5 text-text-muted font-text-xs\">\n                +{file.tags.length - 3}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Action buttons (on hover) with dropdown menu */}\n      {showActions && (\n        <div className=\"absolute bottom-3 right-3 flex items-center gap-1 bg-bg-elevated border border-border-subtle rounded shadow-elevation-2 p-1\">\n          {onDownload && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDownload(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n              title={tWithFallback(t, \"files.card.download\", \"Download\")}\n            >\n              <Download className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onShare && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onShare(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n              title={tWithFallback(t, \"files.card.share\", \"Share\")}\n            >\n              <Share2 className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onFavorite && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n              title={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n            >\n              <Star\n                className={`size-4 ${\n                  file.starred\n                    ? \"fill-status-warning-text text-status-warning-text\"\n                    : \"text-text-primary\"\n                }`}\n              />\n            </button>\n          )}\n\n          {onRestore && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRestore(file))}\n              className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n              title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n            >\n              <RotateCcw className=\"size-4 text-status-success-text\" />\n            </button>\n          )}\n\n          {/* More options dropdown */}\n          <div onClick={(e) => e.stopPropagation()}>\n            <ActionMenu\n              items={menuItems}\n              align=\"right\"\n              triggerClassName=\"p-1.5\"\n              isOpen={menuOpen}\n              onToggle={setMenuOpen}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/files/components/FileListItem.js

@@ -160,7 +160,7 @@ var S = ({ file: S, isSelected: C = !1, isDragging: w = !1, onSelect: T, onPrevi
 			/* @__PURE__ */ y("div", {
 				className: "hidden @md:block flex-shrink-0 w-24 text-right",
 				children: /* @__PURE__ */ y("span", {
-					className: "font-text-sm text-text-secondary",
+					className: "font-text-sm text-text-secondary tabular-nums",
 					children: n(S.size)
 				})
 			}),

package/dist/files/components/FileListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileListItem.js","names":[],"sources":["../../../src/files/components/FileListItem.tsx"],"sourcesContent":["import { type FC, useMemo, useState } from \"react\";\nimport {\n  Download,\n  Share2,\n  Trash2,\n  Star,\n  RotateCcw,\n  Edit,\n  Copy,\n  FolderInput,\n  Info,\n  Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileListItemProps {\n  file: FileItem;\n  isSelected?: boolean;\n  isDragging?: boolean;\n  onSelect?: (fileId: string) => void;\n  onPreview?: (file: FileItem) => void;\n  onShare?: (file: FileItem) => void;\n  onDelete?: (file: FileItem) => void;\n  onRestore?: (file: FileItem) => void;\n  onFavorite?: (file: FileItem) => void;\n  onRename?: (file: FileItem) => void;\n  onDownload?: (file: FileItem) => void;\n  onCopy?: (file: FileItem) => void;\n  onMove?: (file: FileItem) => void;\n  onInfo?: (file: FileItem) => void;\n  onActivity?: (file: FileItem) => void;\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileListItemProps extends Omit<\n  FileListItemProps,\n  \"onDragStart\" | \"onDragEnd\"\n> {\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n}\n\nexport const FileListItem: FC<DraggableFileListItemProps> = ({\n  file,\n  isSelected = false,\n  isDragging = false,\n  onSelect,\n  onPreview,\n  onShare,\n  onDelete,\n  onRestore,\n  onFavorite,\n  onRename,\n  onDownload,\n  onCopy,\n  onMove,\n  onInfo,\n  onActivity,\n  onDragStart,\n  onDragEnd,\n  onContextMenu,\n}) => {\n  const { t } = useI18n();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { toggleFileSelection } = useFilesStore();\n\n  const openPreview = () => {\n    if (onPreview) {\n      onPreview(file);\n    }\n  };\n\n  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    if (onSelect) {\n      onSelect(file.id);\n    } else {\n      toggleFileSelection(file.id);\n    }\n  };\n\n  const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n    e.stopPropagation();\n    action();\n  };\n\n  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n    e.dataTransfer.effectAllowed = \"copyMove\";\n    e.dataTransfer.setData(\"application/x-file-id\", file.id);\n    e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n    const operation = getDragOperation(e);\n    e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n    onDragStart?.(file, operation);\n  };\n\n  const handleDragEnd = () => {\n    onDragEnd?.();\n  };\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onContextMenu?.(file, e.clientX, e.clientY);\n  };\n\n  const FileIconComponent = getFileIcon(file.mimeType);\n\n  // Memoize menu items to prevent re-renders\n  const menuItems = useMemo(\n    () => [\n      ...(onShare\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.share\", \"Share\"),\n              icon: <Share2 className=\"size-4\" />,\n              onClick: () => onShare(file),\n            },\n          ]\n        : []),\n      ...(onDownload\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.download\", \"Download\"),\n              icon: <Download className=\"size-4\" />,\n              onClick: () => onDownload(file),\n            },\n          ]\n        : []),\n      ...(onCopy\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n              icon: <Copy className=\"size-4\" />,\n              onClick: () => onCopy(file),\n            },\n          ]\n        : []),\n      ...(onMove\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n              icon: <FolderInput className=\"size-4\" />,\n              onClick: () => onMove(file),\n            },\n          ]\n        : []),\n      ...(onRename\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n              icon: <Edit className=\"size-4\" />,\n              onClick: () => onRename(file),\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onFavorite\n        ? [\n            {\n              label: file.starred\n                ? tWithFallback(\n                    t,\n                    \"files.card.removeFromStarred\",\n                    \"Remove from starred\",\n                  )\n                : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n              icon: <Star className=\"size-4\" />,\n              onClick: () => onFavorite(file),\n            },\n          ]\n        : []),\n      ...(onInfo\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.details\", \"Details\"),\n              icon: <Info className=\"size-4\" />,\n              onClick: () => onInfo(file),\n            },\n          ]\n        : []),\n      ...(onActivity\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n              icon: <Activity className=\"size-4\" />,\n              onClick: () => onActivity(file),\n            },\n          ]\n        : []),\n      ...(onDelete\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n              icon: <Trash2 className=\"size-4\" />,\n              onClick: () => onDelete(file),\n              variant: \"danger\" as const,\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onRestore\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n              icon: <RotateCcw className=\"size-4\" />,\n              onClick: () => onRestore(file),\n            },\n          ]\n        : []),\n    ],\n    [\n      file,\n      onShare,\n      onDownload,\n      onCopy,\n      onMove,\n      onRename,\n      onFavorite,\n      onInfo,\n      onActivity,\n      onDelete,\n      onRestore,\n      t,\n    ],\n  );\n\n  return (\n    <div\n      className={`@container 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 ${isDragging ? \"opacity-50\" : \"\"}`}\n      onClick={openPreview}\n      onContextMenu={handleContextMenu}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          openPreview();\n        }\n      }}\n      draggable={Boolean(onDragStart)}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={`Preview ${file.name}`}\n    >\n      {/* Selection checkbox */}\n      <div className=\"flex-shrink-0\">\n        <input\n          type=\"checkbox\"\n          checked={isSelected}\n          onChange={handleCheckboxChange}\n          className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n          aria-label={`Select ${file.name}`}\n        />\n      </div>\n\n      {/* File icon */}\n      <div className=\"flex-shrink-0\">\n        {file.thumbnailUrl ? (\n          <img\n            src={file.thumbnailUrl}\n            alt={file.name}\n            className=\"size-8 object-cover rounded\"\n          />\n        ) : (\n          <FileIconComponent className=\"size-6 text-text-muted\" />\n        )}\n      </div>\n\n      {/* File name - takes remaining space */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"font-text-md font-weight-medium text-text-primary truncate\">\n            {file.name}\n          </span>\n          {file.starred && (\n            <Star className=\"size-3 flex-shrink-0 fill-yellow-400 text-yellow-400\" />\n          )}\n          {file.isShared && (\n            <Share2 className=\"size-3 flex-shrink-0 text-text-muted\" />\n          )}\n        </div>\n\n        {/* Tags - visible on medium+ containers */}\n        {file.tags && file.tags.length > 0 && (\n          <div className=\"hidden @md:flex flex-wrap gap-1 mt-1\">\n            {file.tags.slice(0, 3).map((tag) => (\n              <span\n                key={tag}\n                className=\"px-1.5 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n              >\n                {tag}\n              </span>\n            ))}\n            {file.tags.length > 3 && (\n              <span className=\"text-text-muted font-text-xs\">\n                +{file.tags.length - 3}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Owner - visible on large+ containers */}\n      {file.createdBy && (\n        <div className=\"hidden @lg:flex items-center gap-2 flex-shrink-0 w-40\">\n          {file.createdBy.avatar && (\n            <img\n              src={file.createdBy.avatar}\n              alt={file.createdBy.name}\n              className=\"size-6 rounded-full\"\n            />\n          )}\n          <span className=\"font-text-sm text-text-secondary truncate\">\n            {file.createdBy.name}\n          </span>\n        </div>\n      )}\n\n      {/* Size - visible on medium+ containers */}\n      <div className=\"hidden @md:block flex-shrink-0 w-24 text-right\">\n        <span className=\"font-text-sm text-text-secondary\">\n          {formatFileSize(file.size)}\n        </span>\n      </div>\n\n      {/* Modified date - visible on large+ containers */}\n      <div className=\"hidden @lg:block flex-shrink-0 w-32 text-right\">\n        <span className=\"font-text-sm text-text-secondary\">\n          {formatFileDate(file.updatedAt)}\n        </span>\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-1\">\n        <div className=\"flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\">\n          {file.canRead && onDownload && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDownload(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n              title={tWithFallback(t, \"files.card.download\", \"Download\")}\n            >\n              <Download className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onShare && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onShare(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n              title={tWithFallback(t, \"files.card.share\", \"Share\")}\n            >\n              <Share2 className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onFavorite && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n              title={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n            >\n              <Star\n                className={`size-4 ${\n                  file.starred\n                    ? \"fill-status-warning-bg text-status-warning-bg\"\n                    : \"text-text-primary\"\n                }`}\n              />\n            </button>\n          )}\n\n          {onRestore && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRestore(file))}\n              className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n              title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n            >\n              <RotateCcw className=\"size-4 text-status-success-text\" />\n            </button>\n          )}\n\n          {file.canWrite && onRename && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRename(file))}\n              className=\"hidden @md:block p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.rename\", \"Rename\")}\n              title={tWithFallback(t, \"files.card.rename\", \"Rename\")}\n            >\n              <Edit className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {file.canDelete && onDelete && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDelete(file))}\n              className=\"p-1.5 hover:bg-action-danger-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.delete\", \"Delete\")}\n              title={tWithFallback(t, \"files.card.delete\", \"Delete\")}\n            >\n              <Trash2 className=\"size-4 text-status-error-text\" />\n            </button>\n          )}\n        </div>\n\n        {/* More actions dropdown - always visible */}\n        <ActionMenu\n          items={menuItems}\n          align=\"right\"\n          isOpen={menuOpen}\n          onToggle={setMenuOpen}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FileListItem.js","names":[],"sources":["../../../src/files/components/FileListItem.tsx"],"sourcesContent":["import { type FC, useMemo, useState } from \"react\";\nimport {\n  Download,\n  Share2,\n  Trash2,\n  Star,\n  RotateCcw,\n  Edit,\n  Copy,\n  FolderInput,\n  Info,\n  Activity,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { formatFileSize, formatFileDate, getFileIcon } from \"../utils\";\nimport { useFilesStore } from \"../store/filesStore\";\nimport { ActionMenu } from \"./ActionMenu\";\nimport { getDragOperation } from \"../hooks/useDragDrop\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface FileListItemProps {\n  file: FileItem;\n  isSelected?: boolean;\n  isDragging?: boolean;\n  onSelect?: (fileId: string) => void;\n  onPreview?: (file: FileItem) => void;\n  onShare?: (file: FileItem) => void;\n  onDelete?: (file: FileItem) => void;\n  onRestore?: (file: FileItem) => void;\n  onFavorite?: (file: FileItem) => void;\n  onRename?: (file: FileItem) => void;\n  onDownload?: (file: FileItem) => void;\n  onCopy?: (file: FileItem) => void;\n  onMove?: (file: FileItem) => void;\n  onInfo?: (file: FileItem) => void;\n  onActivity?: (file: FileItem) => void;\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n  onContextMenu?: (file: FileItem, x: number, y: number) => void;\n}\n\ninterface DraggableFileListItemProps extends Omit<\n  FileListItemProps,\n  \"onDragStart\" | \"onDragEnd\"\n> {\n  onDragStart?: (file: FileItem, operation: \"move\" | \"copy\") => void;\n  onDragEnd?: () => void;\n}\n\nexport const FileListItem: FC<DraggableFileListItemProps> = ({\n  file,\n  isSelected = false,\n  isDragging = false,\n  onSelect,\n  onPreview,\n  onShare,\n  onDelete,\n  onRestore,\n  onFavorite,\n  onRename,\n  onDownload,\n  onCopy,\n  onMove,\n  onInfo,\n  onActivity,\n  onDragStart,\n  onDragEnd,\n  onContextMenu,\n}) => {\n  const { t } = useI18n();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { toggleFileSelection } = useFilesStore();\n\n  const openPreview = () => {\n    if (onPreview) {\n      onPreview(file);\n    }\n  };\n\n  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    if (onSelect) {\n      onSelect(file.id);\n    } else {\n      toggleFileSelection(file.id);\n    }\n  };\n\n  const handleActionClick = (e: React.MouseEvent, action: () => void) => {\n    e.stopPropagation();\n    action();\n  };\n\n  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {\n    e.dataTransfer.effectAllowed = \"copyMove\";\n    e.dataTransfer.setData(\"application/x-file-id\", file.id);\n    e.dataTransfer.setData(\"application/x-file-type\", \"file\");\n    const operation = getDragOperation(e);\n    e.dataTransfer.setData(\"application/x-drag-operation\", operation);\n    onDragStart?.(file, operation);\n  };\n\n  const handleDragEnd = () => {\n    onDragEnd?.();\n  };\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onContextMenu?.(file, e.clientX, e.clientY);\n  };\n\n  const FileIconComponent = getFileIcon(file.mimeType);\n\n  // Memoize menu items to prevent re-renders\n  const menuItems = useMemo(\n    () => [\n      ...(onShare\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.share\", \"Share\"),\n              icon: <Share2 className=\"size-4\" />,\n              onClick: () => onShare(file),\n            },\n          ]\n        : []),\n      ...(onDownload\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.download\", \"Download\"),\n              icon: <Download className=\"size-4\" />,\n              onClick: () => onDownload(file),\n            },\n          ]\n        : []),\n      ...(onCopy\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.makeCopy\", \"Make a copy\"),\n              icon: <Copy className=\"size-4\" />,\n              onClick: () => onCopy(file),\n            },\n          ]\n        : []),\n      ...(onMove\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.moveTo\", \"Move to\"),\n              icon: <FolderInput className=\"size-4\" />,\n              onClick: () => onMove(file),\n            },\n          ]\n        : []),\n      ...(onRename\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.rename\", \"Rename\"),\n              icon: <Edit className=\"size-4\" />,\n              onClick: () => onRename(file),\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onFavorite\n        ? [\n            {\n              label: file.starred\n                ? tWithFallback(\n                    t,\n                    \"files.card.removeFromStarred\",\n                    \"Remove from starred\",\n                  )\n                : tWithFallback(t, \"files.card.addToStarred\", \"Add to starred\"),\n              icon: <Star className=\"size-4\" />,\n              onClick: () => onFavorite(file),\n            },\n          ]\n        : []),\n      ...(onInfo\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.details\", \"Details\"),\n              icon: <Info className=\"size-4\" />,\n              onClick: () => onInfo(file),\n            },\n          ]\n        : []),\n      ...(onActivity\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.activity\", \"Activity\"),\n              icon: <Activity className=\"size-4\" />,\n              onClick: () => onActivity(file),\n            },\n          ]\n        : []),\n      ...(onDelete\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.delete\", \"Delete\"),\n              icon: <Trash2 className=\"size-4\" />,\n              onClick: () => onDelete(file),\n              variant: \"danger\" as const,\n              divider: true,\n            },\n          ]\n        : []),\n      ...(onRestore\n        ? [\n            {\n              label: tWithFallback(t, \"files.card.restore\", \"Restore\"),\n              icon: <RotateCcw className=\"size-4\" />,\n              onClick: () => onRestore(file),\n            },\n          ]\n        : []),\n    ],\n    [\n      file,\n      onShare,\n      onDownload,\n      onCopy,\n      onMove,\n      onRename,\n      onFavorite,\n      onInfo,\n      onActivity,\n      onDelete,\n      onRestore,\n      t,\n    ],\n  );\n\n  return (\n    <div\n      className={`@container 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 ${isDragging ? \"opacity-50\" : \"\"}`}\n      onClick={openPreview}\n      onContextMenu={handleContextMenu}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          openPreview();\n        }\n      }}\n      draggable={Boolean(onDragStart)}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={`Preview ${file.name}`}\n    >\n      {/* Selection checkbox */}\n      <div className=\"flex-shrink-0\">\n        <input\n          type=\"checkbox\"\n          checked={isSelected}\n          onChange={handleCheckboxChange}\n          className=\"size-4 rounded border-border-default bg-bg-surface text-action-primary-bg focus:ring-2 focus:ring-action-primary-bg focus:ring-offset-2\"\n          aria-label={`Select ${file.name}`}\n        />\n      </div>\n\n      {/* File icon */}\n      <div className=\"flex-shrink-0\">\n        {file.thumbnailUrl ? (\n          <img\n            src={file.thumbnailUrl}\n            alt={file.name}\n            className=\"size-8 object-cover rounded\"\n          />\n        ) : (\n          <FileIconComponent className=\"size-6 text-text-muted\" />\n        )}\n      </div>\n\n      {/* File name - takes remaining space */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"font-text-md font-weight-medium text-text-primary truncate\">\n            {file.name}\n          </span>\n          {file.starred && (\n            <Star className=\"size-3 flex-shrink-0 fill-yellow-400 text-yellow-400\" />\n          )}\n          {file.isShared && (\n            <Share2 className=\"size-3 flex-shrink-0 text-text-muted\" />\n          )}\n        </div>\n\n        {/* Tags - visible on medium+ containers */}\n        {file.tags && file.tags.length > 0 && (\n          <div className=\"hidden @md:flex flex-wrap gap-1 mt-1\">\n            {file.tags.slice(0, 3).map((tag) => (\n              <span\n                key={tag}\n                className=\"px-1.5 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm\"\n              >\n                {tag}\n              </span>\n            ))}\n            {file.tags.length > 3 && (\n              <span className=\"text-text-muted font-text-xs\">\n                +{file.tags.length - 3}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Owner - visible on large+ containers */}\n      {file.createdBy && (\n        <div className=\"hidden @lg:flex items-center gap-2 flex-shrink-0 w-40\">\n          {file.createdBy.avatar && (\n            <img\n              src={file.createdBy.avatar}\n              alt={file.createdBy.name}\n              className=\"size-6 rounded-full\"\n            />\n          )}\n          <span className=\"font-text-sm text-text-secondary truncate\">\n            {file.createdBy.name}\n          </span>\n        </div>\n      )}\n\n      {/* Size - visible on medium+ containers */}\n      <div className=\"hidden @md:block flex-shrink-0 w-24 text-right\">\n        <span className=\"font-text-sm text-text-secondary tabular-nums\">\n          {formatFileSize(file.size)}\n        </span>\n      </div>\n\n      {/* Modified date - visible on large+ containers */}\n      <div className=\"hidden @lg:block flex-shrink-0 w-32 text-right\">\n        <span className=\"font-text-sm text-text-secondary\">\n          {formatFileDate(file.updatedAt)}\n        </span>\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-1\">\n        <div className=\"flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\">\n          {file.canRead && onDownload && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDownload(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.download\", \"Download\")}\n              title={tWithFallback(t, \"files.card.download\", \"Download\")}\n            >\n              <Download className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onShare && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onShare(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.share\", \"Share\")}\n              title={tWithFallback(t, \"files.card.share\", \"Share\")}\n            >\n              <Share2 className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {onFavorite && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onFavorite(file))}\n              className=\"p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n              title={\n                file.starred\n                  ? tWithFallback(t, \"files.card.unfavorite\", \"Unfavorite\")\n                  : tWithFallback(t, \"files.card.favorite\", \"Favorite\")\n              }\n            >\n              <Star\n                className={`size-4 ${\n                  file.starred\n                    ? \"fill-status-warning-bg text-status-warning-bg\"\n                    : \"text-text-primary\"\n                }`}\n              />\n            </button>\n          )}\n\n          {onRestore && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRestore(file))}\n              className=\"p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n              title={tWithFallback(t, \"files.card.restore\", \"Restore\")}\n            >\n              <RotateCcw className=\"size-4 text-status-success-text\" />\n            </button>\n          )}\n\n          {file.canWrite && onRename && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onRename(file))}\n              className=\"hidden @md:block p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.rename\", \"Rename\")}\n              title={tWithFallback(t, \"files.card.rename\", \"Rename\")}\n            >\n              <Edit className=\"size-4 text-text-primary\" />\n            </button>\n          )}\n\n          {file.canDelete && onDelete && (\n            <button\n              type=\"button\"\n              onClick={(e) => handleActionClick(e, () => onDelete(file))}\n              className=\"p-1.5 hover:bg-action-danger-bg-hover rounded transition-colors\"\n              aria-label={tWithFallback(t, \"files.card.delete\", \"Delete\")}\n              title={tWithFallback(t, \"files.card.delete\", \"Delete\")}\n            >\n              <Trash2 className=\"size-4 text-status-error-text\" />\n            </button>\n          )}\n        </div>\n\n        {/* More actions dropdown - always visible */}\n        <ActionMenu\n          items={menuItems}\n          align=\"right\"\n          isOpen={menuOpen}\n          onToggle={setMenuOpen}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/files/components/FileVersionPanel.js

@@ -152,7 +152,10 @@ var C = ({ file: C, onClose: w }) => {
 											/* @__PURE__ */ x("div", {
 												className: "flex items-center gap-4 text-xs text-text-secondary",
 												children: [
-													/* @__PURE__ */ b("span", { children: n(e.size) }),
+													/* @__PURE__ */ b("span", {
+														className: "tabular-nums",
+														children: n(e.size)
+													}),
 													/* @__PURE__ */ b("span", { children: "•" }),
 													/* @__PURE__ */ b("span", { children: t(e.createdAt) })
 												]