@dashadmin/dash-components 1.3.73 → 1.3.74-srcfree.1

package/src/components/JsonColorSelector/JsonColorSelector.tsx

@@ -1,1443 +0,0 @@
-import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
-import { useRecordContext } from 'react-admin';
-import { useFormContext } from 'react-hook-form';
-import { 
-    Box, 
-    Button, 
-    IconButton, 
-    TextField, 
-    Typography, 
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Card,
-    CardContent,
-    Chip,
-    InputAdornment,
-    FormControl,
-    InputLabel,
-    Select,
-    MenuItem,
-    Tabs,
-    Tab,
-    useColorScheme,
-    Grid,
-    Pagination,
-    Link,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AddIcon from '@mui/icons-material/Add';
-import EditIcon from '@mui/icons-material/Edit';
-import PreviewIcon from '@mui/icons-material/Preview';
-import SearchIcon from '@mui/icons-material/Search';
-import ClearIcon from '@mui/icons-material/Clear';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { ChromePicker, RGBColor } from 'react-color';
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { updateDomCssVariables } from 'dash-utils';
-import { AuthPersistenceService } from 'dash-auth';
-
-interface KeyValuePair {
-    key: string;
-    value: string;
-    id: string;
-}
-
-interface ColorFormat {
-    hex: string;
-    rgb: RGBColor;
-    hsl: { h: number; s: number; l: number; a?: number };
-}
-
-type ColorFormatType = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
-
-// Helper function to determine text color based on background
-const getContrastColor = (color: string): string => {
-    // Handle different color formats
-    let r: number, g: number, b: number, a: number = 1;
-    
-    if (color.startsWith('#')) {
-        // Hex color
-        const hex = color.replace('#', '');
-        if (hex.length === 8) {
-            // RGBA hex
-            r = parseInt(hex.substr(0, 2), 16);
-            g = parseInt(hex.substr(2, 2), 16);
-            b = parseInt(hex.substr(4, 2), 16);
-            a = parseInt(hex.substr(6, 2), 16) / 255;
-        } else {
-            // RGB hex
-            r = parseInt(hex.substr(0, 2), 16);
-            g = parseInt(hex.substr(2, 2), 16);
-            b = parseInt(hex.substr(4, 2), 16);
-        }
-    } else if (color.startsWith('rgb')) {
-        // RGB/RGBA color
-        const match = color.match(/rgba?\(([^)]+)\)/);
-        if (match) {
-            const values = match[1].split(',').map(v => parseFloat(v.trim()));
-            [r, g, b, a = 1] = values;
-        } else {
-            return '#000000';
-        }
-    } else if (color.startsWith('hsl')) {
-        // For HSL, we'll use a simple approach
-        return '#000000';
-    } else {
-        return '#000000';
-    }
-    
-    // Calculate luminance considering alpha
-    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    const effectiveLuminance = luminance * a + (1 - a); // Blend with white background
-    
-    return effectiveLuminance > 0.5 ? '#000000' : '#ffffff';
-};
-
-// Helper function to convert color to different formats
-const convertColor = (color: ColorFormat, format: ColorFormatType): string => {
-    switch (format) {
-        case 'hex':
-            return color.hex;
-        case 'rgb':
-            return `rgb(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)})`;
-        case 'rgba':
-            return `rgba(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)}, ${color.rgb.a || 1})`;
-        case 'hsl':
-            return `hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%)`;
-        case 'hsla':
-            return `hsla(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%, ${color.hsl.a || 1})`;
-        default:
-            return color.hex;
-    }
-};
-
-// Helper function to parse color key and create chips
-const parseColorKey = (key: string) => {
-    const parts = key.split('--');
-    const baseName = parts[0];
-    const mode = parts[1];
-    
-    // Split base name by hyphens for individual chips
-    const baseChips = baseName.split('-').filter(part => part.length > 0);
-    
-    return { baseChips, mode };
-};
-
-// Helper function to extract available modes from color keys
-const extractAvailableModes = (pairs: KeyValuePair[]): string[] => {
-    const modes = new Set<string>();
-    
-    pairs.forEach(pair => {
-        const { mode } = parseColorKey(pair.key);
-        if (mode) {
-            modes.add(mode);
-        }
-    });
-    
-    return Array.from(modes).sort();
-};
-
-// Helper function to get mode icon
-const getModeIcon = (mode: string | undefined): string => {
-    if (!mode) return '';
-    
-    switch (mode.toLowerCase()) {
-        case 'light':
-            return '☀️'; // Sun icon
-        case 'dark':
-            return '🌙'; // Moon icon
-        default:
-            return mode; // Plain text for other modes
-    }
-};
-
-// Color palette item component
-const ColorPaletteItem: React.FC<{
-    pair: KeyValuePair;
-    onEdit: (pair: KeyValuePair) => void;
-    onDelete: (id: string) => void;
-}> = ({ pair, onEdit, onDelete }) => {
-    const textColor = getContrastColor(pair.value);
-    const { baseChips, mode } = parseColorKey(pair.key);
-    const modeIcon = getModeIcon(mode);
-    
-    return (
-        <Card
-            onClick={() => onEdit(pair)}
-            elevation={1}
-            sx={{
-                width: '100%',
-                display: 'flex',
-                alignItems: 'stretch', // Ensure stretch for full height
-                cursor: 'pointer',
-                transition: 'all 0.2s ease-in-out',
-                '&:hover': {
-                    transform: 'translateY(-2px)',
-                    boxShadow: 3,
-                },
-                borderRadius: 2,
-                overflow: 'hidden',
-                position: 'relative',
-                height: 80, // Fixed height for consistency
-                backgroundColor: 'background.paper',
-            }}
-        >
-            {/* Left Color Box */}
-            <Box
-                sx={{
-                    width: 80, // Fixed square width
-                    backgroundColor: pair.value,
-                    flexShrink: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    position: 'relative',
-                }}
-            >
-                {/* Hover Edit Icon Overlay */}
-                <Box
-                    sx={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        backgroundColor: 'rgba(0,0,0,0.3)',
-                        opacity: 0,
-                        transition: 'opacity 0.2s',
-                        '&:hover': { opacity: 1 },
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <EditIcon sx={{ color: '#fff' }} />
-                </Box>
-            </Box>
-
-            {/* Right Details Section */}
-            <Box sx={{ 
-                flexGrow: 1, 
-                p: 1.5, 
-                display: 'flex', 
-                flexDirection: 'column', 
-                justifyContent: 'space-between', // Space key and chips
-                overflow: 'hidden'
-            }}>
-                 <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 0.5 }}>
-                     <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 'bold', color: 'text.secondary' }}>
-                        {pair.value}
-                    </Typography>
-                     {mode && (
-                        <Chip
-                            label={mode}
-                            size="small"
-                            icon={<span style={{ marginLeft: 6, fontSize: '0.8rem' }}>{modeIcon}</span>}
-                            sx={{
-                                height: 18,
-                                fontSize: '0.65rem',
-                                '& .MuiChip-label': { padding: '0 6px' },
-                            }}
-                        />
-                    )}
-                 </Box>
-
-                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                    {baseChips.map((chip, index) => (
-                        <Chip
-                            key={index}
-                            label={chip}
-                            size="small"
-                            variant="outlined"
-                            sx={{
-                                height: 20,
-                                fontSize: '0.7rem',
-                                maxWidth: '100%',
-                                '& .MuiChip-label': {
-                                    padding: '0 6px',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                },
-                            }}
-                        />
-                    ))}
-                </Box>
-            </Box>
-        </Card>
-    );
-};
-
-// Color edit dialog component
-const ColorEditDialog: React.FC<{
-    open: boolean;
-    pair: KeyValuePair | null;
-    onClose: () => void;
-    onSave: (pair: KeyValuePair) => void;
-    onDelete: (id: string) => void;
-    existingKeys: string[];
-     updateSingleDomColor: (key: string, color: string) => void;
-}> = ({ open, pair, onClose, onSave, onDelete, existingKeys,updateSingleDomColor }) => {
-    const [editedPair, setEditedPair] = useState<KeyValuePair | null>(null);
-    const [colorFormat, setColorFormat] = useState<ColorFormatType>('hex');
-    const [keyError, setKeyError] = useState<string>('');
-    const [tabValue, setTabValue] = useState(0);
-
-    useEffect(() => {
-        if (pair) {
-            setEditedPair({ ...pair });
-            // Detect color format
-            if (pair.value.startsWith('rgba(')) {
-                setColorFormat('rgba');
-            } else if (pair.value.startsWith('rgb(')) {
-                setColorFormat('rgb');
-            } else if (pair.value.startsWith('hsla(')) {
-                setColorFormat('hsla');
-            } else if (pair.value.startsWith('hsl(')) {
-                setColorFormat('hsl');
-            } else {
-                setColorFormat('hex');
-            }
-        }
-        setKeyError('');
-    }, [pair]);
-
-    const handleKeyChange = (newKey: string) => {
-        if (!editedPair) return;
-        
-        const isDuplicate = existingKeys.some(key => key === newKey && newKey !== pair?.key);
-        setKeyError(isDuplicate ? 'Key already exists' : '');
-        
-        setEditedPair({ ...editedPair, key: newKey });
-    };
-
-    const handleColorChange = (color: any) => {
-        if (!editedPair) return;
-        
-        const newValue = convertColor(color, colorFormat);
-        setEditedPair({ ...editedPair, value: newValue });
-
-         updateSingleDomColor(editedPair.key, newValue);
-         
-    };
-
-    const handleSave = () => {
-        if (!editedPair || keyError || !editedPair.key.trim()) return;
-        onSave(editedPair);
-        onClose();
-    };
-
-    const handleDelete = () => {
-        if (!editedPair) return;
-        onDelete(editedPair.id);
-        onClose();
-    };
-
-    if (!editedPair) return null;
-
-    return (
-        <Dialog 
-            open={open} 
-            onClose={onClose} 
-            maxWidth="sm" 
-            fullWidth
-            slotProps={{
-                paper: {
-                    sx: { minHeight: 600 }
-                }
-            }}
-        >
-            <DialogTitle>
-                {pair?.key ? `Edit Color: ${pair.key}` : 'Add New Color'}
-            </DialogTitle>
-            <DialogContent>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, pt: 1 }}>
-                    {/* Color Name */}
-                    <TextField
-                        fullWidth
-                        label="Color Name"
-                        value={editedPair.key}
-                        onChange={(e) => handleKeyChange(e.target.value)}
-                        error={!!keyError}
-                        helperText={keyError}
-                        placeholder="e.g., primary-color--light, background-dark--dark"
-                    />
-
-                    {/* Color Format Selector */}
-                    <FormControl fullWidth>
-                        <InputLabel>Color Format</InputLabel>
-                        <Select
-                            value={colorFormat}
-                            label="Color Format"
-                            onChange={(e) => setColorFormat(e.target.value as ColorFormatType)}
-                        >
-                            <MenuItem value="hex">HEX</MenuItem>
-                            <MenuItem value="rgb">RGB</MenuItem>
-                            <MenuItem value="rgba">RGBA (with alpha)</MenuItem>
-                            <MenuItem value="hsl">HSL</MenuItem>
-                            <MenuItem value="hsla">HSLA (with alpha)</MenuItem>
-                        </Select>
-                    </FormControl>
-
-                    {/* Color Picker Tabs */}
-                    <Box>
-                        <Tabs value={tabValue} onChange={(_, newValue) => setTabValue(newValue)}>
-                            <Tab label="Color Picker" />
-                            <Tab label="Manual Input" />
-                        </Tabs>
-
-                        {tabValue === 0 && (
-                            <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
-                                <ChromePicker
-                                    color={editedPair.value}
-                                    onChange={handleColorChange}
-                                    disableAlpha={!['rgba', 'hsla'].includes(colorFormat)}
-                                />
-                            </Box>
-                        )}
-
-                        {tabValue === 1 && (
-                            <Box sx={{ mt: 2 }}>
-                                <TextField
-                                    fullWidth
-                                    label={`Color Value (${colorFormat.toUpperCase()})`}
-                                    value={editedPair.value}
-                                    onChange={(e) => setEditedPair({ ...editedPair, value: e.target.value })}
-                                    placeholder={
-                                        colorFormat === 'hex' ? '#ff0000' :
-                                        colorFormat === 'rgb' ? 'rgb(255, 0, 0)' :
-                                        colorFormat === 'rgba' ? 'rgba(255, 0, 0, 1)' :
-                                        colorFormat === 'hsl' ? 'hsl(0, 100%, 50%)' :
-                                        'hsla(0, 100%, 50%, 1)'
-                                    }
-                                    slotProps={{
-                                        input: {
-                                            startAdornment: (
-                                                <InputAdornment position="start">
-                                                    <Box
-                                                        sx={{
-                                                            width: 20,
-                                                            height: 20,
-                                                            backgroundColor: editedPair.value,
-                                                            border: '1px solid #ccc',
-                                                            borderRadius: 1,
-                                                        }}
-                                                    />
-                                                </InputAdornment>
-                                            ),
-                                        }
-                                    }}
-                                />
-                            </Box>
-                        )}
-                    </Box>
-
-                    {/* Color Preview */}
-                    <Box>
-                        <Typography variant="subtitle2" gutterBottom>
-                            Preview
-                        </Typography>
-                        <Box
-                            sx={{
-                                width: '100%',
-                                height: 80,
-                                backgroundColor: editedPair.value,
-                                border: '1px solid #ccc',
-                                borderRadius: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                position: 'relative',
-                            }}
-                        >
-                            <Typography
-                                variant="body2"
-                                sx={{
-                                    color: getContrastColor(editedPair.value),
-                                    fontWeight: 'bold',
-                                    backgroundColor: 'rgba(0,0,0,0.1)',
-                                    padding: '4px 8px',
-                                    borderRadius: 1,
-                                }}
-                            >
-                                    {editedPair.key || 'Color Preview'}
-                            </Typography>
-                        </Box>
-                    </Box>
-                </Box>
-            </DialogContent>
-            <DialogActions>
-                {pair?.key && (
-                    <Button
-                        onClick={handleDelete}
-                        color="error"
-                        startIcon={<DeleteIcon />}
-                    >
-                        Delete
-                    </Button>
-                )}
-                <Box sx={{ flexGrow: 1 }} />
-                <Button onClick={onClose}>
-                    Cancel
-                </Button>
-                <Button
-                    onClick={handleSave}
-                    variant="contained"
-                    disabled={!!keyError || !editedPair.key.trim()}
-                >
-                    Save
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-};
-
-export const JsonEdit: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
-    const { method, attribute, resourceConfig } = props;
-
-    const record = useRecordContext();
-    const { setValue, getValues } = useFormContext();
-    
-    const attributePath = attribute.attribute;
-    const isNestedSetting = attributePath.startsWith('settings.');
-    const settingsPath = isNestedSetting ? attributePath.split('.').slice(1).join('.') : attributePath;
-    
-    const [pairs, setPairs] = useState<KeyValuePair[]>([]);
-    const [searchTerm, setSearchTerm] = useState<string>('');
-    const [selectedMode, setSelectedMode] = useState<string>('');
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [isRendering, setIsRendering] = useState<boolean>(true);
-    const [editDialogOpen, setEditDialogOpen] = useState<boolean>(false);
-    const [editingPair, setEditingPair] = useState<KeyValuePair | null>(null);
-    
-    // Pagination state
-    const [page, setPage] = useState<number>(1);
-    const [pageSize] = useState<number>(24);
-
-    // Throttling refs
-    const throttleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const pendingUpdatesRef = useRef<Map<string, { key: string; color: string }>>(new Map());
-    
-    // Dispatch loading events
-    const dispatchLoadingEvent = useCallback((loading: boolean) => {
-        window.dispatchEvent(new MessageEvent('auto-admin-loading-state', { data: loading }));
-    }, []);
-
-    // Extract available modes from pairs
-    const availableModes = useMemo(() => {
-        return extractAvailableModes(pairs);
-    }, [pairs]);
-
-    // Filter pairs based on search term and selected mode
-    const filteredPairs = useMemo(() => {
-        let filtered = pairs;
-        
-        // Filter by search term
-        if (searchTerm.trim()) {
-            filtered = filtered.filter(pair => 
-                pair.key.toLowerCase().includes(searchTerm.toLowerCase())
-            );
-        }
-        
-        // Filter by selected mode
-        if (selectedMode) {
-            filtered = filtered.filter(pair => {
-                const { mode } = parseColorKey(pair.key);
-                return mode === selectedMode;
-            });
-        }
-        
-        return filtered;
-    }, [pairs, searchTerm, selectedMode]);
-
-    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchTerm(event.target.value);
-    };
-
-    const handleClearSearch = () => {
-        setSearchTerm('');
-    };
-
-    const handleModeChange = (event: any) => {
-        setSelectedMode(event.target.value);
-    };
-
-    const handleClearMode = () => {
-        setSelectedMode('');
-    };
-    
-    // Initial data loading effect
-    useEffect(() => {
-        const loadInitialData = async () => {
-            setIsLoading(true);
-            dispatchLoadingEvent(true);
-            
-            try {
-                let initialValue: Record<string, any> = {};
-                let defaultValues: Record<string, any> = {};
-             
-                try {
-                    defaultValues = attribute?.default_value || {};
-                } catch (e) {
-                    defaultValues = {};
-                }
-                
-                if (isNestedSetting && record?.settings) {
-                    const settings = record.settings || {};
-                    initialValue = { ...defaultValues, ...getNestedValue(settings, settingsPath) };
-                } else if (record?.[attributePath]) {
-                    initialValue = { ...defaultValues, ...record[attributePath] };
-                } else {
-                    initialValue = defaultValues;
-                }
-                
-                const initialPairs = Object.entries(initialValue).map(([key, value]) => ({
-                    key,
-                    value: String(value),
-                    id: generateId()
-                }));
-                
-                setPairs(initialPairs);
-                
-                // Simulate processing time for large datasets
-                if (initialPairs.length > 50) {
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                }
-                
-            } catch (error) {
-                console.error('Error loading initial data:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        loadInitialData();
-    }, [record, attributePath]);
-
-    // Rendering completion effect
-    useEffect(() => {
-        if (!isLoading && pairs.length >= 0) {
-            setIsRendering(true);
-            
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    setIsRendering(false);
-                    dispatchLoadingEvent(false);
-                });
-            });
-        }
-    }, [isLoading, pairs.length, dispatchLoadingEvent]);
-
-    // Cleanup throttle timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (throttleTimeoutRef.current) {
-                clearTimeout(throttleTimeoutRef.current);
-            }
-            dispatchLoadingEvent(false);
-        };
-    }, [dispatchLoadingEvent]);
-    
-    const getNestedValue = (obj: any, path: string): any => {
-        if (!path) return obj;
-        const keys = path.split('.');
-        return keys.reduce((o, key) => (o && o[key] !== undefined ? o[key] : {}), obj);
-    };
-    
-    const setNestedValue = (obj: any, path: string, value: any): any => {
-        if (!path) return value;
-        
-        const keys = path.split('.');
-        const lastKey = keys.pop();
-        const lastObj = keys.reduce((o, key) => {
-            if (o[key] === undefined) o[key] = {};
-            return o[key];
-        }, obj);
-        
-        if (lastKey) {
-            lastObj[lastKey] = value;
-        }
-        return obj;
-    };
-    
-    const generateId = (): string => {
-        return Math.random().toString(36).substring(2, 11);
-    };
-    
-    const addPair = () => {
-        const newPair = { key: '', value: '#000000', id: generateId() };
-        setEditingPair(newPair);
-        setEditDialogOpen(true);
-    };
-    
-    const handleEditPair = (pair: KeyValuePair) => {
-        setEditingPair(pair);
-        setEditDialogOpen(true);
-    };
-
-    const handleSavePair = (editedPair: KeyValuePair) => {
-        const existingIndex = pairs.findIndex(p => p.id === editedPair.id);
-        let updatedPairs: KeyValuePair[];
-        
-        if (existingIndex >= 0) {
-            // Update existing pair
-            updatedPairs = pairs.map(p => p.id === editedPair.id ? editedPair : p);
-        } else {
-            // Add new pair
-            updatedPairs = [...pairs, editedPair];
-        }
-        
-        setPairs(updatedPairs);
-        updateFormValue(updatedPairs);
-        updateSingleDomColor(editedPair.key, editedPair.value);
-    };
-
-    const handleDeletePair = (id: string) => {
-        const updatedPairs = pairs.filter(pair => pair.id !== id);
-        setPairs(updatedPairs);
-        updateFormValue(updatedPairs);
-    };
-    
-    // Update only a single DOM color property
-    const updateSingleDomColor = (key: string, color: string) => {
-        if (!key.trim()) return;
-        
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const themeSuffix = `--${currentTheme}`;
-        
-        if (key.endsWith(themeSuffix)) {
-            const baseKey = key.slice(0, -themeSuffix.length);
-            document.documentElement.style.setProperty(`--${baseKey}`, color);
-        }
-    };
-
-    // Batch update for preview only - processes all colors at once
-    /*const updateDomColors = (colors: Record<string, any>) => {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const themeSuffix = `--${currentTheme}`;
-        
-        requestAnimationFrame(() => {
-            Object.entries(colors).forEach(([key, value]) => {
-                if (key.endsWith(themeSuffix)) {
-                    const baseKey = key.slice(0, -themeSuffix.length);
-                    document.documentElement.style.setProperty(`--${baseKey}`, String(value));
-                }
-            });
-        });
-    };*/
-    
-    
-const getTenantSettingsValues = () => {
-        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
-        if (persistedTenantSettings) {
-            return persistedTenantSettings?.values || {};
-        }
-        return {}
-    };
-
- 
-    const handlePreview = (m:string) => {
-        const colorsObj = pairs.reduce((acc, pair) => {
-            if (pair.key.trim()) {
-                acc[pair.key] = pair.value;
-            }
-            return acc;
-        }, {} as Record<string, any>);
-  
-        //updateAllDomColors();
-        //updateDomColors(colorsObj);
-        updateDomCssVariables(m,colorsObj,getTenantSettingsValues());
-      
-    };
-
-    const updateFormValue = (currentPairs: KeyValuePair[]) => {
-        const obj = currentPairs.reduce((acc, pair) => {
-            if (pair.key.trim()) {
-                acc[pair.key] = pair.value;
-            }
-            return acc;
-        }, {} as Record<string, any>);
-        
-        if (isNestedSetting) {
-            const currentSettings = getValues('settings') || {};
-            const updatedSettings = setNestedValue({...currentSettings}, settingsPath, obj);
-            setValue('settings', updatedSettings, { shouldDirty: true });
-        } else {
-            setValue(attributePath, obj, { shouldDirty: true });
-        }
-    };
-
-    // Show loading state while component is initializing or rendering
-    if (isLoading || isRendering) {
-        return (
-            <Box sx={{ mt: 1, mb: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
-                <Typography variant="body2" color="textSecondary">
-                    {isLoading ? 'Loading color settings...' : 'Rendering colors...'}
-                </Typography>
-            </Box>
-        );
-    }
-    
-    return (
-        <Box sx={{ mt: 1, mb: 2 }}>
-            <Typography variant="subtitle1" gutterBottom>
-                {attribute.label || 'Color Palette'}
-            </Typography>
-
-            {/* Header Actions */}
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
-                <Button 
-                    startIcon={<PreviewIcon />} 
-                    variant="contained" 
-                    size="small" 
-                    onClick={() => handlePreview(document.documentElement.getAttribute('data-theme'))}
-                    color="primary"
-                >
-                    Preview Colors TEST
-                </Button>
-                <Button 
-                    startIcon={<AddIcon />} 
-                    variant="outlined" 
-                    size="small" 
-                    onClick={addPair}
-                >
-                    Add Color
-                </Button>
-            </Box>
-
-            {/* Search and Filter Controls */}
-            <Box sx={{ mb: 3, display: 'flex', gap: 2, alignItems: 'flex-end' }}>
-                {/* Search Field */}
-                <TextField
-                    fullWidth
-                    size="small"
-                    placeholder="Search colors by name..."
-                    value={searchTerm}
-                    onChange={handleSearchChange}
-                    slotProps={{
-                        input: {
-                            startAdornment: (
-                                <InputAdornment position="start">
-                                    <SearchIcon />
-                                </InputAdornment>
-                            ),
-                            endAdornment: searchTerm && (
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        size="small"
-                                        onClick={handleClearSearch}
-                                        edge="end"
-                                    >
-                                        <ClearIcon />
-                                    </IconButton>
-                                </InputAdornment>
-                            ),
-                        }
-                    }}
-                />
-
-                {/* Mode Selector */}
-                <FormControl size="small" sx={{ minWidth: 150 }}>
-                    <InputLabel>Mode</InputLabel>
-                    <Select
-                        value={selectedMode}
-                        label="Mode"
-                        onChange={handleModeChange}
-                        startAdornment={
-                            <InputAdornment position="start">
-                                <FilterListIcon fontSize="small" />
-                            </InputAdornment>
-                        }
-                        endAdornment={selectedMode && (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    size="small"
-                                    onClick={handleClearMode}
-                                    edge="end"
-                                    sx={{ mr: 1 }}
-                                >
-                                    <ClearIcon fontSize="small" />
-                                </IconButton>
-                            </InputAdornment>
-                        )}
-                    >
-                        <MenuItem value="">
-                            <em>All Modes</em>
-                        </MenuItem>
-                        {availableModes.map((mode) => (
-                            <MenuItem key={mode} value={mode}>
-                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                                    <span>{getModeIcon(mode)}</span>
-                                    <span>{mode}</span>
-                                </Box>
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </FormControl>
-            </Box>
-
-            {/* Results count when filtering */}
-            {(searchTerm || selectedMode) && (
-                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-                    <Chip 
-                        label={`${filteredPairs.length} of ${pairs.length} colors`}
-                        size="small"
-                        variant="outlined"
-                    />
-                    {selectedMode && (
-                        <Chip 
-                            label={`Mode: ${selectedMode}`}
-                            size="small"
-                            variant="filled"
-                            color="primary"
-                            onDelete={handleClearMode}
-                            avatar={<span style={{ paddingLeft: 6 }}>{getModeIcon(selectedMode)}</span>}
-                        />
-                    )}
-                    {searchTerm && (
-                        <Chip 
-                            label={`Search: "${searchTerm}"`}
-                            size="small"
-                            variant="filled"
-                            color="secondary"
-                            onDelete={handleClearSearch}
-                        />
-                    )}
-                </Box>
-            )}
-
-            {/* Color Grid with Pagination */}
-            {isRendering ? (
-                 <Box sx={{ display: 'flex', justifyContent: 'center', p: 4, alignItems: 'center', flexDirection: 'column', gap: 2 }}>
-                    <Typography>Rendering Grid...</Typography>
-                 </Box>
-            ) : filteredPairs.length > 0 ? (
-                <>
-                    <Box sx={{
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-                        gap: 2,
-                        width: '100%'
-                    }}>
-                        {filteredPairs
-                            .slice((page - 1) * pageSize, page * pageSize)
-                            .map((pair) => (
-                            <Box key={pair.id} sx={{ minWidth: 0 }}>
-                                <ColorPaletteItem
-                                    pair={pair}
-                                    onEdit={handleEditPair}
-                                    onDelete={handleDeletePair}
-                                />
-                            </Box>
-                        ))}
-                    </Box>
-                    
-                    {/* Pagination Controls */}
-                    {filteredPairs.length > pageSize && (
-                        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
-                            <Pagination 
-                                count={Math.ceil(filteredPairs.length / pageSize)} 
-                                page={page} 
-                                onChange={(_, value) => setPage(value)}
-                                color="primary"
-                                size="large"
-                                showFirstButton 
-                                showLastButton
-                            />
-                        </Box>
-                    )}
-                    
-                    <Typography variant="caption" sx={{ display: 'block', textAlign: 'center', mt: 2, color: 'text.secondary' }}>
-                        Showing {Math.min((page - 1) * pageSize + 1, filteredPairs.length)} - {Math.min(page * pageSize, filteredPairs.length)} of {filteredPairs.length} colors
-                    </Typography>
-                </>
-            ) : (
-                <Box sx={{ 
-                    p: 4, 
-                    textAlign: 'center', 
-                    bgcolor: 'background.paper', 
-                    borderRadius: 1,
-                    border: '1px dashed #ccc' 
-                }}>
-                    <Typography color="textSecondary">
-                        No colors found using current filters.
-                    </Typography>
-                    <Box sx={{ mt: 1 }}>
-                        <Link
-                            component="button"
-                            variant="body2"
-                            onClick={() => {
-                                setSearchTerm('');
-                                setSelectedMode('');
-                                setPage(1);
-                            }}
-                        >
-                            Clear filters
-                        </Link>
-                    </Box>
-                </Box>
-            )}
-
-            {/* Show message when no colors exist */}
-            {pairs.length === 0 && (
-                <Box sx={{ textAlign: 'center', py: 4 }}>
-                    <Typography variant="body2" color="textSecondary" gutterBottom>
-                        No colors in your palette yet
-                    </Typography>
-                    <Button 
-                        startIcon={<AddIcon />} 
-                        variant="contained" 
-                        onClick={addPair}
-                    >
-                        Add Your First Color
-                    </Button>
-                </Box>
-            )}
-
-            {/* Edit Dialog */}
-            <ColorEditDialog
-                open={editDialogOpen}
-                pair={editingPair}
-                onClose={() => {
-                    setEditDialogOpen(false);
-                    setEditingPair(null);
-                }}
-                onSave={handleSavePair}
-                onDelete={handleDeletePair}
-                existingKeys={pairs.map(p => p.key)}
-                updateSingleDomColor={updateSingleDomColor} 
-            />
-        </Box>
-    );
-};
-
-export const JsonView: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
-    const { attribute } = props;
-    const record = useRecordContext();
-    
-    const attributePath = attribute.attribute;
-    const isNestedSetting = attributePath.startsWith('settings.');
-    const settingsPath = isNestedSetting ? attributePath.split('.').slice(1).join('.') : attributePath;
-    
-    const [searchTerm, setSearchTerm] = useState<string>('');
-    const [selectedMode, setSelectedMode] = useState<string>('');
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [isRendering, setIsRendering] = useState<boolean>(true);
-    const [displayValue, setDisplayValue] = useState<Record<string, any>>({});
-   
-    // Dispatch loading events
-    const dispatchLoadingEvent = useCallback((loading: boolean) => {
-        window.dispatchEvent(new MessageEvent('auto-admin-loading-state', { data: loading }));
-    }, []);
-
-    // Convert displayValue to pairs for mode extraction
-    const displayPairs = useMemo(() => {
-        return Object.entries(displayValue).map(([key, value]) => ({
-            key,
-            value: String(value),
-            id: key
-        }));
-    }, [displayValue]);
-
-    // Extract available modes from display pairs
-    const availableModes = useMemo(() => {
-        return extractAvailableModes(displayPairs);
-    }, [displayPairs]);
-
-     // Initial data loading effect
-    useEffect(() => {
-        const loadViewData = async () => {
-            setIsLoading(true);
-            dispatchLoadingEvent(true);
-            
-            try {
-                let viewValue: Record<string, any> = {};
-                let defaultValues: Record<string, any> = {};
-
-                try {
-                    defaultValues = attribute?.default_value || {};
-                } catch (e) {
-                    defaultValues = {};
-                }
-                
-                if (isNestedSetting && record?.settings) {
-                    const settings = record.settings || {};
-                    if (settingsPath) {
-                        const keys = settingsPath.split('.');
-                        viewValue = { ...defaultValues, ...keys.reduce((o, key) => (o && o[key] !== undefined ? o[key] : {}), settings) };
-                    } else {
-                        viewValue = { ...defaultValues, ...settings };
-                    }
-                } else if (record?.[attributePath]) {
-                    viewValue = { ...defaultValues, ...record[attributePath] };
-                } else {
-                    viewValue = defaultValues;
-                }
-
-                setDisplayValue(viewValue);
-                
-                // Simulate processing time for large datasets
-                if (Object.keys(viewValue).length > 50) {
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                }
-                
-            } catch (error) {
-                console.error('Error loading view data:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        loadViewData();
-    }, [record, attributePath, attribute, isNestedSetting, settingsPath]);
-
-    // Rendering completion effect
-    useEffect(() => {
-        if (!isLoading && Object.keys(displayValue).length >= 0) {
-            setIsRendering(true);
-            
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    setIsRendering(false);
-                    dispatchLoadingEvent(false);
-                });
-            });
-        }
-    }, [isLoading, displayValue, dispatchLoadingEvent]);
-
-    // Cleanup effect
-    useEffect(() => {
-        return () => {
-            dispatchLoadingEvent(false);
-        };
-    }, [dispatchLoadingEvent]);
-    
-    // Filter display values based on search term and selected mode
-    const filteredDisplayValue = useMemo(() => {
-        let filtered = Object.entries(displayValue);
-        
-        // Filter by search term
-        if (searchTerm.trim()) {
-            filtered = filtered.filter(([key]) => 
-                key.toLowerCase().includes(searchTerm.toLowerCase())
-            );
-        }
-        
-        // Filter by selected mode
-        if (selectedMode) {
-            filtered = filtered.filter(([key]) => {
-                const { mode } = parseColorKey(key);
-                return mode === selectedMode;
-            });
-        }
-        
-        return filtered.reduce((acc, [key, value]) => {
-            acc[key] = value;
-            return acc;
-        }, {} as Record<string, any>);
-    }, [displayValue, searchTerm, selectedMode]);
-
-    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchTerm(event.target.value);
-    };
-
-    const handleClearSearch = () => {
-        setSearchTerm('');
-    };
-
-    const handleModeChange = (event: any) => {
-        setSelectedMode(event.target.value);
-    };
-
-    const handleClearMode = () => {
-        setSelectedMode('');
-    };
-
-    // Show loading state while component is initializing or rendering
-    if (isLoading || isRendering) {
-        return (
-            <Box sx={{ mt: 1, mb: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
-                <Typography variant="body2" color="textSecondary">
-                    {isLoading ? 'Loading color settings...' : 'Rendering colors...'}
-                </Typography>
-            </Box>
-        );
-    }
-    
-    return (
-        <Box sx={{ mt: 1, mb: 2 }}>
-            <Typography variant="subtitle1" gutterBottom>
-                {attribute.label || 'Color Palette'}
-            </Typography>
-
-            {Object.keys(displayValue).length > 0 && (
-                <>
-                    {/* Search and Filter Controls for View Mode */}
-                    <Box sx={{ mb: 3, display: 'flex', gap: 2, alignItems: 'flex-end' }}>
-                        {/* Search Field */}
-                        <TextField
-                            fullWidth
-                            size="small"
-                            placeholder="Search colors by name..."
-                            value={searchTerm}
-                            onChange={handleSearchChange}
-                            slotProps={{
-                                input: {
-                                    startAdornment: (
-                                        <InputAdornment position="start">
-                                            <SearchIcon />
-                                        </InputAdornment>
-                                    ),
-                                    endAdornment: searchTerm && (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                size="small"
-                                                onClick={handleClearSearch}
-                                                edge="end"
-                                            >
-                                                <ClearIcon />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }
-                            }}
-                        />
-
-                        {/* Mode Selector */}
-                        <FormControl size="small" sx={{ minWidth: 150 }}>
-                            <InputLabel>Mode</InputLabel>
-                            <Select
-                                value={selectedMode}
-                                label="Mode"
-                                onChange={handleModeChange}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                        <FilterListIcon fontSize="small" />
-                                    </InputAdornment>
-                                }
-                                endAdornment={selectedMode && (
-                                    <InputAdornment position="end">
-                                        <IconButton
-                                            size="small"
-                                            onClick={handleClearMode}
-                                            edge="end"
-                                            sx={{ mr: 1 }}
-                                        >
-                                            <ClearIcon fontSize="small" />
-                                        </IconButton>
-                                    </InputAdornment>
-                                )}
-                            >
-                                <MenuItem value="">
-                                    <em>All Modes</em>
-                                </MenuItem>
-                                {availableModes.map((mode) => (
-                                    <MenuItem key={mode} value={mode}>
-                                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                                            <span>{getModeIcon(mode)}</span>
-                                            <span>{mode}</span>
-                                        </Box>
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    </Box>
-
-                    {/* Results count when filtering */}
-                    {(searchTerm || selectedMode) && (
-                        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-                            <Chip 
-                                label={`${Object.keys(filteredDisplayValue).length} of ${Object.keys(displayValue).length} colors`}
-                                size="small"
-                                variant="outlined"
-                            />
-                            {selectedMode && (
-                                <Chip 
-                                    label={`Mode: ${getModeIcon(selectedMode)} ${selectedMode}`}
-                                    size="small"
-                                    variant="filled"
-                                    color="primary"
-                                    onDelete={handleClearMode}
-                                />
-                            )}
-                            {searchTerm && (
-                                <Chip 
-                                    label={`Search: "${searchTerm}"`}
-                                    size="small"
-                                    variant="filled"
-                                    color="secondary"
-                                    onDelete={handleClearSearch}
-                                />
-                            )}
-                        </Box>
-                    )}
-
-                      {Object.keys(filteredDisplayValue).length > 0 ? (
-                        <Box sx={{ 
-                                display: 'grid', 
-                                gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', // Double the width
-                                gap: 0,
-                                border: '1px solid #e0e0e0',
-                            }}>
-                                {Object.entries(filteredDisplayValue).map(([key, value]) => {
-                                    const { baseChips, mode } = parseColorKey(key);
-                                    const modeIcon = getModeIcon(mode);
-                                    
-                                    return (
-                                        <Box 
-                                            key={key}
-                                            sx={{ 
-                                                aspectRatio: 'unset', // Remove aspect ratio
-                                                height: '30px', // Set fixed height
-                                                transition: 'all 0.2s ease-in-out',
-                                                '&:hover': {
-                                                    transform: 'translateY(-2px)',
-                                                    boxShadow: 3,
-                                                },
-                                                position: 'relative',
-                                                overflow: 'hidden',
-                                                backgroundColor: value as string,
-                                                display: 'flex',
-                                                flexDirection: 'row', // Change to row
-                                                alignItems: 'center',
-                                                justifyContent: 'flex-start', // Align to start
-                                                border: '1px solid rgba(255,255,255,0.1)',
-                                                padding: '0 8px', // Horizontal padding only
-                                                gap: 0.5,
-                                            }}
-                                        >
-                                                                    {/* Base name chips */}
-                                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.25, justifyContent: 'center' }}>
-                                            {baseChips.map((chip, index) => (
-                                                <Chip
-                                                    key={index}
-                                                    label={chip}
-                                                    size="small"
-                                                    sx={{
-                                                        height: 16,
-                                                        fontSize: '0.6rem',
-                                                        backgroundColor: 'rgba(255,255,255,0.1)',
-                                                        color: '#fff',
-                                                        '& .MuiChip-label': {
-                                                            padding: '0 4px',
-                                                        },
-                                                    }}
-                                                />
-                                            ))}
-                                        </Box>
-                                        
-                                        {/* Mode chip/icon */}
-                                        {mode && (
-                                            <Chip
-                                                label={modeIcon}
-                                                size="small"
-                                                sx={{
-                                                    height: 16,
-                                                    fontSize: '0.6rem',
-                                                    backgroundColor: 'rgba(0,0,0,0.7)',
-                                                    color: '#fff',
-                                                    '& .MuiChip-label': {
-                                                        padding: '0 4px',
-                                                    },
-                                                }}
-                                            />
-                                        )}
-                                        
-                                        {/* Color value - smaller and at bottom */}
-                                        <Typography
-                                            variant="caption"
-                                            sx={{
-                                                color: getContrastColor(value as string),
-                                                backgroundColor: 'rgba(0,0,0,0.1)',
-                                                padding: '1px 4px',
-                                                borderRadius: 0.5,
-                                                fontSize: '0.5rem',
-                                                fontFamily: 'monospace',
-                                                textAlign: 'center',
-                                                mt: 'auto',
-                                            }}
-                                        >
-                                            {value as string}
-                                        </Typography>
-                                    </Box>
-                                );
-                            })}
-                        </Box>
-                    ) : (
-                        <Box sx={{ textAlign: 'center', py: 4 }}>
-                            <Typography variant="body2" color="textSecondary">
-                                No colors found matching your filters
-                            </Typography>
-                            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center', gap: 1 }}>
-                                {searchTerm && (
-                                    <Button size="small" onClick={handleClearSearch}>
-                                        Clear search
-                                    </Button>
-                                )}
-                                {selectedMode && (
-                                    <Button size="small" onClick={handleClearMode}>
-                                        Clear mode filter
-                                    </Button>
-                                )}
-                            </Box>
-                        </Box>
-                    )}
-                </>
-            )}
-
-            {Object.keys(displayValue).length === 0 && (
-                <Box sx={{ textAlign: 'center', py: 4 }}>
-                    <Typography variant="body2" color="textSecondary">
-                        No colors configured in this palette
-                    </Typography>
-                </Box>
-            )}
-        </Box>
-    );
-};
-
-const JsonColorSelector = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
-    const [componentLoading, setComponentLoading] = useState(true);
-
-
-    // Dispatch loading event when component mounts
-    useEffect(() => {
-        window.dispatchEvent(new MessageEvent('auto-admin-loading-state', { data: true }));
-        
-        // Set a small timeout to allow component to initialize
-        const timer = setTimeout(() => {
-            setComponentLoading(false);
-        }, 50);
-
-        return () => {
-            clearTimeout(timer);
-            // Ensure loading state is cleared on unmount
-            window.dispatchEvent(new MessageEvent('auto-admin-loading-state', { data: false }));
-        };
-    }, []);
-
-    // Show initial loading state
-    if (componentLoading) {
-        return (
-            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 100 }}>
-                <Typography variant="body2" color="textSecondary">
-                    Initializing color palette...
-                </Typography>
-            </Box>
-        );
-    }
-
-    switch (method) {
-        case 'edit':
-            return <JsonEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        case 'create':
-            return <JsonEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        case 'view':
-            return <JsonView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        default:
-            return null;
-    }
-};
-
-export default JsonColorSelector;