@carlonicora/nextjs-jsonapi 6.24.0 → 6.25.0

package/src/features/blog/components/admin/BlogTranslationStatus.tsx

@@ -4,6 +4,7 @@ import { LoaderCircleIcon, RotateCcwIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useState } from "react";
 import { errorToast } from "../../../../components";
+import { useDateFormatter } from "../../../../contexts/DateLocaleContext";
 import { useI18nLocale } from "../../../../i18n";
 import { Badge, Button } from "../../../../shadcnui";
 import { BlogCategoryInterface } from "../../data";
@@ -47,8 +48,8 @@ export function useBlogLanguageName(): (language: string) => string {
 
 /** Formats a date for the admin pages in the viewer's locale. */
 export function useBlogDateFormatter(): (date?: Date) => string {
-  const locale = useI18nLocale();
-  return useCallback((date?: Date) => (date ? date.toLocaleDateString(locale, { dateStyle: "medium" }) : ""), [locale]);
+  const dates = useDateFormatter();
+  return useCallback((date?: Date) => dates.format(date, "dateMedium"), [dates]);
 }
 
 type BlogTranslationStatusProps = {

package/src/features/blog/components/public/BlogPostMeta.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useFormatter, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
+import { useDateFormatter } from "../../../../contexts/DateLocaleContext";
 import { cn } from "../../../../utils/cn";
 import type { PublicBlogPost } from "../../types/blog-public.types";
 
@@ -19,12 +20,12 @@ export function BlogPostMeta(props: {
 }) {
   const { post, showAuthor, showDate, showUpdated, className } = props;
   const t = useTranslations();
-  const format = useFormatter();
+  const dates = useDateFormatter();
 
   const parts: string[] = [];
   if (showAuthor && post.authorName) parts.push(t("blog.public.by", { author: post.authorName }));
   if (showDate && post.publishedAt) {
-    parts.push(format.dateTime(new Date(post.publishedAt), { dateStyle: "medium" }));
+    parts.push(dates.format(post.publishedAt, "dateMedium"));
   }
   if (
     showUpdated &&
@@ -32,7 +33,7 @@ export function BlogPostMeta(props: {
     post.updatedAt &&
     new Date(post.updatedAt).getTime() - new Date(post.publishedAt).getTime() > ONE_DAY_MS
   ) {
-    parts.push(t("blog.public.updated", { date: format.dateTime(new Date(post.updatedAt), { dateStyle: "medium" }) }));
+    parts.push(t("blog.public.updated", { date: dates.format(post.updatedAt, "dateMedium") }));
   }
   parts.push(t("blog.public.readingTime", { minutes: post.readingMinutes }));
 

package/src/features/blog/components/public/__tests__/BlogList.spec.tsx

@@ -9,7 +9,6 @@ import { BlogList } from "../BlogList";
 vi.mock("next-intl", () => ({
   useTranslations: () => (key: string, values?: Record<string, unknown>) =>
     values ? `${key} ${Object.values(values).join(" ")}` : key,
-  useFormatter: () => ({ dateTime: (date: Date) => date.toISOString().slice(0, 10) }),
 }));
 vi.mock("next/image", () => ({
   default: ({ src, alt }: { src: string; alt: string }) => <img src={src} alt={alt} />,
@@ -101,7 +100,7 @@ describe("BlogList", () => {
     expect(screen.getByRole("heading", { level: 1, name: "blog.public.title" })).toBeInTheDocument();
     expect(screen.getByText("blog.public.eyebrow")).toBeInTheDocument();
     // The public blog shows no dates in any layout.
-    expect(screen.queryByText(/2026-10-12/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Oct 12, 2026|12 Oct 2026/)).not.toBeInTheDocument();
   });
 
   it("active category chip is marked and links back to all", () => {

package/src/features/blog/components/public/__tests__/BlogPostView.spec.tsx

@@ -9,7 +9,6 @@ import { BlogPostView } from "../BlogPostView";
 vi.mock("next-intl", () => ({
   useTranslations: () => (key: string, values?: Record<string, unknown>) =>
     values ? `${key} ${Object.values(values).join(" ")}` : key,
-  useFormatter: () => ({ dateTime: (date: Date) => date.toISOString().slice(0, 10) }),
 }));
 vi.mock("next/image", () => ({
   default: ({ src, alt }: { src: string; alt: string }) => <img src={src} alt={alt} />,
@@ -102,8 +101,8 @@ describe("BlogPostView", () => {
 
   it("shows neither the publish date nor the updated date", () => {
     render(<BlogPostView post={main} categories={cats} related={[]} basePath="/blog" />);
-    expect(screen.queryByText(/2026-10-12/)).not.toBeInTheDocument();
-    expect(screen.queryByText(/2026-10-15/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Oct 12, 2026|12 Oct 2026/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Oct 15, 2026|15 Oct 2026/)).not.toBeInTheDocument();
     expect(screen.queryByText(/blog\.public\.updated/)).not.toBeInTheDocument();
   });
 

package/src/features/blog/hooks/useBlogPostTableStructure.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { Modules } from "../../../core";
 import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
-import { useI18nLocale } from "../../../i18n";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 import { Badge, Link } from "../../../shadcnui";
 import { BLOG_STATUS_BADGE } from "../components/admin/BlogTranslationStatus";
 import { useBlogCategoryNames } from "./useBlogCategoryNames";
@@ -19,7 +19,7 @@ import { BlogPostFields, BlogPostInterface } from "../data";
  */
 export const useBlogPostTableStructure: UseTableStructureHook<BlogPostInterface, BlogPostFields> = (params) => {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  const dates = useDateFormatter();
   const generateUrl = usePageUrlGenerator();
   const categoryName = useBlogCategoryNames();
 
@@ -85,11 +85,7 @@ export const useBlogPostTableStructure: UseTableStructureHook<BlogPostInterface,
       cell: ({ row }: { row: TableContent<BlogPostInterface> }) => {
         const post: BlogPostInterface = row.original.jsonApiData;
         if (!post.publishedAt) return <span className="text-muted-foreground text-xs">—</span>;
-        return (
-          <span className="text-xs tabular-nums">
-            {post.publishedAt.toLocaleDateString(locale, { dateStyle: "medium" })}
-          </span>
-        );
+        return <span className="text-xs tabular-nums">{dates.format(post.publishedAt, "dateMedium")}</span>;
       },
       enableSorting: false,
       enableHiding: false,
@@ -118,7 +114,7 @@ export const useBlogPostTableStructure: UseTableStructureHook<BlogPostInterface,
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<BlogPostInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, generateUrl, locale, categoryName]);
+  }, [params.fields, fieldColumnMap, t, generateUrl, dates, categoryName]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

package/src/features/email-automation/hooks/useEmailAutomationEnrollmentTableStructure.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { useLocale, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { Badge } from "../../../shadcnui";
 import { registerTableGenerator, TableContent, UseTableStructureHook } from "../../../hooks";
-import { dateFormatLocale, formatDate } from "../../../utils/date-formatter";
+import { useDateFormatter, useMountedNow } from "../../../contexts/DateLocaleContext";
+import { formatDate } from "../../../utils/date-formatter";
 import { EmailAutomationEnrollmentFields } from "../data/email-automation-enrollment.fields";
 import { EmailAutomationEnrollmentInterface } from "../data/EmailAutomationEnrollmentInterface";
 
@@ -22,7 +23,8 @@ export const useEmailAutomationEnrollmentTableStructure: UseTableStructureHook<
   EmailAutomationEnrollmentFields
 > = (params) => {
   const t = useTranslations();
-  const locale = dateFormatLocale(useLocale());
+  const { locale } = useDateFormatter();
+  const now = useMountedNow();
 
   const tableData = useMemo(() => {
     return params.data.map((enrollment: EmailAutomationEnrollmentInterface) => {
@@ -95,7 +97,11 @@ export const useEmailAutomationEnrollmentTableStructure: UseTableStructureHook<
       cell: ({ row }: { row: TableContent<EmailAutomationEnrollmentInterface> }) => {
         const enrollment: EmailAutomationEnrollmentInterface = row.original.jsonApiData;
         if (!enrollment.nextSendAt) return empty;
-        return <span className="text-xs tabular-nums">{formatDate(enrollment.nextSendAt, "dateTime", locale)}</span>;
+        return (
+          <span className="text-xs tabular-nums">
+            {now ? formatDate(enrollment.nextSendAt, "dateTime", locale, now) : ""}
+          </span>
+        );
       },
       enableSorting: false,
       enableHiding: false,
@@ -118,7 +124,7 @@ export const useEmailAutomationEnrollmentTableStructure: UseTableStructureHook<
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<EmailAutomationEnrollmentInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, locale]);
+  }, [params.fields, fieldColumnMap, t, locale, now]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

package/src/features/email-blast/components/containers/EmailBlastContainer.tsx

@@ -6,10 +6,10 @@ import { ReactNode, useCallback, useEffect, useState } from "react";
 import { CommonDeleter, RoundPageContainer } from "../../../../components";
 import { errorToast } from "../../../../components/errors/errorToast";
 import { DetailField } from "../../../../components/typography";
+import { useDateFormatter } from "../../../../contexts/DateLocaleContext";
 import { SharedProvider } from "../../../../contexts/SharedContext";
 import { Modules } from "../../../../core";
 import { usePageUrlGenerator } from "../../../../hooks";
-import { useI18nLocale } from "../../../../i18n";
 import { BreadcrumbItemData } from "../../../../interfaces";
 import { Badge, Button } from "../../../../shadcnui";
 import { showToast } from "../../../../utils/toast";
@@ -54,7 +54,7 @@ function EmailBlastSendTestButton({ blast }: { blast: EmailBlastInterface }) {
 
 export function EmailBlastContainer({ blastId }: EmailBlastContainerProps) {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  const dates = useDateFormatter();
   const generateUrl = usePageUrlGenerator();
   const [blast, setBlast] = useState<EmailBlastInterface | undefined>(undefined);
 
@@ -130,7 +130,7 @@ export function EmailBlastContainer({ blastId }: EmailBlastContainerProps) {
           </div>
           <DetailField
             label={t("emailBlasts.detail.sentAt")}
-            value={blast.sentAt ? blast.sentAt.toLocaleString(locale) : "—"}
+            value={blast.sentAt ? dates.format(blast.sentAt, "dateTimeMedium") : "—"}
           />
           <DetailField label={t("emailBlasts.list.columns.subject")} value={blast.subject} />
           <DetailField label={t("emailBlasts.detail.replyTo")} value={blast.replyTo ?? "—"} />

package/src/features/email-blast/hooks/useEmailBlastTableStructure.tsx

@@ -6,7 +6,7 @@ import { useMemo } from "react";
 import { Badge, Link } from "../../../shadcnui";
 import { Modules } from "../../../core";
 import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
-import { useI18nLocale } from "../../../i18n";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 import { EmailBlastFields } from "../data/email-blast.fields";
 import { EmailBlastInterface, EmailBlastStatus } from "../data/EmailBlastInterface";
 
@@ -18,7 +18,7 @@ const STATUS_VARIANTS: Record<EmailBlastStatus, "softGray" | "softAmber" | "soft
 
 export const useEmailBlastTableStructure: UseTableStructureHook<EmailBlastInterface, EmailBlastFields> = (params) => {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  const dates = useDateFormatter();
   const generateUrl = usePageUrlGenerator();
 
   const tableData = useMemo(() => {
@@ -90,7 +90,7 @@ export const useEmailBlastTableStructure: UseTableStructureHook<EmailBlastInterf
       cell: ({ row }: { row: TableContent<EmailBlastInterface> }) => {
         const blast: EmailBlastInterface = row.original.jsonApiData;
         if (!blast.sentAt) return <span className="text-muted-foreground text-xs">—</span>;
-        return <span className="text-sm">{blast.sentAt.toLocaleDateString(locale)}</span>;
+        return <span className="text-sm">{dates.format(blast.sentAt, "date")}</span>;
       },
       enableSorting: false,
       enableHiding: false,
@@ -111,7 +111,7 @@ export const useEmailBlastTableStructure: UseTableStructureHook<EmailBlastInterf
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<EmailBlastInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, generateUrl, locale]);
+  }, [params.fields, fieldColumnMap, t, generateUrl, dates]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

package/src/features/handbook/components/parts/HandbookIndexStatus.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useFormatter, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import { useMemo } from "react";
+import { useDateFormatter } from "../../../../contexts/DateLocaleContext";
 
 import { HandbookPageInterface } from "../../data/HandbookPageInterface";
 
@@ -27,7 +28,7 @@ const FAILURE_STATUSES = new Set(["failed", "error"]);
  */
 export function HandbookIndexStatus({ pages }: HandbookIndexStatusProps) {
   const t = useTranslations();
-  const format = useFormatter();
+  const dates = useDateFormatter();
 
   const lastSynced = useMemo(() => {
     let latest: Date | undefined = undefined;
@@ -50,7 +51,7 @@ export function HandbookIndexStatus({ pages }: HandbookIndexStatusProps) {
     <span className="text-muted-foreground text-xs tabular-nums">
       {t("handbook.contents.status", {
         count: pages.length,
-        date: lastSynced ? format.dateTime(lastSynced, { dateStyle: "medium" }) : "",
+        date: lastSynced ? dates.format(lastSynced, "dateMedium") : "",
       })}
       {failures > 0 ? (
         <span className="text-destructive ms-2 tabular-nums">

package/src/features/help/components/HelpArticleBody.tsx

@@ -2,8 +2,9 @@
 
 import { ReactNode } from "react";
 import Link from "next/link";
-import { useFormatter, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import { usePageUrlGenerator } from "../../../client";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 
 type Sibling = { howToType: string; slug: string; title: string };
 
@@ -17,7 +18,7 @@ export function HelpArticleBody(props: {
   children: ReactNode;
 }) {
   const t = useTranslations();
-  const format = useFormatter();
+  const dates = useDateFormatter();
   const generateUrl = usePageUrlGenerator();
   const { howToType, title, summary, updatedAt, prev, next, children } = props;
 
@@ -36,7 +37,7 @@ export function HelpArticleBody(props: {
         <div className="text-muted-foreground text-xs">
           <span>
             {t("help.article.lastUpdated", {
-              date: format.dateTime(new Date(updatedAt), { dateStyle: "short" }),
+              date: dates.format(updatedAt, "date"),
             })}
           </span>
         </div>

package/src/features/notification/components/notifications/Notification.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement, Suspense, useEffect, useState } from "react";
 import { usePageUrlGenerator } from "../../../../hooks";
 import { Link } from "../../../../shadcnui";
-import { useI18nLocale } from "../../../../i18n";
-import { dateFormatLocale, formatDate } from "../../../../utils";
+import {
+  DateLocaleSource,
+  DateLocaleSourceProvider,
+  useDateFormatter,
+  useMountedNow,
+} from "../../../../contexts/DateLocaleContext";
+import { formatDate } from "../../../../utils";
 import { UserInterface } from "../../../user";
 import { UserAvatar } from "../../../user/components";
 import { NotificationInterface } from "../../data";
@@ -32,12 +37,22 @@ export const generateNotificationData = (params: {
   return response;
 };
 
+/**
+ * The toast's time. Sonner draws the toast outside the session providers, so the toast
+ * re-provides the captured date-locale source around this leaf, which suspends behind its
+ * own boundary.
+ */
+function NotificationToastTime({ date }: { date: Date }) {
+  const { format } = useDateFormatter();
+  return <>{format(new Date(date), "dateTime")}</>;
+}
+
 export function NotificationToast(
   notification: NotificationInterface,
   t: any,
   generateUrl: any,
   reouter: any,
-  locale?: string,
+  dateLocaleSource: DateLocaleSource | null = null,
 ): {
   title: string;
   description: string | ReactElement<any>;
@@ -69,7 +84,11 @@ export function NotificationToast(
             })}
           </p>
           <div className="text-muted-foreground mt-1 w-full text-xs">
-            {formatDate(new Date(notification.createdAt), "dateTime", dateFormatLocale(locale))}
+            <DateLocaleSourceProvider value={dateLocaleSource}>
+              <Suspense fallback={null}>
+                <NotificationToastTime date={notification.createdAt} />
+              </Suspense>
+            </DateLocaleSourceProvider>
           </div>
         </div>
       </div>
@@ -85,11 +104,21 @@ export function NotificationToast(
   };
 }
 
+/**
+ * The popover row's time ("3 hours ago", else the date and time). A leaf behind its own
+ * boundary: the popover lives in the shell, and this read suspends on the session. The
+ * relative text renders only after mount, so the clock is never read during render.
+ */
+function NotificationMenuItemTime({ date }: { date: Date }) {
+  const { locale } = useDateFormatter();
+  const now = useMountedNow();
+  return <>{now ? formatDate(new Date(date), "default", locale, now) : ""}</>;
+}
+
 export function NotificationMenuItem({ notification, closePopover }: TaskCommentedOnProps) {
   const generateUrl = usePageUrlGenerator();
   const [isRead, setIsRead] = useState<boolean>(false);
   const t = useTranslations();
-  const dateLocale = dateFormatLocale(useI18nLocale());
 
   useEffect(() => {
     setIsRead(notification.isRead);
@@ -115,7 +144,9 @@ export function NotificationMenuItem({ notification, closePopover }: TaskComment
           })}
         </p>
         <div className="text-muted-foreground mt-0.5 text-xs">
-          {formatDate(new Date(notification.createdAt), "default", dateLocale)}
+          <Suspense fallback={null}>
+            <NotificationMenuItemTime date={notification.createdAt} />
+          </Suspense>
         </div>
       </div>
       {!isRead && <span className="bg-primary mt-1.5 size-2 shrink-0 rounded-full" aria-hidden />}

package/src/features/notification/contexts/NotificationContext.tsx

@@ -3,8 +3,9 @@
 import { useTranslations } from "next-intl";
 import React, { createContext, ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { SharedProvider } from "../../../contexts";
+import { useDateLocaleSource } from "../../../contexts/DateLocaleContext";
 import { Modules } from "../../../core";
-import { useI18nLocale, useI18nRouter } from "../../../i18n";
+import { useI18nRouter } from "../../../i18n";
 import { BreadcrumbItemData } from "../../../interfaces";
 import { NotificationMenuItem, NotificationToast } from "../components/notifications/Notification";
 import { getRoleId, isRolesConfigured } from "../../../roles";
@@ -47,7 +48,9 @@ type NotificationContextProviderProps = {
 
 export const NotificationContextProvider = ({ children }: NotificationContextProviderProps) => {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  // Non-suspending: the raw date-locale source, re-provided around the toast time (sonner
+  // renders the toast outside the session providers).
+  const dateLocaleSource = useDateLocaleSource();
   // A ref, not a dependency: the translator only words the fallback errors and must
   // not re-create loadNotifications, whose identity drives the initial-load effect.
   const tRef = useRef(t);
@@ -181,7 +184,7 @@ export const NotificationContextProvider = ({ children }: NotificationContextPro
       onClick: () => void;
     };
   } => {
-    return NotificationToast(notification, t, generateUrl, router, locale);
+    return NotificationToast(notification, t, generateUrl, router, dateLocaleSource);
   };
 
   const generateNotification = (notification: NotificationInterface, closePopover: () => void) => {

package/src/features/notification/hooks/useNotificationTableStructure.tsx

@@ -6,8 +6,8 @@ import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../../../shadcnui";
-import { useI18nLocale } from "../../../i18n";
-import { dateFormatLocale, formatDate } from "../../../utils";
+import { useDateFormatter, useMountedNow } from "../../../contexts/DateLocaleContext";
+import { formatDate } from "../../../utils";
 import { generateNotificationData } from "../components/notifications/Notification";
 import { useNotificationContext } from "../contexts/NotificationContext";
 import { NotificationIcon } from "../components/notifications/NotificationIcon";
@@ -33,7 +33,8 @@ export const useNotificationTableStructure: UseTableStructureHook<NotificationIn
   params,
 ) => {
   const t = useTranslations();
-  const dateLocale = dateFormatLocale(useI18nLocale());
+  const { locale: dateLocale } = useDateFormatter();
+  const now = useMountedNow();
   const generateUrl = usePageUrlGenerator();
   const { loadNotifications } = useNotificationContext();
 
@@ -125,7 +126,7 @@ export const useNotificationTableStructure: UseTableStructureHook<NotificationIn
            shows how long ago it arrived. The two must match. */
         return (
           <span className="text-muted-foreground text-xs">
-            {formatDate(new Date(notification.createdAt), "default", dateLocale)}
+            {now ? formatDate(new Date(notification.createdAt), "default", dateLocale, now) : ""}
           </span>
         );
       },
@@ -175,7 +176,7 @@ export const useNotificationTableStructure: UseTableStructureHook<NotificationIn
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<NotificationInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, generateUrl]);
+  }, [params.fields, fieldColumnMap, t, generateUrl, dateLocale, now]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { formatDistanceToNow } from "date-fns";
-import { useI18nDateFnsLocale } from "../../../i18n";
+import { useDateFormatter, useMountedNow } from "../../../contexts/DateLocaleContext";
 import { Key, MoreVertical, Pencil, Trash2 } from "lucide-react";
 import {
   Badge,
@@ -35,13 +34,17 @@ export interface OAuthClientCardProps {
  */
 export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClientCardProps) {
   const t = useTranslations();
-  const dateFnsLocale = useI18nDateFnsLocale();
+  const { relative } = useDateFormatter();
+  const now = useMountedNow();
   // Truncate client ID for display
   const truncatedId =
     client.clientId.length > 12 ? `${client.clientId.slice(0, 8)}...${client.clientId.slice(-4)}` : client.clientId;
 
+  // The relative text renders only after mount: `now` is never read during render.
   const createdAgo = client.createdAt
-    ? formatDistanceToNow(new Date(client.createdAt), { addSuffix: true, locale: dateFnsLocale })
+    ? now
+      ? relative(new Date(client.createdAt), { now })
+      : undefined
     : t("oauth.ui.card.unknown");
 
   return (
@@ -100,7 +103,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
       <CardContent>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
           <span className="tabular-nums">{truncatedId}</span>
-          <span>{t("oauth.ui.card.created", { ago: createdAgo })}</span>
+          {createdAgo !== undefined && <span>{t("oauth.ui.card.created", { ago: createdAgo })}</span>}
           <span>{client.isConfidential ? t("oauth.ui.card.confidential") : t("oauth.ui.card.public")}</span>
         </div>
       </CardContent>

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -23,8 +23,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "../../../shadcnui";
-import { useI18nLocale } from "../../../i18n";
-import { dateFormatLocale } from "../../../utils";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 import { useOAuthScopeText } from "../hooks/useOAuthScopeText";
 import { OAuthClientInterface } from "../interfaces/oauth.interface";
 
@@ -52,7 +51,7 @@ export function OAuthClientDetail({
   onRegenerateSecret,
 }: OAuthClientDetailProps) {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  const { format } = useDateFormatter();
   const scopeText = useOAuthScopeText();
   const [copiedField, setCopiedField] = useState<string | null>(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -92,9 +91,7 @@ export function OAuthClientDetail({
     }
   }, [onRegenerateSecret]);
 
-  const createdDate = client.createdAt
-    ? new Date(client.createdAt).toLocaleDateString(dateFormatLocale(locale), { dateStyle: "long" })
-    : t("oauth.ui.card.unknown");
+  const createdDate = client.createdAt ? format(new Date(client.createdAt), "dateLong") : t("oauth.ui.card.unknown");
 
   return (
     <>

package/src/features/tokenusage/lib/__tests__/formatters.spec.ts

@@ -19,3 +19,22 @@ describe("createUsageFormatters.compact", () => {
     expect(compact(1500000)).toBe("1.5M");
   });
 });
+
+describe("createUsageFormatters.bucketDate dateLocale", () => {
+  it("formats day buckets with the date locale", () => {
+    expect(createUsageFormatters("en", "EUR", "en-GB").bucketDate("2026-04-25", "day")).toBe("25 Apr");
+  });
+
+  it("defaults the date locale to the number locale", () => {
+    expect(createUsageFormatters("en", "EUR").bucketDate("2026-04-25", "day")).toBe("Apr 25");
+  });
+
+  it("keeps number output identical between the two", () => {
+    const withDateLocale = createUsageFormatters("en", "EUR", "en-GB");
+    const withoutDateLocale = createUsageFormatters("en", "EUR");
+    for (const value of [0, 0.05, 1250, 1500000]) {
+      expect(withDateLocale.compact(value)).toBe(withoutDateLocale.compact(value));
+      expect(withDateLocale.decimal(value, 2)).toBe(withoutDateLocale.decimal(value, 2));
+    }
+  });
+});

package/src/features/tokenusage/lib/formatters.ts

@@ -2,6 +2,7 @@
 
 import { useLocale } from "next-intl";
 import { useMemo } from "react";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 import type { Metric } from "../data/tokenusage-admin.types";
 import { getTokenUsageCurrency } from "./config";
 
@@ -38,8 +39,11 @@ export type UsageFormatters = {
  * `bucketDate` formats in UTC, always. The wire value is a `type: "date"` — a
  * calendar day — parsed to UTC midnight; reading it back with local getters
  * would shift the label a day early west of UTC.
+ *
+ * `dateLocale` formats the bucket dates only (the browser's regional order);
+ * numbers, currency and collation keep `locale`. It defaults to `locale`.
  */
-export function createUsageFormatters(locale: string, currency: string): UsageFormatters {
+export function createUsageFormatters(locale: string, currency: string, dateLocale: string = locale): UsageFormatters {
   const symbol =
     new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol" })
       .formatToParts(0)
@@ -48,8 +52,8 @@ export function createUsageFormatters(locale: string, currency: string): UsageFo
   const decimal = (value: number, decimals: number): string =>
     value.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
 
-  const dayFormat = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", timeZone: "UTC" });
-  const monthFormat = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" });
+  const dayFormat = new Intl.DateTimeFormat(dateLocale, { day: "numeric", month: "short", timeZone: "UTC" });
+  const monthFormat = new Intl.DateTimeFormat(dateLocale, { month: "short", year: "numeric", timeZone: "UTC" });
   // Axis ticks step by 1, 2, 2.5 or 5 times a power of ten, so a tick never needs
   // more than three significant digits. A fixed one-decimal cap rounded a 0.05
   // step into repeated labels (0.1, 0.1, 0.2, 0.2); significant digits keep every
@@ -94,11 +98,12 @@ export function createUsageFormatters(locale: string, currency: string): UsageFo
 
 /**
  * The formatter set for the current request's locale and the app's configured
- * currency. Memoised on both, so the Intl objects are built once per locale
- * rather than on every render.
+ * currency, with bucket dates in the resolved date locale. Memoised on all
+ * three, so the Intl objects are built once per locale rather than on every render.
  */
 export function useUsageFormatters(): UsageFormatters {
   const locale = useLocale();
+  const { locale: dateLocale } = useDateFormatter();
   const currency = getTokenUsageCurrency();
-  return useMemo(() => createUsageFormatters(locale, currency), [locale, currency]);
+  return useMemo(() => createUsageFormatters(locale, currency, dateLocale), [locale, currency, dateLocale]);
 }