@donotdev/ui 0.0.2 → 0.0.4

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

@@ -1,175 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/StripeDebugTab.tsx
-/**
- * @fileoverview Stripe Debug Tab Component
- * @description Debug panel for testing Stripe integration with dynamic key configuration and emulator support
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
-import { useState, useEffect, useMemo } from 'react';
-import { Card, Button, BUTTON_VARIANT, Input, Label, Badge, BADGE_VARIANT, Alert, ALERT_VARIANT, DescriptionList, Text, Stack, } from '@donotdev/components';
-import { getDndevConfig, getPlatformEnvVar, useFeatureConsent, FRAMEWORK_FEATURES, } from '@donotdev/core';
-import { useAuthSafe, useStripeBillingSafe } from '../../../utils';
-import { isBillingAvailable } from '../../../utils/useStripeBillingSafe';
-import { discoverEnvVarsByPattern, findFirstEnvVarByPattern, } from '../utils/envVarDiscovery';
-import { maskSensitiveValue } from '../utils/maskSensitive';
-import { MaskedValue } from './MaskedValue';
-export const StripeDebugTab = () => {
-    // Get auth state for billing (required for isAvailable to work)
-    const user = useAuthSafe('user');
-    const initialized = useAuthSafe('initialized');
-    const authStateChecked = useAuthSafe('authStateChecked');
-    const authState = { user, initialized, authStateChecked };
-    const checkout = useStripeBillingSafe('checkout', authState);
-    const loading = useStripeBillingSafe('loading', authState);
-    const error = useStripeBillingSafe('error', authState);
-    const isAvailable = useStripeBillingSafe('isAvailable', authState);
-    const [overrides, setOverrides] = useState({});
-    const [testResult, setTestResult] = useState(null);
-    const [emulatorStatus, setEmulatorStatus] = useState(null);
-    // Detect emulator status
-    useEffect(() => {
-        const useEmulator = getPlatformEnvVar('USE_FIREBASE_EMULATOR') === 'true';
-        const emulatorHost = getPlatformEnvVar('FIREBASE_EMULATOR_HOST') || 'localhost';
-        const emulatorPort = getPlatformEnvVar('FIREBASE_FUNCTIONS_EMULATOR_PORT') || '5001';
-        setEmulatorStatus({
-            enabled: useEmulator,
-            host: useEmulator ? emulatorHost : undefined,
-            port: useEmulator ? emulatorPort : undefined,
-        });
-    }, []);
-    const config = getDndevConfig();
-    const envVars = config?.env || {};
-    const stripeVars = useMemo(() => discoverEnvVarsByPattern(envVars, ['*STRIPE*']), [envVars]);
-    const currentPublishableKey = findFirstEnvVarByPattern(envVars, [
-        '*STRIPE*PUBLISHABLE*',
-        '*STRIPE*KEY*',
-        '*PUBLISHABLE*KEY*',
-    ]) || '';
-    const priceIdVars = discoverEnvVarsByPattern(envVars, [
-        '*STRIPE*PRICE*',
-        '*PRICE*ID*',
-        '*PRICE_ID*',
-    ]);
-    const currentPriceId = Object.values(priceIdVars)[0] || '';
-    const effectivePublishableKey = overrides.publishableKey || currentPublishableKey;
-    const effectivePriceId = overrides.priceId || currentPriceId;
-    const handleTestCheckout = async () => {
-        if (!user) {
-            setTestResult({
-                success: false,
-                message: 'Please sign in to test checkout',
-            });
-            return;
-        }
-        if (!effectivePriceId) {
-            setTestResult({
-                success: false,
-                message: 'No price ID configured. Please set a price ID.',
-            });
-            return;
-        }
-        setTestResult(null);
-        try {
-            const result = await checkout({
-                priceId: effectivePriceId,
-                mode: 'payment',
-                allowPromotionCodes: true,
-            });
-            if (result.sessionUrl) {
-                setTestResult({
-                    success: true,
-                    message: 'Checkout session created successfully!',
-                    sessionUrl: result.sessionUrl,
-                });
-            }
-            else {
-                setTestResult({
-                    success: false,
-                    message: 'No session URL received',
-                });
-            }
-        }
-        catch (err) {
-            setTestResult({
-                success: false,
-                message: err instanceof Error
-                    ? err.message
-                    : 'Checkout failed with unknown error',
-            });
-        }
-    };
-    const clearOverrides = () => {
-        setOverrides({});
-        setTestResult(null);
-    };
-    const quickFillTestCard = () => {
-        setOverrides({
-            ...overrides,
-            publishableKey: 'pk_test_42424242424242424242424242424242',
-        });
-    };
-    const testCardItems = [
-        {
-            label: 'Success',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: "4242 4242 4242 4242" })),
-        },
-        {
-            label: 'Decline',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: "4000 0000 0000 0002" })),
-        },
-        {
-            label: '3D Secure',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: "4000 0025 0000 3155" })),
-        },
-    ];
-    const canProceed = useFeatureConsent(FRAMEWORK_FEATURES.BILLING);
-    const stripePublishableKey = getPlatformEnvVar('STRIPE_PUBLISHABLE_KEY');
-    const billingEnabled = getPlatformEnvVar('BILLING_ENABLED');
-    return (_jsxs(Stack, { gap: "large", children: [_jsx(Card, { title: "Billing Module Status", subtitle: "Why billing might be in stub mode", children: _jsxs(Stack, { gap: "medium", children: [_jsx(DescriptionList, { items: [
-                                {
-                                    label: 'Module Installed',
-                                    value: (_jsx(Badge, { variant: isBillingAvailable
-                                            ? BADGE_VARIANT.DEFAULT
-                                            : BADGE_VARIANT.DESTRUCTIVE, children: isBillingAvailable ? '✅ Yes' : '❌ No' })),
-                                },
-                                {
-                                    label: 'isAvailable (hook)',
-                                    value: (_jsx(Badge, { variant: isAvailable
-                                            ? BADGE_VARIANT.DEFAULT
-                                            : BADGE_VARIANT.DESTRUCTIVE, children: isAvailable ? '✅ Yes' : '❌ No' })),
-                                },
-                                {
-                                    label: 'Feature Consent',
-                                    value: (_jsx(Badge, { variant: canProceed
-                                            ? BADGE_VARIANT.DEFAULT
-                                            : BADGE_VARIANT.DESTRUCTIVE, children: canProceed ? '✅ Yes' : '❌ No' })),
-                                },
-                                {
-                                    label: 'STRIPE_PUBLISHABLE_KEY',
-                                    value: stripePublishableKey ? (_jsx(MaskedValue, { keyName: "STRIPE_PUBLISHABLE_KEY", value: stripePublishableKey, textClassName: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground" })) : (_jsx(Badge, { variant: BADGE_VARIANT.DESTRUCTIVE, children: "Not Set" })),
-                                },
-                                {
-                                    label: 'BILLING_ENABLED',
-                                    value: billingEnabled ? (_jsx(Badge, { variant: billingEnabled === 'true'
-                                            ? BADGE_VARIANT.DEFAULT
-                                            : BADGE_VARIANT.SECONDARY, children: billingEnabled })) : (_jsx(Badge, { variant: BADGE_VARIANT.OUTLINE, children: "Not Set" })),
-                                },
-                            ] }), !isBillingAvailable && (_jsxs(Alert, { variant: ALERT_VARIANT.WARNING, children: [_jsx("strong", { children: "Billing module not installed." }), " This means billing is in stub mode. Check:", _jsxs("ul", { className: "dndev-mt-sm dndev-list-disc dndev-list-inside dndev-text-sm", children: [_jsx("li", { children: "Is @donotdev/billing installed in package.json?" }), _jsx("li", { children: "Check browser console for import errors" })] })] })), isBillingAvailable && !isAvailable && (_jsxs(Alert, { variant: ALERT_VARIANT.ERROR, children: [_jsx("strong", { children: "Billing module installed but not available." }), ' ', "Feature detection failed. Check:", _jsxs("ul", { className: "dndev-mt-sm dndev-list-disc dndev-list-inside dndev-text-sm", children: [_jsxs("li", { children: [_jsx("strong", { children: "STRIPE_PUBLISHABLE_KEY" }), " must be set (with VITE_ or NEXT_PUBLIC_ prefix)"] }), _jsxs("li", { children: ["Feature Consent (canProceed): ", canProceed ? 'Yes' : 'No'] }), !stripePublishableKey && (_jsx("li", { className: "dndev-text-destructive dndev-font-semibold", children: "\u2192 Set VITE_STRIPE_PUBLISHABLE_KEY or NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY in your .env file" }))] })] }))] }) }), _jsx(Card, { title: "Current Configuration", subtitle: "Stripe environment variables detected", children: _jsx(Stack, { gap: "medium", children: Object.keys(stripeVars).length === 0 ? (_jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: "No Stripe environment variables detected. Add variables matching pattern *STRIPE* to your configuration." })) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "Publishable Key" }), _jsx(Input, { value: currentPublishableKey
-                                            ? `${maskSensitiveValue(currentPublishableKey)} (masked)`
-                                            : '', readOnly: true, className: "dndev-font-mono dndev-text-xs", placeholder: "Not configured" }), currentPublishableKey && (_jsx(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: "Detected from environment variables" }))] }), _jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "Price ID" }), _jsx(Input, { value: currentPriceId, readOnly: true, className: "dndev-font-mono dndev-text-xs", placeholder: "Not configured" }), currentPriceId && (_jsx(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: "Detected from environment variables" }))] }), Object.keys(stripeVars).length > 2 && (_jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "All Stripe Variables" }), _jsxs(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: [Object.keys(stripeVars).length, " Stripe-related variables detected"] })] }))] })) }) }), _jsx(Card, { title: "Runtime Overrides", subtitle: "Override keys for testing (not persistent, cleared on refresh)", children: _jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "Override Publishable Key" }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(Input, { value: overrides.publishableKey || '', onChange: (e) => setOverrides({
-                                                ...overrides,
-                                                publishableKey: e.target.value,
-                                            }), className: "dndev-font-mono dndev-text-xs", placeholder: currentPublishableKey || 'pk_test_...' }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: quickFillTestCard, title: "Quick fill test key", children: "Test Key" })] }), overrides.publishableKey && (_jsxs(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: ["Override active: ", maskSensitiveValue(overrides.publishableKey), ' ', "(masked)"] }))] }), _jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "Override Price ID" }), _jsx(Input, { value: overrides.priceId || '', onChange: (e) => setOverrides({
-                                        ...overrides,
-                                        priceId: e.target.value,
-                                    }), className: "dndev-font-mono dndev-text-xs", placeholder: currentPriceId || 'price_...' }), overrides.priceId && (_jsxs(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: ["Override active: ", overrides.priceId] }))] }), (overrides.publishableKey || overrides.priceId) && (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, onClick: clearOverrides, children: "Clear Overrides" }))] }) }), _jsx(Card, { title: "Emulator Status", subtitle: "Firebase Functions emulator connection status", children: emulatorStatus ? (_jsxs(Stack, { gap: "tight", children: [_jsx(Stack, { direction: "row", align: "center", gap: "tight", children: emulatorStatus.enabled ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "dndev-size-md dndev-text-success" }), _jsx("span", { children: "Emulator Enabled" }), _jsx(Badge, { children: "Active" })] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "dndev-size-md dndev-text-warning" }), _jsx("span", { children: "Emulator Disabled" }), _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: "Production" })] })) }), emulatorStatus.enabled && (_jsxs(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground dndev-font-mono dndev-ml-md", children: ["Host: ", emulatorStatus.host, _jsx("br", {}), "Port: ", emulatorStatus.port] }))] })) : (_jsx(Text, { as: "span", className: "dndev-text-sm dndev-text-muted-foreground", children: "Checking status..." })) }), _jsx(Card, { title: "Test Checkout", subtitle: "Test the checkout flow with current configuration", children: _jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { gap: "tight", children: [_jsx(Label, { children: "Effective Price ID" }), _jsx(Input, { value: effectivePriceId, readOnly: true, className: "dndev-font-mono dndev-text-xs", placeholder: "No price ID configured" }), _jsx(Text, { className: "dndev-text-xs dndev-text-muted-foreground", children: overrides.priceId
-                                        ? 'Using override'
-                                        : currentPriceId
-                                            ? 'Using environment variable'
-                                            : 'No price ID available' })] }), !isAvailable && (_jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: "Billing is not available. Please check feature consent." })), !user && (_jsx(Alert, { variant: ALERT_VARIANT.WARNING, children: "Please sign in to test checkout" })), _jsx(Button, { onClick: handleTestCheckout, disabled: loading || !user || !effectivePriceId || !isAvailable, className: "dndev-w-full", icon: loading ? Loader2 : undefined, children: loading ? 'Creating checkout session...' : 'Test Checkout' }), error && _jsx(Alert, { variant: ALERT_VARIANT.ERROR, children: error }), testResult && (_jsx(Alert, { variant: testResult.success ? ALERT_VARIANT.SUCCESS : ALERT_VARIANT.ERROR, children: _jsxs("div", { className: "dndev-grid dndev-gap-sm", children: [_jsx("div", { children: testResult.message }), testResult.sessionUrl && (_jsx("a", { href: testResult.sessionUrl, target: "_blank", rel: "noopener noreferrer", className: "dndev-text-xs dndev-text-primary dndev-underline", children: "Open checkout session \u2192" }))] }) }))] }) }), _jsx(Card, { title: "Test Cards", subtitle: "Use these test card numbers in Stripe test mode", children: _jsxs(Stack, { gap: "medium", children: [_jsx(DescriptionList, { items: testCardItems }), _jsx(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground", children: "Use any future expiry date, any CVC, and any ZIP code" })] }) })] }));
-};

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

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

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

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

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

@@ -1,77 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// packages/ui/src/internal/devtools/components/ThemesTab.tsx
-/**
- * @fileoverview Themes Tab Component
- * @description Displays theme store state and available themes
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import { Card, CARD_VARIANT, DescriptionList, Text, Badge, BADGE_VARIANT, Alert, ALERT_VARIANT, Stack, } from '@donotdev/components';
-import { useTheme, useThemeReady } from '@donotdev/core';
-import { getThemesConfig } from '@donotdev/core';
-export const ThemesTab = () => {
-    const currentTheme = useTheme('currentTheme');
-    const availableThemes = useTheme('availableThemes');
-    const isDarkMode = useTheme('isDarkMode');
-    const themeMode = useTheme('themeMode');
-    const error = useTheme('error');
-    const isReady = useThemeReady();
-    const themesConfig = getThemesConfig();
-    const currentThemeInfo = availableThemes.find((theme) => theme.name === currentTheme);
-    const currentThemeItems = [
-        {
-            label: 'Current Theme',
-            value: _jsx(Text, { className: "dndev-font-mono", children: currentTheme }),
-        },
-        {
-            label: 'Theme Mode',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: themeMode })),
-        },
-        {
-            label: 'Dark Mode',
-            value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: isDarkMode ? 'Yes' : 'No' })),
-        },
-        {
-            label: 'Ready',
-            value: _jsx(Text, { className: "dndev-font-mono", children: isReady ? 'Yes' : 'No' }),
-        },
-        ...(currentThemeInfo
-            ? [
-                {
-                    label: 'Display Name',
-                    value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: currentThemeInfo.displayName })),
-                },
-                {
-                    label: 'Category',
-                    value: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: currentThemeInfo.meta?.category || 'N/A' })),
-                },
-            ]
-            : []),
-    ];
-    const configItems = themesConfig?.discovered || themesConfig?.manifest
-        ? [
-            ...(themesConfig.discovered
-                ? [
-                    {
-                        label: 'Discovered Themes',
-                        value: (_jsxs(Text, { as: "span", className: "dndev-font-mono", children: [themesConfig.discovered.length, " themes"] })),
-                    },
-                ]
-                : []),
-            ...(themesConfig.manifest
-                ? [
-                    {
-                        label: 'Total Themes',
-                        value: (_jsxs(Text, { className: "dndev-font-mono", children: [themesConfig.manifest.totalThemes || 0, " themes"] })),
-                    },
-                ]
-                : []),
-        ]
-        : [];
-    return (_jsxs(Stack, { gap: "medium", children: [_jsx(Card, { title: "Current Theme", subtitle: "Active theme state", children: _jsxs(Stack, { gap: "medium", children: [_jsx(DescriptionList, { items: currentThemeItems }), error && _jsxs(Alert, { variant: ALERT_VARIANT.ERROR, children: ["Error: ", error] })] }) }), _jsx(Card, { title: "Available Themes", subtitle: `${availableThemes.length} theme${availableThemes.length !== 1 ? 's' : ''} discovered`, children: _jsx(Stack, { gap: "tight", children: availableThemes.map((theme) => (_jsx(Card, { variant: theme.name === currentTheme
-                            ? CARD_VARIANT.ACCENT
-                            : CARD_VARIANT.DEFAULT, children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs("div", { children: [_jsx(Text, { as: "span", className: "dndev-font-semibold", children: String(theme.displayName || theme.name) }), _jsx(Text, { as: "span", className: "dndev-text-xs dndev-text-muted-foreground dndev-font-mono", children: theme.name })] }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [theme.isDark && (_jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: "Dark" })), theme.name === currentTheme && _jsx(Badge, { children: "Active" })] })] }) }, theme.name))) }) }), themesConfig && configItems.length > 0 && (_jsx(Card, { title: "Config", subtitle: "Theme configuration from build", children: _jsx(DescriptionList, { items: configItems }) }))] }));
-};

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

@@ -1,15 +0,0 @@
-/**
- * @fileoverview Spacing Analyzer Utility
- * @description Analyzes spacing (padding and margin) of elements on the page for debugging layout issues
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-import type { SpacingAnalysis } from '../types';
-export declare class SpacingAnalyzer {
-    static analyzePageSpacing(): SpacingAnalysis;
-    private static groupByComponentType;
-    static logAnalysis(analysis: SpacingAnalysis): void;
-}
-//# sourceMappingURL=spacingAnalyzer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"spacingAnalyzer.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/spacingAnalyzer.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhE,qBAAa,eAAe;IAC1B,MAAM,CAAC,kBAAkB,IAAI,eAAe;IAoD5C,OAAO,CAAC,MAAM,CAAC,oBAAoB;IA8BnC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;CA0BpD"}

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

@@ -1,88 +0,0 @@
-// packages/ui/src/internal/devtools/utils/spacingAnalyzer.ts
-export class SpacingAnalyzer {
-    static analyzePageSpacing() {
-        const elements = document.querySelectorAll('*');
-        const spacingElements = [];
-        elements.forEach((el) => {
-            const styles = window.getComputedStyle(el);
-            const padding = {
-                top: parseInt(styles.paddingTop),
-                right: parseInt(styles.paddingRight),
-                bottom: parseInt(styles.paddingBottom),
-                left: parseInt(styles.paddingLeft),
-            };
-            const margin = {
-                top: parseInt(styles.marginTop),
-                right: parseInt(styles.marginRight),
-                bottom: parseInt(styles.marginBottom),
-                left: parseInt(styles.marginLeft),
-            };
-            const hasSpacing = Object.values(padding).some((v) => v > 0) ||
-                Object.values(margin).some((v) => v > 0);
-            if (hasSpacing) {
-                spacingElements.push({
-                    element: el,
-                    padding,
-                    margin,
-                    tagName: el.tagName,
-                    className: el.className ? String(el.className) : '',
-                    id: el.id,
-                    rect: el.getBoundingClientRect(),
-                });
-            }
-        });
-        const groupedSpacing = this.groupByComponentType(spacingElements);
-        return {
-            totalElements: spacingElements.length,
-            groupedSpacing,
-            summary: {
-                pageContainer: groupedSpacing['content-padding']?.length || 0,
-                marketingSections: groupedSpacing['dndev-gap-lg']?.length || 0,
-                heroSection: groupedSpacing['HeroSection']?.length || 0,
-                valueCards: groupedSpacing['ValueCard']?.length || 0,
-                featureCards: groupedSpacing['FeatureCard']?.length || 0,
-                other: groupedSpacing['other']?.length || 0,
-            },
-        };
-    }
-    static groupByComponentType(spacingElements) {
-        return spacingElements.reduce((acc, item) => {
-            const componentName = item.className
-                ? item.className
-                    .split(' ')
-                    .find((cls) => cls.includes('PageContainer') ||
-                    cls.includes('Section') ||
-                    cls.includes('HeroSection') ||
-                    cls.includes('ValueCard') ||
-                    cls.includes('FeatureCard') ||
-                    cls.includes('content-padding') ||
-                    cls.includes('gap-')) || 'other'
-                : 'other';
-            if (!acc[componentName]) {
-                acc[componentName] = [];
-            }
-            acc[componentName].push(item);
-            return acc;
-        }, {});
-    }
-    static logAnalysis(analysis) {
-        console.group('🔍 Spacing Analysis');
-        console.log(`Found ${analysis.totalElements} elements with padding/margin`);
-        console.log('Summary:', analysis.summary);
-        Object.entries(analysis.groupedSpacing).forEach(([group, items]) => {
-            console.group(`${group} (${items.length} elements)`);
-            items.forEach((item) => {
-                const hasPadding = Object.values(item.padding).some((v) => typeof v === 'number' && v > 0);
-                const hasMargin = Object.values(item.margin).some((v) => typeof v === 'number' && v > 0);
-                if (hasPadding) {
-                    console.log('📦 Padding:', item.padding);
-                }
-                if (hasMargin) {
-                    console.log('📏 Margin:', item.margin);
-                }
-            });
-            console.groupEnd();
-        });
-        console.groupEnd();
-    }
-}