@donotdev/ui 0.0.2 → 0.0.4

package/dist/internal/devtools/components/DebugDialog.js

@@ -1,537 +1,33 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 // packages/ui/src/internal/devtools/components/DebugDialog.tsx
 /**
  * @fileoverview Debug Dialog Component
- * @description Comprehensive debug panel with multiple tabs for discovery, stores, UI, environment, initialization flow, and errors
+ * @description Clean debug panel - Config, Design, Cookies, Stores
  *
- * @version 0.0.2
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { PanelRight } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { cn, Button, BUTTON_VARIANT, Sheet, Tabs, Stack, ScrollArea, Accordion, Card, JsonViewer, CopyToClipboard, Text, Alert, ALERT_VARIANT, } from '@donotdev/components';
-import { BREAKPOINT_RANGES, getPlatformEnvVar } from '@donotdev/core';
-import { getDndevConfig } from '@donotdev/core';
-import { AuthTab } from './AuthTab';
-import { ColorRatioTab } from './ColorRatioTab';
+import { useState } from 'react';
+import { Button, BUTTON_VARIANT, Sheet, Tabs, Stack, ScrollArea, } from '@donotdev/components';
 import { ConfigTab } from './ConfigTab';
 import { CookieTab } from './CookieTab';
-import { EnvironmentTab } from './EnvironmentTab';
-import { I18nTab } from './I18nTab';
+import { DesignTab } from './DesignTab';
 import { StoresTab } from './StoresTab';
-import { StripeDebugTab } from './StripeDebugTab';
-import { ThemesTab } from './ThemesTab';
-import { shouldMaskValue, maskSensitiveValue, maskSensitiveData, } from '../utils/maskSensitive';
-// Dynamic discovery functions
-const discoverEnvironment = () => {
-    return {
-        firebase: {
-            apiKey: getPlatformEnvVar('FIREBASE_API_KEY') ? '✅ Set' : '❌ Missing',
-            projectId: getPlatformEnvVar('FIREBASE_PROJECT_ID')
-                ? '✅ Set'
-                : '❌ Missing',
-            storageBucket: getPlatformEnvVar('FIREBASE_STORAGE_BUCKET')
-                ? '✅ Set'
-                : '⚠️ Optional',
-            appId: getPlatformEnvVar('FIREBASE_APP_ID') ? '✅ Set' : '⚠️ Optional',
-        },
-        oauth: {
-            googleClientId: getPlatformEnvVar('GOOGLE_CLIENT_ID')
-                ? '✅ Set'
-                : '❌ Missing',
-            githubClientId: getPlatformEnvVar('GITHUB_CLIENT_ID')
-                ? '✅ Set'
-                : '❌ Missing',
-            authPartners: getPlatformEnvVar('AUTH_PARTNERS')
-                ? '✅ Set'
-                : '❌ Missing',
-        },
-        authPartners: {
-            value: getPlatformEnvVar('AUTH_PARTNERS') || 'Not Set',
-            enabled: getPlatformEnvVar('AUTH_PARTNERS')
-                ? getPlatformEnvVar('AUTH_PARTNERS')
-                    .split(',')
-                    .map((p) => p.trim())
-                : [],
-        },
-        demoMode: window.__FIREBASE_DEMO_MODE__
-            ? '❌ Enabled (Auth disabled)'
-            : '✅ Disabled (Auth enabled)',
-    };
-};
-const discoverListeners = () => {
-    const listeners = {};
-    // Try to discover from storeEventManager or config
-    const config = getDndevConfig();
-    if (config) {
-        if (config.eventManager) {
-            Object.entries(config.eventManager.listeners || {}).forEach(([name, listener]) => {
-                listeners[name] = {
-                    status: listener.active ? 'active' : 'inactive',
-                    events: listener.events || [],
-                    lastEvent: listener.lastEvent || null,
-                    error: listener.error || null,
-                };
-            });
-        }
-    }
-    return listeners;
-};
-const discoverPerformance = () => {
-    const metrics = {
-        start: null,
-        phases: {},
-        total: null,
-    };
-    const config = getDndevConfig();
-    if (config?.performance) {
-        metrics.start = config.performance.startTime;
-        metrics.phases = config.performance.phases || {};
-        metrics.total = config.performance.total;
-    }
-    return metrics;
-};
-const discoverErrors = () => {
-    const errors = {
-        critical: [],
-        warnings: [],
-        suggestions: [],
-    };
-    const config = getDndevConfig();
-    if (config?.errors) {
-        errors.critical = config.errors.critical || [];
-        errors.warnings = config.errors.warnings || [];
-        errors.suggestions = config.errors.suggestions || [];
-    }
-    return errors;
-};
-const discoverInitializationFlow = () => {
-    const flow = {
-        coreStores: {
-            status: 'initialized',
-            stores: [],
-        },
-        providers: {
-            status: 'active',
-            hierarchy: [],
-        },
-    };
-    // Check core stores
-    if (typeof window !== 'undefined') {
-        try {
-            // Try to access core stores
-            const config = getDndevConfig();
-            const coreStores = [
-                { name: 'ThemeStore', check: () => config?.themes },
-                { name: 'LoadingStore', check: () => true }, // Always available
-                { name: 'ErrorStore', check: () => true }, // Always available
-                { name: 'OverlayStore', check: () => true }, // Always available
-                { name: 'NetworkStore', check: () => true }, // Always available
-                { name: 'NavigationStore', check: () => config?.routes },
-                { name: 'AbortControllerStore', check: () => true }, // Always available
-            ];
-            coreStores.forEach((store) => {
-                try {
-                    const isAvailable = store.check();
-                    flow.coreStores.stores.push({
-                        name: store.name,
-                        status: isAvailable ? 'ready' : 'missing',
-                        error: isAvailable ? undefined : 'Store not available',
-                    });
-                }
-                catch (error) {
-                    flow.coreStores.stores.push({
-                        name: store.name,
-                        status: 'error',
-                        error: error instanceof Error ? error.message : 'Unknown error',
-                    });
-                }
-            });
-        }
-        catch (error) {
-            flow.coreStores.status = 'error';
-            flow.coreStores.stores.push({
-                name: 'CoreStores',
-                status: 'error',
-                error: error instanceof Error ? error.message : 'Unknown error',
-            });
-        }
-        // Check provider hierarchy - INDIVIDUAL providers, not groups
-        const providerHierarchy = [
-            // Top-level providers
-            { name: 'Suspense', status: 'active', lazy: false, group: 'React' },
-            { name: 'HelmetProvider', status: 'active', lazy: false, group: 'SEO' },
-            // Store initialization
-            {
-                name: 'ViteStoreInitializer',
-                status: 'active',
-                lazy: false,
-                group: 'Stores',
-            },
-            // Navigation & Routing
-            {
-                name: 'NavigationProvider',
-                status: 'active',
-                lazy: false,
-                group: 'Routing',
-            },
-            // Internationalization
-            { name: 'I18nProvider', status: 'active', lazy: false, group: 'i18n' },
-            // Core Providers (expanded) - Loading now handled by Zustand store
-            // Query Providers (expanded)
-            {
-                name: 'QueryClientProvider',
-                status: 'conditional',
-                lazy: true,
-                group: 'Data',
-            },
-            // UI Providers (expanded)
-            { name: 'ErrorBoundary', status: 'active', lazy: false, group: 'UI' },
-            { name: 'TooltipProvider', status: 'active', lazy: false, group: 'UI' },
-            { name: 'ErrorProvider', status: 'active', lazy: false, group: 'UI' },
-            { name: 'ToastProvider', status: 'active', lazy: false, group: 'UI' },
-            // LoadingUIProvider removed - now handled by Zustand store
-            { name: 'ModalProvider', status: 'active', lazy: false, group: 'UI' },
-            { name: 'Toaster', status: 'active', lazy: false, group: 'UI' },
-            // Layout & Content
-            { name: 'Layout', status: 'active', lazy: false, group: 'Layout' },
-            { name: 'FaviconHead', status: 'conditional', lazy: false, group: 'SEO' },
-            {
-                name: 'AutoMetaTags',
-                status: 'conditional',
-                lazy: false,
-                group: 'SEO',
-            },
-            // Feature Providers (lazy)
-            { name: 'AuthProvider', status: 'lazy', lazy: true, group: 'Features' },
-            {
-                name: 'BillingProvider',
-                status: 'lazy',
-                lazy: true,
-                group: 'Features',
-            },
-            { name: 'OAuthProvider', status: 'lazy', lazy: true, group: 'Features' },
-            // App Content
-            { name: 'AppRoutes', status: 'active', lazy: false, group: 'App' },
-        ];
-        flow.providers.hierarchy = providerHierarchy;
-    }
-    return flow;
-};
-// Debug tab components
-const DiscoveryDebugTab = () => {
-    const [data, setData] = useState(() => {
-        const config = getDndevConfig();
-        if (config?.env) {
-            return {
-                ...config,
-                env: maskSensitiveData(config.env),
-            };
-        }
-        return config;
-    });
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const newData = getDndevConfig();
-            if (newData) {
-                setData({
-                    ...newData,
-                    env: newData.env ? maskSensitiveData(newData.env) : newData.env,
-                });
-            }
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    const formatJSON = (data) => {
-        try {
-            return JSON.stringify(data, null, 2);
-        }
-        catch (error) {
-            return 'Error formatting data';
-        }
-    };
-    const copyToClipboard = async (text, label) => {
-        try {
-            await navigator.clipboard.writeText(text);
-            console.log(`✅ Copied ${label} to clipboard`);
-        }
-        catch (error) {
-            console.error(`❌ Failed to copy ${label}:`, error);
-        }
-    };
-    if (!data) {
-        return (_jsx("div", { style: { padding: 'var(--gap-lg) 0' }, children: "No discovery data found. Config is not available." }));
-    }
-    return (_jsxs("div", { className: "dndev-flex dndev-gap-lg", children: [_jsxs("div", { className: "dndev-flex dndev-items-center dndev-justify-between", children: [_jsx("h3", { children: "Discovery Data (Config)" }), _jsx("button", { onClick: () => copyToClipboard(formatJSON(data), 'Discovery Data'), style: {
-                            paddingLeft: 'var(--spacing-md)',
-                            paddingRight: 'var(--spacing-md)',
-                            paddingTop: 'var(--spacing-sm)',
-                            paddingBottom: 'var(--spacing-sm)',
-                            backgroundColor: 'rgb(219 234 254)',
-                            color: 'rgb(30 64 175)',
-                            borderRadius: 'var(--radius)',
-                        }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = 'rgb(191 219 254)'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'rgb(219 234 254)'), children: "\uD83D\uDCCB Copy to Clipboard" })] }), data.themes && (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsxs("h4", { style: { color: 'rgb(147 51 234)' }, children: ["Themes (", data.themes.discovered?.length || 0, " found)"] }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '16rem' }, children: formatJSON(data.themes) }) })] })), data.routes && (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsxs("h4", { style: { color: 'rgb(37 99 235)' }, children: ["Routes (", data.routes.mapping?.length || 0, " found)"] }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '16rem' }, children: formatJSON(data.routes) }) })] })), data.i18n && (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsxs("h4", { style: { color: 'rgb(22 163 74)' }, children: ["I18n (", Object.keys(data.i18n.content || {}).length, " namespaces)"] }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '16rem' }, children: formatJSON(data.i18n) }) })] })), data.features && (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsxs("h4", { style: { color: 'rgb(234 88 12)' }, children: ["Features (", Object.keys(data.features).length, " found)"] }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '16rem' }, children: formatJSON(data.features) }) })] })), data.assets && (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(220 38 38)' }, children: "Assets" }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '16rem' }, children: formatJSON(data.assets) }) })] })), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(75 85 99)' }, children: "Complete Raw Data" }), _jsx("div", { style: { borderRadius: 'var(--radius-lg)' }, children: _jsx("pre", { className: "dndev-overflow-y-auto", style: { maxHeight: '24rem' }, children: formatJSON(data) }) })] })] }));
-};
-const UIDebugTab = () => {
-    const [componentData, setComponentData] = useState({});
-    useEffect(() => {
-        const interval = setInterval(() => {
-            // Gather UI-related debug data
-            const uiData = {
-                viewport: {
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                    devicePixelRatio: window.devicePixelRatio,
-                },
-                theme: {
-                    currentTheme: document.documentElement.getAttribute('data-theme'),
-                    colorScheme: window.getComputedStyle(document.documentElement)
-                        .colorScheme,
-                    darkMode: document.documentElement.classList.contains('dark'),
-                },
-                layout: {
-                    dataLayout: document.documentElement.getAttribute('data-layout'),
-                    layoutPreset: document.documentElement.getAttribute('data-layout-preset'),
-                },
-                breakpoints: {
-                    mobile: window.matchMedia(`(max-width: ${BREAKPOINT_RANGES.tablet.min - 1}px)`).matches,
-                    tablet: window.matchMedia(`(min-width: ${BREAKPOINT_RANGES.tablet.min}px) and (max-width: ${BREAKPOINT_RANGES.desktop.min - 1}px)`).matches,
-                    desktop: window.matchMedia(`(min-width: ${BREAKPOINT_RANGES.desktop.min}px) and (max-width: ${BREAKPOINT_RANGES.wide.min - 1}px)`).matches,
-                    wide: window.matchMedia(`(min-width: ${BREAKPOINT_RANGES.wide.min}px)`).matches,
-                },
-                debug: {
-                    debugEnabled: document.documentElement.style.getPropertyValue('--debug-enabled') === '1',
-                    debugBorders: !!document.querySelector('[data-debug="true"]'),
-                },
-                components: {
-                    debugTools: !!document.querySelector('[data-debug-tools="true"]'),
-                    modals: document.querySelectorAll('[role="dialog"]').length,
-                    tooltips: document.querySelectorAll('[role="tooltip"]').length,
-                    dropdowns: document.querySelectorAll('[role="menu"]').length,
-                },
-            };
-            setComponentData(uiData);
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsxs("div", { className: "dndev-flex dndev-gap-lg", children: [_jsx("h3", { children: "UI Debug Information" }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(37 99 235)' }, children: "Viewport" }), _jsxs("div", { className: "dndev-grid dndev-grid-cols-2 dndev-gap-md", children: [_jsxs("div", { children: [_jsx("div", { children: "Dimensions" }), _jsxs("div", { children: [componentData.viewport?.width, " \u00D7 ", componentData.viewport?.height] })] }), _jsxs("div", { children: [_jsx("div", { children: "Device Pixel Ratio" }), _jsx("div", { children: componentData.viewport?.devicePixelRatio })] })] })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(147 51 234)' }, children: "Theme" }), _jsxs("div", { className: "dndev-grid dndev-grid-cols-3 dndev-gap-md", children: [_jsxs("div", { children: [_jsx("div", { children: "Current Theme" }), _jsx("div", { children: componentData.theme?.currentTheme || 'Not set' })] }), _jsxs("div", { children: [_jsx("div", { children: "Color Scheme" }), _jsx("div", { children: componentData.theme?.colorScheme || 'Not set' })] }), _jsxs("div", { children: [_jsx("div", { children: "Dark Mode" }), _jsx("div", { children: componentData.theme?.darkMode ? '✅ Yes' : '❌ No' })] })] })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(22 163 74)' }, children: "Layout" }), _jsxs("div", { className: "dndev-grid dndev-grid-cols-2 dndev-gap-md", children: [_jsxs("div", { children: [_jsx("div", { children: "Data Layout" }), _jsx("div", { children: componentData.layout?.dataLayout || 'Not set' })] }), _jsxs("div", { children: [_jsx("div", { children: "Layout Preset" }), _jsx("div", { children: componentData.layout?.layoutPreset || 'Not set' })] })] })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(234 88 12)' }, children: "Breakpoints" }), _jsx("div", { className: "dndev-grid dndev-grid-cols-4 dndev-gap-md", children: Object.entries(componentData.breakpoints || {}).map(([name, active]) => (_jsxs("div", { children: [_jsx("div", { className: "capitalize", children: name }), _jsx("div", { children: active ? '✅ Active' : '❌ Inactive' })] }, name))) })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(220 38 38)' }, children: "Active Components" }), _jsx("div", { className: "dndev-grid dndev-grid-cols-4 dndev-gap-md", children: Object.entries(componentData.components || {}).map(([name, count]) => (_jsxs("div", { children: [_jsx("div", { className: "capitalize", children: name }), _jsx("div", { children: typeof count === 'boolean'
-                                        ? count
-                                            ? '✅ Yes'
-                                            : '❌ No'
-                                        : String(count) })] }, name))) })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(75 85 99)' }, children: "Debug Status" }), _jsxs("div", { className: "dndev-grid dndev-grid-cols-2 dndev-gap-md", children: [_jsxs("div", { children: [_jsx("div", { children: "Debug Enabled" }), _jsx("div", { children: componentData.debug?.debugEnabled ? '✅ Yes' : '❌ No' })] }), _jsxs("div", { children: [_jsx("div", { children: "Debug Borders" }), _jsx("div", { children: componentData.debug?.debugBorders ? '✅ Yes' : '❌ No' })] })] })] })] }));
-};
-const EnvironmentDebugTab = () => {
-    const [data, setData] = useState(discoverEnvironment());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setData(discoverEnvironment());
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h3", { children: "Environment Variables" }), _jsxs("div", { className: "dndev-grid dndev-grid-cols-1  dndev-gap-md", children: [_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(37 99 235)' }, children: "Firebase Configuration" }), _jsx("div", { className: "dndev-flex dndev-gap-sm", children: Object.entries(data.firebase).map(([key, value]) => (_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsxs("span", { style: { width: '8rem' }, children: [key, ":"] }), _jsx("span", { style: {
-                                                padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                                borderRadius: 'var(--radius)',
-                                                fontSize: 'var(--font-size-xs)',
-                                                backgroundColor: value.includes('✅')
-                                                    ? 'rgb(220 252 231)'
-                                                    : value.includes('⚠️')
-                                                        ? 'rgb(254 249 195)'
-                                                        : 'rgb(254 226 226)',
-                                                color: value.includes('✅')
-                                                    ? 'rgb(22 101 52)'
-                                                    : value.includes('⚠️')
-                                                        ? 'rgb(133 77 14)'
-                                                        : 'rgb(153 27 27)',
-                                            }, children: value })] }, key))) })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(22 163 74)' }, children: "OAuth Configuration" }), _jsx("div", { className: "dndev-flex dndev-gap-sm", children: Object.entries(data.oauth).map(([key, value]) => (_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsxs("span", { style: { width: '8rem' }, children: [key, ":"] }), _jsx("span", { style: {
-                                                padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                                borderRadius: 'var(--radius)',
-                                                fontSize: 'var(--font-size-xs)',
-                                                backgroundColor: value.includes('✅')
-                                                    ? 'rgb(220 252 231)'
-                                                    : 'rgb(254 226 226)',
-                                                color: value.includes('✅')
-                                                    ? 'rgb(22 101 52)'
-                                                    : 'rgb(153 27 27)',
-                                            }, children: value })] }, key))) })] })] }), _jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h4", { children: "Auth Partners Configuration" }), _jsxs("div", { className: "dndev-flex dndev-gap-sm", children: [_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { style: { width: '8rem' }, children: "Value:" }), _jsx("span", { style: { fontFamily: 'monospace', paddingBlock: '0.25rem' }, children: data.authPartners.value !== 'Not Set' &&
-                                            shouldMaskValue('AUTH_PARTNERS', data.authPartners.value)
-                                            ? `${maskSensitiveValue(data.authPartners.value)} (masked)`
-                                            : data.authPartners.value })] }), _jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { style: { width: '8rem' }, children: "Enabled:" }), _jsx("div", { className: "dndev-flex dndev-gap-sm", children: data.authPartners.enabled.length > 0 ? (data.authPartners.enabled.map((partner, index) => (_jsx("span", { style: {
-                                                paddingLeft: 'var(--spacing-md)',
-                                                paddingRight: 'var(--spacing-md)',
-                                                paddingTop: 'var(--spacing-sm)',
-                                                paddingBottom: 'var(--spacing-sm)',
-                                                backgroundColor: 'rgb(from var(--success) r g b / 0.1)',
-                                                color: 'var(--success)',
-                                            }, children: partner }, index)))) : (_jsx("span", { style: {
-                                                paddingLeft: 'var(--spacing-md)',
-                                                paddingRight: 'var(--spacing-md)',
-                                                paddingTop: 'var(--spacing-sm)',
-                                                paddingBottom: 'var(--spacing-sm)',
-                                                backgroundColor: 'rgb(from var(--destructive) r g b / 0.1)',
-                                                color: 'var(--destructive)',
-                                            }, children: "None" })) })] })] })] }), _jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx("h4", { children: "Firebase Status" }), _jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { children: "Demo Mode:" }), _jsx("span", { style: {
-                                    padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                    borderRadius: 'var(--radius)',
-                                    fontSize: 'var(--font-size-xs)',
-                                    backgroundColor: data.demoMode.includes('❌')
-                                        ? 'rgb(254 226 226)'
-                                        : 'rgb(220 252 231)',
-                                    color: data.demoMode.includes('❌')
-                                        ? 'rgb(153 27 27)'
-                                        : 'rgb(22 101 52)',
-                                }, children: data.demoMode })] })] })] }));
-};
-const ListenersDebugTab = () => {
-    const [data, setData] = useState(discoverListeners());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setData(discoverListeners());
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h3", { children: "Event Listeners" }), _jsx("div", { className: "dndev-grid dndev-gap-sm", children: Object.entries(data).map(([name, listener]) => (_jsxs("div", { children: [_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsxs("span", { className: "font-mono", children: [name, ":"] }), _jsx("span", { style: {
-                                        padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                        borderRadius: 'var(--radius)',
-                                        fontSize: 'var(--font-size-xs)',
-                                        backgroundColor: listener.status === 'active'
-                                            ? 'rgb(220 252 231)'
-                                            : 'rgb(254 226 226)',
-                                        color: listener.status === 'active'
-                                            ? 'rgb(22 101 52)'
-                                            : 'rgb(153 27 27)',
-                                    }, children: listener.status === 'active' ? '✅ Active' : '❌ Inactive' })] }), _jsxs("div", { children: [_jsxs("div", { children: ["Events: ", listener.events.join(', ') || 'None'] }), _jsxs("div", { children: ["Last Event: ", listener.lastEvent || 'None'] }), listener.error && (_jsxs("div", { style: { color: 'rgb(220 38 38)' }, children: ["Error: ", listener.error] }))] })] }, name))) })] }));
-};
-const PerformanceDebugTab = () => {
-    const [data, setData] = useState(discoverPerformance());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setData(discoverPerformance());
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h3", { children: "Performance Metrics" }), _jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsxs("div", { children: [_jsx("div", { children: "Initialization Timeline" }), _jsxs("div", { children: [_jsxs("div", { children: ["Start:", ' ', data.start
-                                                ? new Date(data.start).toLocaleTimeString()
-                                                : 'Unknown'] }), _jsxs("div", { children: ["Total: ", data.total ? `${data.total}ms` : 'Unknown'] })] })] }), _jsxs("div", { children: [_jsx("div", { children: "Phase Breakdown" }), _jsx("div", { className: "dndev-flex dndev-gap-sm", children: Object.entries(data.phases).map(([phase, timing]) => (_jsxs("div", { className: "dndev-flex dndev-justify-between", children: [_jsxs("span", { className: "font-mono", children: [phase, ":"] }), _jsx("span", { children: timing ? `${timing}ms` : 'Unknown' })] }, phase))) })] })] })] }));
-};
-const ErrorsDebugTab = () => {
-    const [data, setData] = useState(discoverErrors());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setData(discoverErrors());
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    return (_jsxs("div", { className: "dndev-grid dndev-gap-md", children: [_jsx("h3", { children: "Errors & Issues" }), data.critical.length > 0 && (_jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx("h4", { style: { color: 'rgb(220 38 38)' }, children: "Critical Issues" }), data.critical.map((error, index) => (_jsx("div", { style: {
-                            border: '1px solid var(--destructive)',
-                            color: 'var(--destructive)',
-                            padding: 'var(--spacing-sm)',
-                        }, children: error }, index)))] })), data.warnings.length > 0 && (_jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx("h4", { style: { color: 'rgb(202 138 4)' }, children: "Warnings" }), data.warnings.map((warning, index) => (_jsx("div", { style: {
-                            border: '1px solid var(--warning)',
-                            color: 'var(--warning)',
-                            padding: 'var(--spacing-sm)',
-                        }, children: warning }, index)))] })), data.suggestions.length > 0 && (_jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx("h4", { style: { color: 'rgb(37 99 235)' }, children: "Suggestions" }), data.suggestions.map((suggestion, index) => (_jsx("div", { style: {
-                            border: '1px solid var(--accent)',
-                            color: 'var(--accent)',
-                            padding: 'var(--spacing-sm)',
-                        }, children: suggestion }, index)))] })), data.critical.length === 0 &&
-                data.warnings.length === 0 &&
-                data.suggestions.length === 0 && (_jsx("div", { style: { padding: 'var(--gap-lg) 0' }, children: "No issues found. Everything looks good! \uD83C\uDF89" }))] }));
-};
-const InitializationFlowDebugTab = () => {
-    const [data, setData] = useState(discoverInitializationFlow());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setData(discoverInitializationFlow());
-        }, 1000);
-        return () => clearInterval(interval);
-    }, []);
-    const getStatusColor = (status) => {
-        switch (status) {
-            case 'ready':
-            case 'active':
-            case 'all_initialized':
-                return { backgroundColor: 'rgb(220 252 231)', color: 'rgb(22 101 52)' };
-            case 'missing':
-            case 'error':
-            case 'broken':
-            case 'none_initialized':
-                return { backgroundColor: 'rgb(254 226 226)', color: 'rgb(153 27 27)' };
-            case 'pending':
-            case 'partial':
-                return { backgroundColor: 'rgb(254 249 195)', color: 'rgb(133 77 14)' };
-            case 'conditional':
-                return { backgroundColor: 'rgb(219 234 254)', color: 'rgb(30 64 175)' };
-            default:
-                return { backgroundColor: 'rgb(243 244 246)', color: 'rgb(31 41 55)' };
-        }
-    };
-    return (_jsxs("div", { className: "dndev-flex dndev-gap-lg", children: [_jsx("h3", { children: "Initialization Flow & Status" }), _jsxs("div", { className: "dndev-flex dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(37 99 235)' }, children: "Core Stores (Eager Loading)" }), _jsxs("div", { children: [_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { children: "Status:" }), _jsx("span", { style: {
-                                            padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                            borderRadius: 'var(--radius)',
-                                            fontSize: 'var(--font-size-xs)',
-                                            ...getStatusColor(data.coreStores.status),
-                                        }, children: data.coreStores.status })] }), _jsx("div", { className: "dndev-grid dndev-gap-sm", children: data.coreStores.stores.map((store, index) => (_jsxs("div", { className: "dndev-flex dndev-items-center dndev-justify-between", children: [_jsxs("span", { className: "font-mono", children: [store.name, ":"] }), _jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { style: {
-                                                        padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                                        borderRadius: 'var(--radius)',
-                                                        fontSize: 'var(--font-size-xs)',
-                                                        ...getStatusColor(store.status),
-                                                    }, children: store.status }), store.error && (_jsx("span", { style: { color: 'rgb(220 38 38)' }, title: store.error, children: "\u26A0\uFE0F" }))] })] }, index))) })] })] }), _jsxs("div", { className: "dndev-flex dndev-gap-md", children: [_jsx("h4", { style: { color: 'rgb(147 51 234)' }, children: "Provider Hierarchy (Individual Components)" }), _jsx("div", { className: "dndev-flex dndev-gap-md", children: Object.entries(data.providers.hierarchy.reduce((groups, provider) => {
-                            const group = provider.group || 'Other';
-                            if (!groups[group])
-                                groups[group] = [];
-                            groups[group].push(provider);
-                            return groups;
-                        }, {})).map(([groupName, providers]) => (_jsxs("div", { children: [_jsxs("div", { style: { color: 'rgb(126 34 206)' }, children: [groupName, " (", providers.length, ")"] }), _jsx("div", { className: "dndev-grid dndev-gap-sm", children: providers.map((provider, index) => (_jsxs("div", { className: "dndev-flex dndev-items-center dndev-justify-between", children: [_jsxs("div", { className: "dndev-flex dndev-items-center dndev-gap-sm", children: [_jsx("span", { className: "font-mono", children: provider.name }), provider.lazy && (_jsx("span", { style: { color: 'rgb(37 99 235)' }, children: "(lazy)" })), provider.status === 'conditional' && (_jsx("span", { style: { color: 'rgb(234 88 12)' }, children: "(conditional)" }))] }), _jsx("span", { style: {
-                                                    padding: 'calc(var(--gap-sm) / 2) var(--gap-sm)',
-                                                    borderRadius: 'var(--radius)',
-                                                    fontSize: 'var(--font-size-xs)',
-                                                    ...getStatusColor(provider.status),
-                                                }, children: provider.status })] }, index))) })] }, groupName))) })] })] }));
-};
 export const DebugDialog = () => {
     const [open, setOpen] = useState(false);
-    // Debug: Log when dialog component renders
-    useEffect(() => { }, [open]);
-    const formatJSON = (data) => {
-        try {
-            return JSON.stringify(data, null, 2);
-        }
-        catch (error) {
-            return 'Error formatting data';
-        }
-    };
-    return (_jsx(Sheet, { open: open, onOpenChange: setOpen, trigger: _jsx(Button, { icon: PanelRight, iconEnd: true, variant: BUTTON_VARIANT.OUTLINE, className: "dndev-flex-1 dndev-justify-center dndev-items-center", title: "Open debug panel", "aria-label": "Debug panel", children: "\uD83D\uDC1B Debug Tools" }), side: "top", showOverlay: false, title: "Debug Panel", className: "dndev-h-[80vh] dndev-max-h-[80vh]", children: _jsx(Stack, { flex: "1", className: "dndev-h-full dndev-min-h-0", style: { padding: 0, overflow: 'hidden', height: '100%' }, children: _jsx(Tabs, { defaultValue: "config", className: "dndev-flex-1 dndev-min-h-0 dndev-flex dndev-flex-col dndev-h-full", items: [
+    return (_jsx(Sheet, { open: open, onOpenChange: setOpen, trigger: _jsx(Button, { icon: PanelRight, iconEnd: true, variant: BUTTON_VARIANT.OUTLINE, className: "dndev-flex-1 dndev-justify-center dndev-items-center", title: "Open debug panel", "aria-label": "Debug panel", children: "\uD83D\uDC1B Debug Tools" }), side: "top", showOverlay: false, title: "Debug Panel", className: "dndev-h-[80vh] dndev-max-h-[80vh]", "data-dndev-devtools": "true", children: _jsx(Stack, { flex: "1", className: "dndev-h-full dndev-min-h-0", style: { padding: 0, overflow: 'hidden', height: '100%' }, children: _jsx(Tabs, { defaultValue: "config", className: "dndev-flex-1 dndev-min-h-0 dndev-flex dndev-flex-col dndev-h-full", items: [
                     {
                         value: 'config',
                         label: 'Config',
                         content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(ConfigTab, {}) })),
                     },
                     {
-                        value: 'themes',
-                        label: 'Themes',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(ThemesTab, {}) })),
-                    },
-                    {
-                        value: 'i18n',
-                        label: 'i18n',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(I18nTab, {}) })),
-                    },
-                    {
-                        value: 'environment',
-                        label: 'Environment',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(EnvironmentTab, {}) })),
-                    },
-                    {
-                        value: 'auth',
-                        label: 'Auth',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(AuthTab, {}) })),
-                    },
-                    {
-                        value: 'stripe',
-                        label: 'Stripe',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(StripeDebugTab, {}) })),
+                        value: 'design',
+                        label: 'Design',
+                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(DesignTab, {}) })),
                     },
                     {
                         value: 'cookies',
@@ -543,12 +39,7 @@ export const DebugDialog = () => {
                         label: 'Stores',
                         content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(StoresTab, {}) })),
                     },
-                    {
-                        value: 'color-ratio',
-                        label: 'Color Ratio',
-                        content: (_jsx(ScrollArea, { className: "dndev-h-full", style: { height: '100%' }, children: _jsx(ColorRatioTab, {}) })),
-                    },
-                ], listClassName: "dndev-flex- dndev-flex dndev-flex-row dndev-gap-sm", listStyle: {
+                ], listClassName: "dndev-flex dndev-flex-row dndev-gap-sm", listStyle: {
                     borderBottom: '1px solid var(--border)',
                     backgroundColor: 'transparent',
                 } }) }) }));

package/dist/internal/devtools/components/DesignTab.d.ts

@@ -0,0 +1,2 @@
+export declare const DesignTab: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DesignTab.d.ts.map

package/dist/internal/devtools/components/DesignTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/DesignTab.tsx"],"names":[],"mappings":"AA8CA,eAAO,MAAM,SAAS,+CAsuBrB,CAAC"}