@donotdev/ui 0.0.2 → 0.0.3

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

@@ -1,98 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/AuthTab.tsx
-/**
- * @fileoverview Auth Tab Component
- * @description User-friendly authentication and OAuth debugging for consumers
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { useState, useMemo } from 'react';
-import { Card, CARD_VARIANT, Badge, BADGE_VARIANT, Button, BUTTON_VARIANT, DescriptionList, Alert, ALERT_VARIANT, Text, Stack, } from '@donotdev/components';
-import { getDndevConfig } from '@donotdev/core';
-import { useAuthSafe } from '../../../utils/useAuthSafe';
-import { discoverEnvVarsByPattern } from '../utils';
-import { MaskedValue } from './MaskedValue';
-export const AuthTab = () => {
-    const user = useAuthSafe('user');
-    const loading = useAuthSafe('loading');
-    const error = useAuthSafe('error');
-    const [isOAuthExpanded, setIsOAuthExpanded] = useState(false);
-    const config = getDndevConfig();
-    const envVars = config?.env || {};
-    const oauthVars = useMemo(() => discoverEnvVarsByPattern(envVars, [
-        '*OAUTH*',
-        '*GOOGLE*CLIENT*',
-        '*GITHUB*CLIENT*',
-        '*AUTH*PARTNER*',
-    ]), [envVars]);
-    const googleClientId = Object.entries(oauthVars).find(([key]) => key.toUpperCase().includes('GOOGLE') &&
-        key.toUpperCase().includes('CLIENT'))?.[1];
-    const githubClientId = Object.entries(oauthVars).find(([key]) => key.toUpperCase().includes('GITHUB') &&
-        key.toUpperCase().includes('CLIENT'))?.[1];
-    const authPartners = Object.entries(oauthVars).find(([key]) => key.toUpperCase().includes('AUTH') &&
-        key.toUpperCase().includes('PARTNER'))?.[1];
-    const getStatusBadge = () => {
-        if (loading)
-            return _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: "Loading" });
-        if (error)
-            return _jsx(Badge, { variant: BADGE_VARIANT.DESTRUCTIVE, children: "Error" });
-        if (user)
-            return _jsx(Badge, { children: "Signed In" });
-        return _jsx(Badge, { variant: BADGE_VARIANT.OUTLINE, children: "Not Signed In" });
-    };
-    const authStatusItems = [{ label: 'Status', value: getStatusBadge() }];
-    const userInfoItems = user
-        ? [
-            {
-                label: 'Email',
-                value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: user.email || 'N/A' })),
-            },
-            {
-                label: 'User ID',
-                value: (_jsx(Text, { as: "span", className: "dndev-font-mono dndev-text-xs", children: user.id })),
-            },
-            ...(user.displayName
-                ? [{ label: 'Display Name', value: user.displayName }]
-                : []),
-        ]
-        : [];
-    const oauthConfigItems = Object.keys(oauthVars).length > 0
-        ? Object.entries(oauthVars).map(([key, value]) => ({
-            label: key,
-            value: (_jsxs(Stack, { gap: "tight", children: [_jsx("div", { className: "dndev-flex dndev-items-center dndev-justify-between", children: _jsx(Badge, { children: "Configured" }) }), _jsx(MaskedValue, { keyName: key, value: String(value), textClassName: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground" })] })),
-        }))
-        : [
-            {
-                label: 'OAuth Variables',
-                value: (_jsx(Text, { as: "span", className: "dndev-text-sm dndev-text-muted-foreground", children: "No OAuth environment variables detected. Add variables matching patterns: *OAUTH*, *GOOGLE*CLIENT*, *GITHUB*CLIENT*, *AUTH*PARTNER*" })),
-            },
-        ];
-    const setupSteps = [
-        {
-            title: '1. Firebase Console',
-            steps: [
-                _jsxs(_Fragment, { children: ["Go to", ' ', _jsx("a", { href: "https://console.firebase.google.com", target: "_blank", rel: "noopener noreferrer", className: "dndev-text-primary dndev-underline", children: "Firebase Console" })] }),
-                'Authentication → Sign-in method',
-                'Enable Google, GitHub, etc.',
-            ],
-        },
-        {
-            title: '2. GitHub OAuth',
-            steps: [
-                _jsxs(_Fragment, { children: ["Create OAuth App at", ' ', _jsx("a", { href: "https://github.com/settings/applications/new", target: "_blank", rel: "noopener noreferrer", className: "dndev-text-primary dndev-underline", children: "GitHub" })] }),
-                _jsxs(_Fragment, { children: ["Callback URL:", ' ', _jsx("code", { className: "dndev-bg-background dndev-px-sm dndev-rounded dndev-text-xs", children: "https://your-project.firebaseapp.com/__/auth/handler" })] }),
-                'Copy Client ID/Secret to Firebase',
-            ],
-        },
-        {
-            title: '3. Authorized Domains',
-            steps: [
-                'Add localhost, your-domain.com to Firebase Console → Authentication → Settings',
-            ],
-        },
-    ];
-    return (_jsxs(Stack, { gap: "medium", children: [_jsx(Card, { title: "Authentication Status", subtitle: "Current authentication state", children: _jsxs(Stack, { gap: "medium", children: [_jsx(DescriptionList, { items: authStatusItems }), user && (_jsx(Stack, { gap: "tight", children: _jsx(DescriptionList, { items: userInfoItems }) })), error && (_jsx(Alert, { variant: ALERT_VARIANT.ERROR, title: "Error", children: error.message }))] }) }), _jsx(Card, { title: "OAuth Configuration", subtitle: "OAuth provider setup status", children: _jsxs(Stack, { gap: "medium", children: [_jsx(DescriptionList, { items: oauthConfigItems }), _jsxs(Button, { onClick: () => setIsOAuthExpanded(!isOAuthExpanded), variant: BUTTON_VARIANT.OUTLINE, className: "dndev-w-full", children: [isOAuthExpanded ? 'Hide' : 'Show', " Setup Guide"] }), isOAuthExpanded && (_jsxs(Card, { variant: CARD_VARIANT.MUTED, className: "dndev-grid dndev-gap-md", children: [setupSteps.map((section, idx) => (_jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx(Text, { as: "span", className: "dndev-font-semibold", children: section.title }), _jsx("ol", { className: "dndev-list dndev-list-decimal dndev-list-inside dndev-text-muted-foreground dndev-text-sm dndev-grid dndev-gap-xs", children: section.steps.map((step, stepIdx) => (_jsx("li", { children: step }, stepIdx))) })] }, idx))), _jsxs(Alert, { variant: ALERT_VARIANT.WARNING, children: [_jsx("strong", { children: "Note:" }), " 400 error = GitHub OAuth not configured in Firebase"] })] }))] }) })] }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorRatioTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/ColorRatioTab.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,aAAa,+CAodzB,CAAC"}

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

@@ -1,322 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/ColorRatioTab.tsx
-/**
- * @fileoverview Color Ratio Tab Component
- * @description 60/30/10 color ratio checker with copy/paste functionality
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { Palette } from 'lucide-react';
-import { useState } from 'react';
-import { Card, Button, BUTTON_VARIANT, Stack, Label, CopyToClipboard, Alert, ALERT_VARIANT, toast, ScrollArea, } from '@donotdev/components';
-export const ColorRatioTab = () => {
-    const [colorRatio, setColorRatio] = useState(null);
-    const [isAnalyzing, setIsAnalyzing] = useState(false);
-    const checkColorRatio = () => {
-        setIsAnalyzing(true);
-        try {
-            const elements = document.querySelectorAll('*');
-            const colorMap = new Map();
-            elements.forEach((el) => {
-                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 rootStyles = getComputedStyle(document.documentElement);
-            const getComputedColor = (varName) => {
-                const testEl = document.createElement('div');
-                testEl.style.setProperty('background-color', `var(${varName})`);
-                testEl.style.position = 'absolute';
-                testEl.style.visibility = 'hidden';
-                document.body.appendChild(testEl);
-                const computed = getComputedStyle(testEl).backgroundColor;
-                document.body.removeChild(testEl);
-                return computed || '';
-            };
-            const bgColor = getComputedColor('--background') || rootStyles.backgroundColor || '';
-            const mutedColor = getComputedColor('--muted') || '';
-            const primaryColor = getComputedColor('--primary') || '';
-            const accentColor = getComputedColor('--accent') || '';
-            const totalArea = Array.from(colorMap.values()).reduce((sum, v) => sum + v.area, 0);
-            if (totalArea === 0) {
-                setColorRatio({
-                    dominant: 0,
-                    secondary: 0,
-                    accent: 0,
-                    details: [],
-                });
-                setIsAnalyzing(false);
-                return;
-            }
-            const colors = Array.from(colorMap.entries())
-                .map(([color, data]) => ({
-                color,
-                percentage: (data.area / totalArea) * 100,
-                area: data.area,
-            }))
-                .sort((a, b) => b.percentage - a.percentage);
-            const rgbToHex = (rgb) => {
-                const match = rgb.match(/\d+/g);
-                if (!match || match.length < 3 || !match[0] || !match[1] || !match[2])
-                    return '';
-                const r = parseInt(match[0]).toString(16).padStart(2, '0');
-                const g = parseInt(match[1]).toString(16).padStart(2, '0');
-                const b = parseInt(match[2]).toString(16).padStart(2, '0');
-                return `#${r}${g}${b}`;
-            };
-            const normalizeToRgb = (color) => {
-                if (!color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)') {
-                    return null;
-                }
-                if (color.startsWith('rgb')) {
-                    const match = color.match(/\d+/g);
-                    if (match && match.length >= 3) {
-                        return `rgb(${match[0]}, ${match[1]}, ${match[2]})`;
-                    }
-                    return color;
-                }
-                if (color.startsWith('#')) {
-                    const hex = color.replace('#', '');
-                    if (hex.length === 3 && hex[0] && hex[1] && hex[2]) {
-                        const r = parseInt(hex[0] + hex[0], 16);
-                        const g = parseInt(hex[1] + hex[1], 16);
-                        const b = parseInt(hex[2] + hex[2], 16);
-                        return `rgb(${r}, ${g}, ${b})`;
-                    }
-                    if (hex.length >= 6) {
-                        const r = parseInt(hex.substr(0, 2), 16);
-                        const g = parseInt(hex.substr(2, 2), 16);
-                        const b = parseInt(hex.substr(4, 2), 16);
-                        return `rgb(${r}, ${g}, ${b})`;
-                    }
-                }
-                if (color.startsWith('oklab') || color.startsWith('color(')) {
-                    const testEl = document.createElement('div');
-                    testEl.style.backgroundColor = color;
-                    testEl.style.position = 'absolute';
-                    testEl.style.visibility = 'hidden';
-                    document.body.appendChild(testEl);
-                    const computed = getComputedStyle(testEl).backgroundColor;
-                    document.body.removeChild(testEl);
-                    if (computed && computed.startsWith('rgb')) {
-                        const match = computed.match(/\d+/g);
-                        if (match && match.length >= 3) {
-                            return `rgb(${match[0]}, ${match[1]}, ${match[2]})`;
-                        }
-                        return computed;
-                    }
-                }
-                return null;
-            };
-            const getBrightness = (rgb) => {
-                if (!rgb)
-                    return 0;
-                const match = rgb.match(/\d+/g);
-                if (!match || match.length < 3 || !match[0] || !match[1] || !match[2])
-                    return 0;
-                const r = parseInt(match[0]);
-                const g = parseInt(match[1]);
-                const b = parseInt(match[2]);
-                return (r * 299 + g * 587 + b * 114) / 1000;
-            };
-            const getSaturation = (rgb) => {
-                if (!rgb)
-                    return 0;
-                const match = rgb.match(/\d+/g);
-                if (!match || match.length < 3 || !match[0] || !match[1] || !match[2])
-                    return 0;
-                const r = parseInt(match[0]) / 255;
-                const g = parseInt(match[1]) / 255;
-                const b = parseInt(match[2]) / 255;
-                const max = Math.max(r, g, b);
-                const min = Math.min(r, g, b);
-                const delta = max - min;
-                if (max === 0)
-                    return 0;
-                return delta / max;
-            };
-            const colorsMatch = (c1, c2, threshold = 15) => {
-                if (!c1 || !c2)
-                    return false;
-                const rgb1 = normalizeToRgb(c1);
-                const rgb2 = normalizeToRgb(c2);
-                if (!rgb1 || !rgb2)
-                    return false;
-                const match1 = rgb1.match(/\d+/g);
-                const match2 = rgb2.match(/\d+/g);
-                if (!match1 || !match2 || match1.length < 3 || match2.length < 3)
-                    return false;
-                if (!match1[0] || !match1[1] || !match1[2] || !match2[0] || !match2[1] || !match2[2])
-                    return false;
-                const r1 = parseInt(match1[0]);
-                const g1 = parseInt(match1[1]);
-                const b1 = parseInt(match1[2]);
-                const r2 = parseInt(match2[0]);
-                const g2 = parseInt(match2[1]);
-                const b2 = parseInt(match2[2]);
-                const diff = Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2);
-                return diff <= threshold * 3;
-            };
-            const groupSimilarColors = (colors) => {
-                const grouped = [];
-                const groups = [];
-                let currentGroup = 0;
-                for (const color of colors) {
-                    const normalized = normalizeToRgb(color.color);
-                    let assigned = false;
-                    for (let i = 0; i < grouped.length; i++) {
-                        const existing = grouped[i];
-                        if (!existing)
-                            continue;
-                        const existingNormalized = normalizeToRgb(existing.color);
-                        if (colorsMatch(normalized, existingNormalized)) {
-                            grouped.push({ ...color, group: existing.group });
-                            assigned = true;
-                            break;
-                        }
-                    }
-                    if (!assigned) {
-                        grouped.push({ ...color, group: currentGroup++ });
-                    }
-                }
-                return grouped;
-            };
-            const categorizeByColorRole = (colors) => {
-                const categoryMap = new Map();
-                const normalizedAccent = accentColor ? normalizeToRgb(accentColor) : null;
-                const normalizedPrimary = primaryColor ? normalizeToRgb(primaryColor) : null;
-                const normalizedBg = bgColor ? normalizeToRgb(bgColor) : null;
-                const normalizedMuted = mutedColor ? normalizeToRgb(mutedColor) : null;
-                const bgBrightness = normalizedBg ? getBrightness(normalizedBg) : 0;
-                for (const color of colors) {
-                    const normalized = normalizeToRgb(color.color);
-                    if (!normalized) {
-                        categoryMap.set(color.color, 'secondary');
-                        continue;
-                    }
-                    const brightness = getBrightness(normalized);
-                    const saturation = getSaturation(normalized);
-                    if ((normalizedAccent && colorsMatch(normalized, normalizedAccent, 15)) ||
-                        (normalizedPrimary && colorsMatch(normalized, normalizedPrimary, 15)) ||
-                        (saturation > 0.5 && brightness > 120)) {
-                        categoryMap.set(color.color, 'accent');
-                    }
-                    else if ((normalizedBg && colorsMatch(normalized, normalizedBg, 20)) ||
-                        (normalizedMuted && colorsMatch(normalized, normalizedMuted, 20)) ||
-                        (normalizedBg && brightness < bgBrightness + 30 && brightness > bgBrightness - 30)) {
-                        categoryMap.set(color.color, 'dominant');
-                    }
-                    else if (brightness < 60) {
-                        categoryMap.set(color.color, 'dominant');
-                    }
-                    else if (brightness > 200) {
-                        categoryMap.set(color.color, 'secondary');
-                    }
-                    else {
-                        categoryMap.set(color.color, 'secondary');
-                    }
-                }
-                return categoryMap;
-            };
-            const categoryMap = categorizeByColorRole(colors);
-            const categorized = colors.map((c) => ({
-                ...c,
-                category: categoryMap.get(c.color) || 'secondary',
-            }));
-            const dominant = categorized
-                .filter((c) => c.category === 'dominant')
-                .reduce((sum, c) => sum + c.percentage, 0);
-            const secondary = categorized
-                .filter((c) => c.category === 'secondary')
-                .reduce((sum, c) => sum + c.percentage, 0);
-            const accent = categorized
-                .filter((c) => c.category === 'accent')
-                .reduce((sum, c) => sum + c.percentage, 0);
-            setColorRatio({
-                dominant,
-                secondary,
-                accent,
-                details: categorized.slice(0, 20),
-            });
-        }
-        catch (error) {
-            console.error('Color ratio check failed:', error);
-            toast('error', 'Failed to analyze color ratio');
-        }
-        finally {
-            setIsAnalyzing(false);
-        }
-    };
-    const formatResults = () => {
-        if (!colorRatio)
-            return '';
-        return `60/30/10 Color Ratio Analysis
-
-Dominant (60%): ${colorRatio.dominant.toFixed(1)}%
-Secondary (30%): ${colorRatio.secondary.toFixed(1)}%
-Accent (10%): ${colorRatio.accent.toFixed(1)}%
-
-Status: ${colorRatio.dominant >= 55 &&
-            colorRatio.dominant <= 65 &&
-            colorRatio.secondary >= 25 &&
-            colorRatio.secondary <= 35 &&
-            colorRatio.accent >= 5 &&
-            colorRatio.accent <= 15
-            ? '✅ Compliant'
-            : '⚠️ Not compliant'}
-
-Top Colors:
-${colorRatio.details
-            .map((c, i) => `${i + 1}. ${c.color} - ${c.percentage.toFixed(1)}% (${c.category})`)
-            .join('\n')}`;
-    };
-    const isCompliant = colorRatio &&
-        colorRatio.dominant >= 55 &&
-        colorRatio.dominant <= 65 &&
-        colorRatio.secondary >= 25 &&
-        colorRatio.secondary <= 35 &&
-        colorRatio.accent >= 5 &&
-        colorRatio.accent <= 15;
-    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: "60/30/10 Color Ratio" }), _jsx(Button, { onClick: checkColorRatio, variant: BUTTON_VARIANT.OUTLINE, icon: Palette, disabled: isAnalyzing, children: isAnalyzing ? 'Analyzing...' : 'Analyze' })] }), content: _jsx(Stack, { gap: "medium", children: colorRatio ? (_jsxs(_Fragment, { children: [isCompliant ? (_jsx(Alert, { variant: ALERT_VARIANT.SUCCESS, children: "Color ratio is compliant with 60/30/10 rule" })) : (_jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: "Color ratio does not match 60/30/10 rule" })), _jsxs(Stack, { gap: "tight", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx(Label, { className: "dndev-font-mono", children: "Results" }), _jsx(CopyToClipboard, { text: formatResults(), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Results copied') })] }), _jsxs(Stack, { gap: "tight", children: [_jsxs("div", { style: {
-                                                display: 'flex',
-                                                justifyContent: 'space-between',
-                                            }, children: [_jsx("span", { children: "Dominant (60%):" }), _jsxs("span", { className: colorRatio.dominant >= 55 &&
-                                                        colorRatio.dominant <= 65
-                                                        ? 'dndev-text-primary'
-                                                        : 'dndev-text-destructive', children: [colorRatio.dominant.toFixed(1), "%"] })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                justifyContent: 'space-between',
-                                            }, children: [_jsx("span", { children: "Secondary (30%):" }), _jsxs("span", { className: colorRatio.secondary >= 25 &&
-                                                        colorRatio.secondary <= 35
-                                                        ? 'dndev-text-primary'
-                                                        : 'dndev-text-destructive', children: [colorRatio.secondary.toFixed(1), "%"] })] }), _jsxs("div", { style: {
-                                                display: 'flex',
-                                                justifyContent: 'space-between',
-                                            }, children: [_jsx("span", { children: "Accent (10%):" }), _jsxs("span", { className: colorRatio.accent >= 5 && colorRatio.accent <= 15
-                                                        ? 'dndev-text-primary'
-                                                        : 'dndev-text-destructive', children: [colorRatio.accent.toFixed(1), "%"] })] })] }), colorRatio.details.length > 0 && (_jsxs("details", { style: { marginTop: 'var(--gap-xs)' }, children: [_jsxs("summary", { className: "dndev-text-sm dndev-cursor-pointer", children: ["Top Colors (", colorRatio.details.length, ")"] }), _jsx(ScrollArea, { className: "dndev-max-h-96", style: { marginTop: 'var(--gap-xs)' }, children: _jsx(Stack, { gap: "tight", children: colorRatio.details.map((c, i) => (_jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        gap: 'var(--gap-xs)',
-                                                        alignItems: 'center',
-                                                    }, children: [_jsx("div", { style: {
-                                                                width: '1rem',
-                                                                height: '1rem',
-                                                                backgroundColor: c.color,
-                                                                border: '1px solid var(--border)',
-                                                                flexShrink: 0,
-                                                            } }), _jsx("span", { className: "dndev-text-xs dndev-font-mono", children: c.color }), _jsxs("span", { className: "dndev-text-xs", children: [c.percentage.toFixed(1), "% (", c.category, ")"] })] }, i))) }) })] }))] })] })) : (_jsx(Alert, { variant: ALERT_VARIANT.INFO, children: "Click \"Analyze\" to check color ratio distribution" })) }) }) }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"DebugToggle.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/DebugToggle.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,WAAW,+CA8EvB,CAAC"}

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

@@ -1,57 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/DebugToggle.tsx
-/**
- * @fileoverview Debug Toggle Component
- * @description Toggle button for enabling/disabling debug borders and visual debugging aids
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { useState } from 'react';
-import { cn, Stack } from '@donotdev/components';
-export const DebugToggle = () => {
-    const [debugEnabled, setDebugEnabled] = useState(false);
-    const toggleDebug = () => {
-        const newValue = debugEnabled ? '0' : '1';
-        document.documentElement.style.setProperty('--debug-enabled', newValue);
-        setDebugEnabled(!debugEnabled);
-        console.log(`🐛 Debug mode: ${newValue === '1' ? 'ON' : 'OFF'}`);
-    };
-    return (_jsx(Stack, { as: "button", align: "center", justify: "center", onClick: toggleDebug, className: cn('hover:scale-105 active:scale-95 transition-transform duration-fast'), style: {
-            width: 'var(--touch-target)',
-            height: 'var(--touch-target)',
-            borderRadius: 'var(--radius-lg)',
-            transition: 'var(--transition-fast)',
-            ...(debugEnabled
-                ? {
-                    backgroundColor: 'rgb(from var(--destructive) r g b / 0.2)',
-                    color: 'var(--destructive)',
-                    boxShadow: 'var(--shadow-xl)',
-                }
-                : {
-                    color: 'var(--muted-foreground)',
-                }),
-        }, onMouseEnter: (e) => {
-            if (debugEnabled) {
-                e.currentTarget.style.backgroundColor =
-                    'rgb(from var(--destructive) r g b / 0.3)';
-            }
-            else {
-                e.currentTarget.style.backgroundColor = 'var(--accent)';
-                e.currentTarget.style.color = 'var(--accent-foreground)';
-                e.currentTarget.style.boxShadow = 'var(--shadow-xl)';
-            }
-        }, onMouseLeave: (e) => {
-            if (debugEnabled) {
-                e.currentTarget.style.backgroundColor =
-                    'rgb(from var(--destructive) r g b / 0.2)';
-            }
-            else {
-                e.currentTarget.style.backgroundColor = 'transparent';
-                e.currentTarget.style.color = 'var(--muted-foreground)';
-                e.currentTarget.style.boxShadow = 'none';
-            }
-        }, title: `Toggle debug borders (${debugEnabled ? 'ON' : 'OFF'})`, "aria-label": "Toggle debug mode", children: _jsxs("svg", { style: { width: '1.5rem', height: '1.5rem' }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "m8 2 1.88 1.88" }), _jsx("path", { d: "M14.12 3.88 16 2" }), _jsx("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }), _jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }), _jsx("path", { d: "M12 20v-9" }), _jsx("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }), _jsx("path", { d: "M6 13H2" }), _jsx("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }), _jsx("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }), _jsx("path", { d: "M22 13h-4" }), _jsx("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })] }) }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"EnvironmentTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/EnvironmentTab.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,cAAc,+CA8B1B,CAAC"}

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

@@ -1,26 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/EnvironmentTab.tsx
-/**
- * @fileoverview Environment Tab Component
- * @description Displays all environment variables in a clean, copyable format
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { Card, DescriptionList, Text } from '@donotdev/components';
-import { getDndevConfig } from '@donotdev/core';
-import { MaskedValue } from './MaskedValue';
-export const EnvironmentTab = () => {
-    const config = getDndevConfig();
-    const envVars = config?.env || {};
-    const envItems = Object.entries(envVars).map(([key, value]) => ({
-        label: key,
-        value: _jsx(MaskedValue, { keyName: key, value: String(value) }),
-    }));
-    if (Object.keys(envVars).length === 0) {
-        return (_jsx(Card, { title: "Environment Variables", subtitle: "No environment variables found", children: _jsx(Text, { as: "span", className: "dndev-text-muted-foreground", children: "No environment variables detected in config." }) }));
-    }
-    return (_jsx(Card, { title: "Environment Variables", subtitle: `${Object.keys(envVars).length} variable${Object.keys(envVars).length !== 1 ? 's' : ''}`, children: _jsx(DescriptionList, { items: envItems, className: "dndev-gap-sm" }) }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"I18nTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/I18nTab.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,OAAO,+CA4JnB,CAAC"}

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

@@ -1,76 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/I18nTab.tsx
-/**
- * @fileoverview i18n Tab Component
- * @description Displays i18n configuration and current language state
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { Card, DescriptionList, Text, Badge, Stack, } from '@donotdev/components';
-import { useTranslation } from '@donotdev/core';
-import { useLanguageSelector } from '@donotdev/core';
-import { getI18nConfig } from '@donotdev/core';
-export const I18nTab = () => {
-    const { i18n, ready, isLoading } = useTranslation('dndev');
-    const { languages, currentLanguage } = useLanguageSelector();
-    const i18nConfig = getI18nConfig();
-    const currentLangInfo = languages.find((lang) => lang.id === currentLanguage);
-    const currentLanguageItems = [
-        {
-            label: 'Current Language',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: currentLanguage })),
-        },
-        {
-            label: 'Display Name',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: currentLangInfo?.name || 'Unknown' })),
-        },
-        {
-            label: 'Ready',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: ready ? 'Yes' : 'No' })),
-        },
-        {
-            label: 'Loading',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: isLoading ? 'Yes' : 'No' })),
-        },
-        ...(i18n
-            ? [
-                {
-                    label: 'i18next Language',
-                    value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: i18n.language })),
-                },
-                {
-                    label: 'Fallback Language',
-                    value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: i18n.options.fallbackLng?.[0] || 'none' })),
-                },
-            ]
-            : []),
-    ];
-    const configItems = i18nConfig
-        ? [
-            {
-                label: 'Languages',
-                value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: i18nConfig.languages.join(', ') })),
-            },
-            {
-                label: 'Fallback',
-                value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: i18nConfig.fallback })),
-            },
-            {
-                label: 'Eager Namespaces',
-                value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: i18nConfig.eager.join(', ') })),
-            },
-            ...(i18nConfig.manifest
-                ? [
-                    {
-                        label: 'Total Namespaces',
-                        value: (_jsxs(Text, { as: "span", className: "dndev-font-mono", children: [i18nConfig.manifest.totalNamespaces || 0, " namespaces"] })),
-                    },
-                ]
-                : []),
-        ]
-        : [];
-    return (_jsxs(Stack, { gap: "medium", children: [_jsx(Card, { title: "Current Language", subtitle: "Active i18n state", children: _jsx(DescriptionList, { items: currentLanguageItems }) }), _jsx(Card, { title: "Available Languages", subtitle: `${languages.length} language${languages.length !== 1 ? 's' : ''} supported`, children: _jsx(Stack, { gap: "tight", children: Array.isArray(languages) && languages.length > 0 ? (languages.map((lang, index) => (_jsx(Card, { variant: lang.id === currentLanguage ? 'accent' : 'default', children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs("div", { children: [_jsx(Text, { as: "span", className: "dndev-font-semibold", children: lang.name }), _jsx(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground dndev-font-mono", children: lang.id })] }), _jsx(Stack, { direction: "row", align: "center", gap: "tight", children: lang.id === currentLanguage && _jsx(Badge, { children: "Active" }) })] }) }, lang.id || `lang-${index}`)))) : (_jsx(Text, { as: "span", className: "dndev-text-sm dndev-text-muted-foreground", children: "No languages available" })) }) }), i18nConfig && (_jsx(Card, { title: "Config", subtitle: "i18n configuration from build", children: _jsx(DescriptionList, { items: configItems }) }))] }));
-};

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

@@ -1,10 +0,0 @@
-import type { ComponentType } from 'react';
-/**
-
- * OAuth Setup Guide Button Component
-
- * Shows OAuth setup instructions in a compact format
-
- */
-export declare const OAuthGuideButton: ComponentType;
-//# sourceMappingURL=OAuthGuideButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OAuthGuideButton.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/OAuthGuideButton.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;GAMG;AAEH,eAAO,MAAM,gBAAgB,EAAE,aA+L9B,CAAC"}