@bit.rhplus/ui.grid-layout 0.0.58 → 0.0.60

package/dist/useGridLayout.js

@@ -2,18 +2,25 @@
 /**
  * Hlavní hook pro správu grid layout - automatické ukládání a načítání rozvržení sloupců
  * Kombinuje AG-Grid API s Grid Layout službou pro persistence uživatelských preferencí
+ *
+ * ARCHITEKTURA - ZERO RE-RENDER PATTERN:
+ * ─────────────────────────────────────
+ * Při drag/resize/auto-save se NEPOUŽÍVÁ žádný useState.
+ * Všechny "pozadí" operace (save, detekce změn) běží přes useRef.
+ * Re-rendery se spouštějí POUZE při explicitních akcích (init, reload, editor save).
+ *
+ * preTransformedColumnDefs se po inicializaci ZAMKNE (stabilní reference).
+ * Zámek se uvolní jen při: změně columnDefs od parenta, editor save, reload.
+ * Tím se zabrání tomu, aby AG-Grid dostal columnDefs s původním pořadím.
  */
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useGridLayoutApi } from './useGridLayoutApi';
 import { debounce } from 'lodash';
-// Import tooltip komponent pro eliminaci circular dependency
-// import * as Tooltip from '../grid/tooltips';
+// ============================================================================
+// HELPER FUNKCE
+// ============================================================================
 /**
- * Helper funkce pro porovnání column state
- * Porovnává klíčové vlastnosti sloupců pro detekci změn
- * @param {Array} state1 - První column state
- * @param {Array} state2 - Druhý column state
- * @returns {boolean} - true pokud jsou identické, false pokud se liší
+ * Porovnání dvou column state pro detekci skutečných změn
  */
 const isColumnStateEqual = (state1, state2) => {
     if (!state1 || !state2)
@@ -23,66 +30,100 @@ const isColumnStateEqual = (state1, state2) => {
     for (let i = 0; i < state1.length; i++) {
         const col1 = state1[i];
         const col2 = state2[i];
-        // Porovnat klíčové vlastnosti
         if (col1.colId !== col2.colId)
-            return false; // Pořadí
+            return false;
         if (col1.width !== col2.width)
-            return false; // Šířka
+            return false;
         if (col1.hide !== col2.hide)
-            return false; // Viditelnost
+            return false;
         if (col1.pinned !== col2.pinned)
-            return false; // Pinning
+            return false;
     }
     return true;
 };
 /**
- * Hook pro správu grid layout s automatickým ukládáním
- * @param {Object} config - Konfigurace grid layout
- * @param {string} config.userKey - Identifikátor uživatele
- * @param {string} config.applicationName - Název aplikace
- * @param {string} config.gridName - Název gridu
- * @param {string} [config.filterName] - Název filtru (volitelné)
- * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
- * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
- * @param {number} [config.autoSaveDelay=500] - Zpoždění auto-save v ms
- * @param {Array} config.columnDefs - AG-Grid column definitions
- * @param {string} [config.accessToken] - Přístupový token
- * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
- * @param {Function} [config.onLayoutLoaded] - Callback při načtení layoutu
- * @param {Function} [config.onLayoutSaved] - Callback při uložení layoutu
- * @param {Function} [config.onError] - Callback při chybě
- * @returns {Object} Grid layout management interface
+ * Získá API objekt s metodou applyColumnState (AG Grid v31+ nebo starší)
  */
-export const useGridLayout = ({ userKey, applicationName, gridName, filterName, enabled = true, autoSave = true, autoSaveDelay = 500, columnDefs = [], accessToken, waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
-onLayoutLoaded, onLayoutSaved, onError, }) => {
-    // Validace columnDefs - musí být array
-    if (columnDefs !== undefined &&
-        columnDefs !== null &&
-        !Array.isArray(columnDefs)) {
+const getApplyApi = (gridApiRef, columnApiRef) => {
+    if (gridApiRef.current?.applyColumnState)
+        return gridApiRef.current;
+    if (columnApiRef.current?.applyColumnState)
+        return columnApiRef.current;
+    return null;
+};
+/**
+ * Získá aktuální column state z AG-Grid (AG Grid v31+ nebo starší)
+ */
+const getColumnState = (gridApiRef, columnApiRef) => {
+    try {
+        if (gridApiRef.current?.getColumnState)
+            return gridApiRef.current.getColumnState();
+        if (columnApiRef.current?.getColumnState)
+            return columnApiRef.current.getColumnState();
+    }
+    catch (e) {
+        console.error('[GridLayout] Chyba při čtení column state:', e);
+    }
+    return null;
+};
+/**
+ * Získá API objekt s metodou resetColumnState
+ */
+const getResetApi = (gridApiRef, columnApiRef) => {
+    if (gridApiRef.current?.resetColumnState)
+        return gridApiRef.current;
+    if (columnApiRef.current?.resetColumnState)
+        return columnApiRef.current;
+    return null;
+};
+// ============================================================================
+// HLAVNÍ HOOK
+// ============================================================================
+export const useGridLayout = ({ userKey, applicationName, gridName, filterName, enabled = true, autoSave = true, autoSaveDelay = 500, columnDefs = [], accessToken, waitForSavedFields = false, onLayoutLoaded, onLayoutSaved, onError, }) => {
+    // Validace columnDefs
+    if (columnDefs !== undefined && columnDefs !== null && !Array.isArray(columnDefs)) {
         console.error('[GridLayout] columnDefs is not an array:', typeof columnDefs, columnDefs);
         throw new Error('useGridLayout: columnDefs musí být array');
     }
-    // Refs pro AG-Grid API
+    // ==========================================================================
+    // REFS - stabilní reference pro event handlery a save funkce
+    // ==========================================================================
     const gridApiRef = useRef(null);
     const columnApiRef = useRef(null);
-    // Ref mapa pro ukládání aktuálních šířek sloupců (fieldId -> šířka)
-    const columnWidthRefsMap = useRef(new Map());
-    // Ref pro isInitialized - stabilní reference pro event handlery
+    const columnWidthRefsMap = useRef(new Map()); // fieldId -> aktuální šířka
+    const headerNameMapRef = useRef(new Map()); // fieldId -> aktuální headerName
+    const lastKnownColumnStateRef = useRef(null); // Poslední známý stav pro detekci změn
     const isInitializedRef = useRef(false);
-    // ✅ FIX: Ref pro sledování posledního známého column state (pro detekci změn v onDragStopped)
-    const lastKnownColumnStateRef = useRef(null);
-    // State
+    const enabledRef = useRef(enabled);
+    const isGridReadyRef = useRef(false);
+    const autoSaveRef = useRef(autoSave);
+    const stableColumnDefsRef = useRef(columnDefs);
+    const stableGridLayoutApiRef = useRef(null);
+    const stableOnLayoutSavedRef = useRef(onLayoutSaved);
+    const stableOnErrorRef = useRef(onError);
+    const stableOnLayoutLoadedRef = useRef(onLayoutLoaded);
+    // "Pozadí" refs - ŽÁDNÉ useState pro tyto hodnoty (zero re-render pattern)
+    const isSavingRef = useRef(false);
+    const hasUnsavedChangesRef = useRef(false);
+    const isApplyingLayoutRef = useRef(false);
+    // Zámek pro preTransformedColumnDefs (stabilní reference po inicializaci)
+    const lockedColumnDefsRef = useRef(null);
+    const lockedForColumnDefsRef = useRef(null);
+    const lockedForFrozenRecordsRef = useRef(null);
+    // ==========================================================================
+    // STATE - POUZE pro hodnoty kde re-render je žádoucí
+    // ==========================================================================
     const [isInitialized, setIsInitialized] = useState(false);
     const [isGridReady, setIsGridReady] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    const [isApplyingLayout, setIsApplyingLayout] = useState(false);
     const [error, setError] = useState(null);
-    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
-    const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
-    const [columnWidthsVersion, setColumnWidthsVersion] = useState(0); // Pro trigger preTransformedColumnDefs
-    // Grid Layout API hook
+    const [columnWidthsVersion, setColumnWidthsVersion] = useState(0);
+    // Zamrazené savedFields records - aktualizují se POUZE při init, reload a editor save
+    const [frozenSavedRecords, setFrozenSavedRecords] = useState(null);
+    // ==========================================================================
+    // API HOOK & QUERY
+    // ==========================================================================
     const gridLayoutApi = useGridLayoutApi({
         userKey,
         applicationName,
@@ -90,13 +131,9 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         filterName,
         accessToken,
     });
-    // Query pro načtení saved layoutu
     const { data: savedFields, isLoading: isFieldsLoading, error: fieldsError, refetch: refetchFields, } = gridLayoutApi.useUserFields((columnDefs || []).map((colDef, index) => ({
         name: colDef.field || colDef.colId || `column_${index}`,
-        displayName: colDef.headerName ||
-            colDef.field ||
-            colDef.colId ||
-            `Column ${index + 1}`,
+        displayName: colDef.headerName || colDef.field || colDef.colId || `Column ${index + 1}`,
         dataType: colDef.type || 'string',
         isVisible: !colDef.hide,
         width: colDef.width || 100,
@@ -108,737 +145,389 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             Array.isArray(columnDefs) &&
             columnDefs.length > 0,
     });
-    /**
-     * Error handler
-     */
-    const handleError = useCallback((error, context = '') => {
-        setError(error);
-        if (onError) {
-            onError(error, context);
-        }
-    }, [onError]);
-    // Stabilní reference pro debouncedSave
-    const stableColumnDefsRef = useRef(columnDefs);
-    const stableGridLayoutApiRef = useRef(gridLayoutApi);
-    const stableOnLayoutSavedRef = useRef(onLayoutSaved);
-    const stableHandleErrorRef = useRef(handleError);
-    // Reference pro ukládání stavu sloupců bez state update v render cyklu
-    const stableCurrentColumnsRef = useRef(null);
-    // Jednoduchá aktualizace ref hodnot - BEZ aktualizace columnDefs
+    // ==========================================================================
+    // SYNCHRONIZACE REFS
+    // ==========================================================================
+    useEffect(() => { enabledRef.current = enabled; }, [enabled]);
+    useEffect(() => { isGridReadyRef.current = isGridReady; }, [isGridReady]);
+    useEffect(() => { autoSaveRef.current = autoSave; }, [autoSave]);
+    useEffect(() => { isInitializedRef.current = isInitialized; }, [isInitialized]);
+    useEffect(() => { stableGridLayoutApiRef.current = gridLayoutApi; }, [gridLayoutApi]);
+    useEffect(() => {
+        stableOnLayoutSavedRef.current = onLayoutSaved;
+        stableOnErrorRef.current = onError;
+        stableOnLayoutLoadedRef.current = onLayoutLoaded;
+    }, [onLayoutSaved, onError, onLayoutLoaded]);
+    // Synchronizace columnDefs ref + zachování existujících šířek
     useEffect(() => {
-        // Při změně columnDefs vyčistíme columnWidthRefsMap a přeneseme existující šířky
         if (columnDefs !== stableColumnDefsRef.current) {
             const newWidthMap = new Map();
-            // Zachováme šířky pro sloupce, které stále existují
             if (Array.isArray(columnDefs)) {
                 columnDefs.forEach(colDef => {
                     const fieldId = colDef.field || colDef.colId;
                     if (fieldId) {
-                        // Zkusíme najít existující šířku v ref map
                         const existingWidth = columnWidthRefsMap.current.get(fieldId);
                         if (existingWidth !== undefined) {
                             newWidthMap.set(fieldId, existingWidth);
                         }
                         else if (colDef.width) {
-                            // Použijeme šířku z nového columnDef
                             newWidthMap.set(fieldId, colDef.width);
                         }
                     }
                 });
             }
             columnWidthRefsMap.current = newWidthMap;
-            setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
+            setColumnWidthsVersion(prev => prev + 1);
         }
         stableColumnDefsRef.current = columnDefs;
-        stableGridLayoutApiRef.current = gridLayoutApi;
-        stableOnLayoutSavedRef.current = onLayoutSaved;
-        stableHandleErrorRef.current = handleError;
-    }, [columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
-    // Synchronizace isInitializedRef se state pro stabilní event handlery
+    }, [columnDefs]);
+    // ==========================================================================
+    // HEADER NAME MAPA - plní se z savedFields při načtení
+    // ==========================================================================
+    useEffect(() => {
+        if (savedFields?.records && Array.isArray(savedFields.records)) {
+            savedFields.records.forEach(field => {
+                if (field.fieldName && field.headerName) {
+                    headerNameMapRef.current.set(field.fieldName, field.headerName);
+                }
+            });
+        }
+    }, [savedFields?.records]);
+    // ==========================================================================
+    // FROZEN SAVED RECORDS - aktualizují se pouze při prvním načtení
+    // ==========================================================================
     useEffect(() => {
-        isInitializedRef.current = isInitialized;
-    }, [isInitialized]);
-    // Efekt pro bezpečnou aktualizaci lastKnownColumnState z ref
-    // useEffect(() => {
-    //   if (stableCurrentColumnsRef.current) {
-    //     setLastKnownColumnState(stableCurrentColumnsRef.current);
-    //     console.log('[GridLayout] Updated lastKnownColumnState from ref');
-    //     // Vymazat po použití
-    //     stableCurrentColumnsRef.current = null;
-    //   }
-    // }, [stableCurrentColumnsRef.current]);
-    /**
-     * Uloží současný stav sloupců do API
-     * KRITICKÉ: Ukládá POUZE pokud už byl layout načten z API (isInitialized === true)
-     * Tím se zabrání přepsání uloženého layoutu default hodnotami při inicializaci
-     */
+        if (!frozenSavedRecords && savedFields?.records?.length > 0) {
+            setFrozenSavedRecords(savedFields.records);
+        }
+    }, [savedFields?.records, frozenSavedRecords]);
+    // ==========================================================================
+    // ERROR HANDLER (pouze pro explicitní akce - ne auto-save)
+    // ==========================================================================
+    const handleError = useCallback((error, context = '') => {
+        setError(error);
+        if (stableOnErrorRef.current) {
+            stableOnErrorRef.current(error, context);
+        }
+    }, []);
+    // ==========================================================================
+    // SAVE CURRENT LAYOUT
+    // ZERO RE-RENDER: používá POUZE refs, žádné setState
+    // ==========================================================================
     const saveCurrentLayout = useCallback(async () => {
-        // OCHRANA: Neuložit dokud není načten a aplikován layout z API
-        if (!enabled || !gridApiRef.current || !isInitialized) {
+        if (!enabledRef.current || !gridApiRef.current || !isInitializedRef.current) {
             return;
         }
+        // Ochrana proti souběžným uložením
+        if (isSavingRef.current)
+            return;
         try {
-            setIsSaving(true);
-            setError(null);
-            // Získáme současný column state z AG-Grid s fallbackem pro AG Grid v31+
-            let columnState = null;
-            if (gridApiRef.current &&
-                typeof gridApiRef.current.getColumnState === 'function') {
-                // AG Grid v31+ - getColumnState je přímo v main API
-                try {
-                    columnState = gridApiRef.current.getColumnState();
-                    // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
-                    if (columnState && Array.isArray(columnState)) {
-                        columnState = columnState.map(colState => {
-                            // Pokusíme se získat aktuální headerName z DOM
-                            try {
-                                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
-                                if (headerCell) {
-                                    const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-                                    if (headerTextEl && headerTextEl.textContent) {
-                                        return {
-                                            ...colState,
-                                            headerName: headerTextEl.textContent
-                                        };
-                                    }
-                                }
-                            }
-                            catch (headerError) {
-                                console.log(`❌ [GridLayout] Could not get headerName from DOM for ${colState.colId}`);
-                            }
-                            return colState;
-                        });
-                    }
-                    // Pokud getColumnState vrátí undefined, grid je v nekonzistentním stavu
-                    // Zkusíme alternativní metodu přes getColumnDefs()
-                    if (columnState === undefined || columnState === null) {
-                        console.warn('[GridLayout] getColumnState returned undefined/null, trying getColumnDefs() alternative');
-                        console.warn('[GridLayout] Full gridApiRef.current object:', gridApiRef.current);
-                        console.warn('[GridLayout] Available methods on gridApiRef.current:', gridApiRef.current
-                            ? Object.getOwnPropertyNames(gridApiRef.current).filter((name) => typeof gridApiRef.current[name] === 'function')
-                            : 'NO_GRID_API');
-                        try {
-                            // Alternativní přístup: použijeme getColumnDefs() a vytvoříme fake column state
-                            const columnDefs = gridApiRef.current.getColumnDefs();
-                            if (columnDefs &&
-                                Array.isArray(columnDefs) &&
-                                columnDefs.length > 0) {
-                                // Vytvoříme column state z column defs
-                                columnState = columnDefs.map((colDef, index) => {
-                                    // Zkusíme získat aktuální šířku sloupce z DOM
-                                    let currentWidth = colDef.width || 100;
-                                    try {
-                                        const fieldId = colDef.field || colDef.colId;
-                                        const headerElement = document.querySelector(`[col-id="${fieldId}"]`);
-                                        if (headerElement && headerElement.offsetWidth) {
-                                            currentWidth = headerElement.offsetWidth;
-                                        }
-                                    }
-                                    catch (domError) {
-                                        console.log('❌ [GridLayout] Could not get width from DOM for', colDef.field);
-                                    }
-                                    return {
-                                        colId: colDef.field || colDef.colId,
-                                        hide: colDef.hide || false,
-                                        width: currentWidth,
-                                        headerName: colDef.headerName, // Přidáme aktuální headerName
-                                        sort: null, // Nebudeme zachovávat sort při této fallback metodě
-                                        sortIndex: null,
-                                    };
-                                });
-                            }
-                            else {
-                                console.error('[GridLayout] getColumnDefs() also failed or returned empty array');
-                                const cachedColumnDefs = stableColumnDefsRef.current;
-                                if (cachedColumnDefs &&
-                                    Array.isArray(cachedColumnDefs) &&
-                                    cachedColumnDefs.length > 0) {
-                                    columnState = cachedColumnDefs.map((colDef, index) => {
-                                        // Použijeme cached definice
-                                        let currentWidth = colDef.width || 100;
-                                        return {
-                                            colId: colDef.field || colDef.colId,
-                                            hide: colDef.hide || false,
-                                            width: currentWidth,
-                                            headerName: colDef.headerName, // Přidáme aktuální headerName
-                                            sort: null,
-                                            sortIndex: null,
-                                        };
-                                    });
-                                }
-                                else {
-                                    console.error('[GridLayout] All fallback methods failed - no column data available');
-                                    return;
-                                }
-                            }
-                        }
-                        catch (columnDefError) {
-                            console.error('[GridLayout] getColumnDefs() alternative failed:', columnDefError);
-                            return;
-                        }
-                    }
-                }
-                catch (error) {
-                    console.error('[GridLayout] Error calling gridApiRef.current.getColumnState():', error);
-                    return;
-                }
+            isSavingRef.current = true; // ref only → žádný re-render
+            const columnState = getColumnState(gridApiRef, columnApiRef);
+            if (!columnState || !Array.isArray(columnState) || columnState.length === 0) {
+                return;
             }
-            else if (columnApiRef.current &&
-                typeof columnApiRef.current.getColumnState === 'function') {
-                // Starší verze AG Grid - getColumnState je v columnApi
-                try {
-                    columnState = columnApiRef.current.getColumnState();
-                    // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
-                    if (columnState && Array.isArray(columnState)) {
-                        columnState = columnState.map(colState => {
-                            // Pokusíme se získat aktuální headerName z DOM
-                            try {
-                                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
-                                if (headerCell) {
-                                    const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-                                    if (headerTextEl && headerTextEl.textContent) {
-                                        return {
-                                            ...colState,
-                                            headerName: headerTextEl.textContent
-                                        };
-                                    }
-                                }
-                            }
-                            catch (headerError) {
-                                console.log(`❌ [GridLayout] Could not get headerName from DOM for ${colState.colId}`);
-                            }
-                            return colState;
-                        });
-                    }
-                }
-                catch (error) {
-                    console.error('❌ [GridLayout] Error calling columnApiRef.current.getColumnState():', error);
-                    return;
+            // Obohatíme column state o headerName z ref mapy (BEZ čtení z DOM)
+            const enrichedColumnState = columnState.map(colState => {
+                const savedHeaderName = headerNameMapRef.current.get(colState.colId);
+                if (savedHeaderName) {
+                    return { ...colState, headerName: savedHeaderName };
                 }
+                return colState;
+            });
+            const columnDefsToUse = stableColumnDefsRef.current;
+            if (!columnDefsToUse || !Array.isArray(columnDefsToUse) || columnDefsToUse.length === 0) {
+                return;
             }
-            else {
+            const fields = stableGridLayoutApiRef.current.transformColumnStateToFields(enrichedColumnState, columnDefsToUse);
+            if (!fields || fields.length === 0) {
                 return;
             }
-            // Kontrola validity columnDefs a použití fallback pokud je potřeba
-            let columnDefsToUse = stableColumnDefsRef.current;
-            if (!columnDefsToUse ||
-                !Array.isArray(columnDefsToUse) ||
-                columnDefsToUse.length === 0) {
-                console.warn('[GridLayout] stableColumnDefsRef is empty, using fallback from stableCurrentColumnsRef');
-                if (stableCurrentColumnsRef.current &&
-                    Array.isArray(stableCurrentColumnsRef.current)) {
-                    // Převedeme cached sloupce zpět na columnDefs format
-                    columnDefsToUse = stableCurrentColumnsRef.current.map((col) => ({
-                        field: col.field,
-                        headerName: col.headerName || col.field,
-                        width: col.width || 100,
-                        hide: !col.visible,
-                    }));
-                }
-                else {
-                    console.error('[GridLayout] No valid columnDefs available for saving');
-                    return;
+            const result = await stableGridLayoutApiRef.current.saveGridLayout(fields);
+            if (result.success) {
+                hasUnsavedChangesRef.current = false; // ref only → žádný re-render
+                if (stableOnLayoutSavedRef.current) {
+                    stableOnLayoutSavedRef.current(fields, enrichedColumnState);
                 }
             }
-            // Transformujeme na Grid API format
-            const fields = stableGridLayoutApiRef.current.transformColumnStateToFields(columnState, columnDefsToUse);
-            // Uložíme do API
-            const result = stableGridLayoutApiRef.current
-                .saveGridLayout(fields)
-                .then((result) => {
-                if (result.success) {
-                    setHasUnsavedChanges(false);
-                    if (stableOnLayoutSavedRef.current) {
-                        stableOnLayoutSavedRef.current(fields, columnState);
-                    }
-                }
-            })
-                .catch((error) => {
-                stableHandleErrorRef.current(error, 'při ukládání layoutu');
-            });
         }
         catch (error) {
-            stableHandleErrorRef.current(error, 'při ukládání layoutu');
+            console.error('[GridLayout] Chyba při ukládání layoutu:', error);
+            // Při auto-save NENASTAVUJEME error state (žádný re-render)
+            // Error se loguje do konzole a volá se onError callback
+            if (stableOnErrorRef.current) {
+                stableOnErrorRef.current(error, 'při ukládání layoutu');
+            }
         }
         finally {
-            setIsSaving(false);
+            isSavingRef.current = false; // ref only → žádný re-render
         }
-    }, [enabled, isInitialized]);
-    /**
-     * Debounced auto-save pro předcházení častým voláním API
-     */
+    }, []); // PRÁZDNÉ DEPS → stabilní funkce
+    // ==========================================================================
+    // DEBOUNCED SAVE
+    // ==========================================================================
+    const saveCurrentLayoutRef = useRef(saveCurrentLayout);
+    useEffect(() => {
+        saveCurrentLayoutRef.current = saveCurrentLayout;
+    }, [saveCurrentLayout]);
     const debouncedSave = useMemo(() => {
-        const debouncedFn = debounce((...args) => {
-            return saveCurrentLayout(...args);
+        return debounce(() => {
+            saveCurrentLayoutRef.current();
         }, autoSaveDelay);
-        return debouncedFn;
-    }, [saveCurrentLayout, autoSaveDelay]);
-    // ✅ FIX #3: Stabilní ref pro debouncedSave (eliminuje regeneraci event handlerů)
+    }, [autoSaveDelay]);
     const debouncedSaveRef = useRef(debouncedSave);
-    // Aktualizovat ref když se debouncedSave změní
     useEffect(() => {
         debouncedSaveRef.current = debouncedSave;
     }, [debouncedSave]);
-    // ✅ FIX #3+: Stabilní refs pro enabled, isGridReady, autoSave (KRITICKÉ pro stabilitu handlerů)
-    const enabledRef = useRef(enabled);
-    const isGridReadyRef = useRef(isGridReady);
-    const autoSaveRef = useRef(autoSave);
-    // Aktualizovat refs při změnách
     useEffect(() => {
-        enabledRef.current = enabled;
-    }, [enabled]);
-    useEffect(() => {
-        isGridReadyRef.current = isGridReady;
-    }, [isGridReady]);
-    useEffect(() => {
-        autoSaveRef.current = autoSave;
-    }, [autoSave]);
-    /**
-     * Aplikuje saved layout na AG-Grid
-     * @param {boolean} forceApply - Vynucené aplikování ignorující isInitialized stav
-     */
+        return () => { debouncedSave.cancel(); };
+    }, [debouncedSave]);
+    // ==========================================================================
+    // APPLY SAVED LAYOUT (pouze při inicializaci - re-render je OK)
+    // ==========================================================================
     const applySavedLayout = useCallback((forceApply = false) => {
-        // Ověříme dostupnost API a inicializaci
-        if (!savedFields?.records ||
-            savedFields.records.length === 0 ||
-            (!forceApply && isInitialized)) {
+        if (!savedFields?.records || savedFields.records.length === 0 || (!forceApply && isInitialized)) {
             return;
         }
-        // Ověříme dostupnost applyColumnState metody (AG Grid v31+ má ji v main API)
-        let applyColumnStateApi = null;
-        if (gridApiRef.current &&
-            typeof gridApiRef.current.applyColumnState === 'function') {
-            applyColumnStateApi = gridApiRef.current;
-        }
-        else if (columnApiRef.current &&
-            typeof columnApiRef.current.applyColumnState === 'function') {
-            applyColumnStateApi = columnApiRef.current;
-        }
-        if (!applyColumnStateApi) {
-            console.warn('[GridLayout] applyColumnState method not available');
+        const applyApi = getApplyApi(gridApiRef, columnApiRef);
+        if (!applyApi) {
             return;
         }
         try {
             setIsLoading(true);
-            setIsApplyingLayout(true);
-            // Transformujeme Grid API fields na AG-Grid column state
-            // Použijeme stableColumnDefsRef.current místo columnDefs pro zachování aktuálních šířek
+            isApplyingLayoutRef.current = true;
             const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
             const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
-            if (columnState && columnState.length > 0) {
-                // Při prvotním načítání inicializujeme ref mapu s API šířkami
-                if (!isInitialized) {
-                    columnState.forEach(colState => {
-                        if (colState.colId && colState.width) {
-                            columnWidthRefsMap.current.set(colState.colId, colState.width);
-                        }
-                    });
+            if (!columnState || columnState.length === 0) {
+                return;
+            }
+            // Inicializace width ref mapy s API šířkami
+            if (!isInitialized) {
+                columnState.forEach(colState => {
+                    if (colState.colId && colState.width) {
+                        columnWidthRefsMap.current.set(colState.colId, colState.width);
+                    }
+                });
+            }
+            // Sestavení headerName mapy z API dat
+            const headerNameMap = new Map();
+            savedFields.records.forEach(field => {
+                if (field.fieldName && field.headerName) {
+                    headerNameMap.set(field.fieldName, field.headerName);
+                    headerNameMapRef.current.set(field.fieldName, field.headerName);
                 }
-                // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované,
-                // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
-                const applyFunction = () => {
-                    try {
-                        // Aplikujeme column state na AG-Grid
-                        let result;
+            });
+            // Adjusted column state (s ref šířkami pro re-apply)
+            const adjustedColumnState = columnState.map(colState => {
+                const refWidth = columnWidthRefsMap.current.get(colState.colId);
+                if (refWidth !== undefined && isInitialized) {
+                    return { ...colState, width: refWidth };
+                }
+                return colState;
+            });
+            const applyFunction = () => {
+                try {
+                    // KROK 1: Aktualizace headerName přes setColumnDefs PRVNÍ
+                    if (headerNameMap.size > 0 && gridApiRef.current) {
                         try {
-                            const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
-                            // Upravíme columnState s aktuálními šířkami z ref map
-                            // POUZE pokud ref mapa obsahuje hodnoty (tj. uživatel už manipuloval s šířkami)
-                            // Při prvotním načítání z API zachováme API šířky
-                            let adjustedColumnState = columnState.map(colState => {
-                                // Zkontrolujeme, zda máme ref hodnotu pro tento sloupec
-                                const refWidth = columnWidthRefsMap.current.get(colState.colId);
-                                // Použijeme ref hodnotu POUZE pokud existuje A není to prvotní načítání
-                                if (refWidth !== undefined && isInitialized) {
-                                    return {
-                                        ...colState,
-                                        width: refWidth
-                                    };
-                                }
-                                // Při prvotním načítání nebo pokud nemáme ref hodnotu, zachováme API šířku
-                                return colState;
-                            });
-                            result = applyColumnStateApi.applyColumnState({
-                                state: adjustedColumnState,
-                                applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
-                                defaultState: {
-                                    sort: null, // Reset sorting na všech sloupcích
-                                    sortIndex: null, // Reset sort index
-                                    pivot: null, // Reset pivot
-                                    rowGroup: null, // Reset row grouping
-                                },
-                            });
-                            // ✅ FIX: Aktualizovat lastKnownColumnStateRef po aplikování layoutu z API
-                            // Tím zajistíme, že handleDragStopped má správnou referenci pro porovnání
-                            lastKnownColumnStateRef.current = adjustedColumnState;
-                            // Explicitně aktualizujeme headerName pro každý sloupec, protože AG-Grid
-                            // nepodporuje nastavení headerName přes applyColumnState
-                            if (savedFields.records &&
-                                Array.isArray(savedFields.records) &&
-                                gridApiRef.current) {
-                                // Nejprve zkusíme použít refreshHeader funkci, pokud je dostupná
-                                try {
-                                    if (typeof gridApiRef.current.refreshHeader === 'function') {
-                                        gridApiRef.current.refreshHeader();
-                                    }
-                                }
-                                catch (refreshError) {
-                                    console.error('[GridLayout] Error in refreshHeader:', refreshError);
-                                }
-                                // Získáme aktuální definice sloupců z gridu
-                                let currentColDefs;
-                                try {
-                                    currentColDefs = gridApiRef.current.getColumnDefs
-                                        ? gridApiRef.current.getColumnDefs()
-                                        : null;
-                                }
-                                catch (error) {
-                                    console.error('[GridLayout] Error getting column definitions:', error);
-                                    currentColDefs = null;
-                                }
-                                if (currentColDefs && Array.isArray(currentColDefs)) {
-                                    // Vytvoříme mapu fieldName -> headerName z API dat
-                                    const headerNameMap = new Map();
-                                    savedFields.records.forEach((field) => {
-                                        if (field.fieldName && field.headerName) {
-                                            headerNameMap.set(field.fieldName, field.headerName);
-                                        }
-                                    });
-                                    // Aktualizujeme headerName pro každý sloupec
-                                    const updatedColDefs = currentColDefs.map((colDef) => {
-                                        const fieldName = colDef.field;
-                                        if (fieldName && headerNameMap.has(fieldName)) {
-                                            const newHeaderName = headerNameMap.get(fieldName);
-                                            // Vytvoříme novou kopii definice sloupce s aktualizovaným headerName
-                                            return {
-                                                ...colDef,
-                                                headerName: newHeaderName,
-                                            };
-                                        }
-                                        return colDef;
-                                    });
-                                    // Aplikujeme aktualizované definice sloupců zpět do gridu
-                                    try {
-                                        if (typeof gridApiRef.current.setColumnDefs === 'function') {
-                                            gridApiRef.current.setColumnDefs(updatedColDefs);
-                                            // Pro jistotu zkontrolujeme, zda byly změny aplikovány
-                                            setTimeout(() => {
-                                                try {
-                                                    // DOM operace dokončeny, můžeme ukončit loading
-                                                    setIsApplyingLayout(false);
-                                                }
-                                                catch (checkError) {
-                                                    console.error('[GridLayout] Error checking updated columns:', checkError);
-                                                    // I při chybě ukončíme loading
-                                                    setIsApplyingLayout(false);
-                                                }
-                                            }, 100);
-                                        }
-                                        else {
-                                            // Alternativní řešení - přímá manipulace s DOM
-                                            // Počkáme, až se grid vyrenderuje
-                                            setTimeout(() => {
-                                                try {
-                                                    // Vytvoříme mapu pro rychlou identifikaci
-                                                    const headerUpdates = new Map();
-                                                    updatedColDefs.forEach((colDef) => {
-                                                        if (colDef.field && colDef.headerName) {
-                                                            headerUpdates.set(colDef.field, colDef.headerName);
-                                                        }
-                                                    });
-                                                    // Najdeme všechny hlavičky sloupců pomocí DOM
-                                                    const headerCells = document.querySelectorAll('.ag-header-cell');
-                                                    headerCells.forEach((headerCell) => {
-                                                        try {
-                                                            // Získáme ID sloupce z DOM atributů
-                                                            const colId = headerCell.getAttribute('col-id');
-                                                            if (colId && headerUpdates.has(colId)) {
-                                                                // Najdeme element s textem hlavičky
-                                                                const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-                                                                if (headerTextEl) {
-                                                                    const newHeaderName = headerUpdates.get(colId);
-                                                                    headerTextEl.textContent = newHeaderName;
-                                                                }
-                                                            }
-                                                        }
-                                                        catch (cellError) {
-                                                            console.error('[GridLayout] Error updating header cell:', cellError);
-                                                        }
-                                                    });
-                                                    // DOM manipulace dokončena, ukončíme loading
-                                                    setIsApplyingLayout(false);
-                                                }
-                                                catch (domError) {
-                                                    console.error('[GridLayout] Error in DOM manipulation:', domError);
-                                                    // I při chybě ukončíme loading
-                                                    setIsApplyingLayout(false);
-                                                }
-                                            }, 200);
+                            const currentColDefs = gridApiRef.current.getColumnDefs?.();
+                            if (currentColDefs && Array.isArray(currentColDefs)) {
+                                let hasHeaderChanges = false;
+                                const updatedColDefs = currentColDefs.map(colDef => {
+                                    const fieldName = colDef.field;
+                                    if (fieldName && headerNameMap.has(fieldName)) {
+                                        const newName = headerNameMap.get(fieldName);
+                                        if (colDef.headerName !== newName) {
+                                            hasHeaderChanges = true;
+                                            return { ...colDef, headerName: newName };
                                         }
                                     }
-                                    catch (setError) {
-                                        console.error('[GridLayout] Error applying column definitions:', setError);
-                                    }
+                                    return colDef;
+                                });
+                                if (hasHeaderChanges && typeof gridApiRef.current.setColumnDefs === 'function') {
+                                    gridApiRef.current.setColumnDefs(updatedColDefs);
                                 }
                             }
                         }
-                        catch (applyError) {
-                            throw applyError;
-                        }
-                        if (onLayoutLoaded) {
-                            onLayoutLoaded(savedFields.records, columnState);
+                        catch (e) {
+                            console.error('[GridLayout] Chyba při aktualizaci headerName:', e);
                         }
                     }
-                    catch (delayedError) {
-                        handleError(delayedError, 'při delayed aplikování layoutu');
+                    // KROK 2: Aplikovat column state (pořadí, šířky) PO setColumnDefs
+                    const applyOrderEnabled = !waitForSavedFields;
+                    applyApi.applyColumnState({
+                        state: adjustedColumnState,
+                        applyOrder: applyOrderEnabled,
+                        defaultState: { sort: null, sortIndex: null, pivot: null, rowGroup: null },
+                    });
+                    lastKnownColumnStateRef.current = adjustedColumnState;
+                    try {
+                        gridApiRef.current?.refreshHeader?.();
                     }
-                    finally {
-                        // Bezpečnostní ukončení loading pokud se nedokončilo jinde
-                        setTimeout(() => {
-                            setIsApplyingLayout(false);
-                        }, 300);
+                    catch (e) { /* ignorujeme */ }
+                    if (stableOnLayoutLoadedRef.current) {
+                        stableOnLayoutLoadedRef.current(savedFields.records, columnState);
                     }
-                };
-                // Pro waitForSavedFields aplikujeme okamžitě (pořadí je už v columnDefs)
-                // Pro normální režim použijeme delay
-                if (waitForSavedFields) {
-                    applyFunction();
                 }
-                else {
-                    setTimeout(applyFunction, 100); // 100ms delay jen pro normální režim
+                catch (error) {
+                    console.error('[GridLayout] Chyba při aplikování layoutu:', error);
+                    handleError(error, 'při aplikování layoutu');
+                }
+                finally {
+                    isApplyingLayoutRef.current = false;
                 }
+            };
+            if (waitForSavedFields) {
+                applyFunction();
+            }
+            else {
+                setTimeout(applyFunction, 100);
             }
         }
         catch (error) {
+            console.error('[GridLayout] Chyba při přípravě layoutu:', error);
             handleError(error, 'při aplikování layoutu');
+            isApplyingLayoutRef.current = false;
         }
         finally {
             setIsInitialized(true);
-            setIsGridReady(true); // Obnovíme také isGridReady pro event handlery
+            setIsGridReady(true);
             setIsLoading(false);
-            // setIsApplyingLayout(false) se nastaví až po dokončení všech DOM operací
-        }
-    }, [
-        savedFields,
-        gridLayoutApi,
-        isInitialized,
-        onLayoutLoaded,
-        handleError,
-        columnDefs,
-        waitForSavedFields,
-    ]);
-    /**
-     * Odložené akce pro případ rychlé interakce před dokončením inicializace
-     */
-    const [pendingActions, setPendingActions] = useState([]);
-    // Effect pro zpracování pending actions po dokončení inicializace
-    useEffect(() => {
-        if (isInitialized && pendingActions.length > 0) {
-            // Zpracujeme pending akce s krátkým delay
-            setTimeout(() => {
-                pendingActions.forEach((action) => {
-                    switch (action.type) {
-                        case 'dragStopped':
-                            if (autoSaveRef.current && debouncedSaveRef.current) { // ✅ FIX #3+: Použít refs
-                                debouncedSaveRef.current();
-                            }
-                            break;
-                    }
-                });
-                setPendingActions([]);
-            }, 100);
         }
-    }, [isInitialized, pendingActions]); // ✅ FIX #3+: Odstranit autoSave z dependencies
-    /**
-     * Event handlers pro AG-Grid
-     */
+    }, [savedFields, gridLayoutApi, isInitialized, handleError, columnDefs, waitForSavedFields]);
+    // ==========================================================================
+    // AG-GRID EVENT HANDLERS
+    // ZERO RE-RENDER: všechny mají prázdné deps a používají POUZE refs
+    // ==========================================================================
     const handleColumnMoved = useCallback(() => {
-        if (!enabledRef.current || !isGridReadyRef.current) { // ✅ FIX #3+: Použít refs místo dependencies
+        if (!enabledRef.current || !isGridReadyRef.current)
             return;
-        }
-        setHasUnsavedChanges(true);
-        // Neukládáme při každém pohybu - čekáme na onDragStopped
-    }, []); // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje
+        hasUnsavedChangesRef.current = true; // ref only → žádný re-render
+    }, []);
     const handleDragStopped = useCallback(() => {
-        if (!enabledRef.current || !isGridReadyRef.current) { // ✅ FIX #3+: Použít refs místo dependencies
+        if (!enabledRef.current || !isGridReadyRef.current)
             return;
-        }
-        // ✅ FIX: Detekovat, zda se skutečně něco změnilo (pořadí/šířky/viditelnost/pinning)
-        // Pokud se nic nezměnilo, SKIP celý handler (eliminuje zbytečné re-rendery při range selection)
+        // Detekce skutečné změny
         try {
-            if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
-                const currentColumnState = gridApiRef.current.getColumnState();
-                if (currentColumnState && Array.isArray(currentColumnState)) {
-                    // Porovnat s posledním známým stavem
-                    if (isColumnStateEqual(lastKnownColumnStateRef.current, currentColumnState)) {
-                        // Žádná změna - SKIP celý handler (nejčastější případ při range selection)
-                        return;
-                    }
-                    // Uložit nový stav jako referenci pro příští porovnání
-                    lastKnownColumnStateRef.current = currentColumnState;
-                    // Uložit šířky do ref map pro každý sloupec (pro API save a další načtení)
-                    currentColumnState.forEach(colState => {
-                        if (colState.colId && colState.width) {
-                            columnWidthRefsMap.current.set(colState.colId, colState.width);
-                        }
-                    });
-                    // NEPOUŽÍVÁME setColumnWidthsVersion zde - způsobilo by reset pořadí/šířek!
+            const currentColumnState = getColumnState(gridApiRef, columnApiRef);
+            if (currentColumnState && Array.isArray(currentColumnState)) {
+                if (isColumnStateEqual(lastKnownColumnStateRef.current, currentColumnState)) {
+                    return; // Žádná změna → skip
                 }
+                lastKnownColumnStateRef.current = currentColumnState;
+                currentColumnState.forEach(colState => {
+                    if (colState.colId && colState.width) {
+                        columnWidthRefsMap.current.set(colState.colId, colState.width);
+                    }
+                });
             }
         }
         catch (error) {
-            console.error('[GridLayout] Error updating columnWidthRefsMap in handleDragStopped:', error);
-        }
-        // OCHRANA: Pokud ještě není načten layout z API, přidáme akci do pending queue
-        // Pending actions se zpracují až po dokončení inicializace (načtení + aplikování layoutu)
-        if (!isInitializedRef.current && autoSaveRef.current) { // ✅ FIX #3+: Použít refs
-            setPendingActions((prev) => [
-                ...prev,
-                { type: 'dragStopped', timestamp: Date.now() },
-            ]);
+            console.error('[GridLayout] Chyba při detekci změn v handleDragStopped:', error);
+        }
+        hasUnsavedChangesRef.current = true; // ref only → žádný re-render
+        if (!isInitializedRef.current) {
+            const checkInterval = setInterval(() => {
+                if (isInitializedRef.current) {
+                    clearInterval(checkInterval);
+                    if (autoSaveRef.current && debouncedSaveRef.current) {
+                        debouncedSaveRef.current();
+                    }
+                }
+            }, 100);
+            setTimeout(() => clearInterval(checkInterval), 5000);
             return;
         }
-        // Uložit do API pouze pokud už je layout načten a aplikován
-        if (autoSaveRef.current && debouncedSaveRef.current) { // ✅ FIX #3+: Použít refs
+        if (autoSaveRef.current && debouncedSaveRef.current) {
             debouncedSaveRef.current();
         }
-    }, []); // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje
-    // Handler pro DOKONČENÍ resize - spouští auto-save
-    // DŮLEŽITÉ: Reaguje pouze na finished === true (po uvolnění myši)
+    }, []);
     const handleColumnResized = useCallback((event) => {
         if (!enabledRef.current || !isGridReadyRef.current)
-            return; // ✅ FIX #3+: Použít refs
-        // Reagujeme POUZE na dokončení resize operace (po uvolnění myši)
-        // To zabrání poskakování sloupců během tažení
+            return;
         if (!event || event.finished !== true)
             return;
-        setHasUnsavedChanges(true);
-        // Uložit aktuální šířky sloupců do ref map pro persistenci
-        // DŮLEŽITÉ: NEMĚNÍME columnWidthsVersion - AG-Grid už má správnou šířku ve svém interním stavu
-        // Změna columnWidthsVersion by triggerovala přepočet preTransformedColumnDefs a reset šířek
+        hasUnsavedChangesRef.current = true; // ref only → žádný re-render
         try {
-            if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
-                const currentColumnState = gridApiRef.current.getColumnState();
-                if (currentColumnState && Array.isArray(currentColumnState)) {
-                    // Uložit šířky do ref map pro každý sloupec (pro API save a další načtení)
-                    currentColumnState.forEach(colState => {
-                        if (colState.colId && colState.width) {
-                            columnWidthRefsMap.current.set(colState.colId, colState.width);
-                        }
-                    });
-                    // NEPOUŽÍVÁME setColumnWidthsVersion zde - způsobilo by reset šířek!
-                }
+            const currentColumnState = getColumnState(gridApiRef, columnApiRef);
+            if (currentColumnState && Array.isArray(currentColumnState)) {
+                currentColumnState.forEach(colState => {
+                    if (colState.colId && colState.width) {
+                        columnWidthRefsMap.current.set(colState.colId, colState.width);
+                    }
+                });
             }
         }
         catch (error) {
-            console.error('[GridLayout] Error updating columnWidthRefsMap in handleColumnResized:', error);
+            console.error('[GridLayout] Chyba při aktualizaci šířek v handleColumnResized:', error);
         }
-        // Spustit debounced save do API
-        // OCHRANA: Ukládáme pouze pokud už byl layout načten z API (isInitialized)
-        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) { // ✅ FIX #3+: Použít refs
+        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) {
             debouncedSaveRef.current();
         }
-    }, []); // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje
+    }, []);
     const handleColumnVisible = useCallback(() => {
         if (!enabledRef.current || !isGridReadyRef.current)
-            return; // ✅ FIX #3+: Použít refs místo přímých hodnot
-        setHasUnsavedChanges(true);
-        // OCHRANA: Ukládáme pouze pokud už byl layout načten z API (isInitialized)
-        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) { // ✅ FIX #3+: Použít refs
+            return;
+        hasUnsavedChangesRef.current = true; // ref only → žádný re-render
+        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) {
             debouncedSaveRef.current();
         }
-    }, []); // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje
+    }, []);
     const handleColumnPinned = useCallback(() => {
         if (!enabledRef.current || !isGridReadyRef.current)
-            return; // ✅ FIX #3+: Použít refs místo přímých hodnot
-        setHasUnsavedChanges(true);
-        // OCHRANA: Ukládáme pouze pokud už byl layout načten z API (isInitialized)
-        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) { // ✅ FIX #3+: Použít refs
+            return;
+        hasUnsavedChangesRef.current = true; // ref only → žádný re-render
+        if (autoSaveRef.current && isInitializedRef.current && debouncedSaveRef.current) {
             debouncedSaveRef.current();
         }
-    }, []); // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje
-    /**
-     * AG-Grid Ready handler
-     */
+    }, []);
+    // ==========================================================================
+    // AG-GRID READY HANDLER
+    // ==========================================================================
     const handleGridReady = useCallback((params) => {
-        if (!enabledRef.current) { // ✅ FIX #3+: Použít ref místo přímé hodnoty
+        if (!enabledRef.current)
             return;
-        }
         gridApiRef.current = params.api;
-        // AG Grid v31+ - columnApi je deprecated, všechny metody jsou v hlavním api
-        // Pokud columnApi neexistuje, použijeme main api jako fallback
         columnApiRef.current = params.columnApi || params.api;
-        // Okamžitě označíme grid jako připravený pro event handlery
         setIsGridReady(true);
-        // POZOR: Nenastavujeme isInitialized zde, protože by to zabránilo aplikování layoutu!
-        // isInitialized se nastaví až po aplikování layoutu v applySavedLayout
-    }, [] // ✅ FIX #3+: ŽÁDNÉ dependencies → handler se nikdy neregeneruje (savedFields, isInitialized, applySavedLayout se nepoužívají)
-    );
-    /**
-     * Effect pro aplikování layoutu při prvotním načtení savedFields
-     */
+    }, []);
+    // ==========================================================================
+    // EFFECTS
+    // ==========================================================================
     useEffect(() => {
-        // Aplikujeme layout pokud:
-        // 1. Máme savedFields z API (i když prázdné - první zobrazení modulu)
-        // 2. Grid je ready (má API references)  
-        // 3. Ještě jsme neinicializovali layout
         if (savedFields?.records !== undefined && gridApiRef.current && !isInitialized) {
             if (savedFields.records.length > 0) {
                 applySavedLayout();
             }
             else {
-                // Pro prázdné savedFields jen nastavíme inicializaci
                 setIsInitialized(true);
                 setIsGridReady(true);
             }
         }
     }, [savedFields?.records, isInitialized, applySavedLayout]);
-    /**
-     * Effect pro error handling
-     */
     useEffect(() => {
         if (fieldsError) {
             handleError(fieldsError, 'při načítání saved layoutu');
         }
     }, [fieldsError, handleError]);
-    /**
-     * Cleanup effect
-     */
-    useEffect(() => {
-        return () => {
-            debouncedSave.cancel();
-        };
-    }, [debouncedSave]);
-    /**
-     * Resetuje layout na default
-     */
+    // ==========================================================================
+    // MANUÁLNÍ AKCE (re-render je zde OK - explicitní uživatelská akce)
+    // ==========================================================================
     const resetToDefault = useCallback(async () => {
         if (!enabled)
             return;
-        // Ověříme dostupnost resetColumnState metody (AG Grid v31+ má ji v main API)
-        let resetColumnStateApi = null;
-        if (gridApiRef.current &&
-            typeof gridApiRef.current.resetColumnState === 'function') {
-            resetColumnStateApi = gridApiRef.current;
-        }
-        else if (columnApiRef.current &&
-            typeof columnApiRef.current.resetColumnState === 'function') {
-            resetColumnStateApi = columnApiRef.current;
-        }
-        else {
-            console.warn('[GridLayout] resetColumnState method not available');
+        const resetApi = getResetApi(gridApiRef, columnApiRef);
+        if (!resetApi)
             return;
-        }
         try {
             setIsLoading(true);
-            // Resetujeme AG-Grid na původní column definitions
-            resetColumnStateApi.resetColumnState();
-            // Pokud je autoSave zapnuté, uložíme resetovaný stav
+            resetApi.resetColumnState();
+            headerNameMapRef.current.clear();
             if (autoSave) {
                 await saveCurrentLayout();
             }
             else {
-                setHasUnsavedChanges(true);
+                hasUnsavedChangesRef.current = true;
             }
         }
         catch (error) {
@@ -848,31 +537,25 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             setIsLoading(false);
         }
     }, [enabled, autoSave, saveCurrentLayout, handleError]);
-    /**
-     * Manuální uložení
-     */
     const saveLayout = useCallback(async () => {
         await saveCurrentLayout();
     }, [saveCurrentLayout]);
-    /**
-     * Manuální reload
-     */
     const reloadLayout = useCallback(async () => {
         try {
-            // Save a reference to the current grid API before resetting states
-            const savedGridApiRef = gridApiRef.current;
-            const savedColumnApiRef = columnApiRef.current;
+            const savedGridApi = gridApiRef.current;
+            const savedColumnApi = columnApiRef.current;
+            // Reset zámku - při reloadu chceme přepočítat preTransformedColumnDefs
+            lockedColumnDefsRef.current = null;
             setIsInitialized(false);
             setIsGridReady(false);
-            await refetchFields();
-            // Restore saved references if they were lost during the reload process
-            if (!gridApiRef.current && savedGridApiRef) {
-                gridApiRef.current = savedGridApiRef;
+            const freshData = await refetchFields();
+            if (!gridApiRef.current && savedGridApi)
+                gridApiRef.current = savedGridApi;
+            if (!columnApiRef.current && savedColumnApi)
+                columnApiRef.current = savedColumnApi;
+            if (freshData?.data?.records) {
+                setFrozenSavedRecords(freshData.data.records);
             }
-            if (!columnApiRef.current && savedColumnApiRef) {
-                columnApiRef.current = savedColumnApiRef;
-            }
-            // Po refetch dat obnovíme oba stavy (layout je už v DB)
             setIsInitialized(true);
             setIsGridReady(true);
         }
@@ -880,35 +563,15 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             handleError(error, 'při reload layoutu');
         }
     }, [refetchFields, handleError]);
-    /**
-     * Získá aktuální column state pro Column Editor
-     */
+    // ==========================================================================
+    // COLUMN EDITOR
+    // ==========================================================================
     const getCurrentColumnsForEditor = useCallback(() => {
-        // Zajistíme, že máme validní columnDefs
         const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
         try {
-            let currentColumnState = null;
-            // Pokusíme se získat column state s různými fallbacky pro AG Grid v31+
-            if (gridApiRef.current &&
-                typeof gridApiRef.current.getColumnState === 'function') {
-                // AG Grid v31+ - getColumnState je přímo v main API
-                currentColumnState = gridApiRef.current.getColumnState();
-            }
-            else if (columnApiRef.current &&
-                typeof columnApiRef.current.getColumnState === 'function') {
-                // Starší verze AG Grid - getColumnState je v columnApi
-                currentColumnState = columnApiRef.current.getColumnState();
-            }
-            else {
-                throw new Error('getColumnState method is not available on gridApiRef or columnApiRef');
-            }
-            if (!Array.isArray(currentColumnState) ||
-                currentColumnState.length === 0) {
-                // Fallback pokud getColumnState() nevrátí validní array
-                if (lastKnownColumnState) {
-                    return lastKnownColumnState;
-                }
-                const defaultColumns = validColumnDefs.map((col, index) => ({
+            const currentColumnState = getColumnState(gridApiRef, columnApiRef);
+            if (!Array.isArray(currentColumnState) || currentColumnState.length === 0) {
+                return validColumnDefs.map((col, index) => ({
                     id: col.field,
                     field: col.field,
                     headerName: col.headerName || col.field,
@@ -917,265 +580,207 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                     originalWidth: col.width || 100,
                     visible: !col.hide,
                     order: index,
-                    originalOrder: index, // Původní pořadí z columnDefs
+                    originalOrder: index,
                 }));
-                // POZN: Neukládáme do state, aby nedocházelo k infinite loop
-                return defaultColumns;
             }
-            const result = currentColumnState.map((columnStateItem, index) => {
-                // Najdeme odpovídající column definition podle colId (zohledníme field i colId)
-                const colDef = validColumnDefs.find((cd) => cd.field === columnStateItem.colId ||
-                    cd.colId === columnStateItem.colId) || {};
-                // Pokusíme se najít saved hodnotu pro headerName
+            return currentColumnState.map((columnStateItem, index) => {
+                const colDef = validColumnDefs.find((cd) => cd.field === columnStateItem.colId || cd.colId === columnStateItem.colId) || {};
                 const savedField = savedFields?.records?.find((sf) => sf.fieldName === columnStateItem.colId);
-                // Najdeme původní index z columnDefs
+                const headerName = headerNameMapRef.current.get(columnStateItem.colId) ||
+                    savedField?.headerName ||
+                    colDef.headerName ||
+                    columnStateItem.colId;
                 const originalIndex = validColumnDefs.findIndex((cd) => (cd.field || cd.colId) === columnStateItem.colId);
                 return {
                     id: columnStateItem.colId,
                     field: columnStateItem.colId,
-                    headerName: savedField?.headerName ||
-                        colDef.headerName ||
-                        columnStateItem.colId,
-                    // Původní headerName z columnDefs (ne z uložených uživatelských preferencí)
+                    headerName,
                     originalHeaderName: colDef.headerName || columnStateItem.colId,
                     width: columnStateItem.width || colDef.width || 100,
                     originalWidth: colDef.width || 100,
                     visible: !columnStateItem.hide,
                     order: index,
-                    originalOrder: originalIndex !== -1 ? originalIndex : index, // Původní pořadí z columnDefs
+                    originalOrder: originalIndex !== -1 ? originalIndex : index,
                 };
             });
-            // POZN: Neukládáme do state, aby nedocházelo k infinite loop
-            // Tato aktualizace proběhne v useEffect
-            return result;
         }
         catch (error) {
-            console.error('[GridLayout] Error in getCurrentColumnsForEditor:', error);
-            // Použijeme lastKnownColumnState, pokud existuje
-            if (lastKnownColumnState) {
-                return lastKnownColumnState;
-            }
-            // Poslední fallback na columnDefs
-            const defaultColumns = validColumnDefs.map((col, index) => ({
+            console.error('[GridLayout] Chyba v getCurrentColumnsForEditor:', error);
+            return validColumnDefs.map((col, index) => ({
                 id: col.field || col.colId,
                 field: col.field || col.colId,
                 headerName: col.headerName || col.field || col.colId,
-                // Vždy používáme původní definici jako referenci pro porovnání
                 originalHeaderName: col.headerName || col.field || col.colId,
                 width: col.width || 100,
                 originalWidth: col.width || 100,
                 visible: !col.hide,
                 order: index,
-                originalOrder: index, // Původní pořadí z columnDefs
+                originalOrder: index,
             }));
-            // POZN: Neukládáme do state, aby nedocházelo k infinite loop
-            return defaultColumns;
         }
-    }, [columnDefs, savedFields, lastKnownColumnState]);
-    /**
-     * Otevře Column Editor modal
-     */
+    }, [columnDefs, savedFields]);
     const openColumnEditor = useCallback(() => {
-        // Před otevřením editoru si pouze zaznamenáme, že chceme aktualizovat stav sloupců
-        // Samotná aktualizace proběhne v useEffect, ne během renderu
         setIsColumnEditorOpen(true);
     }, []);
-    /**
-     * Zavře Column Editor modal
-     */
     const closeColumnEditor = useCallback(() => {
         setIsColumnEditorOpen(false);
     }, []);
-    /**
-     * Uloží změny z Column Editoru
-     * @param {Array} editedColumns - Editované sloupce z modalu
-     */
     const saveColumnEditorChanges = async (editedColumns) => {
         if (!enabled)
             return;
         try {
             setIsLoading(true);
-            setIsSaving(true);
-            // Filtrujeme pouze validní sloupce (s definovaným field)
-            const validColumns = editedColumns.filter((col) => col.field && col.field !== undefined);
-            // Připravíme UserFields pro API podle C# SaveUserFieldModel struktury
+            isSavingRef.current = true;
+            const validColumns = editedColumns.filter(col => col.field && col.field !== undefined);
             const completeUserFields = validColumns.map((col, index) => ({
-                Id: 0, // Nové pole má ID = 0, existující budou mít správné ID z API
+                Id: 0,
                 UserKey: userKey,
                 ApplicationName: applicationName,
                 GridName: gridName,
                 FilterName: filterName || null,
                 FieldName: col.field,
                 HeaderName: col.headerName || col.field,
-                Order: index, // Pořadí podle pozice v editedColumns
+                Order: index,
                 Show: col.visible,
-                Width: col.width != null ? col.width : null, // Zachováváme i nulovou šířku
+                Width: col.width != null ? col.width : null,
                 System: false,
             }));
-            // Uložení do API
-            gridLayoutApi
-                .saveGridLayout(completeUserFields)
-                .then((result) => {
-                if (result.success) {
-                    setHasUnsavedChanges(false);
-                    // Znovunačtení layoutu z API a aplikování na grid
-                    reloadLayout().then(async () => {
-                        // Po reloadLayout() počkáme na aktualizaci savedFields a aplikujeme layout
-                        try {
-                            // Znovu načteme fieldy pro zajištění synchronizace
-                            const freshFields = await refetchFields();
-                            setTimeout(() => {
-                                if (gridApiRef.current && freshFields?.data?.records) {
-                                    // Aplikujeme layout s novými daty
-                                    const columnState = gridLayoutApi.transformFieldsToColumnState(freshFields.data.records, columnDefs);
-                                    if (columnState && columnState.length > 0) {
-                                        // Najdeme správné API pro applyColumnState
-                                        let applyColumnStateApi = null;
-                                        if (gridApiRef.current?.applyColumnState) {
-                                            applyColumnStateApi = gridApiRef.current;
-                                        }
-                                        else if (columnApiRef.current?.applyColumnState) {
-                                            applyColumnStateApi = columnApiRef.current;
-                                        }
-                                        if (applyColumnStateApi) {
-                                            applyColumnStateApi.applyColumnState({
-                                                state: columnState,
-                                                applyOrder: true,
-                                                defaultState: {
-                                                    sort: null,
-                                                    sortIndex: null,
-                                                    pivot: null,
-                                                    rowGroup: null,
-                                                },
-                                            });
-                                            // Aktualizujeme headerName pro každý sloupec
-                                            const headerNameMap = new Map();
-                                            freshFields.data.records.forEach((field) => {
-                                                if (field.fieldName && field.headerName) {
-                                                    headerNameMap.set(field.fieldName, field.headerName);
+            // Aktualizace headerName ref mapy
+            validColumns.forEach(col => {
+                if (col.field && col.headerName) {
+                    headerNameMapRef.current.set(col.field, col.headerName);
+                }
+            });
+            const result = await gridLayoutApi.saveGridLayout(completeUserFields);
+            if (result.success) {
+                hasUnsavedChangesRef.current = false;
+                try {
+                    const freshFields = await refetchFields();
+                    // Reset zámku a aktualizace frozenSavedRecords → uvolní zámek v preTransformedColumnDefs
+                    lockedColumnDefsRef.current = null;
+                    if (freshFields?.data?.records) {
+                        setFrozenSavedRecords(freshFields.data.records);
+                    }
+                    // Aplikujeme nový layout na grid
+                    setTimeout(() => {
+                        if (gridApiRef.current && freshFields?.data?.records) {
+                            const columnState = gridLayoutApi.transformFieldsToColumnState(freshFields.data.records, columnDefs);
+                            if (columnState && columnState.length > 0) {
+                                const applyApi = getApplyApi(gridApiRef, columnApiRef);
+                                if (applyApi) {
+                                    // KROK 1: Aktualizace headerName
+                                    try {
+                                        const currentColDefs = gridApiRef.current.getColumnDefs?.();
+                                        if (currentColDefs && Array.isArray(currentColDefs)) {
+                                            const updatedColDefs = currentColDefs.map(colDef => {
+                                                const fieldName = colDef.field;
+                                                const newName = headerNameMapRef.current.get(fieldName);
+                                                if (newName && colDef.headerName !== newName) {
+                                                    return { ...colDef, headerName: newName };
                                                 }
+                                                return colDef;
                                             });
-                                            // Aplikujeme nové headerName hodnoty přes DOM
-                                            setTimeout(() => {
-                                                try {
-                                                    const headerCells = document.querySelectorAll('.ag-header-cell');
-                                                    headerCells.forEach((headerCell) => {
-                                                        const colId = headerCell.getAttribute('col-id');
-                                                        if (colId && headerNameMap.has(colId)) {
-                                                            const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-                                                            if (headerTextEl) {
-                                                                headerTextEl.textContent = headerNameMap.get(colId);
-                                                            }
-                                                        }
-                                                    });
-                                                    // Vynutíme refresh hlavičky
-                                                    if (gridApiRef.current?.refreshHeader) {
-                                                        gridApiRef.current.refreshHeader();
-                                                    }
-                                                }
-                                                catch (headerError) {
-                                                    console.error('[GridLayout] Error updating headers:', headerError);
-                                                }
-                                            }, 50);
+                                            if (typeof gridApiRef.current.setColumnDefs === 'function') {
+                                                gridApiRef.current.setColumnDefs(updatedColDefs);
+                                            }
                                         }
                                     }
+                                    catch (e) {
+                                        console.error('[GridLayout] Chyba při aktualizaci headerName v editoru:', e);
+                                    }
+                                    // KROK 2: Aplikovat column state
+                                    applyApi.applyColumnState({
+                                        state: columnState,
+                                        applyOrder: true,
+                                        defaultState: { sort: null, sortIndex: null, pivot: null, rowGroup: null },
+                                    });
+                                    try {
+                                        gridApiRef.current?.refreshHeader?.();
+                                    }
+                                    catch (e) { /* ignorujeme */ }
                                 }
-                            }, 150);
-                        }
-                        catch (refreshError) {
-                            console.error('[GridLayout] Error in post-save refresh:', refreshError);
-                            // Fallback na standardní applySavedLayout
-                            setTimeout(() => {
-                                if (gridApiRef.current) {
-                                    applySavedLayout(true);
-                                }
-                            }, 200);
+                            }
                         }
-                    });
-                    if (onLayoutSaved) {
-                        onLayoutSaved(completeUserFields);
-                    }
+                    }, 150);
                 }
-            })
-                .catch((error) => {
-                handleError(error, 'při ukládání změn z Column Editoru');
-            });
+                catch (refreshError) {
+                    console.error('[GridLayout] Chyba při obnově po uložení z editoru:', refreshError);
+                    setTimeout(() => {
+                        if (gridApiRef.current)
+                            applySavedLayout(true);
+                    }, 200);
+                }
+                if (onLayoutSaved) {
+                    onLayoutSaved(completeUserFields);
+                }
+            }
         }
         catch (error) {
             handleError(error, 'při ukládání změn z Column Editoru');
         }
         finally {
             setIsLoading(false);
-            setIsSaving(false);
+            isSavingRef.current = false;
         }
     };
-    //, [enabled, gridLayoutApi, onLayoutSaved, handleError, userKey, applicationName, gridName, filterName, reloadLayout]);
-    // Logika pro zobrazení columnDefs
+    // ==========================================================================
+    // PRE-TRANSFORMED COLUMN DEFS
+    // ZAMKNUTÍ PO INICIALIZACI → stabilní reference, žádné zbytečné přepočty
+    // ==========================================================================
     const shouldShowColumns = useMemo(() => {
         if (!waitForSavedFields)
-            return true; // Pokud není waitForSavedFields, vždy zobrazuj
-        // Pokud je waitForSavedFields true, čekáme na dokončení načítání
+            return true;
         return !isFieldsLoading && !isLoading;
     }, [waitForSavedFields, isFieldsLoading, isLoading]);
-    // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
-    // DŮLEŽITÉ: Toto useMemo nyní obsahuje i AgGridColumns transformaci pro eliminaci circular dependency
     const preTransformedColumnDefs = useMemo(() => {
-        // Použijeme aktualizované columnDefs ze stableColumnDefsRef pokud existují
-        const columnDefsToUse = stableColumnDefsRef.current; // || columnDefs; //HLO
+        // ── ZÁMEK: Po inicializaci vrátíme zamknutou referenci ──
+        // Zámek se uvolní jen při: změně columnDefs od parenta, frozenSavedRecords (editor/reload)
+        // Tím se zabrání tomu, aby AG-Grid dostal nové columnDefs při jakémkoliv re-renderu
+        if (isInitialized
+            && lockedColumnDefsRef.current
+            && lockedForColumnDefsRef.current === columnDefs
+            && lockedForFrozenRecordsRef.current === frozenSavedRecords) {
+            return lockedColumnDefsRef.current;
+        }
+        // ── Normální výpočet ──
+        const columnDefsToUse = stableColumnDefsRef.current;
         let baseColumnDefs = columnDefsToUse;
-        // Pro waitForSavedFields aplikujeme grid layout transformace
-        if (waitForSavedFields &&
-            savedFields?.records &&
-            Array.isArray(columnDefsToUse)) {
-            // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
-            const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
+        // Pro waitForSavedFields: seřadíme columnDefs podle frozenSavedRecords
+        if (waitForSavedFields && frozenSavedRecords && Array.isArray(columnDefsToUse)) {
+            const columnState = gridLayoutApi.transformFieldsToColumnState(frozenSavedRecords, columnDefsToUse);
             if (columnState && columnState.length > 0) {
-                // Vytvoříme mapu pro rychlé vyhledávání
                 const columnStateMap = new Map();
                 columnState.forEach((colState, index) => {
                     columnStateMap.set(colState.colId, { ...colState, __order: index });
                 });
-                // Vytvoříme mapu fieldName -> headerName z API dat
                 const headerNameMap = new Map();
-                savedFields.records.forEach((field) => {
+                frozenSavedRecords.forEach(field => {
                     if (field.fieldName && field.headerName) {
                         headerNameMap.set(field.fieldName, field.headerName);
                     }
                 });
-                // Seřadíme columnDefs podle pořadí z columnState a upravíme headerName podle savedFields
                 baseColumnDefs = [...columnDefsToUse]
                     .sort((a, b) => {
                     const fieldA = a.field || a.colId;
                     const fieldB = b.field || b.colId;
-                    const aState = columnStateMap.get(fieldA);
-                    const bState = columnStateMap.get(fieldB);
-                    const aOrder = aState?.__order ?? 999;
-                    const bOrder = bState?.__order ?? 999;
+                    const aOrder = columnStateMap.get(fieldA)?.__order ?? 999;
+                    const bOrder = columnStateMap.get(fieldB)?.__order ?? 999;
                     return aOrder - bOrder;
                 })
-                    .map((colDef) => {
+                    .map(colDef => {
                     const fieldId = colDef.field || colDef.colId;
                     const columnStateItem = columnStateMap.get(fieldId);
-                    // Aplikujeme headerName, hide i width z API pro waitForSavedFields režim
-                    if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
-                        return {
-                            ...colDef,
-                            // Aplikujeme headerName z savedFields
-                            ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
-                            // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
-                            ...(columnStateItem && { hide: columnStateItem.hide }),
-                            // Aplikujeme také width pro konzistentní zobrazení
-                            ...(columnStateItem && columnStateItem.width && { width: columnStateItem.width }),
-                        };
-                    }
-                    return colDef;
+                    return {
+                        ...colDef,
+                        ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
+                        ...(columnStateItem && { hide: columnStateItem.hide }),
+                        ...(columnStateItem?.width && { width: columnStateItem.width }),
+                    };
                 });
             }
         }
-        // Nyní VŽDY aplikujeme AgGridColumns transformaci PŘÍMO zde místo v props
-        // Tím eliminujeme circular dependency pro všechny případy použití
+        // Konverze ColumnBuilder na array
         if (!Array.isArray(baseColumnDefs)) {
-            // Pokud baseColumnDefs není array, mohlo by to být ColumnBuilder
             if (baseColumnDefs && typeof baseColumnDefs.build === 'function') {
                 baseColumnDefs = baseColumnDefs.build();
             }
@@ -1183,62 +788,47 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                 return [];
             }
         }
-        // Aplikujeme ref šířky jako poslední krok POUZE pokud už byla provedena inicializace
-        // Při prvotním načítání zachováváme API šířky (které jsou už v baseColumnDefs pro waitForSavedFields)
+        // Aplikace ref šířek (POUZE po inicializaci)
         const finalColumnDefs = baseColumnDefs.map(colDef => {
             const fieldId = colDef.field || colDef.colId;
             const refWidth = columnWidthRefsMap.current.get(fieldId);
-            // Použijeme ref šířku POUZE pokud už je grid inicializovaný (uživatel manipuloval s šířkami)
             if (refWidth !== undefined && isInitialized) {
-                return {
-                    ...colDef,
-                    width: refWidth
-                };
+                return { ...colDef, width: refWidth };
             }
             return colDef;
         });
+        // ── Zamknout po inicializaci ──
+        if (isInitialized) {
+            lockedColumnDefsRef.current = finalColumnDefs;
+            lockedForColumnDefsRef.current = columnDefs;
+            lockedForFrozenRecordsRef.current = frozenSavedRecords;
+        }
         return finalColumnDefs;
-        // // Replikujeme AgGridColumns logiku pro všechny column definitions:
-        // const processedColumns = baseColumnDefs?.map((column) => {
-        //   // Zkopírujeme column aby se předešlo mutacím
-        //   const processedColumn = { ...column };
-        //   // Aplikujeme tooltip logiku pokud je potřeba
-        //   if (processedColumn.contentTooltip) {
-        //     // Statické mapování tooltipů pro lepší performance a eliminaci circular dependency
-        //     switch (processedColumn.contentTooltip) {
-        //       case 'User':
-        //         processedColumn.tooltipComponent = Tooltip.User;
-        //         break;
-        //       default:
-        //         console.warn(`[GridLayout] Unknown tooltip component: ${processedColumn.contentTooltip}`);
-        //     }
-        //   }
-        //   return processedColumn;
-        // }) || [];
-        // return processedColumns;
-    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnWidthsVersion, isInitialized]);
-    // ✅ FIX #10: NEPOUŽÍVAT memoizaci - spoléháme se na refs v Grid komponentě
-    // Memoizace s dependencies způsobuje rerender při změně JAKÉKOLIV hodnoty (např. hasUnsavedChanges)
-    // Refs v Grid komponentě zajišťují, že i když se tento objekt změní, Grid nevidí změnu
+    }, [waitForSavedFields, frozenSavedRecords, columnDefs, gridLayoutApi, columnWidthsVersion, isInitialized]);
+    // ==========================================================================
+    // RETURN - API interface
+    // Pozadí hodnoty se čtou z refs (aktuální hodnota v okamžiku renderu)
+    // ==========================================================================
     return {
-        // State
+        // State (re-render pouze při explicitních akcích)
         isLoading: isLoading || isFieldsLoading,
-        isSaving,
-        isApplyingLayout,
         error,
-        hasUnsavedChanges,
         isInitialized,
         isGridReady,
         shouldShowColumns,
         preTransformedColumnDefs,
-        // AG-Grid event handlers (stabilní díky prázdným dependencies)
+        // Refs čtené při renderu (ŽÁDNÝ re-render při změně)
+        isSaving: isSavingRef.current,
+        hasUnsavedChanges: hasUnsavedChangesRef.current,
+        isApplyingLayout: isApplyingLayoutRef.current,
+        // AG-Grid event handlers (stabilní - prázdné deps)
         onGridReady: handleGridReady,
         onColumnMoved: handleColumnMoved,
         onDragStopped: handleDragStopped,
         onColumnResized: handleColumnResized,
         onColumnVisible: handleColumnVisible,
         onColumnPinned: handleColumnPinned,
-        // Manual actions (stabilní)
+        // Manuální akce
         saveLayout,
         resetToDefault,
         reloadLayout,