najm-kit 2.1.47 → 2.1.49

package/dist/index.mjs

@@ -7274,7 +7274,7 @@ function NSkeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-accent", className),
+      className: cn("animate-pulse rounded-md bg-accent motion-reduce:animate-none", className),
       "aria-hidden": "true",
       ...props
     }
@@ -9850,12 +9850,74 @@ function UploaderRow({ item, onCancel, onRemove }) {
     }
   );
 }
+
+// src/components/inputs/imagePreview.ts
+var NON_APPENDABLE_PREFIXES = ["data:", "blob:", "javascript:", "file:"];
+function isNonAppendable(src) {
+  const lower = src.toLowerCase();
+  return NON_APPENDABLE_PREFIXES.some((prefix) => lower.startsWith(prefix));
+}
+function isMeaningful(src) {
+  return typeof src === "string" && src.length > 0;
+}
+function appendImageVersion(src, version) {
+  if (!isMeaningful(src)) return src;
+  if (version == null || version === "") return src;
+  if (isNonAppendable(src)) return src;
+  const fragmentIndex = src.indexOf("#");
+  const beforeFragment = fragmentIndex === -1 ? src : src.slice(0, fragmentIndex);
+  const fragment = fragmentIndex === -1 ? "" : src.slice(fragmentIndex);
+  const queryIndex = beforeFragment.indexOf("?");
+  const base = queryIndex === -1 ? beforeFragment : beforeFragment.slice(0, queryIndex);
+  const existingQuery = queryIndex === -1 ? "" : beforeFragment.slice(queryIndex);
+  const separator = existingQuery ? "&" : "?";
+  const versionString = `${separator}v=${encodeURIComponent(String(version))}`;
+  if (!existingQuery && !fragment) {
+    return `${base}${versionString}`;
+  }
+  if (!existingQuery) {
+    return `${base}${versionString}${fragment}`;
+  }
+  if (!fragment) {
+    return `${base}${existingQuery}${versionString}`;
+  }
+  return `${base}${existingQuery}${versionString}${fragment}`;
+}
+function appendVersionToCandidate(src, version) {
+  if (version == null || version === "") return src;
+  if (isNonAppendable(src)) return src;
+  return appendImageVersion(src, version);
+}
+function buildPreviewCandidates(options) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  const push = (src, source) => {
+    if (!isMeaningful(src)) return;
+    if (seen.has(src)) return;
+    seen.add(src);
+    result.push({ src, source });
+  };
+  push(options.value ?? null, "value");
+  push(options.fallback ?? null, "fallback");
+  push(options.defaultImage ?? null, "default");
+  const version = options.imageVersion;
+  if (version == null || version === "") return result;
+  return result.map((candidate) => ({
+    src: appendVersionToCandidate(candidate.src, version),
+    source: candidate.source
+  }));
+}
+function candidatesKey(candidates) {
+  return candidates.map((candidate) => `${candidate.source}:${candidate.src}`).join("|");
+}
 var IMAGE_SIZE_MAP = {
   sm: "w-16 h-16",
   md: "w-24 h-24",
   lg: "w-32 h-32",
   xl: "w-40 h-40"
 };
+var CONTROL_VISIBILITY = "nimage-input-control";
+var COMPACT_OVERLAY_VISIBILITY = "nimage-input-compact-overlay";
 function ImageInput({
   value,
   onChange,
@@ -9863,11 +9925,19 @@ function ImageInput({
   previewClassName,
   previewStyle,
   contentClassName,
+  imageClassName,
   showPreview = true,
   previewPosition = "top",
   allowClear = true,
   accept = "image/*",
   defaultImage,
+  fallbackImage,
+  previewAlt,
+  fallbackAlt,
+  unavailableContent,
+  onPreviewError,
+  replaceAriaLabel,
+  clearAriaLabel,
   imageSize = "md",
   imageVersion,
   disabled = false,
@@ -9882,117 +9952,242 @@ function ImageInput({
   buttonLabel = "Upload"
 }) {
   const fileInputRef = useRef(null);
-  const [preview, setPreview] = useState(null);
+  const [localFilePreview, setLocalFilePreview] = useState(null);
+  const [failedSources, setFailedSources] = useState(() => /* @__PURE__ */ new Set());
+  const readerTokenRef = useRef(0);
+  const previewCandidates = useMemo(() => {
+    if (value instanceof File) return [];
+    if (typeof value === "string" && value) {
+      return buildPreviewCandidates({
+        value,
+        fallback: fallbackImage ?? null,
+        defaultImage: defaultImage ?? null,
+        imageVersion
+      });
+    }
+    return buildPreviewCandidates({
+      value: null,
+      fallback: null,
+      defaultImage: defaultImage ?? null,
+      imageVersion
+    });
+  }, [value, fallbackImage, defaultImage, imageVersion]);
+  const candidateKeyValue = useMemo(
+    () => candidatesKey(previewCandidates),
+    [previewCandidates]
+  );
+  const [trackedKey, setTrackedKey] = useState(candidateKeyValue);
+  if (trackedKey !== candidateKeyValue) {
+    setTrackedKey(candidateKeyValue);
+    setFailedSources(/* @__PURE__ */ new Set());
+  }
   useEffect(() => {
-    if (value instanceof File) {
-      const reader = new FileReader();
-      reader.onloadend = () => setPreview(reader.result);
-      reader.readAsDataURL(value);
-    } else if (typeof value === "string" && value) {
-      const url = imageVersion != null ? `${value}?v=${imageVersion}` : value;
-      setPreview(url);
-    } else {
-      setPreview(null);
+    if (!(value instanceof File)) {
+      setLocalFilePreview(null);
+      return void 0;
+    }
+    const token = ++readerTokenRef.current;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (token !== readerTokenRef.current) return;
+      if (typeof reader.result === "string") {
+        setLocalFilePreview(reader.result);
+      }
+    };
+    reader.onerror = () => {
+      if (token !== readerTokenRef.current) return;
+      setLocalFilePreview(null);
+    };
+    reader.readAsDataURL(value);
+    return () => {
+      if (token === readerTokenRef.current) {
+        readerTokenRef.current = token - 1;
+      }
+    };
+  }, [value]);
+  const activeCandidate = useMemo(() => {
+    if (value instanceof File) return null;
+    for (const candidate of previewCandidates) {
+      if (!failedSources.has(candidate.src)) return candidate;
     }
-  }, [value, imageVersion]);
+    return null;
+  }, [previewCandidates, failedSources, value]);
+  const handleCandidateError = (candidate) => {
+    setFailedSources((prev) => {
+      if (prev.has(candidate.src)) return prev;
+      const next = new Set(prev);
+      next.add(candidate.src);
+      return next;
+    });
+    onPreviewError?.({ source: candidate.source, src: candidate.src });
+  };
   const handleClick = () => {
-    if (!disabled) fileInputRef.current?.click();
+    if (disabled) return;
+    fileInputRef.current?.click();
   };
   const handleChange = (e) => {
     const file = e.target.files?.[0] || null;
     if (file) onChange(file);
+    e.target.value = "";
   };
   const handleClear = (e) => {
     e.stopPropagation();
+    if (disabled) return;
     onChange(null);
-    setPreview(null);
+    setLocalFilePreview(null);
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
+  const handleImgError = () => {
+    if (value instanceof File) return;
+    if (activeCandidate) handleCandidateError(activeCandidate);
+  };
   const effectiveSize = previewClassName || IMAGE_SIZE_MAP[imageSize];
   const isDropzone = !!previewClassName;
   const effectiveReplaceSubtitle = replaceSubtitle ?? subtitle;
+  const primaryAlt = previewAlt ?? replaceTitle ?? "Preview";
+  const secondaryAlt = fallbackAlt ?? previewAlt ?? replaceTitle ?? "Preview";
+  const replaceAccessibleName = replaceAriaLabel ?? replaceTitle;
+  const clearAccessibleName = clearAriaLabel ?? "Remove image";
+  let dataState = "empty";
+  let previewSrc = null;
+  let previewAltText = primaryAlt;
+  if (value instanceof File) {
+    dataState = localFilePreview ? "preview" : "empty";
+    previewSrc = localFilePreview;
+    previewAltText = primaryAlt;
+  } else if (activeCandidate) {
+    dataState = activeCandidate.source === "value" ? "preview" : "fallback";
+    previewSrc = activeCandidate.src;
+    previewAltText = activeCandidate.source === "value" ? primaryAlt : secondaryAlt;
+  } else if (previewCandidates.length > 0) {
+    dataState = "unavailable";
+  }
+  const renderUnavailableContent = () => unavailableContent ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Image, { className: "h-10 w-10 text-muted-foreground/50", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Image unavailable" })
+  ] });
+  const renderClearButton = (compact) => {
+    if (!allowClear) return null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        disabled,
+        "aria-label": clearAccessibleName,
+        className: cn(
+          "absolute top-2 end-2 z-10 flex items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          compact ? "p-1.5" : "h-6 w-6",
+          CONTROL_VISIBILITY
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: compact ? "h-4 w-4" : "h-3.5 w-3.5" })
+      }
+    );
+  };
   const renderPreview = () => /* @__PURE__ */ jsx(
     "div",
     {
       style: previewStyle,
+      "data-image-input-state": dataState,
       className: cn(
-        "flex relative group rounded-lg overflow-hidden border-2 border-dashed border-muted-foreground/60 hover:border-primary transition-colors",
+        "group/image flex relative rounded-lg overflow-hidden border-2 border-dashed border-muted-foreground/60 hover:border-primary transition-colors",
         effectiveSize
       ),
-      children: preview ? isDropzone ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", className: "absolute inset-0 w-full h-full object-cover" }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative w-full h-full flex flex-col items-center justify-center gap-1.5 bg-black/40 text-white px-6 py-8 text-center", contentClassName), children: [
-          /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", titleClassName), children: replaceTitle }),
-          effectiveReplaceSubtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs opacity-80", subtitleClassName), children: effectiveReplaceSubtitle }) : null,
-          allowClear && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClear,
-              disabled,
-              className: "absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-              "aria-label": "Remove image",
-              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", className: "w-full h-full object-cover" }),
+      children: previewSrc ? isDropzone ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          "div",
+          "img",
           {
-            onClick: handleClick,
-            className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer",
-            children: /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-white" })
+            src: previewSrc,
+            alt: previewAltText,
+            onError: handleImgError,
+            className: cn(
+              "absolute inset-0 w-full h-full object-cover",
+              imageClassName
+            )
           }
         ),
-        allowClear && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: handleClear,
+            onClick: handleClick,
             disabled,
-            className: "absolute top-2 right-2 p-1.5 bg-destructive text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md hover:bg-destructive/90 z-10",
-            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            "aria-label": replaceAccessibleName,
+            className: cn(
+              "relative w-full h-full flex flex-col items-center justify-center gap-1.5 bg-black/40 text-white px-6 py-8 text-center cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", titleClassName), children: replaceTitle }),
+              effectiveReplaceSubtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs opacity-80", subtitleClassName), children: effectiveReplaceSubtitle }) : null
+            ]
           }
-        )
-      ] }) : defaultImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("img", { src: defaultImage, alt: "Default", className: "w-full h-full object-cover" }),
+        ),
+        renderClearButton(false)
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          "div",
+          "img",
+          {
+            src: previewSrc,
+            alt: previewAltText,
+            onError: handleImgError,
+            className: cn("w-full h-full", imageClassName ?? "object-cover")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
           {
+            type: "button",
             onClick: handleClick,
-            className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer",
-            children: /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-white" })
+            disabled,
+            "aria-label": replaceAccessibleName,
+            className: cn(
+              "absolute inset-0 bg-black/50 flex items-center justify-center cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              COMPACT_OVERLAY_VISIBILITY
+            ),
+            children: /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-white", "aria-hidden": true })
           }
-        )
-      ] }) : isDropzone ? /* @__PURE__ */ jsxs(
+        ),
+        renderClearButton(true)
+      ] }) : dataState === "unavailable" ? /* @__PURE__ */ jsx(
         "div",
         {
+          "data-image-input-unavailable": true,
+          className: cn(
+            "w-full h-full flex flex-col items-center justify-center gap-2 bg-muted/30 text-muted-foreground px-6 py-8 text-center",
+            contentClassName
+          ),
+          children: renderUnavailableContent()
+        }
+      ) : isDropzone ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
           onClick: handleClick,
-          className: cn("w-full h-full flex flex-col items-center justify-center gap-2 cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors px-6 py-8 text-center", contentClassName),
+          disabled,
+          "aria-label": replaceAriaLabel ?? title,
+          className: cn(
+            "w-full h-full flex flex-col items-center justify-center gap-2 cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors px-6 py-8 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            contentClassName
+          ),
           children: [
             (trigger === "icon" || trigger === "both") && /* @__PURE__ */ jsx("div", { className: "text-primary", children: uploadIcon ?? /* @__PURE__ */ jsx(Plus, { className: "h-8 w-8" }) }),
-            (trigger === "button" || trigger === "both") && /* @__PURE__ */ jsx(
-              "span",
-              {
-                role: "button",
-                className: "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
-                children: buttonLabel
-              }
-            ),
+            (trigger === "button" || trigger === "both") && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", children: buttonLabel }),
             /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium text-foreground", titleClassName), children: title }),
             subtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", subtitleClassName), children: subtitle }) : null
           ]
         }
       ) : /* @__PURE__ */ jsxs(
-        "div",
+        "button",
         {
+          type: "button",
           onClick: handleClick,
-          className: "w-full h-full flex flex-col items-center justify-center cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors",
+          disabled,
+          "aria-label": replaceAriaLabel ?? title,
+          className: "w-full h-full flex flex-col items-center justify-center cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           children: [
-            /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 text-muted-foreground/50 mb-2" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground text-center px-2", children: "Click to upload" })
+            /* @__PURE__ */ jsx(Image, { className: "h-12 w-12 text-muted-foreground/50 mb-2", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground text-center px-2", children: title })
           ]
         }
       )
@@ -10006,20 +10201,42 @@ function ImageInput({
       onChange: handleChange,
       className: "hidden",
       accept,
-      disabled
+      disabled,
+      "aria-hidden": true,
+      tabIndex: -1
     }
   );
   if (!showPreview) return renderFileInput();
   if (previewPosition === "left" || previewPosition === "right") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", previewPosition === "right" && "flex-row-reverse", containerClassName), children: [
-      renderPreview(),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderFileInput() })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-4",
+          previewPosition === "right" && "flex-row-reverse",
+          containerClassName
+        ),
+        children: [
+          renderPreview(),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderFileInput() })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", previewPosition === "bottom" && "flex-col-reverse", containerClassName), children: [
-    renderPreview(),
-    renderFileInput()
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3",
+        previewPosition === "bottom" && "flex-col-reverse",
+        containerClassName
+      ),
+      children: [
+        renderPreview(),
+        renderFileInput()
+      ]
+    }
+  );
 }
 var AVATAR_SIZE_MAP = {
   sm: "size-16",
@@ -11629,7 +11846,14 @@ var createTableStore = () => {
     addButtonText: "",
     pageSizeOptions: [10, 20, 30, 40, 50],
     calculatedPageSize: 10,
+    skeletonRowCount: 6,
     maxHeight: null,
+    bodyWidth: 0,
+    bodyHeight: 0,
+    tableHeaderHeight: 48,
+    cardColumnCount: 1,
+    cardRowHeight: 0,
+    cardGap: 12,
     // JSON mode
     jsonValue: void 0,
     jsonColors: null,
@@ -11699,6 +11923,8 @@ var createTableStore = () => {
     // Responsive cards
     responsiveCards: true,
     isMobile: false,
+    effectiveViewMode: "table",
+    cardPagination: { mode: "paged" },
     // Empty states
     isEmpty: void 0,
     isFilteredEmpty: false,
@@ -11774,6 +12000,8 @@ function filterResponsiveColumns(columns) {
 // src/components/table/hooks.ts
 var ROW_HEIGHT = 56;
 var DEFAULT_TABLE_HEADER_HEIGHT = 48;
+var DEFAULT_CARD_HEIGHT = 176;
+var DEFAULT_CARD_GAP = 12;
 var ROOT_SECTION_GAP_COUNT = 2;
 function useStoreSync(props) {
   const storeRef = useRef(null);
@@ -11854,23 +12082,43 @@ function calculateDynamicPageSize(input) {
   if (availableRowsHeight <= 0) return 1;
   return Math.max(1, Math.floor(availableRowsHeight / rowHeight));
 }
-function useDynamicPageSize(containerRef) {
+function calculateCardSkeletonCount(input) {
+  const columns = Math.max(1, Math.floor(input.columnCount));
+  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.ceil((input.bodyHeight + gap) / (cardHeight + gap)));
+  return rows * columns;
+}
+function fallbackCardColumns(width) {
+  if (width >= 1280) return 4;
+  if (width >= 1024) return 3;
+  if (width >= 640) return 2;
+  return 1;
+}
+function useDynamicPageSize(containerRef, effectiveViewMode) {
   const dynamicHeight = useTableStore.use.dynamicHeight();
-  const viewMode = useTableStore.use.viewMode();
+  const viewMode = useTableStore.use.effectiveViewMode();
   const manualPagination = useTableStore.use.manualPagination();
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const syncWithProps = useTableStore.use.syncWithProps();
+  const lastMeasurementRef = useRef("");
   useLayoutEffect(() => {
-    if (!dynamicHeight || !containerRef.current || viewMode !== "table" || manualPagination) return;
+    if (!dynamicHeight || !containerRef.current) return;
     const calculatePageSize = () => {
       const container2 = containerRef.current;
       if (!container2) return;
       const bodyEl = container2.querySelector("[data-ntable-body]");
       const tableHeaderEl = container2.querySelector("[data-ntable-table-header]");
+      const loadingHeaderEl = container2.querySelector("[data-ntable-loading-header]");
+      const cardsGridEl = container2.querySelector(
+        "[data-ntable-loading-cards-grid], [data-ntable-cards-grid]"
+      );
       let bodyHeight = bodyEl?.clientHeight ?? 0;
+      const bodyWidth = bodyEl?.clientWidth ?? container2.clientWidth ?? 0;
       if (!bodyHeight) {
         const rootHeight = container2.clientHeight;
         const headerHeight = container2.querySelector("[data-ntable-header]")?.offsetHeight ?? 0;
@@ -11879,10 +12127,36 @@ function useDynamicPageSize(containerRef) {
         const gap = Number.parseFloat(rootStyles.rowGap || rootStyles.gap || "0") || 0;
         bodyHeight = rootHeight - headerHeight - paginationHeight - gap * ROOT_SECTION_GAP_COUNT;
       }
+      if (loadingHeaderEl && bodyEl) {
+        const bodyStyles = window.getComputedStyle(bodyEl);
+        const bodyGap = Number.parseFloat(bodyStyles.rowGap || bodyStyles.gap || "0") || 0;
+        bodyHeight = Math.max(0, bodyHeight - loadingHeaderEl.offsetHeight - bodyGap);
+      }
       const tableHeaderHeight = tableHeaderEl?.offsetHeight ?? DEFAULT_TABLE_HEADER_HEIGHT;
       const newPageSize = calculateDynamicPageSize({ bodyHeight, tableHeaderHeight });
       const calculatedMaxHeight = tableHeaderHeight + newPageSize * ROW_HEIGHT;
-      syncWithProps({ calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight });
+      const gridStyles = cardsGridEl ? window.getComputedStyle(cardsGridEl) : null;
+      const gridTemplateColumns = gridStyles?.gridTemplateColumns;
+      const gridColumns = gridTemplateColumns && gridTemplateColumns !== "none" ? gridTemplateColumns.split(" ").filter(Boolean).length : 0;
+      const cardColumnCount = gridColumns || fallbackCardColumns(bodyWidth);
+      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 updates = {
+        ...!manualPagination ? { calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight } : {},
+        skeletonRowCount: newPageSize,
+        bodyWidth,
+        bodyHeight,
+        tableHeaderHeight,
+        cardColumnCount,
+        cardRowHeight,
+        cardGap
+      };
+      const fingerprint = JSON.stringify(updates);
+      if (fingerprint !== lastMeasurementRef.current) {
+        lastMeasurementRef.current = fingerprint;
+        syncWithProps(updates);
+      }
     };
     calculatePageSize();
     const resizeObserver = new ResizeObserver(calculatePageSize);
@@ -11891,11 +12165,14 @@ function useDynamicPageSize(containerRef) {
     container.querySelectorAll(
       "[data-ntable-header], [data-ntable-body], [data-ntable-pagination], [data-ntable-table-header]"
     ).forEach((el) => resizeObserver.observe(el));
+    container.querySelectorAll(
+      "[data-ntable-loading-header], [data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
+    ).forEach((el) => resizeObserver.observe(el));
     if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
-  }, [dynamicHeight, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
+  }, [dynamicHeight, effectiveViewMode, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
 }
-function useTable() {
+function useTable(effectiveViewModeOverride) {
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [columnVisibility, setColumnVisibility] = useState({});
@@ -11912,6 +12189,8 @@ function useTable() {
   const CardComponent = useTableStore.use.CardComponent();
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
+  const effectiveViewMode = useTableStore.use.effectiveViewMode();
+  const cardPagination = useTableStore.use.cardPagination();
   const calculatedPageSize = useTableStore.use.calculatedPageSize();
   const syncWithProps = useTableStore.use.syncWithProps();
   const onStateChange = useTableStore.use.onStateChange();
@@ -12002,6 +12281,8 @@ function useTable() {
     notifyStateChange({ sorting, columnFilters, columnVisibility, rowSelection: storeRowSelection, globalFilter });
   }, [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 tableConfig = {
     data,
     columns: finalColumns,
@@ -12018,7 +12299,7 @@ function useTable() {
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    manualPagination,
+    manualPagination: manualPagination || renderAllSuppliedRows,
     pageCount,
     rowCount
   };
@@ -12032,9 +12313,11 @@ function useTable() {
   }, [table]);
   useLayoutEffect(() => {
     if (manualPagination) return;
-    if (dynamicHeight && viewMode === "table") table.setPageSize(calculatedPageSize);
-    if (viewMode === "cards") table.setPageSize(data.length || 9999);
-  }, [calculatedPageSize, dynamicHeight, viewMode, table, data.length, manualPagination]);
+    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]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
 }
 function useTableKeyboard(options = {}) {
@@ -12128,6 +12411,26 @@ function resolveTableColor(value, fallback) {
   }
   return color;
 }
+
+// src/components/table/tableSurface.ts
+function useTableSurfaceAppearance(bordered, borderColor) {
+  const recipe = useNajmComponentStyle("table");
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const resolvedBorderColor = resolveTableColor(borderColor, DEFAULT_TABLE_BORDER_COLOR);
+  const style = recipeRadius || bordered !== false && (recipe?.borderWidth || borderColor) ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...bordered !== false && recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {},
+    ...bordered !== false && borderColor ? { borderColor: resolvedBorderColor } : {}
+  } : void 0;
+  return {
+    bordered,
+    style,
+    className: cn(
+      "bg-card",
+      bordered === true ? surfaceBorderClasses(true) : "border-0 shadow-sm"
+    )
+  };
+}
 var ROW_CONTEXT_HANDLED = "__ntableRowContextHandled";
 function EditableCell({ cell, onCellEdit }) {
   const columnDef = cell.column.columnDef;
@@ -12182,12 +12485,6 @@ function EditableCell({ cell, onCellEdit }) {
   ] });
 }
 function NTableContent({ effectiveMode }) {
-  const recipe = useNajmComponentStyle("table");
-  const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
-    ...recipeRadius ? { borderRadius: recipeRadius } : {},
-    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
-  } : void 0;
   const table = useTableStore.use.table();
   const storeIsTableView = useTableStore.use.isTableView();
   const columns = useTableStore.use.columns();
@@ -12204,10 +12501,6 @@ function NTableContent({ effectiveMode }) {
     backgroundColor: resolvedHeaderColor,
     color: resolvedHeaderTextColor
   };
-  const contentStyle = recipeStyle || tableBorderColor ? {
-    ...recipeStyle ?? {},
-    ...tableBorderColor ? { borderColor: resolvedBorderColor } : {}
-  } : void 0;
   const rowBorderStyle = tableBorderColor ? { borderColor: resolvedBorderColor } : void 0;
   const onRowClick = useTableStore.use.onRowClick();
   const onRowContextMenu = useTableStore.use.onRowContextMenu();
@@ -12220,6 +12513,7 @@ function NTableContent({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const surface = useTableSurfaceAppearance(bordered, tableBorderColor);
   const showCheckbox = useTableStore.use.showCheckbox();
   const selectedRowId = useTableStore.use.selectedRowId();
   const renderSubRow = useTableStore.use.renderSubRow();
@@ -12248,11 +12542,11 @@ function NTableContent({ effectiveMode }) {
       axis: "both",
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       className: cn(
-        "min-h-0 flex-1 overflow-hidden rounded-md bg-card",
-        bordered === true ? surfaceBorderClasses(true) : "shadow-sm",
+        "min-h-0 flex-1 overflow-hidden rounded-md",
+        surface.className,
         classNames?.content
       ),
-      style: contentStyle,
+      style: surface.style,
       onContextMenu: handleBackgroundContextMenu,
       children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
@@ -12361,13 +12655,8 @@ function NTableContent({ effectiveMode }) {
     }
   );
 }
-function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered }) {
-  const recipe = useNajmComponentStyle("table");
-  const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
-    ...recipeRadius ? { borderRadius: recipeRadius } : {},
-    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
-  } : void 0;
+function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered, borderColor }) {
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
   const canExpand = row.getCanExpand();
   const isExpanded = canExpand && row.getIsExpanded();
   const isSelected = row.getIsSelected();
@@ -12382,10 +12671,10 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       onClick,
       onContextMenu,
-      style: recipeStyle,
+      style: surface.style,
       className: cn(
         "relative group w-full rounded-lg bg-card text-card-foreground overflow-hidden",
-        surfaceBorderClasses(bordered),
+        surface.className,
         isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
         className
@@ -12402,7 +12691,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
             className: "h-4 w-4"
           }
         ) }),
-        useMenuButton ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsx(
+        useMenuButton ? /* @__PURE__ */ jsx("div", { "data-ntable-card-action": true, className: "ntable-card-action absolute end-2 top-2 z-10 h-auto transition-opacity duration-200", children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -12411,10 +12700,10 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
               e.stopPropagation();
               openRowMenu(e, row.original);
             },
-            className: "flex h-7 w-7 p-0 rounded-md cursor-pointer justify-center items-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+            className: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground transition-colors 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" })
           }
-        ) }) : actions && (actions.onView || actions.onEdit || actions.onDelete) ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        ) }) : actions && (actions.onView || actions.onEdit || actions.onDelete) ? /* @__PURE__ */ jsx("div", { "data-ntable-card-action": true, className: "ntable-card-action absolute end-2 top-2 z-10 h-auto transition-opacity duration-200", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
           /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -12519,6 +12808,7 @@ function NTableCards({ effectiveMode }) {
   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) => {
@@ -12556,7 +12846,7 @@ function NTableCards({ effectiveMode }) {
   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", { className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: rows.map((row) => {
+  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();
@@ -12586,7 +12876,8 @@ function NTableCards({ effectiveMode }) {
                   e.stopPropagation();
                   openRowMenu(e, row.original);
                 },
-                className: "absolute top-2 right-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+                "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" })
               }
             ),
@@ -12622,6 +12913,7 @@ function NTableCards({ effectiveMode }) {
         openRowMenu,
         menuButton,
         bordered,
+        borderColor,
         className: rowClassName || void 0,
         children: /* @__PURE__ */ jsx(
           CardComponent,
@@ -12639,13 +12931,108 @@ function NTableCards({ effectiveMode }) {
     );
   }) }) });
 }
+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 viewMode = useTableStore.use.viewMode();
+  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();
@@ -12653,7 +13040,19 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
+  if (!table || !showContent || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  if (effectiveViewMode === "cards" && cardPagination.mode === "all") return null;
+  if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
+    return /* @__PURE__ */ jsx(
+      CardLoadMorePagination,
+      {
+        config: cardPagination,
+        rowCount: data.length,
+        bordered,
+        className: classNames?.pagination
+      }
+    );
+  }
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
   const { pageIndex, pageSize } = table.getState().pagination;
@@ -13091,7 +13490,7 @@ function NTableHeaderSkeleton() {
     }
   );
 }
-function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
+function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
   const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
   const columns = responsiveColumns;
@@ -13099,24 +13498,34 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
   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(
-      Card,
+      "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,
-        className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
+        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", { className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+          /* @__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(
@@ -13129,7 +13538,7 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
                 col?.id ?? col?.accessorKey ?? i
               ))
             ] }) }),
-            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__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(
@@ -13160,74 +13569,105 @@ function NTableCardsLoadingSkeleton({ rows }) {
   );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
-  const calculatedPageSize = useTableStore.use.calculatedPageSize();
-  const pagination = useTableStore.use.pagination();
-  const cardCount = rows ?? Math.max(1, calculatedPageSize || pagination?.pageSize || DEFAULT_CARD_COUNT);
+  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__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsxs(
+      NajmScroll,
       {
-        "data-testid": "ntable-cards-loading-skeleton",
+        axis: "y",
         "aria-busy": "true",
-        className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", classNames?.cards),
-        children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
-          Card,
-          {
-            className: cn("rounded-lg bg-card p-3 shadow-none sm:p-4", surfaceBorderClasses(bordered)),
-            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(
+        "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-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(
+                      "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,
                           {
-                            className: cn(
-                              "h-3 max-w-full sm:h-4",
-                              detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/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(
+                          "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))
                           }
                         )
-                      ] }, detailIndex))
+                      ]
                     }
                   )
-                ]
-              }
-            )
-          },
-          index
-        ))
+                },
+                index
+              ))
+            }
+          )
+        ]
       }
-    ) })
+    )
   ] });
 }
 function TableStateSlot({ children }) {
@@ -13278,7 +13718,7 @@ function TableLayout(props) {
   const responsiveCards = useTableStore.use.responsiveCards();
   const isCustomMode = useTableStore.use.isCustomMode();
   const renderCustomMode = useTableStore.use.renderCustomMode();
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 639px)").matches : false);
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia("(max-width: 639px)");
@@ -13287,18 +13727,22 @@ function TableLayout(props) {
     mql.addEventListener("change", handler2);
     return () => mql.removeEventListener("change", handler2);
   }, []);
-  useDynamicPageSize(containerRef);
-  useTable();
-  useTableKeyboard({
-    scopeRef: containerRef,
-    contextMenuClose: props.contextMenuClose,
-    contextMenuOpen: props.contextMenuOpen
-  });
   const effectiveMode = (() => {
     if (viewMode === "json") return "json";
     if (isMobile && responsiveCards && CardComponent) return "cards";
     return viewMode;
   })();
+  const syncWithProps = useTableStore.use.syncWithProps();
+  useLayoutEffect(() => {
+    syncWithProps({ isMobile, effectiveViewMode: effectiveMode });
+  }, [effectiveMode, isMobile, syncWithProps]);
+  useDynamicPageSize(containerRef, effectiveMode);
+  useTable(effectiveMode);
+  useTableKeyboard({
+    scopeRef: containerRef,
+    contextMenuClose: props.contextMenuClose,
+    contextMenuOpen: props.contextMenuOpen
+  });
   const showFilteredEmpty = isFilteredEmpty && !isLoading && !error;
   const showEmpty = hasNoData && !isLoading && !error && !showFilteredEmpty;
   const customRenderer = isCustomMode ? renderCustomMode?.[viewMode] : void 0;
@@ -13458,6 +13902,7 @@ function NTable(props) {
     pagination: props.pagination,
     defaultPagination: props.defaultPagination,
     onPaginationChange: props.onPaginationChange ?? null,
+    cardPagination: props.cardPagination ?? { mode: "paged" },
     // Row selection
     rowSelection: props.rowSelection,
     defaultRowSelection: props.defaultRowSelection,