@maas/payload-plugin-media-cloud 0.0.0

package/dist/components/upload-handler/upload-handler.js

@@ -0,0 +1,178 @@
+'use client';
+
+
+import { MediaCloudError } from "../../types/errors.js";
+import { useErrorHandler } from "../../hooks/useErrorHandler.js";
+import { getFileType, isVideo, sanitizeFilename } from "../../utils/file.js";
+import { emitter } from "../../hooks/useEmitter.js";
+import * as upchunk from "@mux/upchunk";
+import * as tus from "tus-js-client";
+import { toast } from "@payloadcms/ui";
+import { createClientUploadHandler } from "@payloadcms/plugin-cloud-storage/client";
+
+//#region src/components/upload-handler/upload-handler.tsx
+const { logError, throwError } = useErrorHandler();
+const MUX_CHUNK_SIZE = 30720;
+const TUS_CHUNK_SIZE = 1024 * 1024;
+const TUS_RETRY_DELAYS = [
+	0,
+	1e3,
+	2e3,
+	5e3
+];
+/**
+* Utility function to parse upload ID from URL
+* @param uploadUrl - The upload URL to parse
+* @returns The extracted upload ID or empty string if parsing fails
+*/
+function parseUploadId(uploadUrl) {
+	if (!uploadUrl) {
+		logError(MediaCloudError.UPLOAD_NO_URL);
+		return "";
+	}
+	const url = new URL(uploadUrl);
+	return url.pathname.split("/").pop() || "";
+}
+/**
+* Handles Mux video upload with progress tracking
+* @param args - The upload arguments including file, server URL, and callbacks
+* @returns Promise that resolves to upload result or null if upload fails
+*/
+async function muxUpload(args) {
+	const { file, serverURL, apiRoute, mimeType, updateFilename } = args;
+	const filename = sanitizeFilename(file.name);
+	const getUploadUrlEndpoint = `${serverURL}${apiRoute}/mux/upload`;
+	const getAssetEndpoint = `${serverURL}${apiRoute}/mux/asset`;
+	updateFilename(filename);
+	try {
+		const response = await fetch(getUploadUrlEndpoint, {
+			body: JSON.stringify({
+				filename,
+				mimeType
+			}),
+			credentials: "include",
+			method: "POST",
+			headers: { "Content-Type": "application/json" }
+		});
+		const { url, uploadId } = await response.json();
+		const uploader = await upchunk.createUpload({
+			endpoint: url,
+			file,
+			chunkSize: MUX_CHUNK_SIZE
+		});
+		emitter.emit("add-upload", {
+			id: uploadId,
+			filename,
+			polling: false,
+			pollingUrl: getAssetEndpoint
+		});
+		uploader.on("error", () => {
+			logError(MediaCloudError.MUX_UPLOAD_ERROR);
+			toast.error("Video upload failed");
+			emitter.emit("remove-upload", { id: uploadId });
+		});
+		uploader.on("progress", (progress) => {
+			emitter.emit("update-upload", {
+				id: uploadId,
+				progress: progress.detail
+			});
+		});
+		uploader.on("success", () => {
+			emitter.emit("upload-completed", { id: uploadId });
+		});
+		return {
+			uploadId,
+			mimeType,
+			storage: "mux"
+		};
+	} catch (_error) {
+		logError(MediaCloudError.MUX_DIRECT_UPLOAD_ERROR);
+		toast.error("Video upload failed");
+		return null;
+	}
+}
+/**
+* Handles TUS file upload with resumable capabilities
+* @param args - The upload arguments including file, server URL, and callbacks
+* @returns Promise that resolves to upload result or null if upload fails
+*/
+async function tusUpload(args) {
+	const { apiRoute, serverURL, file, mimeType, updateFilename } = args;
+	const filename = file.name;
+	const filetype = file.type;
+	const filesize = file.size.toString();
+	return new Promise((resolve) => {
+		const upload = new tus.Upload(file, {
+			endpoint: `${serverURL}${apiRoute}/uploads`,
+			retryDelays: TUS_RETRY_DELAYS,
+			chunkSize: TUS_CHUNK_SIZE,
+			metadata: {
+				filename,
+				filetype,
+				filesize,
+				contentType: filetype,
+				contentDisposition: "inline",
+				contentLength: filesize
+			},
+			onError: () => {
+				logError(MediaCloudError.TUS_UPLOAD_ERROR);
+				toast.error("File upload failed");
+				resolve(null);
+			},
+			onProgress: (bytesUploaded, bytesTotal) => {
+				const percentage = Math.round(bytesUploaded / bytesTotal * 100);
+				const uploadId = parseUploadId(upload?.url);
+				emitter.emit("update-upload", {
+					id: uploadId,
+					progress: percentage
+				});
+			},
+			onSuccess: () => {
+				const uploadId = parseUploadId(upload?.url);
+				emitter.emit("upload-completed", { id: uploadId });
+			},
+			onUploadUrlAvailable: () => {
+				const uploadId = parseUploadId(upload?.url);
+				updateFilename(uploadId);
+				emitter.emit("add-upload", {
+					id: uploadId,
+					filename
+				});
+				resolve({
+					uploadId,
+					mimeType,
+					storage: "s3"
+				});
+			}
+		});
+		upload.start();
+	});
+}
+const UploadHandler = createClientUploadHandler({ handler: async (args) => {
+	const { serverURL, apiRoute, file, updateFilename } = args;
+	try {
+		const mimeType = await getFileType(file);
+		if (!mimeType) {
+			throwError(MediaCloudError.FILE_TYPE_UNKNOWN);
+			throw new Error();
+		}
+		const isVideoFile = await isVideo(file);
+		const uploadArgs = {
+			file,
+			serverURL,
+			apiRoute,
+			mimeType,
+			updateFilename
+		};
+		if (isVideoFile) return await muxUpload(uploadArgs);
+		else return await tusUpload(uploadArgs);
+	} catch (_error) {
+		logError(MediaCloudError.UPLOAD_HANDLER_ERROR);
+		toast.error("Upload failed");
+		return null;
+	}
+} });
+
+//#endregion
+export { UploadHandler };
+//# sourceMappingURL=upload-handler.js.map

package/dist/components/upload-handler/upload-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-handler.js","names":["uploadUrl?: string | null","args: UploadArgs","uploadArgs: UploadArgs"],"sources":["../../../src/components/upload-handler/upload-handler.tsx"],"sourcesContent":["'use client'\n\nimport * as upchunk from '@mux/upchunk'\nimport * as tus from 'tus-js-client'\n\nimport { toast } from '@payloadcms/ui'\nimport { createClientUploadHandler } from '@payloadcms/plugin-cloud-storage/client'\n\nimport { MediaCloudError } from '../../types/errors'\nimport { emitter } from '../../hooks/useEmitter'\nimport { useErrorHandler } from '../../hooks/useErrorHandler'\nimport { isVideo, getFileType, sanitizeFilename } from '../../utils/file'\n\ninterface UploadArgs {\n  serverURL: string\n  apiRoute: string\n  file: File\n  mimeType: string\n  updateFilename: (filename: string) => void\n}\n\ninterface UploadResult {\n  uploadId: string\n  mimeType: string\n  storage: 'mux' | 's3'\n}\n\ninterface MuxCreateUploadResponse {\n  url: string\n  uploadId: string\n}\n\nconst { logError, throwError } = useErrorHandler()\n\nconst MUX_CHUNK_SIZE = 30720\nconst TUS_CHUNK_SIZE = 1024 * 1024\nconst TUS_RETRY_DELAYS = [0, 1000, 2000, 5000]\n\n/**\n * Utility function to parse upload ID from URL\n * @param uploadUrl - The upload URL to parse\n * @returns The extracted upload ID or empty string if parsing fails\n */\nfunction parseUploadId(uploadUrl?: string | null): string {\n  if (!uploadUrl) {\n    logError(MediaCloudError.UPLOAD_NO_URL)\n    return ''\n  }\n  const url = new URL(uploadUrl)\n  return url.pathname.split('/').pop() || ''\n}\n\n/**\n * Handles Mux video upload with progress tracking\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function muxUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { file, serverURL, apiRoute, mimeType, updateFilename } = args\n\n  const filename = sanitizeFilename(file.name)\n  const getUploadUrlEndpoint = `${serverURL}${apiRoute}/mux/upload`\n  const getAssetEndpoint = `${serverURL}${apiRoute}/mux/asset`\n\n  updateFilename(filename)\n\n  try {\n    // Request upload URL from Mux\n    const response = await fetch(getUploadUrlEndpoint, {\n      body: JSON.stringify({ filename, mimeType }),\n      credentials: 'include',\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const { url, uploadId } = (await response.json()) as MuxCreateUploadResponse\n\n    // Create upchunk uploader\n    const uploader = await upchunk.createUpload({\n      endpoint: url,\n      file,\n      chunkSize: MUX_CHUNK_SIZE,\n    })\n\n    // Add upload to tracker\n    emitter.emit('add-upload', {\n      id: uploadId,\n      filename,\n      polling: false,\n      pollingUrl: getAssetEndpoint,\n    })\n\n    // Set up event handlers\n    uploader.on('error', () => {\n      logError(MediaCloudError.MUX_UPLOAD_ERROR)\n      toast.error('Video upload failed')\n      emitter.emit('remove-upload', { id: uploadId })\n    })\n\n    uploader.on('progress', (progress) => {\n      emitter.emit('update-upload', {\n        id: uploadId,\n        progress: progress.detail,\n      })\n    })\n\n    uploader.on('success', () => {\n      emitter.emit('upload-completed', { id: uploadId })\n    })\n\n    return {\n      uploadId,\n      mimeType,\n      storage: 'mux',\n    }\n  } catch (_error) {\n    logError(MediaCloudError.MUX_DIRECT_UPLOAD_ERROR)\n    toast.error('Video upload failed')\n    return null\n  }\n}\n\n/**\n * Handles TUS file upload with resumable capabilities\n * @param args - The upload arguments including file, server URL, and callbacks\n * @returns Promise that resolves to upload result or null if upload fails\n */\nasync function tusUpload(args: UploadArgs): Promise<UploadResult | null> {\n  const { apiRoute, serverURL, file, mimeType, updateFilename } = args\n\n  const filename = file.name\n  const filetype = file.type\n  const filesize = file.size.toString()\n\n  return new Promise((resolve) => {\n    const upload = new tus.Upload(file, {\n      endpoint: `${serverURL}${apiRoute}/uploads`,\n      retryDelays: TUS_RETRY_DELAYS,\n      chunkSize: TUS_CHUNK_SIZE,\n      metadata: {\n        filename,\n        filetype,\n        filesize,\n        contentType: filetype,\n        contentDisposition: 'inline',\n        contentLength: filesize,\n      },\n      onError: () => {\n        logError(MediaCloudError.TUS_UPLOAD_ERROR)\n        toast.error('File upload failed')\n        resolve(null)\n      },\n      onProgress: (bytesUploaded, bytesTotal) => {\n        const percentage = Math.round((bytesUploaded / bytesTotal) * 100)\n        const uploadId = parseUploadId(upload?.url)\n        emitter.emit('update-upload', {\n          id: uploadId,\n          progress: percentage,\n        })\n      },\n      onSuccess: () => {\n        const uploadId = parseUploadId(upload?.url)\n        emitter.emit('upload-completed', { id: uploadId })\n      },\n      onUploadUrlAvailable: () => {\n        const uploadId = parseUploadId(upload?.url)\n        updateFilename(uploadId)\n        emitter.emit('add-upload', { id: uploadId, filename })\n        resolve({\n          uploadId,\n          mimeType,\n          storage: 's3',\n        })\n      },\n    })\n\n    upload.start()\n  })\n}\n\nexport const UploadHandler = createClientUploadHandler({\n  handler: async (args) => {\n    const { serverURL, apiRoute, file, updateFilename } = args\n\n    try {\n      const mimeType = await getFileType(file)\n\n      if (!mimeType) {\n        throwError(MediaCloudError.FILE_TYPE_UNKNOWN)\n        throw new Error() // This will never execute but satisfies TypeScript\n      }\n\n      const isVideoFile = await isVideo(file)\n\n      const uploadArgs: UploadArgs = {\n        file,\n        serverURL,\n        apiRoute,\n        mimeType,\n        updateFilename,\n      }\n\n      if (isVideoFile) {\n        return await muxUpload(uploadArgs)\n      } else {\n        return await tusUpload(uploadArgs)\n      }\n    } catch (_error) {\n      logError(MediaCloudError.UPLOAD_HANDLER_ERROR)\n      toast.error('Upload failed')\n      return null\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/upload-manager/index.d.ts

@@ -0,0 +1,2 @@
+import { UploadManagerProvider, useUploadManagerContext } from "./upload-manager.js";
+export { UploadManagerProvider, useUploadManagerContext };

package/dist/components/upload-manager/index.js

@@ -0,0 +1,3 @@
+import { UploadManagerProvider, useUploadManagerContext } from "./upload-manager.js";
+
+export { UploadManagerProvider, useUploadManagerContext };

package/dist/components/upload-manager/upload-manager-DN4RrmYB.css

@@ -0,0 +1,204 @@
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.upload-manager {
+  position: fixed;
+  overflow: hidden;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  max-height: 500px;
+  margin: 2.25rem;
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: var(--style-radius-m);
+  box-shadow: var(--box-shadow-lg);
+  z-index: 1024;
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-manager__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-50);
+
+  & h4 {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--theme-text);
+  }
+}
+
+.upload-manager__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-25);
+
+  & .upload-tab {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    background: none;
+    border: none;
+    color: var(--theme-text-dim);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+      background: var(--theme-elevation-50);
+      color: var(--theme-text);
+    }
+
+    &[data-active='true'] {
+      color: var(--theme-success-500);
+      border-bottom-color: var(--theme-success-500);
+      background: var(--theme-bg);
+    }
+  }
+}
+
+.upload-manager__content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 300px;
+  padding: 0;
+
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    & li {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--theme-elevation-50);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &[data-status='uploading'] {
+        background: var(--theme-bg);
+      }
+
+      &[data-status='processing'] {
+        background: var(--theme-warning-50);
+      }
+
+      &[data-status='completed'] {
+        background: var(--theme-success-50);
+      }
+    }
+  }
+
+  & .upload-empty-state {
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--theme-text-dim);
+    font-size: 0.875rem;
+    margin: 0;
+  }
+}
+
+.upload-progress-bar {
+  height: 3px;
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  & .upload-progress {
+    height: 100%;
+    background: var(--theme-success-500);
+    width: calc(var(--progress) * 100%);
+    transition: width 0.3s ease;
+    border-radius: inherit;
+
+    &[data-active='true'] {
+      background: var(--theme-warning-500);
+      animation: pulse 1.5s ease-in-out infinite;
+      width: 100%;
+    }
+  }
+}
+
+.upload-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+
+  & .upload-filename {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-text);
+    flex: 1;
+    margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  & .upload-meta {
+    font-size: 0.75rem;
+    color: var(--theme-text-dim);
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+}
+
+.upload-manager__file {
+  & .upload-manager__file--polling {
+    animation: pulse 2s ease-in-out infinite;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
+    background-size: 200% 100%;
+    animation:
+      pulse 2s ease-in-out infinite,
+      shimmer 3s ease-in-out infinite;
+  }
+}
+
+.upload-manager__footer {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-50);
+  display: flex;
+  justify-content: center;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .upload-manager {
+    width: calc(100vw - 2rem);
+    right: 1rem;
+    left: 1rem;
+  }
+}
+
+
+/*# sourceMappingURL=upload-manager-DN4RrmYB.css.map*/

package/dist/components/upload-manager/upload-manager-DN4RrmYB.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-manager-DN4RrmYB.css","names":[],"sources":["../../../src/components/upload-manager/upload-manager.css"],"sourcesContent":["@keyframes pulse {\n  0% {\n    opacity: 0.6;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n.upload-manager {\n  position: fixed;\n  overflow: hidden;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 400px;\n  max-height: 500px;\n  margin: 2.25rem;\n  background: var(--theme-bg);\n  border: 1px solid var(--theme-elevation-100);\n  border-radius: var(--style-radius-m);\n  box-shadow: var(--box-shadow-lg);\n  z-index: 1024;\n  display: flex;\n  flex-direction: column;\n}\n\n.upload-manager__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1rem;\n  border-bottom: 1px solid var(--theme-elevation-100);\n  background: var(--theme-elevation-50);\n\n  & h4 {\n    margin: 0;\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--theme-text);\n  }\n}\n\n.upload-manager__tabs {\n  display: flex;\n  border-bottom: 1px solid var(--theme-elevation-100);\n  background: var(--theme-elevation-25);\n\n  & .upload-tab {\n    flex: 1;\n    padding: 0.5rem 0.75rem;\n    background: none;\n    border: none;\n    color: var(--theme-text-dim);\n    font-size: 0.75rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    border-bottom: 2px solid transparent;\n\n    &:hover {\n      background: var(--theme-elevation-50);\n      color: var(--theme-text);\n    }\n\n    &[data-active='true'] {\n      color: var(--theme-success-500);\n      border-bottom-color: var(--theme-success-500);\n      background: var(--theme-bg);\n    }\n  }\n}\n\n.upload-manager__content {\n  flex: 1;\n  overflow-y: auto;\n  max-height: 300px;\n  padding: 0;\n\n  & ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    & li {\n      padding: 0.75rem 1rem;\n      border-bottom: 1px solid var(--theme-elevation-50);\n\n      &:last-child {\n        border-bottom: none;\n      }\n\n      &[data-status='uploading'] {\n        background: var(--theme-bg);\n      }\n\n      &[data-status='processing'] {\n        background: var(--theme-warning-50);\n      }\n\n      &[data-status='completed'] {\n        background: var(--theme-success-50);\n      }\n    }\n  }\n\n  & .upload-empty-state {\n    padding: 2rem 1rem;\n    text-align: center;\n    color: var(--theme-text-dim);\n    font-size: 0.875rem;\n    margin: 0;\n  }\n}\n\n.upload-progress-bar {\n  height: 3px;\n  background: var(--theme-elevation-100);\n  border-radius: 2px;\n  overflow: hidden;\n  position: relative;\n\n  & .upload-progress {\n    height: 100%;\n    background: var(--theme-success-500);\n    width: calc(var(--progress) * 100%);\n    transition: width 0.3s ease;\n    border-radius: inherit;\n\n    &[data-active='true'] {\n      background: var(--theme-warning-500);\n      animation: pulse 1.5s ease-in-out infinite;\n      width: 100%;\n    }\n  }\n}\n\n.upload-info {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n\n  & .upload-filename {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--theme-text);\n    flex: 1;\n    margin-right: 0.5rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  & .upload-meta {\n    font-size: 0.75rem;\n    color: var(--theme-text-dim);\n    font-weight: 500;\n    flex-shrink: 0;\n  }\n}\n\n.upload-manager__file {\n  & .upload-manager__file--polling {\n    animation: pulse 2s ease-in-out infinite;\n    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);\n    background-size: 200% 100%;\n    animation:\n      pulse 2s ease-in-out infinite,\n      shimmer 3s ease-in-out infinite;\n  }\n}\n\n.upload-manager__footer {\n  padding: 0.75rem 1rem;\n  border-top: 1px solid var(--theme-elevation-100);\n  background: var(--theme-elevation-50);\n  display: flex;\n  justify-content: center;\n}\n\n// Responsive adjustments\n@media (max-width: 768px) {\n  .upload-manager {\n    width: calc(100vw - 2rem);\n    right: 1rem;\n    left: 1rem;\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/components/upload-manager/upload-manager.css

@@ -0,0 +1,201 @@
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.upload-manager {
+  position: fixed;
+  overflow: hidden;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  max-height: 500px;
+  margin: 2.25rem;
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: var(--style-radius-m);
+  box-shadow: var(--box-shadow-lg);
+  z-index: 1024;
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-manager__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-50);
+
+  & h4 {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--theme-text);
+  }
+}
+
+.upload-manager__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-25);
+
+  & .upload-tab {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    background: none;
+    border: none;
+    color: var(--theme-text-dim);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+      background: var(--theme-elevation-50);
+      color: var(--theme-text);
+    }
+
+    &[data-active='true'] {
+      color: var(--theme-success-500);
+      border-bottom-color: var(--theme-success-500);
+      background: var(--theme-bg);
+    }
+  }
+}
+
+.upload-manager__content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 300px;
+  padding: 0;
+
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    & li {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--theme-elevation-50);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &[data-status='uploading'] {
+        background: var(--theme-bg);
+      }
+
+      &[data-status='processing'] {
+        background: var(--theme-warning-50);
+      }
+
+      &[data-status='completed'] {
+        background: var(--theme-success-50);
+      }
+    }
+  }
+
+  & .upload-empty-state {
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--theme-text-dim);
+    font-size: 0.875rem;
+    margin: 0;
+  }
+}
+
+.upload-progress-bar {
+  height: 3px;
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  & .upload-progress {
+    height: 100%;
+    background: var(--theme-success-500);
+    width: calc(var(--progress) * 100%);
+    transition: width 0.3s ease;
+    border-radius: inherit;
+
+    &[data-active='true'] {
+      background: var(--theme-warning-500);
+      animation: pulse 1.5s ease-in-out infinite;
+      width: 100%;
+    }
+  }
+}
+
+.upload-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+
+  & .upload-filename {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--theme-text);
+    flex: 1;
+    margin-right: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  & .upload-meta {
+    font-size: 0.75rem;
+    color: var(--theme-text-dim);
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+}
+
+.upload-manager__file {
+  & .upload-manager__file--polling {
+    animation: pulse 2s ease-in-out infinite;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
+    background-size: 200% 100%;
+    animation:
+      pulse 2s ease-in-out infinite,
+      shimmer 3s ease-in-out infinite;
+  }
+}
+
+.upload-manager__footer {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--theme-elevation-100);
+  background: var(--theme-elevation-50);
+  display: flex;
+  justify-content: center;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .upload-manager {
+    width: calc(100vw - 2rem);
+    right: 1rem;
+    left: 1rem;
+  }
+}

package/dist/components/upload-manager/upload-manager.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+
+//#region src/components/upload-manager/upload-manager.d.ts
+interface Upload {
+  id: string;
+  filename: string;
+  progress: number;
+  error?: string;
+  polling?: boolean;
+  pollingUrl?: string;
+  status?: 'uploading' | 'processing' | 'completed';
+}
+interface UploadManagerContextType {
+  showUploadManager?: boolean;
+  activeUploads: Upload[];
+  addUpload: (args: AddUploadArgs) => void;
+  updateUpload: (args: UpdateUploadArgs) => void;
+}
+interface UploadManagerProviderArgs {
+  children: React.ReactNode;
+}
+interface AddUploadArgs {
+  id: string;
+  filename: string;
+  polling?: boolean;
+  pollingUrl?: string;
+}
+interface UpdateUploadArgs {
+  id: string;
+  progress: number;
+  polling?: boolean;
+}
+/**
+ * Provider component for upload management context
+ * @param args - Arguments including children to wrap
+ * @returns JSX element providing upload management context
+ */
+declare function UploadManagerProvider(args: UploadManagerProviderArgs): React.JSX.Element;
+declare const useUploadManagerContext: () => UploadManagerContextType;
+//#endregion
+export { UploadManagerProvider, useUploadManagerContext };
+//# sourceMappingURL=upload-manager.d.ts.map