zkit-ui 1.0.0

package/dist/services/LoadingService/index.js

@@ -0,0 +1,827 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loading = void 0;
+exports.LoadingProvider = LoadingProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file LoadingService
+ *
+ * A global, service-driven loading HUD. The service owns scheduling and
+ * collision rules; the Provider only renders the current snapshot.
+ */
+const React = __importStar(require("react"));
+const vector_icons_1 = require("@expo/vector-icons");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const LoadingSpinner_1 = require("../../ui/LoadingSpinner");
+const Text_1 = require("../../ui/Text");
+// ============================================================================
+// Defaults
+// ============================================================================
+const DEFAULT_LABELS = {
+    loading: 'Loading',
+    success: 'Done',
+    error: 'Failed',
+};
+const DEFAULTS = {
+    blocking: true,
+    loadingTimeout: 15000,
+    successDuration: 1200,
+    errorDuration: 1600,
+    accessibilityLiveRegion: 'polite',
+    labels: DEFAULT_LABELS,
+    colors: {
+        card: '#4d4d4d',
+    },
+};
+const EMPTY_SNAPSHOT = { item: null };
+const DEFAULT_ID_PREFIX = 'loading';
+const HOST_Z_INDEX = 9999;
+const ENTER_DURATION = 170;
+const EXIT_DURATION = 150;
+const CONTENT_SWAP_DURATION = 130;
+const HUD_MIN_WIDTH = (0, zkit_tools_1.wp)(116);
+const HUD_MAX_WIDTH = (0, zkit_tools_1.wp)(260);
+const HUD_MIN_HEIGHT = (0, zkit_tools_1.wp)(116);
+const HUD_RADIUS = (0, zkit_tools_1.wp)(10);
+const HUD_PADDING_HORIZONTAL = (0, zkit_tools_1.wp)(16);
+const HUD_PADDING_VERTICAL = (0, zkit_tools_1.wp)(16);
+const ICON_FRAME_SIZE = (0, zkit_tools_1.wp)(42);
+const LOADING_ICON_SIZE = (0, zkit_tools_1.wp)(34);
+const RESULT_ICON_SIZE = (0, zkit_tools_1.wp)(36);
+const TITLE_MARGIN_TOP = (0, zkit_tools_1.wp)(8);
+const DESCRIPTION_MARGIN_TOP = (0, zkit_tools_1.wp)(4);
+const TITLE_MAX_WIDTH = (0, zkit_tools_1.wp)(214);
+const IOS_SHADOW_OFFSET_Y = (0, zkit_tools_1.wp)(9);
+const IOS_SHADOW_RADIUS = (0, zkit_tools_1.wp)(22);
+const CONTENT_ENTER_OFFSET = (0, zkit_tools_1.wp)(3);
+const HOST_BACKDROP = 'transparent';
+const IS_IOS = react_native_1.Platform.OS === 'ios';
+const IS_ANDROID = react_native_1.Platform.OS === 'android';
+const IS_WEB = react_native_1.Platform.OS === 'web';
+const ENTER_EASING = react_native_reanimated_1.Easing.bezier(0.22, 1, 0.36, 1);
+const EXIT_EASING = react_native_reanimated_1.Easing.bezier(0.4, 0, 1, 1);
+const CONTENT_EASING = react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic);
+const ENTER_SPRING = {
+    damping: 18,
+    stiffness: 260,
+    mass: 0.72,
+};
+const webShadowStyle = IS_WEB
+    ? {
+        boxShadow: '0 18px 42px rgba(15, 23, 42, 0.24)',
+    }
+    : undefined;
+// ============================================================================
+// Normalizers
+// ============================================================================
+function isFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function normalizeMs(value, fallback) {
+    if (!isFiniteNumber(value))
+        return fallback;
+    return Math.max(0, value);
+}
+function normalizeLiveRegion(value, fallback) {
+    if (value === 'none' || value === 'polite' || value === 'assertive')
+        return value;
+    return fallback;
+}
+function normalizeStatus(value, fallback) {
+    if (value === 'loading' || value === 'success' || value === 'error')
+        return value;
+    return fallback;
+}
+function normalizeId(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const id = value.trim();
+    return id || undefined;
+}
+function normalizeNode(value) {
+    if (value == null || value === false || value === true)
+        return undefined;
+    if (value instanceof Error)
+        return value.message || String(value);
+    return value;
+}
+function isOptionsInput(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value) || React.isValidElement(value))
+        return false;
+    if (value instanceof Error)
+        return false;
+    return ('id' in value ||
+        'status' in value ||
+        'title' in value ||
+        'description' in value ||
+        'blocking' in value ||
+        'duration' in value ||
+        'timeout' in value ||
+        'icon' in value ||
+        'render' in value ||
+        'colors' in value ||
+        'accessibilityLabel' in value ||
+        'accessibilityLiveRegion' in value ||
+        'testID' in value ||
+        'style' in value ||
+        'onDismiss' in value ||
+        'onOpenChange' in value);
+}
+function getTextFromNode(value) {
+    if (value == null || typeof value === 'boolean')
+        return '';
+    if (typeof value === 'string')
+        return value.trim();
+    if (typeof value === 'number')
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(getTextFromNode).filter(Boolean).join(' ').trim();
+    if (React.isValidElement(value))
+        return getTextFromNode(value.props.children);
+    return '';
+}
+function createAccessibilityLabel(status, title, description, labels) {
+    const titleText = getTextFromNode(title);
+    const descriptionText = getTextFromNode(description);
+    const statusText = labels[status];
+    const text = [titleText, descriptionText].filter(Boolean).join('，');
+    if (!text || text === statusText)
+        return statusText;
+    return `${statusText}，${text}`;
+}
+function getHandleId(idOrHandle) {
+    if (!idOrHandle)
+        return undefined;
+    if (typeof idOrHandle === 'string')
+        return normalizeId(idOrHandle);
+    return normalizeId(idOrHandle.id);
+}
+function getStatusDefaultDuration(status, defaults) {
+    if (status === 'success')
+        return defaults.successDuration;
+    if (status === 'error')
+        return defaults.errorDuration;
+    return 0;
+}
+function getStatusDefaultBlocking(status, defaults) {
+    return status === 'loading' ? defaults.blocking : false;
+}
+function mergeDefaults(base, patch) {
+    var _a, _b, _c;
+    if (!patch)
+        return base;
+    return {
+        blocking: (_a = patch.blocking) !== null && _a !== void 0 ? _a : base.blocking,
+        loadingTimeout: normalizeMs(patch.loadingTimeout, base.loadingTimeout),
+        successDuration: normalizeMs(patch.successDuration, base.successDuration),
+        errorDuration: normalizeMs(patch.errorDuration, base.errorDuration),
+        accessibilityLiveRegion: normalizeLiveRegion(patch.accessibilityLiveRegion, base.accessibilityLiveRegion),
+        labels: {
+            ...base.labels,
+            ...((_b = patch.labels) !== null && _b !== void 0 ? _b : {}),
+        },
+        colors: patch.colors ? { ...((_c = base.colors) !== null && _c !== void 0 ? _c : {}), ...patch.colors } : base.colors,
+    };
+}
+function warnMissingProvider() {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.warn('[loading] LoadingProvider is not mounted.');
+    }
+}
+function createBusinessError(message, response, cause) {
+    const error = new Error(message || DEFAULT_LABELS.error);
+    error.response = response;
+    if (cause !== undefined)
+        error.cause = cause;
+    return error;
+}
+function coerceInputToOptions(input) {
+    if (isOptionsInput(input))
+        return input;
+    return { title: normalizeNode(input) };
+}
+function attachIdToInput(input, id) {
+    if (isOptionsInput(input))
+        return { ...input, id };
+    if (input === undefined)
+        return { id };
+    return { id, title: normalizeNode(input) };
+}
+function resolvePromiseResult(input, result) {
+    if (typeof input !== 'function')
+        return input;
+    try {
+        return input(result);
+    }
+    catch (error) {
+        console.error('[loading] success resolver failed', error);
+        return undefined;
+    }
+}
+function resolvePromiseError(input, error, result) {
+    if (typeof input !== 'function')
+        return input;
+    try {
+        return input(error, result);
+    }
+    catch (resolverError) {
+        console.error('[loading] error resolver failed', resolverError);
+        return undefined;
+    }
+}
+// ============================================================================
+// Store
+// ============================================================================
+class LoadingStore {
+    constructor() {
+        this.defaults = DEFAULTS;
+        this.snapshot = EMPTY_SNAPSHOT;
+        this.listeners = new Set();
+        this.autoHideTimer = null;
+        this.timeoutTimer = null;
+        this.idSeed = 0;
+        this.hostCount = 0;
+        this.getSnapshot = () => this.snapshot;
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            this.hostCount += 1;
+            this.scheduleCurrent();
+            return () => {
+                this.listeners.delete(listener);
+                this.hostCount = Math.max(0, this.hostCount - 1);
+                if (this.hostCount === 0)
+                    this.clearAll('provider-unmount');
+            };
+        };
+    }
+    configure(defaults) {
+        this.defaults = mergeDefaults(DEFAULTS, defaults);
+    }
+    getDefaults() {
+        return {
+            ...this.defaults,
+            labels: { ...this.defaults.labels },
+            colors: this.defaults.colors ? { ...this.defaults.colors } : undefined,
+        };
+    }
+    show(options) {
+        const item = this.resolveItem(options, 'loading');
+        return this.openItem(item);
+    }
+    success(options) {
+        const item = this.resolveItem(options, 'success');
+        return this.openItem(item);
+    }
+    error(options) {
+        const item = this.resolveItem(options, 'error');
+        return this.openItem(item);
+    }
+    async promise(promise, options = {}) {
+        const handle = options.loading === false ? null : this.show(options.loading);
+        let result;
+        try {
+            result = await promise;
+        }
+        catch (error) {
+            this.completePromiseFailure(handle, resolvePromiseError(options.error, error));
+            throw error;
+        }
+        let ok = true;
+        let successCheckError;
+        if (typeof options.isSuccess === 'function') {
+            try {
+                ok = Boolean(options.isSuccess(result));
+            }
+            catch (error) {
+                ok = false;
+                successCheckError = error;
+            }
+        }
+        if (ok) {
+            this.completePromiseSuccess(handle, resolvePromiseResult(options.success, result));
+            return result;
+        }
+        const errorInput = resolvePromiseError(options.error, successCheckError, result);
+        this.completePromiseFailure(handle, errorInput);
+        const errorOptions = coerceInputToOptions(errorInput === false ? undefined : errorInput);
+        const message = getTextFromNode(errorOptions.title) || this.defaults.labels.error;
+        throw createBusinessError(message, result, successCheckError);
+    }
+    update(idOrHandle, patch) {
+        const id = getHandleId(idOrHandle);
+        if (!id)
+            return false;
+        const current = this.snapshot.item;
+        if (!current || current.id !== id || !current.open)
+            return false;
+        const nextItem = this.applyPatch(current, patch);
+        this.setItem(nextItem);
+        this.callOpenChange(nextItem, true, 'update');
+        this.scheduleCurrent();
+        return true;
+    }
+    hide(idOrHandle, reason = 'api') {
+        var _a, _b;
+        const id = (_a = getHandleId(idOrHandle)) !== null && _a !== void 0 ? _a : (_b = this.snapshot.item) === null || _b === void 0 ? void 0 : _b.id;
+        if (!id)
+            return;
+        this.hideById(id, reason);
+    }
+    hideAll(reason = 'api') {
+        var _a;
+        const id = (_a = this.snapshot.item) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return;
+        this.hideById(id, reason);
+    }
+    isActive(idOrHandle) {
+        var _a;
+        const id = getHandleId(idOrHandle);
+        return Boolean(id && ((_a = this.snapshot.item) === null || _a === void 0 ? void 0 : _a.id) === id && this.snapshot.item.open);
+    }
+    completeExit(id) {
+        const current = this.snapshot.item;
+        if (!current || current.id !== id || current.open)
+            return;
+        this.setItem(null);
+    }
+    openItem(item) {
+        if (this.hostCount <= 0)
+            warnMissingProvider();
+        const current = this.snapshot.item;
+        if ((current === null || current === void 0 ? void 0 : current.id) === item.id) {
+            const nextItem = {
+                ...current,
+                ...item,
+                open: true,
+                createdAt: current.createdAt,
+                updatedAt: Date.now(),
+                dismissedReason: undefined,
+            };
+            this.setItem(nextItem);
+            this.callOpenChange(nextItem, true, current.open ? 'update' : 'show');
+            this.scheduleCurrent();
+            return this.createHandle(nextItem.id);
+        }
+        if (current) {
+            this.clearTimers();
+            if (current.open) {
+                this.callDismiss(current, 'replace');
+                this.callOpenChange(current, false, 'replace');
+            }
+        }
+        this.setItem(item);
+        this.callOpenChange(item, true, 'show');
+        this.scheduleCurrent();
+        return this.createHandle(item.id);
+    }
+    hideById(id, reason) {
+        const current = this.snapshot.item;
+        if (!current || current.id !== id || !current.open)
+            return;
+        this.clearTimers();
+        const nextItem = {
+            ...current,
+            open: false,
+            updatedAt: Date.now(),
+            dismissedReason: reason,
+        };
+        this.callDismiss(nextItem, reason);
+        this.callOpenChange(nextItem, false, reason);
+        this.setItem(nextItem);
+    }
+    clearAll(reason) {
+        this.clearTimers();
+        const current = this.snapshot.item;
+        if (current)
+            this.callDismiss(current, reason);
+        this.setItem(null);
+    }
+    resolveItem(input, defaultStatus) {
+        var _a, _b, _c, _d, _e;
+        const raw = coerceInputToOptions(input);
+        const status = normalizeStatus(raw.status, defaultStatus);
+        const now = Date.now();
+        const hasCustomBody = typeof raw.render === 'function';
+        const title = (_a = normalizeNode(raw.title)) !== null && _a !== void 0 ? _a : (hasCustomBody ? undefined : this.defaults.labels[status]);
+        const description = normalizeNode(raw.description);
+        const duration = normalizeMs(raw.duration, getStatusDefaultDuration(status, this.defaults));
+        const timeout = status === 'loading' ? normalizeMs(raw.timeout, this.defaults.loadingTimeout) : 0;
+        return {
+            id: (_b = normalizeId(raw.id)) !== null && _b !== void 0 ? _b : this.createId(),
+            status,
+            title,
+            description,
+            blocking: (_c = raw.blocking) !== null && _c !== void 0 ? _c : getStatusDefaultBlocking(status, this.defaults),
+            duration,
+            timeout,
+            icon: raw.icon,
+            render: raw.render,
+            colors: raw.colors ? { ...((_d = this.defaults.colors) !== null && _d !== void 0 ? _d : {}), ...raw.colors } : this.defaults.colors,
+            accessibilityLabel: (_e = raw.accessibilityLabel) !== null && _e !== void 0 ? _e : createAccessibilityLabel(status, title, description, this.defaults.labels),
+            accessibilityLiveRegion: normalizeLiveRegion(raw.accessibilityLiveRegion, this.defaults.accessibilityLiveRegion),
+            testID: raw.testID,
+            style: raw.style,
+            open: true,
+            createdAt: now,
+            updatedAt: now,
+            onDismiss: raw.onDismiss,
+            onOpenChange: raw.onOpenChange,
+        };
+    }
+    applyPatch(item, patch) {
+        var _a, _b, _c, _d, _e, _f;
+        const status = normalizeStatus(patch.status, item.status);
+        const title = 'title' in patch ? normalizeNode(patch.title) : item.title;
+        const description = 'description' in patch ? normalizeNode(patch.description) : item.description;
+        const duration = 'duration' in patch ? normalizeMs(patch.duration, getStatusDefaultDuration(status, this.defaults)) : item.duration;
+        const timeout = status === 'loading'
+            ? 'timeout' in patch
+                ? normalizeMs(patch.timeout, this.defaults.loadingTimeout)
+                : item.timeout
+            : 0;
+        return {
+            ...item,
+            status,
+            title,
+            description,
+            blocking: (_a = patch.blocking) !== null && _a !== void 0 ? _a : item.blocking,
+            duration,
+            timeout,
+            icon: 'icon' in patch ? patch.icon : item.icon,
+            render: 'render' in patch ? patch.render : item.render,
+            colors: patch.colors ? { ...((_b = item.colors) !== null && _b !== void 0 ? _b : {}), ...patch.colors } : item.colors,
+            accessibilityLabel: (_c = patch.accessibilityLabel) !== null && _c !== void 0 ? _c : createAccessibilityLabel(status, title, description, this.defaults.labels),
+            accessibilityLiveRegion: normalizeLiveRegion(patch.accessibilityLiveRegion, item.accessibilityLiveRegion),
+            testID: (_d = patch.testID) !== null && _d !== void 0 ? _d : item.testID,
+            style: 'style' in patch ? patch.style : item.style,
+            updatedAt: Date.now(),
+            onDismiss: (_e = patch.onDismiss) !== null && _e !== void 0 ? _e : item.onDismiss,
+            onOpenChange: (_f = patch.onOpenChange) !== null && _f !== void 0 ? _f : item.onOpenChange,
+        };
+    }
+    scheduleCurrent() {
+        this.clearTimers();
+        const current = this.snapshot.item;
+        if (!current || !current.open || this.hostCount <= 0)
+            return;
+        if (current.duration > 0) {
+            this.autoHideTimer = setTimeout(() => {
+                this.hideById(current.id, 'timeout');
+            }, current.duration);
+        }
+        if (current.status === 'loading' && current.timeout > 0) {
+            this.timeoutTimer = setTimeout(() => {
+                this.hideById(current.id, 'timeout');
+            }, current.timeout);
+        }
+    }
+    clearTimers() {
+        if (this.autoHideTimer) {
+            clearTimeout(this.autoHideTimer);
+            this.autoHideTimer = null;
+        }
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+    }
+    setItem(item) {
+        this.snapshot = item ? { item } : EMPTY_SNAPSHOT;
+        this.listeners.forEach((listener) => listener());
+    }
+    completePromiseSuccess(handle, input) {
+        if (input === false) {
+            handle === null || handle === void 0 ? void 0 : handle.hide();
+            return;
+        }
+        if (handle && !this.isActive(handle))
+            return;
+        this.success(handle ? attachIdToInput(input, handle.id) : input);
+    }
+    completePromiseFailure(handle, input) {
+        if (input === false) {
+            handle === null || handle === void 0 ? void 0 : handle.hide();
+            return;
+        }
+        if (handle && !this.isActive(handle))
+            return;
+        this.error(handle ? attachIdToInput(input, handle.id) : input);
+    }
+    createId() {
+        this.idSeed += 1;
+        return `${DEFAULT_ID_PREFIX}_${Date.now()}_${this.idSeed}`;
+    }
+    createHandle(id) {
+        return {
+            id,
+            hide: (reason = 'api') => this.hide(id, reason),
+            update: (patch) => {
+                this.update(id, patch);
+            },
+            success: (options) => {
+                this.success(attachIdToInput(options, id));
+            },
+            error: (options) => {
+                this.error(attachIdToInput(options, id));
+            },
+            isActive: () => this.isActive(id),
+        };
+    }
+    callDismiss(item, reason) {
+        var _a;
+        if (item.dismissedReason && item.dismissedReason !== reason)
+            return;
+        try {
+            (_a = item.onDismiss) === null || _a === void 0 ? void 0 : _a.call(item, reason, item.id);
+        }
+        catch (error) {
+            console.error('[loading] onDismiss failed', error);
+        }
+    }
+    callOpenChange(item, open, reason) {
+        var _a;
+        try {
+            (_a = item.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(item, open, { id: item.id, open, reason, status: item.status });
+        }
+        catch (error) {
+            console.error('[loading] onOpenChange failed', error);
+        }
+    }
+}
+const loadingStore = new LoadingStore();
+exports.loading = loadingStore;
+// ============================================================================
+// Provider
+// ============================================================================
+function useLoadingSnapshot() {
+    return React.useSyncExternalStore(loadingStore.subscribe, loadingStore.getSnapshot, loadingStore.getSnapshot);
+}
+function LoadingProvider({ children, defaults }) {
+    const snapshot = useLoadingSnapshot();
+    const { t } = (0, useI18n_1.useI18n)();
+    const providerDefaults = React.useMemo(() => {
+        var _a;
+        return ({
+            ...defaults,
+            labels: {
+                loading: t('loading.loading'),
+                success: t('loading.success'),
+                error: t('loading.error'),
+                ...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.labels) !== null && _a !== void 0 ? _a : {}),
+            },
+        });
+    }, [defaults, t]);
+    React.useEffect(() => {
+        loadingStore.configure(providerDefaults);
+    }, [providerDefaults]);
+    const handleExited = React.useCallback((id) => {
+        loadingStore.completeExit(id);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(LoadingHost, { item: snapshot.item, onExited: handleExited })] }));
+}
+function LoadingHost({ item, onExited }) {
+    if (!item)
+        return null;
+    const pointerEvents = item.open ? (item.blocking ? 'auto' : 'none') : 'none';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: pointerEvents, style: styles.host, accessibilityElementsHidden: !item.open, importantForAccessibility: item.open ? 'yes' : 'no-hide-descendants', collapsable: false, children: (0, jsx_runtime_1.jsx)(LoadingCard, { item: item, onExited: onExited }) }));
+}
+function resolveColors(item, themeColors) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return {
+        backdrop: (_b = (_a = item.colors) === null || _a === void 0 ? void 0 : _a.backdrop) !== null && _b !== void 0 ? _b : (item.blocking ? HOST_BACKDROP : 'transparent'),
+        card: (_d = (_c = item.colors) === null || _c === void 0 ? void 0 : _c.card) !== null && _d !== void 0 ? _d : themeColors.onSurface,
+        foreground: (_f = (_e = item.colors) === null || _e === void 0 ? void 0 : _e.foreground) !== null && _f !== void 0 ? _f : themeColors.surface,
+        shadow: (_h = (_g = item.colors) === null || _g === void 0 ? void 0 : _g.shadow) !== null && _h !== void 0 ? _h : '#000000',
+    };
+}
+function LoadingCard({ item, onExited }) {
+    const theme = (0, useTheme_1.useTheme)();
+    const colors = resolveColors(item, theme.colors);
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0);
+    const scale = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0.965);
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(item.open ? 0 : CONTENT_ENTER_OFFSET);
+    const contentProgress = (0, react_native_reanimated_1.useSharedValue)(item.open ? 1 : 0);
+    const previousIdRef = React.useRef(item.id);
+    React.useEffect(() => {
+        return () => {
+            (0, react_native_reanimated_1.cancelAnimation)(opacity);
+            (0, react_native_reanimated_1.cancelAnimation)(scale);
+            (0, react_native_reanimated_1.cancelAnimation)(translateY);
+            (0, react_native_reanimated_1.cancelAnimation)(contentProgress);
+        };
+    }, [contentProgress, opacity, scale, translateY]);
+    React.useEffect(() => {
+        const isNewItem = previousIdRef.current !== item.id;
+        previousIdRef.current = item.id;
+        (0, react_native_reanimated_1.cancelAnimation)(opacity);
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        (0, react_native_reanimated_1.cancelAnimation)(contentProgress);
+        if (item.open) {
+            if (isNewItem || opacity.value <= 0.02) {
+                opacity.value = 0;
+                scale.value = 0.965;
+                translateY.value = CONTENT_ENTER_OFFSET;
+                contentProgress.value = 0;
+            }
+            opacity.value = (0, react_native_reanimated_1.withTiming)(1, {
+                duration: ENTER_DURATION,
+                easing: ENTER_EASING,
+                reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+            });
+            scale.value = (0, react_native_reanimated_1.withSpring)(1, ENTER_SPRING);
+            translateY.value = (0, react_native_reanimated_1.withSpring)(0, ENTER_SPRING);
+            contentProgress.value = (0, react_native_reanimated_1.withTiming)(1, {
+                duration: CONTENT_SWAP_DURATION,
+                easing: CONTENT_EASING,
+                reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+            });
+            return;
+        }
+        opacity.value = (0, react_native_reanimated_1.withTiming)(0, {
+            duration: EXIT_DURATION,
+            easing: EXIT_EASING,
+            reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+        }, (finished) => {
+            if (finished)
+                (0, react_native_worklets_1.scheduleOnRN)(onExited, item.id);
+        });
+        scale.value = (0, react_native_reanimated_1.withTiming)(0.965, {
+            duration: EXIT_DURATION,
+            easing: EXIT_EASING,
+            reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+        });
+        translateY.value = (0, react_native_reanimated_1.withTiming)(CONTENT_ENTER_OFFSET, {
+            duration: EXIT_DURATION,
+            easing: EXIT_EASING,
+            reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+        });
+        contentProgress.value = (0, react_native_reanimated_1.withTiming)(0, {
+            duration: Math.min(EXIT_DURATION, CONTENT_SWAP_DURATION),
+            easing: EXIT_EASING,
+            reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+        });
+    }, [contentProgress, item.id, item.open, onExited, opacity, scale, translateY]);
+    const backdropStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: opacity.value,
+    }));
+    const frameStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const progress = opacity.value;
+        return {
+            opacity: progress,
+            transform: [{ translateY: translateY.value }, { scale: scale.value }],
+            ...(IS_IOS
+                ? {
+                    shadowOpacity: (0, react_native_reanimated_1.interpolate)(progress, [0, 1], [0, 0.22]),
+                    shadowRadius: (0, react_native_reanimated_1.interpolate)(progress, [0, 1], [0, IOS_SHADOW_RADIUS]),
+                }
+                : null),
+        };
+    });
+    const contentStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [0.72, 1]),
+        transform: [{ translateY: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [CONTENT_ENTER_OFFSET, 0]) }],
+    }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: item.open && item.blocking ? 'auto' : 'none', renderToHardwareTextureAndroid: IS_ANDROID && item.open, style: [
+                    styles.frame,
+                    webShadowStyle,
+                    IS_IOS ? { shadowColor: colors.shadow } : undefined,
+                    frameStyle,
+                ], collapsable: false, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.card, item.style, { backgroundColor: colors.card }], testID: item.testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { accessible: item.open, accessibilityLabel: item.accessibilityLabel, accessibilityLiveRegion: item.accessibilityLiveRegion, accessibilityViewIsModal: item.blocking, style: [styles.content, contentStyle], children: renderLoadingContent(item, colors) }) }) })] }));
+}
+function renderLoadingContent(item, colors) {
+    var _a;
+    const defaultIcon = renderDefaultIcon(item, colors);
+    const context = {
+        item,
+        id: item.id,
+        status: item.status,
+        title: item.title,
+        description: item.description,
+        open: item.open,
+        hide: (reason = 'api') => loadingStore.hide(item.id, reason),
+        update: (patch) => {
+            loadingStore.update(item.id, patch);
+        },
+        defaultIcon,
+    };
+    if (item.render) {
+        try {
+            return (_a = item.render(context)) !== null && _a !== void 0 ? _a : null;
+        }
+        catch (error) {
+            console.error('[loading] render failed', error);
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [defaultIcon, item.title ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { align: "center", numberOfLines: 2, size: "sm", weight: "semibold", style: [styles.title, { color: colors.foreground }], children: item.title })) : null, item.description ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { align: "center", numberOfLines: 3, size: "xs", weight: "regular", style: [styles.description, { color: colors.foreground }], children: item.description })) : null] }));
+}
+function renderDefaultIcon(item, colors) {
+    const color = colors.foreground;
+    const size = item.status === 'loading' ? LOADING_ICON_SIZE : RESULT_ICON_SIZE;
+    const iconContext = {
+        item,
+        status: item.status,
+        color,
+        size,
+    };
+    if (item.icon === false)
+        return null;
+    if (typeof item.icon === 'function')
+        return item.icon(iconContext);
+    if (item.icon)
+        return item.icon;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.iconFrame, children: item.status === 'loading' ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { size: LOADING_ICON_SIZE, color: colors.foreground, speed: 1.2, animating: item.open })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: item.status === 'success' ? 'check' : 'x', size: RESULT_ICON_SIZE, color: color })) }));
+}
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = react_native_1.StyleSheet.create({
+    host: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: HOST_Z_INDEX,
+    },
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    frame: {
+        alignSelf: 'center',
+        borderRadius: HUD_RADIUS,
+        maxWidth: HUD_MAX_WIDTH,
+        ...react_native_1.Platform.select({
+            ios: {
+                shadowOffset: { width: (0, zkit_tools_1.wp)(0), height: IOS_SHADOW_OFFSET_Y },
+            },
+        }),
+    },
+    card: {
+        minWidth: HUD_MIN_WIDTH,
+        maxWidth: HUD_MAX_WIDTH,
+        minHeight: HUD_MIN_HEIGHT,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: HUD_RADIUS,
+        overflow: 'hidden',
+        paddingHorizontal: HUD_PADDING_HORIZONTAL,
+        paddingVertical: HUD_PADDING_VERTICAL,
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconFrame: {
+        width: ICON_FRAME_SIZE,
+        height: ICON_FRAME_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        maxWidth: TITLE_MAX_WIDTH,
+        marginTop: TITLE_MARGIN_TOP,
+    },
+    description: {
+        maxWidth: TITLE_MAX_WIDTH,
+        marginTop: DESCRIPTION_MARGIN_TOP,
+        opacity: 0.82,
+    },
+});