@donotdev/ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,220 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/ui/src/internal/devtools/components/DesignTab.tsx
+/**
+ * @fileoverview Design Tab Component
+ * @description Unified design debugging: themes, color ratio, typography
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { Palette, Type } from 'lucide-react';
+import { useState } from 'react';
+import { Card, Button, BUTTON_VARIANT, Stack, Label, Badge, BADGE_VARIANT, Alert, ALERT_VARIANT, DescriptionList, Text, ScrollArea, Accordion, CopyToClipboard, toast, } from '@donotdev/components';
+import { useTheme, useThemeReady } from '@donotdev/core';
+export const DesignTab = () => {
+    const currentTheme = useTheme('currentTheme');
+    const availableThemes = useTheme('availableThemes');
+    const isDarkMode = useTheme('isDarkMode');
+    const isReady = useThemeReady();
+    const [colorRatio, setColorRatio] = useState(null);
+    const [typography, setTypography] = useState(null);
+    const [isAnalyzing, setIsAnalyzing] = useState(false);
+    // Get CSS variables from :root
+    const getCSSVariables = () => {
+        const root = document.documentElement;
+        const style = getComputedStyle(root);
+        const vars = {};
+        const relevantVars = [
+            '--background',
+            '--foreground',
+            '--card',
+            '--card-foreground',
+            '--popover',
+            '--popover-foreground',
+            '--primary',
+            '--primary-foreground',
+            '--secondary',
+            '--secondary-foreground',
+            '--muted',
+            '--muted-foreground',
+            '--accent',
+            '--accent-foreground',
+            '--destructive',
+            '--destructive-foreground',
+            '--border',
+            '--input',
+            '--ring',
+            '--radius',
+        ];
+        relevantVars.forEach((varName) => {
+            const value = style.getPropertyValue(varName).trim();
+            if (value)
+                vars[varName] = value;
+        });
+        return vars;
+    };
+    // Check if element is inside devtools, dialogs, or overlays
+    const isOverlayElement = (el) => {
+        return !!(el.closest('[data-dndev-devtools]') ||
+            el.closest('[data-radix-portal]') ||
+            el.closest('[role="dialog"]') ||
+            el.closest('[data-state="open"]') ||
+            el.closest('.dndev-sheet-content'));
+    };
+    const analyzeTypography = () => {
+        const elements = document.querySelectorAll('*');
+        const fontSizeMap = new Map();
+        const fontWeightMap = new Map();
+        const fontFamilyMap = new Map();
+        let analyzedCount = 0;
+        elements.forEach((el) => {
+            // Skip overlay/devtools elements
+            if (isOverlayElement(el))
+                return;
+            const style = getComputedStyle(el);
+            const rect = el.getBoundingClientRect();
+            // Skip invisible elements
+            if (rect.width === 0 || rect.height === 0)
+                return;
+            analyzedCount++;
+            // Font size
+            const fontSize = style.fontSize;
+            fontSizeMap.set(fontSize, (fontSizeMap.get(fontSize) || 0) + 1);
+            // Font weight
+            const fontWeight = style.fontWeight;
+            fontWeightMap.set(fontWeight, (fontWeightMap.get(fontWeight) || 0) + 1);
+            // Font family (simplified)
+            const fontFamily = style.fontFamily.split(',')[0]?.trim().replace(/"/g, '') || 'unknown';
+            fontFamilyMap.set(fontFamily, (fontFamilyMap.get(fontFamily) || 0) + 1);
+        });
+        // Sort by count descending
+        const fontSizes = Array.from(fontSizeMap.entries())
+            .map(([size, count]) => ({ size, count }))
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 10);
+        const fontWeights = Array.from(fontWeightMap.entries())
+            .map(([weight, count]) => ({ weight, count }))
+            .sort((a, b) => b.count - a.count);
+        const fontFamilies = Array.from(fontFamilyMap.entries())
+            .map(([family, count]) => ({ family, count }))
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 5);
+        return {
+            fontSizes,
+            fontWeights,
+            fontFamilies,
+            totalElements: analyzedCount,
+        };
+    };
+    const analyzeColorRatio = () => {
+        const elements = document.querySelectorAll('*');
+        const colorMap = new Map();
+        elements.forEach((el) => {
+            // Skip overlay/devtools elements
+            if (isOverlayElement(el))
+                return;
+            const style = getComputedStyle(el);
+            const bg = style.backgroundColor;
+            const rect = el.getBoundingClientRect();
+            const area = rect.width * rect.height;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent' && area > 0) {
+                const existing = colorMap.get(bg) || { count: 0, area: 0 };
+                colorMap.set(bg, { count: existing.count + 1, area: existing.area + area });
+            }
+        });
+        const totalArea = Array.from(colorMap.values()).reduce((sum, v) => sum + v.area, 0);
+        if (totalArea === 0)
+            return { dominant: 0, secondary: 0, accent: 0, details: [] };
+        const colors = Array.from(colorMap.entries())
+            .map(([color, data]) => ({
+            color,
+            percentage: (data.area / totalArea) * 100,
+        }))
+            .sort((a, b) => b.percentage - a.percentage);
+        // Simplified categorization based on percentage
+        const dominant = colors.slice(0, 2).reduce((sum, c) => sum + c.percentage, 0);
+        const secondary = colors.slice(2, 5).reduce((sum, c) => sum + c.percentage, 0);
+        const accent = colors.slice(5).reduce((sum, c) => sum + c.percentage, 0);
+        return {
+            dominant,
+            secondary,
+            accent,
+            details: colors.slice(0, 15).map((c) => ({
+                ...c,
+                category: c.percentage > 30 ? 'dominant' : c.percentage > 10 ? 'secondary' : 'accent',
+            })),
+        };
+    };
+    const runAnalysis = () => {
+        setIsAnalyzing(true);
+        try {
+            setColorRatio(analyzeColorRatio());
+            setTypography(analyzeTypography());
+            toast('success', 'Analysis complete');
+        }
+        catch (error) {
+            console.error('Analysis failed:', error);
+            toast('error', 'Analysis failed');
+        }
+        finally {
+            setIsAnalyzing(false);
+        }
+    };
+    // Format analysis results for clipboard
+    const getAnalysisJson = () => {
+        return JSON.stringify({
+            theme: {
+                current: currentTheme,
+                isDarkMode,
+                isReady,
+                availableCount: availableThemes.length,
+            },
+            cssVariables: getCSSVariables(),
+            colorRatio: colorRatio || null,
+            typography: typography || null,
+            timestamp: new Date().toISOString(),
+        }, null, 2);
+    };
+    const copyAnalysis = () => {
+        navigator.clipboard.writeText(getAnalysisJson()).then(() => {
+            toast('success', 'Analysis copied to clipboard');
+        }).catch(() => {
+            toast('error', 'Failed to copy');
+        });
+    };
+    const cssVars = getCSSVariables();
+    const themeItems = [
+        { label: 'Current', value: _jsx(Text, { className: "dndev-font-mono", children: currentTheme }) },
+        { label: 'Dark Mode', value: _jsx(Badge, { variant: isDarkMode ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.SECONDARY, children: isDarkMode ? 'Yes' : 'No' }) },
+        { label: 'Ready', value: _jsx(Badge, { variant: isReady ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.DESTRUCTIVE, children: isReady ? 'Yes' : 'No' }) },
+        { label: 'Available', value: _jsxs(Text, { className: "dndev-font-mono", children: [availableThemes.length, " themes"] }) },
+    ];
+    const isColorCompliant = colorRatio &&
+        colorRatio.dominant >= 50 &&
+        colorRatio.dominant <= 70 &&
+        colorRatio.secondary >= 20 &&
+        colorRatio.secondary <= 40 &&
+        colorRatio.accent >= 5 &&
+        colorRatio.accent <= 20;
+    return (_jsxs(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: [_jsx(Card, { title: "Theme", subtitle: currentTheme, children: _jsx(DescriptionList, { items: themeItems }) }), _jsx(Card, { title: "CSS Variables", subtitle: `${Object.keys(cssVars).length} variables`, children: _jsx(ScrollArea, { className: "dndev-max-h-48", children: _jsx(Stack, { gap: "tight", children: Object.entries(cssVars).map(([name, value]) => (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: name }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
+                                                width: '1rem',
+                                                height: '1rem',
+                                                backgroundColor: `var(${name})`,
+                                                border: '1px solid var(--border)',
+                                                borderRadius: 'var(--radius-sm)',
+                                            } }), _jsx(Text, { className: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground", children: value })] })] }, name))) }) }) }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(Button, { onClick: runAnalysis, variant: BUTTON_VARIANT.DEFAULT, icon: Palette, disabled: isAnalyzing, style: { flex: 1 }, children: isAnalyzing ? 'Analyzing...' : 'Analyze Page' }), _jsx(Button, { onClick: copyAnalysis, variant: BUTTON_VARIANT.OUTLINE, disabled: !colorRatio && !typography, children: "Copy JSON" })] }), colorRatio && (_jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "60/30/10 Color Ratio" }), _jsx(Badge, { variant: isColorCompliant ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.SECONDARY, children: isColorCompliant ? '✓ Balanced' : '⚠ Review' })] }), children: _jsxs(Stack, { gap: "tight", children: [_jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Dominant (60%)" }), _jsxs("span", { className: colorRatio.dominant >= 50 && colorRatio.dominant <= 70 ? 'dndev-text-primary' : 'dndev-text-destructive', children: [colorRatio.dominant.toFixed(1), "%"] })] }), _jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Secondary (30%)" }), _jsxs("span", { className: colorRatio.secondary >= 20 && colorRatio.secondary <= 40 ? 'dndev-text-primary' : 'dndev-text-destructive', children: [colorRatio.secondary.toFixed(1), "%"] })] }), _jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Accent (10%)" }), _jsxs("span", { className: colorRatio.accent >= 5 && colorRatio.accent <= 20 ? 'dndev-text-primary' : 'dndev-text-destructive', children: [colorRatio.accent.toFixed(1), "%"] })] }), colorRatio.details.length > 0 && (_jsx(Accordion, { type: "single", collapsible: true, items: [
+                                {
+                                    value: 'colors',
+                                    trigger: _jsxs("span", { className: "dndev-text-sm", children: ["Top Colors (", colorRatio.details.length, ")"] }),
+                                    content: (_jsx(Stack, { gap: "tight", children: colorRatio.details.map((c, i) => (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
+                                                        width: '1rem',
+                                                        height: '1rem',
+                                                        backgroundColor: c.color,
+                                                        border: '1px solid var(--border)',
+                                                        flexShrink: 0,
+                                                    } }), _jsxs(Text, { className: "dndev-text-xs dndev-font-mono", style: { flex: 1 }, children: [c.percentage.toFixed(1), "%"] }), _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: c.category })] }, i))) })),
+                                },
+                            ] }))] }) })), typography && (_jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Typography" }), _jsxs(Badge, { variant: BADGE_VARIANT.SECONDARY, children: [typography.totalElements, " elements"] })] }), children: _jsxs(Stack, { gap: "medium", children: [_jsxs("div", { children: [_jsxs(Label, { className: "dndev-text-sm dndev-font-semibold", children: ["Font Sizes (", typography.fontSizes.length, ")"] }), _jsx(Stack, { gap: "tight", className: "dndev-mt-xs", children: typography.fontSizes.map((f, i) => (_jsxs(Stack, { direction: "row", justify: "between", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: f.size }), _jsxs(Text, { className: "dndev-text-xs dndev-text-muted-foreground", children: [f.count, "\u00D7"] })] }, i))) })] }), _jsxs("div", { children: [_jsxs(Label, { className: "dndev-text-sm dndev-font-semibold", children: ["Font Weights (", typography.fontWeights.length, ")"] }), _jsx(Stack, { direction: "row", gap: "tight", wrap: "wrap", className: "dndev-mt-xs", children: typography.fontWeights.map((f, i) => (_jsxs(Badge, { variant: BADGE_VARIANT.SECONDARY, children: [f.weight, " (", f.count, "\u00D7)"] }, i))) })] }), _jsxs("div", { children: [_jsxs(Label, { className: "dndev-text-sm dndev-font-semibold", children: ["Font Families (", typography.fontFamilies.length, ")"] }), _jsx(Stack, { gap: "tight", className: "dndev-mt-xs", children: typography.fontFamilies.map((f, i) => (_jsxs(Stack, { direction: "row", justify: "between", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: f.family }), _jsxs(Text, { className: "dndev-text-xs dndev-text-muted-foreground", children: [f.count, "\u00D7"] })] }, i))) })] })] }) })), !colorRatio && !typography && (_jsx(Alert, { variant: ALERT_VARIANT.INFO, children: "Click \"Analyze Page\" to check color ratio and typography" }))] }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"StoresTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/StoresTab.tsx"],"names":[],"mappings":"AAiCA,eAAO,MAAM,SAAS,+CA8NrB,CAAC"}
+{"version":3,"file":"StoresTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/StoresTab.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,SAAS,+CAoGrB,CAAC"}

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

@@ -2,120 +2,72 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/ui/src/internal/devtools/components/StoresTab.tsx
 /**
-
  * @fileoverview Stores Tab Component
-
- * @description Displays all registered Zustand stores from globalThis._DNDEV_STORES_
-
+ * @description Displays registered Zustand stores from globalThis._DNDEV_STORES_
  *
-
- * @version 0.0.1
-
+ * @version 0.0.2
  * @since 0.0.1
-
  * @author AMBROISE PARK Consulting
-
  */
-import { useState, useEffect } from 'react';
-import { Stack, Card, Accordion, ScrollArea, JsonViewer, CopyToClipboard, Text, Alert, ALERT_VARIANT, } from '@donotdev/components';
+import { useState, useEffect, useCallback } from 'react';
+import { Stack, Card, Accordion, ScrollArea, JsonViewer, Text, Badge, BADGE_VARIANT, Button, BUTTON_VARIANT, } from '@donotdev/components';
+import { RefreshCw } from 'lucide-react';
+const STORE_NAMES = {
+    'theme-store': 'Theme',
+    'consent-store': 'Consent',
+    'navigation-store': 'Navigation',
+    'loading-store': 'Loading',
+    'overlay-store': 'Overlay',
+    'network-store': 'Network',
+    'abort-store': 'Abort',
+    'i18n-store': 'i18n',
+    'error-store': 'Error',
+};
 export const StoresTab = () => {
-    const [stores, setStores] = useState(() => {
-        if (typeof globalThis !== 'undefined' &&
-            globalThis._DNDEV_STORES_) {
-            const currentStores = globalThis._DNDEV_STORES_;
-            return Object.keys(currentStores).reduce((acc, key) => {
-                acc[key] = currentStores[key];
-                return acc;
-            }, {});
+    const [storeStates, setStoreStates] = useState({});
+    const [storeNames, setStoreNames] = useState([]);
+    const refreshStores = useCallback(() => {
+        const registry = globalThis._DNDEV_STORES_;
+        if (!registry) {
+            setStoreNames([]);
+            setStoreStates({});
+            return;
         }
-        return {};
-    });
-    useEffect(() => {
-        const updateStores = () => {
-            if (typeof globalThis !== 'undefined' &&
-                globalThis._DNDEV_STORES_) {
-                const currentStores = globalThis._DNDEV_STORES_;
-                const storeKeys = Object.keys(currentStores);
-                setStores((prev) => {
-                    const prevKeys = Object.keys(prev);
-                    if (prevKeys.length !== storeKeys.length) {
-                        const newStores = {};
-                        storeKeys.forEach((key) => {
-                            newStores[key] = currentStores[key];
-                        });
-                        return newStores;
-                    }
-                    const hasChanged = storeKeys.some((key) => !prev[key] || prev[key] !== currentStores[key]);
-                    if (hasChanged) {
-                        const newStores = {};
-                        storeKeys.forEach((key) => {
-                            newStores[key] = currentStores[key];
-                        });
-                        return newStores;
-                    }
-                    return prev;
-                });
+        const names = Object.keys(registry);
+        setStoreNames(names);
+        const states = {};
+        names.forEach((name) => {
+            try {
+                const store = registry[name];
+                if (store?.getState) {
+                    states[name] = store.getState();
+                }
+                else {
+                    states[name] = { _error: 'No getState method' };
+                }
             }
-            else {
-                setStores({});
+            catch (e) {
+                states[name] = { _error: String(e) };
             }
-        };
-        updateStores();
-        const interval = setInterval(updateStores, 500);
-        return () => clearInterval(interval);
+        });
+        setStoreStates(states);
     }, []);
-    const getStoreDisplayName = (storeName) => {
-        const nameMap = {
-            'theme-store': 'Theme Store',
-            'consent-store': 'Consent Store',
-            'navigation-store': 'Navigation Store',
-            loading: 'Loading Store',
-            overlay: 'Overlay Store',
-            network: 'Network Store',
-            abort: 'Abort Controller Store',
-            'i18n-store': 'i18n Store',
-            'error-store': 'Error Store',
-            'dndev-theme-store': 'Theme Store (Legacy)',
-        };
-        return (nameMap[storeName] ||
-            storeName
-                .replace(/-store$/, ' Store')
-                .replace(/-/g, ' ')
-                .replace(/\b\w/g, (l) => l.toUpperCase()));
-    };
-    const getStoreState = (store) => {
-        try {
-            if (store && typeof store.getState === 'function') {
-                return store.getState();
-            }
-            return null;
-        }
-        catch (error) {
-            return {
-                error: error instanceof Error ? error.message : 'Unknown error',
-            };
-        }
-    };
-    const formatJSON = (data) => {
-        try {
-            return JSON.stringify(data, null, 2);
-        }
-        catch (error) {
-            return 'Error formatting data';
-        }
-    };
-    const storeEntries = Object.entries(stores);
-    if (storeEntries.length === 0) {
-        return (_jsx(Stack, { gap: "medium", children: _jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: _jsx(Text, { as: "span", children: "No stores registered in globalThis._DNDEV_STORES_" }) }) }));
+    useEffect(() => {
+        refreshStores();
+        const interval = setInterval(refreshStores, 1000);
+        return () => clearInterval(interval);
+    }, [refreshStores]);
+    const getDisplayName = (name) => STORE_NAMES[name] || name.replace(/-store$/, '').replace(/-/g, ' ');
+    if (storeNames.length === 0) {
+        return (_jsx(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: "Stores", subtitle: "No stores registered", children: _jsx(Text, { className: "dndev-text-muted-foreground", children: "globalThis._DNDEV_STORES_ is empty or not initialized." }) }) }));
     }
-    return (_jsx(Stack, { gap: "medium", children: _jsx(Card, { title: "Stores", subtitle: `${storeEntries.length} store${storeEntries.length !== 1 ? 's' : ''} registered`, children: _jsx(Accordion, { items: storeEntries.map(([storeName, store]) => {
-                    const state = getStoreState(store);
-                    const hasError = state && 'error' in state;
-                    const displayName = getStoreDisplayName(storeName);
+    return (_jsx(Stack, { gap: "medium", style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Stores" }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: storeNames.length }), _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: RefreshCw, onClick: refreshStores, title: "Refresh stores" })] })] }), children: _jsx(Accordion, { type: "single", collapsible: true, items: storeNames.map((name) => {
+                    const state = storeStates[name];
+                    const hasError = state?._error;
                     return {
-                        value: storeName,
-                        trigger: (_jsxs(Stack, { direction: "row", gap: "tight", align: "center", justify: "between", children: [_jsx(Text, { as: "span", children: displayName }), _jsxs(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground dndev-font-mono", children: ["(", storeName, ")"] })] })),
-                        content: (_jsx(Stack, { gap: "medium", children: hasError ? (_jsx(Alert, { variant: ALERT_VARIANT.ERROR, children: _jsxs(Text, { as: "span", children: ["Failed to get state: ", state.error] }) })) : state === null ? (_jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: _jsx(Text, { as: "span", children: "Store does not have getState() method or is not initialized" }) })) : (_jsx(Card, { title: "Store State", subtitle: "Current state from getState()", footer: _jsx(Stack, { direction: "row", gap: "tight", justify: "end", children: _jsx(CopyToClipboard, { text: formatJSON(state), tooltipText: "Copy store state", copiedTooltipText: "Copied!" }) }), children: _jsx(ScrollArea, { className: "dndev-max-h-96", children: _jsx(JsonViewer, { data: state, defaultDepth: 2, showCopyButton: true }) }) })) })),
+                        value: name,
+                        trigger: (_jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx(Text, { className: "dndev-font-medium", children: getDisplayName(name) }), _jsx(Text, { className: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground", children: name })] })),
+                        content: hasError ? (_jsx(Text, { className: "dndev-text-destructive dndev-text-sm", children: state._error })) : (_jsx(ScrollArea, { className: "dndev-max-h-64", children: _jsx(JsonViewer, { data: state, defaultDepth: 2, showCopyButton: true }) })),
                     };
                 }) }) }) }));
 };

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

@@ -6,16 +6,11 @@
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export * from './AuthTab';
 export * from './ConfigTab';
 export * from './CookieTab';
 export * from './DebugDialog';
-export * from './DebugToggle';
-export * from './EnvironmentTab';
-export * from './I18nTab';
 export * from './LayoutReset';
 export * from './MaskedValue';
 export * from './StoresTab';
-export * from './StripeDebugTab';
-export * from './ThemesTab';
+export * from './DesignTab';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

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

@@ -7,15 +7,10 @@
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export * from './AuthTab';
 export * from './ConfigTab';
 export * from './CookieTab';
 export * from './DebugDialog';
-export * from './DebugToggle';
-export * from './EnvironmentTab';
-export * from './I18nTab';
 export * from './LayoutReset';
 export * from './MaskedValue';
 export * from './StoresTab';
-export * from './StripeDebugTab';
-export * from './ThemesTab';
+export * from './DesignTab';

package/dist/internal/devtools/utils/index.d.ts

@@ -7,7 +7,6 @@
  * @author AMBROISE PARK Consulting
  */
 export * from './envVarDiscovery';
-export * from './spacingAnalyzer';
 export * from './virtualModuleInspector';
 export * from './maskSensitive';
 //# sourceMappingURL=index.d.ts.map

package/dist/internal/devtools/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}

package/dist/internal/devtools/utils/index.js

@@ -8,6 +8,5 @@
  * @author AMBROISE PARK Consulting
  */
 export * from './envVarDiscovery';
-export * from './spacingAnalyzer';
 export * from './virtualModuleInspector';
 export * from './maskSensitive';

package/dist/internal/initializers/BaseStoresInitializer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStoresInitializer.d.ts","sourceRoot":"","sources":["../../../src/internal/initializers/BaseStoresInitializer.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6DvC;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyGD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,YAAiB,EACjB,aAAqB,EACrB,aAAa,GACd,EAAE,0BAA0B,kDA0K5B"}
+{"version":3,"file":"BaseStoresInitializer.d.ts","sourceRoot":"","sources":["../../../src/internal/initializers/BaseStoresInitializer.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6DvC;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyGD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,YAAiB,EACjB,aAAqB,EACrB,aAAa,GACd,EAAE,0BAA0B,kDAqI5B"}

package/dist/internal/initializers/BaseStoresInitializer.js

@@ -232,77 +232,44 @@ export function BaseStoresInitializer({ children, handlers, customStores = [], s
     const allCustomReady = criticalCustomStores.length === 0 ||
         customReadiness.every((ready) => ready === true);
     const criticalReady = consentReady && themeReady && i18nReady && allCustomReady;
+    // Two-phase loader: wait for BOTH framework AND route to be ready
     useLayoutEffect(() => {
         if (!isClient() || !criticalReady)
             return;
         let removed = false;
-        const removeLoader = (fade = false) => {
+        let frameworkReady = false;
+        let routeReady = false;
+        const removeLoader = () => {
             if (removed)
                 return;
             removed = true;
-            removeShellLoader({ fade });
+            removeShellLoader({ fade: true }); // Always fade
         };
-        const handleFrameworkReady = () => {
-            if (removed)
+        const checkBothReady = () => {
+            if (!frameworkReady || !routeReady || removed)
                 return;
-            removeLoader(false);
+            removeLoader();
         };
-        const unsubscribe = globalEmitter.on('DNDEV_FRAMEWORK_READY', handleFrameworkReady);
-        const root = document.getElementById('root');
-        if (!root) {
-            setTimeout(() => removeLoader(true), 300);
-            return () => {
-                unsubscribe();
-            };
-        }
-        const hasReactContent = () => {
-            // Zero reflow content detection - only uses properties that don't trigger layout
-            const children = Array.from(root.children);
-            // Check for non-shell-loader children without forcing reflow
-            // React content will have:
-            // 1. Child elements (components mount as DOM nodes)
-            // 2. Data attributes (React adds data-reactroot, etc.)
-            // NOTE: We avoid textContent checks as they force layout recalculation
-            const hasContent = children.some((child) => {
-                if (child.id === 'shell-loader')
-                    return false;
-                // Zero-reflow detection strategies:
-                // - Child elements exist (no layout needed)
-                // - React data attributes (no layout needed)
-                // - Custom data attributes from framework (no layout needed)
-                return (child.children.length > 0 ||
-                    child.hasAttribute('data-reactroot') ||
-                    child.hasAttribute('data-dndev-mounted'));
-            });
-            return hasContent;
+        const handleFrameworkReady = () => {
+            frameworkReady = true;
+            checkBothReady();
         };
-        const checkAndRemove = () => {
-            if (hasReactContent()) {
-                removeLoader(false);
-                return true;
-            }
-            return false;
+        const handleRouteReady = () => {
+            routeReady = true;
+            checkBothReady();
         };
-        let fallbackTimeout = null;
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                if (!checkAndRemove()) {
-                    fallbackTimeout = setTimeout(() => {
-                        if (hasReactContent()) {
-                            removeLoader(false);
-                        }
-                        else {
-                            removeLoader(true);
-                        }
-                    }, 1000);
-                }
-            });
-        });
-        return () => {
-            unsubscribe();
-            if (fallbackTimeout) {
-                clearTimeout(fallbackTimeout);
+        const unsubFramework = globalEmitter.on('DNDEV_FRAMEWORK_READY', handleFrameworkReady);
+        const unsubRoute = globalEmitter.on('DNDEV_ROUTE_READY', handleRouteReady);
+        // Fallback timeout: if route doesn't signal within 2s, remove anyway
+        const fallbackTimeout = setTimeout(() => {
+            if (!removed) {
+                removeLoader();
             }
+        }, 2000);
+        return () => {
+            unsubFramework();
+            unsubRoute();
+            clearTimeout(fallbackTimeout);
         };
     }, [criticalReady]);
     if (!criticalReady)

package/dist/internal/layout/DnDevLayout.js

@@ -226,13 +226,13 @@ export const DnDevLayout = ({ children, layout, className, }) => {
             DEFAULT_SLOTS.sidebar.bottom;
         return (_jsx(DnDevMergedBar, { position: mergedBarConfig.position, height: mergedBarConfig.height, trigger: triggerSlot(), top: topSlot(), content: contentSlot(), bottom: bottomSlot() }));
     }, [layout?.mergedbar, config]);
-    // Apply routing animation data attribute
-    useEffect(() => {
+    // Apply routing animation data attribute (useLayoutEffect = before paint)
+    useLayoutEffect(() => {
         if (!isClient() || !mainRef.current)
             return;
         const routingAnimation = getComputedStyle(document.documentElement)
             .getPropertyValue('--routing-animation')
-            .trim() || 'fade';
+            .trim() || 'none';
         mainRef.current.setAttribute('data-routing-animation', routingAnimation);
     }, [pathname]);
     // Apply data attributes

package/dist/internal/layout/components/footer/FooterBranding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterBranding.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/components/footer/FooterBranding.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAgCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FooterBranding.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/components/footer/FooterBranding.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAoCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/internal/layout/components/footer/FooterBranding.js

@@ -27,7 +27,9 @@ export const FooterBranding = ({ className, size = 'xs', }) => {
         xs: { fontSize: 'var(--font-size-xs)' },
         sm: { fontSize: 'var(--font-size-sm)' },
     };
-    return (_jsxs("a", { href: isFrameworkSite ? 'https://www.ambroise-park.com' : 'https://donotdev.com', target: "_blank", rel: "noopener noreferrer", className: className, style: {
+    return (_jsxs("a", { href: isFrameworkSite
+            ? 'https://www.ambroise-park.com'
+            : 'https://donotdev.com', target: "_blank", rel: "noopener noreferrer", className: className, style: {
             display: 'inline-flex',
             alignItems: 'center',
             gap: 'var(--gap-sm)',