@hanzogui/toast 8.3.1 → 8.3.3

package/dist/native/ToastComposable.js

@@ -0,0 +1,843 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from '@hanzogui/animate-presence';
+import { isWeb } from '@hanzogui/constants';
+import { getGestureHandler } from '@hanzogui/native';
+import { createStyledContext, styled, Theme, useConfiguration, useEvent, useThemeName, View, } from '@hanzogui/core';
+import { withStaticProperties } from '@hanzogui/helpers';
+import { Portal } from '@hanzogui/portal';
+import { XStack, YStack } from '@hanzogui/stacks';
+import { SizableText } from '@hanzogui/text';
+import * as React from 'react';
+import { ToastState } from './ToastState.js';
+import { dispatchNativeToast } from './dispatchNativeToast.js';
+import { useAnimatedDragGesture } from './useAnimatedDragGesture.js';
+import { useToastAnimations } from './useToastAnimations.js';
+import { useReducedMotion } from './useReducedMotion.js';
+import { DefaultCloseIcon, ToastActionFrame, ToastCloseFrame, ToastItemFrame, ToastPositionWrapper, } from './ToastItemFrame.js';
+// defaults
+const VISIBLE_TOASTS_AMOUNT = 4;
+const VIEWPORT_OFFSET = 16;
+const TOAST_GAP = 14;
+const TOAST_LIFETIME = 4000;
+const FIXED_TOAST_HEIGHT = 72;
+const TIME_BEFORE_UNMOUNT = 200;
+const DEFAULT_HOTKEY = ['altKey', 'KeyT'];
+const ToastContext = createStyledContext({}, 'Toast__');
+const useToastContextValue = ToastContext.useStyledContext;
+function hasToastContext(ctx) {
+    return (!!ctx &&
+        Array.isArray(ctx.toasts) &&
+        typeof ctx.setToastHeight === 'function' &&
+        typeof ctx.removeToast === 'function');
+}
+function useToastContext(consumerName) {
+    const ctx = useToastContextValue();
+    if (!hasToastContext(ctx)) {
+        throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
+    }
+    return ctx;
+}
+const ToastItemContext = React.createContext(null);
+function useToastItemContext() {
+    const ctx = React.useContext(ToastItemContext);
+    if (!ctx) {
+        throw new Error('useToastItemContext must be used within Toast.Item or Toast.List');
+    }
+    return ctx;
+}
+function resolveSwipeDirection(direction, position) {
+    if (direction !== 'auto')
+        return direction;
+    const [yPosition, xPosition] = position.split('-');
+    if (!isWeb) {
+        // on native, always use vertical swipe to avoid conflicting with
+        // iOS/Android navigation back gesture (horizontal edge swipe)
+        return yPosition === 'top' ? 'up' : 'down';
+    }
+    if (xPosition === 'left')
+        return 'left';
+    if (xPosition === 'right')
+        return 'right';
+    // center positions: horizontal swipe feels most natural
+    return 'horizontal';
+}
+const ToastRoot = React.forwardRef(function ToastRoot(props, _ref) {
+    const { children, position = 'bottom-right', duration = TOAST_LIFETIME, gap = TOAST_GAP, visibleToasts = VISIBLE_TOASTS_AMOUNT, swipeDirection: swipeDirectionProp = 'auto', swipeThreshold = 50, toastHeight = FIXED_TOAST_HEIGHT, closeButton = false, expand = false, theme: themeProp, reducedMotion: reducedMotionProp, native = false, burntOptions, notificationOptions, icons, } = props;
+    const reducedMotion = useReducedMotion(reducedMotionProp);
+    const [toasts, setToasts] = React.useState([]);
+    const [heights, setHeights] = React.useState({});
+    const [localExpanded, setExpanded] = React.useState(false);
+    const expanded = expand || localExpanded;
+    const [interacting, setInteracting] = React.useState(false);
+    // Lock height updates during expand/collapse CSS transition to prevent
+    // font-loading onLayout corrections from restarting the animation mid-flight.
+    // useLayoutEffect fires before paint, so the lock is set before any onLayout callbacks.
+    const heightsLockedRef = React.useRef(false);
+    const prevExpandedRef = React.useRef(expanded);
+    React.useLayoutEffect(() => {
+        if (prevExpandedRef.current !== expanded) {
+            heightsLockedRef.current = true;
+            prevExpandedRef.current = expanded;
+        }
+        const timer = setTimeout(() => {
+            heightsLockedRef.current = false;
+        }, 350);
+        return () => clearTimeout(timer);
+    }, [expanded]);
+    // Round + skip small changes to prevent cascading re-renders from
+    // sub-pixel onLayout jitter during font loading or CSS transitions
+    const setToastHeight = React.useCallback((toastId, height) => {
+        if (heightsLockedRef.current)
+            return;
+        const rounded = Math.round(height);
+        setHeights((prev) => {
+            const existing = prev[toastId];
+            if (existing != null && Math.abs(existing - rounded) <= 2)
+                return prev;
+            return { ...prev, [toastId]: rounded };
+        });
+    }, []);
+    const removeToastHeight = React.useCallback((toastId) => {
+        setHeights((prev) => {
+            if (!(toastId in prev))
+                return prev;
+            const next = { ...prev };
+            delete next[toastId];
+            return next;
+        });
+    }, []);
+    // Cooldown after dismiss - prevents collapse while stack rebalances
+    const dismissCooldownRef = React.useRef(false);
+    const dismissCooldownTimerRef = React.useRef(null);
+    const triggerDismissCooldown = React.useCallback(() => {
+        dismissCooldownRef.current = true;
+        if (dismissCooldownTimerRef.current) {
+            clearTimeout(dismissCooldownTimerRef.current);
+        }
+        dismissCooldownTimerRef.current = setTimeout(() => {
+            dismissCooldownRef.current = false;
+        }, 800);
+    }, []);
+    const isInDismissCooldown = React.useCallback(() => dismissCooldownRef.current, []);
+    // Store object props in refs so the subscription effect doesn't
+    // re-subscribe on every render when consumers pass inline objects.
+    const burntOptionsRef = React.useRef(burntOptions);
+    const notificationOptionsRef = React.useRef(notificationOptions);
+    React.useEffect(() => {
+        burntOptionsRef.current = burntOptions;
+    }, [burntOptions]);
+    React.useEffect(() => {
+        notificationOptionsRef.current = notificationOptions;
+    }, [notificationOptions]);
+    // subscribe to toast state
+    React.useEffect(() => {
+        return ToastState.subscribe((toast) => {
+            if (toast.dismiss) {
+                setToasts((toasts) => toasts.map((t) => (t.id === toast.id ? { ...t, delete: true } : t)));
+                return;
+            }
+            // Native dispatch: intercept before entering state so no in-app toast renders.
+            // On failure (e.g. permission denied), falls through to in-app.
+            if (native) {
+                const handled = dispatchNativeToast(toast, {
+                    duration,
+                    burntOptions: burntOptionsRef.current,
+                    notificationOptions: notificationOptionsRef.current,
+                });
+                if (handled)
+                    return;
+            }
+            setToasts((toasts) => {
+                const idx = toasts.findIndex((t) => t.id === toast.id);
+                if (idx !== -1) {
+                    return [
+                        ...toasts.slice(0, idx),
+                        { ...toasts[idx], ...toast },
+                        ...toasts.slice(idx + 1),
+                    ];
+                }
+                return [toast, ...toasts];
+            });
+        });
+    }, [native, duration]);
+    // collapse when 1 toast left, or when a new toast is added while expanded
+    const prevToastCountRef = React.useRef(toasts.length);
+    React.useEffect(() => {
+        const prevCount = prevToastCountRef.current;
+        prevToastCountRef.current = toasts.length;
+        if (toasts.length <= 1 && !dismissCooldownRef.current) {
+            setExpanded(false);
+        }
+        else if (toasts.length > prevCount && expanded) {
+            // new toast added while expanded — collapse to show the new front toast
+            setExpanded(false);
+        }
+    }, [toasts.length, expanded]);
+    const removeToast = React.useCallback((toastToRemove) => {
+        setToasts((toasts) => {
+            if (!toasts.find((t) => t.id === toastToRemove.id)?.delete) {
+                ToastState.dismiss(toastToRemove.id);
+            }
+            return toasts.filter(({ id }) => id !== toastToRemove.id);
+        });
+    }, []);
+    const swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+    const currentTheme = useThemeName();
+    const resolvedTheme = themeProp === 'system' || !themeProp
+        ? currentTheme?.includes('dark')
+            ? 'dark'
+            : 'light'
+        : themeProp;
+    const contextValue = {
+        toasts,
+        heights,
+        setToastHeight,
+        removeToastHeight,
+        expanded,
+        setExpanded,
+        interacting,
+        setInteracting,
+        triggerDismissCooldown,
+        isInDismissCooldown,
+        removeToast,
+        position,
+        duration,
+        gap,
+        visibleToasts,
+        swipeDirection,
+        swipeThreshold,
+        toastHeight,
+        closeButton,
+        reducedMotion,
+        native,
+        burntOptions,
+        notificationOptions,
+        icons,
+    };
+    return (_jsx(ToastContext.Provider, { ...contextValue, children: _jsx(Theme, { name: resolvedTheme, children: children }) }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastViewport
+ * -----------------------------------------------------------------------------------------------*/
+const ToastViewportFrame = styled(View, {
+    name: 'ToastViewport',
+    variants: {
+        unstyled: {
+            false: {
+                position: isWeb ? 'fixed' : 'absolute',
+                zIndex: 100000,
+                pointerEvents: 'box-none',
+                maxWidth: '100%',
+                ...(isWeb && { width: 356 }),
+                minHeight: 1,
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+const ToastViewport = ToastViewportFrame.styleable(function ToastViewport(props, ref) {
+    const { offset = VIEWPORT_OFFSET, hotkey = DEFAULT_HOTKEY, label = 'Notifications', portalToRoot = true, portalZIndex = Number.MAX_SAFE_INTEGER, children, ...rest } = props;
+    const ctx = useToastContext('Toast.Viewport');
+    const listRef = React.useRef(null);
+    const hoverTimeoutRef = React.useRef(null);
+    const hoverCooldownRef = React.useRef(false);
+    const deferredCollapseRef = React.useRef(null);
+    const mouseInsideRef = React.useRef(false);
+    const [yPosition, xPosition] = ctx.position.split('-');
+    // offset styles
+    // on native, get safe area insets to avoid status bar / Dynamic Island / home indicator
+    // use insets from GuiProvider (passed via useConfiguration)
+    // same pattern as Slider — works on native when GuiProvider has insets prop
+    const { insets: safeInsets } = useConfiguration();
+    const offsetStyles = React.useMemo(() => {
+        const styles = {};
+        const defaultOffset = typeof offset === 'number' ? offset : VIEWPORT_OFFSET;
+        const offsetObj = typeof offset === 'object'
+            ? offset
+            : {
+                top: defaultOffset,
+                right: defaultOffset,
+                bottom: defaultOffset,
+                left: defaultOffset,
+            };
+        const safeTop = safeInsets?.top ?? 0;
+        const safeBottom = safeInsets?.bottom ?? 0;
+        // if safe area already provides spacing, skip the offset to avoid double padding
+        const topOffset = safeTop > 0 ? safeTop : (offsetObj.top ?? defaultOffset);
+        const bottomOffset = safeBottom > 0 ? safeBottom : (offsetObj.bottom ?? defaultOffset);
+        if (yPosition === 'top')
+            styles.top = topOffset;
+        else
+            styles.bottom = bottomOffset;
+        if (isWeb) {
+            if (xPosition === 'left')
+                styles.left = offsetObj.left ?? defaultOffset;
+            else if (xPosition === 'right')
+                styles.right = offsetObj.right ?? defaultOffset;
+            else {
+                styles.left = '50%';
+                styles.transform = 'translateX(-50%)';
+            }
+        }
+        else {
+            // native: always set both left + right so viewport fills screen
+            // (no fixed width on native — left/right offsets define the width)
+            styles.left = offsetObj.left ?? defaultOffset;
+            styles.right = offsetObj.right ?? defaultOffset;
+        }
+        return styles;
+    }, [offset, yPosition, xPosition]);
+    // hotkey
+    React.useEffect(() => {
+        if (!isWeb)
+            return;
+        const handleKeyDown = (event) => {
+            const isHotkeyPressed = hotkey.length > 0 &&
+                hotkey.every((key) => event[key] || event.code === key);
+            if (isHotkeyPressed) {
+                ctx.setExpanded(true);
+                listRef.current?.focus();
+            }
+            // Escape is handled by individual toast items via onKeyDown
+            // which dismisses the focused toast with cooldown (keeps stack expanded)
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [hotkey]);
+    if (ctx.toasts.length === 0)
+        return null;
+    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const content = (_jsx(ToastViewportFrame, { ref: listRef, "aria-label": `${label} ${hotkeyLabel}`, tabIndex: -1, "aria-live": "polite", style: offsetStyles, "data-y-position": yPosition, "data-x-position": xPosition, ...(isWeb
+            ? {
+                onMouseEnter: () => {
+                    mouseInsideRef.current = true;
+                    if (deferredCollapseRef.current) {
+                        clearTimeout(deferredCollapseRef.current);
+                        deferredCollapseRef.current = null;
+                    }
+                    if (ctx.toasts.length > 1 &&
+                        !ctx.interacting &&
+                        !hoverCooldownRef.current) {
+                        hoverTimeoutRef.current = setTimeout(() => ctx.setExpanded(true), 50);
+                    }
+                },
+                onMouseLeave: () => {
+                    mouseInsideRef.current = false;
+                    if (hoverTimeoutRef.current) {
+                        clearTimeout(hoverTimeoutRef.current);
+                        hoverTimeoutRef.current = null;
+                    }
+                    if (!ctx.interacting && !ctx.isInDismissCooldown()) {
+                        ctx.setExpanded(false);
+                    }
+                    else if (ctx.isInDismissCooldown()) {
+                        // During dismiss cooldown, defer collapse until well after
+                        // the exit animation completes to prevent mid-animation bounce.
+                        // The cooldown is 800ms, spring exit is ~500ms — 1200ms covers both.
+                        if (deferredCollapseRef.current) {
+                            clearTimeout(deferredCollapseRef.current);
+                        }
+                        deferredCollapseRef.current = setTimeout(() => {
+                            deferredCollapseRef.current = null;
+                            if (!mouseInsideRef.current) {
+                                ctx.setExpanded(false);
+                            }
+                        }, 1200);
+                    }
+                },
+                onPointerDown: () => {
+                    if (hoverTimeoutRef.current) {
+                        clearTimeout(hoverTimeoutRef.current);
+                        hoverTimeoutRef.current = null;
+                    }
+                    ctx.setInteracting(true);
+                },
+                onPointerUp: () => ctx.setInteracting(false),
+                onPointerCancel: () => ctx.setInteracting(false),
+            }
+            : {
+                onPress: () => {
+                    if (ctx.toasts.length > 1) {
+                        ctx.setExpanded((prev) => !prev);
+                    }
+                },
+            }), ...(isWeb && {
+            onFocus: (event) => {
+                // keyboard focus entered — expand stack and pause timers
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    if (ctx.toasts.length > 1) {
+                        ctx.setExpanded(true);
+                    }
+                    ctx.setInteracting(true);
+                }
+            },
+            onBlur: (event) => {
+                // focus left the toaster — collapse and resume timers
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    ctx.setInteracting(false);
+                    if (!ctx.isInDismissCooldown()) {
+                        ctx.setExpanded(false);
+                    }
+                }
+            },
+        }), ...rest, children: children }));
+    if (portalToRoot) {
+        return (_jsx(Portal, { zIndex: portalZIndex, children: _jsx(ToastContext.Provider, { ...ctx, children: content }) }));
+    }
+    return content;
+});
+function ToastList({ renderItem }) {
+    const ctx = useToastContext('Toast.List');
+    // render all toasts — hidden ones have opacity 0 but stay mounted
+    // so they smoothly transition when visible toasts are dismissed
+    const maxRender = ctx.toasts.length;
+    return (_jsx(AnimatePresence, { children: ctx.toasts.slice(0, maxRender).map((toast, index) => {
+            const handleClose = () => {
+                if (toast.dismissible === false)
+                    return;
+                toast.onDismiss?.(toast);
+                ctx.removeToast(toast);
+            };
+            const itemContextValue = {
+                toast,
+                handleClose,
+            };
+            if (!renderItem) {
+                return (_jsx(ToastItemContext.Provider, { value: itemContextValue, children: _jsx(ToastItemInner, { toast: toast, index: index, children: _jsx(DefaultToastContent, { toast: toast }) }) }, toast.id));
+            }
+            return (_jsx(ToastItemContext.Provider, { value: itemContextValue, children: renderItem({ toast, index, handleClose }) }, toast.id));
+        }) }));
+}
+/* -------------------------------------------------------------------------------------------------
+ * DefaultToastContent - default rendering for toast items
+ * -----------------------------------------------------------------------------------------------*/
+function DefaultToastContent({ toast }) {
+    const ctx = useToastContext('Toast.Item');
+    const { handleClose } = useToastItemContext();
+    const toastType = toast.type ?? 'default';
+    const dismissible = toast.dismissible !== false;
+    const title = typeof toast.title === 'function' ? toast.title() : toast.title;
+    const description = typeof toast.description === 'function' ? toast.description() : toast.description;
+    return (_jsxs(XStack, { alignItems: "flex-start", gap: "$3", children: [_jsx(ToastIcon, {}), _jsxs(YStack, { flex: 1, gap: "$1", children: [title && _jsx(ToastTitle, { children: title }), description && _jsx(ToastDescription, { children: description }), (toast.action || toast.cancel) && (_jsxs(XStack, { gap: "$2", marginTop: "$2", children: [toast.cancel && (_jsx(ToastActionFrame, { backgroundColor: "transparent", onPress: (e) => {
+                                    toast.cancel?.onClick?.(e);
+                                    handleClose();
+                                }, children: _jsx(SizableText, { size: "$2", color: "$color11", children: toast.cancel.label }) })), toast.action && (_jsx(ToastActionFrame, { backgroundColor: "$color12", hoverStyle: { backgroundColor: '$color11' }, pressStyle: { backgroundColor: '$color10' }, onPress: (e) => {
+                                    toast.action?.onClick?.(e);
+                                    if (!e.defaultPrevented) {
+                                        handleClose();
+                                    }
+                                }, children: _jsx(SizableText, { size: "$2", fontWeight: "600", color: "$background", children: toast.action.label }) }))] }))] }), ctx.closeButton && dismissible && _jsx(ToastClose, {})] }));
+}
+function DragWrapper({ animatedStyle, gestureHandlers, gesture, AnimatedView, dragRef, children, }) {
+    if (isWeb) {
+        return (_jsx("div", { ref: dragRef, style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                userSelect: 'none',
+                WebkitUserSelect: 'none',
+                touchAction: 'none',
+                cursor: 'default',
+            }, ...gestureHandlers, children: children }));
+    }
+    // when RNGH gesture is available, wrap with GestureDetector + plain View
+    // (GestureDetector needs a native View to attach handlers to)
+    if (gesture) {
+        const gh = getGestureHandler();
+        const GestureDetector = gh.state.GestureDetector;
+        if (GestureDetector) {
+            return (_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { flex: 1 }, ...{ collapsable: false }, children: _jsx(AnimatedView, { style: [{ flex: 1 }, animatedStyle], children: children }) }) }));
+        }
+    }
+    // fallback: PanResponder handlers
+    return (_jsx(AnimatedView, { style: [{ flex: 1 }, animatedStyle], ...gestureHandlers, children: children }));
+}
+const ToastItemInner = ToastItemFrame.styleable(function ToastItem(props, ref) {
+    const { toast, index, children, ...rest } = props;
+    const ctx = useToastContext('Toast.Item');
+    const [mounted, setMounted] = React.useState(false);
+    const [removed, setRemoved] = React.useState(false);
+    const [swipeOut, setSwipeOut] = React.useState(false);
+    // Freeze the Y offset when dismiss starts so the exiting toast doesn't jump
+    // as other toasts rebalance
+    const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
+    // Freeze stackY at swipe time — context re-renders recalculate stackY
+    // but the exiting toast should stay at its pre-removal position
+    const swipeExitYRef = React.useRef(null);
+    const closeTimerRef = React.useRef(null);
+    const closeTimerStartRef = React.useRef(0);
+    const lastPauseTimeRef = React.useRef(0);
+    const remainingTimeRef = React.useRef(toast.duration ?? ctx.duration);
+    const isFront = index === 0;
+    const isVisible = index < ctx.visibleToasts;
+    const toastType = toast.type ?? 'default';
+    const dismissible = toast.dismissible !== false;
+    const duration = toast.duration ?? ctx.duration;
+    const [yPosition] = ctx.position.split('-');
+    const isTop = yPosition === 'top';
+    // web: dynamic heights (CSS transitions run off main thread, no FPS concern)
+    // native: fixed height (avoids React state re-render cascade on JS thread)
+    const expandedOffset = isWeb
+        ? (() => {
+            let totalHeight = 0;
+            let activeCount = 0;
+            for (let i = 0; i < index; i++) {
+                const toastId = ctx.toasts[i]?.id;
+                if (toastId == null)
+                    continue;
+                const h = ctx.heights[toastId];
+                if (h === 0)
+                    continue;
+                totalHeight += h ?? ctx.toastHeight;
+                activeCount++;
+            }
+            return totalHeight + activeCount * ctx.gap;
+        })()
+        : index * (ctx.toastHeight + ctx.gap);
+    // Refs for stable access in callbacks — avoids putting expandedOffset/expanded
+    // in deps which would cause timer restarts on every height measurement
+    const expandedOffsetRef = React.useRef(expandedOffset);
+    expandedOffsetRef.current = expandedOffset;
+    const isExpandedRef = React.useRef(ctx.expanded);
+    isExpandedRef.current = ctx.expanded;
+    // timer — no height-zeroing needed here because auto-dismiss only fires
+    // when not expanded/interacting (timer is paused during hover)
+    const startTimer = React.useCallback(() => {
+        if (duration === Number.POSITIVE_INFINITY || toastType === 'loading')
+            return;
+        closeTimerStartRef.current = Date.now();
+        closeTimerRef.current = setTimeout(() => {
+            toast.onAutoClose?.(toast);
+            setRemoved(true);
+            setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+        }, remainingTimeRef.current);
+    }, [duration, toastType, toast, ctx.removeToast]);
+    const pauseTimer = useEvent(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+        }
+        if (lastPauseTimeRef.current < closeTimerStartRef.current) {
+            const elapsed = Date.now() - closeTimerStartRef.current;
+            remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+        }
+        lastPauseTimeRef.current = Date.now();
+    });
+    const resumeTimer = useEvent(() => {
+        if (ctx.expanded || ctx.interacting)
+            return;
+        remainingTimeRef.current = duration;
+        startTimer();
+    });
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    // handle deletion — only zero height when expanded (Sonner rebalance)
+    React.useEffect(() => {
+        if (toast.delete) {
+            setRemoved(true);
+            if (isExpandedRef.current) {
+                setOffsetBeforeRemove(expandedOffsetRef.current);
+            }
+            setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+        }
+    }, [toast.delete, toast, ctx.removeToast]);
+    React.useEffect(() => {
+        // all toasts have independent timers (same as Sonner)
+        // stagger comes from creation time differences
+        if (ctx.expanded || ctx.interacting) {
+            pauseTimer();
+        }
+        else {
+            startTimer();
+        }
+        return () => {
+            if (closeTimerRef.current)
+                clearTimeout(closeTimerRef.current);
+        };
+    }, [ctx.expanded, ctx.interacting, startTimer]);
+    // reset remaining time when duration changes
+    React.useEffect(() => {
+        remainingTimeRef.current = duration;
+    }, [duration]);
+    // animations
+    const { setDragOffset, springBack, animateOut, animatedStyle, AnimatedView, dragRef, } = useToastAnimations({
+        reducedMotion: ctx.reducedMotion,
+        swipeAxis: ctx.swipeDirection === 'up' ||
+            ctx.swipeDirection === 'down' ||
+            ctx.swipeDirection === 'vertical'
+            ? 'vertical'
+            : 'horizontal',
+    });
+    const { isDragging, gestureHandlers, gesture } = useAnimatedDragGesture({
+        direction: ctx.swipeDirection,
+        threshold: ctx.swipeThreshold,
+        disabled: !dismissible || toastType === 'loading',
+        expanded: ctx.expanded,
+        onDragStart: pauseTimer,
+        onDragMove: setDragOffset,
+        onDismiss: (exitDirection, velocity) => {
+            // Trigger cooldown to prevent collapse while stack rebalances
+            ctx.triggerDismissCooldown();
+            setSwipeOut(true);
+            toast.onDismiss?.(toast);
+            // freeze stackY at swipe time — after removeToast, context re-renders
+            // recalculate expandedOffset with the wrong toast array
+            swipeExitYRef.current = isExpandedRef.current
+                ? isTop
+                    ? expandedOffsetRef.current
+                    : -expandedOffsetRef.current
+                : isFront
+                    ? 0
+                    : isTop
+                        ? ctx.gap * index
+                        : -ctx.gap * index;
+            setRemoved(true);
+            ctx.removeToast(toast);
+            animateOut(exitDirection, velocity);
+        },
+        onCancel: () => {
+            springBack(() => {
+                resumeTimer();
+            });
+        },
+    });
+    // measure height (web only — native uses fixed height)
+    const handleLayout = React.useCallback((event) => {
+        if (!isWeb)
+            return;
+        if (removed)
+            return;
+        if (!ctx.expanded && index !== 0)
+            return;
+        const { height } = event.nativeEvent.layout;
+        ctx.setToastHeight(toast.id, height);
+    }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
+    // remove height on unmount (web only)
+    React.useEffect(() => {
+        if (!isWeb)
+            return;
+        return () => {
+            ctx.removeToastHeight(toast.id);
+        };
+    }, [toast.id, ctx.removeToastHeight]);
+    const handleClose = React.useCallback(() => {
+        if (!dismissible)
+            return;
+        ctx.triggerDismissCooldown();
+        toast.onDismiss?.(toast);
+        setRemoved(true);
+        if (isExpandedRef.current) {
+            setOffsetBeforeRemove(expandedOffsetRef.current);
+        }
+        setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+    }, [dismissible, toast, ctx.removeToast, ctx.triggerDismissCooldown]);
+    const itemContextValue = React.useMemo(() => ({ toast, handleClose }), [toast, handleClose]);
+    // front toast height for collapsed stacking (web only)
+    let frontToastHeight = -1;
+    if (isWeb) {
+        for (const t of ctx.toasts) {
+            const h = ctx.heights[t.id];
+            if (h != null && h > 0) {
+                frontToastHeight = h;
+                break;
+            }
+        }
+    }
+    const stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1;
+    // When removed, freeze Y at the saved offset so the exiting toast doesn't jump
+    // as other toasts rebalance (Sonner: --offset uses offsetBeforeRemove when removed)
+    const activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
+    const stackY = ctx.expanded
+        ? isTop
+            ? activeExpandedOffset
+            : -activeExpandedOffset
+        : isFront
+            ? 0
+            : isTop
+                ? ctx.gap * index
+                : -ctx.gap * index;
+    const computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
+    const computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
+    // web: use measured height for smooth expand/collapse transitions
+    // native: fixed height, no constraint needed
+    const computedHeight = isWeb
+        ? ctx.expanded
+            ? ctx.heights[toast.id] || undefined
+            : !isFront && frontToastHeight > 0
+                ? frontToastHeight
+                : undefined
+        : undefined;
+    const computedPointerEvents = index >= ctx.visibleToasts ? 'none' : 'auto';
+    // gap filler for hover stability
+    const gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
+    // data attributes
+    const dataAttributes = {
+        'data-mounted': mounted ? 'true' : 'false',
+        'data-removed': removed ? 'true' : 'false',
+        'data-swipe-out': swipeOut ? 'true' : 'false',
+        'data-visible': isVisible ? 'true' : 'false',
+        'data-front': isFront ? 'true' : 'false',
+        'data-index': String(index),
+        'data-type': toastType,
+        'data-expanded': ctx.expanded ? 'true' : 'false',
+    };
+    return (_jsx(ToastPositionWrapper, { ref: ref, testID: rest.testID, accessibilityLabel: rest.accessibilityLabel, ...dataAttributes, transition: isDragging || ctx.reducedMotion ? undefined : removed ? '200ms' : '400ms', animateOnly: isWeb ? ['transform', 'opacity', 'height'] : ['transform', 'opacity'], y: stackY, scale: stackScale, opacity: computedOpacity, zIndex: computedZIndex, height: computedHeight, overflow: "visible", pointerEvents: computedPointerEvents, top: isTop ? 0 : undefined, bottom: isTop ? undefined : 0, ...(isWeb &&
+            !isFront && {
+            style: { transformOrigin: isTop ? 'top center' : 'bottom center' },
+        }), enterStyle: ctx.reducedMotion ? { opacity: 0 } : { opacity: 0, y: isTop ? -80 : 80 }, exitStyle: ctx.reducedMotion
+            ? { opacity: 0 }
+            : swipeOut
+                ? { opacity: 0, y: swipeExitYRef.current ?? stackY, scale: stackScale }
+                : { opacity: 0, y: stackY, scale: stackScale }, children: _jsx(DragWrapper, { animatedStyle: animatedStyle, gestureHandlers: gestureHandlers, gesture: gesture, AnimatedView: AnimatedView, dragRef: dragRef, children: _jsxs(ToastItemFrame
+            // The one hook a stylesheet can reach a toast by.
+            //
+            // A toast is floating chrome — it is over the page or it is nothing
+            // — so a design system wants to give it the same material every
+            // other floating surface wears. It had no handle at all: `Toaster`
+            // accepts sonner's `className`/`style`/`classNames` and documents
+            // them as INERT, and nothing else here reaches the DOM node. So the
+            // one surface that is unambiguously floating was the one surface a
+            // sheet could not select, and it kept a hand-rolled
+            // `rgba(0,0,0,0.15)` drop that is very nearly invisible on a dark
+            // ground — the exact defect an elevation ladder exists to end.
+            //
+            // `data-slot` rather than a class or a prop because it needs no
+            // decision from a call site: a toast is glass because it IS a toast.
+            // gui forwards unrecognised props to the DOM node and native drops
+            // them, which is what makes this cross-platform safe.
+            , { "data-slot": "toast", role: "status", "aria-live": "polite", "aria-atomic": true, tabIndex: 0, onLayout: handleLayout, ...(isWeb && {
+                    onKeyDown: (event) => {
+                        if (event.key === 'Escape' && dismissible) {
+                            // move focus to the next toast before dismissing
+                            const current = event.currentTarget;
+                            const container = current.closest('[aria-label]');
+                            if (container) {
+                                const focusables = container.querySelectorAll('[tabindex="0"]');
+                                const arr = Array.from(focusables);
+                                const idx = arr.indexOf(current);
+                                const next = arr[idx + 1] || arr[idx - 1];
+                                next?.focus();
+                            }
+                            handleClose();
+                        }
+                    },
+                }), ...rest, children: [ctx.expanded && gapFillerHeight > 0 && (_jsx(View, { position: "absolute", left: 0, right: 0, height: gapFillerHeight, pointerEvents: "auto", ...(isTop ? { top: '100%' } : { bottom: '100%' }) })), _jsx(ToastItemContext.Provider, { value: itemContextValue, children: children })] }) }) }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastTitle
+ * -----------------------------------------------------------------------------------------------*/
+const ToastTitle = styled(SizableText, {
+    name: 'ToastTitle',
+    variants: {
+        unstyled: {
+            false: {
+                color: '$color',
+                fontWeight: '600',
+                size: '$4',
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastDescription
+ * -----------------------------------------------------------------------------------------------*/
+const ToastDescription = styled(SizableText, {
+    name: 'ToastDescription',
+    variants: {
+        unstyled: {
+            false: {
+                color: '$color11',
+                size: '$2',
+            },
+        },
+    },
+    defaultVariants: {
+        unstyled: process.env.GUI_HEADLESS === '1',
+    },
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastClose - auto-wired to dismiss current toast
+ * -----------------------------------------------------------------------------------------------*/
+const ToastClose = ToastCloseFrame.styleable(function ToastClose(props, ref) {
+    // try to get handleClose from context, but allow manual override
+    let handleClose;
+    try {
+        const itemCtx = useToastItemContext();
+        handleClose = itemCtx.handleClose;
+    }
+    catch {
+        // not inside a Toast.Item context, require manual onPress
+    }
+    const ctx = useToastContext('Toast.Close');
+    return (_jsx(ToastCloseFrame, { ref: ref, "aria-label": "Close toast", onPress: handleClose, ...props, children: props.children ?? ctx.icons?.close ?? _jsx(DefaultCloseIcon, {}) }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastAction
+ * -----------------------------------------------------------------------------------------------*/
+const ToastAction = ToastActionFrame.styleable(function ToastAction(props, ref) {
+    return _jsx(ToastActionFrame, { ref: ref, ...props });
+});
+/* -------------------------------------------------------------------------------------------------
+ * ToastIcon - renders icon based on toast type
+ * -----------------------------------------------------------------------------------------------*/
+function ToastIcon(props) {
+    const ctx = useToastContext('Toast.Icon');
+    let toast;
+    try {
+        const itemCtx = useToastItemContext();
+        toast = itemCtx.toast;
+    }
+    catch {
+        // not inside a Toast.Item context
+        return null;
+    }
+    if (!toast)
+        return null;
+    // if custom icon provided on toast, use it
+    if (toast.icon !== undefined) {
+        return (_jsx(View, { flexShrink: 0, marginTop: "$0.5", children: toast.icon }));
+    }
+    const toastType = toast.type ?? 'default';
+    // only show icons if explicitly provided via icons prop (no built-in defaults)
+    const icon = ctx.icons?.[toastType] ?? null;
+    if (!icon)
+        return null;
+    return (_jsx(View, { flexShrink: 0, marginTop: "$0.5", children: icon }));
+}
+/* -------------------------------------------------------------------------------------------------
+ * useToasts hook for rendering
+ * -----------------------------------------------------------------------------------------------*/
+export function useToasts() {
+    const ctx = useToastContext('useToasts');
+    return {
+        toasts: ctx.toasts,
+        expanded: ctx.expanded,
+        position: ctx.position,
+    };
+}
+/* -------------------------------------------------------------------------------------------------
+ * useToastItem hook for accessing current toast in custom content
+ * -----------------------------------------------------------------------------------------------*/
+export function useToastItem() {
+    return useToastItemContext();
+}
+/* -------------------------------------------------------------------------------------------------
+ * Export
+ * -----------------------------------------------------------------------------------------------*/
+ToastRoot.displayName = 'Toast';
+export const Toast = withStaticProperties(ToastRoot, {
+    Viewport: ToastViewport,
+    List: ToastList,
+    Item: ToastItemInner,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Close: ToastClose,
+    Action: ToastAction,
+    Icon: ToastIcon,
+});
+//# sourceMappingURL=ToastComposable.js.map