@burdenoff/microfe-files 2026.510.101

package/dist/files/components/FileListItem.js

@@ -0,0 +1,235 @@
+import { useFilesStore as e } from "../store/filesStore.js";
+import { formatFileDate as t, formatFileSize as n, getFileIcon as r } from "../utils/index.js";
+import { tWithFallback as i } from "../utils/i18n.js";
+import { ActionMenu as a } from "./ActionMenu.js";
+import { getDragOperation as o } from "../hooks/useDragDrop.js";
+import { useMemo as s, useState as c } from "react";
+import { Activity as l, Copy as u, Download as d, Edit as f, FolderInput as p, Info as m, RotateCcw as h, Share2 as g, Star as _, Trash2 as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useI18n as x } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/files/components/FileListItem.tsx
+var S = ({ file: S, isSelected: C = !1, isDragging: w = !1, onSelect: T, onPreview: E, onShare: D, onDelete: O, onRestore: k, onFavorite: A, onRename: j, onDownload: M, onCopy: N, onMove: P, onInfo: F, onActivity: I, onDragStart: L, onDragEnd: R, onContextMenu: z }) => {
+	let { t: B } = x(), [V, H] = c(!1), { toggleFileSelection: U } = e(), W = () => {
+		E && E(S);
+	}, G = (e) => {
+		e.stopPropagation(), T ? T(S.id) : U(S.id);
+	}, K = (e, t) => {
+		e.stopPropagation(), t();
+	}, q = (e) => {
+		e.dataTransfer.effectAllowed = "copyMove", e.dataTransfer.setData("application/x-file-id", S.id), e.dataTransfer.setData("application/x-file-type", "file");
+		let t = o(e);
+		e.dataTransfer.setData("application/x-drag-operation", t), L?.(S, t);
+	}, J = () => {
+		R?.();
+	}, Y = (e) => {
+		e.preventDefault(), e.stopPropagation(), z?.(S, e.clientX, e.clientY);
+	}, X = r(S.mimeType), Z = s(() => [
+		...D ? [{
+			label: i(B, "files.card.share", "Share"),
+			icon: /* @__PURE__ */ y(g, { className: "size-4" }),
+			onClick: () => D(S)
+		}] : [],
+		...M ? [{
+			label: i(B, "files.card.download", "Download"),
+			icon: /* @__PURE__ */ y(d, { className: "size-4" }),
+			onClick: () => M(S)
+		}] : [],
+		...N ? [{
+			label: i(B, "files.card.makeCopy", "Make a copy"),
+			icon: /* @__PURE__ */ y(u, { className: "size-4" }),
+			onClick: () => N(S)
+		}] : [],
+		...P ? [{
+			label: i(B, "files.card.moveTo", "Move to"),
+			icon: /* @__PURE__ */ y(p, { className: "size-4" }),
+			onClick: () => P(S)
+		}] : [],
+		...j ? [{
+			label: i(B, "files.card.rename", "Rename"),
+			icon: /* @__PURE__ */ y(f, { className: "size-4" }),
+			onClick: () => j(S),
+			divider: !0
+		}] : [],
+		...A ? [{
+			label: S.starred ? i(B, "files.card.removeFromStarred", "Remove from starred") : i(B, "files.card.addToStarred", "Add to starred"),
+			icon: /* @__PURE__ */ y(_, { className: "size-4" }),
+			onClick: () => A(S)
+		}] : [],
+		...F ? [{
+			label: i(B, "files.card.details", "Details"),
+			icon: /* @__PURE__ */ y(m, { className: "size-4" }),
+			onClick: () => F(S)
+		}] : [],
+		...I ? [{
+			label: i(B, "files.card.activity", "Activity"),
+			icon: /* @__PURE__ */ y(l, { className: "size-4" }),
+			onClick: () => I(S)
+		}] : [],
+		...O ? [{
+			label: i(B, "files.card.delete", "Delete"),
+			icon: /* @__PURE__ */ y(v, { className: "size-4" }),
+			onClick: () => O(S),
+			variant: "danger",
+			divider: !0
+		}] : [],
+		...k ? [{
+			label: i(B, "files.card.restore", "Restore"),
+			icon: /* @__PURE__ */ y(h, { className: "size-4" }),
+			onClick: () => k(S)
+		}] : []
+	], [
+		S,
+		D,
+		M,
+		N,
+		P,
+		j,
+		A,
+		F,
+		I,
+		O,
+		k,
+		B
+	]);
+	return /* @__PURE__ */ b("div", {
+		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 ${w ? "opacity-50" : ""}`,
+		onClick: W,
+		onContextMenu: Y,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), W());
+		},
+		draggable: !!L,
+		onDragStart: q,
+		onDragEnd: J,
+		role: "button",
+		tabIndex: 0,
+		"aria-label": `Preview ${S.name}`,
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex-shrink-0",
+				children: /* @__PURE__ */ y("input", {
+					type: "checkbox",
+					checked: C,
+					onChange: G,
+					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",
+					"aria-label": `Select ${S.name}`
+				})
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex-shrink-0",
+				children: S.thumbnailUrl ? /* @__PURE__ */ y("img", {
+					src: S.thumbnailUrl,
+					alt: S.name,
+					className: "size-8 object-cover rounded"
+				}) : /* @__PURE__ */ y(X, { className: "size-6 text-text-muted" })
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ y("span", {
+							className: "font-text-md font-weight-medium text-text-primary truncate",
+							children: S.name
+						}),
+						S.starred && /* @__PURE__ */ y(_, { className: "size-3 flex-shrink-0 fill-status-warning-bg text-status-warning-bg" }),
+						S.isShared && /* @__PURE__ */ y(g, { className: "size-3 flex-shrink-0 text-text-muted" })
+					]
+				}), S.tags && S.tags.length > 0 && /* @__PURE__ */ b("div", {
+					className: "hidden @md:flex flex-wrap gap-1 mt-1",
+					children: [S.tags.slice(0, 3).map((e) => /* @__PURE__ */ y("span", {
+						className: "px-1.5 py-0.5 bg-bg-accent text-text-primary font-text-xs rounded-sm",
+						children: e
+					}, e)), S.tags.length > 3 && /* @__PURE__ */ b("span", {
+						className: "text-text-muted font-text-xs",
+						children: ["+", S.tags.length - 3]
+					})]
+				})]
+			}),
+			S.createdBy && /* @__PURE__ */ b("div", {
+				className: "hidden @lg:flex items-center gap-2 flex-shrink-0 w-40",
+				children: [S.createdBy.avatar && /* @__PURE__ */ y("img", {
+					src: S.createdBy.avatar,
+					alt: S.createdBy.name,
+					className: "size-6 rounded-full"
+				}), /* @__PURE__ */ y("span", {
+					className: "font-text-sm text-text-secondary truncate",
+					children: S.createdBy.name
+				})]
+			}),
+			/* @__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",
+					children: n(S.size)
+				})
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "hidden @lg:block flex-shrink-0 w-32 text-right",
+				children: /* @__PURE__ */ y("span", {
+					className: "font-text-sm text-text-secondary",
+					children: t(S.updatedAt)
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+					children: [
+						S.canRead && M && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => M(S)),
+							className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
+							"aria-label": i(B, "files.card.download", "Download"),
+							title: i(B, "files.card.download", "Download"),
+							children: /* @__PURE__ */ y(d, { className: "size-4 text-text-primary" })
+						}),
+						D && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => D(S)),
+							className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
+							"aria-label": i(B, "files.card.share", "Share"),
+							title: i(B, "files.card.share", "Share"),
+							children: /* @__PURE__ */ y(g, { className: "size-4 text-text-primary" })
+						}),
+						A && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => A(S)),
+							className: "p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
+							"aria-label": S.starred ? i(B, "files.card.unfavorite", "Unfavorite") : i(B, "files.card.favorite", "Favorite"),
+							title: S.starred ? i(B, "files.card.unfavorite", "Unfavorite") : i(B, "files.card.favorite", "Favorite"),
+							children: /* @__PURE__ */ y(_, { className: `size-4 ${S.starred ? "fill-status-warning-bg text-status-warning-bg" : "text-text-primary"}` })
+						}),
+						k && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => k(S)),
+							className: "p-1.5 hover:bg-status-success-bg-subtle rounded transition-colors",
+							"aria-label": i(B, "files.card.restore", "Restore"),
+							title: i(B, "files.card.restore", "Restore"),
+							children: /* @__PURE__ */ y(h, { className: "size-4 text-status-success-text" })
+						}),
+						S.canWrite && j && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => j(S)),
+							className: "hidden @md:block p-1.5 hover:bg-action-ghost-bg-hover rounded transition-colors",
+							"aria-label": i(B, "files.card.rename", "Rename"),
+							title: i(B, "files.card.rename", "Rename"),
+							children: /* @__PURE__ */ y(f, { className: "size-4 text-text-primary" })
+						}),
+						S.canDelete && O && /* @__PURE__ */ y("button", {
+							onClick: (e) => K(e, () => O(S)),
+							className: "p-1.5 hover:bg-action-danger-bg-hover rounded transition-colors",
+							"aria-label": i(B, "files.card.delete", "Delete"),
+							title: i(B, "files.card.delete", "Delete"),
+							children: /* @__PURE__ */ y(v, { className: "size-4 text-status-error-text" })
+						})
+					]
+				}), /* @__PURE__ */ y(a, {
+					items: Z,
+					align: "right",
+					isOpen: V,
+					onToggle: H
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { S as FileListItem };
+
+//# sourceMappingURL=FileListItem.js.map

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

@@ -0,0 +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\ninterface FileListItemProps {\n  file: FileItem;\n  isSelected?: 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  onContextMenu?: (file: FileItem, x: number, y: number) => 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 handleClick = () => {\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={handleClick}\n      onContextMenu={handleContextMenu}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick();\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-status-warning-bg text-status-warning-bg\" />\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              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              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              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              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              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              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/FilePreviewModal.d.ts

@@ -0,0 +1,17 @@
+import { FileItem } from '../types';
+interface FilePreviewModalProps {
+    file: FileItem;
+    onClose: () => void;
+    onDownload: () => void;
+    onShare?: () => void;
+    onStar?: () => void;
+    onDelete?: () => void;
+    customActions?: Array<{
+        label: string;
+        icon: React.ReactNode;
+        onClick: () => void;
+    }>;
+}
+export declare function FilePreviewModal({ file, onClose, onDownload, onShare, onStar, onDelete, customActions, }: FilePreviewModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilePreviewModal.d.ts.map

package/dist/files/components/FilePreviewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreviewModal.d.ts","sourceRoot":"","sources":["../../../src/files/components/FilePreviewModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAWzC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;CACJ;AA8GD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,2CAwLvB"}

package/dist/files/components/FilePreviewModal.js

@@ -0,0 +1,175 @@
+import { tWithFallback as e } from "../utils/i18n.js";
+import { ImageViewer as t } from "./viewers/ImageViewer.js";
+import { PDFViewer as n } from "./viewers/PDFViewer.js";
+import { VideoPlayer as r } from "./viewers/VideoPlayer.js";
+import { AudioPlayer as i } from "./viewers/AudioPlayer.js";
+import { CodeViewer as a } from "./viewers/CodeViewer.js";
+import { TextViewer as o } from "./viewers/TextViewer.js";
+import "./viewers/index.js";
+import { useEffect as s } from "react";
+import { Download as c, Share2 as l, Star as u, Trash2 as d, X as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/files/components/FilePreviewModal.tsx
+function g(e, t) {
+	if (e.startsWith("image/")) return "image";
+	if (e === "application/pdf") return "pdf";
+	if (e.startsWith("video/")) return "video";
+	if (e.startsWith("audio/")) return "audio";
+	let n = /* @__PURE__ */ "js.jsx.ts.tsx.py.java.cpp.c.cs.rb.go.rs.php.html.css.scss.json.yaml.yml.xml.sql.sh.bash.vue.swift.kt.r.dart.lua".split("."), r = t.split(".").pop()?.toLowerCase();
+	return r && n.includes(r) ? "code" : e.startsWith("text/") || e === "application/json" || e === "application/xml" ? "text" : "unsupported";
+}
+function _(e) {
+	return {
+		js: "javascript",
+		jsx: "jsx",
+		ts: "typescript",
+		tsx: "tsx",
+		py: "python",
+		java: "java",
+		cpp: "cpp",
+		c: "c",
+		cs: "csharp",
+		rb: "ruby",
+		go: "go",
+		rs: "rust",
+		php: "php",
+		html: "html",
+		css: "css",
+		json: "json",
+		md: "markdown",
+		yaml: "yaml",
+		yml: "yaml",
+		xml: "xml",
+		sql: "sql",
+		sh: "bash"
+	}[e.split(".").pop()?.toLowerCase() || ""] || "text";
+}
+function v({ file: v, onClose: y, onDownload: b, onShare: x, onStar: S, onDelete: C, customActions: w }) {
+	let { t: T } = h(), E = g(v.mimeType, v.name), D = v.downloadUrl || v.url;
+	return s(() => {
+		let e = (e) => {
+			e.key === "Escape" && y();
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [y]), /* @__PURE__ */ m("div", {
+		className: "fixed inset-0 bg-bg-overlay flex flex-col z-[100] animate-in fade-in duration-200",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": `Preview ${v.name}`,
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex items-center justify-between px-6 py-4 bg-bg-elevated/90 backdrop-blur-sm border-b border-border-default",
+			children: [/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-4 flex-1 min-w-0",
+				children: [/* @__PURE__ */ p("h2", {
+					className: "text-base font-medium text-text-primary truncate",
+					children: v.name
+				}), /* @__PURE__ */ m("span", {
+					className: "text-sm text-text-secondary flex-shrink-0",
+					children: [(v.size / 1024 / 1024).toFixed(2), " MB"]
+				})]
+			}), /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2",
+				children: [
+					w?.map((e, t) => /* @__PURE__ */ m("button", {
+						onClick: e.onClick,
+						className: "flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
+						title: e.label,
+						children: [e.icon, /* @__PURE__ */ p("span", { children: e.label })]
+					}, t)),
+					/* @__PURE__ */ p("button", {
+						onClick: b,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
+						title: e(T, "files.common.actions.download", "Download"),
+						"aria-label": e(T, "files.preview.downloadFile", "Download file"),
+						children: /* @__PURE__ */ p(c, { className: "size-5" })
+					}),
+					x && /* @__PURE__ */ p("button", {
+						onClick: x,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
+						title: e(T, "files.common.actions.share", "Share"),
+						"aria-label": e(T, "files.preview.shareFile", "Share file"),
+						children: /* @__PURE__ */ p(l, { className: "size-5" })
+					}),
+					S && /* @__PURE__ */ p("button", {
+						onClick: S,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
+						title: v.starred ? e(T, "files.preview.removeStar", "Remove star") : e(T, "files.preview.addStar", "Add star"),
+						"aria-label": v.starred ? e(T, "files.preview.removeStar", "Remove star") : e(T, "files.preview.addStar", "Add star"),
+						children: /* @__PURE__ */ p(u, { className: `size-5 ${v.starred ? "fill-status-warning-text text-status-warning-text" : ""}` })
+					}),
+					C && /* @__PURE__ */ p("button", {
+						onClick: C,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
+						title: e(T, "files.common.actions.delete", "Delete"),
+						"aria-label": e(T, "files.preview.deleteFile", "Delete file"),
+						children: /* @__PURE__ */ p(d, { className: "size-5" })
+					}),
+					/* @__PURE__ */ p("button", {
+						onClick: y,
+						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200 ml-2",
+						title: e(T, "files.common.actions.close", "Close"),
+						"aria-label": e(T, "files.preview.close", "Close preview"),
+						children: /* @__PURE__ */ p(f, { className: "size-5" })
+					})
+				]
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: "flex-1 overflow-hidden",
+			children: (() => {
+				switch (E) {
+					case "image": return /* @__PURE__ */ p(t, {
+						file: v,
+						url: D
+					});
+					case "pdf": return /* @__PURE__ */ p(n, {
+						file: v,
+						url: D
+					});
+					case "video": return /* @__PURE__ */ p(r, {
+						file: v,
+						url: D
+					});
+					case "audio": return /* @__PURE__ */ p(i, {
+						file: v,
+						url: D
+					});
+					case "code": return /* @__PURE__ */ p(a, {
+						file: v,
+						url: D,
+						language: _(v.name)
+					});
+					case "text": return /* @__PURE__ */ p(o, {
+						file: v,
+						url: D
+					});
+					default: return /* @__PURE__ */ p("div", {
+						className: "flex flex-col items-center justify-center h-full bg-bg-canvas p-8",
+						children: /* @__PURE__ */ m("div", {
+							className: "bg-bg-surface p-8 rounded-lg text-center max-w-md",
+							children: [
+								/* @__PURE__ */ p("p", {
+									className: "text-text-secondary mb-4",
+									children: e(T, "files.preview.notAvailable", "Preview not available for this file type.")
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-sm text-text-tertiary mb-6",
+									children: v.mimeType
+								}),
+								/* @__PURE__ */ p("button", {
+									onClick: b,
+									className: "px-4 py-2 bg-action-primary-bg text-text-inverse rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200",
+									children: e(T, "files.preview.downloadFile", "Download File")
+								})
+							]
+						})
+					});
+				}
+			})()
+		})]
+	});
+}
+//#endregion
+export { v as FilePreviewModal };
+
+//# sourceMappingURL=FilePreviewModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreviewModal.js","names":[],"sources":["../../../src/files/components/FilePreviewModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { X, Download, Share2, Star, Trash2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem } from \"../types\";\nimport { tWithFallback } from \"../utils/i18n\";\nimport {\n  ImageViewer,\n  PDFViewer,\n  VideoPlayer,\n  AudioPlayer,\n  CodeViewer,\n  TextViewer,\n} from \"./viewers\";\n\ninterface FilePreviewModalProps {\n  file: FileItem;\n  onClose: () => void;\n  onDownload: () => void;\n  onShare?: () => void;\n  onStar?: () => void;\n  onDelete?: () => void;\n  customActions?: Array<{\n    label: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n  }>;\n}\n\ntype PreviewType =\n  | \"image\"\n  | \"pdf\"\n  | \"video\"\n  | \"audio\"\n  | \"code\"\n  | \"text\"\n  | \"unsupported\";\n\nfunction getFilePreviewType(mimeType: string, filename: string): PreviewType {\n  // Image files\n  if (mimeType.startsWith(\"image/\")) {\n    return \"image\";\n  }\n\n  // PDF files\n  if (mimeType === \"application/pdf\") {\n    return \"pdf\";\n  }\n\n  // Video files\n  if (mimeType.startsWith(\"video/\")) {\n    return \"video\";\n  }\n\n  // Audio files\n  if (mimeType.startsWith(\"audio/\")) {\n    return \"audio\";\n  }\n\n  // Code files (by extension)\n  const codeExtensions = [\n    \"js\",\n    \"jsx\",\n    \"ts\",\n    \"tsx\",\n    \"py\",\n    \"java\",\n    \"cpp\",\n    \"c\",\n    \"cs\",\n    \"rb\",\n    \"go\",\n    \"rs\",\n    \"php\",\n    \"html\",\n    \"css\",\n    \"scss\",\n    \"json\",\n    \"yaml\",\n    \"yml\",\n    \"xml\",\n    \"sql\",\n    \"sh\",\n    \"bash\",\n    \"vue\",\n    \"swift\",\n    \"kt\",\n    \"r\",\n    \"dart\",\n    \"lua\",\n  ];\n  const ext = filename.split(\".\").pop()?.toLowerCase();\n  if (ext && codeExtensions.includes(ext)) {\n    return \"code\";\n  }\n\n  // Text files\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType === \"application/json\" ||\n    mimeType === \"application/xml\"\n  ) {\n    return \"text\";\n  }\n\n  return \"unsupported\";\n}\n\nfunction detectLanguage(filename: string): string {\n  const ext = filename.split(\".\").pop()?.toLowerCase();\n  const languageMap: Record<string, string> = {\n    js: \"javascript\",\n    jsx: \"jsx\",\n    ts: \"typescript\",\n    tsx: \"tsx\",\n    py: \"python\",\n    java: \"java\",\n    cpp: \"cpp\",\n    c: \"c\",\n    cs: \"csharp\",\n    rb: \"ruby\",\n    go: \"go\",\n    rs: \"rust\",\n    php: \"php\",\n    html: \"html\",\n    css: \"css\",\n    json: \"json\",\n    md: \"markdown\",\n    yaml: \"yaml\",\n    yml: \"yaml\",\n    xml: \"xml\",\n    sql: \"sql\",\n    sh: \"bash\",\n  };\n  return languageMap[ext || \"\"] || \"text\";\n}\n\nexport function FilePreviewModal({\n  file,\n  onClose,\n  onDownload,\n  onShare,\n  onStar,\n  onDelete,\n  customActions,\n}: FilePreviewModalProps) {\n  const { t } = useI18n();\n  const previewType = getFilePreviewType(file.mimeType, file.name);\n  const url = file.downloadUrl || file.url;\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [onClose]);\n\n  const renderPreview = () => {\n    switch (previewType) {\n      case \"image\":\n        return <ImageViewer file={file} url={url} />;\n      case \"pdf\":\n        return <PDFViewer file={file} url={url} />;\n      case \"video\":\n        return <VideoPlayer file={file} url={url} />;\n      case \"audio\":\n        return <AudioPlayer file={file} url={url} />;\n      case \"code\":\n        return (\n          <CodeViewer\n            file={file}\n            url={url}\n            language={detectLanguage(file.name)}\n          />\n        );\n      case \"text\":\n        return <TextViewer file={file} url={url} />;\n      default:\n        return (\n          <div className=\"flex flex-col items-center justify-center h-full bg-bg-canvas p-8\">\n            <div className=\"bg-bg-surface p-8 rounded-lg text-center max-w-md\">\n              <p className=\"text-text-secondary mb-4\">\n                {tWithFallback(\n                  t,\n                  \"files.preview.notAvailable\",\n                  \"Preview not available for this file type.\",\n                )}\n              </p>\n              <p className=\"text-sm text-text-tertiary mb-6\">{file.mimeType}</p>\n              <button\n                onClick={onDownload}\n                className=\"px-4 py-2 bg-action-primary-bg text-text-inverse rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.preview.downloadFile\",\n                  \"Download File\",\n                )}\n              </button>\n            </div>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 bg-bg-overlay flex flex-col z-[100] animate-in fade-in duration-200\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={`Preview ${file.name}`}\n    >\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-6 py-4 bg-bg-elevated/90 backdrop-blur-sm border-b border-border-default\">\n        <div className=\"flex items-center gap-4 flex-1 min-w-0\">\n          <h2 className=\"text-base font-medium text-text-primary truncate\">\n            {file.name}\n          </h2>\n          <span className=\"text-sm text-text-secondary flex-shrink-0\">\n            {(file.size / 1024 / 1024).toFixed(2)} MB\n          </span>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* Custom Actions */}\n          {customActions?.map((action, index) => (\n            <button\n              key={index}\n              onClick={action.onClick}\n              className=\"flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              title={action.label}\n            >\n              {action.icon}\n              <span>{action.label}</span>\n            </button>\n          ))}\n\n          {/* Standard Actions */}\n          <button\n            onClick={onDownload}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n            title={tWithFallback(\n              t,\n              \"files.common.actions.download\",\n              \"Download\",\n            )}\n            aria-label={tWithFallback(\n              t,\n              \"files.preview.downloadFile\",\n              \"Download file\",\n            )}\n          >\n            <Download className=\"size-5\" />\n          </button>\n          {onShare && (\n            <button\n              onClick={onShare}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              title={tWithFallback(t, \"files.common.actions.share\", \"Share\")}\n              aria-label={tWithFallback(\n                t,\n                \"files.preview.shareFile\",\n                \"Share file\",\n              )}\n            >\n              <Share2 className=\"size-5\" />\n            </button>\n          )}\n          {onStar && (\n            <button\n              onClick={onStar}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              title={\n                file.starred\n                  ? tWithFallback(t, \"files.preview.removeStar\", \"Remove star\")\n                  : tWithFallback(t, \"files.preview.addStar\", \"Add star\")\n              }\n              aria-label={\n                file.starred\n                  ? tWithFallback(t, \"files.preview.removeStar\", \"Remove star\")\n                  : tWithFallback(t, \"files.preview.addStar\", \"Add star\")\n              }\n            >\n              <Star\n                className={`size-5 ${\n                  file.starred\n                    ? \"fill-status-warning-text text-status-warning-text\"\n                    : \"\"\n                }`}\n              />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              onClick={onDelete}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              title={tWithFallback(t, \"files.common.actions.delete\", \"Delete\")}\n              aria-label={tWithFallback(\n                t,\n                \"files.preview.deleteFile\",\n                \"Delete file\",\n              )}\n            >\n              <Trash2 className=\"size-5\" />\n            </button>\n          )}\n          <button\n            onClick={onClose}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200 ml-2\"\n            title={tWithFallback(t, \"files.common.actions.close\", \"Close\")}\n            aria-label={tWithFallback(\n              t,\n              \"files.preview.close\",\n              \"Close preview\",\n            )}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"flex-1 overflow-hidden\">{renderPreview()}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/FileVersionPanel.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { FileItem } from '../types';
+interface FileVersionPanelProps {
+    file: FileItem;
+    onClose: () => void;
+}
+export declare const FileVersionPanel: FC<FileVersionPanelProps>;
+export {};
+//# sourceMappingURL=FileVersionPanel.d.ts.map

package/dist/files/components/FileVersionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileVersionPanel.d.ts","sourceRoot":"","sources":["../../../src/files/components/FileVersionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAa1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAYzC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+XtD,CAAC"}