@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-T6AMRENK.mjs

@@ -0,0 +1,376 @@
+import {
+  MuiModal
+} from "./chunk-UDREPVEY.mjs";
+import {
+  CircularProgress,
+  LinearProgress
+} from "./chunk-WYYP3Y34.mjs";
+import {
+  useAlert
+} from "./chunk-EKPULYPU.mjs";
+import {
+  FileThumbnail
+} from "./chunk-AAH2O24U.mjs";
+import {
+  Button,
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default100 as default7,
+  default101 as default8,
+  default105 as default9,
+  default13 as default4,
+  default57 as default5,
+  default95 as default6
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default3
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/compound/Process/src/ProcessModal.tsx
+import { useState as useState3, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+
+// src/components/compound/Process/src/ProcessItem.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProcessItem = ({ file, progress }) => {
+  const isComplete = progress >= 100;
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 2, alignItems: "center", mb: 2, p: 1, border: "1px solid", borderColor: "var(--process-item-border)", borderRadius: 1 }, children: [
+    /* @__PURE__ */ jsx(FileThumbnail, { file, size: 48 }),
+    /* @__PURE__ */ jsxs(default2, { sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", justifyContent: "space-between", mb: 0.5 }, children: [
+        /* @__PURE__ */ jsx(default3, { variant: "body2", noWrap: true, sx: { fontWeight: 500 }, children: file.filename }),
+        /* @__PURE__ */ jsx(default3, { variant: "caption", sx: { pl: 0.5, color: "var(--process-item-secondary-color)" }, children: file.displaySize })
+      ] }),
+      /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            variant: "determinate",
+            value: progress,
+            sx: {
+              flex: 1,
+              height: 6
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(default3, { variant: "caption", sx: { minWidth: 35, textAlign: "right", color: "var(--process-item-secondary-color)" }, children: [
+          Math.round(progress),
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(default2, { sx: { display: "flex", alignItems: "center", width: 24, justifyContent: "center" }, children: isComplete && /* @__PURE__ */ jsx(default5, { color: "success", fontSize: "small" }) })
+  ] });
+};
+
+// src/components/compound/Process/src/hooks/useProgressTracking.ts
+import { useState, useEffect, useMemo, useCallback } from "react";
+function useProgressTracking(files, observerRef) {
+  const [progressMap, setProgressMap] = useState(/* @__PURE__ */ new Map());
+  const handleProgress = useCallback((file, progress) => {
+    setProgressMap((prev) => {
+      if (prev.get(file.filename) === progress) return prev;
+      const newMap = new Map(prev);
+      newMap.set(file.filename, progress);
+      return newMap;
+    });
+  }, []);
+  useEffect(() => {
+    if (files.length === 0) return;
+    let total = 0;
+    let completed = 0;
+    progressMap.forEach((v) => {
+      total += v;
+      if (v >= 100) completed++;
+    });
+    const avg = Math.round(total / files.length);
+    observerRef.current.update(files.length, completed, avg);
+  }, [progressMap, files, observerRef]);
+  const allComplete = useMemo(() => {
+    if (files.length === 0) return false;
+    return files.every((f) => (progressMap.get(f.filename) || 0) >= 100);
+  }, [files, progressMap]);
+  return { progressMap, handleProgress, allComplete };
+}
+
+// src/components/compound/Process/src/hooks/useProcessAlert.ts
+import React, { useRef, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+
+// src/components/compound/Process/src/ProcessAlert.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProcessAlertContent = ({
+  allComplete,
+  fileCount,
+  totalProgress,
+  onMaximize,
+  minimized
+}) => {
+  return /* @__PURE__ */ jsxs2(default2, { sx: { display: "flex", alignItems: "center", gap: 2, minWidth: 280 }, children: [
+    /* @__PURE__ */ jsx2(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: allComplete ? /* @__PURE__ */ jsx2(default5, {}) : /* @__PURE__ */ jsx2(CircularProgress, { variant: "determinate", value: totalProgress, size: 24, thickness: 5 }) }),
+    /* @__PURE__ */ jsxs2(default2, { sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx2(default3, { variant: "subtitle2", sx: { fontWeight: 600, lineHeight: 1.2 }, children: allComplete ? "Uploads complete" : "Uploading files..." }),
+      !allComplete && /* @__PURE__ */ jsxs2(default3, { variant: "caption", display: "block", sx: { opacity: 0.8 }, children: [
+        fileCount,
+        " item",
+        fileCount !== 1 ? "s" : "",
+        " \u2022 ",
+        totalProgress,
+        "%"
+      ] })
+    ] }),
+    minimized && /* @__PURE__ */ jsx2(IconButton_default, { size: "small", onClick: onMaximize, title: "Maximize", sx: { color: "inherit" }, children: /* @__PURE__ */ jsx2(default6, {}) })
+  ] });
+};
+var ProcessAlertObserver = ({ observer, onMaximize }) => {
+  const [state, setState] = useState2({ fileCount: 0, completedCount: 0, totalProgress: 0, minimized: false });
+  useEffect2(() => {
+    return observer.subscribe((newState) => {
+      setState(newState);
+    });
+  }, [observer]);
+  const allComplete = state.fileCount > 0 && state.totalProgress >= 100;
+  return /* @__PURE__ */ jsx2(
+    ProcessAlertContent,
+    {
+      allComplete,
+      fileCount: state.fileCount,
+      totalProgress: state.totalProgress,
+      onMaximize,
+      minimized: state.minimized
+    }
+  );
+};
+
+// src/components/compound/Process/src/_utils/ProgressObserver.ts
+var ProgressObserver = class {
+  listeners = [];
+  state = {
+    fileCount: 0,
+    completedCount: 0,
+    totalProgress: 0,
+    minimized: false
+  };
+  subscribe(listener) {
+    this.listeners.push(listener);
+    listener(this.state);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  update(fileCount, completedCount, totalProgress) {
+    this.state = { ...this.state, fileCount, completedCount, totalProgress };
+    this.notify();
+  }
+  setMinimized(minimized) {
+    this.state = { ...this.state, minimized };
+    this.notify();
+  }
+  notify() {
+    this.listeners.forEach((l) => l(this.state));
+  }
+};
+
+// src/components/compound/Process/src/hooks/useProcessAlert.ts
+function useProcessAlert({
+  open,
+  minimized,
+  minimizePlacement,
+  onMaximize
+}) {
+  const { enqueueInfo, closeSnackbar } = useAlert();
+  const observerRef = useRef(new ProgressObserver());
+  const snackbarIdRef = useRef(null);
+  const alertAnchorOrigin = useMemo2(() => ({
+    "bottom-right": { vertical: "bottom", horizontal: "right" },
+    "bottom-left": { vertical: "bottom", horizontal: "left" },
+    "top-right": { vertical: "top", horizontal: "right" },
+    "top-left": { vertical: "top", horizontal: "left" }
+  })[minimizePlacement], [minimizePlacement]);
+  useEffect3(() => {
+    observerRef.current.setMinimized(minimized);
+  }, [minimized]);
+  useEffect3(() => {
+    if (open) {
+      if (!snackbarIdRef.current) {
+        const message = React.createElement(ProcessAlertObserver, {
+          observer: observerRef.current,
+          onMaximize
+        });
+        const result = enqueueInfo(message, {
+          autoHideDuration: null,
+          icon: null,
+          anchorOrigin: alertAnchorOrigin
+        });
+        if (result.success) {
+          snackbarIdRef.current = result.data;
+        }
+      }
+    } else {
+      if (snackbarIdRef.current) {
+        closeSnackbar(snackbarIdRef.current);
+        snackbarIdRef.current = null;
+      }
+    }
+  }, [alertAnchorOrigin, closeSnackbar, enqueueInfo, open, onMaximize]);
+  useEffect3(() => {
+    return () => {
+      if (snackbarIdRef.current) {
+        closeSnackbar(snackbarIdRef.current);
+        snackbarIdRef.current = null;
+      }
+    };
+  }, [closeSnackbar]);
+  return { observerRef };
+}
+
+// src/components/compound/Process/src/theme.ts
+var processModalRootSx = {
+  "--process-description-color": "var(--mui-palette-text-secondary)",
+  "--process-item-secondary-color": "var(--mui-palette-text-secondary)",
+  "--process-item-border": "var(--mui-palette-divider)"
+};
+
+// src/components/compound/Process/src/ProcessModal.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var useDefaultProgress = () => 0;
+var ProcessLogicRunner = ({
+  file,
+  useProgress,
+  onProgress,
+  paused
+}) => {
+  const progress = useProgress(file, paused);
+  useEffect4(() => {
+    onProgress(file, progress);
+  }, [file, progress, onProgress]);
+  return null;
+};
+var ProcessModal = ({
+  openProps,
+  files,
+  title = "Uploading Documents",
+  description = "Please wait while we upload your files.",
+  useProgress = useDefaultProgress,
+  onPause,
+  onStop,
+  minimizable = false,
+  minimizePlacement = "bottom-right",
+  autoClose = false
+}) => {
+  const [open, setOpen] = openProps;
+  const [minimized, setMinimized] = useState3(false);
+  const [paused, setPaused] = useState3(false);
+  const handleMaximize = useCallback2(() => setMinimized(false), []);
+  const { observerRef } = useProcessAlert({
+    open,
+    minimized,
+    minimizePlacement,
+    onMaximize: handleMaximize
+  });
+  const { progressMap, handleProgress, allComplete } = useProgressTracking(files, observerRef);
+  useEffect4(() => {
+    if (autoClose && allComplete && open) {
+      const timer = setTimeout(() => {
+        setOpen(false);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }
+  }, [autoClose, allComplete, open, setOpen]);
+  const handlePauseToggle = () => {
+    setPaused(!paused);
+    if (onPause) onPause();
+  };
+  const handleStop = () => {
+    if (onStop) onStop();
+    setOpen(false);
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    files.map((file) => /* @__PURE__ */ jsx3(
+      ProcessLogicRunner,
+      {
+        file,
+        useProgress,
+        onProgress: handleProgress,
+        paused
+      },
+      file.filename
+    )),
+    minimized ? null : /* @__PURE__ */ jsx3(
+      MuiModal,
+      {
+        openProps,
+        title,
+        size: { w: 500 },
+        slots: {
+          closeIcon: minimizable ? default4 : void 0
+        },
+        slotProps: {
+          closeButton: minimizable ? {
+            onClick: () => setMinimized(true),
+            title: "Minimize"
+          } : void 0
+        },
+        children: /* @__PURE__ */ jsxs3(default2, { sx: mergeSx({ py: 2 }, processModalRootSx), children: [
+          description && /* @__PURE__ */ jsx3(default3, { variant: "body2", sx: { mb: 3, color: "var(--process-description-color)" }, children: description }),
+          /* @__PURE__ */ jsx3(default2, { sx: { display: "flex", flexDirection: "column", gap: 1, maxHeight: "60vh", overflowY: "auto" }, children: files.map((file) => /* @__PURE__ */ jsx3(
+            ProcessItem,
+            {
+              file,
+              progress: progressMap.get(file.filename) || 0
+            },
+            file.filename
+          )) }),
+          /* @__PURE__ */ jsxs3(default2, { sx: { mt: 3, display: "flex", justifyContent: "flex-end", gap: 2 }, children: [
+            !allComplete && /* @__PURE__ */ jsxs3(Fragment, { children: [
+              onStop && /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "error",
+                  startIcon: /* @__PURE__ */ jsx3(default9, {}),
+                  onClick: handleStop,
+                  children: "Stop"
+                }
+              ),
+              onPause && /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "warning",
+                  startIcon: paused ? /* @__PURE__ */ jsx3(default7, {}) : /* @__PURE__ */ jsx3(default8, {}),
+                  onClick: handlePauseToggle,
+                  children: paused ? "Resume" : "Pause"
+                }
+              )
+            ] }),
+            allComplete && /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "contained",
+                onClick: () => setOpen(false),
+                disabled: !allComplete && !onStop,
+                startIcon: /* @__PURE__ */ jsx3(default5, {}),
+                color: "success",
+                children: "Done"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+export {
+  ProcessItem,
+  ProcessAlertContent,
+  ProcessAlertObserver,
+  ProcessModal
+};
+//# sourceMappingURL=chunk-T6AMRENK.mjs.map

package/dist/chunk-T6AMRENK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/Process/src/ProcessModal.tsx","../src/components/compound/Process/src/ProcessItem.tsx","../src/components/compound/Process/src/hooks/useProgressTracking.ts","../src/components/compound/Process/src/hooks/useProcessAlert.ts","../src/components/compound/Process/src/ProcessAlert.tsx","../src/components/compound/Process/src/_utils/ProgressObserver.ts","../src/components/compound/Process/src/theme.ts"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Box } from '@/ele/Box';\nimport { Typography } from '@/ele/Typography';\nimport { Button } from '@/ele/Button';\nimport { PauseIcon, PlayIcon, StopIcon, RemoveIcon as MinimizeIcon, CheckCircleIcon } from '@/icons/MuiIcon';\nimport { MuiModal } from '@/ele/Modal';\nimport { ProcessItem } from './ProcessItem';\nimport { ProcessModalProps, ProgressHook } from './types';\nimport PreviewableFile from '@/_utils/classes/PreviewableFile';\nimport { useProgressTracking, useProcessAlert } from './hooks';\nimport { processModalRootSx } from './theme';\nimport { mergeSx } from '@/_utils/_func';\n\n// Default hook returns 0 if not provided\nconst useDefaultProgress: ProgressHook = () => 0;\n\nconst ProcessLogicRunner = ({\n    file,\n    useProgress,\n    onProgress,\n    paused\n}: {\n    file: PreviewableFile;\n    useProgress: ProgressHook;\n    onProgress: (file: PreviewableFile, progress: number) => void;\n    paused: boolean;\n}) => {\n    const progress = useProgress(file, paused);\n    useEffect(() => {\n        onProgress(file, progress);\n    }, [file, progress, onProgress]);\n    return null;\n};\n\nexport const ProcessModal: React.FC<ProcessModalProps> = ({ \n    openProps, \n    files, \n    title = \"Uploading Documents\",\n    description = \"Please wait while we upload your files.\",\n    useProgress = useDefaultProgress,\n    onPause,\n    onStop,\n    minimizable = false,\n    minimizePlacement = 'bottom-right',\n    autoClose = false\n}) => {\n    const [open, setOpen] = openProps;\n    const [minimized, setMinimized] = useState(false);\n    const [paused, setPaused] = useState(false);\n\n    const handleMaximize = useCallback(() => setMinimized(false), []);\n\n    const { observerRef } = useProcessAlert({\n        open,\n        minimized,\n        minimizePlacement,\n        onMaximize: handleMaximize,\n    });\n\n    const { progressMap, handleProgress, allComplete } = useProgressTracking(files, observerRef);\n\n    useEffect(() => {\n        if (autoClose && allComplete && open) {\n            const timer = setTimeout(() => {\n                setOpen(false);\n            }, 1000);\n            return () => clearTimeout(timer);\n        }\n    }, [autoClose, allComplete, open, setOpen]);\n\n    const handlePauseToggle = () => {\n        setPaused(!paused);\n        if (onPause) onPause();\n    };\n\n    const handleStop = () => {\n        if (onStop) onStop();\n        setOpen(false);\n    };\n\n    if (!open) return null;\n\n    return (\n        <>\n            {/* Logic Layer: Always mounted when open */}\n            {files.map((file) => (\n                <ProcessLogicRunner\n                    key={file.filename}\n                    file={file}\n                    useProgress={useProgress}\n                    onProgress={handleProgress}\n                    paused={paused}\n                />\n            ))}\n\n            {minimized ? null : (\n                <MuiModal \n                    openProps={openProps}\n                    title={title}\n                    size={{ w: 500 }}\n                    slots={{\n                      closeIcon: minimizable?MinimizeIcon:undefined,\n                    }}\n                    slotProps={{\n                      closeButton: minimizable?{\n                        onClick: () => setMinimized(true),\n                        title: \"Minimize\",\n                      }:undefined,\n                    }}\n\n                >\n                    <Box sx={mergeSx({ py: 2 }, processModalRootSx)}>\n                        {description && (\n                            <Typography variant=\"body2\" sx={{ mb: 3, color: 'var(--process-description-color)' }}>\n                                {description}\n                            </Typography>\n                        )}\n                        \n                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, maxHeight: '60vh', overflowY: 'auto' }}>\n                            {files.map((file) => (\n                                <ProcessItem \n                                    key={file.filename} \n                                    file={file} \n                                    progress={progressMap.get(file.filename) || 0}\n                                />\n                            ))}\n                        </Box>\n\n                        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 2 }}>\n                            {!allComplete && (\n                                <>\n                                    {onStop && (\n                                        <Button \n                                            variant=\"outlined\" \n                                            color=\"error\" \n                                            startIcon={<StopIcon />} \n                                            onClick={handleStop}\n                                        >\n                                            Stop\n                                        </Button>\n                                    )}\n                                    {onPause && (\n                                        <Button \n                                            variant=\"outlined\" \n                                            color=\"warning\" \n                                            startIcon={paused ? <PlayIcon /> : <PauseIcon />} \n                                            onClick={handlePauseToggle}\n                                        >\n                                            {paused ? \"Resume\" : \"Pause\"}\n                                        </Button>\n                                    )}\n                                </>\n                            )}\n                            \n                            {allComplete && <Button \n                                variant=\"contained\"\n                                onClick={() => setOpen(false)}\n                                disabled={!allComplete && !onStop}\n                                startIcon={<CheckCircleIcon />}\n                                color=\"success\"\n                            >\n                                Done\n                            </Button>}\n                        </Box>\n                    </Box>\n                </MuiModal>\n            )}\n        </>\n    );\n};\n","import React from 'react';\nimport { Box } from '@/ele/Box';\nimport { Typography } from '@/ele/Typography';\nimport { LinearProgress } from '@/ele/Progress';\nimport { CheckCircleIcon } from '@/icons/MuiIcon';\nimport PreviewableFile from '@/_utils/classes/PreviewableFile';\nimport { FileThumbnail } from '@/compound/DisplayFile';\n\ninterface ProcessItemProps {\n    file: PreviewableFile;\n    progress: number;\n}\n\nexport const ProcessItem: React.FC<ProcessItemProps> = ({ file, progress }) => {\n    const isComplete = progress >= 100;\n    \n    return (\n        <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2, p: 1, border: '1px solid', borderColor: 'var(--process-item-border)', borderRadius: 1 }}>\n            <FileThumbnail file={file} size={48} />\n            \n            <Box sx={{ flex: 1, minWidth: 0 }}>\n                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>\n                    <Typography variant=\"body2\" noWrap sx={{ fontWeight: 500 }}>\n                        {file.filename}\n                    </Typography>\n                    <Typography variant=\"caption\" sx={{ pl: 0.5, color: 'var(--process-item-secondary-color)' }}>\n                        {file.displaySize}\n                    </Typography>\n                </Box>\n                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                     <LinearProgress \n                        variant=\"determinate\" \n                        value={progress} \n                        sx={{ \n                            flex: 1, \n                            height: 6, \n                        }} \n                    />\n                     <Typography variant=\"caption\" sx={{ minWidth: 35, textAlign: 'right', color: 'var(--process-item-secondary-color)' }}>\n                        {Math.round(progress)}%\n                     </Typography>\n                </Box>\n            </Box>\n\n            <Box sx={{ display: 'flex', alignItems: 'center', width: 24, justifyContent: 'center' }}>\n                {isComplete && <CheckCircleIcon color=\"success\" fontSize=\"small\" />}\n            </Box>\n        </Box>\n    );\n};\n","import { useState, useEffect, useMemo, useCallback } from 'react';\nimport type React from 'react';\nimport PreviewableFile from '@/_utils/classes/PreviewableFile';\nimport { ProgressObserver } from '../_utils/ProgressObserver';\n\nexport function useProgressTracking(\n    files: PreviewableFile[],\n    observerRef: React.RefObject<ProgressObserver>,\n) {\n    const [progressMap, setProgressMap] = useState<Map<string, number>>(new Map());\n\n    const handleProgress = useCallback((file: PreviewableFile, progress: number) => {\n        setProgressMap(prev => {\n            if (prev.get(file.filename) === progress) return prev;\n            const newMap = new Map(prev);\n            newMap.set(file.filename, progress);\n            return newMap;\n        });\n    }, []);\n\n    useEffect(() => {\n        if (files.length === 0) return;\n        let total = 0;\n        let completed = 0;\n        progressMap.forEach(v => {\n            total += v;\n            if (v >= 100) completed++;\n        });\n        const avg = Math.round(total / files.length);\n        observerRef.current.update(files.length, completed, avg);\n    }, [progressMap, files, observerRef]);\n\n    const allComplete = useMemo(() => {\n        if (files.length === 0) return false;\n        return files.every(f => (progressMap.get(f.filename) || 0) >= 100);\n    }, [files, progressMap]);\n\n    return { progressMap, handleProgress, allComplete };\n}\n","import React, { useRef, useEffect, useMemo } from 'react';\nimport { SnackbarKey } from 'notistack';\nimport { useAlert, type AlertOptions } from '@/compound/Alert';\nimport { ProcessAlertObserver } from '../ProcessAlert';\nimport { ProgressObserver } from '../_utils/ProgressObserver';\nimport type { ProcessModalProps } from '../types';\n\ninterface UseProcessAlertParams {\n    open: boolean;\n    minimized: boolean;\n    minimizePlacement: NonNullable<ProcessModalProps['minimizePlacement']>;\n    onMaximize: () => void;\n}\n\nexport function useProcessAlert({\n    open,\n    minimized,\n    minimizePlacement,\n    onMaximize,\n}: UseProcessAlertParams) {\n    const { enqueueInfo, closeSnackbar } = useAlert();\n    const observerRef = useRef(new ProgressObserver());\n    const snackbarIdRef = useRef<SnackbarKey | null>(null);\n\n    const alertAnchorOrigin = useMemo<NonNullable<AlertOptions['anchorOrigin']>>(() => (\n        {\n            'bottom-right': { vertical: 'bottom', horizontal: 'right' },\n            'bottom-left': { vertical: 'bottom', horizontal: 'left' },\n            'top-right': { vertical: 'top', horizontal: 'right' },\n            'top-left': { vertical: 'top', horizontal: 'left' },\n        } as const\n    )[minimizePlacement], [minimizePlacement]);\n\n    // Sync minimized state to observer\n    useEffect(() => {\n        observerRef.current.setMinimized(minimized);\n    }, [minimized]);\n\n    // Alert open/close lifecycle\n    useEffect(() => {\n        if (open) {\n            if (!snackbarIdRef.current) {\n                const message = React.createElement(ProcessAlertObserver, {\n                    observer: observerRef.current,\n                    onMaximize,\n                });\n                const result = enqueueInfo(message, {\n                    autoHideDuration: null,\n                    icon: null,\n                    anchorOrigin: alertAnchorOrigin,\n                });\n                if (result.success) {\n                    snackbarIdRef.current = result.data;\n                }\n            }\n        } else {\n            if (snackbarIdRef.current) {\n                closeSnackbar(snackbarIdRef.current);\n                snackbarIdRef.current = null;\n            }\n        }\n    }, [alertAnchorOrigin, closeSnackbar, enqueueInfo, open, onMaximize]);\n\n    // Cleanup on unmount\n    useEffect(() => {\n        return () => {\n            if (snackbarIdRef.current) {\n                closeSnackbar(snackbarIdRef.current);\n                snackbarIdRef.current = null;\n            }\n        };\n    }, [closeSnackbar]);\n\n    return { observerRef };\n}\n","import { useEffect, useState } from 'react';\nimport { Box } from '@/ele/Box';\nimport { Typography } from '@/ele/Typography';\nimport { IconButton } from '@/ele/Button';\nimport { FullscreenIcon, CheckCircleIcon } from '@/icons/MuiIcon';\nimport { CircularProgress } from '@/ele/Progress';\nimport { ProgressObserver } from './_utils/ProgressObserver';\n\n// The display component (stateless mostly)\nexport const ProcessAlertContent = ({ \n    allComplete, \n    fileCount, \n    totalProgress, \n    onMaximize,\n    minimized\n}: { \n    allComplete: boolean; \n    fileCount: number; \n    totalProgress: number; \n    onMaximize: () => void;\n    minimized: boolean;\n}) => {\n    return (\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 280 }}>\n            {/* We don't render Icon here because MuiAlertVariant/Info handles the main icon usually. \n                However, user might want the progress circle AS the icon. \n                But MuiAlertVariant renders 'icon' prop.\n                We are inside 'message'.\n            */}\n            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n                 {/* Explicitly show progress here, assuming we replace or hide the default Alert icon via props if needed, or just show standard info icon + this progress */}\n                 {allComplete ? <CheckCircleIcon /> : <CircularProgress variant=\"determinate\" value={totalProgress} size={24} thickness={5} />}\n            </Box>\n            \n            <Box sx={{ flex: 1, minWidth: 0 }}>\n                <Typography variant=\"subtitle2\" sx={{ fontWeight: 600, lineHeight: 1.2 }}>\n                    {allComplete ? \"Uploads complete\" : \"Uploading files...\"}\n                </Typography>\n                {!allComplete && (\n                    <Typography variant=\"caption\" display=\"block\" sx={{ opacity: 0.8 }}>\n                        {fileCount} item{fileCount !== 1 ? 's' : ''} • {totalProgress}%\n                    </Typography>\n                )}\n            </Box>\n\n            {minimized && (\n                <IconButton size=\"small\" onClick={onMaximize} title=\"Maximize\" sx={{ color: 'inherit' }}>\n                    <FullscreenIcon />\n                </IconButton>\n            )}\n        </Box>\n    );\n};\n\n// The observer wrapper\nexport const ProcessAlertObserver = ({ observer, onMaximize }: { observer: ProgressObserver, onMaximize: () => void }) => {\n    const [state, setState] = useState({ fileCount: 0, completedCount: 0, totalProgress: 0, minimized: false });\n\n    useEffect(() => {\n        return observer.subscribe((newState) => {\n            setState(newState);\n        });\n    }, [observer]);\n\n    // Derived\n    const allComplete = state.fileCount > 0 && state.totalProgress >= 100;\n\n    return (\n        <ProcessAlertContent \n            allComplete={allComplete}\n            fileCount={state.fileCount}\n            totalProgress={state.totalProgress}\n            onMaximize={onMaximize}\n            minimized={state.minimized}\n        />\n    );\n};\n","export interface ProgressState {\n    fileCount: number;\n    completedCount: number;\n    totalProgress: number;\n    minimized: boolean;\n}\n\nexport type ProgressListener = (state: ProgressState) => void;\n\nexport class ProgressObserver {\n    private listeners: ProgressListener[] = [];\n    private state: ProgressState = {\n        fileCount: 0,\n        completedCount: 0,\n        totalProgress: 0,\n        minimized: false\n    };\n\n    subscribe(listener: ProgressListener) {\n        this.listeners.push(listener);\n        // Immediate callback with current state\n        listener(this.state);\n        return () => {\n            this.listeners = this.listeners.filter(l => l !== listener);\n        };\n    }\n\n    update(fileCount: number, completedCount: number, totalProgress: number) {\n        this.state = { ...this.state, fileCount, completedCount, totalProgress };\n        this.notify();\n    }\n\n    setMinimized(minimized: boolean) {\n        this.state = { ...this.state, minimized };\n        this.notify();\n    }\n\n    private notify() {\n        this.listeners.forEach(l => l(this.state));\n    }\n}\n","import type { SxProps, Theme } from '@mui/material/styles';\n\n/**\n * Root-level CSS variable aliases for the ProcessModal compound component.\n * Declared once on the root element — child components consume via `var(--*)`.\n */\nexport const processModalRootSx: SxProps<Theme> = {\n  '--process-description-color': 'var(--mui-palette-text-secondary)',\n  '--process-item-secondary-color': 'var(--mui-palette-text-secondary)',\n  '--process-item-border': 'var(--mui-palette-divider)',\n};\n"],"mappings":"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","names":["useState","useEffect","useCallback","default","useEffect","useMemo","useEffect","useState","jsx","jsxs","default","useState","useEffect","useMemo","useEffect","jsx","jsxs","useEffect","useState","useCallback","default"]}