@dmsi/wedgekit-react 0.0.922 → 0.0.987

package/dist/components/index.css

@@ -2144,9 +2144,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
@@ -2309,6 +2306,10 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
+  .font-normal\! {
+    --tw-font-weight: var(--font-weight-normal) !important;
+    font-weight: var(--font-weight-normal) !important;
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -3177,6 +3178,13 @@
       }
     }
   }
+  .hover\:border-border-primary-normal {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-primary-normal);
+      }
+    }
+  }
   .hover\:\!bg-background-action-primary-normal {
     &:hover {
       @media (hover: hover) {
@@ -3240,6 +3248,13 @@
       }
     }
   }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:\!text-brand-text-on-action-primary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3317,6 +3332,13 @@
       }
     }
   }
+  .hover\:text-text-primary-normal {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-primary-normal);
+      }
+    }
+  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -3361,6 +3383,11 @@
       border-color: var(--color-border-action-hover);
     }
   }
+  .focus\:border-border-primary-normal {
+    &:focus {
+      border-color: var(--color-border-primary-normal);
+    }
+  }
   .focus\:bg-background-action-critical-primary-hover {
     &:focus {
       background-color: var(--color-background-action-critical-primary-hover);
@@ -3386,6 +3413,11 @@
       background-color: var(--color-background-grouped-secondary-normal);
     }
   }
+  .focus\:bg-transparent {
+    &:focus {
+      background-color: transparent;
+    }
+  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3396,6 +3428,11 @@
       color: var(--color-text-action-primary-hover);
     }
   }
+  .focus\:text-text-primary-normal {
+    &:focus {
+      color: var(--color-text-primary-normal);
+    }
+  }
   .focus\:outline-0 {
     &:focus {
       outline-style: var(--tw-outline-style);
@@ -3531,6 +3568,11 @@
       background-color: var(--color-background-action-secondary-active);
     }
   }
+  .active\:bg-transparent {
+    &:active {
+      background-color: transparent;
+    }
+  }
   .active\:\!text-brand-text-on-action-primary-active {
     &:active {
       color: var(--color-brand-text-on-action-primary-active) !important;
@@ -3581,6 +3623,11 @@
       color: var(--color-text-link-active);
     }
   }
+  .active\:text-text-primary-active {
+    &:active {
+      color: var(--color-text-primary-active);
+    }
+  }
   .active\:text-white {
     &:active {
       color: var(--color-white);
@@ -4599,6 +4646,11 @@
       padding-right: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:pb-3 {
+    @container root (width >= 48rem) {
+      padding-bottom: calc(var(--spacing) * 3);
+    }
+  }
   .desktop\:pb-desktop-component-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-component-padding);

package/dist/components/index.js

@@ -2,9 +2,9 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-YYRFXTO7.js";
-import "../chunk-LFBTRFTS.js";
-import "../chunk-VABOQRYA.js";
+} from "../chunk-RLJU65SD.js";
+import "../chunk-2UNLVJU5.js";
+import "../chunk-POZD6R3P.js";
 import "../chunk-M7INAUAJ.js";
 import {
   ProductImagePreview
@@ -19,13 +19,13 @@ import {
 } from "../chunk-Y5GD2FJA.js";
 import {
   EmblaCarousel
-} from "../chunk-ZACRFGND.js";
-import "../chunk-EJVCDJ7U.js";
-import "../chunk-27DJTEAB.js";
+} from "../chunk-NBTWFTSF.js";
+import "../chunk-HDFO56DN.js";
+import "../chunk-MB6IRHTN.js";
 import {
   useGridContext
 } from "../chunk-5IFPG6TS.js";
-import "../chunk-XWYDWH4W.js";
+import "../chunk-HTICQWRA.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-7IPESTQS.js";
 import "../chunk-Z2HPSFEQ.js";
@@ -49,11 +49,11 @@ import {
 import {
   Tooltip
 } from "../chunk-HT57FLRW.js";
-import "../chunk-N36EJLRW.js";
+import "../chunk-JZZ4LF6B.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-UUKHQUSF.js";
+import "../chunk-F6QO73TV.js";
 import "../chunk-WVVEOCEH.js";
-import "../chunk-2EAVEFWY.js";
+import "../chunk-WHWZ5VVQ.js";
 import "../chunk-E7LGUC2B.js";
 import "../chunk-QVWYTQKL.js";
 import {
@@ -95,10 +95,10 @@ import {
 import {
   CompactImagesPreview
 } from "../chunk-FXHH2K6I.js";
-import "../chunk-WOWPMA26.js";
+import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-F7F5BKW5.js";
+import "../chunk-TBZ243DS.js";
 import "../chunk-5UH6QUFB.js";
 import {
   AccessCard
@@ -119,11 +119,11 @@ import {
 } from "../chunk-F4VE3THQ.js";
 import {
   Alert
-} from "../chunk-NGXKXYB5.js";
+} from "../chunk-6FZNEFN3.js";
 import "../chunk-MXSJF6TW.js";
 import {
   Button
-} from "../chunk-BMAZBFUU.js";
+} from "../chunk-ZMTHWJ7F.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-BGBIXG5Y.js";
 import {

package/dist/components/useMenuSystem.cjs

@@ -62,12 +62,15 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout/useTableLayout.ts
+var import_react4 = require("react");
+
 // src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.4`;
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
 
-// src/hooks/useTableLayout.ts
-var import_react4 = require("react");
-var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
+// src/hooks/useTableLayout/storage.ts
+var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
+var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
 
 // src/hooks/useEditCell.tsx
 var import_react5 = require("react");

package/dist/components/useMenuSystem.js

@@ -3,10 +3,10 @@ import {
   useMenuPosition,
   useSubMenuSystem
 } from "../chunk-PE3EZP56.js";
-import "../chunk-WOWPMA26.js";
+import "../chunk-ZRFXUER3.js";
 import "../chunk-WVGXD7HT.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-F7F5BKW5.js";
+import "../chunk-TBZ243DS.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/hooks/index.cjs

@@ -119,99 +119,372 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
-// src/utils/mergeObjectArrays.ts
-function mergeObjectArrays(arr1, arr2) {
-  const arr2Map = /* @__PURE__ */ new Map();
-  for (const item of arr2) {
-    const id = item.id;
-    if (id !== void 0) {
-      arr2Map.set(id, item);
+// src/hooks/useTableLayout/useTableLayout.ts
+var import_react4 = require("react");
+
+// src/utils/index.ts
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
+
+// src/hooks/useTableLayout/storage.ts
+var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
+var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
+var CURRENT_SCHEMA_VERSION = 2;
+function getStorageKey(key) {
+  return `${STORAGE_PREFIX}__${key}`;
+}
+function getLegacyStorageKey(key) {
+  return `${LEGACY_STORAGE_PREFIX}__${key}-tableLayout`;
+}
+function loadPreferences(key) {
+  const storageKey = getStorageKey(key);
+  const legacyKey = getLegacyStorageKey(key);
+  const newData = localStorage.getItem(storageKey);
+  if (newData) {
+    try {
+      const parsed = JSON.parse(newData);
+      if (parsed.version === CURRENT_SCHEMA_VERSION) {
+        return parsed;
+      }
+      localStorage.removeItem(storageKey);
+    } catch (e) {
+      localStorage.removeItem(storageKey);
     }
   }
-  return arr1.map((item1) => {
-    const id = item1.id;
-    if (id !== void 0 && arr2Map.has(id)) {
-      const item2 = arr2Map.get(id);
-      const meta1 = item1.meta;
-      const meta2 = item2.meta;
-      const mergedMeta = meta1 && meta2 && typeof meta1 === "object" && typeof meta2 === "object" ? __spreadValues(__spreadValues({}, meta1), meta2) : meta2 != null ? meta2 : meta1;
-      return __spreadProps(__spreadValues(__spreadValues({}, item1), item2), { meta: mergedMeta });
+  const legacyData = localStorage.getItem(legacyKey);
+  if (legacyData) {
+    localStorage.removeItem(legacyKey);
+  }
+  return null;
+}
+function savePreferences(key, preferences) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const storageKey = getStorageKey(key);
+  const hasPreferences = ((_b = (_a = preferences.columnOrder) == null ? void 0 : _a.length) != null ? _b : 0) > 0 || ((_d = (_c = preferences.hiddenByUser) == null ? void 0 : _c.length) != null ? _d : 0) > 0 || ((_f = (_e = preferences.shownByUser) == null ? void 0 : _e.length) != null ? _f : 0) > 0 || Object.keys((_g = preferences.columnWidths) != null ? _g : {}).length > 0;
+  if (!hasPreferences) {
+    localStorage.removeItem(storageKey);
+    return;
+  }
+  const data = __spreadProps(__spreadValues({}, preferences), {
+    version: CURRENT_SCHEMA_VERSION
+  });
+  localStorage.setItem(storageKey, JSON.stringify(data));
+}
+function clearPreferences(key) {
+  const storageKey = getStorageKey(key);
+  const legacyKey = getLegacyStorageKey(key);
+  localStorage.removeItem(storageKey);
+  localStorage.removeItem(legacyKey);
+}
+function clearAllLegacyData() {
+  if (typeof window === "undefined") return;
+  const keysToRemove = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if ((key == null ? void 0 : key.includes("-tableLayout__")) && key.endsWith("-tableLayout")) {
+      keysToRemove.push(key);
     }
-    return item1;
+  }
+  keysToRemove.forEach((key) => {
+    localStorage.removeItem(key);
   });
 }
+function hasPerformedLegacyMigration() {
+  if (typeof window === "undefined") return true;
+  return localStorage.getItem(`${STORAGE_PREFIX}__migrated`) === "true";
+}
+function markLegacyMigrationComplete() {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(`${STORAGE_PREFIX}__migrated`, "true");
+}
 
-// src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.4`;
+// src/hooks/useTableLayout/computeColumns.ts
+function computeColumnVisibility(column, preferences) {
+  var _a, _b, _c, _d, _e, _f;
+  const columnId = column.id;
+  if (!columnId) return true;
+  const systemVisible = (_b = (_a = column.meta) == null ? void 0 : _a.visible) != null ? _b : true;
+  const canUserToggle = (_d = (_c = column.meta) == null ? void 0 : _c.inVisibilityMenu) != null ? _d : true;
+  if (!canUserToggle) {
+    return systemVisible;
+  }
+  if (preferences) {
+    if ((_e = preferences.hiddenByUser) == null ? void 0 : _e.includes(columnId)) {
+      return false;
+    }
+    if ((_f = preferences.shownByUser) == null ? void 0 : _f.includes(columnId)) {
+      return true;
+    }
+  }
+  return systemVisible;
+}
+function applyPreferencesToColumns(systemColumns, preferences) {
+  var _a;
+  let columns = systemColumns.map((col) => __spreadProps(__spreadValues({}, col), {
+    meta: __spreadProps(__spreadValues({}, col.meta), {
+      // Compute visibility based on system + user preferences
+      visible: computeColumnVisibility(col, preferences)
+    })
+  }));
+  if ((_a = preferences == null ? void 0 : preferences.columnOrder) == null ? void 0 : _a.length) {
+    const orderMap = new Map(
+      preferences.columnOrder.map((id, index) => [id, index])
+    );
+    columns = columns.sort((a, b) => {
+      var _a2, _b;
+      const orderA = (_a2 = orderMap.get(a.id)) != null ? _a2 : Number.MAX_SAFE_INTEGER;
+      const orderB = (_b = orderMap.get(b.id)) != null ? _b : Number.MAX_SAFE_INTEGER;
+      if (orderA === Number.MAX_SAFE_INTEGER && orderB === Number.MAX_SAFE_INTEGER) {
+        return 0;
+      }
+      return orderA - orderB;
+    });
+  }
+  if (preferences == null ? void 0 : preferences.columnWidths) {
+    columns = columns.map((col) => {
+      var _a2;
+      const width = col.id ? (_a2 = preferences.columnWidths) == null ? void 0 : _a2[col.id] : void 0;
+      if (width !== void 0) {
+        return __spreadProps(__spreadValues({}, col), {
+          size: width
+        });
+      }
+      return col;
+    });
+  }
+  return columns;
+}
+function extractColumnOrder(columns) {
+  return columns.filter((c) => c.id).map((c) => c.id);
+}
+function extractVisibilityChanges(columns, systemColumns) {
+  const hiddenByUser = [];
+  const shownByUser = [];
+  columns.forEach((col) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!col.id) return;
+    const systemCol = systemColumns.find((c) => c.id === col.id);
+    if (!systemCol) return;
+    const systemVisible = (_b = (_a = systemCol.meta) == null ? void 0 : _a.visible) != null ? _b : true;
+    const currentVisible = (_d = (_c = col.meta) == null ? void 0 : _c.visible) != null ? _d : true;
+    const canToggle = (_f = (_e = systemCol.meta) == null ? void 0 : _e.inVisibilityMenu) != null ? _f : true;
+    if (!canToggle) return;
+    if (systemVisible && !currentVisible) {
+      hiddenByUser.push(col.id);
+    } else if (!systemVisible && currentVisible) {
+      if (((_g = systemCol.meta) == null ? void 0 : _g.inVisibilityMenu) !== false) {
+        shownByUser.push(col.id);
+      }
+    }
+  });
+  return { hiddenByUser, shownByUser };
+}
 
-// src/hooks/useTableLayout.ts
-var import_react4 = require("react");
-var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
-var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
+// src/hooks/useTableLayout/useTableLayout.ts
+var hasCleanedLegacyDataThisSession = false;
 function useTableLayout(initialColumns, key, autosync = true) {
-  const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
+  const [preferences, setPreferences] = (0, import_react4.useState)(null);
+  const [columns, setColumnsState] = (0, import_react4.useState)(
+    () => (
+      // Initialize with system columns (no preferences applied yet)
+      initialColumns.map((col) => __spreadValues({}, col))
+    )
+  );
   const [isReady, setIsReady] = (0, import_react4.useState)(false);
-  const isReadyRef = (0, import_react4.useRef)(false);
   const keyRef = (0, import_react4.useRef)(key);
+  const initialColumnsRef = (0, import_react4.useRef)(initialColumns);
+  const preferencesRef = (0, import_react4.useRef)(preferences);
+  const autosyncRef = (0, import_react4.useRef)(autosync);
   (0, import_react4.useEffect)(() => {
-    isReadyRef.current = isReady;
     keyRef.current = key;
-  }, [isReady, key]);
-  const handleSaveLayout = (0, import_react4.useCallback)(
-    (setter, _internal) => {
-      if (!isReadyRef.current && !_internal || !keyRef.current) return;
-      setColumns((prevColumns) => {
-        const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
-        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal) {
-          return prevColumns;
-        }
-        localStorage.setItem(
-          getLocalStorageKeyWithPrefix(`${keyRef.current}-tableLayout`),
-          JSON.stringify(newColumns)
-        );
-        return newColumns;
-      });
-    },
-    []
-  );
+  }, [key]);
+  (0, import_react4.useEffect)(() => {
+    initialColumnsRef.current = initialColumns;
+  }, [initialColumns]);
+  (0, import_react4.useEffect)(() => {
+    preferencesRef.current = preferences;
+  }, [preferences]);
+  (0, import_react4.useEffect)(() => {
+    autosyncRef.current = autosync;
+  }, [autosync]);
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    if (!hasCleanedLegacyDataThisSession && !hasPerformedLegacyMigration()) {
+      clearAllLegacyData();
+      markLegacyMigrationComplete();
+      hasCleanedLegacyDataThisSession = true;
+    }
+  }, []);
   (0, import_react4.useEffect)(() => {
-    if (!autosync) return;
+    if (!autosync) {
+      setIsReady(true);
+      return;
+    }
     if (!key) {
       setIsReady(true);
       return;
     }
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
+    const savedPrefs = loadPreferences(key);
+    setPreferences(savedPrefs);
+    const computedColumns = applyPreferencesToColumns(
+      initialColumns,
+      savedPrefs
     );
-    if (savedLayout) {
-      setColumns(
-        mergeObjectArrays(
-          initialColumns,
-          JSON.parse(savedLayout)
-        )
-      );
-    } else {
-      localStorage.setItem(
-        getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
-        JSON.stringify(initialColumns)
-      );
-      setColumns((prev) => {
-        if (JSON.stringify(initialColumns) === JSON.stringify(prev))
-          return prev;
-        return initialColumns;
-      });
-    }
+    setColumnsState(computedColumns);
     setIsReady(true);
-  }, [initialColumns, key, autosync]);
-  const getSavedLayout = (0, import_react4.useCallback)(() => {
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
+  }, [key, autosync]);
+  (0, import_react4.useEffect)(() => {
+    if (!isReady) return;
+    const computedColumns = applyPreferencesToColumns(
+      initialColumns,
+      preferencesRef.current
     );
-    if (savedLayout) {
-      return JSON.parse(savedLayout);
-    }
-  }, [key]);
-  return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
+    setColumnsState(computedColumns);
+  }, [initialColumns, isReady]);
+  const persistPreferences = (0, import_react4.useCallback)(
+    (newPrefs) => {
+      if (!keyRef.current) return;
+      const updated = __spreadProps(__spreadValues(__spreadValues({}, preferencesRef.current), newPrefs), {
+        version: 2
+      });
+      setPreferences(updated);
+      if (autosyncRef.current) {
+        savePreferences(keyRef.current, updated);
+      }
+      const computedColumns = applyPreferencesToColumns(
+        initialColumnsRef.current,
+        updated
+      );
+      setColumnsState(computedColumns);
+    },
+    []
+  );
+  const hideColumn = (0, import_react4.useCallback)(
+    (columnId) => {
+      var _a, _b;
+      const currentPrefs = preferencesRef.current;
+      const currentHidden = (_a = currentPrefs == null ? void 0 : currentPrefs.hiddenByUser) != null ? _a : [];
+      const currentShown = (_b = currentPrefs == null ? void 0 : currentPrefs.shownByUser) != null ? _b : [];
+      const newShown = currentShown.filter((id) => id !== columnId);
+      const newHidden = currentHidden.includes(columnId) ? currentHidden : [...currentHidden, columnId];
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        hiddenByUser: newHidden,
+        shownByUser: newShown
+      }));
+    },
+    [persistPreferences]
+  );
+  const showColumn = (0, import_react4.useCallback)(
+    (columnId) => {
+      var _a, _b;
+      const currentPrefs = preferencesRef.current;
+      const currentHidden = (_a = currentPrefs == null ? void 0 : currentPrefs.hiddenByUser) != null ? _a : [];
+      const currentShown = (_b = currentPrefs == null ? void 0 : currentPrefs.shownByUser) != null ? _b : [];
+      const newHidden = currentHidden.filter((id) => id !== columnId);
+      const newShown = currentShown.includes(columnId) ? currentShown : [...currentShown, columnId];
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        hiddenByUser: newHidden,
+        shownByUser: newShown
+      }));
+    },
+    [persistPreferences]
+  );
+  const reorderColumns = (0, import_react4.useCallback)(
+    (columnIds) => {
+      persistPreferences(__spreadProps(__spreadValues({}, preferencesRef.current), {
+        columnOrder: columnIds
+      }));
+    },
+    [persistPreferences]
+  );
+  const setColumnWidth = (0, import_react4.useCallback)(
+    (columnId, width) => {
+      var _a;
+      const currentPrefs = preferencesRef.current;
+      const currentWidths = (_a = currentPrefs == null ? void 0 : currentPrefs.columnWidths) != null ? _a : {};
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        columnWidths: __spreadProps(__spreadValues({}, currentWidths), { [columnId]: width })
+      }));
+    },
+    [persistPreferences]
+  );
+  const resetToDefaults = (0, import_react4.useCallback)(() => {
+    if (!keyRef.current) return;
+    clearPreferences(keyRef.current);
+    setPreferences(null);
+    const computedColumns = applyPreferencesToColumns(
+      initialColumnsRef.current,
+      null
+    );
+    setColumnsState(computedColumns);
+  }, []);
+  const getUserPreferences = (0, import_react4.useCallback)(() => {
+    var _a;
+    return (_a = preferencesRef.current) != null ? _a : { version: 2 };
+  }, []);
+  const getSavedLayout = (0, import_react4.useCallback)(() => {
+    return columns;
+  }, [columns]);
+  const setColumns = (0, import_react4.useCallback)(
+    (setter) => {
+      setColumnsState((prev) => {
+        var _a, _b, _c, _d;
+        const newColumns = typeof setter === "function" ? setter(prev) : setter;
+        const newOrder = extractColumnOrder(newColumns);
+        const { hiddenByUser, shownByUser } = extractVisibilityChanges(
+          newColumns,
+          initialColumnsRef.current
+        );
+        const existingPrefs = preferencesRef.current;
+        const mergedHidden = Array.from(
+          /* @__PURE__ */ new Set([
+            ...hiddenByUser,
+            // Keep existing hidden prefs for columns that are still hidden
+            ...(_b = (_a = existingPrefs == null ? void 0 : existingPrefs.hiddenByUser) == null ? void 0 : _a.filter((id) => {
+              var _a2;
+              const col = newColumns.find((c) => c.id === id);
+              return col && ((_a2 = col.meta) == null ? void 0 : _a2.visible) === false;
+            })) != null ? _b : []
+          ])
+        );
+        const mergedShown = Array.from(
+          /* @__PURE__ */ new Set([
+            ...shownByUser,
+            // Keep existing shown prefs for columns that are still visible
+            ...(_d = (_c = existingPrefs == null ? void 0 : existingPrefs.shownByUser) == null ? void 0 : _c.filter((id) => {
+              var _a2;
+              const col = newColumns.find((c) => c.id === id);
+              return col && ((_a2 = col.meta) == null ? void 0 : _a2.visible) !== false;
+            })) != null ? _d : []
+          ])
+        );
+        if (keyRef.current && autosync) {
+          const newPrefs = {
+            columnOrder: newOrder,
+            hiddenByUser: mergedHidden,
+            shownByUser: mergedShown,
+            columnWidths: existingPrefs == null ? void 0 : existingPrefs.columnWidths,
+            version: 2
+          };
+          setPreferences(newPrefs);
+          savePreferences(keyRef.current, newPrefs);
+        }
+        return newColumns;
+      });
+    },
+    [autosync]
+  );
+  return {
+    columns,
+    setColumns,
+    isReady,
+    getSavedLayout,
+    hideColumn,
+    showColumn,
+    reorderColumns,
+    setColumnWidth,
+    resetToDefaults,
+    getUserPreferences
+  };
 }
 
 // src/hooks/useEditCell.tsx