@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/hooks/useTableData.d.ts

@@ -0,0 +1,42 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { PageChangeEvent } from '../components/pagination/Pagination';
+import { type PaginationState } from './usePagination';
+import { type SortDirection, type SortState, type ColumnComparators } from './useSorting';
+export interface UseTableDataProps<T> {
+    data?: readonly T[];
+    pagination?: {
+        skip?: number;
+        take?: number;
+        state?: PaginationState;
+        onStateChange?: (next: PaginationState) => void;
+    };
+    sorting?: {
+        sortBy?: string | null;
+        direction?: SortDirection;
+        state?: SortState<T>;
+        onStateChange?: (next: SortState<T>) => void;
+        columnComparators?: ColumnComparators<T>;
+        nulls?: 'first' | 'last';
+        allowUnsort?: boolean;
+        columns?: ReadonlyArray<ColumnDef<T, any>>;
+    };
+    /**
+     * Resets to page 1 whenever sorting changes (typical UX).
+     */
+    resetPageOnSortChange?: boolean;
+}
+export interface UseTableDataResult<T> {
+    rows: T[];
+    totalCount: number;
+    pagination: {
+        state: PaginationState;
+        onPageChange: (e: PageChangeEvent) => void;
+        resetPage: () => void;
+    };
+    sorting: {
+        state: SortState<T>;
+        onSortChange: (next: Partial<SortState<T>>) => void;
+        clearSort: () => void;
+    };
+}
+export declare function useTableData<T extends Record<string, any>>({ data, pagination, sorting, resetPageOnSortChange, }: UseTableDataProps<T>): UseTableDataResult<T>;

package/dist/hooks/useTableData.js

@@ -0,0 +1,73 @@
+'use client';
+import { useMemo, useEffect } from 'react';
+import { usePagination } from './usePagination';
+import { useSorting, defaultCompare } from './useSorting';
+
+function useTableData({
+  data = [],
+  pagination,
+  sorting,
+  resetPageOnSortChange = true
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const hasPagination = pagination != null;
+  const nullsMode = (_a = sorting == null ? void 0 : sorting.nulls) != null ? _a : "last";
+  const mergedComparators = useMemo(() => {
+    var _a2, _b2;
+    const derived = {};
+    for (const col of (_a2 = sorting == null ? void 0 : sorting.columns) != null ? _a2 : []) {
+      const colId = (_b2 = col.id) != null ? _b2 : col.accessorKey;
+      if (!colId) continue;
+      const accessorFn = col.accessorFn;
+      const accessorKey = col.accessorKey;
+      if (accessorFn) {
+        derived[colId] = (a, b, dir) => defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
+      } else if (accessorKey) {
+        derived[colId] = (a, b, dir) => defaultCompare(a[accessorKey], b[accessorKey], dir, nullsMode);
+      }
+    }
+    return { ...derived, ...sorting == null ? void 0 : sorting.columnComparators };
+  }, [sorting == null ? void 0 : sorting.columns, sorting == null ? void 0 : sorting.columnComparators, nullsMode]);
+  const s = useSorting({
+    data,
+    sortBy: (_b = sorting == null ? void 0 : sorting.sortBy) != null ? _b : null,
+    sortDirection: (_c = sorting == null ? void 0 : sorting.direction) != null ? _c : null,
+    state: sorting == null ? void 0 : sorting.state,
+    onStateChange: sorting == null ? void 0 : sorting.onStateChange,
+    columnComparators: mergedComparators,
+    nulls: nullsMode,
+    allowUnsort: (_d = sorting == null ? void 0 : sorting.allowUnsort) != null ? _d : true
+  });
+  const p = usePagination({
+    data: s.sortedData,
+    skip: (_e = pagination == null ? void 0 : pagination.skip) != null ? _e : 0,
+    take: (_f = pagination == null ? void 0 : pagination.take) != null ? _f : Math.max(s.sortedData.length, 1),
+    state: pagination == null ? void 0 : pagination.state,
+    onStateChange: pagination == null ? void 0 : pagination.onStateChange
+  });
+  useEffect(() => {
+    if (!hasPagination) return;
+    if (!resetPageOnSortChange) return;
+    p.resetPage();
+  }, [hasPagination, resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+  const rows = useMemo(
+    () => hasPagination ? p.paginatedData : s.sortedData,
+    [hasPagination, p.paginatedData, s.sortedData]
+  );
+  return {
+    rows,
+    totalCount: s.sortedData.length,
+    pagination: {
+      state: p.paginationState,
+      onPageChange: p.onPageChange,
+      resetPage: p.resetPage
+    },
+    sorting: {
+      state: s.sortState,
+      onSortChange: s.onSortChange,
+      clearSort: s.clearSort
+    }
+  };
+}
+
+export { useTableData };

package/dist/hooks/useTableSelection.cjs

@@ -0,0 +1,172 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+function safeParseIds(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    return parsed.filter((v) => typeof v === "string" || typeof v === "number");
+  } catch {
+    return null;
+  }
+}
+function serializeIds(ids) {
+  return JSON.stringify(Array.from(ids));
+}
+function areSetsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const value of a) {
+    if (!b.has(value)) return false;
+  }
+  return true;
+}
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds,
+  onSelectionChange,
+  selectionMode = "single",
+  pruneToItems = false,
+  storage = "session"
+}) {
+  const resolvedInitialSelectedIds = initialSelectedIds != null ? initialSelectedIds : EMPTY_IDS;
+  const [selectedIds, setSelectedIds] = react.useState(resolvedInitialSelectedIds);
+  const [hydrated, setHydrated] = react.useState(false);
+  const lastWrittenRef = react.useRef(null);
+  const itemsById = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      map.set(getId(item), item);
+    }
+    return map;
+  }, [items, getId]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+    if (!storageKey) {
+      setSelectedIds(
+        (prev) => areSetsEqual(prev, resolvedInitialSelectedIds) ? prev : new Set(resolvedInitialSelectedIds)
+      );
+      setHydrated(true);
+      lastWrittenRef.current = null;
+      return;
+    }
+    const parsed = safeParseIds(storageApi.getItem(storageKey));
+    const next = new Set(parsed != null ? parsed : Array.from(resolvedInitialSelectedIds));
+    setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    lastWrittenRef.current = serializeIds(next);
+    setHydrated(true);
+  }, [storage, storageKey, resolvedInitialSelectedIds]);
+  react.useEffect(() => {
+    if (!pruneToItems) return;
+    const visibleIds = new Set(Array.from(itemsById.keys()));
+    setSelectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      if (visibleIds.size === 0) return prev;
+      const next = /* @__PURE__ */ new Set();
+      for (const id of prev) {
+        if (visibleIds.has(id)) next.add(id);
+      }
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, [pruneToItems, itemsById]);
+  const selectedItemMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const id of selectedIds) {
+      const item = itemsById.get(id);
+      if (item !== void 0) map.set(id, item);
+    }
+    return map;
+  }, [selectedIds, itemsById]);
+  const selectedItems = react.useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = react.useMemo(() => {
+    if (items.length === 0) return false;
+    return items.every((item) => selectedIds.has(getId(item)));
+  }, [items, selectedIds, getId]);
+  const anySelected = react.useMemo(() => selectedIds.size > 0, [selectedIds]);
+  react.useEffect(() => {
+    if (!hydrated) return;
+    if (typeof window === "undefined") return;
+    if (storageKey) {
+      const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+      const nextStr = serializeIds(selectedIds);
+      if (lastWrittenRef.current !== nextStr) {
+        storageApi.setItem(storageKey, nextStr);
+        lastWrittenRef.current = nextStr;
+      }
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
+  const toggleId = react.useCallback(
+    (id, selected) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        const isSelected = next.has(id);
+        const shouldSelect = selected === void 0 ? !isSelected : selected;
+        if (selectionMode === "single") {
+          next.clear();
+          if (shouldSelect) next.add(id);
+          return areSetsEqual(prev, next) ? prev : next;
+        }
+        if (shouldSelect) next.add(id);
+        else next.delete(id);
+        return areSetsEqual(prev, next) ? prev : next;
+      });
+    },
+    [selectionMode]
+  );
+  const toggleItem = react.useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const selectOnly = react.useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = /* @__PURE__ */ new Set([id]);
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, []);
+  const clearSelection = react.useCallback(() => {
+    setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = react.useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+        return;
+      }
+      if (selectionMode === "single") {
+        const first = items[0];
+        const next2 = first ? /* @__PURE__ */ new Set([getId(first)]) : /* @__PURE__ */ new Set();
+        setSelectedIds((prev) => areSetsEqual(prev, next2) ? prev : next2);
+        return;
+      }
+      const next = /* @__PURE__ */ new Set();
+      for (const item of items) {
+        next.add(getId(item));
+      }
+      setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    },
+    [clearSelection, getId, items, selectionMode]
+  );
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    selectOnly,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+exports.useTableSelection = useTableSelection;

package/dist/hooks/useTableSelection.d.ts

@@ -0,0 +1,27 @@
+type Id = string | number;
+interface Props<T> {
+    storageKey?: string;
+    items: T[];
+    getId: (item: T) => Id;
+    initialSelectedIds?: Set<Id>;
+    onSelectionChange?: (args: {
+        selectedIds: Set<Id>;
+        selectedItems: T[];
+    }) => void;
+    selectionMode?: 'single' | 'multiple';
+    pruneToItems?: boolean;
+    storage?: 'local' | 'session';
+}
+export declare function useTableSelection<T>({ storageKey, items, getId, initialSelectedIds, onSelectionChange, selectionMode, pruneToItems, storage, }: Props<T>): {
+    selectedIds: Set<Id>;
+    selectedItems: T[];
+    selectedItemMap: Map<Id, T>;
+    toggleItem: (item: T) => void;
+    toggleId: (id: Id, selected?: boolean) => void;
+    selectOnly: (id: Id) => void;
+    clearSelection: () => void;
+    allSelected: boolean;
+    anySelected: boolean;
+    toggleAll: (selected: boolean) => void;
+};
+export {};

package/dist/hooks/useTableSelection.js

@@ -0,0 +1,170 @@
+'use client';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+function safeParseIds(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    return parsed.filter((v) => typeof v === "string" || typeof v === "number");
+  } catch {
+    return null;
+  }
+}
+function serializeIds(ids) {
+  return JSON.stringify(Array.from(ids));
+}
+function areSetsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const value of a) {
+    if (!b.has(value)) return false;
+  }
+  return true;
+}
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds,
+  onSelectionChange,
+  selectionMode = "single",
+  pruneToItems = false,
+  storage = "session"
+}) {
+  const resolvedInitialSelectedIds = initialSelectedIds != null ? initialSelectedIds : EMPTY_IDS;
+  const [selectedIds, setSelectedIds] = useState(resolvedInitialSelectedIds);
+  const [hydrated, setHydrated] = useState(false);
+  const lastWrittenRef = useRef(null);
+  const itemsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      map.set(getId(item), item);
+    }
+    return map;
+  }, [items, getId]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+    if (!storageKey) {
+      setSelectedIds(
+        (prev) => areSetsEqual(prev, resolvedInitialSelectedIds) ? prev : new Set(resolvedInitialSelectedIds)
+      );
+      setHydrated(true);
+      lastWrittenRef.current = null;
+      return;
+    }
+    const parsed = safeParseIds(storageApi.getItem(storageKey));
+    const next = new Set(parsed != null ? parsed : Array.from(resolvedInitialSelectedIds));
+    setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    lastWrittenRef.current = serializeIds(next);
+    setHydrated(true);
+  }, [storage, storageKey, resolvedInitialSelectedIds]);
+  useEffect(() => {
+    if (!pruneToItems) return;
+    const visibleIds = new Set(Array.from(itemsById.keys()));
+    setSelectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      if (visibleIds.size === 0) return prev;
+      const next = /* @__PURE__ */ new Set();
+      for (const id of prev) {
+        if (visibleIds.has(id)) next.add(id);
+      }
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, [pruneToItems, itemsById]);
+  const selectedItemMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const id of selectedIds) {
+      const item = itemsById.get(id);
+      if (item !== void 0) map.set(id, item);
+    }
+    return map;
+  }, [selectedIds, itemsById]);
+  const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = useMemo(() => {
+    if (items.length === 0) return false;
+    return items.every((item) => selectedIds.has(getId(item)));
+  }, [items, selectedIds, getId]);
+  const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+  useEffect(() => {
+    if (!hydrated) return;
+    if (typeof window === "undefined") return;
+    if (storageKey) {
+      const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+      const nextStr = serializeIds(selectedIds);
+      if (lastWrittenRef.current !== nextStr) {
+        storageApi.setItem(storageKey, nextStr);
+        lastWrittenRef.current = nextStr;
+      }
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
+  const toggleId = useCallback(
+    (id, selected) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        const isSelected = next.has(id);
+        const shouldSelect = selected === void 0 ? !isSelected : selected;
+        if (selectionMode === "single") {
+          next.clear();
+          if (shouldSelect) next.add(id);
+          return areSetsEqual(prev, next) ? prev : next;
+        }
+        if (shouldSelect) next.add(id);
+        else next.delete(id);
+        return areSetsEqual(prev, next) ? prev : next;
+      });
+    },
+    [selectionMode]
+  );
+  const toggleItem = useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const selectOnly = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = /* @__PURE__ */ new Set([id]);
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, []);
+  const clearSelection = useCallback(() => {
+    setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+        return;
+      }
+      if (selectionMode === "single") {
+        const first = items[0];
+        const next2 = first ? /* @__PURE__ */ new Set([getId(first)]) : /* @__PURE__ */ new Set();
+        setSelectedIds((prev) => areSetsEqual(prev, next2) ? prev : next2);
+        return;
+      }
+      const next = /* @__PURE__ */ new Set();
+      for (const item of items) {
+        next.add(getId(item));
+      }
+      setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    },
+    [clearSelection, getId, items, selectionMode]
+  );
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    selectOnly,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+export { useTableSelection };

package/dist/hooks/useTableSettings.cjs

@@ -0,0 +1,90 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function getDefaultVisibleIds(tableColumns) {
+  var _a;
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
+    var _a2;
+    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
+  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+}
+function mergeDefaults(stored, defaults) {
+  const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
+  const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
+  return { viewMode, visibleColumnIds };
+}
+const localStorageTableSettingsStorage = {
+  get: (key) => {
+    const v = localStorage_utils.readLocalStorage(key);
+    return v && typeof v === "object" ? v : void 0;
+  },
+  set: (key, next) => {
+    localStorage_utils.writeLocalStorage(key, next);
+  }
+};
+function useTableSettings({
+  storageKey,
+  tableColumns,
+  defaultViewMode = "compact",
+  defaultVisibleColumnIds,
+  storage = localStorageTableSettingsStorage
+}) {
+  const defaults = react.useMemo(() => {
+    return {
+      viewMode: defaultViewMode,
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+    };
+  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  const [state, setState] = react.useState(defaults);
+  react.useEffect(() => {
+    const stored = storage.get(storageKey);
+    const next = mergeDefaults(stored, defaults);
+    setState(next);
+  }, [storageKey, storage, defaults]);
+  const persist = react.useCallback(
+    (next) => storage.set(storageKey, next),
+    [storage, storageKey]
+  );
+  const setViewMode = react.useCallback(
+    (mode) => {
+      setState((prev) => {
+        if (prev.viewMode === mode) return prev;
+        const next = { ...prev, viewMode: mode };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const toggleViewMode = react.useCallback(() => {
+    setState((prev) => {
+      const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
+      const next = { ...prev, viewMode: nextMode };
+      persist(next);
+      return next;
+    });
+  }, [persist]);
+  const setVisibleColumnIds = react.useCallback(
+    (ids) => {
+      setState((prev) => {
+        const next = { ...prev, visibleColumnIds: ids };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  return {
+    viewMode: state.viewMode,
+    toggleViewMode,
+    setViewMode,
+    visibleColumnIds: state.visibleColumnIds,
+    setVisibleColumnIds
+  };
+}
+
+exports.localStorageTableSettingsStorage = localStorageTableSettingsStorage;
+exports.useTableSettings = useTableSettings;

package/dist/hooks/useTableSettings.d.ts

@@ -0,0 +1,26 @@
+import { ColumnDef } from '@tanstack/react-table';
+export type ViewMode = 'compact' | 'wrapped';
+export type TableSettingsState = {
+    viewMode: ViewMode;
+    visibleColumnIds: string[];
+};
+export type TableSettingsStorage = {
+    get: (key: string) => TableSettingsState | undefined;
+    set: (key: string, next: TableSettingsState) => void;
+};
+export declare const localStorageTableSettingsStorage: TableSettingsStorage;
+interface UseTableSettingsOptions {
+    storageKey: string;
+    tableColumns?: ColumnDef<any>[];
+    defaultViewMode?: ViewMode;
+    defaultVisibleColumnIds?: string[];
+    storage?: TableSettingsStorage;
+}
+export declare function useTableSettings({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, storage, }: UseTableSettingsOptions): {
+    viewMode: ViewMode;
+    toggleViewMode: () => void;
+    setViewMode: (mode: ViewMode) => void;
+    visibleColumnIds: string[];
+    setVisibleColumnIds: (ids: string[]) => void;
+};
+export {};

package/dist/hooks/useTableSettings.js

@@ -0,0 +1,87 @@
+'use client';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
+
+function getDefaultVisibleIds(tableColumns) {
+  var _a;
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
+    var _a2;
+    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
+  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+}
+function mergeDefaults(stored, defaults) {
+  const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
+  const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
+  return { viewMode, visibleColumnIds };
+}
+const localStorageTableSettingsStorage = {
+  get: (key) => {
+    const v = readLocalStorage(key);
+    return v && typeof v === "object" ? v : void 0;
+  },
+  set: (key, next) => {
+    writeLocalStorage(key, next);
+  }
+};
+function useTableSettings({
+  storageKey,
+  tableColumns,
+  defaultViewMode = "compact",
+  defaultVisibleColumnIds,
+  storage = localStorageTableSettingsStorage
+}) {
+  const defaults = useMemo(() => {
+    return {
+      viewMode: defaultViewMode,
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+    };
+  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  const [state, setState] = useState(defaults);
+  useEffect(() => {
+    const stored = storage.get(storageKey);
+    const next = mergeDefaults(stored, defaults);
+    setState(next);
+  }, [storageKey, storage, defaults]);
+  const persist = useCallback(
+    (next) => storage.set(storageKey, next),
+    [storage, storageKey]
+  );
+  const setViewMode = useCallback(
+    (mode) => {
+      setState((prev) => {
+        if (prev.viewMode === mode) return prev;
+        const next = { ...prev, viewMode: mode };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const toggleViewMode = useCallback(() => {
+    setState((prev) => {
+      const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
+      const next = { ...prev, viewMode: nextMode };
+      persist(next);
+      return next;
+    });
+  }, [persist]);
+  const setVisibleColumnIds = useCallback(
+    (ids) => {
+      setState((prev) => {
+        const next = { ...prev, visibleColumnIds: ids };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  return {
+    viewMode: state.viewMode,
+    toggleViewMode,
+    setViewMode,
+    visibleColumnIds: state.visibleColumnIds,
+    setVisibleColumnIds
+  };
+}
+
+export { localStorageTableSettingsStorage, useTableSettings };