najm-kit 2.11.3 → 2.11.5

package/CHANGELOG.md

@@ -1,30 +1,44 @@
-# Changelog
-
-## 2.11.3 - 2026-08-12
-
-- Fixed server-paginated card grids briefly rendering at a placeholder-derived
-  page size before correcting to the real card height. Card mode now waits for
-  real rows and publishes the measured fit before their first paint; fixed-row
-  table sizing remains immediate during loading.
-- Fixed `NTable` replacing or clipping an explicit Rows/page choice when
-  `dynamicHeight` was enabled. Automatic fit sizing still owns the initial page
-  size; after the reader chooses a value, the table preserves it and scrolls
-  its bounded body when the requested rows exceed the measured fit.
-
-## 2.11.2 - 2026-08-11
-
-- Fixed `PasswordInput` forwarding native input attributes such as generated
-  form IDs and ARIA metadata to the actual `<input>`, restoring programmatic
-  label association for assistive technology and browser automation.
-
-## 2.11.1 - 2026-08-11
-
-- Fixed `NajmThemeProvider` precedence so an explicit runtime `mode` overrides
-  a preset stored in the design config. An explicit `preset` prop still wins,
-  allowing deliberately fixed-preset subtrees without producing mixed light
-  and dark application surfaces.
-
-## 2.11.0 - 2026-08-10
+# Changelog
+
+## 2.11.5 - 2026-08-14
+
+- Fixed numbered lists staying on an invalid final page after a deletion or
+  another mutation reduced the server total. Paged lists now clamp before
+  slicing their row buffer, render the previous valid page immediately, and
+  reconcile the controlled pagination state without showing a false empty
+  state. A genuinely empty result still remains on page one.
+- Fixed panel feedback states stretching their icon, copy, and action across
+  separate grid rows in tall table and dialog bodies. Panel content now stays
+  together in one centered vertical stack with consistent spacing.
+
+## 2.11.4 - 2026-08-12
+
+- Fixed server-paginated card grids briefly rendering at a placeholder-derived
+  page size before correcting to the real card height. Card mode now waits for
+  real rows and publishes the measured fit before their first paint; fixed-row
+  table sizing remains immediate during loading.
+
+## 2.11.3 - 2026-08-12
+
+- Fixed `NTable` replacing or clipping an explicit Rows/page choice when
+  `dynamicHeight` was enabled. Automatic fit sizing still owns the initial page
+  size; after the reader chooses a value, the table preserves it and scrolls
+  its bounded body when the requested rows exceed the measured fit.
+
+## 2.11.2 - 2026-08-11
+
+- Fixed `PasswordInput` forwarding native input attributes such as generated
+  form IDs and ARIA metadata to the actual `<input>`, restoring programmatic
+  label association for assistive technology and browser automation.
+
+## 2.11.1 - 2026-08-11
+
+- Fixed `NajmThemeProvider` precedence so an explicit runtime `mode` overrides
+  a preset stored in the design config. An explicit `preset` prop still wins,
+  allowing deliberately fixed-preset subtrees without producing mixed light
+  and dark application surfaces.
+
+## 2.11.0 - 2026-08-10
 
 - Gave every keyboard-focusable primitive a visible focus ring, from one shared
   source: `focusRingClasses` and `focusRingWithinClasses`, exported from the

package/README.md

@@ -725,14 +725,14 @@ keyboard focus always reveals the action. Applications still decide which menu
 items exist through `menu`, `onView`, `onEdit`, and `onDelete`; visibility does
 not grant an action or replace server authorization.
 
-When `dynamicHeight` is enabled, table and card loading skeletons measure the
-available body. Table rows use the same header/row geometry as dynamic page
-sizing, while cards measure the active grid columns, card height, and gap. The
-loading surface also follows the loaded `bordered`, design recipe, radius,
-border color, shadow, and `classNames.content`/`classNames.cards` contract.
-The measured fit owns the initial page size. Once a reader explicitly chooses
-Rows/page, `NTable` preserves that choice and scrolls the bounded table body
-when the requested rows exceed the available height.
+When `dynamicHeight` is enabled, table and card loading skeletons measure the
+available body. Table rows use the same header/row geometry as dynamic page
+sizing, while cards measure the active grid columns, card height, and gap. The
+loading surface also follows the loaded `bordered`, design recipe, radius,
+border color, shadow, and `classNames.content`/`classNames.cards` contract.
+The measured fit owns the initial page size. Once a reader explicitly chooses
+Rows/page, `NTable` preserves that choice and scrolls the bounded table body
+when the requested rows exceed the available height.
 
 Use `cardPagination` to choose pagination presentation whenever the effective
 rendered mode is cards:

package/dist/adapters/app.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { FormDevToolsProvider, NBrandingStateProvider, NajmFormatProvider } from '../chunk-ZXIVSNXV.mjs';
-export { NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState } from '../chunk-ZXIVSNXV.mjs';
+import { FormDevToolsProvider, NBrandingStateProvider, NajmFormatProvider } from '../chunk-A7BKZZJ4.mjs';
+export { NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState } from '../chunk-A7BKZZJ4.mjs';
 import { NajmNextUIProvider } from '../chunk-T6RL7TSQ.mjs';
 import '../chunk-6UDJNTJ6.mjs';
 import '../chunk-ONE7GLIH.mjs';

package/dist/{chunk-ZXIVSNXV.mjs → chunk-A7BKZZJ4.mjs}

@@ -184,7 +184,7 @@ var INLINE_PADDING = {
   error: "py-8",
   empty: "py-12"
 };
-var PANEL_BASE = "grid place-items-center min-h-64 w-full";
+var PANEL_BASE = "flex min-h-64 w-full flex-col items-center justify-center gap-3";
 var PAGE_MIN = "min-h-[60vh]";
 function NFeedbackStateFrame({
   surface = "inline",

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { resolveAvatarSrc } from './chunk-BEGOH366.mjs';
 export { isPlaceholderAvatar, resolveAvatarSrc } from './chunk-BEGOH366.mjs';
-import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-ZXIVSNXV.mjs';
-export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-ZXIVSNXV.mjs';
+import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-A7BKZZJ4.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-A7BKZZJ4.mjs';
 import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-6UDJNTJ6.mjs';
 export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-6UDJNTJ6.mjs';
 import { NajmScroll, useNajmScrollViewport, useTableStore, TableStoreContext, NTableJson } from './chunk-5JVFMOLI.mjs';
@@ -11887,6 +11887,9 @@ function calculateCardPageSize(input) {
 function shouldDeferCardPageSizeUntilRows(renderedMode, hasDataRows) {
   return renderedMode === "cards" && !hasDataRows;
 }
+function shouldCommitDynamicPageSizeImmediately(reportedMode, renderedMode) {
+  return reportedMode === null || reportedMode !== renderedMode;
+}
 function fallbackCardColumns(width) {
   if (width >= 1280) return 4;
   if (width >= 1024) return 3;
@@ -11900,6 +11903,7 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
+  const hasDataRows = useTableStore.use.hasData();
   const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const syncWithProps = useTableStore.use.syncWithProps();
   const lastMeasurementRef = useRef("");
@@ -11936,7 +11940,8 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
       const cardGap = Number.parseFloat(gridStyles?.rowGap || gridStyles?.gap || "") || DEFAULT_CARD_GAP;
       const firstCard = cardsGridEl?.querySelector("[data-ntable-loading-card], [data-row]");
       const cardRowHeight = firstCard?.offsetHeight || firstCard?.getBoundingClientRect().height || DEFAULT_CARD_HEIGHT;
-      const cardPageSize = calculateCardPageSize({
+      const measuredMode = effectiveViewMode ?? viewMode;
+      const cardPageSize = shouldDeferCardPageSizeUntilRows(measuredMode, hasDataRows) ? 0 : calculateCardPageSize({
         bodyHeight,
         columnCount: cardColumnCount,
         cardHeight: cardRowHeight,
@@ -11978,7 +11983,7 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
     ).forEach((el) => resizeObserver.observe(el));
     if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
-  }, [dynamicHeight, effectiveViewMode, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
+  }, [dynamicHeight, effectiveViewMode, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, hasDataRows, isFilteredEmpty]);
 }
 function useTable(effectiveViewModeOverride) {
   const [sorting, setSorting] = useState([]);
@@ -12149,18 +12154,14 @@ function useTable(effectiveViewModeOverride) {
     if (dynamicPageSizeTarget === storePagination.pageSize) return;
     if (shouldDeferCardPageSizeUntilRows(renderedMode, hasDataRows)) return;
     const reported = reportedGeometryRef.current;
-    if (reported?.key === geometryKey && reported.target === dynamicPageSizeTarget) return;
-    if (reported?.key === geometryKey && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
+    if (reported?.key === geometryKey && reported.mode === renderedMode && reported.target === dynamicPageSizeTarget) return;
+    if (reported?.key === geometryKey && reported.mode === renderedMode && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
     const commit = () => {
       const current = reportedGeometryRef.current;
-      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1, target: dynamicPageSizeTarget } : { key: geometryKey, count: 1, target: dynamicPageSizeTarget };
+      reportedGeometryRef.current = current?.key === geometryKey && current.mode === renderedMode ? { key: geometryKey, count: current.count + 1, target: dynamicPageSizeTarget, mode: renderedMode } : { key: geometryKey, count: 1, target: dynamicPageSizeTarget, mode: renderedMode };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
     };
-    if (!hasDataRows) {
-      commit();
-      return;
-    }
-    if (!reported) {
+    if (shouldCommitDynamicPageSizeImmediately(reported?.mode ?? null, renderedMode)) {
       commit();
       return;
     }

package/dist/query.mjs

@@ -73,7 +73,13 @@ function useResponsiveOffsetList({
     }
   }, [allDowngraded, queryIdentity, maxLimit]);
   const mode = wantsAll && !allDowngraded ? "all" : wantsInfinite || allDowngraded ? "infinite" : "paged";
-  const start = pagination.pageIndex * pagination.pageSize;
+  const bufferedPages = Math.max(
+    1,
+    Math.ceil(rows.length / pagination.pageSize)
+  );
+  const pageCount = buffer.total !== null ? Math.max(1, Math.ceil(buffer.total / pagination.pageSize)) : buffer.hasNextPage ? bufferedPages + 1 : bufferedPages;
+  const pageIndex = mode === "paged" ? Math.min(pagination.pageIndex, pageCount - 1) : pagination.pageIndex;
+  const start = pageIndex * pagination.pageSize;
   const data = mode === "paged" ? rows.slice(start, start + pagination.pageSize) : rows;
   const { fetchNextPage, hasNextPage, isFetchingNextPage } = buffer;
   useEffect(() => {
@@ -101,11 +107,14 @@ function useResponsiveOffsetList({
     },
     [queryIdentity]
   );
-  const bufferedPages = Math.max(
-    1,
-    Math.ceil(rows.length / pagination.pageSize)
-  );
-  const pageCount = buffer.total !== null ? Math.max(1, Math.ceil(buffer.total / pagination.pageSize)) : buffer.hasNextPage ? bufferedPages + 1 : bufferedPages;
+  useEffect(() => {
+    if (pagination.pageIndex === pageIndex) return;
+    setPagination((current) => ({
+      ...current,
+      pageIndex: Math.min(current.pageIndex, pageCount - 1),
+      queryIdentity
+    }));
+  }, [pageCount, pageIndex, pagination.pageIndex, queryIdentity]);
   return {
     cardViewport,
     mode,
@@ -123,7 +132,7 @@ function useResponsiveOffsetList({
     onPaginationChange,
     pageCount,
     pagination: {
-      pageIndex: pagination.pageIndex,
+      pageIndex,
       pageSize: pagination.pageSize
     },
     refetch: buffer.refetch

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

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