@open-mercato/ui 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/src/backend/inputs/__tests__/LookupSelect.test.tsx

@@ -215,3 +215,78 @@ describe('LookupSelect keyboard accessibility', () => {
     expect(view.getByText('Start typing to search.')).toBeInTheDocument()
   })
 })
+
+// `disabled` used to gate only the search box, so a caller that locked the
+// control still shipped a live option list: the selected card kept its click and
+// Enter/Space handlers, "Clear selection" stayed reachable, and the action slot
+// could still create a new record. Issue #5248 depended on `disabled` meaning
+// "no interaction at all", so every one of those paths is pinned here.
+describe('LookupSelect disabled', () => {
+  const SELECTED = [{ id: 'product-1', title: 'Product One' }]
+
+  function renderDisabled(onChange: (next: string | null) => void) {
+    return render(
+      <LookupSelect
+        value="product-1"
+        onChange={onChange}
+        options={SELECTED}
+        disabled
+        actionSlot={
+          <button type="button" data-testid="quick-create">
+            Create
+          </button>
+        }
+        clearLabel="Clear selection"
+      />,
+    )
+  }
+
+  it('still shows the current selection so the value stays readable', () => {
+    renderDisabled(() => {})
+    expect(screen.getByRole('option')).toHaveTextContent('Product One')
+  })
+
+  it('ignores clicks on the option row', () => {
+    const onChange = jest.fn()
+    renderDisabled(onChange)
+
+    fireEvent.click(screen.getByRole('option'))
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('ignores Enter and Space on the option row and keeps it out of the tab order', () => {
+    const onChange = jest.fn()
+    renderDisabled(onChange)
+    const option = screen.getByRole('option')
+
+    fireEvent.keyDown(option, { key: 'Enter' })
+    fireEvent.keyDown(option, { key: ' ' })
+
+    expect(onChange).not.toHaveBeenCalled()
+    expect(option).toHaveAttribute('tabindex', '-1')
+    expect(option).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('hides the clear-selection button so the value cannot be nulled', () => {
+    renderDisabled(() => {})
+    expect(screen.queryByRole('button', { name: /clear selection/i })).toBeNull()
+  })
+
+  it('hides the action slot so no new record can be created into a locked field', () => {
+    renderDisabled(() => {})
+    expect(screen.queryByTestId('quick-create')).toBeNull()
+  })
+
+  it('keeps the search box disabled and its keyboard path inert', () => {
+    const onChange = jest.fn()
+    const { container } = renderDisabled(onChange)
+    const input = getInput(container)
+
+    expect(input.disabled).toBe(true)
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/src/backend/sidebar/SidebarCustomizationEditor.tsx

@@ -1579,11 +1579,10 @@ function SidebarPreview({
 
   return (
     <div className="relative w-[240px] overflow-hidden rounded-xl border bg-background shadow-sm">
-      {/* Match AppShell's outer aside: border-r, py-4, px-3 — minus border-r since the
-          card border already serves that purpose, plus rounded so it reads as a preview tile. */}
-      <div className="flex flex-col gap-3 px-3 py-4">
+      {/* Match AppShell's full-width group boxes with padding applied by each inner region. */}
+      <div className="flex flex-col gap-3 py-4">
         {/* Brand block — same classes as AppShell brand tile */}
-        <div className="mb-2">
+        <div className="mb-2 px-3">
           <div className="flex items-center gap-3 rounded-xl p-3">
             <Image
               src="/open-mercato.svg"
@@ -1596,11 +1595,13 @@ function SidebarPreview({
           </div>
         </div>
         {/* Search input mock — same container styling as the real sidebar */}
-        <div className="mb-2 flex items-center gap-2 rounded-lg border border-border bg-background pl-2.5 pr-2 py-2 shadow-sm">
-          <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-          <span className="min-w-0 flex-1 text-sm text-muted-foreground/70 truncate">
-            {t('appShell.sidebarCustomizationPreviewSearchPlaceholder', 'Search...')}
-          </span>
+        <div className="px-3">
+          <div className="mb-2 flex items-center gap-2 rounded-lg border border-border bg-background pl-2.5 pr-2 py-2 shadow-sm">
+            <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+            <span className="min-w-0 flex-1 text-sm text-muted-foreground/70 truncate">
+              {t('appShell.sidebarCustomizationPreviewSearchPlaceholder', 'Search...')}
+            </span>
+          </div>
         </div>
         {groups.length === 0 ? (
           <p className="px-2 text-sm text-muted-foreground">
@@ -1612,7 +1613,10 @@ function SidebarPreview({
               const visibleItems = group.items.filter((item) => item.hidden !== true)
               if (visibleItems.length === 0) return null
               return (
-                <div key={resolveGroupKey(group)}>
+                <div
+                  key={resolveGroupKey(group)}
+                  className={`px-3 ${gi < groups.length - 1 ? 'border-b pb-2' : ''}`}
+                >
                   <div className="w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1">
                     <span>{group.name}</span>
                   </div>
@@ -1641,7 +1645,6 @@ function SidebarPreview({
                       )
                     })}
                   </div>
-                  {gi < groups.length - 1 ? <div className="my-2 border-t -ml-3 -mr-4" /> : null}
                 </div>
               )
             })}

package/src/backend/utils/crud.ts

@@ -6,6 +6,8 @@ export type ListResponse<T> = {
   page: number
   pageSize: number
   totalPages: number
+  /** Present (true) when the server capped the count: `total`/`totalPages` are floors. */
+  totalIsCapped?: boolean
 }
 
 export type CrudExportFormat = 'csv' | 'json' | 'xml' | 'markdown'

package/src/primitives/__tests__/alert.test.tsx

@@ -189,7 +189,47 @@ describe('Alert primitive', () => {
       </Alert>,
     )
     expect(screen.getByText('Saved').tagName).toBe('H5')
-    expect(screen.getByText('Your changes were saved.').tagName).toBe('P')
+    expect(screen.getByText('Your changes were saved.').tagName).toBe('DIV')
+  })
+
+  describe('AlertDescription accepts block-level children', () => {
+    it('renders a div so nested paragraphs stay valid HTML', () => {
+      const { container } = render(
+        <Alert status="information">
+          <AlertDescription>
+            <p>First paragraph.</p>
+            <p>Second paragraph.</p>
+          </AlertDescription>
+        </Alert>,
+      )
+      expect(screen.getByText('First paragraph.').parentElement?.tagName).toBe('DIV')
+      expect(container.querySelectorAll('p p')).toHaveLength(0)
+    })
+
+    it('keeps a nested list out of a paragraph', () => {
+      const { container } = render(
+        <Alert status="warning">
+          <AlertDescription>
+            <p>These records changed:</p>
+            <ul>
+              <li>r-1</li>
+            </ul>
+          </AlertDescription>
+        </Alert>,
+      )
+      expect(container.querySelectorAll('p ul')).toHaveLength(0)
+      expect(container.querySelectorAll('p p')).toHaveLength(0)
+    })
+
+    it('forwards a ref to the rendered div', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(
+        <Alert>
+          <AlertDescription ref={ref}>Body</AlertDescription>
+        </Alert>,
+      )
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
   })
 
   describe('legacy variant prop (BC)', () => {

package/src/primitives/__tests__/icon-button.test.tsx

@@ -38,3 +38,73 @@ describe('IconButton solid variants', () => {
     expect(className).not.toContain('dark:bg-input')
   })
 })
+
+describe('IconButton pressed state', () => {
+  // The pressed surface must be restated under `dark:` for the same reason:
+  // `variant="outline"` (`dark:bg-input/30`) and `variant="ghost"`
+  // (`dark:hover:bg-accent/50`) otherwise outrank `aria-pressed:bg-primary`
+  // while `aria-pressed:text-primary-foreground` still applies, leaving a
+  // dark icon on a dark surface (invisible favorite/watch toggles).
+  it.each(['outline', 'ghost'] as const)('keeps the primary fill on a pressed %s button in dark mode', (variant) => {
+    const classes = iconButtonVariants({ variant })
+    expect(classes).toContain('not-disabled:aria-pressed:bg-primary')
+    expect(classes).toContain('dark:not-disabled:aria-pressed:bg-primary')
+    expect(classes).toContain('dark:not-disabled:aria-pressed:hover:bg-primary-hover')
+  })
+
+  // A toggle can be pressed and disabled at once — an active editor tool on a
+  // read-only document. The pressed rules are more specific than the
+  // `disabled:` surface, so without a not-disabled gate the disabled control
+  // renders as a primary, actionable button in both themes.
+  it.each(['outline', 'ghost'] as const)(
+    'never lets the pressed surface outrank the disabled surface on a %s button',
+    (variant) => {
+      const classes = iconButtonVariants({ variant })
+      expect(classes).toContain('disabled:bg-bg-disabled')
+      expect(classes).toContain('disabled:text-text-disabled')
+      for (const pressed of classes.split(' ').filter((cls) => cls.includes('aria-pressed:'))) {
+        expect(pressed).toContain('not-disabled:aria-pressed:')
+      }
+    },
+  )
+
+  it('renders a pressed disabled toggle with only not-disabled-gated pressed rules', () => {
+    const { getByRole } = render(
+      <IconButton variant="outline" aria-label="Highlight" aria-pressed disabled>
+        <svg />
+      </IconButton>,
+    )
+    const classes = getByRole('button').className.split(' ')
+    expect(classes).toContain('disabled:bg-bg-disabled')
+    expect(classes).not.toContain('aria-pressed:bg-primary')
+    expect(classes).not.toContain('dark:aria-pressed:bg-primary')
+    expect(classes).toContain('not-disabled:aria-pressed:bg-primary')
+  })
+
+  // `enabled:` compiles to `&:enabled`, which the CSS spec restricts to form
+  // elements. `IconButton` supports `asChild` and is rendered onto links across
+  // the app (MessagesIcon, RoleAssignmentRow, DealsSection), so an `enabled:`
+  // gate would silently drop the pressed state on every one of those hosts.
+  // `not-disabled:` (`&:not(:disabled)`) matches a non-form host just fine.
+  it('keeps the pressed surface on an asChild anchor host', () => {
+    const { getByRole } = render(
+      <IconButton variant="ghost" asChild aria-pressed>
+        <a href="/inbox" aria-label="Messages">
+          <svg />
+        </a>
+      </IconButton>,
+    )
+    const anchor = getByRole('link')
+    const classes = anchor.className.split(' ')
+    expect(anchor.tagName).toBe('A')
+    expect(classes).toContain('not-disabled:aria-pressed:bg-primary')
+    expect(classes).toContain('not-disabled:aria-pressed:text-primary-foreground')
+    expect(classes).toContain('dark:not-disabled:aria-pressed:bg-primary')
+    // The whole point of the fix: no pressed rule may be gated on `:enabled`,
+    // which can never match an anchor.
+    for (const pressed of classes.filter((cls) => cls.includes('aria-pressed:'))) {
+      expect(pressed).not.toContain('enabled:aria-pressed:')
+      expect(pressed).toContain('not-disabled:aria-pressed:')
+    }
+  })
+})

package/src/primitives/__tests__/notification.test.tsx

@@ -26,7 +26,7 @@ describe('Notification primitive', () => {
   it('renders title as AlertTitle and description below', () => {
     render(<Notification title="John commented" description="On the latest deal" />)
     expect(screen.getByText('John commented').tagName).toBe('H5')
-    expect(screen.getByText('On the latest deal').tagName).toBe('P')
+    expect(screen.getByText('On the latest deal').tagName).toBe('DIV')
   })
 
   it('description gets opacity-70 (DS opacity scale; was opacity-72 in early v5, snapped to scale per .ai/ds-rules.md)', () => {

package/src/primitives/__tests__/pagination.test.tsx

@@ -297,3 +297,57 @@ describe('Pagination', () => {
     expect(ref.current?.getAttribute('data-slot')).toBe('pagination')
   })
 })
+
+describe('Pagination with a capped total (totalIsCapped)', () => {
+  // 100 rows / pageSize 10 → a floor of 10 pages; the real set is larger.
+  const capped = { page: 1, pageSize: 10, total: 100, totalIsCapped: true, onPageChange: () => {} }
+
+  it('renders the capped page info with a trailing plus', () => {
+    const { container } = render(<Pagination {...capped} />)
+    const info = container.querySelector('[data-slot="pagination-info"]')
+    expect(info?.textContent).toBe('Page 1 of 10+')
+  })
+
+  it('suppresses the last-page jump — it would present the floor as the end of the data', () => {
+    const { container } = render(<Pagination {...capped} />)
+    expect(container.querySelector('[data-slot="pagination-last"]')).toBeNull()
+    expect(container.querySelector('[data-slot="pagination-first"]')).not.toBeNull()
+  })
+
+  it('keeps Next enabled past the floor while hasNextPage is true', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination {...capped} page={10} hasNextPage onPageChange={onPageChange} />,
+    )
+    const next = container.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement
+    expect(next.disabled).toBe(false)
+    fireEvent.click(next)
+    expect(onPageChange).toHaveBeenCalledWith(11)
+  })
+
+  it('disables Next at the floor when hasNextPage reports a short page', () => {
+    const { container } = render(<Pagination {...capped} page={10} hasNextPage={false} />)
+    const next = container.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement
+    expect(next.disabled).toBe(true)
+  })
+
+  it('never clamps a deep-linked page down to the floor', () => {
+    const { container } = render(<Pagination {...capped} page={37} hasNextPage />)
+    const current = container.querySelector('[data-slot="pagination-page"][data-state="on"]')
+    expect(current?.textContent).toBe('37')
+    const info = container.querySelector('[data-slot="pagination-info"]')
+    expect(info?.textContent).toBe('Page 37 of 37+')
+  })
+
+  it('keeps exact-total behavior byte-identical when the flag is absent', () => {
+    const onPageChange = jest.fn()
+    const { container } = render(
+      <Pagination page={10} pageSize={10} total={100} onPageChange={onPageChange} />,
+    )
+    const next = container.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement
+    expect(next.disabled).toBe(true)
+    expect(container.querySelector('[data-slot="pagination-last"]')).not.toBeNull()
+    const info = container.querySelector('[data-slot="pagination-info"]')
+    expect(info?.textContent).toBe('Page 10 of 10')
+  })
+})

package/src/primitives/__tests__/rich-editor.test.tsx

@@ -347,6 +347,49 @@ describe('RichEditor — custom variant + compound API', () => {
   })
 })
 
+// jsdom has no layout engine, so the page-overflow bug this guards against
+// (the hidden measurement row is wider than its column and grows the document)
+// cannot be reproduced by measuring here. What these tests pin instead is the
+// containment structure the fix relies on: the measurement row sits inside its
+// own clipping layer, and the visible toolbar sits outside it so the clip never
+// swallows the toolbar's own drop shadow.
+describe('RichEditor — auto toolbar measurement row containment', () => {
+  const renderAutoToolbar = () => {
+    const { container } = render(<RichEditor value="" onChange={jest.fn()} variant="full" />)
+    const clip = container.querySelector('[data-slot="rich-editor-toolbar-measure-clip"]')!
+    const toolbar = container.querySelector('[data-slot="rich-editor-toolbar"]')!
+    return { clip, toolbar }
+  }
+
+  it('clips the hidden measurement row in its own layer so it cannot widen the page', () => {
+    const { clip } = renderAutoToolbar()
+    expect(clip).not.toBeNull()
+    expect(clip.getAttribute('aria-hidden')).toBe('true')
+    expect(clip.className).toContain('absolute')
+    expect(clip.className).toContain('inset-0')
+    expect(clip.className).toContain('overflow-hidden')
+
+    const measureRow = clip.firstElementChild!
+    expect(measureRow.className).toContain('invisible')
+    expect(measureRow.className).toContain('absolute')
+    expect(measureRow.className).toContain('flex-nowrap')
+    expect(measureRow.childElementCount).toBeGreaterThan(0)
+  })
+
+  it('keeps the visible toolbar outside the clipping layer so shadow-xs still paints', () => {
+    const { clip, toolbar } = renderAutoToolbar()
+    expect(clip.contains(toolbar)).toBe(false)
+    expect(toolbar.className).toContain('shadow-xs')
+  })
+
+  it('leaves the toolbar wrapper unclipped', () => {
+    const { toolbar } = renderAutoToolbar()
+    const wrapper = toolbar.parentElement!
+    expect(wrapper.className).toContain('relative')
+    expect(wrapper.className).not.toContain('overflow-hidden')
+  })
+})
+
 describe('RichEditorDropdownButton + RichEditorTextDropdown', () => {
   it("RichEditorDropdownButton renders inside <RichEditor variant='custom'>", () => {
     render(

package/src/primitives/alert.tsx

@@ -252,9 +252,12 @@ const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTM
 AlertTitle.displayName = 'AlertTitle'
 
 // Figma "Paragraph/Small": Inter Regular 14 / 20.
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+// Renders a <div>, not a <p>: callers routinely nest paragraphs, lists and other
+// block elements inside the description, which is invalid inside <p> and makes
+// React fail hydration with "In HTML, <p> cannot be a descendant of <p>".
+const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm leading-5', className)} {...props} />
+    <div ref={ref} className={cn('text-sm leading-5', className)} {...props} />
   ),
 )
 AlertDescription.displayName = 'AlertDescription'

package/src/primitives/icon-button.tsx

@@ -4,7 +4,26 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 const iconButtonVariants = cva(
-  "inline-flex items-center justify-center cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:shadow-focus aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary-hover",
+  // The pressed surface is repeated under `dark:` on purpose: the outline and
+  // ghost variants ship `dark:bg-input/30` / `dark:hover:bg-accent/50`, which
+  // otherwise outrank the un-prefixed `aria-pressed:` background while the
+  // `aria-pressed:text-primary-foreground` still applies — leaving a dark icon
+  // on a dark surface (invisible pressed star/bell buttons on the dark theme).
+  //
+  // Every pressed rule is additionally gated on `not-disabled:` because a toggle
+  // can be pressed AND disabled at the same time (an active editor tool while the
+  // document is read-only). Without the gate the pressed rules outrank the
+  // `disabled:` surface — `dark:aria-pressed:bg-primary` is more specific than
+  // `disabled:bg-bg-disabled` — and a control the user cannot operate renders
+  // as a primary, actionable button.
+  //
+  // The gate MUST stay `not-disabled:` (`&:not(:disabled)`) and not `enabled:`
+  // (`&:enabled`): the CSS `:enabled` pseudo-class only matches form elements,
+  // so on an `asChild` host — this primitive is routinely rendered onto a link —
+  // no pressed rule could ever match and the pressed state would not paint at
+  // all. `:not(:disabled)` gates the same way on a real `<button>` while leaving
+  // a non-form host styled.
+  "inline-flex items-center justify-center cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:shadow-focus not-disabled:aria-pressed:bg-primary not-disabled:aria-pressed:text-primary-foreground not-disabled:aria-pressed:hover:bg-primary-hover dark:not-disabled:aria-pressed:bg-primary dark:not-disabled:aria-pressed:hover:bg-primary-hover",
   {
     variants: {
       variant: {

package/src/primitives/pagination.tsx

@@ -151,6 +151,20 @@ export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {
   pageSize: number
   /** Total item count. Used to derive `Math.ceil(total / pageSize)` pages. */
   total: number
+  /**
+   * `total` is a floor, not an exact count (a capped list count,
+   * `OM_LIST_COUNT_CAP`). The derived page count then only bounds the page
+   * *list*: the current page is never clamped down to it, the last-page jump
+   * is suppressed (it would present the floor as the end of the data), and
+   * Next stays available past the floor when `hasNextPage` says so.
+   */
+  totalIsCapped?: boolean
+  /**
+   * Caller-provided "a next page exists" signal for the capped case, typically
+   * short-page detection (the current page came back full). Ignored when
+   * `totalIsCapped` is false; when omitted, Next ends at the known floor.
+   */
+  hasNextPage?: boolean
   /** Called when the user changes page. */
   onPageChange: (next: number) => void
   /** Called when the user changes page size. Optional — when omitted,
@@ -188,6 +202,8 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
       page,
       pageSize,
       total,
+      totalIsCapped = false,
+      hasNextPage,
       onPageChange,
       onPageSizeChange,
       pageSizeOptions = [10, 25, 50, 100],
@@ -208,26 +224,37 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
     const resolvedFormatPageInfo =
       formatPageInfo ??
       ((p: number, total: number) =>
-        t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))
+        totalIsCapped
+          ? t('ui.pagination.info.pageOfCapped', 'Page {page} of {total}+', { page: p, total })
+          : t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))
     const resolvedFormatPageSizeLabel =
       formatPageSizeLabel ??
       ((size: number) =>
         t('ui.pagination.itemsPerPage.label', '{size} / page', { size }))
     const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))
-    const safePage = Math.min(Math.max(1, page), totalPages)
+    // A capped total is a floor: never clamp the current page down to the
+    // derived count — a page past the floor holds reachable rows.
+    const safePage = totalIsCapped
+      ? Math.max(1, page)
+      : Math.min(Math.max(1, page), totalPages)
+    const listPages = Math.max(totalPages, safePage)
+    const canGoNext = totalIsCapped
+      ? (hasNextPage ?? safePage < listPages)
+      : safePage < totalPages
     const items = React.useMemo(
-      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),
-      [safePage, totalPages, siblingCount, boundaryCount],
+      () => buildPaginationItems(safePage, listPages, siblingCount, boundaryCount),
+      [safePage, listPages, siblingCount, boundaryCount],
     )
     const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange)
 
     const goTo = React.useCallback(
       (next: number) => {
         if (disabled) return
-        const bounded = Math.min(Math.max(1, next), totalPages)
+        const upperBound = totalIsCapped ? Math.max(listPages, safePage + 1) : totalPages
+        const bounded = Math.min(Math.max(1, next), upperBound)
         if (bounded !== safePage) onPageChange(bounded)
       },
-      [disabled, onPageChange, safePage, totalPages],
+      [disabled, onPageChange, safePage, totalPages, totalIsCapped, listPages],
     )
 
     return (
@@ -243,7 +270,9 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
             data-slot="pagination-info"
             className="shrink-0 text-sm text-muted-foreground tabular-nums"
           >
-            {resolvedFormatPageInfo(safePage, totalPages)}
+            {/* When capped, report the best-known floor: a deep page proves at
+                least that many pages exist. */}
+            {resolvedFormatPageInfo(safePage, totalIsCapped ? listPages : totalPages)}
           </div>
         ) : (
           <div />
@@ -324,14 +353,16 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               type="button"
               data-slot="pagination-next"
               aria-label={t('ui.pagination.next.ariaLabel', 'Next page')}
-              disabled={disabled || safePage >= totalPages}
+              disabled={disabled || !canGoNext}
               onClick={() => goTo(safePage + 1)}
               className={cn(navButtonVariants())}
             >
               <ChevronRight aria-hidden="true" className="size-5" />
             </button>
           ) : null}
-          {showFirstLast ? (
+          {/* The last-page jump is suppressed for capped totals: it would land
+              on the floor page while presenting itself as the end of the data. */}
+          {showFirstLast && !totalIsCapped ? (
             <button
               type="button"
               data-slot="pagination-last"

package/src/primitives/rich-editor.tsx

@@ -1543,12 +1543,17 @@ function RichEditorAutoToolbar({
   return (
     <div className="relative w-full">
       <div
-        ref={measureRef}
         aria-hidden="true"
-        className="pointer-events-none invisible absolute left-0 top-0 flex flex-row flex-nowrap items-center gap-0.5"
+        data-slot="rich-editor-toolbar-measure-clip"
+        className="pointer-events-none absolute inset-0 overflow-hidden"
       >
-        {items.map(renderToolbarItem)}
-        <RichEditorDropdownButton icon={<MoreVertical />} ariaLabel={labels.more} showChevron={false} menu={<div />} />
+        <div
+          ref={measureRef}
+          className="invisible absolute left-0 top-0 flex flex-row flex-nowrap items-center gap-0.5"
+        >
+          {items.map(renderToolbarItem)}
+          <RichEditorDropdownButton icon={<MoreVertical />} ariaLabel={labels.more} showChevron={false} menu={<div />} />
+        </div>
       </div>
       <RichEditorToolbar ref={containerRef} className="w-full flex-nowrap overflow-hidden">
         {visibleItems.map(renderToolbarItem)}

package/src/utils/__tests__/format.test.ts

@@ -1,5 +1,17 @@
 import { formatCurrency, formatDate } from '../format'
 
+// Every assertion below pins the locale explicitly (#5105). Without it these tests read the
+// runtime's default locale, so they pass in en-US and fail on any contributor machine whose
+// default is something else.
+const EN = 'en-US'
+const PL = 'pl-PL'
+
+// A date-time literal without an offset is parsed as *local* time, so it lands on the same
+// calendar day in every timezone and both the month and the day can be asserted exactly. The
+// instant form cannot: midday UTC keeps the month stable but still shifts the day at the
+// extremes (UTC+14 / UTC-12), which is why the assertions below no longer use one.
+const LOCAL_MIDDAY = '2026-06-09T12:00:00'
+
 describe('formatCurrency', () => {
   it('returns null for empty input', () => {
     expect(formatCurrency(null)).toBeNull()
@@ -16,21 +28,25 @@ describe('formatCurrency', () => {
   })
 
   it('formats a numeric value with an ISO currency code', () => {
-    const result = formatCurrency(1234.5, 'usd')
-    expect(result).toMatch(/1,234\.5/)
-    expect(result).toMatch(/\$|USD/)
+    expect(formatCurrency(1234.5, 'usd', EN)).toBe('$1,234.50')
   })
 
   it('formats a numeric string the same as a number', () => {
-    expect(formatCurrency('1234.5', 'USD')).toBe(formatCurrency(1234.5, 'USD'))
+    expect(formatCurrency('1234.5', 'USD', EN)).toBe(formatCurrency(1234.5, 'USD', EN))
   })
 
   it('falls back to a plain number without a currency code', () => {
-    expect(formatCurrency(1000)).toBe(new Intl.NumberFormat().format(1000))
+    expect(formatCurrency(1000, null, EN)).toBe('1,000')
   })
 
   it('ignores currency codes that are not three characters', () => {
-    expect(formatCurrency(1000, 'US')).toBe(new Intl.NumberFormat().format(1000))
+    expect(formatCurrency(1000, 'US', EN)).toBe('1,000')
+  })
+
+  it('formats in the requested locale rather than the runtime default', () => {
+    expect(formatCurrency(1234.5, 'USD', PL)).toMatch(/^1234,50/)
+    expect(formatCurrency(1234.5, 'USD', PL)).toMatch(/USD/)
+    expect(formatCurrency(1000, null, PL)).toBe('1000')
   })
 })
 
@@ -46,13 +62,10 @@ describe('formatDate', () => {
   })
 
   it('formats a valid ISO date as a localized short date', () => {
-    const result = formatDate('2026-06-09T00:00:00.000Z')
-    expect(result).toEqual(
-      new Date('2026-06-09T00:00:00.000Z').toLocaleDateString(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }),
-    )
+    expect(formatDate(LOCAL_MIDDAY, EN)).toBe('Jun 9, 2026')
+  })
+
+  it('formats in the requested locale rather than the runtime default', () => {
+    expect(formatDate(LOCAL_MIDDAY, PL)).toBe('9 cze 2026')
   })
 })