@flamingo-stack/openframe-frontend-core 0.0.735 → 0.0.736

package/dist/{knowledge-FO3TPLFO.cjs → knowledge-F4YFQT3G.cjs}

@@ -8,7 +8,7 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
+var _chunkOJUMVOMPcjs = require('./chunk-OJUMVOMP.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
@@ -19,12 +19,12 @@ require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-OXJ57643.cjs');
+require('./chunk-MGW5DO6P.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-F7STMHT7.cjs');
+require('./chunk-T27CVQBO.cjs');
 
 
-var _chunkJDXQ6T5Pcjs = require('./chunk-JDXQ6T5P.cjs');
+var _chunkOV6BGMELcjs = require('./chunk-OV6BGMEL.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1825,8 +1825,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-SHQZN5LF.cjs');
-require('./chunk-RH3AKULV.cjs');
+require('./chunk-EX2GYIGW.cjs');
+require('./chunk-EJOXXJJB.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1905,10 +1905,10 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk36CCUJOEcjs.KnowledgeBaseArticleView,
+    _chunkOJUMVOMPcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
-      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDXQ6T5Pcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOV6BGMELcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
     }
   ) });
 }

package/dist/{logs-Y4WQB2YR.cjs → logs-GAYEGEZM.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
+var _chunkOJUMVOMPcjs = require('./chunk-OJUMVOMP.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
@@ -27,12 +27,12 @@ require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-OXJ57643.cjs');
+require('./chunk-MGW5DO6P.cjs');
 require('./chunk-YUMFVQIN.cjs');
 
 
-var _chunkF7STMHT7cjs = require('./chunk-F7STMHT7.cjs');
-require('./chunk-JDXQ6T5P.cjs');
+var _chunkT27CVQBOcjs = require('./chunk-T27CVQBO.cjs');
+require('./chunk-OV6BGMEL.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1833,8 +1833,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-SHQZN5LF.cjs');
-require('./chunk-RH3AKULV.cjs');
+require('./chunk-EX2GYIGW.cjs');
+require('./chunk-EJOXXJJB.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1886,7 +1886,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunk36CCUJOEcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkOJUMVOMPcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1958,13 +1958,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOJUMVOMPcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk36CCUJOEcjs.LogsPageView,
+      _chunkOJUMVOMPcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1972,7 +1972,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk36CCUJOEcjs.LogsTableView,
+          _chunkOJUMVOMPcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1986,8 +1986,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk36CCUJOEcjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOJUMVOMPcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkOJUMVOMPcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -1999,12 +1999,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.ToolBadge, { toolType: _chunkF7STMHT7cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOJUMVOMPcjs.ToolBadge, { toolType: _chunkT27CVQBOcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunk36CCUJOEcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkOJUMVOMPcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk36CCUJOEcjs.DeviceCard,
+          _chunkOJUMVOMPcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-D6VY2ODF.cjs → policies-ZOVJCJWX.cjs}

@@ -10,7 +10,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
+var _chunkOJUMVOMPcjs = require('./chunk-OJUMVOMP.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
@@ -21,10 +21,10 @@ require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-OXJ57643.cjs');
+require('./chunk-MGW5DO6P.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-F7STMHT7.cjs');
-require('./chunk-JDXQ6T5P.cjs');
+require('./chunk-T27CVQBO.cjs');
+require('./chunk-OV6BGMEL.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1825,8 +1825,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-SHQZN5LF.cjs');
-require('./chunk-RH3AKULV.cjs');
+require('./chunk-EX2GYIGW.cjs');
+require('./chunk-EJOXXJJB.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1891,14 +1891,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunk36CCUJOEcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkOJUMVOMPcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunk36CCUJOEcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkOJUMVOMPcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1912,16 +1912,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk36CCUJOEcjs.PoliciesTable,
+    _chunkOJUMVOMPcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOJUMVOMPcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOJUMVOMPcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{software-update-7XN6U7HC.cjs → software-update-H4YE5GMJ.cjs}

@@ -15,7 +15,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
+var _chunkOJUMVOMPcjs = require('./chunk-OJUMVOMP.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 
@@ -28,10 +28,10 @@ require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-OXJ57643.cjs');
+require('./chunk-MGW5DO6P.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-F7STMHT7.cjs');
-require('./chunk-JDXQ6T5P.cjs');
+require('./chunk-T27CVQBO.cjs');
+require('./chunk-OV6BGMEL.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1832,8 +1832,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-SHQZN5LF.cjs');
-require('./chunk-RH3AKULV.cjs');
+require('./chunk-EX2GYIGW.cjs');
+require('./chunk-EJOXXJJB.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1926,12 +1926,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkL4ZNR5V7cjs.Autocomplete,
     {
-      label: _chunk36CCUJOEcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkOJUMVOMPcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunk36CCUJOEcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkOJUMVOMPcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1945,7 +1945,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk36CCUJOEcjs.SoftwareActionForm,
+    _chunkOJUMVOMPcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1957,7 +1957,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk36CCUJOEcjs.DeviceSelector,
+        _chunkOJUMVOMPcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.735",
+  "version": "0.0.736",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/pagination.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { type ButtonHTMLAttributes, type HTMLAttributes, forwardRef } from 'react';
+import { type ButtonHTMLAttributes, type HTMLAttributes, type MouseEvent, type ReactNode, forwardRef } from 'react';
+import Link from '../embed-shims/next-link';
 import { cn } from '../utils/cn';
+import { isModifierClick } from './chat/utils/chat-nav-resolution';
 import { Button } from './ui/button';
 
 interface PaginationProps {
@@ -10,9 +12,98 @@ interface PaginationProps {
   totalPages: number;
   onPageChange: (page: number) => void;
   className?: string;
+  /**
+   * The address of a page of this list. With it every enabled control is a real
+   * link (`<a href>`), so a crawler that runs no script can reach every page of
+   * the list, and a person can open a page in a new tab. A plain click still
+   * changes the page in place through `onPageChange`. Without it the controls
+   * are buttons.
+   */
+  getPageHref?: (page: number) => string;
 }
 
-const Pagination = ({ currentPage, totalPages, onPageChange, className }: PaginationProps) => {
+interface PaginationControlProps {
+  /** The page this control goes to. */
+  page: number;
+  /** The control's accessible name ("Page 3", "Go to next page"). */
+  label: string;
+  variant: 'accent' | 'outline';
+  className: string;
+  /** The control marks the page being shown. */
+  current?: boolean;
+  /** There is no such page (previous on the first page, next on the last). */
+  disabled?: boolean;
+  /** Which neighbour the control leads to, stated to crawlers and assistive technology as `rel`. */
+  rel?: 'prev' | 'next';
+  onPageChange: (page: number) => void;
+  getPageHref?: (page: number) => string;
+  children: ReactNode;
+}
+
+/**
+ * One control of the pager. With a page address it is a link: the href is the
+ * page's real URL, so it works with no script, in a new tab and for a crawler,
+ * and a plain click is taken over to change the page in place (the progressive
+ * enhancement every in-page link in this library uses). With no address, or
+ * when there is no such page, it is a button: a link must always lead somewhere.
+ */
+function PaginationControl({
+  page,
+  label,
+  variant,
+  className,
+  current,
+  disabled,
+  rel,
+  onPageChange,
+  getPageHref,
+  children,
+}: PaginationControlProps) {
+  const ariaCurrent = current ? ('page' as const) : undefined;
+
+  if (!getPageHref || disabled) {
+    return (
+      <Button
+        variant={variant}
+        size="icon"
+        className={className}
+        disabled={disabled}
+        aria-label={label}
+        aria-current={ariaCurrent}
+        onClick={() => onPageChange(page)}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    // A new tab or window is the browser's to open, at the link's own address.
+    if (isModifierClick(event)) return;
+    event.preventDefault();
+    onPageChange(page);
+  };
+
+  return (
+    <Button variant={variant} size="icon" className={className} asChild>
+      <Link
+        href={getPageHref(page)}
+        prefetch={false}
+        rel={rel}
+        aria-label={label}
+        aria-current={ariaCurrent}
+        onClick={handleClick}
+      >
+        {children}
+      </Link>
+    </Button>
+  );
+}
+
+const NEIGHBOUR_CLASS = '!h-10 !w-10 content-md:!h-10 content-md:!w-10';
+const PAGE_CLASS = '!h-9 !w-9 content-md:!h-9 content-md:!w-9';
+
+const Pagination = ({ currentPage, totalPages, onPageChange, className, getPageHref }: PaginationProps) => {
   // Generate page numbers to display
   const getPageNumbers = () => {
     const pages = [];
@@ -68,16 +159,18 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
     <nav role="navigation" aria-label="pagination" className={cn('mx-auto flex w-full justify-center', className)}>
       <ul className="flex flex-row items-center gap-1">
         <li>
-          <Button
+          <PaginationControl
+            page={currentPage - 1}
+            label="Go to previous page"
             variant="outline"
-            size="icon"
-            onClick={() => onPageChange(currentPage - 1)}
+            className={NEIGHBOUR_CLASS}
             disabled={currentPage === 1}
-            aria-label="Go to previous page"
-            className="!h-10 !w-10 content-md:!h-10 content-md:!w-10"
+            rel="prev"
+            onPageChange={onPageChange}
+            getPageHref={getPageHref}
           >
             <ChevronLeft className="h-4 w-4" />
-          </Button>
+          </PaginationControl>
         </li>
 
         {pageNumbers.map((page, index) => {
@@ -95,32 +188,35 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
 
           return (
             <li key={page}>
-              <Button
+              <PaginationControl
+                page={page}
+                label={`Page ${page}`}
                 variant={currentPage === page ? 'accent' : 'outline'}
-                size="icon"
-                onClick={() => onPageChange(page)}
-                className="!h-9 !w-9 content-md:!h-9 content-md:!w-9"
-                aria-label={`Page ${page}`}
-                aria-current={currentPage === page ? 'page' : undefined}
+                className={PAGE_CLASS}
+                current={currentPage === page}
+                onPageChange={onPageChange}
+                getPageHref={getPageHref}
               >
                 {page}
-              </Button>
+              </PaginationControl>
             </li>
           );
         })}
 
         <li>
-          <Button
+          <PaginationControl
+            page={currentPage + 1}
+            label="Go to next page"
             variant="outline"
-            size="icon"
-            onClick={() => onPageChange(currentPage + 1)}
+            className={NEIGHBOUR_CLASS}
             disabled={currentPage === totalPages}
-            aria-label="Go to next page"
-            className="!h-10 !w-10 content-md:!h-10 content-md:!w-10"
+            rel="next"
+            onPageChange={onPageChange}
+            getPageHref={getPageHref}
           >
             <ChevronRight className="h-4 w-4" />
             <span className="sr-only">Next page</span>
-          </Button>
+          </PaginationControl>
         </li>
       </ul>
     </nav>

package/src/components/unified-pagination.tsx

@@ -33,6 +33,17 @@ export function UnifiedPagination({
   const searchParams = useSearchParams();
   const pathname = usePathname();
 
+  /**
+   * The address of a page of this list: the current URL with `page` set. Page 1
+   * is the list's own address (no `page`), so the first page has one URL.
+   */
+  const pageHref = (page: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (page <= 1) params.delete('page');
+    else params.set('page', page.toString());
+    return withQuery(pathname, params.toString());
+  };
+
   const handlePageChange = (page: number) => {
     // Preserve current scroll position
     const currentScrollY = window.scrollY;
@@ -42,13 +53,12 @@ export function UnifiedPagination({
       onPageChange(page);
     }
 
-    // Update URL for bookmarking without navigation — unless the caller owns
-    // the URL (`syncUrl={false}`), in which case a second writer here would
-    // race the caller's own param write.
+    // Update the address bar in place (a bookmark, a shared link), unless the
+    // caller owns the URL (`syncUrl={false}`): a second writer here would race
+    // the caller's own param write. The address is the one the page's link
+    // carries (`pageHref`), so a click and a new-tab open land on the same URL.
     if (syncUrl) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set('page', page.toString());
-      window.history.replaceState(null, '', withQuery(pathname, params.toString()));
+      window.history.replaceState(null, '', pageHref(page));
     }
 
     // Restore scroll position after a brief delay to allow content to render
@@ -79,7 +89,13 @@ export function UnifiedPagination({
 
   return (
     <div className={className}>
-      <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />
+      {/* Real links only while this component owns `?page=`: a caller that owns the URL names its own parameter. */}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+        getPageHref={syncUrl ? pageHref : undefined}
+      />
     </div>
   );
 }