@burdenoff/microfe-files 2026.624.3 → 2026.625.2

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 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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"}
+{"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 { GlassCard } from \"@burdenoff/fe-libs/ui\";\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    <GlassCard\n      treatment=\"insight\"\n      className={`@container group cursor-pointer overflow-hidden border-border-seam focus-within:shadow-elevation-2 ${isDragging ? \"opacity-50\" : \"\"}`}\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    </GlassCard>\n  );\n};\n"],"mappings":"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"}

package/dist/files/components/FileInfoPanel.js

@@ -3,23 +3,24 @@ import { Suspense as t, lazy as n, useEffect as r, useEffectEvent as i, useState
 import { Calendar as o, Clock as s, FileText as c, HardDrive as l, Link as u, User as d, X as f } from "lucide-react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { GlassCard as _, ShowMore as v } from "@burdenoff/fe-libs/ui";
 //#region src/files/components/FileInfoPanel.tsx
-var _ = n(() => import("./FileVersionPanel.js").then((e) => ({ default: e.FileVersionPanel })));
-function v({ item: n, type: v, onClose: y }) {
-	let { t: b } = g(), x = v === "file", S = x ? n : null, C = x ? null : n, [w, T] = a(!1), E = i(() => {
-		if (w) {
-			T(!1);
+var y = n(() => import("./FileVersionPanel.js").then((e) => ({ default: e.FileVersionPanel })));
+function b({ item: n, type: b, onClose: x }) {
+	let { t: S } = g(), C = b === "file", w = C ? n : null, T = C ? null : n, [E, D] = a(!1), O = i(() => {
+		if (E) {
+			D(!1);
 			return;
 		}
-		y();
+		x();
 	});
 	r(() => {
 		let e = (e) => {
-			e.key === "Escape" && E();
+			e.key === "Escape" && O();
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, []);
-	let D = (e) => new Date(e).toLocaleString("en-US", {
+	let k = (e) => new Date(e).toLocaleString("en-US", {
 		year: "numeric",
 		month: "long",
 		day: "numeric",
@@ -27,31 +28,32 @@ function v({ item: n, type: v, onClose: y }) {
 		minute: "2-digit"
 	});
 	return /* @__PURE__ */ h("div", {
-		className: "fixed inset-y-0 right-0 z-[9999] w-full max-w-full overflow-y-auto border-l border-border-default bg-bg-surface shadow-2xl animate-in slide-in-from-right duration-200 sm:w-96 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+		className: "fixed inset-y-0 right-0 z-[9999] w-full max-w-full overflow-y-auto border-l border-border-seam bg-bg-surface shadow-2xl animate-in slide-in-from-right duration-200 sm:w-96 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
 		role: "dialog",
 		"aria-modal": "false",
-		"aria-label": x ? e(b, "files.info.fileInfo", "File information") : e(b, "files.info.folderInfo", "Folder information"),
+		"aria-label": C ? e(S, "files.info.fileInfo", "File information") : e(S, "files.info.folderInfo", "Folder information"),
 		children: [
 			/* @__PURE__ */ h("div", {
-				className: "sticky top-0 bg-bg-surface border-b border-border-default px-6 py-4 flex items-center justify-between",
+				className: "sticky top-0 z-10 bg-bg-surface border-b border-border-seam px-6 py-4 flex items-center justify-between",
 				children: [/* @__PURE__ */ m("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: x ? e(b, "files.info.fileInfo", "File Information") : e(b, "files.info.folderInfo", "Folder Information")
+					children: C ? e(S, "files.info.fileInfo", "File Information") : e(S, "files.info.folderInfo", "Folder Information")
 				}), /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: y,
+					onClick: x,
 					className: "p-1.5 rounded-md border border-border-default text-text-secondary bg-bg-elevated hover:bg-action-ghost-bg-hover hover:text-text-primary transition-colors shadow-sm",
-					"aria-label": e(b, "files.info.closePanel", "Close information panel"),
+					"aria-label": e(S, "files.info.closePanel", "Close information panel"),
 					children: /* @__PURE__ */ m(f, { className: "size-5" })
 				})]
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "p-6 space-y-6",
 				children: [
-					/* @__PURE__ */ m("div", {
-						className: "flex items-center justify-center py-8 bg-bg-sunken rounded-lg",
-						children: x && S?.mimeType.startsWith("image/") ? /* @__PURE__ */ m("img", {
-							src: S.downloadUrl || S.url,
+					/* @__PURE__ */ m(_, {
+						treatment: "metric",
+						className: "flex items-center justify-center py-8",
+						children: C && w?.mimeType.startsWith("image/") ? /* @__PURE__ */ m("img", {
+							src: w.downloadUrl || w.url,
 							alt: n.name,
 							className: "max-w-full max-h-48 object-contain rounded"
 						}) : /* @__PURE__ */ m(c, { className: "size-20 text-text-muted" })
@@ -70,135 +72,138 @@ function v({ item: n, type: v, onClose: y }) {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(c, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.type", "Type")
+									children: e(S, "files.info.type", "Type")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary",
-									children: x ? S?.mimeType || e(b, "files.info.unknown", "Unknown") : e(b, "files.info.folder", "Folder")
+									children: C ? w?.mimeType || e(S, "files.info.unknown", "Unknown") : e(S, "files.info.folder", "Folder")
 								})] })]
 							}),
-							x && S && /* @__PURE__ */ h("div", {
+							C && w && /* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(l, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.size", "Size")
+									children: e(S, "files.info.size", "Size")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary",
-									children: ((e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`)(S.size)
+									children: ((e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`)(w.size)
 								})] })]
 							}),
-							!x && C && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+							!C && T && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(c, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.contents", "Contents")
+									children: e(S, "files.info.contents", "Contents")
 								}), /* @__PURE__ */ h("p", {
 									className: "text-sm text-text-secondary",
 									children: [
-										C.filesCount,
+										T.filesCount,
 										" ",
-										e(b, "files.info.files", "files"),
+										e(S, "files.info.files", "files"),
 										",",
 										" ",
-										C.subfoldersCount,
+										T.subfoldersCount,
 										" ",
-										e(b, "files.info.folders", "folders")
+										e(S, "files.info.folders", "folders")
 									]
 								})] })]
-							}), C.path && /* @__PURE__ */ h("div", {
+							}), T.path && /* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(u, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.path", "Path")
+									children: e(S, "files.info.path", "Path")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary break-all",
-									children: C.path
+									children: T.path
 								})] })]
 							})] }),
 							/* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(o, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.created", "Created")
+									children: e(S, "files.info.created", "Created")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary",
-									children: D(n.createdAt)
+									children: k(n.createdAt)
 								})] })]
 							}),
 							n.updatedAt && /* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(o, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.modified", "Modified")
+									children: e(S, "files.info.modified", "Modified")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary",
-									children: D(n.updatedAt)
+									children: k(n.updatedAt)
 								})] })]
 							}),
 							/* @__PURE__ */ h("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ m(d, { className: "size-5 text-text-muted mt-0.5" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: e(b, "files.info.owner", "Owner")
+									children: e(S, "files.info.owner", "Owner")
 								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-secondary",
-									children: n.createdBy?.name || n.createdById || e(b, "files.info.unknown", "Unknown")
+									children: n.createdBy?.name || n.createdById || e(S, "files.info.unknown", "Unknown")
 								})] })]
 							})
 						]
 					}),
 					/* @__PURE__ */ h("div", {
-						className: "pt-6 border-t border-border-default",
+						className: "pt-6 border-t border-border-seam",
 						children: [/* @__PURE__ */ m("h4", {
 							className: "text-sm font-semibold text-text-primary mb-3",
-							children: e(b, "files.info.properties", "Properties")
-						}), /* @__PURE__ */ h("dl", {
-							className: "space-y-2",
-							children: [
-								/* @__PURE__ */ h("div", {
-									className: "flex justify-between",
-									children: [/* @__PURE__ */ m("dt", {
-										className: "text-sm text-text-secondary",
-										children: e(b, "files.info.status", "Status")
-									}), /* @__PURE__ */ m("dd", {
-										className: "text-sm font-medium text-text-primary",
-										children: n.status
-									})]
-								}),
-								/* @__PURE__ */ h("div", {
-									className: "flex justify-between",
-									children: [/* @__PURE__ */ m("dt", {
-										className: "text-sm text-text-secondary",
-										children: e(b, "files.info.visibility", "Visibility")
-									}), /* @__PURE__ */ m("dd", {
-										className: "text-sm font-medium text-text-primary",
-										children: n.visibility
-									})]
-								}),
-								/* @__PURE__ */ h("div", {
-									className: "flex justify-between",
-									children: [/* @__PURE__ */ m("dt", {
-										className: "text-sm text-text-secondary",
-										children: e(b, "files.info.starred", "Starred")
-									}), /* @__PURE__ */ m("dd", {
-										className: "text-sm font-medium text-text-primary",
-										children: n.starred ? e(b, "files.info.yes", "Yes") : e(b, "files.info.no", "No")
-									})]
-								})
-							]
+							children: e(S, "files.info.properties", "Properties")
+						}), /* @__PURE__ */ m(v, {
+							collapsedHeight: 56,
+							children: /* @__PURE__ */ h("dl", {
+								className: "space-y-2",
+								children: [
+									/* @__PURE__ */ h("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ m("dt", {
+											className: "text-sm text-text-secondary",
+											children: e(S, "files.info.status", "Status")
+										}), /* @__PURE__ */ m("dd", {
+											className: "text-sm font-medium text-text-primary",
+											children: n.status
+										})]
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ m("dt", {
+											className: "text-sm text-text-secondary",
+											children: e(S, "files.info.visibility", "Visibility")
+										}), /* @__PURE__ */ m("dd", {
+											className: "text-sm font-medium text-text-primary",
+											children: n.visibility
+										})]
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ m("dt", {
+											className: "text-sm text-text-secondary",
+											children: e(S, "files.info.starred", "Starred")
+										}), /* @__PURE__ */ m("dd", {
+											className: "text-sm font-medium text-text-primary",
+											children: n.starred ? e(S, "files.info.yes", "Yes") : e(S, "files.info.no", "No")
+										})]
+									})
+								]
+							})
 						})]
 					}),
-					x && S && /* @__PURE__ */ m("div", {
-						className: "pt-6 border-t border-border-default",
+					C && w && /* @__PURE__ */ m("div", {
+						className: "pt-6 border-t border-border-seam",
 						children: /* @__PURE__ */ h("button", {
 							type: "button",
-							onClick: () => T(!0),
+							onClick: () => D(!0),
 							className: "w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-action-primary-text bg-action-primary-bg/10 hover:bg-action-primary-bg/20 rounded-lg transition-all duration-200",
-							children: [/* @__PURE__ */ m(s, { className: "size-4" }), e(b, "files.info.viewVersionHistory", "View Version History")]
+							children: [/* @__PURE__ */ m(s, { className: "size-4" }), e(S, "files.info.viewVersionHistory", "View Version History")]
 						})
 					})
 				]
 			}),
-			x && S && w && /* @__PURE__ */ m(t, {
+			C && w && E && /* @__PURE__ */ m(t, {
 				fallback: /* @__PURE__ */ m("div", {
 					className: "fixed inset-0 z-50 bg-bg-overlay flex items-center justify-center",
 					children: /* @__PURE__ */ m("div", {
@@ -207,20 +212,20 @@ function v({ item: n, type: v, onClose: y }) {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ m(s, { className: "size-6 text-action-primary-bg animate-spin" }), /* @__PURE__ */ m("span", {
 								className: "text-text-primary",
-								children: e(b, "files.info.loadingVersionHistory", "Loading version history...")
+								children: e(S, "files.info.loadingVersionHistory", "Loading version history...")
 							})]
 						})
 					})
 				}),
-				children: /* @__PURE__ */ m(_, {
-					file: S,
-					onClose: () => T(!1)
+				children: /* @__PURE__ */ m(y, {
+					file: w,
+					onClose: () => D(!1)
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { v as FileInfoPanel };
+export { b as FileInfoPanel };
 
 //# sourceMappingURL=FileInfoPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileInfoPanel.js","names":[],"sources":["../../../src/files/components/FileInfoPanel.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useState, lazy, Suspense } from \"react\";\nimport {\n  X,\n  FileText,\n  Calendar,\n  User,\n  HardDrive,\n  Link as LinkIcon,\n  Clock,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\n// Lazy load FileVersionPanel to avoid loading heavy dependencies until needed\nconst FileVersionPanel = lazy(() =>\n  import(\"./FileVersionPanel\").then((m) => ({ default: m.FileVersionPanel })),\n);\n\ninterface FileInfoPanelProps {\n  item: FileItem | FolderItem;\n  type: \"file\" | \"folder\";\n  onClose: () => void;\n}\n\nexport function FileInfoPanel({ item, type, onClose }: FileInfoPanelProps) {\n  const { t } = useI18n();\n  const isFile = type === \"file\";\n  const file = isFile ? (item as FileItem) : null;\n  const folder = !isFile ? (item as FolderItem) : null;\n  const [showVersionHistory, setShowVersionHistory] = useState(false);\n\n  const onEscape = useEffectEvent(() => {\n    if (showVersionHistory) {\n      setShowVersionHistory(false);\n      return;\n    }\n    onClose();\n  });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onEscape();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, []);\n\n  const formatDate = (date: string) => {\n    return new Date(date).toLocaleString(\"en-US\", {\n      year: \"numeric\",\n      month: \"long\",\n      day: \"numeric\",\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n    });\n  };\n\n  const formatSize = (bytes: number) => {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;\n    if (bytes < 1024 * 1024 * 1024)\n      return `${(bytes / 1024 / 1024).toFixed(2)} MB`;\n    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;\n  };\n\n  return (\n    <div\n      className=\"fixed inset-y-0 right-0 z-[9999] w-full max-w-full overflow-y-auto border-l border-border-default bg-bg-surface shadow-2xl animate-in slide-in-from-right duration-200 sm:w-96 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label={\n        isFile\n          ? tWithFallback(t, \"files.info.fileInfo\", \"File information\")\n          : tWithFallback(t, \"files.info.folderInfo\", \"Folder information\")\n      }\n    >\n      {/* Header */}\n      <div className=\"sticky top-0 bg-bg-surface border-b border-border-default px-6 py-4 flex items-center justify-between\">\n        <h2 className=\"text-lg font-semibold text-text-primary\">\n          {isFile\n            ? tWithFallback(t, \"files.info.fileInfo\", \"File Information\")\n            : tWithFallback(t, \"files.info.folderInfo\", \"Folder Information\")}\n        </h2>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-1.5 rounded-md border border-border-default text-text-secondary bg-bg-elevated hover:bg-action-ghost-bg-hover hover:text-text-primary transition-colors shadow-sm\"\n          aria-label={tWithFallback(\n            t,\n            \"files.info.closePanel\",\n            \"Close information panel\",\n          )}\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-6 space-y-6\">\n        {/* Preview/Icon */}\n        <div className=\"flex items-center justify-center py-8 bg-bg-sunken rounded-lg\">\n          {isFile && file?.mimeType.startsWith(\"image/\") ? (\n            <img\n              src={file.downloadUrl || file.url}\n              alt={item.name}\n              className=\"max-w-full max-h-48 object-contain rounded\"\n            />\n          ) : (\n            <FileText className=\"size-20 text-text-muted\" />\n          )}\n        </div>\n\n        {/* Name */}\n        <div>\n          <h3 className=\"text-xl font-semibold text-text-primary break-words\">\n            {item.name}\n          </h3>\n          {item.description && (\n            <p className=\"mt-2 text-sm text-text-secondary\">\n              {item.description}\n            </p>\n          )}\n        </div>\n\n        {/* Details */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-start gap-3\">\n            <FileText className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.type\", \"Type\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {isFile\n                  ? file?.mimeType ||\n                    tWithFallback(t, \"files.info.unknown\", \"Unknown\")\n                  : tWithFallback(t, \"files.info.folder\", \"Folder\")}\n              </p>\n            </div>\n          </div>\n\n          {isFile && file && (\n            <div className=\"flex items-start gap-3\">\n              <HardDrive className=\"size-5 text-text-muted mt-0.5\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.info.size\", \"Size\")}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  {formatSize(file.size)}\n                </p>\n              </div>\n            </div>\n          )}\n\n          {!isFile && folder && (\n            <>\n              <div className=\"flex items-start gap-3\">\n                <FileText className=\"size-5 text-text-muted mt-0.5\" />\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tWithFallback(t, \"files.info.contents\", \"Contents\")}\n                  </p>\n                  <p className=\"text-sm text-text-secondary\">\n                    {folder.filesCount}{\" \"}\n                    {tWithFallback(t, \"files.info.files\", \"files\")},{\" \"}\n                    {folder.subfoldersCount}{\" \"}\n                    {tWithFallback(t, \"files.info.folders\", \"folders\")}\n                  </p>\n                </div>\n              </div>\n\n              {folder.path && (\n                <div className=\"flex items-start gap-3\">\n                  <LinkIcon className=\"size-5 text-text-muted mt-0.5\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tWithFallback(t, \"files.info.path\", \"Path\")}\n                    </p>\n                    <p className=\"text-sm text-text-secondary break-all\">\n                      {folder.path}\n                    </p>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n\n          <div className=\"flex items-start gap-3\">\n            <Calendar className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.created\", \"Created\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {formatDate(item.createdAt)}\n              </p>\n            </div>\n          </div>\n\n          {item.updatedAt && (\n            <div className=\"flex items-start gap-3\">\n              <Calendar className=\"size-5 text-text-muted mt-0.5\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.info.modified\", \"Modified\")}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  {formatDate(item.updatedAt)}\n                </p>\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex items-start gap-3\">\n            <User className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.owner\", \"Owner\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {item.createdBy?.name ||\n                  item.createdById ||\n                  tWithFallback(t, \"files.info.unknown\", \"Unknown\")}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Additional Info */}\n        <div className=\"pt-6 border-t border-border-default\">\n          <h4 className=\"text-sm font-semibold text-text-primary mb-3\">\n            {tWithFallback(t, \"files.info.properties\", \"Properties\")}\n          </h4>\n          <dl className=\"space-y-2\">\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.status\", \"Status\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.status}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.visibility\", \"Visibility\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.visibility}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.starred\", \"Starred\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.starred\n                  ? tWithFallback(t, \"files.info.yes\", \"Yes\")\n                  : tWithFallback(t, \"files.info.no\", \"No\")}\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        {/* Version History Button (Files only) */}\n        {isFile && file && (\n          <div className=\"pt-6 border-t border-border-default\">\n            <button\n              type=\"button\"\n              onClick={() => setShowVersionHistory(true)}\n              className=\"w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-action-primary-text bg-action-primary-bg/10 hover:bg-action-primary-bg/20 rounded-lg transition-all duration-200\"\n            >\n              <Clock className=\"size-4\" />\n              {tWithFallback(\n                t,\n                \"files.info.viewVersionHistory\",\n                \"View Version History\",\n              )}\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* Version History Modal */}\n      {isFile && file && showVersionHistory && (\n        <Suspense\n          fallback={\n            <div className=\"fixed inset-0 z-50 bg-bg-overlay flex items-center justify-center\">\n              <div className=\"bg-bg-surface rounded-lg p-8 animate-in fade-in zoom-in duration-200\">\n                <div className=\"flex items-center gap-3\">\n                  <Clock className=\"size-6 text-action-primary-bg animate-spin\" />\n                  <span className=\"text-text-primary\">\n                    {tWithFallback(\n                      t,\n                      \"files.info.loadingVersionHistory\",\n                      \"Loading version history...\",\n                    )}\n                  </span>\n                </div>\n              </div>\n            </div>\n          }\n        >\n          <FileVersionPanel\n            file={file}\n            onClose={() => setShowVersionHistory(false)}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"FileInfoPanel.js","names":[],"sources":["../../../src/files/components/FileInfoPanel.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useState, lazy, Suspense } from \"react\";\nimport {\n  X,\n  FileText,\n  Calendar,\n  User,\n  HardDrive,\n  Link as LinkIcon,\n  Clock,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { GlassCard, ShowMore } from \"@burdenoff/fe-libs/ui\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\n// Lazy load FileVersionPanel to avoid loading heavy dependencies until needed\nconst FileVersionPanel = lazy(() =>\n  import(\"./FileVersionPanel\").then((m) => ({ default: m.FileVersionPanel })),\n);\n\ninterface FileInfoPanelProps {\n  item: FileItem | FolderItem;\n  type: \"file\" | \"folder\";\n  onClose: () => void;\n}\n\nexport function FileInfoPanel({ item, type, onClose }: FileInfoPanelProps) {\n  const { t } = useI18n();\n  const isFile = type === \"file\";\n  const file = isFile ? (item as FileItem) : null;\n  const folder = !isFile ? (item as FolderItem) : null;\n  const [showVersionHistory, setShowVersionHistory] = useState(false);\n\n  const onEscape = useEffectEvent(() => {\n    if (showVersionHistory) {\n      setShowVersionHistory(false);\n      return;\n    }\n    onClose();\n  });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onEscape();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, []);\n\n  const formatDate = (date: string) => {\n    return new Date(date).toLocaleString(\"en-US\", {\n      year: \"numeric\",\n      month: \"long\",\n      day: \"numeric\",\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n    });\n  };\n\n  const formatSize = (bytes: number) => {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;\n    if (bytes < 1024 * 1024 * 1024)\n      return `${(bytes / 1024 / 1024).toFixed(2)} MB`;\n    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;\n  };\n\n  return (\n    <div\n      className=\"fixed inset-y-0 right-0 z-[9999] w-full max-w-full overflow-y-auto border-l border-border-seam bg-bg-surface shadow-2xl animate-in slide-in-from-right duration-200 sm:w-96 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label={\n        isFile\n          ? tWithFallback(t, \"files.info.fileInfo\", \"File information\")\n          : tWithFallback(t, \"files.info.folderInfo\", \"Folder information\")\n      }\n    >\n      {/* Header */}\n      <div className=\"sticky top-0 z-10 bg-bg-surface border-b border-border-seam px-6 py-4 flex items-center justify-between\">\n        <h2 className=\"text-lg font-semibold text-text-primary\">\n          {isFile\n            ? tWithFallback(t, \"files.info.fileInfo\", \"File Information\")\n            : tWithFallback(t, \"files.info.folderInfo\", \"Folder Information\")}\n        </h2>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-1.5 rounded-md border border-border-default text-text-secondary bg-bg-elevated hover:bg-action-ghost-bg-hover hover:text-text-primary transition-colors shadow-sm\"\n          aria-label={tWithFallback(\n            t,\n            \"files.info.closePanel\",\n            \"Close information panel\",\n          )}\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-6 space-y-6\">\n        {/* Preview/Icon */}\n        <GlassCard\n          treatment=\"metric\"\n          className=\"flex items-center justify-center py-8\"\n        >\n          {isFile && file?.mimeType.startsWith(\"image/\") ? (\n            <img\n              src={file.downloadUrl || file.url}\n              alt={item.name}\n              className=\"max-w-full max-h-48 object-contain rounded\"\n            />\n          ) : (\n            <FileText className=\"size-20 text-text-muted\" />\n          )}\n        </GlassCard>\n\n        {/* Name */}\n        <div>\n          <h3 className=\"text-xl font-semibold text-text-primary break-words\">\n            {item.name}\n          </h3>\n          {item.description && (\n            <p className=\"mt-2 text-sm text-text-secondary\">\n              {item.description}\n            </p>\n          )}\n        </div>\n\n        {/* Details */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-start gap-3\">\n            <FileText className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.type\", \"Type\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {isFile\n                  ? file?.mimeType ||\n                    tWithFallback(t, \"files.info.unknown\", \"Unknown\")\n                  : tWithFallback(t, \"files.info.folder\", \"Folder\")}\n              </p>\n            </div>\n          </div>\n\n          {isFile && file && (\n            <div className=\"flex items-start gap-3\">\n              <HardDrive className=\"size-5 text-text-muted mt-0.5\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.info.size\", \"Size\")}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  {formatSize(file.size)}\n                </p>\n              </div>\n            </div>\n          )}\n\n          {!isFile && folder && (\n            <>\n              <div className=\"flex items-start gap-3\">\n                <FileText className=\"size-5 text-text-muted mt-0.5\" />\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tWithFallback(t, \"files.info.contents\", \"Contents\")}\n                  </p>\n                  <p className=\"text-sm text-text-secondary\">\n                    {folder.filesCount}{\" \"}\n                    {tWithFallback(t, \"files.info.files\", \"files\")},{\" \"}\n                    {folder.subfoldersCount}{\" \"}\n                    {tWithFallback(t, \"files.info.folders\", \"folders\")}\n                  </p>\n                </div>\n              </div>\n\n              {folder.path && (\n                <div className=\"flex items-start gap-3\">\n                  <LinkIcon className=\"size-5 text-text-muted mt-0.5\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tWithFallback(t, \"files.info.path\", \"Path\")}\n                    </p>\n                    <p className=\"text-sm text-text-secondary break-all\">\n                      {folder.path}\n                    </p>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n\n          <div className=\"flex items-start gap-3\">\n            <Calendar className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.created\", \"Created\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {formatDate(item.createdAt)}\n              </p>\n            </div>\n          </div>\n\n          {item.updatedAt && (\n            <div className=\"flex items-start gap-3\">\n              <Calendar className=\"size-5 text-text-muted mt-0.5\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tWithFallback(t, \"files.info.modified\", \"Modified\")}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  {formatDate(item.updatedAt)}\n                </p>\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex items-start gap-3\">\n            <User className=\"size-5 text-text-muted mt-0.5\" />\n            <div>\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tWithFallback(t, \"files.info.owner\", \"Owner\")}\n              </p>\n              <p className=\"text-sm text-text-secondary\">\n                {item.createdBy?.name ||\n                  item.createdById ||\n                  tWithFallback(t, \"files.info.unknown\", \"Unknown\")}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Additional Info — secondary properties tucked behind progressive\n            disclosure to keep the rail focused on the essentials. */}\n        <div className=\"pt-6 border-t border-border-seam\">\n          <h4 className=\"text-sm font-semibold text-text-primary mb-3\">\n            {tWithFallback(t, \"files.info.properties\", \"Properties\")}\n          </h4>\n          <ShowMore collapsedHeight={56}>\n          <dl className=\"space-y-2\">\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.status\", \"Status\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.status}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.visibility\", \"Visibility\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.visibility}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-sm text-text-secondary\">\n                {tWithFallback(t, \"files.info.starred\", \"Starred\")}\n              </dt>\n              <dd className=\"text-sm font-medium text-text-primary\">\n                {item.starred\n                  ? tWithFallback(t, \"files.info.yes\", \"Yes\")\n                  : tWithFallback(t, \"files.info.no\", \"No\")}\n              </dd>\n            </div>\n          </dl>\n          </ShowMore>\n        </div>\n\n        {/* Version History Button (Files only) */}\n        {isFile && file && (\n          <div className=\"pt-6 border-t border-border-seam\">\n            <button\n              type=\"button\"\n              onClick={() => setShowVersionHistory(true)}\n              className=\"w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-action-primary-text bg-action-primary-bg/10 hover:bg-action-primary-bg/20 rounded-lg transition-all duration-200\"\n            >\n              <Clock className=\"size-4\" />\n              {tWithFallback(\n                t,\n                \"files.info.viewVersionHistory\",\n                \"View Version History\",\n              )}\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* Version History Modal */}\n      {isFile && file && showVersionHistory && (\n        <Suspense\n          fallback={\n            <div className=\"fixed inset-0 z-50 bg-bg-overlay flex items-center justify-center\">\n              <div className=\"bg-bg-surface rounded-lg p-8 animate-in fade-in zoom-in duration-200\">\n                <div className=\"flex items-center gap-3\">\n                  <Clock className=\"size-6 text-action-primary-bg animate-spin\" />\n                  <span className=\"text-text-primary\">\n                    {tWithFallback(\n                      t,\n                      \"files.info.loadingVersionHistory\",\n                      \"Loading version history...\",\n                    )}\n                  </span>\n                </div>\n              </div>\n            </div>\n          }\n        >\n          <FileVersionPanel\n            file={file}\n            onClose={() => setShowVersionHistory(false)}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/FileListItem.js

@@ -92,7 +92,7 @@ var S = ({ file: S, isSelected: C = !1, isDragging: w = !1, onSelect: T, onPrevi
 		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" : ""}`,
+		className: `@container group flex items-center gap-3 border-b border-border-seam 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) => {