najm-kit 2.1.56 → 2.2.1

package/dist/index.mjs

@@ -12197,6 +12197,7 @@ var createTableStore = () => {
     addButtonText: "",
     pageSizeOptions: [10, 20, 30, 40, 50],
     calculatedPageSize: 10,
+    calculatedCardPageSize: 0,
     skeletonRowCount: 6,
     maxHeight: null,
     bodyWidth: 0,
@@ -12354,6 +12355,7 @@ 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;
 function useStoreSync(props) {
   const storeRef = useRef(null);
   const isControlled = props.mode !== void 0;
@@ -12441,6 +12443,14 @@ function calculateCardSkeletonCount(input) {
   const rows = Math.max(1, Math.ceil((input.bodyHeight + gap) / (cardHeight + gap)));
   return rows * columns;
 }
+function calculateCardPageSize(input) {
+  const columns = Math.max(1, input.columnCount || 1);
+  const cardHeight = Math.max(1, input.cardHeight ?? DEFAULT_CARD_HEIGHT);
+  const gap = Math.max(0, input.gap ?? DEFAULT_CARD_GAP);
+  if (input.bodyHeight <= 0) return columns;
+  const rows = Math.max(1, Math.floor((input.bodyHeight + gap) / (cardHeight + gap)));
+  return rows * columns;
+}
 function fallbackCardColumns(width) {
   if (width >= 1280) return 4;
   if (width >= 1024) return 3;
@@ -12493,8 +12503,19 @@ 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({
+        bodyHeight,
+        columnCount: cardColumnCount,
+        cardHeight: cardRowHeight,
+        gap: cardGap
+      });
       const updates = {
-        ...!manualPagination ? { calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight } : {},
+        // Measured page sizes are published in both pagination modes. Manual
+        // pagination consumes them through onPaginationChange rather than by
+        // mutating the table directly, so the consumer still owns fetching.
+        calculatedPageSize: newPageSize,
+        calculatedCardPageSize: cardPageSize,
+        ...!manualPagination ? { maxHeight: calculatedMaxHeight } : {},
         skeletonRowCount: newPageSize,
         bodyWidth,
         bodyHeight,
@@ -12543,6 +12564,9 @@ function useTable(effectiveViewModeOverride) {
   const effectiveViewMode = useTableStore.use.effectiveViewMode();
   const cardPagination = useTableStore.use.cardPagination();
   const calculatedPageSize = useTableStore.use.calculatedPageSize();
+  const calculatedCardPageSize = useTableStore.use.calculatedCardPageSize();
+  const measuredBodyHeight = useTableStore.use.bodyHeight();
+  const measuredBodyWidth = useTableStore.use.bodyWidth();
   const syncWithProps = useTableStore.use.syncWithProps();
   const onStateChange = useTableStore.use.onStateChange();
   const getRowId = useTableStore.use.getRowId();
@@ -12633,7 +12657,7 @@ function useTable(effectiveViewModeOverride) {
   }, [storePagination, storeRowSelection, setPagination, sorting, columnFilters, columnVisibility, globalFilter, notifyStateChange]);
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
   const renderedMode = effectiveViewModeOverride ?? effectiveViewMode ?? viewMode;
-  const renderAllSuppliedRows = renderedMode === "cards" && cardPagination.mode !== "paged";
+  const renderAllSuppliedRows = cardPagination.mode === "all" || renderedMode === "cards" && cardPagination.mode !== "paged";
   const tableConfig = {
     data,
     columns: finalColumns,
@@ -12669,6 +12693,32 @@ function useTable(effectiveViewModeOverride) {
       table.setPageSize(data.length || 9999);
     }
   }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination]);
+  const dynamicPageSizeTarget = renderedMode === "cards" ? calculatedCardPageSize : calculatedPageSize;
+  const geometryKey = `${renderedMode}:${measuredBodyWidth}x${measuredBodyHeight}`;
+  const reportedGeometryRef = useRef(null);
+  useEffect(() => {
+    if (!manualPagination || !dynamicHeight) return;
+    if (cardPagination.mode !== "paged") return;
+    if (measuredBodyHeight <= 0) return;
+    if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
+    if (dynamicPageSizeTarget === storePagination.pageSize) return;
+    if (reportedGeometryRef.current === geometryKey) return;
+    const timer = setTimeout(() => {
+      reportedGeometryRef.current = geometryKey;
+      setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
+    }, DYNAMIC_PAGE_SIZE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [
+    manualPagination,
+    dynamicHeight,
+    cardPagination.mode,
+    measuredBodyHeight,
+    geometryKey,
+    dynamicPageSizeTarget,
+    storePagination.pageIndex,
+    storePagination.pageSize,
+    setPagination
+  ]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
 }
 function useTableKeyboard(options = {}) {
@@ -13131,268 +13181,642 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
     }
   );
 }
-var ROW_CONTEXT_HANDLED2 = "__ntableRowContextHandled";
-function markRowContextHandled(e) {
-  e.nativeEvent[ROW_CONTEXT_HANDLED2] = true;
-}
-function isRowContextHandled(e) {
-  return Boolean(e.nativeEvent[ROW_CONTEXT_HANDLED2]);
-}
-function NTableCards({ effectiveMode }) {
-  const table = useTableStore.use.table();
-  const onRowClick = useTableStore.use.onRowClick();
-  const onRowContextMenu = useTableStore.use.onRowContextMenu();
-  const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
-  const getRowClassName = useTableStore.use.getRowClassName();
-  const openRowMenu = useTableStore.use.openRowMenu();
-  const menuButton = useTableStore.use.menuButton();
-  const onView = useTableStore.use.onView();
-  const onEdit = useTableStore.use.onEdit();
-  const onDelete = useTableStore.use.onDelete();
-  const showCheckbox = useTableStore.use.showCheckbox();
-  const selectedRowId = useTableStore.use.selectedRowId();
-  const CardComponent = useTableStore.use.CardComponent();
-  const storeIsCardView = useTableStore.use.isCardView();
-  const isLoading = useTableStore.use.isLoading();
-  const error = useTableStore.use.error();
-  const hasNoData = useTableStore.use.hasNoData();
-  const showContent = useTableStore.use.showContent();
-  const classNames = useTableStore.use.classNames();
-  const bordered = useTableStore.use.bordered();
-  const borderColor = useTableStore.use.borderColor();
-  const renderSubRow = useTableStore.use.renderSubRow();
-  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
-  const handleContainerContextMenu = useCallback((e) => {
-    if (isRowContextHandled(e)) return;
-    const gridContainer = e.currentTarget;
-    let el = e.target;
-    let gridChild = null;
-    while (el && el.parentElement && el.parentElement !== gridContainer) {
-      el = el.parentElement;
-    }
-    gridChild = el.parentElement === gridContainer ? el : null;
-    if (gridChild) {
-      const rows2 = table?.getRowModel()?.rows;
-      if (!rows2) return;
-      const children = Array.from(gridContainer.children);
-      const idx = children.indexOf(gridChild);
-      if (idx >= 0 && idx < rows2.length) {
-        const row = rows2[idx];
-        if (onRowContextMenu) {
-          markRowContextHandled(e);
-          onRowContextMenu(e, row.original);
-        }
-        return;
-      }
-    }
-    if (onBackgroundContextMenu) {
-      onBackgroundContextMenu(e);
-    }
-  }, [table, onRowContextMenu, onBackgroundContextMenu]);
-  if (isLoading || error || hasNoData || !showContent || !table) return null;
-  const isCardView = effectiveMode ? effectiveMode === "cards" : storeIsCardView;
-  if (!isCardView) return null;
-  const rows = table.getRowModel().rows;
-  if (!CardComponent) return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No CardComponent provided." });
-  const defaultContainerClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
-  const containerClass = classNames?.cards ?? defaultContainerClass;
-  const actions = !menuButton && (onView || onEdit || onDelete) ? { onView, onEdit, onDelete } : void 0;
-  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { "data-ntable-cards-grid": true, className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: rows.map((row) => {
-    const noShell = Boolean(row.original?.__smsNoShell);
-    const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
-    const canExpand = hasExpansion && row.getCanExpand();
-    const isExpanded = canExpand && row.getIsExpanded();
-    const handleClick = onRowClick ? () => onRowClick(row.original) : void 0;
-    const rowClassName = getRowClassName?.(row.original);
-    const handleCardContextMenu = onRowContextMenu ? (e) => {
-      if (isRowContextHandled(e)) return;
-      markRowContextHandled(e);
-      onRowContextMenu(e, row.original);
-    } : void 0;
-    if (noShell) {
-      return /* @__PURE__ */ jsxs(
+var DEFAULT_ROWS2 = 6;
+var DEFAULT_CARD_COUNT = 16;
+function NTableCardSkeleton({ surface }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-ntable-loading-card": true,
+      "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
+      style: surface.style,
+      className: cn("rounded-lg p-3 sm:p-4", surface.className),
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
-          onContextMenu: handleCardContextMenu,
-          "data-row": "true",
-          "data-row-id": row.id,
-          className: cn("group relative text-card-foreground", rowClassName),
+          "data-ntable-loading-card-layout": "responsive-avatar",
+          className: "grid grid-cols-[80px_minmax(0,1fr)] gap-3 sm:grid-cols-[72px_minmax(0,1fr)]",
           children: [
-            menuButton && openRowMenu && /* @__PURE__ */ jsx(
-              "button",
+            /* @__PURE__ */ jsx("div", { className: "col-start-1 row-start-1 flex items-start justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
+              NSkeleton,
               {
-                type: "button",
-                "aria-label": "Row actions",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  openRowMenu(e, row.original);
-                },
-                "data-ntable-card-action": true,
-                className: "ntable-card-action absolute end-2 top-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground transition-all duration-200 hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+                "data-ntable-loading-card-avatar": true,
+                className: "size-20 shrink-0 rounded-full sm:size-16"
               }
-            ),
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "col-start-2 row-start-1 flex min-w-0 items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36 max-w-full" }),
+                /* @__PURE__ */ jsx(NSkeleton, { className: "hidden h-3 w-16 sm:block" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-card-status": true,
+                  className: "hidden h-6 w-14 shrink-0 rounded-full sm:block"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx(
-              CardComponent,
+              "div",
               {
-                data: row.original,
-                row,
-                onClick: handleClick,
-                onContextMenu: handleCardContextMenu,
-                isExpanded,
-                onToggleExpanded: () => row.toggleExpanded(),
-                canExpand,
-                renderSubRow: canExpand && isExpanded ? renderSubRow : void 0,
-                "data-row": "true",
-                "data-row-id": row.id
+                "data-ntable-loading-card-details": true,
+                className: "col-start-2 row-start-2 space-y-1 sm:col-span-full sm:col-start-1 sm:space-y-2 sm:rounded-lg sm:bg-muted/50 sm:p-3",
+                children: Array.from({ length: 3 }).map((_, detailIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "size-3.5 shrink-0 rounded-sm sm:size-4" }),
+                  /* @__PURE__ */ jsx(
+                    NSkeleton,
+                    {
+                      className: cn(
+                        "h-3 max-w-full sm:h-4",
+                        detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/4"
+                      )
+                    }
+                  )
+                ] }, detailIndex))
               }
             )
           ]
-        },
-        row.id
-      );
+        }
+      )
     }
-    return /* @__PURE__ */ jsx(
-      NDataCardShell,
-      {
-        row,
-        onClick: handleClick,
-        onContextMenu: handleCardContextMenu,
-        actions,
-        showCheckbox,
-        selectedRowId,
-        openRowMenu,
-        menuButton,
-        bordered,
-        borderColor,
-        className: rowClassName || void 0,
-        children: /* @__PURE__ */ jsx(
-          CardComponent,
-          {
-            data: row.original,
-            row,
-            isExpanded,
-            onToggleExpanded: () => row.toggleExpanded(),
-            canExpand,
-            renderSubRow: canExpand && isExpanded ? renderSubRow : void 0
-          }
-        )
-      },
-      row.id
-    );
-  }) }) });
+  );
 }
-function CardLoadMorePagination({
-  config,
-  rowCount,
-  bordered,
-  className
-}) {
-  const [internalPending, setInternalPending] = React__default.useState(false);
-  const [internalError, setInternalError] = React__default.useState(null);
-  const [announcement, setAnnouncement] = React__default.useState("");
-  const buttonRef = React__default.useRef(null);
-  const pendingRef = React__default.useRef(false);
-  const restoreFocusRef = React__default.useRef(false);
-  const previousRowCountRef = React__default.useRef(rowCount);
-  const errorId = React__default.useId();
-  const pending = Boolean(config.loadingMore || internalPending);
-  const error = config.loadMoreError ?? internalError;
-  React__default.useEffect(() => {
-    const previous = previousRowCountRef.current;
-    if (rowCount > previous) {
-      const appended = rowCount - previous;
-      setAnnouncement(
-        config.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
-      );
-    }
-    previousRowCountRef.current = rowCount;
-  }, [config.itemsLoadedLabel, rowCount]);
-  React__default.useEffect(() => {
-    if (pending || !restoreFocusRef.current) return;
-    restoreFocusRef.current = false;
-    const frame = requestAnimationFrame(() => buttonRef.current?.focus());
-    return () => cancelAnimationFrame(frame);
-  }, [pending]);
-  const loadMore = async () => {
-    if (pendingRef.current || pending || !config.hasNextPage && !error) return;
-    pendingRef.current = true;
-    restoreFocusRef.current = document.activeElement === buttonRef.current;
-    setInternalPending(true);
-    setInternalError(null);
-    const loadingAnnouncement = config.loadingMoreLabel ?? "Loading more items...";
-    setAnnouncement(loadingAnnouncement);
-    try {
-      await config.onLoadMore();
-    } catch {
-      setInternalError(config.loadMoreErrorLabel ?? "Couldn't load more items.");
-      setAnnouncement("");
-    } finally {
-      pendingRef.current = false;
-      setInternalPending(false);
-      setAnnouncement((current) => current === loadingAnnouncement ? "" : current);
-    }
-  };
-  if (!config.hasNextPage && !pending && !error) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-ntable-load-more-end": true,
-        role: "status",
-        "aria-live": "polite",
-        className: cn("py-2 text-center text-sm text-muted-foreground", className),
-        children: config.endLabel ?? "No more items."
-      }
-    );
-  }
+function NTableHeaderSkeleton() {
+  const filters = useTableStore.use.filters();
+  const showViewToggle = useTableStore.use.showViewToggle();
+  const showColumnVisibility = useTableStore.use.showColumnVisibility();
+  const showAddButton = useTableStore.use.showAddButton();
+  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
+  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
+  const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
+  const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
+  const hasSettings = showViewToggle || showColumnVisibility || hasHeaderSlot || hasToolbar;
+  if (!filters?.length && !hasActions) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-ntable-load-more": true,
-      className: cn("flex min-w-0 flex-col items-center gap-2 py-2", className),
+      "data-ntable-loading-header": true,
+      className: "flex shrink-0 flex-wrap items-center justify-between gap-2",
       children: [
-        error ? /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "text-center text-sm text-destructive", children: error === true ? config.loadMoreErrorLabel ?? "Couldn't load more items." : error }) : null,
+        filters?.length ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-ntable-loading-desktop-filters": true,
+            className: "hidden min-w-0 flex-1 flex-wrap gap-2 md:flex",
+            children: Array.from({ length: filterCount }).map((_, index) => /* @__PURE__ */ jsx(
+              NSkeleton,
+              {
+                className: cn("h-10 w-full rounded-lg", index < 2 ? "max-w-64" : "max-w-48")
+              },
+              index
+            ))
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 md:block" }),
         /* @__PURE__ */ jsxs(
-          Button,
+          "div",
           {
-            ref: buttonRef,
-            type: "button",
-            bordered,
-            variant: "outline",
-            autoLoading: false,
-            disabled: pending,
-            "aria-describedby": error ? errorId : void 0,
-            "aria-busy": pending ? "true" : void 0,
-            onClick: loadMore,
+            "data-ntable-loading-mobile-toolbar": true,
+            className: "flex w-full min-w-0 items-center gap-2 md:hidden",
             children: [
-              pending ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin motion-reduce:animate-none" }) : null,
-              pending ? config.loadingMoreLabel ?? "Loading more..." : error ? config.retryLabel ?? "Retry" : config.loadMoreLabel ?? "Load more"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })
-      ]
-    }
-  );
-}
-function NTablePagination() {
-  const table = useTableStore.use.table();
-  const showPagination = useTableStore.use.showPagination();
-  const showContent = useTableStore.use.showContent();
-  const pageSizeOptions = useTableStore.use.pageSizeOptions();
-  const classNames = useTableStore.use.classNames();
-  const effectiveViewMode = useTableStore.use.effectiveViewMode();
-  const cardPagination = useTableStore.use.cardPagination();
-  const data = useTableStore.use.data();
-  const pagination = useTableStore.use.pagination();
-  const manualPagination = useTableStore.use.manualPagination();
-  const pageCount = useTableStore.use.pageCount();
+              filters?.length ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-primary": true,
+                  className: "h-10 min-w-0 flex-1 rounded-lg"
+                }
+              ) : null,
+              filters?.length > 1 ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-filter-button": true,
+                  className: "h-10 w-10 shrink-0 rounded-lg"
+                }
+              ) : null,
+              showAddButton ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-add-button": true,
+                  className: "h-10 w-10 shrink-0 rounded-lg"
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 gap-2 md:flex", children: [
+          hasSettings && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" }),
+          showAddButton && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" })
+        ] })
+      ]
+    }
+  );
+}
+function NTableLoadingSkeleton({ rows }) {
+  const rawColumns = useTableStore.use.columns();
+  const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
+  const columns = responsiveColumns;
+  const showCheckbox = useTableStore.use.showCheckbox();
+  const headerClassName = useTableStore.use.headerClassName();
+  const classNames = useTableStore.use.classNames();
+  const dynamicHeight = useTableStore.use.dynamicHeight();
+  const bordered = useTableStore.use.bordered();
+  const borderColor = useTableStore.use.borderColor();
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
+  const bodyHeight = useTableStore.use.bodyHeight();
+  const skeletonRowCount = useTableStore.use.skeletonRowCount();
+  const renderSubRow = useTableStore.use.renderSubRow();
+  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
+  const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
+  const loadingText = useTableStore.use.loadingText();
+  const rowCount = rows ?? (dynamicHeight && bodyHeight > 0 ? skeletonRowCount : DEFAULT_ROWS2);
+  const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "ntable-loading-skeleton",
+        "data-ntable-loading-row-count": rowCount,
+        "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
+        "aria-busy": "true",
+        "aria-label": loadingText,
+        role: "status",
+        style: surface.style,
+        className: cn("min-h-0 flex-1 rounded-md p-0", surface.className, dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll h-full" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+              showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
+              hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
+              columns.map((col, i) => /* @__PURE__ */ jsx(
+                TableHead,
+                {
+                  className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                  style: col?.size ? { width: col.size } : void 0,
+                  children: renderHeaderLabel(col?.header)
+                },
+                col?.id ?? col?.accessorKey ?? i
+              ))
+            ] }) }),
+            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+              columns.map((col, c) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                  style: col?.size ? { width: col.size } : void 0,
+                  children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
+                },
+                `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
+              ))
+            ] }, `skeleton-${r}`)) })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function NTableCardsLoadingSkeleton({ rows }) {
+  const filters = useTableStore.use.filters();
+  const showViewToggle = useTableStore.use.showViewToggle();
+  const showColumnVisibility = useTableStore.use.showColumnVisibility();
+  const showAddButton = useTableStore.use.showAddButton();
+  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
+  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
+  const hasHeaderSkeleton = Boolean(
+    filters?.length || showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar
+  );
+  const classNames = useTableStore.use.classNames();
+  const bordered = useTableStore.use.bordered();
+  const borderColor = useTableStore.use.borderColor();
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
+  const dynamicHeight = useTableStore.use.dynamicHeight();
+  const bodyHeight = useTableStore.use.bodyHeight();
+  const cardColumnCount = useTableStore.use.cardColumnCount();
+  const cardRowHeight = useTableStore.use.cardRowHeight();
+  const cardGap = useTableStore.use.cardGap();
+  const loadingText = useTableStore.use.loadingText();
+  const cardCount = rows ?? (dynamicHeight && bodyHeight > 0 ? calculateCardSkeletonCount({
+    bodyHeight,
+    columnCount: cardColumnCount,
+    cardHeight: cardRowHeight,
+    gap: cardGap
+  }) : DEFAULT_CARD_COUNT);
+  const defaultContainerClass = "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+  const containerClass = classNames?.cards ?? defaultContainerClass;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+    hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
+    /* @__PURE__ */ jsxs(
+      NajmScroll,
+      {
+        axis: "y",
+        "aria-busy": "true",
+        "aria-label": loadingText,
+        role: "status",
+        className: "min-h-0 flex-1 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "ntable-cards-loading-skeleton",
+              "data-ntable-loading-cards-grid": true,
+              "data-ntable-loading-card-count": cardCount,
+              "aria-hidden": "true",
+              className: cn(containerClass),
+              children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, index))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var DEFAULT_ROOT_MARGIN = "80px";
+function useCardContinuation({
+  config,
+  rowCount,
+  viewportRef
+}) {
+  const [internalPending, setInternalPending] = React__default.useState(false);
+  const [internalError, setInternalError] = React__default.useState(null);
+  const [announcement, setAnnouncement] = React__default.useState("");
+  const [viewportReady, setViewportReady] = React__default.useState(false);
+  const pendingRef = React__default.useRef(false);
+  const previousRowCountRef = React__default.useRef(rowCount);
+  const configRef = React__default.useRef(config);
+  configRef.current = config;
+  const enabled = Boolean(config);
+  const pending = Boolean(config?.loadingMore || internalPending);
+  const error = config?.loadMoreError ?? internalError;
+  const hasNextPage = Boolean(config?.hasNextPage);
+  const load = React__default.useCallback(async () => {
+    const current = configRef.current;
+    if (!current) return;
+    if (pendingRef.current || current.loadingMore || !current.hasNextPage) return;
+    pendingRef.current = true;
+    setInternalPending(true);
+    setInternalError(null);
+    const loadingAnnouncement = current.loadingMoreLabel ?? "Loading more items...";
+    setAnnouncement(loadingAnnouncement);
+    try {
+      await current.onLoadMore();
+    } catch {
+      setInternalError(current.loadMoreErrorLabel ?? "Couldn't load more items.");
+      setAnnouncement("");
+    } finally {
+      pendingRef.current = false;
+      setInternalPending(false);
+      setAnnouncement((value) => value === loadingAnnouncement ? "" : value);
+    }
+  }, []);
+  const { sentinelRef, scrollContainerRef, observe, doneLoading } = useInfiniteScroll(
+    enabled && hasNextPage && !error,
+    load,
+    { rootMargin: config?.rootMargin ?? DEFAULT_ROOT_MARGIN }
+  );
+  React__default.useLayoutEffect(() => {
+    const node = viewportRef.current ?? null;
+    scrollContainerRef.current = node;
+    const ready = Boolean(node);
+    setViewportReady((value) => value === ready ? value : ready);
+  });
+  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;
+  }, [rowCount]);
+  React__default.useEffect(() => {
+    if (!pending) doneLoading();
+  }, [pending, doneLoading]);
+  React__default.useEffect(() => {
+    if (!enabled || !hasNextPage || error) return;
+    return observe();
+  }, [enabled, hasNextPage, error, observe, viewportReady, rowCount]);
+  return {
+    /** Attach to an element rendered after the last card. */
+    sentinelRef,
+    /** True while a page is in flight; render shaped placeholders. */
+    pending,
+    /** Present only after an append failure; render the retry target. */
+    error,
+    /** Retry an append. Also used as the manual escape hatch after failure. */
+    retry: load,
+    /** Polite live-region text. Never rendered visibly. */
+    announcement,
+    /** Whether a sentinel should exist at all. */
+    active: enabled && hasNextPage && !error
+  };
+}
+var ROW_CONTEXT_HANDLED2 = "__ntableRowContextHandled";
+function markRowContextHandled(e) {
+  e.nativeEvent[ROW_CONTEXT_HANDLED2] = true;
+}
+function isRowContextHandled(e) {
+  return Boolean(e.nativeEvent[ROW_CONTEXT_HANDLED2]);
+}
+function NTableCards({ effectiveMode }) {
+  const table = useTableStore.use.table();
+  const onRowClick = useTableStore.use.onRowClick();
+  const onRowContextMenu = useTableStore.use.onRowContextMenu();
+  const onBackgroundContextMenu = useTableStore.use.onBackgroundContextMenu();
+  const getRowClassName = useTableStore.use.getRowClassName();
+  const openRowMenu = useTableStore.use.openRowMenu();
+  const menuButton = useTableStore.use.menuButton();
+  const onView = useTableStore.use.onView();
+  const onEdit = useTableStore.use.onEdit();
+  const onDelete = useTableStore.use.onDelete();
+  const showCheckbox = useTableStore.use.showCheckbox();
+  const selectedRowId = useTableStore.use.selectedRowId();
+  const CardComponent = useTableStore.use.CardComponent();
+  const storeIsCardView = useTableStore.use.isCardView();
+  const isLoading = useTableStore.use.isLoading();
+  const error = useTableStore.use.error();
+  const hasNoData = useTableStore.use.hasNoData();
+  const showContent = useTableStore.use.showContent();
+  const classNames = useTableStore.use.classNames();
+  const bordered = useTableStore.use.bordered();
+  const borderColor = useTableStore.use.borderColor();
+  const renderSubRow = useTableStore.use.renderSubRow();
+  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
+  const cardPagination = useTableStore.use.cardPagination();
+  const cardColumnCount = useTableStore.use.cardColumnCount();
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
+  const viewportRef = React__default.useRef(null);
+  const continuationConfig = cardPagination.mode === "infinite" ? cardPagination : null;
+  const continuation = useCardContinuation({
+    config: continuationConfig,
+    rowCount: table?.getRowModel().rows.length ?? 0,
+    viewportRef
+  });
+  const handleContainerContextMenu = useCallback((e) => {
+    if (isRowContextHandled(e)) return;
+    const gridContainer = e.currentTarget;
+    let el = e.target;
+    let gridChild = null;
+    while (el && el.parentElement && el.parentElement !== gridContainer) {
+      el = el.parentElement;
+    }
+    gridChild = el.parentElement === gridContainer ? el : null;
+    if (gridChild) {
+      const rows2 = table?.getRowModel()?.rows;
+      if (!rows2) return;
+      const children = Array.from(gridContainer.children);
+      const idx = children.indexOf(gridChild);
+      if (idx >= 0 && idx < rows2.length) {
+        const row = rows2[idx];
+        if (onRowContextMenu) {
+          markRowContextHandled(e);
+          onRowContextMenu(e, row.original);
+        }
+        return;
+      }
+    }
+    if (onBackgroundContextMenu) {
+      onBackgroundContextMenu(e);
+    }
+  }, [table, onRowContextMenu, onBackgroundContextMenu]);
+  if (isLoading || error || hasNoData || !showContent || !table) return null;
+  const isCardView = effectiveMode ? effectiveMode === "cards" : storeIsCardView;
+  if (!isCardView) return null;
+  const rows = table.getRowModel().rows;
+  if (!CardComponent) return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No CardComponent provided." });
+  const defaultContainerClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
+  const containerClass = classNames?.cards ?? defaultContainerClass;
+  const actions = !menuButton && (onView || onEdit || onDelete) ? { onView, onEdit, onDelete } : void 0;
+  return /* @__PURE__ */ jsxs(NajmScroll, { axis: "y", viewportRef, className: "min-h-0 flex-1 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { "data-ntable-cards-grid": true, className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: [
+      rows.map((row) => {
+        const noShell = Boolean(row.original?.__smsNoShell);
+        const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
+        const canExpand = hasExpansion && row.getCanExpand();
+        const isExpanded = canExpand && row.getIsExpanded();
+        const handleClick = onRowClick ? () => onRowClick(row.original) : void 0;
+        const rowClassName = getRowClassName?.(row.original);
+        const handleCardContextMenu = onRowContextMenu ? (e) => {
+          if (isRowContextHandled(e)) return;
+          markRowContextHandled(e);
+          onRowContextMenu(e, row.original);
+        } : void 0;
+        if (noShell) {
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onContextMenu: handleCardContextMenu,
+              "data-row": "true",
+              "data-row-id": row.id,
+              className: cn("group relative text-card-foreground", rowClassName),
+              children: [
+                menuButton && openRowMenu && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Row actions",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      openRowMenu(e, row.original);
+                    },
+                    "data-ntable-card-action": true,
+                    className: "ntable-card-action absolute end-2 top-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground transition-all duration-200 hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CardComponent,
+                  {
+                    data: row.original,
+                    row,
+                    onClick: handleClick,
+                    onContextMenu: handleCardContextMenu,
+                    isExpanded,
+                    onToggleExpanded: () => row.toggleExpanded(),
+                    canExpand,
+                    renderSubRow: canExpand && isExpanded ? renderSubRow : void 0,
+                    "data-row": "true",
+                    "data-row-id": row.id
+                  }
+                )
+              ]
+            },
+            row.id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          NDataCardShell,
+          {
+            row,
+            onClick: handleClick,
+            onContextMenu: handleCardContextMenu,
+            actions,
+            showCheckbox,
+            selectedRowId,
+            openRowMenu,
+            menuButton,
+            bordered,
+            borderColor,
+            className: rowClassName || void 0,
+            children: /* @__PURE__ */ jsx(
+              CardComponent,
+              {
+                data: row.original,
+                row,
+                isExpanded,
+                onToggleExpanded: () => row.toggleExpanded(),
+                canExpand,
+                renderSubRow: canExpand && isExpanded ? renderSubRow : void 0
+              }
+            )
+          },
+          row.id
+        );
+      }),
+      continuation.pending ? Array.from({ length: Math.max(1, cardColumnCount || 1) }).map((_, index) => /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, `ntable-continuation-skeleton-${index}`)) : null
+    ] }),
+    continuation.error ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-ntable-cards-continuation-error": true,
+        className: "flex flex-col items-center gap-2 py-3",
+        children: [
+          /* @__PURE__ */ jsx("div", { role: "alert", className: "text-center text-sm text-destructive", children: continuation.error === true ? continuationConfig?.loadMoreErrorLabel ?? "Couldn't load more items." : continuation.error }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              bordered,
+              variant: "outline",
+              autoLoading: false,
+              disabled: continuation.pending,
+              onClick: continuation.retry,
+              children: continuationConfig?.retryLabel ?? "Retry"
+            }
+          )
+        ]
+      }
+    ) : 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 })
+  ] });
+}
+function CardLoadMorePagination({
+  config,
+  rowCount,
+  bordered,
+  className
+}) {
+  const [internalPending, setInternalPending] = React__default.useState(false);
+  const [internalError, setInternalError] = React__default.useState(null);
+  const [announcement, setAnnouncement] = React__default.useState("");
+  const buttonRef = React__default.useRef(null);
+  const pendingRef = React__default.useRef(false);
+  const restoreFocusRef = React__default.useRef(false);
+  const previousRowCountRef = React__default.useRef(rowCount);
+  const errorId = React__default.useId();
+  const pending = Boolean(config.loadingMore || internalPending);
+  const error = config.loadMoreError ?? internalError;
+  React__default.useEffect(() => {
+    const previous = previousRowCountRef.current;
+    if (rowCount > previous) {
+      const appended = rowCount - previous;
+      setAnnouncement(
+        config.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
+      );
+    }
+    previousRowCountRef.current = rowCount;
+  }, [config.itemsLoadedLabel, rowCount]);
+  React__default.useEffect(() => {
+    if (pending || !restoreFocusRef.current) return;
+    restoreFocusRef.current = false;
+    const frame = requestAnimationFrame(() => buttonRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [pending]);
+  const loadMore = async () => {
+    if (pendingRef.current || pending || !config.hasNextPage && !error) return;
+    pendingRef.current = true;
+    restoreFocusRef.current = document.activeElement === buttonRef.current;
+    setInternalPending(true);
+    setInternalError(null);
+    const loadingAnnouncement = config.loadingMoreLabel ?? "Loading more items...";
+    setAnnouncement(loadingAnnouncement);
+    try {
+      await config.onLoadMore();
+    } catch {
+      setInternalError(config.loadMoreErrorLabel ?? "Couldn't load more items.");
+      setAnnouncement("");
+    } finally {
+      pendingRef.current = false;
+      setInternalPending(false);
+      setAnnouncement((current) => current === loadingAnnouncement ? "" : current);
+    }
+  };
+  if (!config.hasNextPage && !pending && !error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ntable-load-more-end": true,
+        role: "status",
+        "aria-live": "polite",
+        className: cn("py-2 text-center text-sm text-muted-foreground", className),
+        children: config.endLabel ?? "No more items."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ntable-load-more": true,
+      className: cn("flex min-w-0 flex-col items-center gap-2 py-2", className),
+      children: [
+        error ? /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "text-center text-sm text-destructive", children: error === true ? config.loadMoreErrorLabel ?? "Couldn't load more items." : error }) : null,
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ref: buttonRef,
+            type: "button",
+            bordered,
+            variant: "outline",
+            autoLoading: false,
+            disabled: pending,
+            "aria-describedby": error ? errorId : void 0,
+            "aria-busy": pending ? "true" : void 0,
+            onClick: loadMore,
+            children: [
+              pending ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin motion-reduce:animate-none" }) : null,
+              pending ? config.loadingMoreLabel ?? "Loading more..." : error ? config.retryLabel ?? "Retry" : config.loadMoreLabel ?? "Load more"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+      ]
+    }
+  );
+}
+function NTablePagination() {
+  const table = useTableStore.use.table();
+  const showPagination = useTableStore.use.showPagination();
+  const showContent = useTableStore.use.showContent();
+  const pageSizeOptions = useTableStore.use.pageSizeOptions();
+  const classNames = useTableStore.use.classNames();
+  const effectiveViewMode = useTableStore.use.effectiveViewMode();
+  const cardPagination = useTableStore.use.cardPagination();
+  const data = useTableStore.use.data();
+  const pagination = useTableStore.use.pagination();
+  const manualPagination = useTableStore.use.manualPagination();
+  const pageCount = useTableStore.use.pageCount();
   const rowCount = useTableStore.use.rowCount();
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
   if (!table || !showContent || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
-  if (effectiveViewMode === "cards" && cardPagination.mode === "all") return null;
+  if (cardPagination.mode === "all") return null;
+  if (effectiveViewMode === "cards" && cardPagination.mode === "infinite") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
     return /* @__PURE__ */ jsx(
       CardLoadMorePagination,
@@ -13770,257 +14194,6 @@ function NTableJson() {
   if (viewMode !== "json") return null;
   return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
-var DEFAULT_ROWS2 = 6;
-var DEFAULT_CARD_COUNT = 16;
-function NTableHeaderSkeleton() {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
-  const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
-  const hasSettings = showViewToggle || showColumnVisibility || hasHeaderSlot || hasToolbar;
-  if (!filters?.length && !hasActions) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ntable-loading-header": true,
-      className: "flex shrink-0 flex-wrap items-center justify-between gap-2",
-      children: [
-        filters?.length ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-ntable-loading-desktop-filters": true,
-            className: "hidden min-w-0 flex-1 flex-wrap gap-2 md:flex",
-            children: Array.from({ length: filterCount }).map((_, index) => /* @__PURE__ */ jsx(
-              NSkeleton,
-              {
-                className: cn("h-10 w-full rounded-lg", index < 2 ? "max-w-64" : "max-w-48")
-              },
-              index
-            ))
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 md:block" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-ntable-loading-mobile-toolbar": true,
-            className: "flex w-full min-w-0 items-center gap-2 md:hidden",
-            children: [
-              filters?.length ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-primary": true,
-                  className: "h-10 min-w-0 flex-1 rounded-lg"
-                }
-              ) : null,
-              filters?.length > 1 ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-filter-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null,
-              showAddButton ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-add-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null
-            ]
-          }
-        ),
-        hasActions && /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 gap-2 md:flex", children: [
-          hasSettings && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" }),
-          showAddButton && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" })
-        ] })
-      ]
-    }
-  );
-}
-function NTableLoadingSkeleton({ rows }) {
-  const rawColumns = useTableStore.use.columns();
-  const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
-  const columns = responsiveColumns;
-  const showCheckbox = useTableStore.use.showCheckbox();
-  const headerClassName = useTableStore.use.headerClassName();
-  const classNames = useTableStore.use.classNames();
-  const dynamicHeight = useTableStore.use.dynamicHeight();
-  const bordered = useTableStore.use.bordered();
-  const borderColor = useTableStore.use.borderColor();
-  const surface = useTableSurfaceAppearance(bordered, borderColor);
-  const bodyHeight = useTableStore.use.bodyHeight();
-  const skeletonRowCount = useTableStore.use.skeletonRowCount();
-  const renderSubRow = useTableStore.use.renderSubRow();
-  const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
-  const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
-  const loadingText = useTableStore.use.loadingText();
-  const rowCount = rows ?? (dynamicHeight && bodyHeight > 0 ? skeletonRowCount : DEFAULT_ROWS2);
-  const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "ntable-loading-skeleton",
-        "data-ntable-loading-row-count": rowCount,
-        "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        style: surface.style,
-        className: cn("min-h-0 flex-1 rounded-md p-0", surface.className, dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll h-full" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
-              hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-              columns.map((col, i) => /* @__PURE__ */ jsx(
-                TableHead,
-                {
-                  className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: renderHeaderLabel(col?.header)
-                },
-                col?.id ?? col?.accessorKey ?? i
-              ))
-            ] }) }),
-            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              columns.map((col, c) => /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
-                },
-                `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
-              ))
-            ] }, `skeleton-${r}`)) })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
-function NTableCardsLoadingSkeleton({ rows }) {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const hasHeaderSkeleton = Boolean(
-    filters?.length || showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar
-  );
-  const classNames = useTableStore.use.classNames();
-  const bordered = useTableStore.use.bordered();
-  const borderColor = useTableStore.use.borderColor();
-  const surface = useTableSurfaceAppearance(bordered, borderColor);
-  const dynamicHeight = useTableStore.use.dynamicHeight();
-  const bodyHeight = useTableStore.use.bodyHeight();
-  const cardColumnCount = useTableStore.use.cardColumnCount();
-  const cardRowHeight = useTableStore.use.cardRowHeight();
-  const cardGap = useTableStore.use.cardGap();
-  const loadingText = useTableStore.use.loadingText();
-  const cardCount = rows ?? (dynamicHeight && bodyHeight > 0 ? calculateCardSkeletonCount({
-    bodyHeight,
-    columnCount: cardColumnCount,
-    cardHeight: cardRowHeight,
-    gap: cardGap
-  }) : DEFAULT_CARD_COUNT);
-  const defaultContainerClass = "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
-  const containerClass = classNames?.cards ?? defaultContainerClass;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-    hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsxs(
-      NajmScroll,
-      {
-        axis: "y",
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        className: "min-h-0 flex-1 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ntable-cards-loading-skeleton",
-              "data-ntable-loading-cards-grid": true,
-              "data-ntable-loading-card-count": cardCount,
-              "aria-hidden": "true",
-              className: cn(containerClass),
-              children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-ntable-loading-card": true,
-                  "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
-                  style: surface.style,
-                  className: cn("rounded-lg p-3 sm:p-4", surface.className),
-                  children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      "data-ntable-loading-card-layout": "responsive-avatar",
-                      className: "grid grid-cols-[80px_minmax(0,1fr)] gap-3 sm:grid-cols-[72px_minmax(0,1fr)]",
-                      children: [
-                        /* @__PURE__ */ jsx("div", { className: "col-start-1 row-start-1 flex items-start justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
-                          NSkeleton,
-                          {
-                            "data-ntable-loading-card-avatar": true,
-                            className: "size-20 shrink-0 rounded-full sm:size-16"
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxs("div", { className: "col-start-2 row-start-1 flex min-w-0 items-start justify-between gap-3", children: [
-                          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
-                            /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36 max-w-full" }),
-                            /* @__PURE__ */ jsx(NSkeleton, { className: "hidden h-3 w-16 sm:block" })
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            NSkeleton,
-                            {
-                              "data-ntable-loading-card-status": true,
-                              className: "hidden h-6 w-14 shrink-0 rounded-full sm:block"
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            "data-ntable-loading-card-details": true,
-                            className: "col-start-2 row-start-2 space-y-1 sm:col-span-full sm:col-start-1 sm:space-y-2 sm:rounded-lg sm:bg-muted/50 sm:p-3",
-                            children: Array.from({ length: 3 }).map((_2, detailIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
-                              /* @__PURE__ */ jsx(NSkeleton, { className: "size-3.5 shrink-0 rounded-sm sm:size-4" }),
-                              /* @__PURE__ */ jsx(
-                                NSkeleton,
-                                {
-                                  className: cn(
-                                    "h-3 max-w-full sm:h-4",
-                                    detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/4"
-                                  )
-                                }
-                              )
-                            ] }, detailIndex))
-                          }
-                        )
-                      ]
-                    }
-                  )
-                },
-                index
-              ))
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
 function TableStateSlot({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-64 flex-1 items-center justify-center", children });
 }