@windrun-huaiin/third-ui 29.2.0 → 29.2.1

package/dist/main/alert-dialog/confirm-dialog.d.ts

@@ -12,8 +12,9 @@ interface ConfirmDialogProps {
     confirmText?: string;
     emphasis?: ConfirmDialogEmphasis;
     loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
     onCancel?: DialogActionHandler;
     onConfirm?: DialogActionHandler;
 }
-export declare function ConfirmDialog({ open, onOpenChange, type, title, description, cancelText, confirmText, emphasis, loadingActions, onCancel, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, type, title, description, cancelText, confirmText, emphasis, loadingActions, loadingFullPage, onCancel, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/alert-dialog/confirm-dialog.js

@@ -25,12 +25,12 @@ const confirmTypeClassMap = {
         Icon: icons.CircleAlertIcon,
     },
 };
-function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, onCancel, onConfirm, }) {
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, loadingFullPage, onCancel, onConfirm, }) {
     const typeClass = confirmTypeClassMap[type];
     const Icon = typeClass.Icon;
     const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : dialogStyles.secondaryButtonClass;
     const confirmButtonClass = emphasis === 'cancel' ? dialogStyles.secondaryButtonClass : typeClass.action;
-    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const handleCancel = () => {
         void runDialogAction('cancel', onCancel);
     };

package/dist/main/alert-dialog/confirm-dialog.mjs

@@ -23,12 +23,12 @@ const confirmTypeClassMap = {
         Icon: CircleAlertIcon,
     },
 };
-function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, onCancel, onConfirm, }) {
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, loadingFullPage, onCancel, onConfirm, }) {
     const typeClass = confirmTypeClassMap[type];
     const Icon = typeClass.Icon;
     const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : secondaryButtonClass;
     const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : typeClass.action;
-    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const handleCancel = () => {
         void runDialogAction('cancel', onCancel);
     };

package/dist/main/alert-dialog/dialog-loading-action.d.ts

@@ -3,9 +3,10 @@ export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
 export type DialogActionHandler = () => void | Promise<void>;
 interface UseDialogLoadingActionOptions {
     loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
     onOpenChange: (open: boolean) => void;
 }
-export declare function useDialogLoadingAction({ loadingActions, onOpenChange, }: UseDialogLoadingActionOptions): {
+export declare function useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange, }: UseDialogLoadingActionOptions): {
     dialogLoading: React.ReactPortal | null;
     runDialogAction: (action: DialogLoadingAction, handler?: DialogActionHandler) => Promise<void>;
 };

package/dist/main/alert-dialog/dialog-loading-action.js

@@ -7,7 +7,7 @@ var React = require('react');
 var reactDom = require('react-dom');
 var loading = require('../loading.js');
 
-function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
+function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpenChange, }) {
     const [mounted, setMounted] = React.useState(false);
     const [loading$1, setLoading] = React.useState(false);
     React.useEffect(() => {
@@ -31,7 +31,7 @@ function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
         }
     }), [loadingActions, onOpenChange]);
     const dialogLoading = mounted && loading$1
-        ? reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx(loading.Loading, { className: "h-full w-full" }) }), document.body)
+        ? reactDom.createPortal(loadingFullPage ? (jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx(loading.Loading, { className: "h-full w-full" }) })) : (jsxRuntime.jsx("div", { className: "pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4", children: jsxRuntime.jsx("div", { className: "pointer-events-auto overflow-hidden rounded-[28px] bg-neutral-50/58 shadow-[0_18px_56px_rgba(15,23,42,0.14)] backdrop-blur-md dark:bg-neutral-900/58 dark:shadow-[0_18px_56px_rgba(0,0,0,0.34)]", children: jsxRuntime.jsx(loading.Loading, { compact: true, label: "Loading", className: "min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent", labelClassName: "text-foreground" }) }) })), document.body)
         : null;
     return {
         dialogLoading,

package/dist/main/alert-dialog/dialog-loading-action.mjs

@@ -5,7 +5,7 @@ import React__default from 'react';
 import { createPortal } from 'react-dom';
 import { Loading } from '../loading.mjs';
 
-function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
+function useDialogLoadingAction({ loadingActions, loadingFullPage = false, onOpenChange, }) {
     const [mounted, setMounted] = React__default.useState(false);
     const [loading, setLoading] = React__default.useState(false);
     React__default.useEffect(() => {
@@ -29,7 +29,7 @@ function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
         }
     }), [loadingActions, onOpenChange]);
     const dialogLoading = mounted && loading
-        ? createPortal(jsx("div", { className: "fixed inset-0 z-10000", children: jsx(Loading, { className: "h-full w-full" }) }), document.body)
+        ? createPortal(loadingFullPage ? (jsx("div", { className: "fixed inset-0 z-10000", children: jsx(Loading, { className: "h-full w-full" }) })) : (jsx("div", { className: "pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4", children: jsx("div", { className: "pointer-events-auto overflow-hidden rounded-[28px] bg-neutral-50/58 shadow-[0_18px_56px_rgba(15,23,42,0.14)] backdrop-blur-md dark:bg-neutral-900/58 dark:shadow-[0_18px_56px_rgba(0,0,0,0.34)]", children: jsx(Loading, { compact: true, label: "Loading", className: "min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent", labelClassName: "text-foreground" }) }) })), document.body)
         : null;
     return {
         dialogLoading,

package/dist/main/alert-dialog/high-priority-confirm-dialog.d.ts

@@ -10,6 +10,7 @@ interface HighPriorityConfirmDialogProps {
     confirmText?: string;
     cancelText?: string;
     loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
 }
-export declare function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText, cancelText, loadingActions, }: HighPriorityConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText, cancelText, loadingActions, loadingFullPage, }: HighPriorityConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/main/alert-dialog/high-priority-confirm-dialog.js

@@ -10,9 +10,9 @@ var dialogStyles = require('./dialog-styles.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var dialogLoadingAction = require('./dialog-loading-action.js');
 
-function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, }) {
+function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, loadingFullPage, }) {
     const [mounted, setMounted] = React.useState(false);
-    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     React.useEffect(() => {
         // Ensure portal target exists and prevent hydration mismatch
         setTimeout(() => setMounted(true), 0);

package/dist/main/alert-dialog/high-priority-confirm-dialog.mjs

@@ -8,9 +8,9 @@ import { dialogHeaderClass, highPriorityTitleClass, closeButtonClass, dialogDesc
 import { themeIconColor, themeBgColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
-function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, }) {
+function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, loadingFullPage, }) {
     const [mounted, setMounted] = useState(false);
-    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     useEffect(() => {
         // Ensure portal target exists and prevent hydration mismatch
         setTimeout(() => setMounted(true), 0);

package/dist/main/alert-dialog/info-dialog.d.ts

@@ -9,7 +9,8 @@ interface InfoDialogProps {
     description: React.ReactNode;
     confirmText?: string;
     loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
     onConfirm?: DialogActionHandler;
 }
-export declare function InfoDialog({ open, onOpenChange, type, title, description, confirmText, loadingActions, onConfirm, }: InfoDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoDialog({ open, onOpenChange, type, title, description, confirmText, loadingActions, loadingFullPage, onConfirm, }: InfoDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/alert-dialog/info-dialog.js

@@ -38,11 +38,11 @@ const infoTypeClassMap = {
         Icon: icons.BadgeXIcon,
     },
 };
-function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, onConfirm, }) {
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, loadingFullPage, onConfirm, }) {
     const typeClass = infoTypeClassMap[type];
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
-    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsx("div", { className: dialogStyles.dialogFooterClass, children: jsxRuntime.jsx(ui.AlertDialogAction, { className: utils.cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
                                     void runDialogAction('confirm', onConfirm);
                                 }, children: confirmText }) })] }) }), dialogLoading] }));

package/dist/main/alert-dialog/info-dialog.mjs

@@ -36,11 +36,11 @@ const infoTypeClassMap = {
         Icon: BadgeXIcon,
     },
 };
-function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, onConfirm, }) {
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, loadingFullPage, onConfirm, }) {
     const typeClass = infoTypeClassMap[type];
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
-    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsx("div", { className: dialogFooterClass, children: jsx(AlertDialogAction, { className: cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
                                     void runDialogAction('confirm', onConfirm);
                                 }, children: confirmText }) })] }) }), dialogLoading] }));

package/dist/main/alert-dialog/undoable-confirm-dialog.d.ts

@@ -14,8 +14,9 @@ export interface UndoableConfirmDialogProps {
     emphasis?: ConfirmDialogEmphasis;
     countdownSeconds?: number;
     loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
     onCancel?: DialogActionHandler;
     onConfirm: DialogActionHandler;
     onUndo?: DialogActionHandler;
 }
-export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, emphasis, countdownSeconds, loadingActions, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, emphasis, countdownSeconds, loadingActions, loadingFullPage, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/alert-dialog/undoable-confirm-dialog.js

@@ -11,7 +11,7 @@ var utils = require('@windrun-huaiin/lib/utils');
 var dialogStyles = require('./dialog-styles.js');
 var dialogLoadingAction = require('./dialog-loading-action.js');
 
-function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, onCancel, onConfirm, onUndo, }) {
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, loadingFullPage, onCancel, onConfirm, onUndo, }) {
     const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
     const [pending, setPending] = React.useState(false);
     const [remainingSeconds, setRemainingSeconds] = React.useState(safeCountdownSeconds);
@@ -20,7 +20,7 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
     const intervalRef = React.useRef(null);
     const cancelButtonClass = emphasis === 'cancel' ? dialogStyles.dangerButtonClass : dialogStyles.secondaryButtonClass;
     const confirmButtonClass = emphasis === 'cancel' ? dialogStyles.secondaryButtonClass : dialogStyles.dangerButtonClass;
-    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const clearTimers = React.useCallback(() => {
         if (timeoutRef.current) {
             window.clearTimeout(timeoutRef.current);

package/dist/main/alert-dialog/undoable-confirm-dialog.mjs

@@ -9,7 +9,7 @@ import { cn } from '@windrun-huaiin/lib/utils';
 import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, dangerButtonClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
-function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, onCancel, onConfirm, onUndo, }) {
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, loadingFullPage, onCancel, onConfirm, onUndo, }) {
     const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
     const [pending, setPending] = React__default.useState(false);
     const [remainingSeconds, setRemainingSeconds] = React__default.useState(safeCountdownSeconds);
@@ -18,7 +18,7 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
     const intervalRef = React__default.useRef(null);
     const cancelButtonClass = emphasis === 'cancel' ? dangerButtonClass : secondaryButtonClass;
     const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : dangerButtonClass;
-    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const clearTimers = React__default.useCallback(() => {
         if (timeoutRef.current) {
             window.clearTimeout(timeoutRef.current);

package/dist/main/calendar/random-date-range-dialog.d.ts

@@ -1,3 +1,4 @@
+import { DialogLoadingAction } from '../alert-dialog/dialog-loading-action';
 export type RandomCalendarRange = {
     startDate: string | null;
     endDate: string | null;
@@ -8,8 +9,10 @@ type RandomDateRangeDialogProps = {
     anchorDate: string;
     defaultRangeDays?: number;
     onOpenChange: (open: boolean) => void;
-    onApply: (range: RandomCalendarRange) => void;
+    loadingActions?: readonly DialogLoadingAction[];
+    loadingFullPage?: boolean;
+    onApply: (range: RandomCalendarRange) => void | Promise<void>;
     onClear?: (range: RandomCalendarRange) => void;
 };
-export declare function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays, onOpenChange, onApply, onClear, }: RandomDateRangeDialogProps): import("react").ReactPortal | null;
+export declare function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays, onOpenChange, loadingActions, loadingFullPage, onApply, onClear, }: RandomDateRangeDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/calendar/random-date-range-dialog.js

@@ -6,6 +6,7 @@ var React = require('react');
 var reactDom = require('react-dom');
 var icons = require('@windrun-huaiin/base-ui/icons');
 var utils = require('@windrun-huaiin/lib/utils');
+var dialogLoadingAction = require('../alert-dialog/dialog-loading-action.js');
 var usePressFeedback = require('../buttons/use-press-feedback.js');
 
 const DEFAULT_RANGE_DAYS = 7;
@@ -118,7 +119,7 @@ function getMonthEnd(value) {
     const date = parseDateString(value);
     return formatDateString(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)));
 }
-function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, onApply, onClear, }) {
+function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, loadingActions, loadingFullPage, onApply, onClear, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const resolvedDefaultRangeDays = clampWindowDays(defaultRangeDays);
     const [draftRange, setDraftRange] = React.useState(value);
@@ -143,6 +144,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     const buildDraggedRangeRef = React.useRef(() => null);
     const previousBodyOverflowRef = React.useRef(null);
     const today = React.useMemo(() => getTodayString(), []);
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const baseReferenceDate = anchorDate || today;
     const previousOpenRef = React.useRef(false);
     const startRatio = getRatioByDate((_a = draftRange.startDate) !== null && _a !== void 0 ? _a : baseReferenceDate, trackBounds);
@@ -160,6 +162,9 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
             .map((item) => formatMonthShort(item));
         return [...new Set(values)];
     }, [trackBounds.endDate, trackBounds.startDate]);
+    const handleApply = React.useCallback(() => {
+        return onApply(draftRange);
+    }, [draftRange, onApply]);
     React.useEffect(() => {
         if (open && !previousOpenRef.current) {
             const nextRange = {
@@ -372,76 +377,75 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         };
     }, [open]);
     if (!open) {
-        return null;
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: dialogLoading });
     }
-    return reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsxRuntime.jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsxRuntime.jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxRuntime.jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.XIcon, { className: "h-4 w-4" }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                            onApply(draftRange);
-                                            onOpenChange(false);
-                                        }, disabled: !draftRange.startDate || !draftRange.endDate, className: utils.cn(DIALOG_ICON_BUTTON_CLASS_NAME, 'text-slate-700 dark:text-slate-100', 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-black/10 disabled:hover:bg-white disabled:hover:text-slate-700 dark:disabled:hover:border-white/10 dark:disabled:hover:bg-slate-950 dark:disabled:hover:text-slate-100'), "aria-label": "Apply", children: jsxRuntime.jsx(icons.CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevYear');
-                                                    shiftReferenceDateByYears(-1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsxRuntime.jsx(icons.ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevMonth');
-                                                    shiftReferenceDateByMonths(-1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: baseReferenceDate,
-                                                        endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
-                                                    };
-                                                    setReferenceDate(baseReferenceDate);
-                                                    setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
-                                                    setWindowDays(resolvedDefaultRangeDays);
-                                                    setDraftRange(nextRange);
-                                                    onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Current Day" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: getMonthStart(referenceDate),
-                                                        endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
-                                                    };
-                                                    const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
-                                                        ? getMonthEnd(referenceDate)
-                                                        : nextRange.endDate;
-                                                    const normalizedRange = {
-                                                        startDate: nextRange.startDate,
-                                                        endDate: clampedEndDate,
-                                                    };
-                                                    setDraftRange(normalizedRange);
-                                                    setWindowDays(getInclusiveDayCount(normalizedRange));
-                                                    setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextMonth');
-                                                    shiftReferenceDateByMonths(1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsxRuntime.jsx(icons.ChevronRightIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextYear');
-                                                    shiftReferenceDateByYears(1);
-                                                }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsxRuntime.jsx(icons.ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxRuntime.jsxs("div", { className: "relative h-24", children: [jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_g = monthLabels[0]) !== null && _g !== void 0 ? _g : formatMonthShort((_h = trackBounds.startDate) !== null && _h !== void 0 ? _h : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
-                                                    { label: '+7', days: 7 },
-                                                    { label: '+10', days: 10 },
-                                                    { label: '+15', days: 15 },
-                                                    { label: '+30', days: 30 },
-                                                ].map((item) => (jsxRuntime.jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_j = monthLabels[1]) !== null && _j !== void 0 ? _j : formatMonthShort((_k = trackBounds.endDate) !== null && _k !== void 0 ? _k : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
-                                            event.stopPropagation();
-                                            resetReferenceFromClientX(event.clientX);
-                                        }, children: jsxRuntime.jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
-                                                        return (jsxRuntime.jsx("span", { className: "flex justify-center", children: jsxRuntime.jsx("span", { className: utils.cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
-                                                    }) }), jsxRuntime.jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border border-sky-500 bg-white dark:border-sky-300 dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('window', event.pointerId, event.clientX);
-                                                    }, children: jsxRuntime.jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsxRuntime.jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${startHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('start', event.pointerId);
-                                                    }, "aria-label": "Adjust start date" }), jsxRuntime.jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${endHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('end', event.pointerId);
-                                                    }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsxRuntime.jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxRuntime.jsxs("div", { className: "space-y-5 p-4", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsxRuntime.jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxRuntime.jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.XIcon, { className: "h-4 w-4" }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                    void runDialogAction('confirm', handleApply);
+                                                }, disabled: !draftRange.startDate || !draftRange.endDate, className: utils.cn(DIALOG_ICON_BUTTON_CLASS_NAME, 'text-slate-700 dark:text-slate-100', 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-black/10 disabled:hover:bg-white disabled:hover:text-slate-700 dark:disabled:hover:border-white/10 dark:disabled:hover:bg-slate-950 dark:disabled:hover:text-slate-100'), "aria-label": "Apply", children: jsxRuntime.jsx(icons.CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevYear');
+                                                            shiftReferenceDateByYears(-1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsxRuntime.jsx(icons.ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevMonth');
+                                                            shiftReferenceDateByMonths(-1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsxRuntime.jsx(icons.ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: baseReferenceDate,
+                                                                endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
+                                                            };
+                                                            setReferenceDate(baseReferenceDate);
+                                                            setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+                                                            setWindowDays(resolvedDefaultRangeDays);
+                                                            setDraftRange(nextRange);
+                                                            onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Current Day" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: getMonthStart(referenceDate),
+                                                                endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
+                                                            };
+                                                            const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
+                                                                ? getMonthEnd(referenceDate)
+                                                                : nextRange.endDate;
+                                                            const normalizedRange = {
+                                                                startDate: nextRange.startDate,
+                                                                endDate: clampedEndDate,
+                                                            };
+                                                            setDraftRange(normalizedRange);
+                                                            setWindowDays(getInclusiveDayCount(normalizedRange));
+                                                            setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextMonth');
+                                                            shiftReferenceDateByMonths(1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsxRuntime.jsx(icons.ChevronRightIcon, { className: "h-4 w-4" }) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextYear');
+                                                            shiftReferenceDateByYears(1);
+                                                        }, className: utils.cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsxRuntime.jsx(icons.ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxRuntime.jsxs("div", { className: "relative h-24", children: [jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_g = monthLabels[0]) !== null && _g !== void 0 ? _g : formatMonthShort((_h = trackBounds.startDate) !== null && _h !== void 0 ? _h : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
+                                                            { label: '+7', days: 7 },
+                                                            { label: '+10', days: 10 },
+                                                            { label: '+15', days: 15 },
+                                                            { label: '+30', days: 30 },
+                                                        ].map((item) => (jsxRuntime.jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxRuntime.jsxs("span", { className: "relative block select-none text-center", children: [(_j = monthLabels[1]) !== null && _j !== void 0 ? _j : formatMonthShort((_k = trackBounds.endDate) !== null && _k !== void 0 ? _k : baseReferenceDate), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
+                                                    event.stopPropagation();
+                                                    resetReferenceFromClientX(event.clientX);
+                                                }, children: jsxRuntime.jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
+                                                                return (jsxRuntime.jsx("span", { className: "flex justify-center", children: jsxRuntime.jsx("span", { className: utils.cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
+                                                            }) }), jsxRuntime.jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border border-sky-500 bg-white dark:border-sky-300 dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('window', event.pointerId, event.clientX);
+                                                            }, children: jsxRuntime.jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsxRuntime.jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${startHandlePercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('start', event.pointerId);
+                                                            }, "aria-label": "Adjust start date" }), jsxRuntime.jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${endHandlePercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('end', event.pointerId);
+                                                            }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), dialogLoading] }), document.body);
 }
 
 exports.RandomDateRangeDialog = RandomDateRangeDialog;

package/dist/main/calendar/random-date-range-dialog.mjs

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { XIcon, CheckCheckIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { useDialogLoadingAction } from '../alert-dialog/dialog-loading-action.mjs';
 import { usePressFeedback } from '../buttons/use-press-feedback.mjs';
 
 const DEFAULT_RANGE_DAYS = 7;
@@ -116,7 +117,7 @@ function getMonthEnd(value) {
     const date = parseDateString(value);
     return formatDateString(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)));
 }
-function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, onApply, onClear, }) {
+function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEFAULT_RANGE_DAYS, onOpenChange, loadingActions, loadingFullPage, onApply, onClear, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const resolvedDefaultRangeDays = clampWindowDays(defaultRangeDays);
     const [draftRange, setDraftRange] = useState(value);
@@ -141,6 +142,7 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
     const buildDraggedRangeRef = useRef(() => null);
     const previousBodyOverflowRef = useRef(null);
     const today = useMemo(() => getTodayString(), []);
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const baseReferenceDate = anchorDate || today;
     const previousOpenRef = useRef(false);
     const startRatio = getRatioByDate((_a = draftRange.startDate) !== null && _a !== void 0 ? _a : baseReferenceDate, trackBounds);
@@ -158,6 +160,9 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
             .map((item) => formatMonthShort(item));
         return [...new Set(values)];
     }, [trackBounds.endDate, trackBounds.startDate]);
+    const handleApply = useCallback(() => {
+        return onApply(draftRange);
+    }, [draftRange, onApply]);
     useEffect(() => {
         if (open && !previousOpenRef.current) {
             const nextRange = {
@@ -370,76 +375,75 @@ function RandomDateRangeDialog({ open, value, anchorDate, defaultRangeDays = DEF
         };
     }, [open]);
     if (!open) {
-        return null;
+        return jsx(Fragment, { children: dialogLoading });
     }
-    return createPortal(jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxs("div", { className: "space-y-5 p-4", children: [jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsx(XIcon, { className: "h-4 w-4" }) }), jsx("button", { type: "button", onClick: () => {
-                                            onApply(draftRange);
-                                            onOpenChange(false);
-                                        }, disabled: !draftRange.startDate || !draftRange.endDate, className: cn(DIALOG_ICON_BUTTON_CLASS_NAME, 'text-slate-700 dark:text-slate-100', 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-black/10 disabled:hover:bg-white disabled:hover:text-slate-700 dark:disabled:hover:border-white/10 dark:disabled:hover:bg-slate-950 dark:disabled:hover:text-slate-100'), "aria-label": "Apply", children: jsx(CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevYear');
-                                                    shiftReferenceDateByYears(-1);
-                                                }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('prevMonth');
-                                                    shiftReferenceDateByMonths(-1);
-                                                }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: baseReferenceDate,
-                                                        endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
-                                                    };
-                                                    setReferenceDate(baseReferenceDate);
-                                                    setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
-                                                    setWindowDays(resolvedDefaultRangeDays);
-                                                    setDraftRange(nextRange);
-                                                    onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Current Day" }), jsx("button", { type: "button", onClick: () => {
-                                                    const nextRange = {
-                                                        startDate: getMonthStart(referenceDate),
-                                                        endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
-                                                    };
-                                                    const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
-                                                        ? getMonthEnd(referenceDate)
-                                                        : nextRange.endDate;
-                                                    const normalizedRange = {
-                                                        startDate: nextRange.startDate,
-                                                        endDate: clampedEndDate,
-                                                    };
-                                                    setDraftRange(normalizedRange);
-                                                    setWindowDays(getInclusiveDayCount(normalizedRange));
-                                                    setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
-                                                }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextMonth');
-                                                    shiftReferenceDateByMonths(1);
-                                                }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
-                                                    flashNavButtonPress('nextYear');
-                                                    shiftReferenceDateByYears(1);
-                                                }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
-                                                    ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
-                                                    : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxs("div", { className: "relative h-24", children: [jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxs("span", { className: "relative block select-none text-center", children: [(_g = monthLabels[0]) !== null && _g !== void 0 ? _g : formatMonthShort((_h = trackBounds.startDate) !== null && _h !== void 0 ? _h : baseReferenceDate), jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
-                                                    { label: '+7', days: 7 },
-                                                    { label: '+10', days: 10 },
-                                                    { label: '+15', days: 15 },
-                                                    { label: '+30', days: 30 },
-                                                ].map((item) => (jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxs("span", { className: "relative block select-none text-center", children: [(_j = monthLabels[1]) !== null && _j !== void 0 ? _j : formatMonthShort((_k = trackBounds.endDate) !== null && _k !== void 0 ? _k : baseReferenceDate), jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
-                                            event.stopPropagation();
-                                            resetReferenceFromClientX(event.clientX);
-                                        }, children: jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
-                                                        return (jsx("span", { className: "flex justify-center", children: jsx("span", { className: cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
-                                                    }) }), jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border border-sky-500 bg-white dark:border-sky-300 dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('window', event.pointerId, event.clientX);
-                                                    }, children: jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${startHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('start', event.pointerId);
-                                                    }, "aria-label": "Adjust start date" }), jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${endHandlePercent}%` }, onPointerDown: (event) => {
-                                                        event.stopPropagation();
-                                                        beginDrag('end', event.pointerId);
-                                                    }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), document.body);
+    return createPortal(jsxs(Fragment, { children: [jsx("div", { className: "fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm", children: jsx("div", { className: "w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950", children: jsxs("div", { className: "space-y-5 p-4", children: [jsxs("div", { className: "relative flex items-center justify-center px-16 text-center", children: [jsx("div", { ref: resultLabelRef, className: "select-none text-base font-semibold text-slate-900 dark:text-white", children: getRangeLabel(draftRange) }), jsxs("div", { className: "absolute right-0 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [jsx("button", { type: "button", onClick: () => onOpenChange(false), className: DIALOG_ICON_BUTTON_CLASS_NAME, "aria-label": "Cancel", children: jsx(XIcon, { className: "h-4 w-4" }) }), jsx("button", { type: "button", onClick: () => {
+                                                    void runDialogAction('confirm', handleApply);
+                                                }, disabled: !draftRange.startDate || !draftRange.endDate, className: cn(DIALOG_ICON_BUTTON_CLASS_NAME, 'text-slate-700 dark:text-slate-100', 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-black/10 disabled:hover:bg-white disabled:hover:text-slate-700 dark:disabled:hover:border-white/10 dark:disabled:hover:bg-slate-950 dark:disabled:hover:text-slate-100'), "aria-label": "Apply", children: jsx(CheckCheckIcon, { className: "h-4 w-4" }) })] })] }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevYear');
+                                                            shiftReferenceDateByYears(-1);
+                                                        }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevYear'), { "aria-label": "Previous year", title: "Previous year", children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('prevMonth');
+                                                            shiftReferenceDateByMonths(-1);
+                                                        }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'prevMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('prevMonth'), { "aria-label": "Previous month", title: "Previous month", children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }))] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: baseReferenceDate,
+                                                                endDate: addDays(baseReferenceDate, resolvedDefaultRangeDays - 1),
+                                                            };
+                                                            setReferenceDate(baseReferenceDate);
+                                                            setTrackBounds(buildTrackRange(baseReferenceDate, resolvedDefaultRangeDays));
+                                                            setWindowDays(resolvedDefaultRangeDays);
+                                                            setDraftRange(nextRange);
+                                                            onClear === null || onClear === void 0 ? void 0 : onClear(nextRange);
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "Current Day" }), jsx("button", { type: "button", onClick: () => {
+                                                            const nextRange = {
+                                                                startDate: getMonthStart(referenceDate),
+                                                                endDate: addDays(getMonthStart(referenceDate), MAX_RANGE_DAYS - 1),
+                                                            };
+                                                            const clampedEndDate = compareDateStrings(nextRange.endDate, getMonthEnd(referenceDate)) > 0
+                                                                ? getMonthEnd(referenceDate)
+                                                                : nextRange.endDate;
+                                                            const normalizedRange = {
+                                                                startDate: nextRange.startDate,
+                                                                endDate: clampedEndDate,
+                                                            };
+                                                            setDraftRange(normalizedRange);
+                                                            setWindowDays(getInclusiveDayCount(normalizedRange));
+                                                            setTrackBounds(buildTrackRange(normalizedRange.startDate, getInclusiveDayCount(normalizedRange)));
+                                                        }, className: DIALOG_PILL_BUTTON_CLASS_NAME, children: "This Month" })] }), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextMonth');
+                                                            shiftReferenceDateByMonths(1);
+                                                        }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextMonth'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextMonth'), { "aria-label": "Next month", title: "Next month", children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) })), jsx("button", Object.assign({ type: "button", onClick: () => {
+                                                            flashNavButtonPress('nextYear');
+                                                            shiftReferenceDateByYears(1);
+                                                        }, className: cn(DIALOG_NAV_BUTTON_CLASS_NAME, pressedNavButton === 'nextYear'
+                                                            ? DIALOG_NAV_BUTTON_PRESSED_CLASS_NAME
+                                                            : DIALOG_NAV_BUTTON_REST_CLASS_NAME) }, getNavButtonPressProps('nextYear'), { "aria-label": "Next year", title: "Next year", children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) }))] })] }), jsxs("div", { className: "relative h-24", children: [jsxs("div", { className: "absolute inset-x-0 top-0 grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-sm font-semibold text-slate-500 dark:text-slate-400", children: [jsxs("span", { className: "relative block select-none text-center", children: [(_g = monthLabels[0]) !== null && _g !== void 0 ? _g : formatMonthShort((_h = trackBounds.startDate) !== null && _h !== void 0 ? _h : baseReferenceDate), jsx("span", { className: "pointer-events-none absolute left-1/2 top-7 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsx("span", { className: "pointer-events-none absolute left-1/2 top-[1.95rem] h-9 w-0.5 -translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] }), jsx("div", { className: "flex min-w-0 items-center justify-center gap-1", children: [
+                                                            { label: '+7', days: 7 },
+                                                            { label: '+10', days: 10 },
+                                                            { label: '+15', days: 15 },
+                                                            { label: '+30', days: 30 },
+                                                        ].map((item) => (jsx("button", { type: "button", onClick: () => applyQuickRange(item.days), className: DIALOG_PILL_BUTTON_COMPACT_CLASS_NAME, children: item.label }, item.label))) }), jsxs("span", { className: "relative block select-none text-center", children: [(_j = monthLabels[1]) !== null && _j !== void 0 ? _j : formatMonthShort((_k = trackBounds.endDate) !== null && _k !== void 0 ? _k : baseReferenceDate), jsx("span", { className: "pointer-events-none absolute right-1/2 top-7 h-2.5 w-2.5 translate-x-1/2 rounded-full bg-slate-400 dark:bg-slate-500" }), jsx("span", { className: "pointer-events-none absolute right-1/2 top-[1.95rem] h-9 w-0.5 translate-x-1/2 bg-slate-400 dark:bg-slate-500" })] })] }), jsx("div", { className: "absolute inset-x-0 top-[3.35rem] h-10 touch-none", onDoubleClick: (event) => {
+                                                    event.stopPropagation();
+                                                    resetReferenceFromClientX(event.clientX);
+                                                }, children: jsxs("div", { ref: trackRef, className: "absolute inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-full bg-slate-400/30 dark:bg-slate-500/25", children: [jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-1/2 grid h-8 -translate-y-1/2 items-center", style: { gridTemplateColumns: `repeat(${trackTickCount}, minmax(0, 1fr))` }, children: Array.from({ length: trackTickCount }, (_, index) => {
+                                                                return (jsx("span", { className: "flex justify-center", children: jsx("span", { className: cn('rounded-full bg-slate-400/55 dark:bg-slate-500/55', 'h-3 w-px') }) }, index));
+                                                            }) }), jsx("div", { ref: selectionRef, className: "absolute top-1/2 z-10 h-4 touch-none -translate-y-1/2 overflow-visible rounded-md border border-sky-500 bg-white dark:border-sky-300 dark:bg-slate-950", style: { left: `${leftPercent}%`, width: `${widthPercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('window', event.pointerId, event.clientX);
+                                                            }, children: jsx("div", { ref: selectionDaysRef, className: "pointer-events-none absolute inset-0 z-30 flex select-none items-center justify-center text-xs font-semibold text-sky-700 dark:text-sky-100", children: `${getInclusiveDayCount(draftRange)}D` }) }), jsx("button", { ref: startHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${startHandlePercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('start', event.pointerId);
+                                                            }, "aria-label": "Adjust start date" }), jsx("button", { ref: endHandleRef, type: "button", className: "absolute top-1/2 z-20 h-6 w-6 touch-none -translate-x-1/2 -translate-y-1/2 rounded-full border border-sky-500 bg-white shadow-sm dark:border-sky-300 dark:bg-slate-950", style: { left: `${endHandlePercent}%` }, onPointerDown: (event) => {
+                                                                event.stopPropagation();
+                                                                beginDrag('end', event.pointerId);
+                                                            }, "aria-label": "Adjust end date" })] }) })] })] })] }) }) }), dialogLoading] }), document.body);
 }
 
 export { RandomDateRangeDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "29.2.0",
+  "version": "29.2.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -233,8 +233,8 @@
     "unified": "^11.0.5",
     "zod": "^4.3.6",
     "@windrun-huaiin/base-ui": "^29.0.2",
-    "@windrun-huaiin/lib": "^29.0.0",
-    "@windrun-huaiin/contracts": "^29.0.0"
+    "@windrun-huaiin/contracts": "^29.0.0",
+    "@windrun-huaiin/lib": "^29.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/main/alert-dialog/confirm-dialog.tsx

@@ -39,6 +39,7 @@ interface ConfirmDialogProps {
   confirmText?: string;
   emphasis?: ConfirmDialogEmphasis;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onCancel?: DialogActionHandler;
   onConfirm?: DialogActionHandler;
 }
@@ -76,6 +77,7 @@ export function ConfirmDialog({
   confirmText = 'Confirm',
   emphasis = 'confirm',
   loadingActions,
+  loadingFullPage,
   onCancel,
   onConfirm,
 }: ConfirmDialogProps) {
@@ -83,7 +85,7 @@ export function ConfirmDialog({
   const Icon = typeClass.Icon;
   const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : secondaryButtonClass;
   const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : typeClass.action;
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
 
   const handleCancel = () => {
     void runDialogAction('cancel', onCancel);

package/src/main/alert-dialog/dialog-loading-action.tsx

@@ -9,11 +9,13 @@ export type DialogActionHandler = () => void | Promise<void>;
 
 interface UseDialogLoadingActionOptions {
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
 export function useDialogLoadingAction({
   loadingActions,
+  loadingFullPage = false,
   onOpenChange,
 }: UseDialogLoadingActionOptions) {
   const [mounted, setMounted] = React.useState(false);
@@ -49,9 +51,22 @@ export function useDialogLoadingAction({
 
   const dialogLoading = mounted && loading
     ? createPortal(
-      <div className="fixed inset-0 z-10000">
-        <Loading className="h-full w-full" />
-      </div>,
+      loadingFullPage ? (
+        <div className="fixed inset-0 z-10000">
+          <Loading className="h-full w-full" />
+        </div>
+      ) : (
+        <div className="pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4">
+          <div className="pointer-events-auto overflow-hidden rounded-[28px] bg-neutral-50/58 shadow-[0_18px_56px_rgba(15,23,42,0.14)] backdrop-blur-md dark:bg-neutral-900/58 dark:shadow-[0_18px_56px_rgba(0,0,0,0.34)]">
+            <Loading
+              compact
+              label="Loading"
+              className="min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent"
+              labelClassName="text-foreground"
+            />
+          </div>
+        </div>
+      ),
       document.body
     )
     : null;

package/src/main/alert-dialog/high-priority-confirm-dialog.tsx

@@ -27,6 +27,7 @@ interface HighPriorityConfirmDialogProps {
   confirmText?: string;
   cancelText?: string;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
 }
 
 export function HighPriorityConfirmDialog({
@@ -39,9 +40,10 @@ export function HighPriorityConfirmDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   loadingActions,
+  loadingFullPage,
 }: HighPriorityConfirmDialogProps) {
   const [mounted, setMounted] = useState(false);
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
   
   useEffect(() => {
     // Ensure portal target exists and prevent hydration mismatch

package/src/main/alert-dialog/info-dialog.tsx

@@ -38,6 +38,7 @@ interface InfoDialogProps {
   description: React.ReactNode;
   confirmText?: string;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onConfirm?: DialogActionHandler;
 }
 
@@ -86,12 +87,13 @@ export function InfoDialog({
   description,
   confirmText = 'OK',
   loadingActions,
+  loadingFullPage,
   onConfirm,
 }: InfoDialogProps) {
   const typeClass = infoTypeClassMap[type];
   const Icon = typeClass.Icon;
   const handleClose = () => onOpenChange(false);
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
 
   return (
     <>

package/src/main/alert-dialog/undoable-confirm-dialog.tsx

@@ -37,6 +37,7 @@ export interface UndoableConfirmDialogProps {
   emphasis?: ConfirmDialogEmphasis;
   countdownSeconds?: number;
   loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
   onCancel?: DialogActionHandler;
   onConfirm: DialogActionHandler;
   onUndo?: DialogActionHandler;
@@ -55,6 +56,7 @@ export function UndoableConfirmDialog({
   emphasis = 'confirm',
   countdownSeconds = 5,
   loadingActions,
+  loadingFullPage,
   onCancel,
   onConfirm,
   onUndo,
@@ -67,7 +69,7 @@ export function UndoableConfirmDialog({
   const intervalRef = React.useRef<number | null>(null);
   const cancelButtonClass = emphasis === 'cancel' ? dangerButtonClass : secondaryButtonClass;
   const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : dangerButtonClass;
-  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
 
   const clearTimers = React.useCallback(() => {
     if (timeoutRef.current) {

package/src/main/calendar/random-date-range-dialog.tsx

@@ -11,6 +11,7 @@ import {
   XIcon,
 } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from '../alert-dialog/dialog-loading-action';
 import { usePressFeedback } from '../buttons/use-press-feedback';
 
 export type RandomCalendarRange = {
@@ -24,7 +25,9 @@ type RandomDateRangeDialogProps = {
   anchorDate: string;
   defaultRangeDays?: number;
   onOpenChange: (open: boolean) => void;
-  onApply: (range: RandomCalendarRange) => void;
+  loadingActions?: readonly DialogLoadingAction[];
+  loadingFullPage?: boolean;
+  onApply: (range: RandomCalendarRange) => void | Promise<void>;
   onClear?: (range: RandomCalendarRange) => void;
 };
 
@@ -180,6 +183,8 @@ export function RandomDateRangeDialog({
   anchorDate,
   defaultRangeDays = DEFAULT_RANGE_DAYS,
   onOpenChange,
+  loadingActions,
+  loadingFullPage,
   onApply,
   onClear,
 }: RandomDateRangeDialogProps) {
@@ -210,6 +215,7 @@ export function RandomDateRangeDialog({
   const buildDraggedRangeRef = useRef<(clientX: number) => RandomCalendarRange | null>(() => null);
   const previousBodyOverflowRef = useRef<string | null>(null);
   const today = useMemo(() => getTodayString(), []);
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
   const baseReferenceDate = anchorDate || today;
   const previousOpenRef = useRef(false);
   const startRatio = getRatioByDate(draftRange.startDate ?? baseReferenceDate, trackBounds);
@@ -229,6 +235,10 @@ export function RandomDateRangeDialog({
     return [...new Set(values)];
   }, [trackBounds.endDate, trackBounds.startDate]);
 
+  const handleApply = useCallback<DialogActionHandler>(() => {
+    return onApply(draftRange);
+  }, [draftRange, onApply]);
+
   useEffect(() => {
     if (open && !previousOpenRef.current) {
       const nextRange = {
@@ -472,12 +482,13 @@ export function RandomDateRangeDialog({
   }, [open]);
 
   if (!open) {
-    return null;
+    return <>{dialogLoading}</>;
   }
 
   return createPortal(
-    <div className="fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm">
-      <div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950">
+    <>
+      <div className="fixed inset-0 z-120 flex select-none items-center justify-center bg-slate-950/60 px-3 py-6 backdrop-blur-sm">
+        <div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-black/10 bg-white shadow-2xl dark:border-white/10 dark:bg-slate-950">
         <div className="space-y-5 p-4">
           <div className="relative flex items-center justify-center px-16 text-center">
             <div ref={resultLabelRef} className="select-none text-base font-semibold text-slate-900 dark:text-white">{getRangeLabel(draftRange)}</div>
@@ -493,8 +504,7 @@ export function RandomDateRangeDialog({
               <button
                 type="button"
                 onClick={() => {
-                  onApply(draftRange);
-                  onOpenChange(false);
+                  void runDialogAction('confirm', handleApply);
                 }}
                 disabled={!draftRange.startDate || !draftRange.endDate}
                 className={cn(
@@ -734,8 +744,10 @@ export function RandomDateRangeDialog({
 
           </div>
         </div>
+        </div>
       </div>
-    </div>,
+      {dialogLoading}
+    </>,
     document.body
   );
 }