@tagadapay/plugin-sdk 3.0.3 → 3.0.12

package/dist/v2/core/utils/previewMode.js

@@ -0,0 +1,379 @@
+/**
+ * SDK Override Parameters
+ *
+ * Centralized parameter management for SDK behavior overrides.
+ * Parameters can come from URL query params, localStorage, or cookies.
+ *
+ * Key concepts:
+ * - forceReset: Clears all stored state (localStorage, cookies) - simulates hard refresh
+ * - draft: Marks customers/sessions as draft (for staging/preview/testing)
+ * - funnelTracking: Controls whether funnel events are tracked
+ * - tagadaClientEnv: Forces specific environment (production/development/local) - overrides auto-detection
+ * - tagadaClientBaseUrl: Forces custom API base URL - overrides environment-based URL
+ * - token: Authentication token (URL > localStorage)
+ * - funnelSessionId: Active funnel session (URL > cookie)
+ *
+ * Usage examples:
+ * - Force production API: ?tagadaClientEnv=production
+ * - Force development API: ?tagadaClientEnv=development
+ * - Force local API: ?tagadaClientEnv=local
+ * - Custom API URL: ?tagadaClientBaseUrl=https://tagada.loclx.io
+ * - Combined: ?tagadaClientEnv=local&tagadaClientBaseUrl=https://tagada.loclx.io
+ * - Hard reset + production: ?forceReset=true&tagadaClientEnv=production
+ */
+import { clearClientToken, setClientToken, getClientToken } from './tokenStorage';
+import { clearFunnelSessionCookie } from './sessionStorage';
+// Storage keys for SDK override params
+const STORAGE_KEYS = {
+    DRAFT: 'tgd_draft',
+    FUNNEL_TRACKING: 'tgd_funnel_tracking',
+    FORCE_RESET: 'tgd_force_reset',
+    CLIENT_ENV: 'tgd_client_env',
+    CLIENT_BASE_URL: 'tgd_client_base_url',
+};
+/**
+ * Check if force reset is active (simulates hard refresh)
+ */
+export function isForceReset() {
+    if (typeof window === 'undefined')
+        return false;
+    const params = new URLSearchParams(window.location.search);
+    return params.get('forceReset') === 'true';
+}
+/**
+ * Get value from localStorage with fallback
+ */
+function getFromStorage(key) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Set value in localStorage
+ */
+function setInStorage(key, value) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Get value from cookie
+ */
+function getFromCookie(key) {
+    if (typeof document === 'undefined')
+        return null;
+    const cookies = document.cookie.split(';');
+    const cookie = cookies.find(c => c.trim().startsWith(`${key}=`));
+    return cookie ? cookie.split('=')[1]?.trim() : null;
+}
+/**
+ * Set value in cookie
+ */
+function setInCookie(key, value, maxAge = 86400) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${key}=${value}; path=/; max-age=${maxAge}`;
+}
+/**
+ * Clear value from cookie
+ */
+function clearFromCookie(key) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${key}=; path=/; max-age=0`;
+}
+/**
+ * Get SDK override parameters from all sources (URL, localStorage, cookies)
+ * Priority: URL > localStorage > Cookie
+ */
+export function getSDKParams() {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    // Get draft mode (URL > localStorage > cookie)
+    let draft;
+    const urlDraft = urlParams.get('draft');
+    if (urlDraft !== null) {
+        draft = urlDraft === 'true';
+    }
+    else {
+        const storageDraft = getFromStorage(STORAGE_KEYS.DRAFT) || getFromCookie(STORAGE_KEYS.DRAFT);
+        if (storageDraft !== null) {
+            draft = storageDraft === 'true';
+        }
+    }
+    // Get funnel tracking (URL > localStorage > cookie, default true)
+    let funnelTracking;
+    const urlTracking = urlParams.get('funnelTracking');
+    if (urlTracking !== null) {
+        funnelTracking = urlTracking !== 'false';
+    }
+    else {
+        const storageTracking = getFromStorage(STORAGE_KEYS.FUNNEL_TRACKING) || getFromCookie(STORAGE_KEYS.FUNNEL_TRACKING);
+        if (storageTracking !== null) {
+            funnelTracking = storageTracking !== 'false';
+        }
+    }
+    // Get token (URL > localStorage)
+    const token = urlParams.get('token') || getClientToken() || null;
+    // Get funnel session ID (URL only, cookie handled elsewhere)
+    const funnelSessionId = urlParams.get('funnelSessionId') || null;
+    // Get funnel ID (URL only)
+    const funnelId = urlParams.get('funnelId') || null;
+    // Force reset is URL-only (not persisted)
+    const forceReset = urlParams.get('forceReset') === 'true';
+    // Get client environment override (URL > localStorage > cookie)
+    let tagadaClientEnv;
+    const urlEnv = urlParams.get('tagadaClientEnv');
+    if (urlEnv && (urlEnv === 'production' || urlEnv === 'development' || urlEnv === 'local')) {
+        tagadaClientEnv = urlEnv;
+    }
+    else {
+        const storageEnv = getFromStorage(STORAGE_KEYS.CLIENT_ENV) || getFromCookie(STORAGE_KEYS.CLIENT_ENV);
+        if (storageEnv && (storageEnv === 'production' || storageEnv === 'development' || storageEnv === 'local')) {
+            tagadaClientEnv = storageEnv;
+        }
+    }
+    // Get custom API base URL override (URL > localStorage > cookie)
+    let tagadaClientBaseUrl;
+    const urlBaseUrl = urlParams.get('tagadaClientBaseUrl');
+    if (urlBaseUrl) {
+        tagadaClientBaseUrl = urlBaseUrl;
+    }
+    else {
+        const storageBaseUrl = getFromStorage(STORAGE_KEYS.CLIENT_BASE_URL) || getFromCookie(STORAGE_KEYS.CLIENT_BASE_URL);
+        if (storageBaseUrl) {
+            tagadaClientBaseUrl = storageBaseUrl;
+        }
+    }
+    return {
+        forceReset,
+        token,
+        funnelSessionId,
+        funnelId,
+        draft,
+        funnelTracking,
+        tagadaClientEnv,
+        tagadaClientBaseUrl,
+    };
+}
+/**
+ * Legacy alias for backward compatibility
+ * @deprecated Use getSDKParams() instead
+ */
+export function getPreviewParams() {
+    return getSDKParams();
+}
+/**
+ * Check if draft mode is active
+ * Uses centralized getSDKParams()
+ */
+export function isDraftMode() {
+    const params = getSDKParams();
+    return params.draft ?? false;
+}
+/**
+ * Set draft mode in storage for persistence
+ */
+export function setDraftMode(draft) {
+    if (typeof window === 'undefined')
+        return;
+    if (draft) {
+        setInStorage(STORAGE_KEYS.DRAFT, 'true');
+        setInCookie(STORAGE_KEYS.DRAFT, 'true', 86400); // 24 hours
+    }
+    else {
+        setInStorage(STORAGE_KEYS.DRAFT, 'false');
+        clearFromCookie(STORAGE_KEYS.DRAFT);
+    }
+}
+/**
+ * Initialize SDK with override parameters
+ *
+ * This function handles SDK initialization based on override params:
+ * 1. If forceReset flag is set: Clear all stored state (simulates hard refresh)
+ * 2. If token in URL: Use it (override localStorage)
+ * 3. If draft in URL: Persist it to storage
+ * 4. If funnelTracking in URL: Persist it to storage
+ *
+ * @returns True if force reset was activated and state was cleared
+ */
+export function handlePreviewMode(debugMode = false) {
+    const params = getSDKParams();
+    const shouldReset = params.forceReset || false;
+    if (!shouldReset && !params.token) {
+        // Not forcing reset and no explicit token override
+        // But still persist draft/tracking if in URL
+        persistSDKParamsFromURL();
+        return false;
+    }
+    if (debugMode) {
+        console.log('[SDK] Detected params:', params);
+    }
+    // CASE 1: Force reset - clear all state (simulates hard refresh)
+    if (shouldReset) {
+        if (debugMode) {
+            console.log('[SDK] Force reset: Clearing all stored state');
+        }
+        clearClientToken();
+        clearFunnelSessionCookie();
+        // Clear all tagadapay-related localStorage keys
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const keys = Object.keys(localStorage);
+            keys.forEach(key => {
+                if (key.startsWith('tagadapay_') || key.startsWith('tgd_')) {
+                    if (debugMode) {
+                        console.log(`[SDK] Clearing localStorage: ${key}`);
+                    }
+                    localStorage.removeItem(key);
+                }
+            });
+        }
+    }
+    // CASE 2: Token in URL - override stored token
+    if (params.token !== null && params.token !== undefined) {
+        if (debugMode) {
+            console.log('[SDK] Using token from URL:', params.token.substring(0, 20) + '...');
+        }
+        if (params.token === '' || params.token === 'null') {
+            // Explicitly cleared token
+            clearClientToken();
+        }
+        else {
+            // Set token from URL
+            setClientToken(params.token);
+        }
+    }
+    else if (shouldReset) {
+        // Force reset but no token = clear stored token
+        if (debugMode) {
+            console.log('[SDK] Force reset mode (no token)');
+        }
+        clearClientToken();
+    }
+    // CASE 3: Persist URL params to storage
+    persistSDKParamsFromURL();
+    // CASE 4: Funnel session ID in URL - will be used by FunnelClient
+    if (params.funnelSessionId && debugMode) {
+        console.log('[SDK] Using funnelSessionId from URL:', params.funnelSessionId);
+    }
+    return shouldReset;
+}
+/**
+ * Persist SDK parameters from URL to storage
+ * This ensures params survive page navigation
+ */
+function persistSDKParamsFromURL() {
+    if (typeof window === 'undefined')
+        return;
+    const urlParams = new URLSearchParams(window.location.search);
+    // Persist draft mode if in URL
+    const urlDraft = urlParams.get('draft');
+    if (urlDraft !== null) {
+        setDraftMode(urlDraft === 'true');
+    }
+    // Persist funnel tracking if in URL
+    const urlTracking = urlParams.get('funnelTracking');
+    if (urlTracking !== null) {
+        setFunnelTracking(urlTracking !== 'false');
+    }
+    // Persist client environment if in URL
+    const urlEnv = urlParams.get('tagadaClientEnv');
+    if (urlEnv && (urlEnv === 'production' || urlEnv === 'development' || urlEnv === 'local')) {
+        setClientEnvironment(urlEnv);
+    }
+    // Persist custom base URL if in URL
+    const urlBaseUrl = urlParams.get('tagadaClientBaseUrl');
+    if (urlBaseUrl) {
+        setClientBaseUrl(urlBaseUrl);
+    }
+}
+/**
+ * Set funnel tracking mode in storage for persistence
+ */
+export function setFunnelTracking(enabled) {
+    if (typeof window === 'undefined')
+        return;
+    const value = enabled ? 'true' : 'false';
+    setInStorage(STORAGE_KEYS.FUNNEL_TRACKING, value);
+    setInCookie(STORAGE_KEYS.FUNNEL_TRACKING, value, 86400); // 24 hours
+}
+/**
+ * Set client environment override in storage for persistence
+ */
+export function setClientEnvironment(env) {
+    if (typeof window === 'undefined')
+        return;
+    setInStorage(STORAGE_KEYS.CLIENT_ENV, env);
+    setInCookie(STORAGE_KEYS.CLIENT_ENV, env, 86400); // 24 hours
+}
+/**
+ * Clear client environment override
+ */
+export function clearClientEnvironment() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.removeItem(STORAGE_KEYS.CLIENT_ENV);
+        clearFromCookie(STORAGE_KEYS.CLIENT_ENV);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Set custom API base URL override in storage for persistence
+ */
+export function setClientBaseUrl(baseUrl) {
+    if (typeof window === 'undefined')
+        return;
+    setInStorage(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl);
+    setInCookie(STORAGE_KEYS.CLIENT_BASE_URL, baseUrl, 86400); // 24 hours
+}
+/**
+ * Clear custom API base URL override
+ */
+export function clearClientBaseUrl() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.removeItem(STORAGE_KEYS.CLIENT_BASE_URL);
+        clearFromCookie(STORAGE_KEYS.CLIENT_BASE_URL);
+    }
+    catch {
+        // Storage not available
+    }
+}
+/**
+ * Check if we should use URL params over stored values
+ *
+ * Returns true if:
+ * - Force reset is active, OR
+ * - Explicit token/sessionId in URL (indicating intentional override)
+ */
+export function shouldUseUrlParams() {
+    const params = getSDKParams();
+    return !!(params.forceReset ||
+        params.token !== null ||
+        params.funnelSessionId !== null);
+}
+/**
+ * Check if funnel tracking is enabled
+ * Uses centralized getSDKParams()
+ * Default is true for normal operations
+ */
+export function isFunnelTrackingEnabled() {
+    const params = getSDKParams();
+    return params.funnelTracking ?? true; // Default true
+}

package/dist/v2/core/utils/sessionStorage.d.ts

@@ -18,3 +18,8 @@ export declare function clearFunnelSessionCookie(): void;
  * Check if a funnel session cookie exists
  */
 export declare function hasFunnelSessionCookie(): boolean;
+/**
+ * Retrieve funnel variant ID from sticky session (for A/B tracking)
+ * The variant ID is stored in the sticky session metadata by plugin-routing
+ */
+export declare function getFunnelVariantId(): string | undefined;

package/dist/v2/core/utils/sessionStorage.js

@@ -3,6 +3,7 @@
  * Handles session persistence using browser cookies
  */
 const FUNNEL_SESSION_COOKIE_NAME = 'tgd-funnel-session-id';
+const STICKY_SESSION_COOKIE_NAME = 'tgd-session-id';
 const SESSION_MAX_AGE = 30 * 24 * 60 * 60; // 30 days
 /**
  * Save funnel session ID to browser cookie
@@ -37,3 +38,24 @@ export function clearFunnelSessionCookie() {
 export function hasFunnelSessionCookie() {
     return !!getFunnelSessionCookie();
 }
+/**
+ * Retrieve funnel variant ID from sticky session (for A/B tracking)
+ * The variant ID is stored in the sticky session metadata by plugin-routing
+ */
+export function getFunnelVariantId() {
+    if (typeof document === 'undefined')
+        return undefined;
+    try {
+        const cookie = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(`${STICKY_SESSION_COOKIE_NAME}=`));
+        if (!cookie)
+            return undefined;
+        const sessionData = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
+        return sessionData?.metadata?.funnelVariantId;
+    }
+    catch (error) {
+        console.warn('Failed to parse sticky session for variant ID:', error);
+        return undefined;
+    }
+}

package/dist/v2/index.d.ts

@@ -10,6 +10,8 @@ export * from './core/isoData';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/products';
+export * from './core/utils/previewMode';
+export * from './core/utils/configHotReload';
 export * from './core/pathRemapping';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
@@ -23,7 +25,7 @@ export type { ToggleOrderBumpResponse, VipOffer, VipPreviewResponse } from './co
 export type { StoreConfig } from './core/resources/storeConfig';
 export { FunnelActionType } from './core/resources/funnel';
 export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationActionData, FormSubmitActionData, FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelAction as FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, NextAction, OfferAcceptedActionData, OfferDeclinedActionData, PaymentFailedActionData, PaymentSuccessActionData, SimpleFunnelContext } from './core/resources/funnel';
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
 export type { DebugScript } from './react';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
@@ -36,3 +38,4 @@ export type { UseCustomerInfosOptions, UseCustomerInfosResult } from './react/ho
 export type { UseCustomerOrdersOptions, UseCustomerOrdersResult } from './react/hooks/useCustomerOrders';
 export type { UseCustomerSubscriptionsOptions, UseCustomerSubscriptionsResult } from './react/hooks/useCustomerSubscriptions';
 export type { UseShippingRatesQueryOptions, UseShippingRatesQueryResult } from './react/hooks/useShippingRatesQuery';
+export type { PreviewOfferSummary, UsePreviewOfferOptions, UsePreviewOfferResult } from './react/hooks/usePreviewOffer';

package/dist/v2/index.js

@@ -11,8 +11,10 @@ export * from './core/isoData';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/products';
+export * from './core/utils/previewMode';
+export * from './core/utils/configHotReload';
 // Path remapping helpers (framework-agnostic)
 export * from './core/pathRemapping';
 export { FunnelActionType } from './core/resources/funnel';
 // React exports (hooks and components only, types are exported above)
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';

package/dist/v2/react/components/DebugDrawer.js

@@ -79,6 +79,7 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
     const [activeTab, setActiveTab] = useState('overview');
     const [runningScripts, setRunningScripts] = useState(new Set());
     const [scriptResults, setScriptResults] = useState({});
+    const [expandedScriptCategories, setExpandedScriptCategories] = useState({});
     // Handler to jump to a specific step using direct_navigation
     const handleJumpToStep = async (stepId, stepName) => {
         // Try to get sessionId from debug data or context
@@ -187,8 +188,9 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
         const script = context.debugScripts?.find((s) => s.id === scriptId);
         if (!script)
             return;
+        // Clear previous script results so only the current script shows a status
+        setScriptResults({});
         setRunningScripts((prev) => new Set(prev).add(scriptId));
-        setScriptResults((prev) => ({ ...prev, [scriptId]: undefined }));
         try {
             await script.run(context);
             setScriptResults((prev) => ({
@@ -733,51 +735,71 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
                                                 acc[category].push(script);
                                                 return acc;
                                             }, {});
-                                            return Object.entries(grouped).map(([category, scripts]) => (_jsxs("div", { children: [_jsx("div", { style: {
-                                                            fontSize: '11px',
-                                                            color: '#9ca3af',
-                                                            fontWeight: 'bold',
-                                                            marginBottom: '8px',
-                                                            textTransform: 'uppercase',
-                                                            letterSpacing: '0.5px',
-                                                        }, children: category }), _jsx("div", { style: { display: 'grid', gap: '8px' }, children: scripts.map((script) => {
-                                                            const isRunning = runningScripts.has(script.id);
-                                                            const result = scriptResults[script.id];
-                                                            return (_jsxs("div", { style: {
-                                                                    border: '1px solid #374151',
-                                                                    borderRadius: '6px',
-                                                                    padding: '10px 12px',
-                                                                    backgroundColor: '#111827',
-                                                                }, children: [_jsxs("div", { style: {
-                                                                            display: 'flex',
-                                                                            justifyContent: 'space-between',
-                                                                            alignItems: 'flex-start',
-                                                                            gap: '12px',
-                                                                        }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
-                                                                                            color: '#f9fafb',
-                                                                                            fontWeight: 'bold',
-                                                                                            fontSize: '12px',
-                                                                                            marginBottom: '4px',
-                                                                                        }, children: script.name }), script.description && (_jsx("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: script.description }))] }), _jsx("button", { onClick: () => handleRunScript(script.id), disabled: isRunning, style: {
-                                                                                    backgroundColor: isRunning ? '#374151' : '#3b82f6',
-                                                                                    color: '#fff',
-                                                                                    border: 'none',
-                                                                                    borderRadius: '4px',
-                                                                                    padding: '6px 12px',
-                                                                                    fontSize: '11px',
-                                                                                    fontWeight: 'bold',
-                                                                                    cursor: isRunning ? 'not-allowed' : 'pointer',
-                                                                                    transition: 'background-color 0.2s',
-                                                                                    minWidth: '60px',
-                                                                                }, children: isRunning ? '⏳' : '▶ Run' })] }), result && (_jsxs("div", { style: {
-                                                                            marginTop: '8px',
-                                                                            padding: '6px 8px',
-                                                                            borderRadius: '4px',
-                                                                            fontSize: '10px',
-                                                                            backgroundColor: result.success ? '#065f46' : '#7f1d1d',
-                                                                            color: result.success ? '#6ee7b7' : '#fca5a5',
-                                                                        }, children: [result.success ? '✅' : '❌', " ", result.message] }))] }, script.id));
-                                                        }) })] }, category)));
+                                            return Object.entries(grouped).map(([category, scripts]) => {
+                                                const isExpanded = expandedScriptCategories[category] ?? false;
+                                                const toggleCategory = () => {
+                                                    setExpandedScriptCategories((prev) => ({
+                                                        ...prev,
+                                                        [category]: !(prev[category] ?? false),
+                                                    }));
+                                                };
+                                                return (_jsxs("div", { children: [_jsx("button", { type: "button", onClick: toggleCategory, style: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'space-between',
+                                                                width: '100%',
+                                                                background: 'none',
+                                                                border: 'none',
+                                                                padding: '6px 0',
+                                                                cursor: 'pointer',
+                                                            }, children: _jsxs("div", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '6px',
+                                                                    fontSize: '11px',
+                                                                    fontWeight: 'bold',
+                                                                    textTransform: 'uppercase',
+                                                                    letterSpacing: '0.5px',
+                                                                    color: '#9ca3af',
+                                                                }, children: [_jsx("span", { style: { fontSize: '10px' }, children: isExpanded ? '▼' : '▶' }), _jsx("span", { children: category }), _jsxs("span", { style: { fontSize: '10px', color: '#6b7280' }, children: ["(", scripts.length, ")"] })] }) }), isExpanded && (_jsx("div", { style: { display: 'grid', gap: '8px', marginTop: '4px' }, children: scripts.map((script) => {
+                                                                const isRunning = runningScripts.has(script.id);
+                                                                const result = scriptResults[script.id];
+                                                                return (_jsxs("div", { style: {
+                                                                        border: '1px solid #374151',
+                                                                        borderRadius: '6px',
+                                                                        padding: '10px 12px',
+                                                                        backgroundColor: '#111827',
+                                                                    }, children: [_jsxs("div", { style: {
+                                                                                display: 'flex',
+                                                                                justifyContent: 'space-between',
+                                                                                alignItems: 'flex-start',
+                                                                                gap: '12px',
+                                                                            }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
+                                                                                                color: '#f9fafb',
+                                                                                                fontWeight: 'bold',
+                                                                                                fontSize: '12px',
+                                                                                                marginBottom: '4px',
+                                                                                            }, children: script.name }), script.description && (_jsx("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: script.description }))] }), _jsx("button", { onClick: () => handleRunScript(script.id), disabled: isRunning, style: {
+                                                                                        backgroundColor: isRunning ? '#374151' : '#3b82f6',
+                                                                                        color: '#fff',
+                                                                                        border: 'none',
+                                                                                        borderRadius: '4px',
+                                                                                        padding: '6px 12px',
+                                                                                        fontSize: '11px',
+                                                                                        fontWeight: 'bold',
+                                                                                        cursor: isRunning ? 'not-allowed' : 'pointer',
+                                                                                        transition: 'background-color 0.2s',
+                                                                                        minWidth: '60px',
+                                                                                    }, children: isRunning ? '⏳' : '▶ Run' })] }), result && (_jsxs("div", { style: {
+                                                                                marginTop: '8px',
+                                                                                padding: '6px 8px',
+                                                                                borderRadius: '4px',
+                                                                                fontSize: '10px',
+                                                                                backgroundColor: result.success ? '#065f46' : '#7f1d1d',
+                                                                                color: result.success ? '#6ee7b7' : '#fca5a5',
+                                                                            }, children: [result.success ? '✅' : '❌', " ", result.message] }))] }, script.id));
+                                                            }) }))] }, category));
+                                            });
                                         })() })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No debug scripts available" }))] })), activeTab === 'raw' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Raw Context Data" }), _jsx("div", { style: { fontSize: '12px' }, children: _jsx(TreeView, { data: context, name: "tagadaContext", maxLevel: 4 }) })] }))] })] })] }));
 };
 export default DebugDrawer;