@djangocfg/ui-core 2.1.574 → 2.1.576

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.574",
+  "version": "2.1.576",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,7 +130,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.574",
+    "@djangocfg/i18n": "^2.1.576",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,9 +206,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.574",
-    "@djangocfg/i18n": "^2.1.574",
-    "@djangocfg/typescript-config": "^2.1.574",
+    "@djangocfg/eslint-config": "^2.1.576",
+    "@djangocfg/i18n": "^2.1.576",
+    "@djangocfg/typescript-config": "^2.1.576",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/navigation/pagination/ssr-pagination.tsx

@@ -9,7 +9,7 @@ import { useIsMobile } from '../../../hooks';
 import { useLocation, useQueryParams } from '../../../hooks/router';
 
 import {
-    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
+    Pagination, PaginationContent, PaginationItem, PaginationLink,
     PaginationNext, PaginationPrevious
 } from './pagination';
 
@@ -64,16 +64,23 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
   const t = useAppT();
   const { locale } = useI18n();
 
-  const getCurrentPageFromUrl = (): number => {
+  /* The URL wins when it carries a page, the prop otherwise.
+   *
+   * During the server render `useQueryParams()` is empty, so the old
+   * `getCurrentPageFromUrl() || currentPage` always resolved to 1 — the
+   * fallback to the prop could never run, because the function returned 1
+   * rather than a falsy value. Every server-rendered page built its number
+   * window around page 1: `/search?page=100` linked 2–6 and the last page,
+   * never 99 or 101. Pages 7..N-1 were linked from nowhere in the HTML a
+   * crawler reads, which is the only HTML a crawler reads. */
+  const getCurrentPageFromUrl = (): number | null => {
     const pageParam = queryParams.get('page');
-    if (pageParam) {
-      const pageNum = parseInt(pageParam, 10);
-      return isNaN(pageNum) ? 1 : pageNum;
-    }
-    return 1;
+    if (!pageParam) return null;
+    const pageNum = parseInt(pageParam, 10);
+    return isNaN(pageNum) || pageNum < 1 ? null : pageNum;
   };
 
-  const actualCurrentPage = getCurrentPageFromUrl() || currentPage;
+  const actualCurrentPage = getCurrentPageFromUrl() ?? currentPage;
   const actualHasPreviousPage = actualCurrentPage > 1;
 
   const getPageUrl = (page: number): string => {
@@ -99,7 +106,16 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
    *   cheap to build and answers a question no one asks.
    *
    * Two chevrons and the numbers. Anything more is furniture. */
-  const getVisiblePages = (): (number | 'ellipsis')[] => {
+  /* An ellipsis is a link to the MIDDLE of the pages it hides.
+   *
+   * It used to be inert text, so the only pages a crawler could reach were the
+   * ones in the window, one step at a time: 267 pages took ~90 hops. Linking
+   * each gap's midpoint halves the unexplored range with every hop, so any
+   * page is ~log2(N) hops from page 1 (8 for 267). A reader gets a "jump
+   * roughly there" control, which is what an ellipsis promises anyway. */
+  type PageItem = number | { ellipsis: number };
+
+  const getVisiblePages = (): PageItem[] => {
     const mobileMaxVisible = 3;
     const effectiveMaxVisible = isMobile ? mobileMaxVisible : maxVisiblePages;
 
@@ -107,7 +123,7 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
 
-    const pages: (number | 'ellipsis')[] = [];
+    const pages: PageItem[] = [];
     const halfVisible = Math.floor(effectiveMaxVisible / 2);
 
     if (isMobile) {
@@ -126,9 +142,11 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
         start = Math.max(2, totalPages - effectiveMaxVisible + 2);
       }
 
-      if (start > 2) pages.push('ellipsis');
+      if (start > 2) pages.push({ ellipsis: Math.floor((2 + start - 1) / 2) });
       for (let i = start; i <= end; i++) pages.push(i);
-      if (end < totalPages - 1) pages.push('ellipsis');
+      if (end < totalPages - 1) {
+        pages.push({ ellipsis: Math.floor((end + 1 + totalPages - 1) / 2) });
+      }
       if (totalPages > 1) pages.push(totalPages);
     }
 
@@ -173,8 +191,14 @@ export const SSRPagination: React.FC<SSRPaginationProps> = ({
 
           {visiblePages.map((page, index) => (
             <PaginationItem key={index}>
-              {page === 'ellipsis' ? (
-                <PaginationEllipsis />
+              {typeof page === 'object' ? (
+                <PaginationLink
+                  href={getPageUrl(page.ellipsis)}
+                  aria-label={t('ui.pagination.page', { page: page.ellipsis })}
+                  scroll
+                >
+                  …
+                </PaginationLink>
               ) : (
                 <PaginationLink
                   href={getPageUrl(page)}