react-achievements 3.9.3 → 4.0.0

package/dist/web.esm.js

@@ -0,0 +1,1306 @@
+import { AchievementEngine } from 'achievements-engine';
+export { AchievementBuilder, AchievementEngine, AchievementError, AsyncStorageAdapter, ConfigurationError, ImportValidationError, IndexedDBStorage, LocalStorage, MemoryStorage, OfflineQueueStorage, RestApiStorage, StorageError, StorageQuotaError, StorageType, SyncError, createConfigHash, exportAchievementData, importAchievementData, isAchievementError, isRecoverableError, isSimpleConfig, normalizeAchievements } from 'achievements-engine';
+import React, { createContext, useState, useCallback, useEffect, useContext, useMemo, useRef } from 'react';
+
+// Type guard to detect async storage
+function isAsyncStorage(storage) {
+    // Check if methods return Promises
+    const testResult = storage.getMetrics();
+    return testResult && typeof testResult.then === 'function';
+}
+var StorageType;
+(function (StorageType) {
+    StorageType["Local"] = "local";
+    StorageType["Memory"] = "memory";
+    StorageType["IndexedDB"] = "indexeddb";
+    StorageType["RestAPI"] = "restapi"; // Asynchronous REST API storage
+})(StorageType || (StorageType = {}));
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const warnedMessages = new Set();
+function warnDeprecation(message) {
+    var _a, _b;
+    const isProduction = typeof globalThis !== 'undefined' &&
+        ((_b = (_a = globalThis.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'production';
+    if (isProduction || warnedMessages.has(message)) {
+        return;
+    }
+    warnedMessages.add(message);
+    console.warn(`[react-achievements] ${message}`);
+}
+
+const AchievementContext = createContext(undefined);
+const getAllAchievementRecord = (engine) => {
+    return Object.fromEntries(engine.getAllAchievements().map((achievement) => [
+        achievement.achievementId,
+        achievement,
+    ]));
+};
+const AchievementProvider$1 = ({ achievements: achievementsConfig, storage = 'local', children, onError, useBuiltInUI, restApiConfig, engine: externalEngine, eventMapping, icons = {}, }) => {
+    if (useBuiltInUI !== undefined) {
+        warnDeprecation('`useBuiltInUI` is deprecated and is now a no-op because built-in UI is the default. It will be removed in 4.2.');
+    }
+    if (achievementsConfig && externalEngine) {
+        throw new Error('Cannot provide both "achievements" and "engine" props to AchievementProvider.\n\n' +
+            'Choose one pattern:\n' +
+            '1. Direct metric tracking: <AchievementProvider achievements={config}>\n' +
+            '2. Event-based tracking: <AchievementProvider engine={myEngine}>');
+    }
+    const isProviderCreatedEngine = Boolean(achievementsConfig);
+    const [engine] = useState(() => {
+        if (externalEngine) {
+            return externalEngine;
+        }
+        if (!achievementsConfig) {
+            throw new Error('AchievementProvider requires either "achievements" or "engine" prop.\n\n' +
+                '1. Direct metric tracking: <AchievementProvider achievements={config}>\n' +
+                '2. Event-based tracking: <AchievementProvider engine={myEngine}>');
+        }
+        return new AchievementEngine({
+            achievements: achievementsConfig,
+            storage: storage,
+            restApiConfig,
+            onError: onError,
+            eventMapping,
+        });
+    });
+    const [achievementState, setAchievementState] = useState(() => ({
+        unlocked: [...engine.getUnlocked()],
+        all: getAllAchievementRecord(engine),
+    }));
+    const syncAchievementState = useCallback(() => {
+        setAchievementState({
+            unlocked: [...engine.getUnlocked()],
+            all: getAllAchievementRecord(engine),
+        });
+    }, [engine]);
+    useEffect(() => {
+        return () => {
+            if (!externalEngine) {
+                engine.destroy();
+            }
+        };
+    }, [engine, externalEngine]);
+    useEffect(() => {
+        const unsubscribeUnlocked = engine.on('achievement:unlocked', syncAchievementState);
+        const unsubscribeStateChanged = engine.on('state:changed', syncAchievementState);
+        return () => {
+            unsubscribeUnlocked();
+            unsubscribeStateChanged();
+        };
+    }, [engine, syncAchievementState]);
+    const update = (newMetrics) => {
+        engine.update(newMetrics);
+    };
+    const reset = () => {
+        engine.reset();
+        syncAchievementState();
+    };
+    const getState = () => {
+        const metrics = engine.getMetrics();
+        const unlocked = engine.getUnlocked();
+        const metricsInArrayFormat = {};
+        Object.entries(metrics).forEach(([key, value]) => {
+            metricsInArrayFormat[key] = Array.isArray(value) ? value : [value];
+        });
+        return {
+            metrics: metricsInArrayFormat,
+            unlocked: [...unlocked],
+        };
+    };
+    const exportData = () => {
+        return engine.export();
+    };
+    const importData = (jsonString, options) => {
+        const result = engine.import(jsonString, options);
+        syncAchievementState();
+        return result;
+    };
+    const getAllAchievements = () => {
+        return engine.getAllAchievements();
+    };
+    return (React.createElement(AchievementContext.Provider, { value: {
+            update,
+            achievements: achievementState,
+            reset,
+            getState,
+            exportData,
+            importData,
+            getAllAchievements,
+            engine,
+            icons,
+            _isLegacyPattern: isProviderCreatedEngine,
+        } }, children));
+};
+
+/**
+ * Access the active AchievementEngine instance.
+ *
+ * In v4 this works with both provider-created engines (`achievements` prop) and
+ * injected engines (`engine` prop).
+ */
+const useAchievementEngine = () => {
+    const context = useContext(AchievementContext);
+    if (!context) {
+        throw new Error('useAchievementEngine must be used within an AchievementProvider.\n\n' +
+            'Wrap your component tree:\n' +
+            '<AchievementProvider achievements={achievements}>\n' +
+            '  <YourComponent />\n' +
+            '</AchievementProvider>');
+    }
+    return context.engine;
+};
+
+/**
+ * Built-in theme presets
+ */
+const builtInThemes = {
+    /**
+     * Modern theme - Dark gradients with vibrant accents
+     * Inspired by contemporary achievement systems (Discord, Steam, Xbox)
+     */
+    modern: {
+        name: 'modern',
+        notification: {
+            background: 'linear-gradient(135deg, rgba(30, 30, 50, 0.98) 0%, rgba(50, 50, 70, 0.98) 100%)',
+            textColor: '#ffffff',
+            accentColor: '#4CAF50',
+            borderRadius: '12px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
+            fontSize: {
+                header: '12px',
+                title: '18px',
+                description: '14px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(0, 0, 0, 0.85)',
+            background: 'linear-gradient(135deg, #1e1e32 0%, #323246 100%)',
+            textColor: '#ffffff',
+            accentColor: '#4CAF50',
+            borderRadius: '16px',
+            headerFontSize: '28px',
+        },
+        confetti: {
+            colors: ['#FFD700', '#4CAF50', '#2196F3', '#FF6B6B'],
+            particleCount: 50,
+            shapes: ['circle', 'square'],
+        },
+    },
+    /**
+     * Minimal theme - Clean, light design with subtle accents
+     * Perfect for professional or minimalist applications
+     */
+    minimal: {
+        name: 'minimal',
+        notification: {
+            background: 'rgba(255, 255, 255, 0.98)',
+            textColor: '#333333',
+            accentColor: '#4CAF50',
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            fontSize: {
+                header: '11px',
+                title: '16px',
+                description: '13px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(0, 0, 0, 0.5)',
+            background: '#ffffff',
+            textColor: '#333333',
+            accentColor: '#4CAF50',
+            borderRadius: '12px',
+            headerFontSize: '24px',
+        },
+        confetti: {
+            colors: ['#4CAF50', '#2196F3'],
+            particleCount: 30,
+            shapes: ['circle'],
+        },
+    },
+    /**
+     * Gamified theme - Modern gaming aesthetic with sci-fi colors
+     * Dark navy backgrounds with cyan and orange accents (2024 gaming trend)
+     * Features square/badge-shaped achievement cards
+     */
+    gamified: {
+        name: 'gamified',
+        notification: {
+            background: 'linear-gradient(135deg, rgba(5, 8, 22, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%)',
+            textColor: '#22d3ee', // Bright cyan
+            accentColor: '#f97316', // Bright orange
+            borderRadius: '6px',
+            boxShadow: '0 8px 32px rgba(34, 211, 238, 0.4), 0 0 20px rgba(249, 115, 22, 0.3)',
+            fontSize: {
+                header: '13px',
+                title: '20px',
+                description: '15px',
+            },
+        },
+        modal: {
+            overlayColor: 'rgba(5, 8, 22, 0.85)',
+            background: 'linear-gradient(135deg, #0f172a 0%, #050816 100%)',
+            textColor: '#22d3ee', // Bright cyan
+            accentColor: '#f97316', // Bright orange
+            borderRadius: '8px',
+            headerFontSize: '32px',
+            achievementCardBorderRadius: '8px', // Square badge-like cards
+            achievementLayout: 'badge', // Use badge/grid layout instead of horizontal list
+        },
+        confetti: {
+            colors: ['#22d3ee', '#f97316', '#a855f7', '#eab308'], // Cyan, orange, purple, yellow
+            particleCount: 100,
+            shapes: ['circle', 'square'],
+        },
+    },
+};
+/**
+ * Retrieve a theme by name (internal use only)
+ * Only checks built-in themes
+ *
+ * @param name - Theme name (built-in only)
+ * @returns Theme configuration or undefined if not found
+ * @internal
+ */
+function getTheme(name) {
+    return builtInThemes[name];
+}
+
+const defaultAchievementIcons = {
+    // Essential fallback icons for system use
+    default: '⭐', // Fallback when no icon is provided
+    loading: '⏳', // For loading states
+    error: '⚠️', // For error states
+    success: '✅', // For success states
+    // A few common icons for backward compatibility
+    trophy: '🏆',
+    star: '⭐',
+};
+
+/**
+ * Built-in notification component
+ * Modern, theme-aware achievement notification with smooth animations
+ */
+const BuiltInNotification = ({ achievement, onClose, duration = 5000, position = 'top-center', theme = 'modern', icons = {}, stackIndex = 0, }) => {
+    var _a, _b, _c;
+    const [isVisible, setIsVisible] = useState(false);
+    const [isExiting, setIsExiting] = useState(false);
+    // Merge custom icons with defaults
+    const mergedIcons = Object.assign(Object.assign({}, defaultAchievementIcons), icons);
+    // Get theme configuration
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const { notification: themeStyles } = themeConfig;
+    useEffect(() => {
+        // Slide in animation
+        const showTimer = setTimeout(() => setIsVisible(true), 10);
+        // Auto-dismiss
+        const dismissTimer = setTimeout(() => {
+            setIsExiting(true);
+            setTimeout(() => onClose === null || onClose === void 0 ? void 0 : onClose(), 300);
+        }, duration);
+        return () => {
+            clearTimeout(showTimer);
+            clearTimeout(dismissTimer);
+        };
+    }, [duration, onClose]);
+    const getPositionStyles = () => {
+        const stackedOffset = 20 + stackIndex * 104;
+        const base = {
+            position: 'fixed',
+            zIndex: 9999,
+        };
+        switch (position) {
+            case 'top-center':
+                return Object.assign(Object.assign({}, base), { top: stackedOffset, left: '50%', transform: 'translateX(-50%)' });
+            case 'top-left':
+                return Object.assign(Object.assign({}, base), { top: stackedOffset, left: 20 });
+            case 'top-right':
+                return Object.assign(Object.assign({}, base), { top: stackedOffset, right: 20 });
+            case 'bottom-center':
+                return Object.assign(Object.assign({}, base), { bottom: stackedOffset, left: '50%', transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return Object.assign(Object.assign({}, base), { bottom: stackedOffset, left: 20 });
+            case 'bottom-right':
+                return Object.assign(Object.assign({}, base), { bottom: stackedOffset, right: 20 });
+            default:
+                return Object.assign(Object.assign({}, base), { top: stackedOffset, left: '50%', transform: 'translateX(-50%)' });
+        }
+    };
+    const containerStyles = Object.assign(Object.assign({}, getPositionStyles()), { background: themeStyles.background, borderRadius: themeStyles.borderRadius, boxShadow: themeStyles.boxShadow, padding: '16px 24px', minWidth: '320px', maxWidth: '500px', display: 'flex', alignItems: 'center', gap: '16px', opacity: isVisible && !isExiting ? 1 : 0, transform: position.startsWith('top')
+            ? `translateY(${isVisible && !isExiting ? '0' : '-20px'}) ${position.includes('center') ? 'translateX(-50%)' : ''}`
+            : `translateY(${isVisible && !isExiting ? '0' : '20px'}) ${position.includes('center') ? 'translateX(-50%)' : ''}`, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', pointerEvents: isVisible ? 'auto' : 'none' });
+    const iconStyles = {
+        fontSize: '48px',
+        lineHeight: 1,
+        flexShrink: 0,
+    };
+    const contentStyles = {
+        flex: 1,
+        color: themeStyles.textColor,
+        minWidth: 0,
+    };
+    const headerStyles = {
+        fontSize: ((_a = themeStyles.fontSize) === null || _a === void 0 ? void 0 : _a.header) || '12px',
+        textTransform: 'uppercase',
+        letterSpacing: '1px',
+        opacity: 0.8,
+        marginBottom: '4px',
+        color: themeStyles.accentColor,
+        fontWeight: 600,
+    };
+    const titleStyles = {
+        fontSize: ((_b = themeStyles.fontSize) === null || _b === void 0 ? void 0 : _b.title) || '18px',
+        fontWeight: 'bold',
+        marginBottom: '4px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    };
+    const descriptionStyles = {
+        fontSize: ((_c = themeStyles.fontSize) === null || _c === void 0 ? void 0 : _c.description) || '14px',
+        opacity: 0.9,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        color: themeStyles.textColor,
+        fontSize: '24px',
+        cursor: 'pointer',
+        opacity: 0.6,
+        transition: 'opacity 0.2s',
+        padding: '4px',
+        flexShrink: 0,
+        lineHeight: 1,
+    };
+    // If achievementIconKey exists but not in mergedIcons, use it directly (might be an emoji)
+    // Otherwise, look up in mergedIcons or fall back to default
+    const icon = (achievement.achievementIconKey &&
+        mergedIcons[achievement.achievementIconKey]) ||
+        achievement.achievementIconKey ||
+        mergedIcons.default ||
+        '⭐';
+    return (React.createElement("div", { style: containerStyles, "data-testid": "built-in-notification" },
+        React.createElement("div", { style: iconStyles }, icon),
+        React.createElement("div", { style: contentStyles },
+            React.createElement("div", { style: headerStyles }, "Achievement Unlocked!"),
+            React.createElement("div", { style: titleStyles }, achievement.achievementTitle),
+            achievement.achievementDescription && (React.createElement("div", { style: descriptionStyles }, achievement.achievementDescription))),
+        React.createElement("button", { onClick: () => {
+                setIsExiting(true);
+                setTimeout(() => onClose === null || onClose === void 0 ? void 0 : onClose(), 300);
+            }, style: closeButtonStyles, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.6'), "aria-label": "Close notification" }, "\u00D7")));
+};
+
+/**
+ * Hook to track window dimensions
+ * Replacement for react-use's useWindowSize
+ *
+ * @returns Object with width and height properties
+ *
+ * @example
+ * ```tsx
+ * const { width, height } = useWindowSize();
+ * console.log(`Window size: ${width}x${height}`);
+ * ```
+ */
+function useWindowSize() {
+    const [size, setSize] = useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    });
+    useEffect(() => {
+        // Handle SSR - window may not be defined
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const handleResize = () => {
+            setSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        // Set initial size
+        handleResize();
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+        // Cleanup
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return size;
+}
+
+/**
+ * Built-in confetti component
+ * Lightweight CSS-based confetti animation
+ */
+const BuiltInConfetti = ({ show, duration = 5000, particleCount = 50, colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'], }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const { width, height } = useWindowSize();
+    useEffect(() => {
+        if (show) {
+            setIsVisible(true);
+            const timer = setTimeout(() => setIsVisible(false), duration);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setIsVisible(false);
+        }
+    }, [show, duration]);
+    if (!isVisible)
+        return null;
+    const containerStyles = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 10001,
+        overflow: 'hidden',
+    };
+    // Generate particles
+    const particles = Array.from({ length: particleCount }, (_, i) => {
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const startX = Math.random() * width;
+        const rotation = Math.random() * 360;
+        const fallDuration = 3 + Math.random() * 2; // 3-5 seconds
+        const delay = Math.random() * 0.5; // 0-0.5s delay
+        const shape = Math.random() > 0.5 ? 'circle' : 'square';
+        const particleStyles = {
+            position: 'absolute',
+            top: '-20px',
+            left: `${startX}px`,
+            width: '10px',
+            height: '10px',
+            backgroundColor: color,
+            borderRadius: shape === 'circle' ? '50%' : '0',
+            transform: `rotate(${rotation}deg)`,
+            animation: `confettiFall ${fallDuration}s linear ${delay}s forwards`,
+            opacity: 0.9,
+        };
+        return React.createElement("div", { key: i, style: particleStyles, "data-testid": "confetti-particle" });
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes confettiFall {
+            0% {
+              transform: translateY(0) rotate(0deg);
+              opacity: 1;
+            }
+            100% {
+              transform: translateY(${height + 50}px) rotate(720deg);
+              opacity: 0;
+            }
+          }
+        `),
+        React.createElement("div", { style: containerStyles, "data-testid": "built-in-confetti" }, particles)));
+};
+
+const NOTIFICATION_DURATION_MS = 5000;
+const AchievementUIContext = createContext({
+    icons: {},
+    ui: {},
+});
+const AchievementEffects = ({ icons, ui }) => {
+    const engine = useAchievementEngine();
+    const seenAchievementsRef = useRef(new Set(engine.getUnlocked()));
+    const confettiTimerRef = useRef(null);
+    const [showConfetti, setShowConfetti] = useState(false);
+    const [notifications, setNotifications] = useState([]);
+    useEffect(() => {
+        const unsubscribeUnlocked = engine.on('achievement:unlocked', (event) => {
+            if (seenAchievementsRef.current.has(event.achievementId)) {
+                return;
+            }
+            seenAchievementsRef.current.add(event.achievementId);
+            const unlockedAchievement = {
+                achievementId: event.achievementId,
+                achievementTitle: event.achievementTitle,
+                achievementDescription: event.achievementDescription,
+                achievementIconKey: event.achievementIconKey,
+                isUnlocked: true,
+            };
+            if (ui.enableNotifications !== false) {
+                setNotifications((currentNotifications) => {
+                    if (currentNotifications.some((notification) => notification.achievementId === unlockedAchievement.achievementId)) {
+                        return currentNotifications;
+                    }
+                    return [...currentNotifications, unlockedAchievement];
+                });
+            }
+            if (ui.enableConfetti !== false) {
+                if (confettiTimerRef.current) {
+                    clearTimeout(confettiTimerRef.current);
+                }
+                setShowConfetti(true);
+                confettiTimerRef.current = setTimeout(() => {
+                    setShowConfetti(false);
+                    confettiTimerRef.current = null;
+                }, NOTIFICATION_DURATION_MS);
+            }
+        });
+        const unsubscribeStateChanged = engine.on('state:changed', () => {
+            const unlocked = new Set(engine.getUnlocked());
+            seenAchievementsRef.current.forEach((achievementId) => {
+                if (!unlocked.has(achievementId)) {
+                    seenAchievementsRef.current.delete(achievementId);
+                }
+            });
+        });
+        return () => {
+            unsubscribeUnlocked();
+            unsubscribeStateChanged();
+            if (confettiTimerRef.current) {
+                clearTimeout(confettiTimerRef.current);
+            }
+        };
+    }, [engine, ui.enableConfetti, ui.enableNotifications]);
+    const NotificationComponent = ui.NotificationComponent || BuiltInNotification;
+    const ConfettiComponentResolved = ui.ConfettiComponent || BuiltInConfetti;
+    return (React.createElement(React.Fragment, null,
+        ui.enableNotifications !== false &&
+            notifications.map((notification, index) => (React.createElement(NotificationComponent, { key: notification.achievementId, achievement: notification, onClose: () => setNotifications((currentNotifications) => currentNotifications.filter((currentNotification) => currentNotification.achievementId !== notification.achievementId)), duration: NOTIFICATION_DURATION_MS, position: ui.notificationPosition || 'top-center', theme: ui.theme || 'modern', icons: icons, stackIndex: index }))),
+        ui.enableConfetti !== false && (React.createElement(ConfettiComponentResolved, { show: showConfetti, duration: NOTIFICATION_DURATION_MS }))));
+};
+const AchievementProvider = (_a) => {
+    var { children, icons = {}, ui = {}, useBuiltInUI } = _a, providerProps = __rest(_a, ["children", "icons", "ui", "useBuiltInUI"]);
+    if (useBuiltInUI !== undefined) {
+        warnDeprecation('`useBuiltInUI` is deprecated and is now a no-op because built-in UI is the default. It will be removed in 4.2.');
+    }
+    const uiContextValue = useMemo(() => ({ icons, ui }), [icons, ui]);
+    return (React.createElement(AchievementUIContext.Provider, { value: uiContextValue },
+        React.createElement(AchievementProvider$1, Object.assign({}, providerProps, { icons: icons }),
+            children,
+            React.createElement(AchievementEffects, { icons: icons, ui: ui }))));
+};
+
+const useAchievements = () => {
+    const context = useContext(AchievementContext);
+    if (!context) {
+        throw new Error('useAchievements must be used within an AchievementProvider');
+    }
+    return context;
+};
+
+const useAchievementState = () => {
+    const { achievements, getAllAchievements, getState } = useAchievements();
+    const allAchievements = getAllAchievements();
+    const unlockedIds = achievements.unlocked;
+    const unlockedAchievementSet = new Set(unlockedIds);
+    const unlockedAchievements = allAchievements.filter((achievement) => unlockedAchievementSet.has(achievement.achievementId));
+    return {
+        unlockedIds,
+        unlockedAchievements,
+        allAchievements,
+        unlockedCount: unlockedIds.length,
+        totalCount: allAchievements.length,
+        metrics: getState().metrics,
+    };
+};
+
+const defaultStyles = {
+    badgesButton: {
+        backgroundColor: '#4CAF50',
+        color: 'white',
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '20px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '16px',
+        boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
+        transition: 'transform 0.2s ease-in-out',
+    },
+    badgesModal: {
+        overlay: {
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.75)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 10000,
+        },
+        content: {
+            position: 'relative',
+            background: '#fff',
+            borderRadius: '8px',
+            padding: '20px',
+            maxWidth: '500px',
+            width: '90%',
+            maxHeight: '80vh',
+            overflow: 'auto',
+        },
+        header: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '20px',
+        },
+        closeButton: {
+            background: 'none',
+            border: 'none',
+            fontSize: '24px',
+            cursor: 'pointer',
+            padding: '0',
+        },
+        achievementList: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+        },
+        achievementItem: {
+            display: 'flex',
+            gap: '16px',
+            padding: '16px',
+            borderRadius: '8px',
+            backgroundColor: '#f5f5f5',
+            alignItems: 'center',
+        },
+        achievementTitle: {
+            margin: '0',
+            fontSize: '18px',
+            fontWeight: 'bold',
+        },
+        achievementDescription: {
+            margin: '4px 0 0 0',
+            color: '#666',
+        },
+        achievementIcon: {
+            fontSize: '32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        lockIcon: {
+            fontSize: '24px',
+            position: 'absolute',
+            top: '50%',
+            right: '16px',
+            transform: 'translateY(-50%)',
+        },
+        lockedAchievementItem: {
+            display: 'flex',
+            gap: '16px',
+            padding: '16px',
+            borderRadius: '8px',
+            backgroundColor: '#e0e0e0',
+            alignItems: 'center',
+            opacity: 0.5,
+        },
+    },
+    levelProgress: {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            padding: '12px 16px',
+        },
+        header: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '12px',
+            fontWeight: 600,
+        },
+        levelLabel: {
+            fontSize: '14px',
+        },
+        valueText: {
+            fontSize: '12px',
+            opacity: 0.8,
+        },
+        progressTrack: {
+            position: 'relative',
+            height: '10px',
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            borderRadius: '999px',
+            overflow: 'hidden',
+        },
+        progressBar: {
+            height: '100%',
+            borderRadius: '999px',
+            transition: 'width 0.2s ease-in-out',
+        },
+        progressText: {
+            fontSize: '12px',
+            opacity: 0.8,
+            textAlign: 'right',
+        },
+    },
+};
+
+const resolveIcon = (achievement, icons) => {
+    return ((achievement.achievementIconKey && icons[achievement.achievementIconKey]) ||
+        achievement.achievementIconKey ||
+        icons.default ||
+        '⭐');
+};
+const AchievementsList = ({ achievements, showLocked = true, showUnlockConditions = false, icons = {}, styles = {}, emptyState, className, renderAchievement, }) => {
+    const context = useContext(AchievementContext);
+    const uiContext = useContext(AchievementUIContext);
+    const mergedIcons = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAchievementIcons), context === null || context === void 0 ? void 0 : context.icons), uiContext.icons), icons);
+    const sourceAchievements = achievements || (context === null || context === void 0 ? void 0 : context.getAllAchievements());
+    if (!sourceAchievements) {
+        throw new Error('AchievementsList requires either an achievements prop or an AchievementProvider parent.');
+    }
+    const achievementsToDisplay = showLocked
+        ? sourceAchievements
+        : sourceAchievements.filter((achievement) => achievement.isUnlocked);
+    if (achievementsToDisplay.length === 0) {
+        return (React.createElement("p", { style: { textAlign: 'center', color: '#666' } }, emptyState || 'No achievements configured.'));
+    }
+    return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, defaultStyles.badgesModal.achievementList), styles === null || styles === void 0 ? void 0 : styles.achievementList), "data-testid": "achievements-list" }, achievementsToDisplay.map((achievement, index) => {
+        const isLocked = !achievement.isUnlocked;
+        const icon = resolveIcon(achievement, mergedIcons);
+        if (renderAchievement) {
+            return (React.createElement(React.Fragment, { key: achievement.achievementId }, renderAchievement({ achievement, isLocked, icon, index })));
+        }
+        return (React.createElement("div", { key: achievement.achievementId, style: Object.assign(Object.assign(Object.assign({}, (isLocked
+                ? Object.assign(Object.assign({}, defaultStyles.badgesModal.lockedAchievementItem), styles === null || styles === void 0 ? void 0 : styles.lockedAchievementItem) : defaultStyles.badgesModal.achievementItem)), styles === null || styles === void 0 ? void 0 : styles.achievementItem), { position: 'relative' }), "data-testid": "achievement-list-item", "data-unlocked": achievement.isUnlocked ? 'true' : 'false' },
+            React.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, defaultStyles.badgesModal.achievementIcon), styles === null || styles === void 0 ? void 0 : styles.achievementIcon), { opacity: isLocked ? 0.4 : 1 }) }, icon),
+            React.createElement("div", { style: { flex: 1 } },
+                React.createElement("h3", { style: Object.assign(Object.assign(Object.assign({}, defaultStyles.badgesModal.achievementTitle), styles === null || styles === void 0 ? void 0 : styles.achievementTitle), { color: isLocked ? '#999' : undefined }) }, achievement.achievementTitle),
+                achievement.achievementDescription && (React.createElement("p", { style: Object.assign(Object.assign(Object.assign({}, defaultStyles.badgesModal.achievementDescription), styles === null || styles === void 0 ? void 0 : styles.achievementDescription), { color: isLocked ? '#aaa' : '#666' }) },
+                    achievement.achievementDescription,
+                    showUnlockConditions && isLocked && (React.createElement("span", { style: {
+                            display: 'block',
+                            fontSize: '12px',
+                            marginTop: '4px',
+                            fontStyle: 'italic',
+                            color: '#888',
+                        } },
+                        "\uD83D\uDD13 ",
+                        achievement.achievementDescription))))),
+            isLocked && (React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.badgesModal.lockIcon), styles === null || styles === void 0 ? void 0 : styles.lockIcon) }, "\uD83D\uDD12"))));
+    })));
+};
+
+const AchievementsModal = ({ isOpen, onClose, achievements, title = '🏆 Achievements', styles = {}, icons = {}, showLocked = true, showUnlockConditions = false, emptyState, renderAchievement, theme, }) => {
+    const context = useContext(AchievementContext);
+    const uiContext = useContext(AchievementUIContext);
+    useEffect(() => {
+        if (!isOpen || typeof document === 'undefined') {
+            return;
+        }
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const CustomModal = uiContext.ui.ModalComponent;
+    const sourceAchievements = achievements || (context === null || context === void 0 ? void 0 : context.getAllAchievements());
+    const modalAchievements = showLocked
+        ? sourceAchievements
+        : sourceAchievements === null || sourceAchievements === void 0 ? void 0 : sourceAchievements.filter((achievement) => achievement.isUnlocked);
+    const resolvedTheme = theme || uiContext.ui.theme || 'modern';
+    const mergedIcons = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultAchievementIcons), context === null || context === void 0 ? void 0 : context.icons), uiContext.icons), icons);
+    if (CustomModal) {
+        if (!modalAchievements) {
+            throw new Error('AchievementsModal requires either an achievements prop or an AchievementProvider parent.');
+        }
+        return (React.createElement(CustomModal, { isOpen: isOpen, onClose: onClose, achievements: modalAchievements, icons: mergedIcons, theme: resolvedTheme }));
+    }
+    return (React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.badgesModal.overlay), styles === null || styles === void 0 ? void 0 : styles.overlay), role: "presentation", onClick: onClose, "data-testid": "achievements-modal-overlay" },
+        React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.badgesModal.content), styles === null || styles === void 0 ? void 0 : styles.content), role: "dialog", "aria-modal": "true", "aria-labelledby": "achievements-modal-title", onClick: (event) => event.stopPropagation(), "data-testid": "achievements-modal" },
+            React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.badgesModal.header), styles === null || styles === void 0 ? void 0 : styles.header) },
+                React.createElement("h2", { id: "achievements-modal-title", style: { margin: 0 } }, title),
+                React.createElement("button", { onClick: onClose, style: Object.assign(Object.assign({}, defaultStyles.badgesModal.closeButton), styles === null || styles === void 0 ? void 0 : styles.closeButton), "aria-label": "Close" }, "\u00D7")),
+            React.createElement(AchievementsList, { achievements: modalAchievements, showLocked: showLocked, showUnlockConditions: showUnlockConditions, icons: icons, styles: styles, emptyState: emptyState, renderAchievement: renderAchievement }))));
+};
+
+const getPositionStyles$1 = (position) => {
+    const base = {
+        position: 'fixed',
+        margin: '20px',
+        zIndex: 1000,
+    };
+    switch (position) {
+        case 'top-left':
+            return Object.assign(Object.assign({}, base), { top: 0, left: 0 });
+        case 'top-right':
+            return Object.assign(Object.assign({}, base), { top: 0, right: 0 });
+        case 'bottom-left':
+            return Object.assign(Object.assign({}, base), { bottom: 0, left: 0 });
+        case 'bottom-right':
+            return Object.assign(Object.assign({}, base), { bottom: 0, right: 0 });
+    }
+};
+const AchievementsWidget = ({ position = 'bottom-right', placement = 'fixed', showAllAchievements = true, showUnlockConditions = false, showCount = true, icons, theme, label = 'Achievements', icon = '🏆', triggerClassName, renderTrigger, buttonStyles, modalStyles, modalTitle, emptyState, renderAchievement, }) => {
+    const uiContext = useContext(AchievementUIContext);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { unlockedAchievements, allAchievements, unlockedCount, totalCount } = useAchievementState();
+    const resolvedTheme = theme || uiContext.ui.theme || 'modern';
+    const themeConfig = getTheme(resolvedTheme) || builtInThemes.modern;
+    const modalAchievements = showAllAchievements ? allAchievements : unlockedAchievements;
+    const openModal = () => setIsModalOpen(true);
+    const buttonBaseStyles = placement === 'inline'
+        ? Object.assign({ backgroundColor: 'transparent', color: 'inherit', padding: '10px 12px', border: 'none', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', font: 'inherit', width: '100%', textAlign: 'left' }, buttonStyles) : Object.assign(Object.assign({ backgroundColor: themeConfig.notification.accentColor, color: 'white', padding: '10px 20px', border: 'none', borderRadius: '20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '16px', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'transform 0.2s ease-in-out' }, getPositionStyles$1(position)), buttonStyles);
+    const buttonProps = {
+        type: 'button',
+        onClick: openModal,
+        style: buttonBaseStyles,
+        className: triggerClassName,
+        'data-placement': placement,
+        'data-testid': 'achievements-widget-button',
+        'aria-label': `${label}: ${unlockedCount} of ${totalCount} achievements unlocked`,
+    };
+    return (React.createElement(React.Fragment, null,
+        renderTrigger ? (renderTrigger({
+            open: openModal,
+            label,
+            unlockedCount,
+            totalCount,
+            unlockedAchievements,
+            allAchievements,
+            buttonProps,
+        })) : (React.createElement("button", Object.assign({}, buttonProps, { onMouseEnter: (event) => {
+                if (placement !== 'inline') {
+                    event.currentTarget.style.transform = 'scale(1.05)';
+                }
+            }, onMouseLeave: (event) => {
+                if (placement !== 'inline') {
+                    event.currentTarget.style.transform = 'scale(1)';
+                }
+            } }),
+            React.createElement("span", null, icon),
+            React.createElement("span", { style: { flex: 1 } }, label),
+            showCount && React.createElement("span", null, unlockedCount))),
+        React.createElement(AchievementsModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), achievements: modalAchievements, showUnlockConditions: showUnlockConditions, icons: icons, styles: modalStyles, title: modalTitle, emptyState: emptyState, renderAchievement: renderAchievement, theme: resolvedTheme })));
+};
+
+const getPositionStyles = (position) => {
+    const base = {
+        position: 'fixed',
+        margin: '20px',
+        zIndex: 1000,
+    };
+    switch (position) {
+        case 'top-left':
+            return Object.assign(Object.assign({}, base), { top: 0, left: 0 });
+        case 'top-right':
+            return Object.assign(Object.assign({}, base), { top: 0, right: 0 });
+        case 'bottom-left':
+            return Object.assign(Object.assign({}, base), { bottom: 0, left: 0 });
+        case 'bottom-right':
+            return Object.assign(Object.assign({}, base), { bottom: 0, right: 0 });
+    }
+};
+/**
+ * @deprecated Use `AchievementsWidget` for new integrations. This v3
+ * compatibility wrapper will be removed in 4.2.
+ */
+const BadgesButton = ({ onClick, position = 'bottom-right', placement = 'fixed', styles = {}, unlockedAchievements, theme = 'modern', }) => {
+    React.useEffect(() => {
+        warnDeprecation('`BadgesButton` is deprecated. Use `AchievementsWidget` instead. `BadgesButton` will be removed in 4.2.');
+    }, []);
+    // Get theme configuration for consistent styling
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const accentColor = themeConfig.notification.accentColor;
+    // Different styling for fixed vs inline placement
+    const baseStyles = placement === 'inline'
+        ? Object.assign({ 
+            // Inline mode: looks like a navigation item
+            backgroundColor: 'transparent', color: themeConfig.notification.textColor, padding: '12px 16px', border: 'none', borderRadius: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', fontSize: '15px', width: '100%', textAlign: 'left', transition: 'background-color 0.2s ease-in-out' }, styles) : Object.assign(Object.assign({ 
+        // Fixed mode: floating button
+        backgroundColor: accentColor, color: 'white', padding: '10px 20px', border: 'none', borderRadius: '20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '16px', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'transform 0.2s ease-in-out' }, getPositionStyles(position)), styles);
+    return (React.createElement("button", { onClick: onClick, style: baseStyles, onMouseEnter: (e) => {
+            if (placement === 'inline') {
+                // Inline mode: subtle background color change
+                e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+            }
+            else {
+                // Fixed mode: scale transformation
+                e.target.style.transform = 'scale(1.05)';
+            }
+        }, onMouseLeave: (e) => {
+            if (placement === 'inline') {
+                e.target.style.backgroundColor = 'transparent';
+            }
+            else {
+                e.target.style.transform = 'scale(1)';
+            }
+        }, "data-placement": placement, "data-testid": "badges-button" },
+        "\uD83C\uDFC6 Achievements (",
+        unlockedAchievements.length,
+        ")"));
+};
+
+/**
+ * @deprecated Use `AchievementsModal`, `AchievementsWidget`, or
+ * `AchievementsList` for new integrations. This v3 compatibility wrapper will
+ * be removed in 4.2.
+ */
+const BadgesModal = ({ isOpen, onClose, achievements, styles = {}, icons = {}, showAllAchievements = false, showUnlockConditions = false, allAchievements, }) => {
+    useEffect(() => {
+        warnDeprecation('`BadgesModal` is deprecated. Use `AchievementsWidget` or `AchievementsList` instead. `BadgesModal` will be removed in 4.2.');
+    }, []);
+    const achievementsToDisplay = showAllAchievements && allAchievements
+        ? allAchievements
+        : achievements.map((achievement) => (Object.assign(Object.assign({}, achievement), { isUnlocked: true })));
+    return (React.createElement(AchievementsModal, { isOpen: isOpen, onClose: onClose, achievements: achievementsToDisplay, styles: styles, icons: icons, showUnlockConditions: showUnlockConditions }));
+};
+
+/**
+ * @deprecated Use `AchievementsWidget` for new integrations. This v3
+ * compatibility wrapper will be removed in 4.2.
+ */
+const BadgesButtonWithModal = ({ unlockedAchievements, position = 'bottom-right', placement = 'fixed', showAllAchievements = false, allAchievements, showUnlockConditions = false, icons, theme = 'modern', buttonStyles, modalStyles, }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BadgesButton, { onClick: () => setIsModalOpen(true), unlockedAchievements: unlockedAchievements, position: position, placement: placement, theme: theme, styles: buttonStyles }),
+        React.createElement(BadgesModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), achievements: unlockedAchievements, showAllAchievements: showAllAchievements, allAchievements: allAchievements, showUnlockConditions: showUnlockConditions, icons: icons, styles: modalStyles })));
+};
+
+/**
+ * @deprecated Use the provider `ui.ConfettiComponent` option or the built-in
+ * confetti default. This v3 compatibility wrapper will be removed in 4.2.
+ */
+const ConfettiWrapper = ({ show }) => {
+    useEffect(() => {
+        warnDeprecation('`ConfettiWrapper` is deprecated. Use the provider `ui.ConfettiComponent` option or built-in confetti defaults instead. `ConfettiWrapper` will be removed in 4.2.');
+    }, []);
+    return React.createElement(BuiltInConfetti, { show: show, particleCount: 200 });
+};
+
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+const LevelProgress = ({ level, currentXP, nextLevelXP, label = 'Level', valueLabel, showValues = true, showPercent = true, theme = 'modern', styles = {}, className, }) => {
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const safeMax = nextLevelXP > 0 ? nextLevelXP : 1;
+    const clampedCurrent = clamp(currentXP, 0, safeMax);
+    const progress = Math.round((clampedCurrent / safeMax) * 100);
+    const computedValueLabel = valueLabel !== null && valueLabel !== void 0 ? valueLabel : `${clampedCurrent} / ${safeMax} XP`;
+    const containerStyles = Object.assign(Object.assign(Object.assign({}, defaultStyles.levelProgress.container), { background: themeConfig.notification.background, color: themeConfig.notification.textColor, borderRadius: themeConfig.notification.borderRadius, boxShadow: themeConfig.notification.boxShadow }), styles === null || styles === void 0 ? void 0 : styles.container);
+    const progressBarStyles = Object.assign(Object.assign(Object.assign({}, defaultStyles.levelProgress.progressBar), { backgroundColor: themeConfig.notification.accentColor, width: `${progress}%` }), styles === null || styles === void 0 ? void 0 : styles.progressBar);
+    return (React.createElement("div", { className: className, style: containerStyles, "data-testid": "level-progress" },
+        React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.levelProgress.header), styles === null || styles === void 0 ? void 0 : styles.header) },
+            React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.levelProgress.levelLabel), styles === null || styles === void 0 ? void 0 : styles.levelLabel) },
+                label,
+                " ",
+                level),
+            showValues && (React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.levelProgress.valueText), styles === null || styles === void 0 ? void 0 : styles.valueText) }, computedValueLabel))),
+        React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.levelProgress.progressTrack), styles === null || styles === void 0 ? void 0 : styles.progressTrack), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuenow": clampedCurrent, "aria-label": "Level progress" },
+            React.createElement("div", { style: progressBarStyles })),
+        showPercent && (React.createElement("div", { style: Object.assign(Object.assign({}, defaultStyles.levelProgress.progressText), styles === null || styles === void 0 ? void 0 : styles.progressText) },
+            progress,
+            "%"))));
+};
+
+/**
+ * A simplified hook for achievement tracking.
+ * Provides the v4 happy path for direct metric updates plus explicit state names.
+ */
+const useSimpleAchievements = () => {
+    const { update, reset, getState, exportData, importData } = useAchievements();
+    const achievementState = useAchievementState();
+    const track = (metric, value) => update({ [metric]: value });
+    const increment = (metric, amount = 1) => {
+        const currentState = getState();
+        const currentMetricArray = currentState.metrics[metric] || [0];
+        const currentValue = Array.isArray(currentMetricArray)
+            ? currentMetricArray[0]
+            : currentMetricArray;
+        const newValue = (typeof currentValue === 'number' ? currentValue : 0) + amount;
+        update({ [metric]: newValue });
+    };
+    const trackMultiple = (metrics) => update(metrics);
+    return {
+        track,
+        increment,
+        trackMultiple,
+        unlockedIds: achievementState.unlockedIds,
+        unlockedAchievements: achievementState.unlockedAchievements,
+        allAchievements: achievementState.allAchievements,
+        unlockedCount: achievementState.unlockedCount,
+        totalCount: achievementState.totalCount,
+        metrics: achievementState.metrics,
+        reset,
+        getState,
+        exportData,
+        importData,
+        getAllAchievements: () => achievementState.allAchievements,
+        /**
+         * @deprecated Use `unlockedIds` instead. This alias will be removed in 4.2.
+         */
+        unlocked: achievementState.unlockedIds,
+        /**
+         * @deprecated Use `allAchievements` instead. This alias will be removed in 4.2.
+         */
+        all: achievementState.allAchievements,
+    };
+};
+
+/**
+ * Built-in modal component
+ * Modern, theme-aware achievement modal with smooth animations
+ */
+const BuiltInModal = ({ isOpen, onClose, achievements, icons = {}, theme = 'modern', }) => {
+    // Merge custom icons with defaults
+    const mergedIcons = Object.assign(Object.assign({}, defaultAchievementIcons), icons);
+    // Get theme configuration
+    const themeConfig = getTheme(theme) || builtInThemes.modern;
+    const { modal: themeStyles } = themeConfig;
+    useEffect(() => {
+        if (isOpen) {
+            // Lock body scroll when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            // Restore body scroll
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const overlayStyles = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: themeStyles.overlayColor,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        animation: 'fadeIn 0.3s ease-in-out',
+    };
+    const modalStyles = {
+        background: themeStyles.background,
+        borderRadius: themeStyles.borderRadius,
+        padding: '32px',
+        maxWidth: '600px',
+        width: '90%',
+        maxHeight: '80vh',
+        overflow: 'auto',
+        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+        animation: 'scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        position: 'relative',
+    };
+    const headerStyles = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '24px',
+    };
+    const titleStyles = {
+        margin: 0,
+        color: themeStyles.textColor,
+        fontSize: themeStyles.headerFontSize || '28px',
+        fontWeight: 'bold',
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        fontSize: '32px',
+        cursor: 'pointer',
+        color: themeStyles.textColor,
+        opacity: 0.6,
+        transition: 'opacity 0.2s',
+        padding: 0,
+        lineHeight: 1,
+    };
+    const isBadgeLayout = themeStyles.achievementLayout === 'badge';
+    const listStyles = isBadgeLayout
+        ? {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+            gap: '16px',
+        }
+        : {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+        };
+    const getAchievementItemStyles = (isUnlocked) => {
+        const baseStyles = {
+            borderRadius: themeStyles.achievementCardBorderRadius || '12px',
+            backgroundColor: isUnlocked
+                ? `${themeStyles.accentColor}1A` // 10% opacity
+                : 'rgba(255, 255, 255, 0.05)',
+            border: `2px solid ${isUnlocked ? themeStyles.accentColor : 'rgba(255, 255, 255, 0.1)'}`,
+            opacity: isUnlocked ? 1 : 0.5,
+            transition: 'all 0.2s',
+        };
+        if (isBadgeLayout) {
+            // Badge layout: vertical, centered, square-ish
+            return Object.assign(Object.assign({}, baseStyles), { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '20px 12px', aspectRatio: '1 / 1.1', minHeight: '160px' });
+        }
+        else {
+            // Horizontal layout (default)
+            return Object.assign(Object.assign({}, baseStyles), { display: 'flex', gap: '16px', padding: '16px' });
+        }
+    };
+    const getIconContainerStyles = (isUnlocked) => {
+        if (isBadgeLayout) {
+            return {
+                fontSize: '48px',
+                lineHeight: 1,
+                marginBottom: '8px',
+                opacity: isUnlocked ? 1 : 0.3,
+            };
+        }
+        return {
+            fontSize: '40px',
+            flexShrink: 0,
+            lineHeight: 1,
+            opacity: isUnlocked ? 1 : 0.3,
+        };
+    };
+    const contentStyles = isBadgeLayout
+        ? {
+            width: '100%',
+        }
+        : {
+            flex: 1,
+            minWidth: 0,
+        };
+    const achievementTitleStyles = isBadgeLayout
+        ? {
+            margin: '0 0 4px 0',
+            color: themeStyles.textColor,
+            fontSize: '14px',
+            fontWeight: 'bold',
+            lineHeight: '1.3',
+        }
+        : {
+            margin: '0 0 8px 0',
+            color: themeStyles.textColor,
+            fontSize: '18px',
+            fontWeight: 'bold',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        };
+    const achievementDescriptionStyles = isBadgeLayout
+        ? {
+            margin: 0,
+            color: themeStyles.textColor,
+            opacity: 0.7,
+            fontSize: '11px',
+            lineHeight: '1.3',
+        }
+        : {
+            margin: 0,
+            color: themeStyles.textColor,
+            opacity: 0.8,
+            fontSize: '14px',
+        };
+    const getLockIconStyles = () => {
+        if (isBadgeLayout) {
+            return {
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                fontSize: '18px',
+                opacity: 0.6,
+            };
+        }
+        return {
+            fontSize: '24px',
+            flexShrink: 0,
+            opacity: 0.5,
+        };
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes scaleIn {
+            from {
+              transform: scale(0.9);
+              opacity: 0;
+            }
+            to {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        `),
+        React.createElement("div", { style: overlayStyles, onClick: onClose, "data-testid": "built-in-modal-overlay" },
+            React.createElement("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), "data-testid": "built-in-modal" },
+                React.createElement("div", { style: headerStyles },
+                    React.createElement("h2", { style: titleStyles }, "\uD83C\uDFC6 Achievements"),
+                    React.createElement("button", { onClick: onClose, style: closeButtonStyles, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.6'), "aria-label": "Close modal" }, "\u00D7")),
+                React.createElement("div", { style: listStyles }, achievements.length === 0 ? (React.createElement("div", { style: { textAlign: 'center', padding: '40px 20px', color: themeStyles.textColor, opacity: 0.6 } }, "No achievements yet. Start exploring to unlock them!")) : (achievements.map((achievement) => {
+                    // If achievementIconKey exists but not in mergedIcons, use it directly (might be an emoji)
+                    // Otherwise, look up in mergedIcons or fall back to default
+                    const icon = (achievement.achievementIconKey &&
+                        mergedIcons[achievement.achievementIconKey]) ||
+                        achievement.achievementIconKey ||
+                        mergedIcons.default ||
+                        '⭐';
+                    return (React.createElement("div", { key: achievement.achievementId, style: Object.assign(Object.assign({}, getAchievementItemStyles(achievement.isUnlocked)), { position: isBadgeLayout ? 'relative' : 'static' }) },
+                        React.createElement("div", { style: getIconContainerStyles(achievement.isUnlocked) }, icon),
+                        React.createElement("div", { style: contentStyles },
+                            React.createElement("h3", { style: achievementTitleStyles }, achievement.achievementTitle),
+                            React.createElement("p", { style: achievementDescriptionStyles }, achievement.achievementDescription)),
+                        !achievement.isUnlocked && (React.createElement("div", { style: getLockIconStyles() }, "\uD83D\uDD12"))));
+                })))))));
+};
+
+export { AchievementContext, AchievementProvider, AchievementsList, AchievementsModal, AchievementsWidget, BadgesButton, BadgesButtonWithModal, BadgesModal, BuiltInConfetti, BuiltInModal, BuiltInNotification, ConfettiWrapper, AchievementProvider$1 as HeadlessAchievementProvider, LevelProgress, defaultAchievementIcons, defaultStyles, isAsyncStorage, useAchievementEngine, useAchievementState, useAchievements, useSimpleAchievements, useWindowSize };
+//# sourceMappingURL=web.esm.js.map