@sparkstudio/storage-ui 1.0.14 → 1.0.16

package/dist/index.cjs

@@ -478,6 +478,14 @@ var UploadProgressList = ({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      className: "position-absolute top-50 start-50 translate-middle",
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" })
+                    }
+                  ),
                   u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
                 ]
               }
@@ -518,8 +526,81 @@ var UploadProgressList = ({
 };
 
 // src/components/DesktopFileIcon.tsx
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome = require("@fortawesome/react-fontawesome");
 var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function getFileExtension(name) {
+  if (!name) return null;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === name.length - 1) return null;
+  return name.substring(lastDot + 1).toLowerCase();
+}
+function getIconForExtension(ext) {
+  if (!ext) return import_free_solid_svg_icons.faFile;
+  switch (ext) {
+    // Images
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+    case "bmp":
+      return import_free_solid_svg_icons.faFileImage;
+    // PDF
+    case "pdf":
+      return import_free_solid_svg_icons.faFilePdf;
+    // Word docs
+    case "doc":
+    case "docx":
+      return import_free_solid_svg_icons.faFileWord;
+    // Excel / spreadsheets
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return import_free_solid_svg_icons.faFileExcel;
+    // Archives
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+      return import_free_solid_svg_icons.faFileArchive;
+    // Video
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+      return import_free_solid_svg_icons.faFileVideo;
+    // Audio
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+      return import_free_solid_svg_icons.faFileAudio;
+    // Code files
+    case "js":
+    case "ts":
+    case "tsx":
+    case "jsx":
+    case "json":
+    case "html":
+    case "css":
+    case "cs":
+    case "java":
+    case "py":
+    case "rb":
+    case "php":
+    case "sql":
+    case "xml":
+    case "yml":
+    case "yaml":
+      return import_free_solid_svg_icons.faFileCode;
+    default:
+      return import_free_solid_svg_icons.faFile;
+  }
+}
 var DesktopFileIcon = ({
   name,
   sizeBytes,
@@ -531,9 +612,11 @@ var DesktopFileIcon = ({
     null
   );
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react4.useState)(false);
   const iconRef = (0, import_react4.useRef)(null);
   const menuRef = (0, import_react4.useRef)(null);
   const handleDoubleClick = () => {
+    if (isDeleting) return;
     if (onOpen) {
       onOpen();
       return;
@@ -550,13 +633,14 @@ var DesktopFileIcon = ({
     }
   };
   const handleContextMenu = (e) => {
+    if (isDeleting) return;
     e.preventDefault();
     setContextMenuPos({ x: e.clientX, y: e.clientY });
   };
   const closeMenu = () => setContextMenuPos(null);
   const handleDownload = () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     const a = document.createElement("a");
     a.href = downloadUrl;
     a.download = name ?? "";
@@ -568,18 +652,26 @@ var DesktopFileIcon = ({
   };
   const handleCopyUrl = async () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     try {
       await navigator.clipboard?.writeText(downloadUrl);
     } catch (err) {
       console.error("Failed to copy URL", err);
     }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
     closeMenu();
-    onDelete?.();
+    if (!onDelete) return;
+    try {
+      setIsDeleting(true);
+      await Promise.resolve(onDelete());
+    } catch (err) {
+      console.error("Delete failed", err);
+    }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  const ext = getFileExtension(name);
+  const iconToRender = getIconForExtension(ext);
   (0, import_react4.useEffect)(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
@@ -602,48 +694,43 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-primary-subtle" : ""),
         style: {
           width: 96,
-          cursor: "pointer",
+          cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease"
+          transition: "background-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
         title: name ?? void 0,
         onClick: () => {
-          if (contextMenuPos) {
-            closeMenu();
-          }
+          if (contextMenuPos) closeMenu();
         },
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "div",
-            {
-              className: "small text-center text-truncate",
-              style: { width: "100%" },
-              children: name
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon: iconToRender, className: "fs-2" }),
+                isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "spinner-border spinner-border-sm text-danger" }) })
+              ]
             }
           ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "small text-center text-truncate", style: { width: "100%" }, children: name }),
           formattedSize && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { className: "text-muted mt-1", children: formattedSize })
         ]
       }
     ),
-    contextMenuPos && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    contextMenuPos && !isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         ref: menuRef,
@@ -752,25 +839,59 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             className: "w-100 d-flex flex-wrap gap-4 align-content-start",
             style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                style: {
+                  minHeight: "160px",
+                  border: "2px dashed #ccc",
+                  borderRadius: "10px",
+                  padding: "20px",
+                  cursor: "pointer",
+                  transition: "background 0.12s, border-color 0.12s"
+                },
+                onClick: () => document.getElementById("filePicker")?.click(),
+                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "input",
+                    {
+                      id: "filePicker",
+                      type: "file",
+                      multiple: true,
+                      hidden: true,
+                      onChange: (e) => {
+                        if (!e.target.files) return;
+                        onFilesSelected?.(e.target.files);
+                        startUploadsIfNeeded(e.target.files);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
+                ]
+              }
+            ) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               DesktopFileIcon,
               {
                 name: file.Name,
-                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
-                downloadUrl: file.PublicUrl ?? null,
+                sizeBytes: file.FileSize,
+                downloadUrl: file.PublicUrl,
                 onOpen: () => handleExistingFileOpen(file),
-                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+                onDelete: () => onDeleteFile?.(file)
               },
               file.Id
             ))
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) })
+        )
       ]
     }
   );
@@ -802,6 +923,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
   }, [apiBaseUrl, parentId]);
   return {
     containers,
+    setContainers,
     loading,
     error,
     reload: load
@@ -815,17 +937,18 @@ var ContainerUploadPanel = ({
   storageApiBaseUrl,
   parentContainerId
 }) => {
-  const { containers, reload, loading } = UseContainers({
+  const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
   const getPresignedUrl = async (file) => {
     const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
     const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
-      encodeURIComponent(file.type)
+      encodeURIComponent(contentType)
     );
     async function getPresignedUrlWithRetry(container, attempts = 3) {
       let lastError;
@@ -850,13 +973,6 @@ var ContainerUploadPanel = ({
   const handleUploadError = (file, err) => {
     console.error("Upload failed:", file.name, err);
   };
-  const handleOnDeleteFile = async (file) => {
-    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
-    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
-    await sdkDb.container.DeleteContainer(file.Id);
-    await sdkS3.s3.DeleteS3(file);
-    await reload();
-  };
   const handleExistingFileClick = (file) => {
     const a = document.createElement("a");
     a.href = file.PublicUrl ?? "";
@@ -867,6 +983,13 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
+  const handleDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     UploadContainer,
     {
@@ -877,7 +1000,7 @@ var ContainerUploadPanel = ({
       getPresignedUrl,
       onUploadComplete: handleUploadComplete,
       onUploadError: handleUploadError,
-      onDeleteFile: handleOnDeleteFile
+      onDeleteFile: handleDeleteFile
     }
   );
 };
@@ -903,8 +1026,8 @@ function HomeContent() {
     user && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://localhost:5001",
-        storageApiBaseUrl: "https://localhost:5001"
+        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
       }
     )
   ] });

package/dist/index.d.cts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum ContainerType {
@@ -102,7 +103,7 @@ interface ContainerUploadPanelProps {
     /** Optional parent container – if set, we query children instead of roots. */
     parentContainerId?: string;
 }
-declare const ContainerUploadPanel: React.FC<ContainerUploadPanelProps>;
+declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
 
 interface DesktopFileIconProps {
     name?: string | null;
@@ -110,10 +111,10 @@ interface DesktopFileIconProps {
     downloadUrl?: string | null;
     /** Double-click / open action */
     onOpen?: () => void;
-    /** Delete action */
-    onDelete?: () => void;
+    /** Delete action (can be async) */
+    onDelete?: () => Promise<void> | void;
 }
-declare const DesktopFileIcon: React.FC<DesktopFileIconProps>;
+declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface UploadContainerProps {
     multiple?: boolean;
@@ -129,20 +130,20 @@ interface UploadContainerProps {
     onUploadComplete?: (file: File, s3Url: string) => void;
     onUploadError?: (file: File, error: Error) => void;
 }
-declare const UploadContainer: React.FC<UploadContainerProps>;
+declare const UploadContainer: React__default.FC<UploadContainerProps>;
 
 interface UploadDropzoneProps {
     isDragging: boolean;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
     /** Extra className so you can make this the root wrapper */
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     /** Custom content to render inside the dropzone */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const UploadDropzone: React.FC<UploadDropzoneProps>;
+declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
 
 type UploadStatus = "pending" | "uploading" | "success" | "error";
 interface UploadState {
@@ -158,7 +159,7 @@ interface UploadState {
 interface UploadProgressListProps {
     uploads: UploadState[];
 }
-declare const UploadProgressList: React.FC<UploadProgressListProps>;
+declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
 
 /**
  * Helper: upload a file to a pre-signed S3 URL with progress + retries.
@@ -171,6 +172,7 @@ interface UseContainersOptions {
 }
 declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
     containers: ContainerDTO[];
+    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
     loading: boolean;
     error: Error | null;
     reload: () => Promise<void>;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum ContainerType {
@@ -102,7 +103,7 @@ interface ContainerUploadPanelProps {
     /** Optional parent container – if set, we query children instead of roots. */
     parentContainerId?: string;
 }
-declare const ContainerUploadPanel: React.FC<ContainerUploadPanelProps>;
+declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
 
 interface DesktopFileIconProps {
     name?: string | null;
@@ -110,10 +111,10 @@ interface DesktopFileIconProps {
     downloadUrl?: string | null;
     /** Double-click / open action */
     onOpen?: () => void;
-    /** Delete action */
-    onDelete?: () => void;
+    /** Delete action (can be async) */
+    onDelete?: () => Promise<void> | void;
 }
-declare const DesktopFileIcon: React.FC<DesktopFileIconProps>;
+declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface UploadContainerProps {
     multiple?: boolean;
@@ -129,20 +130,20 @@ interface UploadContainerProps {
     onUploadComplete?: (file: File, s3Url: string) => void;
     onUploadError?: (file: File, error: Error) => void;
 }
-declare const UploadContainer: React.FC<UploadContainerProps>;
+declare const UploadContainer: React__default.FC<UploadContainerProps>;
 
 interface UploadDropzoneProps {
     isDragging: boolean;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
     /** Extra className so you can make this the root wrapper */
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     /** Custom content to render inside the dropzone */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const UploadDropzone: React.FC<UploadDropzoneProps>;
+declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
 
 type UploadStatus = "pending" | "uploading" | "success" | "error";
 interface UploadState {
@@ -158,7 +159,7 @@ interface UploadState {
 interface UploadProgressListProps {
     uploads: UploadState[];
 }
-declare const UploadProgressList: React.FC<UploadProgressListProps>;
+declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
 
 /**
  * Helper: upload a file to a pre-signed S3 URL with progress + retries.
@@ -171,6 +172,7 @@ interface UseContainersOptions {
 }
 declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
     containers: ContainerDTO[];
+    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
     loading: boolean;
     error: Error | null;
     reload: () => Promise<void>;

package/dist/index.js

@@ -437,6 +437,14 @@ var UploadProgressList = ({
                 },
                 children: [
                   /* @__PURE__ */ jsx2("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "uploading" && /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      className: "position-absolute top-50 start-50 translate-middle",
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ jsx2("div", { className: "spinner-border spinner-border-sm text-primary" })
+                    }
+                  ),
                   u.status === "error" && /* @__PURE__ */ jsx2("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
                 ]
               }
@@ -477,8 +485,91 @@ var UploadProgressList = ({
 };
 
 // src/components/DesktopFileIcon.tsx
+import {
+  faFile,
+  faFilePdf,
+  faFileImage,
+  faFileWord,
+  faFileExcel,
+  faFileVideo,
+  faFileAudio,
+  faFileArchive,
+  faFileCode
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useRef, useState as useState2 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function getFileExtension(name) {
+  if (!name) return null;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === name.length - 1) return null;
+  return name.substring(lastDot + 1).toLowerCase();
+}
+function getIconForExtension(ext) {
+  if (!ext) return faFile;
+  switch (ext) {
+    // Images
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+    case "bmp":
+      return faFileImage;
+    // PDF
+    case "pdf":
+      return faFilePdf;
+    // Word docs
+    case "doc":
+    case "docx":
+      return faFileWord;
+    // Excel / spreadsheets
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return faFileExcel;
+    // Archives
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+      return faFileArchive;
+    // Video
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+      return faFileVideo;
+    // Audio
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+      return faFileAudio;
+    // Code files
+    case "js":
+    case "ts":
+    case "tsx":
+    case "jsx":
+    case "json":
+    case "html":
+    case "css":
+    case "cs":
+    case "java":
+    case "py":
+    case "rb":
+    case "php":
+    case "sql":
+    case "xml":
+    case "yml":
+    case "yaml":
+      return faFileCode;
+    default:
+      return faFile;
+  }
+}
 var DesktopFileIcon = ({
   name,
   sizeBytes,
@@ -490,9 +581,11 @@ var DesktopFileIcon = ({
     null
   );
   const [isHovered, setIsHovered] = useState2(false);
+  const [isDeleting, setIsDeleting] = useState2(false);
   const iconRef = useRef(null);
   const menuRef = useRef(null);
   const handleDoubleClick = () => {
+    if (isDeleting) return;
     if (onOpen) {
       onOpen();
       return;
@@ -509,13 +602,14 @@ var DesktopFileIcon = ({
     }
   };
   const handleContextMenu = (e) => {
+    if (isDeleting) return;
     e.preventDefault();
     setContextMenuPos({ x: e.clientX, y: e.clientY });
   };
   const closeMenu = () => setContextMenuPos(null);
   const handleDownload = () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     const a = document.createElement("a");
     a.href = downloadUrl;
     a.download = name ?? "";
@@ -527,18 +621,26 @@ var DesktopFileIcon = ({
   };
   const handleCopyUrl = async () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     try {
       await navigator.clipboard?.writeText(downloadUrl);
     } catch (err) {
       console.error("Failed to copy URL", err);
     }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
     closeMenu();
-    onDelete?.();
+    if (!onDelete) return;
+    try {
+      setIsDeleting(true);
+      await Promise.resolve(onDelete());
+    } catch (err) {
+      console.error("Delete failed", err);
+    }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  const ext = getFileExtension(name);
+  const iconToRender = getIconForExtension(ext);
   useEffect(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
@@ -561,48 +663,43 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-primary-subtle" : ""),
         style: {
           width: 96,
-          cursor: "pointer",
+          cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease"
+          transition: "background-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
         title: name ?? void 0,
         onClick: () => {
-          if (contextMenuPos) {
-            closeMenu();
-          }
+          if (contextMenuPos) closeMenu();
         },
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
               },
-              children: /* @__PURE__ */ jsx3("i", { className: "bi bi-file-earmark fs-2" })
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              className: "small text-center text-truncate",
-              style: { width: "100%" },
-              children: name
+              children: [
+                /* @__PURE__ */ jsx3(FontAwesomeIcon, { icon: iconToRender, className: "fs-2" }),
+                isDeleting && /* @__PURE__ */ jsx3("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ jsx3("div", { className: "spinner-border spinner-border-sm text-danger" }) })
+              ]
             }
           ),
+          /* @__PURE__ */ jsx3("div", { className: "small text-center text-truncate", style: { width: "100%" }, children: name }),
           formattedSize && /* @__PURE__ */ jsx3("small", { className: "text-muted mt-1", children: formattedSize })
         ]
       }
     ),
-    contextMenuPos && /* @__PURE__ */ jsxs2(
+    contextMenuPos && !isDeleting && /* @__PURE__ */ jsxs2(
       "div",
       {
         ref: menuRef,
@@ -711,25 +808,59 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ jsx4("div", { className: "w-100 mb-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) }),
         /* @__PURE__ */ jsx4(
           "div",
           {
             className: "w-100 d-flex flex-wrap gap-4 align-content-start",
             style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ jsx4("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
+            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ jsx4("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                style: {
+                  minHeight: "160px",
+                  border: "2px dashed #ccc",
+                  borderRadius: "10px",
+                  padding: "20px",
+                  cursor: "pointer",
+                  transition: "background 0.12s, border-color 0.12s"
+                },
+                onClick: () => document.getElementById("filePicker")?.click(),
+                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    "input",
+                    {
+                      id: "filePicker",
+                      type: "file",
+                      multiple: true,
+                      hidden: true,
+                      onChange: (e) => {
+                        if (!e.target.files) return;
+                        onFilesSelected?.(e.target.files);
+                        startUploadsIfNeeded(e.target.files);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
+                  /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
+                ]
+              }
+            ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
               DesktopFileIcon,
               {
                 name: file.Name,
-                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
-                downloadUrl: file.PublicUrl ?? null,
+                sizeBytes: file.FileSize,
+                downloadUrl: file.PublicUrl,
                 onOpen: () => handleExistingFileOpen(file),
-                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+                onDelete: () => onDeleteFile?.(file)
               },
               file.Id
             ))
           }
-        ),
-        /* @__PURE__ */ jsx4("div", { className: "w-100 mt-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) })
+        )
       ]
     }
   );
@@ -761,6 +892,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
   }, [apiBaseUrl, parentId]);
   return {
     containers,
+    setContainers,
     loading,
     error,
     reload: load
@@ -774,17 +906,18 @@ var ContainerUploadPanel = ({
   storageApiBaseUrl,
   parentContainerId
 }) => {
-  const { containers, reload, loading } = UseContainers({
+  const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
   const getPresignedUrl = async (file) => {
     const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
     const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
-      encodeURIComponent(file.type)
+      encodeURIComponent(contentType)
     );
     async function getPresignedUrlWithRetry(container, attempts = 3) {
       let lastError;
@@ -809,13 +942,6 @@ var ContainerUploadPanel = ({
   const handleUploadError = (file, err) => {
     console.error("Upload failed:", file.name, err);
   };
-  const handleOnDeleteFile = async (file) => {
-    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
-    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
-    await sdkDb.container.DeleteContainer(file.Id);
-    await sdkS3.s3.DeleteS3(file);
-    await reload();
-  };
   const handleExistingFileClick = (file) => {
     const a = document.createElement("a");
     a.href = file.PublicUrl ?? "";
@@ -826,6 +952,13 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
+  const handleDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
   return /* @__PURE__ */ jsx5(
     UploadContainer,
     {
@@ -836,7 +969,7 @@ var ContainerUploadPanel = ({
       getPresignedUrl,
       onUploadComplete: handleUploadComplete,
       onUploadError: handleUploadError,
-      onDeleteFile: handleOnDeleteFile
+      onDeleteFile: handleDeleteFile
     }
   );
 };
@@ -867,8 +1000,8 @@ function HomeContent() {
     user && /* @__PURE__ */ jsx6(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://localhost:5001",
-        storageApiBaseUrl: "https://localhost:5001"
+        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -37,8 +37,10 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.958.0",
     "@aws-sdk/s3-request-presigner": "^3.958.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@sparkstudio/authentication-ui": "^1.0.29",
-    "@sparkstudio/common-ui": "^1.0.5",
+    "@sparkstudio/common-ui": "^1.0.11",
     "barrelsby": "^2.8.1"
   },
   "devDependencies": {