@donotdev/ui 0.0.3 → 0.0.5

package/dist/internal/devtools/DebugTools.js

@@ -119,7 +119,7 @@ const DebugTools = ({ className }) => {
                                     ? 'Reset consent (show banner)'
                                     : 'Consent banner visible', children: hasConsented
                                     ? 'Show Cookie Banner'
-                                    : 'Cookie Banner Visible' })] }) }), footer: _jsx(Stack, { align: "center", justify: "center", className: cn('drag-handle', current === 'mobile' && 'dndev-text-destructive', current === 'tablet' && 'dndev-text-primary', current === 'desktop' && 'dndev-text-secondary-foreground', current === 'wide' && 'dndev-text-muted-foreground'), style: {
+                                    : 'Cookie Banner Visible' })] }) }), footer: _jsx(Stack, { align: "center", justify: "center", className: cn('drag-handle', current === 'mobile' && 'dndev-text-destructive', current === 'tablet' && 'dndev-text-primary', current === 'laptop' && 'dndev-text-secondary-foreground', current === 'desktop' && 'dndev-text-muted-foreground'), style: {
                         cursor: 'grab',
                     }, children: _jsxs(Label, { className: "dndev-font-mono dndev-text-lg", children: [current.toUpperCase(), " : ", width, " \u00D7 ", height, "px"] }) }) }) }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/ConfigTab.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,SAAS,+CAyErB,CAAC"}
+{"version":3,"file":"ConfigTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/ConfigTab.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,SAAS,+CAqGrB,CAAC"}

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

@@ -26,29 +26,31 @@ export const ConfigTab = () => {
         },
         {
             label: 'Mode',
-            value: _jsx(Badge, { variant: config.mode === 'development' ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.SECONDARY, children: config.mode }),
+            value: (_jsx(Badge, { variant: config.mode === 'development'
+                    ? BADGE_VARIANT.DEFAULT
+                    : BADGE_VARIANT.SECONDARY, children: config.mode })),
         },
         {
             label: 'Version',
-            value: _jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.version }),
+            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.version })),
         },
     ];
     const summaryItems = [
         config.themes && {
             label: 'Themes',
-            value: _jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.themes.discovered?.length || 0 }),
+            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.themes.discovered?.length || 0 })),
         },
         config.routes && {
             label: 'Routes',
-            value: _jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.routes.mapping?.length || 0 }),
+            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.routes.mapping?.length || 0 })),
         },
         config.i18n && {
             label: 'Languages',
-            value: _jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.i18n.languages?.join(', ') }),
+            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.i18n.languages?.join(', ') })),
         },
         config.features && {
             label: 'Features',
-            value: _jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.features.available?.length || 0 }),
+            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.features.available?.length || 0 })),
         },
     ].filter(Boolean);
     const envItems = Object.entries(envVars).map(([key, value]) => ({

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

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

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

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { Palette, Type } from 'lucide-react';
-import { useState } from '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 = () => {
@@ -18,9 +18,137 @@ export const DesignTab = () => {
     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;
@@ -66,45 +194,34 @@ export const DesignTab = () => {
     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;
+            if (el.tagName === 'SCRIPT' ||
+                el.tagName === 'STYLE' ||
+                el.tagName === 'NOSCRIPT')
+                return;
             const style = getComputedStyle(el);
             const rect = el.getBoundingClientRect();
-            // Skip invisible elements
             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++;
-            // 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);
+            const fontSizeRounded = parseFloat(fontSize).toFixed(2) + 'px';
+            fontSizeMap.set(fontSizeRounded, (fontSizeMap.get(fontSizeRounded) || 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,
         };
     };
@@ -121,7 +238,10 @@ export const DesignTab = () => {
             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 });
+                colorMap.set(bg, {
+                    count: existing.count + 1,
+                    area: existing.area + area,
+                });
             }
         });
         const totalArea = Array.from(colorMap.values()).reduce((sum, v) => sum + v.area, 0);
@@ -134,8 +254,12 @@ export const DesignTab = () => {
         }))
             .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 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,
@@ -143,15 +267,22 @@ export const DesignTab = () => {
             accent,
             details: colors.slice(0, 15).map((c) => ({
                 ...c,
-                category: c.percentage > 30 ? 'dominant' : c.percentage > 10 ? 'secondary' : 'accent',
+                category: c.percentage > 30
+                    ? 'dominant'
+                    : c.percentage > 10
+                        ? 'secondary'
+                        : 'accent',
             })),
         };
     };
     const runAnalysis = () => {
         setIsAnalyzing(true);
         try {
-            setColorRatio(analyzeColorRatio());
-            setTypography(analyzeTypography());
+            const colorRatioData = analyzeColorRatio();
+            const typographyData = analyzeTypography();
+            setColorRatio(colorRatioData);
+            setTypography(typographyData);
+            saveAnalysis(colorRatioData, typographyData, fontSizeColors);
             toast('success', 'Analysis complete');
         }
         catch (error) {
@@ -178,18 +309,33 @@ export const DesignTab = () => {
         }, null, 2);
     };
     const copyAnalysis = () => {
-        navigator.clipboard.writeText(getAnalysisJson()).then(() => {
+        navigator.clipboard
+            .writeText(getAnalysisJson())
+            .then(() => {
             toast('success', 'Analysis copied to clipboard');
-        }).catch(() => {
+        })
+            .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"] }) },
+        {
+            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 &&
@@ -198,16 +344,30 @@ export const DesignTab = () => {
         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: [
+    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, ")"] }),
+                                    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',
@@ -216,5 +376,56 @@ export const DesignTab = () => {
                                                         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" }))] }));
+                            ] }))] }) })), 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":"AAwCA,eAAO,MAAM,SAAS,+CAoGrB,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/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,kDAqI5B"}
+{"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,kDAgJ5B"}

package/dist/internal/initializers/BaseStoresInitializer.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  * @fileoverview Base stores initializer for framework state management
  * @description Initializes and coordinates all framework stores with proper error handling and readiness checks
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -244,6 +244,16 @@ export function BaseStoresInitializer({ children, handlers, customStores = [], s
                 return;
             removed = true;
             removeShellLoader({ fade: true }); // Always fade
+            // Focus main so PageUp/PageDown works (CSR/SSR safe)
+            if (isClient()) {
+                requestAnimationFrame(() => {
+                    const main = document.querySelector('main');
+                    if (main) {
+                        main.setAttribute('tabindex', '-1'); // Focusable but not in tab order
+                        main.focus();
+                    }
+                });
+            }
         };
         const checkBothReady = () => {
             if (!frameworkReady || !routeReady || removed)

package/dist/internal/layout/DnDevLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnDevLayout.d.ts","sourceRoot":"","sources":["../../../src/internal/layout/DnDevLayout.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,gBAAgB,CAAC;AA2CxB,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,GAAI,kCAIzB,yBAAyB,4CA4T3B,CAAC"}
+{"version":3,"file":"DnDevLayout.d.ts","sourceRoot":"","sources":["../../../src/internal/layout/DnDevLayout.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,gBAAgB,CAAC;AA2CxB,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,GAAI,kCAIzB,yBAAyB,4CAsT3B,CAAC"}

package/dist/internal/layout/DnDevLayout.js

@@ -247,9 +247,5 @@ export const DnDevLayout = ({ children, layout, className, }) => {
         };
         startTransition(updateDOM);
     }, [effectivePreset]);
-    return (_jsxs("div", { className: cn('dndev-layout', className), children: [resolvedHeader, resolvedSidebar, _jsxs("main", { ref: mainRef, role: "main", className: "main", children: [breadcrumbs !== false && (_jsx("div", { className: "breadcrumbs-container", children: _jsx(Breadcrumbs, { variant: breadcrumbs === 'smart'
-                                ? 'smart'
-                                : breadcrumbs === 'always'
-                                    ? 'default'
-                                    : 'smart' }) })), isDev() && (_jsx(Suspense, { fallback: null, children: _jsx(DebugTools, {}) })), _jsx(Stack, { flex: "1", className: "dndev-min-h-0", children: content }, pathname)] }), resolvedFooter, resolvedMergedBar, _jsx(GoToWrapper, {})] }));
+    return (_jsxs("div", { className: cn('dndev-layout', className), children: [resolvedHeader, resolvedSidebar, _jsxs("main", { ref: mainRef, role: "main", className: "main", children: [breadcrumbs !== 'never' && (_jsx("div", { className: "breadcrumbs-container", children: _jsx(Breadcrumbs, { variant: breadcrumbs === 'always' ? 'default' : 'smart' }) })), isDev() && (_jsx(Suspense, { fallback: null, children: _jsx(DebugTools, {}) })), _jsx(Stack, { flex: "1", className: "dndev-min-h-0", children: content }, pathname)] }), resolvedFooter, resolvedMergedBar, _jsx(GoToWrapper, {})] }));
 };

package/dist/internal/layout/components/AutoMetaTags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoMetaTags.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/AutoMetaTags.tsx"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwC3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,aAgN1B,CAAC;AAEF;;;GAGG;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AutoMetaTags.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/AutoMetaTags.tsx"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwC3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,aAoN1B,CAAC;AAEF;;;GAGG;AAEH,eAAe,YAAY,CAAC"}

package/dist/internal/layout/components/AutoMetaTags.js

@@ -50,6 +50,7 @@ import { Helmet } from 'react-helmet-async';
 import { useTranslation, useIsClient } from '@donotdev/core';
 import { getDndevConfig } from '@donotdev/core';
 import { useSeoConfig, useAppConfig } from '@donotdev/core';
+import { AssetResolver } from '@donotdev/ui';
 // Platform-specific hooks via conditional exports
 import { useLocation } from '@donotdev/ui/routing/hooks';
 /**
@@ -176,7 +177,11 @@ export const AutoMetaTags = () => {
                         name: siteName,
                         logo: {
                             '@type': 'ImageObject',
-                            url: '/logo.png',
+                            url: AssetResolver.assetExists('/icon-512x512.png')
+                                ? '/icon-512x512.png'
+                                : AssetResolver.assetExists('/icon-192x192.png')
+                                    ? '/icon-192x192.png'
+                                    : '/logo.svg',
                         },
                     },
                 }) })] }));

package/dist/internal/layout/zones/DnDevFooter.js

@@ -34,7 +34,7 @@ import { useLegalLinks, } from '../components/footer/useLegalLinks';
  */
 function DnDevFooterComponent({ app = {} }) {
     const { t } = useTranslation('dndev');
-    const isDesktopOrWide = useBreakpoint('isDesktopOrWide');
+    const isLaptopOrDesktop = useBreakpoint('isLaptopOrDesktop');
     // Explicit null hides footer
     if (app?.footer === null) {
         return null;
@@ -48,7 +48,7 @@ function DnDevFooterComponent({ app = {} }) {
         ? `© ${new Date().getFullYear()} ${app.name || 'App'}. ${t('footer.legal.allRightsReserved')}`
         : copyrightConfig;
     // Desktop/Wide: 2-zone layout [Copyright] | [Links + DoNotDev]
-    if (isDesktopOrWide) {
+    if (isLaptopOrDesktop) {
         return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "none", children: [showCopyright && (_jsx("div", { className: "dndev-flex dndev-justify-start", children: _jsx("span", { className: "footer-copyright", children: copyrightText }) })), _jsx("div", { className: "dndev-flex dndev-justify-end", children: _jsxs(Stack, { direction: "row", gap: "medium", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] }) })] }) }));
     }
     // Mobile/Tablet: stacked layout