@donotdev/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,431 @@
+'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, useEffect } 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();
+    // Load cached analysis from localStorage
+    const loadCachedAnalysis = () => {
+        try {
+            const cached = localStorage.getItem('dndev-design-analysis');
+            if (cached) {
+                const parsed = JSON.parse(cached);
+                if (parsed.colorRatio)
+                    setColorRatio(parsed.colorRatio);
+                if (parsed.typography)
+                    setTypography(parsed.typography);
+                if (parsed.fontSizeColors)
+                    setFontSizeColors(parsed.fontSizeColors);
+            }
+        }
+        catch (e) {
+            // Ignore cache errors
+        }
+    };
+    // Save analysis to localStorage
+    const saveAnalysis = (colorRatioData, typographyData, fontSizeColorsData) => {
+        try {
+            localStorage.setItem('dndev-design-analysis', JSON.stringify({
+                colorRatio: colorRatioData,
+                typography: typographyData,
+                fontSizeColors: fontSizeColorsData,
+                timestamp: new Date().toISOString(),
+            }));
+        }
+        catch (e) {
+            // Ignore save errors
+        }
+    };
+    useEffect(() => {
+        loadCachedAnalysis();
+    }, []);
+    const [colorRatio, setColorRatio] = useState(null);
+    const [typography, setTypography] = useState(null);
+    const [isAnalyzing, setIsAnalyzing] = useState(false);
+    const [highlightedSize, setHighlightedSize] = useState(null);
+    const [fontSizeColors, setFontSizeColors] = useState({});
+    // Normalize font size for comparison (round to 2 decimals)
+    const normalizeFontSize = (size) => {
+        return parseFloat(size).toFixed(2) + 'px';
+    };
+    // Highlight/unhighlight elements by font size
+    const toggleHighlight = (size) => {
+        // Clear previous highlights
+        document.querySelectorAll('[data-dndev-highlight]').forEach((el) => {
+            el.style.outline = '';
+            el.removeAttribute('data-dndev-highlight');
+        });
+        if (highlightedSize === size) {
+            setHighlightedSize(null);
+            return;
+        }
+        // Highlight elements with matching font size - ONLY leaf nodes
+        const elements = document.querySelectorAll('*');
+        let count = 0;
+        const normalizedSize = normalizeFontSize(size);
+        elements.forEach((el) => {
+            if (isOverlayElement(el))
+                return;
+            // Only highlight leaf nodes (same logic as analysis)
+            const hasText = el.textContent && el.textContent.trim().length > 0;
+            const hasChildElements = el.children.length > 0;
+            if (!hasText || hasChildElements)
+                return;
+            const style = getComputedStyle(el);
+            if (normalizeFontSize(style.fontSize) === normalizedSize) {
+                el.style.outline = '2px solid var(--primary)';
+                el.setAttribute('data-dndev-highlight', 'true');
+                count++;
+            }
+        });
+        setHighlightedSize(size);
+        toast('info', `Highlighting ${count} elements with ${size}`);
+    };
+    // Apply color to elements with matching font size
+    const applyFontSizeColor = (size, color) => {
+        // Clear previous color for this size
+        document
+            .querySelectorAll(`[data-dndev-font-size-color="${size}"]`)
+            .forEach((el) => {
+            el.style.color = '';
+            el.removeAttribute('data-dndev-font-size-color');
+        });
+        if (!color) {
+            setFontSizeColors((prev) => {
+                const next = { ...prev };
+                delete next[size];
+                return next;
+            });
+            return;
+        }
+        // Apply color to all elements with this font size - ONLY leaf nodes
+        const elements = document.querySelectorAll('*');
+        let count = 0;
+        const normalizedSize = normalizeFontSize(size);
+        elements.forEach((el) => {
+            if (isOverlayElement(el))
+                return;
+            // Only color leaf nodes (same logic as analysis)
+            const hasText = el.textContent && el.textContent.trim().length > 0;
+            const hasChildElements = el.children.length > 0;
+            if (!hasText || hasChildElements)
+                return;
+            const style = getComputedStyle(el);
+            if (normalizeFontSize(style.fontSize) === normalizedSize) {
+                el.style.color = color;
+                el.setAttribute('data-dndev-font-size-color', size);
+                count++;
+            }
+        });
+        const newColors = { ...fontSizeColors, [size]: color };
+        setFontSizeColors(newColors);
+        saveAnalysis(colorRatio, typography, newColors);
+    };
+    // Clear highlights on unmount or when dialog closes
+    const clearHighlights = () => {
+        document.querySelectorAll('[data-dndev-highlight]').forEach((el) => {
+            el.style.outline = '';
+            el.removeAttribute('data-dndev-highlight');
+        });
+        document.querySelectorAll('[data-dndev-font-size-color]').forEach((el) => {
+            el.style.color = '';
+            el.removeAttribute('data-dndev-font-size-color');
+        });
+        setHighlightedSize(null);
+        setFontSizeColors({});
+        saveAnalysis(colorRatio, typography, {});
+    };
+    // 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();
+        let analyzedCount = 0;
+        elements.forEach((el) => {
+            if (isOverlayElement(el))
+                return;
+            if (el.tagName === 'SCRIPT' ||
+                el.tagName === 'STYLE' ||
+                el.tagName === 'NOSCRIPT')
+                return;
+            const style = getComputedStyle(el);
+            const rect = el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0)
+                return;
+            if (style.display === 'none' || style.visibility === 'hidden')
+                return;
+            // ONLY leaf nodes with text, no children
+            const hasText = el.textContent && el.textContent.trim().length > 0;
+            if (!hasText || el.children.length > 0)
+                return;
+            analyzedCount++;
+            const fontSize = style.fontSize;
+            const fontSizeRounded = parseFloat(fontSize).toFixed(2) + 'px';
+            fontSizeMap.set(fontSizeRounded, (fontSizeMap.get(fontSizeRounded) || 0) + 1);
+        });
+        const fontSizes = Array.from(fontSizeMap.entries())
+            .map(([size, count]) => ({ size, count }))
+            .sort((a, b) => b.count - a.count);
+        return {
+            fontSizes,
+            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 {
+            const colorRatioData = analyzeColorRatio();
+            const typographyData = analyzeTypography();
+            setColorRatio(colorRatioData);
+            setTypography(typographyData);
+            saveAnalysis(colorRatioData, typographyData, fontSizeColors);
+            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(Accordion, { type: "single", collapsible: true, items: [
+                    {
+                        value: 'theme',
+                        trigger: _jsx("span", { children: "Theme Info" }),
+                        content: (_jsxs(Stack, { gap: "medium", 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, { content: _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 && (_jsxs(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Font Sizes" }), _jsxs(Badge, { variant: BADGE_VARIANT.SECONDARY, children: [typography.totalElements, " elements"] })] }), children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs(Label, { className: "dndev-text-sm dndev-font-semibold", children: [typography.fontSizes.length, " sizes"] }), (highlightedSize || Object.keys(fontSizeColors).length > 0) && (_jsx(Button, { variant: BUTTON_VARIANT.GHOST, onClick: clearHighlights, style: { padding: '0 var(--gap-xs)', height: 'auto' }, children: _jsx(Text, { className: "dndev-text-xs", children: "Clear All" }) }))] }), _jsx(Stack, { gap: "tight", className: "dndev-mt-xs", children: typography.fontSizes.map((f, i) => {
+                            const isOrphan = f.count < 5;
+                            const isHighlighted = highlightedSize === f.size;
+                            const currentColor = fontSizeColors[f.size] || '';
+                            const findOrphanElements = () => {
+                                const normalizedSize = normalizeFontSize(f.size);
+                                const found = Array.from(document.querySelectorAll('*')).filter((el) => {
+                                    if (el.closest('[data-dndev-devtools]') ||
+                                        el.closest('[data-radix-portal]') ||
+                                        el.closest('[role="dialog"]'))
+                                        return false;
+                                    const style = getComputedStyle(el);
+                                    const hasText = el.textContent && el.textContent.trim().length > 0;
+                                    if (!hasText || el.children.length > 0)
+                                        return false;
+                                    return normalizeFontSize(style.fontSize) === normalizedSize;
+                                });
+                                found.forEach((el) => {
+                                    console.log(el, el.textContent?.trim().substring(0, 50));
+                                    el.style.outline = '2px solid red';
+                                });
+                                console.log(`Found ${found.length} elements with ${f.size}`);
+                            };
+                            return (_jsxs(Stack, { direction: "row", justify: "between", align: "center", gap: "tight", style: {
+                                    padding: 'var(--gap-xs)',
+                                    borderRadius: 'var(--radius-sm)',
+                                    backgroundColor: isHighlighted
+                                        ? 'var(--primary)'
+                                        : 'transparent',
+                                    color: isHighlighted
+                                        ? 'var(--primary-foreground)'
+                                        : 'inherit',
+                                }, children: [_jsxs(Stack, { direction: "row", align: "center", gap: "tight", onClick: () => toggleHighlight(f.size), style: { cursor: 'pointer', flex: 1 }, children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: f.size }), isOrphan && (_jsx(Badge, { variant: BADGE_VARIANT.DESTRUCTIVE, children: "orphan" }))] }), isOrphan ? (_jsx(Button, { variant: BUTTON_VARIANT.GHOST, onClick: (e) => {
+                                            e.stopPropagation();
+                                            findOrphanElements();
+                                        }, style: {
+                                            padding: '0 var(--gap-xs)',
+                                            height: '1.5rem',
+                                            minWidth: '2rem',
+                                        }, title: `Find ${f.size} elements in console`, children: _jsx(Text, { className: "dndev-text-xs", children: "\uD83D\uDD0D" }) })) : (_jsx("input", { type: "color", value: currentColor || '#000000', onChange: (e) => applyFontSizeColor(f.size, e.target.value), onClick: (e) => e.stopPropagation(), style: {
+                                            width: '2rem',
+                                            height: '1.5rem',
+                                            border: '1px solid var(--border)',
+                                            borderRadius: 'var(--radius-sm)',
+                                            cursor: 'pointer',
+                                            padding: 0,
+                                        }, title: `Color elements with ${f.size}` })), _jsxs(Text, { className: "dndev-text-xs", style: {
+                                            opacity: isHighlighted ? 1 : 0.6,
+                                            minWidth: '2rem',
+                                            textAlign: 'end',
+                                        }, 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,+CAoHrB,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';