najm-kit 2.2.0 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.2.1
+
+- Fixed a regression in 2.2.0: the dynamic page size reported under `manualPagination` could oscillate. Card row height is measured from rendered cards, so it grows as images decode; feeding that back into the page size refetched, re-rendered, re-measured, and refetched again. A list visibly settled from one page size to another with the loading skeleton flashing twice. The report is now allowed once per container geometry, which does not depend on the rows inside it, so it terminates. A resize still re-arms it, and the debounce still waits for the measurement to settle before reporting.
+
 ## 2.2.0
 
 - Added `cardPagination` mode `infinite`: card lists continue on scroll instead of behind a button. No control and no end-of-list element render while the list is healthy. The continuation button appears only after an append failure, as the retry target.

package/dist/index.d.ts

@@ -2871,6 +2871,8 @@ interface TableState {
     hasData: boolean;
     hasControls: boolean;
     hasNoData: boolean;
+    /** Loading while rows are already on screen: a refresh, not a first load. */
+    isRefreshing: boolean;
     dynamicHeight: boolean;
     CardComponent: ComponentType<any> | null;
     className: string;
@@ -2909,6 +2911,8 @@ interface TableState {
     calculatedPageSize: number;
     /** Whole card rows that fit the measured body, multiplied by the column count. */
     calculatedCardPageSize: number;
+    /** True once a real layout measurement has replaced the seeded defaults. */
+    hasMeasuredLayout: boolean;
     skeletonRowCount: number;
     maxHeight: number | null;
     bodyWidth: number;
@@ -2970,7 +2974,16 @@ interface TableState {
     hasSyncedExpandedFromProps: boolean;
 }
 type TableStore = ReturnType<typeof createTableStore>;
-declare const createTableStore: () => {
+/**
+ * `seed` becomes part of the store's *initial* state rather than a `set()` call
+ * made after creation. Zustand serves `getInitialState()` as the snapshot for
+ * server rendering and for the hydration render, so anything applied after
+ * creation is invisible on the first paint: `isLoading` would read false while
+ * the caller passed true (rendering the empty state instead of the skeleton),
+ * and `manualPagination` would read false long enough for layout effects to
+ * push a default page size back to a consumer that owns pagination.
+ */
+declare const createTableStore: (seed?: Partial<TableState>) => {
     (): TableState;
     <U>(selector: (state: TableState) => U): U;
 } & StoreApi<TableState> & {
@@ -2998,6 +3011,7 @@ declare const createTableStore: () => {
         hasData: () => boolean;
         hasControls: () => boolean;
         hasNoData: () => boolean;
+        isRefreshing: () => boolean;
         dynamicHeight: () => boolean;
         CardComponent: () => ComponentType<any>;
         className: () => string;
@@ -3035,6 +3049,7 @@ declare const createTableStore: () => {
         pageSizeOptions: () => number[];
         calculatedPageSize: () => number;
         calculatedCardPageSize: () => number;
+        hasMeasuredLayout: () => boolean;
         skeletonRowCount: () => number;
         maxHeight: () => number;
         bodyWidth: () => number;
@@ -3417,6 +3432,7 @@ declare const TableStoreContext: React$1.Context<{
         hasData: () => boolean;
         hasControls: () => boolean;
         hasNoData: () => boolean;
+        isRefreshing: () => boolean;
         dynamicHeight: () => boolean;
         CardComponent: () => React$1.ComponentType<any>;
         className: () => string;
@@ -3454,6 +3470,7 @@ declare const TableStoreContext: React$1.Context<{
         pageSizeOptions: () => number[];
         calculatedPageSize: () => number;
         calculatedCardPageSize: () => number;
+        hasMeasuredLayout: () => boolean;
         skeletonRowCount: () => number;
         maxHeight: () => number;
         bodyWidth: () => number;
@@ -3547,6 +3564,7 @@ declare function useStoreSync(props: any): {
         hasData: () => boolean;
         hasControls: () => boolean;
         hasNoData: () => boolean;
+        isRefreshing: () => boolean;
         dynamicHeight: () => boolean;
         CardComponent: () => React__default.ComponentType<any>;
         className: () => string;
@@ -3584,6 +3602,7 @@ declare function useStoreSync(props: any): {
         pageSizeOptions: () => number[];
         calculatedPageSize: () => number;
         calculatedCardPageSize: () => number;
+        hasMeasuredLayout: () => boolean;
         skeletonRowCount: () => number;
         maxHeight: () => number;
         bodyWidth: () => number;

package/dist/index.mjs

@@ -12125,8 +12125,9 @@ var computeFlags = (state) => {
     state.menuButton && state.openRowMenu || state.onView || state.onEdit || state.onDelete
   );
   const hasControls = Boolean(state.showColumnVisibility || state.showAddButton || state.showViewToggle);
-  const showContent = !state.isLoading && !state.error && !hasNoData && !isFilteredEmpty;
-  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, showContent, showPagination: state.showPagination && showContent };
+  const isRefreshing = Boolean(state.isLoading) && hasData;
+  const showContent = !state.error && !hasNoData && !isFilteredEmpty && (!state.isLoading || hasData);
+  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, isRefreshing, showContent, showPagination: state.showPagination && showContent };
 };
 var createSelectors = (_store) => {
   const store = _store;
@@ -12136,177 +12137,192 @@ var createSelectors = (_store) => {
   }
   return store;
 };
-var createTableStore = () => {
-  const store = create((set, get) => ({
-    table: null,
-    data: [],
-    columns: [],
-    filters: [],
-    isLoading: false,
-    error: null,
-    viewMode: "table",
-    showSorting: true,
-    showPagination: true,
-    showColumnVisibility: false,
-    showAddButton: true,
-    showViewToggle: true,
-    toolbarLabels: true,
-    dynamicHeight: true,
-    showContent: false,
-    isTableView: true,
-    isCardView: false,
-    isJsonView: false,
-    isFilesView: false,
-    isCustomMode: false,
-    hasActions: false,
-    hasData: false,
-    hasControls: true,
-    hasNoData: true,
-    onView: null,
-    onEdit: null,
-    onDelete: null,
-    onAddClick: null,
-    onRowClick: null,
-    onRowContextMenu: null,
-    onBackgroundContextMenu: null,
-    openRowMenu: null,
-    getRowClassName: null,
-    menuButton: false,
-    onCellClick: null,
-    onBulkDelete: null,
-    onRetry: null,
-    onCellEdit: null,
-    onStateChange: null,
-    getRowId: null,
-    renderToolbar: null,
-    CardComponent: null,
-    className: "",
-    classNames: {},
-    bordered: void 0,
-    headerClassName: "bg-card",
-    headerColor: void 0,
-    headerTextColor: void 0,
-    borderColor: void 0,
-    showCheckbox: true,
-    selectedRowId: null,
-    headerSlot: null,
-    noResultsText: "No results.",
-    filterPlaceholder: "",
-    loadingText: "Loading...",
-    noDataText: "No data available",
-    addButtonText: "",
-    pageSizeOptions: [10, 20, 30, 40, 50],
-    calculatedPageSize: 10,
-    calculatedCardPageSize: 0,
-    skeletonRowCount: 6,
-    maxHeight: null,
-    bodyWidth: 0,
-    bodyHeight: 0,
-    tableHeaderHeight: 48,
-    cardColumnCount: 1,
-    cardRowHeight: 0,
-    cardGap: 12,
-    // JSON mode
-    jsonValue: void 0,
-    jsonColors: null,
-    renderJson: null,
-    // Custom mode
-    renderCustomMode: null,
-    // Controlled mode
-    isModeControlled: false,
-    onModeChange: null,
-    // availableModes
-    availableModes: ["table", "cards", "json"],
-    // User-intent setter
-    setViewMode: (mode) => {
-      const { isModeControlled, onModeChange } = get();
-      onModeChange?.(mode);
-      if (!isModeControlled) {
-        const updates = { viewMode: mode };
+var createTableStore = (seed) => {
+  const store = create((set, get) => {
+    const defaults = {
+      table: null,
+      data: [],
+      columns: [],
+      filters: [],
+      isLoading: false,
+      error: null,
+      viewMode: "table",
+      showSorting: true,
+      showPagination: true,
+      showColumnVisibility: false,
+      showAddButton: true,
+      showViewToggle: true,
+      toolbarLabels: true,
+      dynamicHeight: true,
+      showContent: false,
+      isTableView: true,
+      isCardView: false,
+      isJsonView: false,
+      isFilesView: false,
+      isCustomMode: false,
+      hasActions: false,
+      hasData: false,
+      hasControls: true,
+      hasNoData: true,
+      isRefreshing: false,
+      onView: null,
+      onEdit: null,
+      onDelete: null,
+      onAddClick: null,
+      onRowClick: null,
+      onRowContextMenu: null,
+      onBackgroundContextMenu: null,
+      openRowMenu: null,
+      getRowClassName: null,
+      menuButton: false,
+      onCellClick: null,
+      onBulkDelete: null,
+      onRetry: null,
+      onCellEdit: null,
+      onStateChange: null,
+      getRowId: null,
+      renderToolbar: null,
+      CardComponent: null,
+      className: "",
+      classNames: {},
+      bordered: void 0,
+      headerClassName: "bg-card",
+      headerColor: void 0,
+      headerTextColor: void 0,
+      borderColor: void 0,
+      showCheckbox: true,
+      selectedRowId: null,
+      headerSlot: null,
+      noResultsText: "No results.",
+      filterPlaceholder: "",
+      loadingText: "Loading...",
+      noDataText: "No data available",
+      addButtonText: "",
+      pageSizeOptions: [10, 20, 30, 40, 50],
+      calculatedPageSize: 10,
+      calculatedCardPageSize: 0,
+      hasMeasuredLayout: false,
+      skeletonRowCount: 6,
+      maxHeight: null,
+      bodyWidth: 0,
+      bodyHeight: 0,
+      tableHeaderHeight: 48,
+      cardColumnCount: 1,
+      cardRowHeight: 0,
+      cardGap: 12,
+      // JSON mode
+      jsonValue: void 0,
+      jsonColors: null,
+      renderJson: null,
+      // Custom mode
+      renderCustomMode: null,
+      // Controlled mode
+      isModeControlled: false,
+      onModeChange: null,
+      // availableModes
+      availableModes: ["table", "cards", "json"],
+      // User-intent setter
+      setViewMode: (mode) => {
+        const { isModeControlled, onModeChange } = get();
+        onModeChange?.(mode);
+        if (!isModeControlled) {
+          const updates = { viewMode: mode };
+          const currentState = get();
+          const mergedState = { ...currentState, ...updates };
+          const flags = computeFlags(mergedState);
+          set({ ...updates, ...flags });
+        }
+      },
+      // Track if we've ever synced viewMode from props
+      hasSyncedFromProps: false,
+      // Server-side pagination
+      manualPagination: false,
+      pageCount: void 0,
+      rowCount: void 0,
+      pagination: { pageIndex: 0, pageSize: 10 },
+      isPaginationControlled: false,
+      onPaginationChange: null,
+      // User-intent setter for pagination
+      setPagination: (pagination) => {
+        const { isPaginationControlled, onPaginationChange } = get();
+        onPaginationChange?.(pagination);
+        if (!isPaginationControlled) {
+          set({ pagination });
+        }
+      },
+      // Track if we've ever synced pagination from props
+      hasSyncedPaginationFromProps: false,
+      // Row selection
+      rowSelection: {},
+      isRowSelectionControlled: false,
+      onRowSelectionChange: null,
+      setRowSelection: (state) => {
+        const { isRowSelectionControlled, onRowSelectionChange } = get();
+        onRowSelectionChange?.(state);
+        if (!isRowSelectionControlled) {
+          set({ rowSelection: state });
+        }
+      },
+      hasSyncedRowSelectionFromProps: false,
+      // Sorting
+      sorting: [],
+      isSortingControlled: false,
+      onSortingChange: null,
+      setSorting: (state) => {
+        const { isSortingControlled, onSortingChange } = get();
+        onSortingChange?.(state);
+        if (!isSortingControlled) {
+          set({ sorting: state });
+        }
+      },
+      hasSyncedSortingFromProps: false,
+      // Responsive cards
+      responsiveCards: true,
+      isMobile: false,
+      effectiveViewMode: "table",
+      cardPagination: { mode: "paged" },
+      // Empty states
+      isEmpty: void 0,
+      isFilteredEmpty: false,
+      renderFilteredEmpty: null,
+      // Row expansion
+      expanded: {},
+      isExpandedControlled: false,
+      onExpandedChange: null,
+      getRowCanExpand: null,
+      renderSubRow: null,
+      setExpanded: (next) => {
+        const { isExpandedControlled, onExpandedChange } = get();
+        onExpandedChange?.(next);
+        if (!isExpandedControlled) {
+          set({ expanded: next });
+        }
+      },
+      hasSyncedExpandedFromProps: false,
+      syncWithProps: (updates) => {
         const currentState = get();
-        const mergedState = { ...currentState, ...updates };
+        const hasSyncedFromProps = currentState.hasSyncedFromProps || "viewMode" in updates;
+        const hasSyncedPaginationFromProps = currentState.hasSyncedPaginationFromProps || "pagination" in updates;
+        const hasSyncedRowSelectionFromProps = currentState.hasSyncedRowSelectionFromProps || "rowSelection" in updates;
+        const hasSyncedExpandedFromProps = currentState.hasSyncedExpandedFromProps || "expanded" in updates;
+        const hasSyncedSortingFromProps = currentState.hasSyncedSortingFromProps || "sorting" in updates;
+        const mergedState = { ...currentState, ...updates};
         const flags = computeFlags(mergedState);
-        set({ ...updates, ...flags });
+        set({ ...updates, ...flags, hasSyncedFromProps, hasSyncedPaginationFromProps, hasSyncedRowSelectionFromProps, hasSyncedExpandedFromProps, hasSyncedSortingFromProps });
       }
-    },
-    // Track if we've ever synced viewMode from props
-    hasSyncedFromProps: false,
-    // Server-side pagination
-    manualPagination: false,
-    pageCount: void 0,
-    rowCount: void 0,
-    pagination: { pageIndex: 0, pageSize: 10 },
-    isPaginationControlled: false,
-    onPaginationChange: null,
-    // User-intent setter for pagination
-    setPagination: (pagination) => {
-      const { isPaginationControlled, onPaginationChange } = get();
-      onPaginationChange?.(pagination);
-      if (!isPaginationControlled) {
-        set({ pagination });
-      }
-    },
-    // Track if we've ever synced pagination from props
-    hasSyncedPaginationFromProps: false,
-    // Row selection
-    rowSelection: {},
-    isRowSelectionControlled: false,
-    onRowSelectionChange: null,
-    setRowSelection: (state) => {
-      const { isRowSelectionControlled, onRowSelectionChange } = get();
-      onRowSelectionChange?.(state);
-      if (!isRowSelectionControlled) {
-        set({ rowSelection: state });
-      }
-    },
-    hasSyncedRowSelectionFromProps: false,
-    // Sorting
-    sorting: [],
-    isSortingControlled: false,
-    onSortingChange: null,
-    setSorting: (state) => {
-      const { isSortingControlled, onSortingChange } = get();
-      onSortingChange?.(state);
-      if (!isSortingControlled) {
-        set({ sorting: state });
-      }
-    },
-    hasSyncedSortingFromProps: false,
-    // Responsive cards
-    responsiveCards: true,
-    isMobile: false,
-    effectiveViewMode: "table",
-    cardPagination: { mode: "paged" },
-    // Empty states
-    isEmpty: void 0,
-    isFilteredEmpty: false,
-    renderFilteredEmpty: null,
-    // Row expansion
-    expanded: {},
-    isExpandedControlled: false,
-    onExpandedChange: null,
-    getRowCanExpand: null,
-    renderSubRow: null,
-    setExpanded: (next) => {
-      const { isExpandedControlled, onExpandedChange } = get();
-      onExpandedChange?.(next);
-      if (!isExpandedControlled) {
-        set({ expanded: next });
-      }
-    },
-    hasSyncedExpandedFromProps: false,
-    syncWithProps: (updates) => {
-      const currentState = get();
-      const hasSyncedFromProps = currentState.hasSyncedFromProps || "viewMode" in updates;
-      const hasSyncedPaginationFromProps = currentState.hasSyncedPaginationFromProps || "pagination" in updates;
-      const hasSyncedRowSelectionFromProps = currentState.hasSyncedRowSelectionFromProps || "rowSelection" in updates;
-      const hasSyncedExpandedFromProps = currentState.hasSyncedExpandedFromProps || "expanded" in updates;
-      const hasSyncedSortingFromProps = currentState.hasSyncedSortingFromProps || "sorting" in updates;
-      const mergedState = { ...currentState, ...updates};
-      const flags = computeFlags(mergedState);
-      set({ ...updates, ...flags, hasSyncedFromProps, hasSyncedPaginationFromProps, hasSyncedRowSelectionFromProps, hasSyncedExpandedFromProps, hasSyncedSortingFromProps });
-    }
-  }));
+    };
+    if (!seed) return defaults;
+    const merged = {
+      ...defaults,
+      ...seed,
+      hasSyncedFromProps: "viewMode" in seed,
+      hasSyncedPaginationFromProps: "pagination" in seed,
+      hasSyncedRowSelectionFromProps: "rowSelection" in seed,
+      hasSyncedExpandedFromProps: "expanded" in seed,
+      hasSyncedSortingFromProps: "sorting" in seed
+    };
+    return { ...merged, ...computeFlags(merged) };
+  });
   return createSelectors(store);
 };
 
@@ -12355,7 +12371,9 @@ var DEFAULT_TABLE_HEADER_HEIGHT = 48;
 var DEFAULT_CARD_HEIGHT = 176;
 var DEFAULT_CARD_GAP = 12;
 var ROOT_SECTION_GAP_COUNT = 2;
-var DYNAMIC_PAGE_SIZE_DEBOUNCE_MS = 200;
+var DYNAMIC_PAGE_SIZE_DEBOUNCE_MS = 800;
+var MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY = 2;
+var GEOMETRY_BUCKET_PX = 32;
 function useStoreSync(props) {
   const storeRef = useRef(null);
   const isControlled = props.mode !== void 0;
@@ -12364,7 +12382,6 @@ function useStoreSync(props) {
   const isExpandedControlled = props.expanded !== void 0;
   const isSortingControlled = props.sorting !== void 0;
   if (!storeRef.current) {
-    storeRef.current = createTableStore();
     const syncSnapshot = { ...props, isModeControlled: isControlled, isPaginationControlled, isRowSelectionControlled, isExpandedControlled, isSortingControlled };
     delete syncSnapshot.pagination;
     delete syncSnapshot.defaultPagination;
@@ -12382,7 +12399,7 @@ function useStoreSync(props) {
     delete syncSnapshot.defaultSorting;
     if (props.sorting !== void 0) syncSnapshot.sorting = props.sorting;
     else if (props.defaultSorting !== void 0) syncSnapshot.sorting = props.defaultSorting;
-    storeRef.current.getState().syncWithProps(syncSnapshot);
+    storeRef.current = createTableStore(syncSnapshot);
   }
   useLayoutEffect(() => {
     const syncData = { ...props };
@@ -12515,6 +12532,9 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
         // mutating the table directly, so the consumer still owns fetching.
         calculatedPageSize: newPageSize,
         calculatedCardPageSize: cardPageSize,
+        // Distinguishes a real measurement from the seeded defaults, so a page
+        // size is never reported before the container has been measured.
+        hasMeasuredLayout: bodyHeight > 0,
         ...!manualPagination ? { maxHeight: calculatedMaxHeight } : {},
         skeletonRowCount: newPageSize,
         bodyWidth,
@@ -12566,6 +12586,8 @@ function useTable(effectiveViewModeOverride) {
   const calculatedPageSize = useTableStore.use.calculatedPageSize();
   const calculatedCardPageSize = useTableStore.use.calculatedCardPageSize();
   const measuredBodyHeight = useTableStore.use.bodyHeight();
+  const measuredBodyWidth = useTableStore.use.bodyWidth();
+  const hasMeasuredLayout = useTableStore.use.hasMeasuredLayout();
   const syncWithProps = useTableStore.use.syncWithProps();
   const onStateChange = useTableStore.use.onStateChange();
   const getRowId = useTableStore.use.getRowId();
@@ -12573,6 +12595,7 @@ function useTable(effectiveViewModeOverride) {
   const pageCount = useTableStore.use.pageCount();
   const rowCount = useTableStore.use.rowCount();
   const storePagination = useTableStore.use.pagination();
+  const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const setPagination = useTableStore.use.setPagination();
   const storeRowSelection = useTableStore.use.rowSelection();
   const setRowSelection = useTableStore.use.setRowSelection();
@@ -12686,23 +12709,26 @@ function useTable(effectiveViewModeOverride) {
     syncWithProps({ table });
   }, [table]);
   useLayoutEffect(() => {
-    if (manualPagination) return;
+    if (manualPagination || isPaginationControlled) return;
     if (dynamicHeight && renderedMode === "table") table.setPageSize(calculatedPageSize);
     if (viewMode === "cards" && cardPagination.mode === "paged") {
       table.setPageSize(data.length || 9999);
     }
-  }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination]);
+  }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination, isPaginationControlled]);
   const dynamicPageSizeTarget = renderedMode === "cards" ? calculatedCardPageSize : calculatedPageSize;
-  const lastRequestedDynamicSizeRef = useRef(null);
+  const geometryKey = `${Math.round(measuredBodyWidth / GEOMETRY_BUCKET_PX)}x${Math.round(measuredBodyHeight / GEOMETRY_BUCKET_PX)}`;
+  const reportedGeometryRef = useRef(null);
   useEffect(() => {
     if (!manualPagination || !dynamicHeight) return;
     if (cardPagination.mode !== "paged") return;
-    if (measuredBodyHeight <= 0) return;
+    if (!hasMeasuredLayout || measuredBodyHeight <= 0) return;
     if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
     if (dynamicPageSizeTarget === storePagination.pageSize) return;
-    if (lastRequestedDynamicSizeRef.current === dynamicPageSizeTarget) return;
+    const reported = reportedGeometryRef.current;
+    if (reported?.key === geometryKey && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
     const timer = setTimeout(() => {
-      lastRequestedDynamicSizeRef.current = dynamicPageSizeTarget;
+      const current = reportedGeometryRef.current;
+      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1 } : { key: geometryKey, count: 1 };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
     }, DYNAMIC_PAGE_SIZE_DEBOUNCE_MS);
     return () => clearTimeout(timer);
@@ -12710,7 +12736,9 @@ function useTable(effectiveViewModeOverride) {
     manualPagination,
     dynamicHeight,
     cardPagination.mode,
+    hasMeasuredLayout,
     measuredBodyHeight,
+    geometryKey,
     dynamicPageSizeTarget,
     storePagination.pageIndex,
     storePagination.pageSize,
@@ -12905,7 +12933,7 @@ function NTableContent({ effectiveMode }) {
   const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
   const getRowClassName = useTableStore.use.getRowClassName();
   const onCellEdit = useTableStore.use.onCellEdit();
-  const isLoading = useTableStore.use.isLoading();
+  useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const showContent = useTableStore.use.showContent();
@@ -12925,7 +12953,7 @@ function NTableContent({ effectiveMode }) {
       onBackgroundContextMenu(e);
     }
   }, [onBackgroundContextMenu]);
-  if (isLoading || error || hasNoData || !showContent || !table) return null;
+  if (error || hasNoData || !showContent || !table) return null;
   const isTableView = effectiveMode ? effectiveMode === "table" : storeIsTableView;
   if (!isTableView) return null;
   const getSortIcon = (column) => {
@@ -13179,7 +13207,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
   );
 }
 var DEFAULT_ROWS2 = 6;
-var DEFAULT_CARD_COUNT = 16;
+var DEFAULT_CARD_COUNT = 48;
 function NTableCardSkeleton({ surface }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -13482,13 +13510,13 @@ function useCardContinuation({
   });
   React__default.useEffect(() => {
     const previous = previousRowCountRef.current;
-    if (rowCount > previous) {
-      const appended = rowCount - previous;
-      setAnnouncement(
-        configRef.current?.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
-      );
-    }
     previousRowCountRef.current = rowCount;
+    if (!configRef.current) return;
+    if (rowCount <= previous) return;
+    const appended = rowCount - previous;
+    setAnnouncement(
+      configRef.current.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
+    );
   }, [rowCount]);
   React__default.useEffect(() => {
     if (!pending) doneLoading();
@@ -13534,7 +13562,7 @@ function NTableCards({ effectiveMode }) {
   const selectedRowId = useTableStore.use.selectedRowId();
   const CardComponent = useTableStore.use.CardComponent();
   const storeIsCardView = useTableStore.use.isCardView();
-  const isLoading = useTableStore.use.isLoading();
+  useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const showContent = useTableStore.use.showContent();
@@ -13580,7 +13608,7 @@ function NTableCards({ effectiveMode }) {
       onBackgroundContextMenu(e);
     }
   }, [table, onRowContextMenu, onBackgroundContextMenu]);
-  if (isLoading || error || hasNoData || !showContent || !table) return null;
+  if (error || hasNoData || !showContent || !table) return null;
   const isCardView = effectiveMode ? effectiveMode === "cards" : storeIsCardView;
   if (!isCardView) return null;
   const rows = table.getRowModel().rows;
@@ -13699,7 +13727,16 @@ function NTableCards({ effectiveMode }) {
       }
     ) : null,
     continuation.active ? /* @__PURE__ */ jsx("div", { ref: continuation.sentinelRef, "data-ntable-cards-sentinel": true, "aria-hidden": "true" }) : null,
-    /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: continuation.announcement })
+    continuationConfig ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "sr-only absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]",
+        children: continuation.announcement
+      }
+    ) : null
   ] });
 }
 function CardLoadMorePagination({
@@ -14137,6 +14174,7 @@ function TableToolbarSlot() {
 function NTableHeader() {
   const hasControls = useTableStore.use.hasControls();
   const isLoading = useTableStore.use.isLoading();
+  const isRefreshing = useTableStore.use.isRefreshing();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
@@ -14147,7 +14185,7 @@ function NTableHeader() {
   const isCustomMode = useTableStore.use.isCustomMode();
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const hideDataChrome = isLoading || error || hasNoData && !isFilteredEmpty;
+  const hideDataChrome = isLoading && !isRefreshing || error || hasNoData && !isFilteredEmpty;
   if (isCustomMode) {
     if (!showViewToggle && !showColumnVisibility && !headerSlot && !hasControls) return null;
     if (hideDataChrome) return null;
@@ -14229,6 +14267,7 @@ function TableLayout(props) {
   const className = useTableStore.use.className();
   useTableStore.use.dynamicHeight();
   const isLoading = useTableStore.use.isLoading();
+  const isRefreshing = useTableStore.use.isRefreshing();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const noDataText = useTableStore.use.noDataText();
@@ -14269,15 +14308,24 @@ function TableLayout(props) {
   const customRenderer = isCustomMode ? renderCustomMode?.[viewMode] : void 0;
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-ntable-root": true, className: cn("flex h-full min-h-0 flex-1 w-full flex-col gap-2 overflow-hidden", classNames?.root, className), children: [
     /* @__PURE__ */ jsx(NTableHeader, {}),
-    /* @__PURE__ */ jsx("div", { "data-ntable-body": true, className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden", children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      isLoading && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})),
-      error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
-      showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
-      showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
-      /* @__PURE__ */ jsx(NTableContent, { effectiveMode }),
-      /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
-      /* @__PURE__ */ jsx(NTableJson, {})
-    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ntable-body": true,
+        "data-ntable-refreshing": isRefreshing ? "true" : void 0,
+        "aria-busy": isRefreshing ? "true" : void 0,
+        className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
+        children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isLoading && !isRefreshing && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})),
+          error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
+          showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
+          showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
+          /* @__PURE__ */ jsx(NTableContent, { effectiveMode }),
+          /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
+          /* @__PURE__ */ jsx(NTableJson, {})
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",