@strapi/upload 5.53.0 → 5.55.0

package/dist/admin/future/components/UploadProgressDialog.mjs

@@ -1,697 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
-import { Flex, IconButton, TextButton, Typography } from '@strapi/design-system';
-import { ChevronDown, Clock, ArrowsCounterClockwise, CrossCircle, MinusCircle, Cross, Check, Upload, WarningCircle, Information, CheckCircle, Sparkle } from '@strapi/icons';
-import { useIntl } from 'react-intl';
-import { styled, keyframes } from 'styled-components';
-import { useRetryCancelledFilesMutation, abortUpload } from '../services/api.mjs';
-import { useTypedDispatch, useTypedSelector } from '../store/hooks.mjs';
-import { closeUploadProgress, selectAggregateProgress, selectReportsByteProgress, selectCountBasedProgress, selectMetadataProgress, selectIsGeneratingMetadata, selectMetadataOutcome, cancelUpload, toggleMinimize } from '../store/uploadProgress.mjs';
-import { getTranslationKey } from '../utils/translations.mjs';
-import { Drawer } from './Drawer.mjs';
-import { TruncatedText } from './TruncatedText.mjs';
-
-/* -------------------------------------------------------------------------------------------------
- * DialogHeader
- * -----------------------------------------------------------------------------------------------*/ const HeaderStatusMessage = ({ title, subtitle, metadataSubtitle })=>{
-    return /*#__PURE__*/ jsxs(Flex, {
-        direction: "column",
-        alignItems: "flex-start",
-        paddingLeft: 2,
-        paddingRight: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
-        children: [
-            /*#__PURE__*/ jsx(Drawer.Title, {
-                children: /*#__PURE__*/ jsx(Typography, {
-                    variant: "omega",
-                    children: title
-                })
-            }),
-            /*#__PURE__*/ jsx(Drawer.Description, {
-                children: /*#__PURE__*/ jsx(Typography, {
-                    variant: "pi",
-                    textColor: "neutral600",
-                    children: subtitle
-                })
-            }),
-            metadataSubtitle && /*#__PURE__*/ jsx(Typography, {
-                variant: "pi",
-                textColor: "neutral600",
-                children: metadataSubtitle
-            })
-        ]
-    });
-};
-const HeaderStatusIcon = styled(Flex)`
-  align-self: stretch;
-  padding: ${({ theme })=>theme.spaces[3]};
-  border-radius: ${({ theme })=>`${theme.borderRadius} 0 0 ${theme.borderRadius}`};
-
-  > svg {
-    height: 24px;
-    width: 24px;
-  }
-`;
-const HeaderStatusWrapper = styled(Flex)`
-  align-items: center;
-`;
-const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCount, metadataProgress, isGeneratingMetadata, metadataOutcome })=>{
-    const { formatMessage } = useIntl();
-    // Completion is upload-driven, so the terminal header can appear while metadata is
-    // still generating — the subtitle keeps ticking underneath until it settles.
-    //
-    // Gated on work actually being in flight rather than on `progress < 100`: in a
-    // sequential batch the percentage touches 100% between files, which would blink the
-    // subtitle out and back in on every upload.
-    //
-    // Once the phase settles the line is not dropped but replaced with the outcome, so the
-    // header keeps confirming what happened instead of silently losing the message.
-    const metadataSubtitle = (()=>{
-        if (metadataProgress !== null && isGeneratingMetadata) {
-            return formatMessage({
-                id: getTranslationKey('upload.progress.generatingMetadata.withCount'),
-                defaultMessage: 'Generating metadata with AI ({percentage}%)'
-            }, {
-                percentage: metadataProgress
-            });
-        }
-        if (metadataOutcome === null) {
-            return undefined;
-        }
-        // Only `generated` rows had metadata written, so only they can be reported as a
-        // success. With none, there is nothing to confirm — an all-skipped batch of
-        // non-images would otherwise read as "generated on 0 files". Per-row sublines
-        // already spell out skipped and failed outcomes.
-        if (metadataOutcome.generated === 0) {
-            return undefined;
-        }
-        if (metadataOutcome.failed > 0) {
-            return formatMessage({
-                id: getTranslationKey('upload.progress.metadataGenerated.withFailures'),
-                defaultMessage: '{generatedCount} generated, {failedCount} failed'
-            }, {
-                generatedCount: metadataOutcome.generated,
-                failedCount: metadataOutcome.failed
-            });
-        }
-        return formatMessage({
-            id: getTranslationKey('upload.progress.metadataGenerated.withCount'),
-            defaultMessage: '{count, plural, one {Metadata successfully generated on # file} other {Metadata successfully generated on # files}}'
-        }, {
-            count: metadataOutcome.generated
-        });
-    })();
-    if (status === 'error') {
-        return /*#__PURE__*/ jsxs(HeaderStatusWrapper, {
-            children: [
-                /*#__PURE__*/ jsx(HeaderStatusIcon, {
-                    background: "danger200",
-                    children: /*#__PURE__*/ jsx(Cross, {
-                        fill: "danger700"
-                    })
-                }),
-                /*#__PURE__*/ jsx(HeaderStatusMessage, {
-                    title: formatMessage({
-                        id: getTranslationKey('upload.progress.failed'),
-                        defaultMessage: 'Upload failed'
-                    }),
-                    subtitle: formatMessage({
-                        id: getTranslationKey('upload.progress.failed.subtitle'),
-                        defaultMessage: 'Please try to upload files again'
-                    })
-                })
-            ]
-        });
-    }
-    if (status === 'success') {
-        const subtitle = errorCount > 0 ? formatMessage({
-            id: getTranslationKey('upload.progress.success.subtitle.withErrors'),
-            defaultMessage: '{successCount} uploaded, {errorCount} failed'
-        }, {
-            successCount: successfulCount,
-            errorCount
-        }) : formatMessage({
-            id: getTranslationKey('upload.progress.success.subtitle'),
-            defaultMessage: '{count} files uploaded successfully'
-        }, {
-            count: successfulCount
-        });
-        return /*#__PURE__*/ jsxs(HeaderStatusWrapper, {
-            children: [
-                /*#__PURE__*/ jsx(HeaderStatusIcon, {
-                    background: "success200",
-                    children: /*#__PURE__*/ jsx(Check, {
-                        fill: "success700"
-                    })
-                }),
-                /*#__PURE__*/ jsx(HeaderStatusMessage, {
-                    title: formatMessage({
-                        id: getTranslationKey('upload.progress.success'),
-                        defaultMessage: 'Upload successful!'
-                    }),
-                    subtitle: subtitle,
-                    metadataSubtitle: metadataSubtitle
-                })
-            ]
-        });
-    }
-    if (status === 'canceled') {
-        return /*#__PURE__*/ jsxs(HeaderStatusWrapper, {
-            children: [
-                /*#__PURE__*/ jsx(HeaderStatusIcon, {
-                    background: "neutral200",
-                    children: /*#__PURE__*/ jsx(MinusCircle, {
-                        fill: "neutral700"
-                    })
-                }),
-                /*#__PURE__*/ jsx(HeaderStatusMessage, {
-                    title: formatMessage({
-                        id: getTranslationKey('upload.progress.canceled'),
-                        defaultMessage: 'Upload canceled'
-                    }),
-                    subtitle: formatMessage({
-                        id: getTranslationKey('upload.progress.canceled.subtitle'),
-                        defaultMessage: 'Some files were not uploaded'
-                    }),
-                    metadataSubtitle: metadataSubtitle
-                })
-            ]
-        });
-    }
-    if (status === 'uploading') {
-        // Two separate strings so a locale can position (or omit) the percentage itself.
-        const title = progress === null ? formatMessage({
-            id: getTranslationKey('upload.progress.uploading.indeterminate'),
-            defaultMessage: 'Uploading {total, plural, one {# item} other {# items}}'
-        }, {
-            total: totalFiles
-        }) : formatMessage({
-            id: getTranslationKey('upload.progress.uploading.withCount'),
-            defaultMessage: 'Uploading {total, plural, one {# item} other {# items}} ({percentage}%)'
-        }, {
-            total: totalFiles,
-            percentage: Math.round(progress)
-        });
-        return /*#__PURE__*/ jsxs(HeaderStatusWrapper, {
-            children: [
-                /*#__PURE__*/ jsx(HeaderStatusIcon, {
-                    background: "primary200",
-                    children: /*#__PURE__*/ jsx(Upload, {
-                        fill: "primary700"
-                    })
-                }),
-                /*#__PURE__*/ jsx(HeaderStatusMessage, {
-                    title: title,
-                    metadataSubtitle: metadataSubtitle
-                })
-            ]
-        });
-    }
-    return null;
-};
-const HeaderIconButton = styled(IconButton)`
-  &:hover {
-    background: transparent;
-  }
-`;
-const ChevronWrapper = styled.span`
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-  transform: ${({ $isMinimized })=>$isMinimized ? 'rotate(180deg)' : 'rotate(0deg)'};
-`;
-const HEADER_COLOR_MAP = {
-    uploading: {
-        background: 'primary100'
-    },
-    canceled: {
-        background: 'neutral100'
-    },
-    success: {
-        background: 'success100'
-    },
-    error: {
-        background: 'danger100'
-    }
-};
-const DialogHeader = ({ handleClose })=>{
-    const { formatMessage } = useIntl();
-    const { isMinimized, files, uploadId, totalFiles } = useTypedSelector((state)=>state.uploadProgress);
-    const aggregateProgress = useTypedSelector(selectAggregateProgress);
-    const reportsByteProgress = useTypedSelector(selectReportsByteProgress);
-    const countBasedProgress = useTypedSelector(selectCountBasedProgress);
-    // Byte-weighted when the flow streams bytes (direct-file), else count-based (settled/total).
-    // Both return `null` for an indeterminate header when there's nothing to show yet.
-    const progress = reportsByteProgress ? aggregateProgress : countBasedProgress;
-    const metadataProgress = useTypedSelector(selectMetadataProgress);
-    const isGeneratingMetadata = useTypedSelector(selectIsGeneratingMetadata);
-    const metadataOutcome = useTypedSelector(selectMetadataOutcome);
-    const dispatch = useTypedDispatch();
-    const [retryCancelledFiles] = useRetryCancelledFilesMutation();
-    // The batch is complete once every file has reached a terminal state. Byte-weighted
-    // progress can't be used here because errored/cancelled rows never reach 100%.
-    const isComplete = files.length > 0 && files.every((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled');
-    const isAllUploaded = isComplete;
-    const isAllErrored = isComplete && files.every((f)=>f.status === 'error');
-    const hasCancelledFiles = files.some((f)=>f.status === 'cancelled');
-    const successfulCount = files.filter((f)=>f.status === 'complete').length;
-    const errorCount = files.filter((f)=>f.status === 'error').length;
-    // Success includes partial success (some files succeeded, even if some failed)
-    const isSuccess = isComplete && successfulCount > 0 && !hasCancelledFiles;
-    const status = (()=>{
-        if (isAllErrored) return 'error';
-        if (isSuccess) return 'success';
-        if (hasCancelledFiles) return 'canceled';
-        return 'uploading';
-    })();
-    const handleCancel = ()=>{
-        abortUpload(uploadId);
-        dispatch(cancelUpload());
-    };
-    const handleRetry = async ()=>{
-        try {
-            await retryCancelledFiles().unwrap();
-        } catch  {
-        // Error is already dispatched to store from the API queryFn
-        }
-    };
-    const handleToggleMinimize = ()=>{
-        dispatch(toggleMinimize());
-    };
-    return /*#__PURE__*/ jsxs(Flex, {
-        background: HEADER_COLOR_MAP[status].background,
-        justifyContent: "space-between",
-        margin: 1,
-        hasRadius: true,
-        children: [
-            /*#__PURE__*/ jsx(HeaderStatus, {
-                status: status,
-                progress: progress,
-                totalFiles: totalFiles,
-                successfulCount: successfulCount,
-                errorCount: errorCount,
-                metadataProgress: metadataProgress,
-                isGeneratingMetadata: isGeneratingMetadata,
-                metadataOutcome: metadataOutcome
-            }),
-            /*#__PURE__*/ jsxs(Flex, {
-                gap: 1,
-                children: [
-                    !isAllUploaded && /*#__PURE__*/ jsx(TextButton, {
-                        onClick: handleCancel,
-                        fontWeight: "bold",
-                        children: formatMessage({
-                            id: getTranslationKey('upload.progress.cancel'),
-                            defaultMessage: 'Cancel all'
-                        })
-                    }),
-                    hasCancelledFiles && /*#__PURE__*/ jsx(TextButton, {
-                        onClick: handleRetry,
-                        fontWeight: "bold",
-                        children: formatMessage({
-                            id: getTranslationKey('upload.progress.retry'),
-                            defaultMessage: 'Retry'
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(HeaderIconButton, {
-                        onClick: handleToggleMinimize,
-                        label: formatMessage({
-                            id: getTranslationKey(isMinimized ? 'upload.progress.maximize' : 'upload.progress.minimize'),
-                            defaultMessage: isMinimized ? 'Maximize' : 'Minimize'
-                        }),
-                        variant: "ghost",
-                        children: /*#__PURE__*/ jsx(ChevronWrapper, {
-                            $isMinimized: isMinimized,
-                            children: /*#__PURE__*/ jsx(ChevronDown, {})
-                        })
-                    }),
-                    isComplete && /*#__PURE__*/ jsx(Drawer.CloseButton, {
-                        onClose: handleClose,
-                        label: formatMessage({
-                            id: getTranslationKey('upload.progress.close'),
-                            defaultMessage: 'Close'
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-};
-/* -------------------------------------------------------------------------------------------------
- * UploadProgressDialog
- * -----------------------------------------------------------------------------------------------*/ const ProgressTrack = styled.div`
-  width: 100%;
-  height: ${({ theme })=>theme.spaces[1]};
-  background-color: ${({ theme })=>theme.colors.neutral200};
-  border-radius: 4px;
-  overflow: hidden;
-`;
-const ProgressIndicator = styled.div`
-  height: 100%;
-  width: ${({ $percent })=>$percent}%;
-  background-color: ${({ theme })=>theme.colors.primary700};
-  border-radius: 4px;
-  transition: width 0.15s linear;
-`;
-const DeterminateBar = ({ percent })=>{
-    const clamped = Math.min(100, Math.max(0, Math.round(percent)));
-    return /*#__PURE__*/ jsx(ProgressTrack, {
-        role: "progressbar",
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-valuenow": clamped,
-        children: /*#__PURE__*/ jsx(ProgressIndicator, {
-            $percent: clamped
-        })
-    });
-};
-const INDETERMINATE_INDICATOR_WIDTH = 40;
-/**
- * `translateX` percentages resolve against the *indicator's* own width, not the track's.
- * So -100% is exactly "fully off the left edge" regardless of the width above, and the
- * end offset converts a full track width into those same own-width units. Both ends sit
- * flush off-track, which keeps entry and exit symmetric — a smaller start offset would
- * make the bar pop in already partly visible.
- */ const indeterminateSlide = keyframes`
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(${100 / INDETERMINATE_INDICATOR_WIDTH * 100}%);
-  }
-`;
-const IndeterminateIndicator = styled.div`
-  height: 100%;
-  width: ${INDETERMINATE_INDICATOR_WIDTH}%;
-  background-color: ${({ theme })=>theme.colors.primary700};
-  border-radius: 4px;
-  /* Linear, not an eased curve: the DS easings decelerate to a stop, which on a loop
-     reads as a stall at the wrap point. Constant speed is what makes it read as a sweep. */
-  animation: ${indeterminateSlide} 1.2s linear infinite;
-
-  /* A perpetually moving bar is a vestibular trigger; fall back to a static track fill. */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    width: 100%;
-    opacity: 0.5;
-  }
-`;
-/**
- * Progress bar for work whose completion fraction is genuinely unknowable, rather
- * than merely unknown-yet: the AI metadata endpoint answers in one go, and the URL
- * flow can't report bytes until the server has fetched the file and knows its size.
- *
- * Deliberately omits `aria-valuenow` — that absence is precisely how ARIA conveys
- * an indeterminate progressbar, so assistive tech announces "busy" instead of "0%".
- */ const IndeterminateBar = ()=>{
-    return /*#__PURE__*/ jsx(ProgressTrack, {
-        role: "progressbar",
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        children: /*#__PURE__*/ jsx(IndeterminateIndicator, {})
-    });
-};
-/**
- * Without a floor of zero the row is as wide as its longest filename, which
- * pushes past the panel and gives the dialog a second, horizontal scrollbar
- * instead of truncating.
- *
- * The floor belongs to the name alone: the icon carries its size in SVG
- * attributes, which flex is free to override, so letting it shrink squashes it
- * against a long name instead of truncating the name.
- */ const FileRowName = styled(Flex)`
-  min-width: 0;
-
-  > :first-child {
-    flex-shrink: 0;
-  }
-
-  > :last-child {
-    min-width: 0;
-  }
-`;
-const FileRow = ({ icon, fileName, children })=>{
-    return /*#__PURE__*/ jsxs(Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        justifyContent: "center",
-        gap: 1,
-        width: "100%",
-        children: [
-            /*#__PURE__*/ jsxs(FileRowName, {
-                gap: 2,
-                children: [
-                    icon,
-                    /*#__PURE__*/ jsx(TruncatedText, {
-                        variant: "omega",
-                        fontWeight: "semiBold",
-                        children: fileName
-                    })
-                ]
-            }),
-            children
-        ]
-    });
-};
-/**
- * Icon + subline for a successfully uploaded row, keyed by its metadata phase.
- * `'none'` covers rows that never entered the phase — AI metadata disabled — and
- * renders exactly as before this feature existed. Non-images do enter the phase and
- * land on `skipped`.
- *
- * `skipped` uses a neutral `Information` icon, deliberately distinct from
- * generated/failed/cancelled — skipping is an expected outcome for a non-image, not a
- * problem to flag.
- */ const COMPLETED_ROW_PRESENTATION = {
-    none: {
-        icon: /*#__PURE__*/ jsx(CheckCircle, {
-            fill: "success500"
-        }),
-        message: {
-            id: getTranslationKey('upload.progress.file.uploaded'),
-            defaultMessage: 'Uploaded'
-        }
-    },
-    generating: {
-        icon: /*#__PURE__*/ jsx(Sparkle, {
-            fill: "primary600"
-        }),
-        message: {
-            id: getTranslationKey('upload.progress.file.generatingMetadata'),
-            defaultMessage: 'Uploaded • Generating metadata…'
-        }
-    },
-    generated: {
-        icon: /*#__PURE__*/ jsx(CheckCircle, {
-            fill: "success500"
-        }),
-        message: {
-            id: getTranslationKey('upload.progress.file.metadataGenerated'),
-            defaultMessage: 'Uploaded • Metadata generated'
-        }
-    },
-    skipped: {
-        icon: /*#__PURE__*/ jsx(Information, {
-            fill: "neutral500"
-        }),
-        message: {
-            id: getTranslationKey('upload.progress.file.metadataSkipped'),
-            defaultMessage: 'Upload complete • Metadata generation skipped'
-        }
-    },
-    failed: {
-        icon: /*#__PURE__*/ jsx(WarningCircle, {
-            fill: "warning500"
-        }),
-        message: {
-            id: getTranslationKey('upload.progress.file.metadataFailed'),
-            defaultMessage: 'Upload complete • Metadata generation failed'
-        }
-    }
-};
-const FileRowRenderer = ({ file })=>{
-    const { formatMessage } = useIntl();
-    const isError = file.status === 'error';
-    const isCurrentFile = file.status === 'uploading';
-    const isCompleted = file.status === 'complete';
-    const isCancelled = file.status === 'cancelled';
-    const isQueued = file.status === 'pending';
-    if (isQueued) {
-        // No bar: there is nothing to report yet, and an indeterminate bar would read
-        // as "in progress" on a file the pool has not picked up.
-        return /*#__PURE__*/ jsx(FileRow, {
-            icon: /*#__PURE__*/ jsx(Clock, {
-                fill: "neutral600"
-            }),
-            fileName: file.name,
-            children: /*#__PURE__*/ jsx(Typography, {
-                variant: "pi",
-                textColor: "neutral600",
-                children: formatMessage({
-                    id: getTranslationKey('upload.progress.file.queued'),
-                    defaultMessage: 'Queued'
-                })
-            })
-        });
-    }
-    if (isCurrentFile) {
-        // Determinate only once bytes are actually being reported — a known `size` is not
-        // enough. The two upload flows differ here:
-        //  - the direct-file flow streams real byte counts from XHR, so `uploadedBytes`
-        //    climbs and a determinate bar is meaningful;
-        //  - the URL flow learns the size from the `file:uploading` SSE event but receives
-        //    no incremental counts at all (the next event is `file:complete`), so
-        //    `uploadedBytes` stays 0 for the whole transfer.
-        // Keying off `size` alone froze URL rows at a determinate 0% for the entire upload;
-        // keying off reported bytes keeps them animating until there is a fraction to show.
-        const hasReportedProgress = file.size > 0 && file.uploadedBytes > 0;
-        return /*#__PURE__*/ jsxs(FileRow, {
-            icon: /*#__PURE__*/ jsx(ArrowsCounterClockwise, {
-                fill: "secondary600"
-            }),
-            fileName: file.name,
-            children: [
-                /*#__PURE__*/ jsx(Typography, {
-                    variant: "pi",
-                    textColor: "neutral600",
-                    children: formatMessage({
-                        id: getTranslationKey('upload.progress.file.uploading'),
-                        defaultMessage: 'Uploading...'
-                    })
-                }),
-                hasReportedProgress ? /*#__PURE__*/ jsx(DeterminateBar, {
-                    percent: file.uploadedBytes / file.size * 100
-                }) : /*#__PURE__*/ jsx(IndeterminateBar, {})
-            ]
-        });
-    }
-    if (isError) {
-        return /*#__PURE__*/ jsx(FileRow, {
-            icon: /*#__PURE__*/ jsx(CrossCircle, {
-                fill: "danger500"
-            }),
-            fileName: file.name,
-            children: /*#__PURE__*/ jsx(Typography, {
-                variant: "pi",
-                textColor: "neutral600",
-                children: file.error ? /**
-               * The server may return a machine-readable code (e.g. `FileTooBig` from the
-               * body middleware) or an already human-readable sentence (e.g. the upload
-               * plugin's size-limit message). Translate the former, fall back to the latter.
-               */ formatMessage({
-                    id: getTranslationKey(`apiError.${file.error}`),
-                    defaultMessage: file.error
-                }) : formatMessage({
-                    id: getTranslationKey('upload.generic-error'),
-                    defaultMessage: 'An error occurred while uploading the file.'
-                })
-            })
-        });
-    }
-    if (isCancelled) {
-        return /*#__PURE__*/ jsx(FileRow, {
-            icon: /*#__PURE__*/ jsx(MinusCircle, {
-                fill: "neutral600"
-            }),
-            fileName: file.name,
-            children: /*#__PURE__*/ jsx(Typography, {
-                variant: "pi",
-                textColor: "neutral600",
-                children: formatMessage({
-                    id: getTranslationKey('upload.progress.file.canceled'),
-                    defaultMessage: 'Canceled'
-                })
-            })
-        });
-    }
-    if (isCompleted) {
-        // The upload succeeded; the metadata phase (if any) drives both the icon and the
-        // subline from here on — a metadata failure shows a warning, not an upload error.
-        const { icon, message } = COMPLETED_ROW_PRESENTATION[file.metadataStatus ?? 'none'];
-        return /*#__PURE__*/ jsxs(FileRow, {
-            icon: icon,
-            fileName: file.name,
-            children: [
-                /*#__PURE__*/ jsx(Typography, {
-                    variant: "pi",
-                    textColor: "neutral600",
-                    children: formatMessage(message)
-                }),
-                file.metadataStatus === 'generating' && /*#__PURE__*/ jsx(IndeterminateBar, {})
-            ]
-        });
-    }
-    return null;
-};
-const CompletedFilesList = styled(Flex)`
-  flex-direction: column;
-  gap: ${({ theme })=>theme.spaces[2]};
-  width: 100%;
-`;
-const UploadProgressDialog = ()=>{
-    const dispatch = useTypedDispatch();
-    const { isVisible, isMinimized, files } = useTypedSelector((state)=>state.uploadProgress);
-    // With concurrent uploads several files are `uploading` at once — render every
-    // in-flight row, not just the first (a `find` here dated to the strictly
-    // sequential era and hid all but the lowest-index worker's row).
-    const uploadingFiles = files.filter((f)=>f.status === 'uploading');
-    // Everything the pool has not reached yet. Listed in queue order, which is the
-    // order `files` is already in, so a row's position tells the user where it sits.
-    const queuedFiles = files.filter((f)=>f.status === 'pending');
-    const completedFiles = files.filter((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled').sort((a, b)=>{
-        // Sort priority: error > cancelled > complete
-        const priority = {
-            error: 0,
-            cancelled: 1,
-            complete: 2,
-            uploading: 3,
-            pending: 4
-        };
-        return priority[a.status] - priority[b.status];
-    });
-    const handleClose = ()=>{
-        dispatch(closeUploadProgress());
-    };
-    return /*#__PURE__*/ jsx(Drawer.Root, {
-        isVisible: isVisible,
-        onClose: handleClose,
-        children: /*#__PURE__*/ jsxs(Drawer.Body, {
-            animationDirection: "up",
-            width: "41.6rem",
-            maxHeight: "34.2rem",
-            children: [
-                /*#__PURE__*/ jsx(DialogHeader, {
-                    handleClose: handleClose
-                }),
-                /*#__PURE__*/ jsx(Drawer.ScrollableContent, {
-                    isContentExpanded: !isMinimized,
-                    children: /*#__PURE__*/ jsxs(Flex, {
-                        direction: "column",
-                        alignItems: "stretch",
-                        gap: 4,
-                        paddingTop: 4,
-                        paddingBottom: 4,
-                        paddingLeft: 4,
-                        paddingRight: 4,
-                        children: [
-                            uploadingFiles.map((file)=>/*#__PURE__*/ jsx(FileRowRenderer, {
-                                    file: file
-                                }, file.index)),
-                            queuedFiles.map((file)=>/*#__PURE__*/ jsx(FileRowRenderer, {
-                                    file: file
-                                }, file.index)),
-                            completedFiles.length > 0 && /*#__PURE__*/ jsx(CompletedFilesList, {
-                                children: completedFiles.map((file)=>/*#__PURE__*/ jsx(FileRowRenderer, {
-                                        file: file
-                                    }, file.index))
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-};
-
-export { UploadProgressDialog };
-//# sourceMappingURL=UploadProgressDialog.mjs.map