@djangocfg/layouts 2.1.591 → 2.1.593

package/src/layouts/PublicLayout/shared/navbarShell.types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react';
+
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarInsetX,
+  PublicNavbarPosition,
+  PublicNavbarVariant,
+  PublicNavLayout,
+} from '../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { NavAction } from '../primitives/NavActionItem';
+
+export interface ShapeInputs {
+  /** true at scrollY >= threshold */
+  scrolled: boolean;
+  /** Matches `transparent` flag at the source. */
+  transparent: boolean;
+  /**
+   * true while the mobile drawer is open. A `transparent` bar MUST go opaque
+   * here regardless of scroll position: an open drawer means the brand + close
+   * button sit over page content, and a see-through bar leaves them floating on
+   * whatever is scrolled behind — the "navbar lost its background" bug.
+   */
+  menuOpen: boolean;
+}
+
+export interface NavbarShellProps {
+  // ── Surface identity (reported to context) ────────────────────────────────
+  variant: PublicNavbarVariant;
+  position: PublicNavbarPosition;
+
+  // ── Content ───────────────────────────────────────────────────────────────
+  brand?: ReactNode;
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  /**
+   * Hard cap for how many items to try to fit on desktop. Useful when a
+   * consumer wants to force a compact primary row even if more would fit.
+   * Defaults to the full list length (let the responsive measurer decide).
+   */
+  desktopMaxPrimaryItems?: number;
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  navLayout?: PublicNavLayout;
+  navbarHeight?: PublicNavbarHeight;
+  /** Horizontal inset between outer edge and the inner row.
+   *  @default 'sm' */
+  insetX?: PublicNavbarInsetX;
+  /** Full override for the row container (escape hatch).
+   *  When set, wins over `insetX`. */
+  innerPadding?: string;
+
+  // ── Scroll behavior ───────────────────────────────────────────────────────
+  hideNavOnScroll?: boolean;
+  transparent?: boolean;
+  transparentThreshold?: number;
+
+  // ── Chrome (per-variant) ──────────────────────────────────────────────────
+  /** Classes on the outer wrapper (fixed/sticky, top offset, outer x-padding). */
+  outerClassName?: string;
+  /** Classes for the `<nav>` element defining the shape (rounding, border, shadow). */
+  shapeClassName?: string;
+  /** Surface classes (bg, backdrop-blur). Driven by `shapeForState`. */
+  shapeForState?: (inputs: ShapeInputs) => string;
+
+  /**
+   * Replaces the default actions column (UserMenu + mobile-toggle).
+   * Variant owns the mobile toggle too. Receives helpers so it can build the
+   * right-hand side however it wants.
+   */
+  renderActions?: (ctx: NavbarActionsContext) => ReactNode;
+
+  // ── Default-actions slots (only used when `renderActions` is NOT provided) ─
+  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
+  actions?: NavAction[];
+  /** Arbitrary ReactNode between actions and UserMenu. */
+  actionsLeadingSlot?: ReactNode;
+  /** Arbitrary ReactNode after the mobile toggle. */
+  actionsTrailingSlot?: ReactNode;
+
+  // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
+  /** Toggle individual controls. Locale switcher also requires `i18n`. */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+
+  // ── Props override (used by variants that proxy ctx differently) ──────────
+  mobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+}
+
+export interface NavbarActionsContext {
+  userMenu?: UserMenuConfig;
+  mobileMenuOpen: boolean;
+  toggleMobileMenu: () => void;
+  toggleMobileLabel: string;
+  navLayout: PublicNavLayout;
+  /**
+   * Pre-built theme/locale controls node. `null` when both toggles are off.
+   * Variants with a custom `renderActions` can choose where to place it.
+   */
+  controls: ReactNode | null;
+}

package/src/layouts/PublicLayout/shared/navbarShellStyles.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { PublicNavbarHeight, PublicNavbarInsetX } from '../navbarTypes';
+
+/**
+ * Vertical padding, per breakpoint. Two independent scales rather than one with
+ * `sm:` steps inside it: the mobile row's tallest element is the 44px burger,
+ * so padding there is pure added height, while the desktop row needs the extra
+ * air to keep the link list off the panel edge.
+ */
+export const heightClsDesktop: Record<PublicNavbarHeight, string> = {
+  sm: 'py-2',
+  md: 'py-3.5',
+  lg: 'py-5',
+};
+
+export const heightClsMobile: Record<PublicNavbarHeight, string> = {
+  sm: 'py-1.5',
+  md: 'py-2',
+  lg: 'py-3',
+};
+
+/**
+ * Token → Tailwind class for the inner-row horizontal padding.
+ *
+ * Deliberately ASYMMETRIC at every breakpoint (`pl` > `pr`) to correct an
+ * optical imbalance, not a measured one. On the left the gutter meets the
+ * brand's glyphs directly; on the right it meets a button — an icon square on
+ * phones, the Login pill on desktop — whose box carries its own internal
+ * padding around the glyph. Equal `px` therefore *looks* lopsided, with a
+ * conspicuous moat to the right of the last control.
+ *
+ * It also stacks with the navbar shell's own outer gutter (`px-3 sm:px-4
+ * lg:px-6`), which is why the right side stays small in absolute terms: at
+ * `lg` the symmetric version put ~48px between the Login button and the
+ * viewport edge.
+ */
+/** Desktop (`lg`+) horizontal inset. Right stays trimmed — see the note above. */
+export const insetXClsDesktop: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'lg:pl-4 lg:pr-1.5',
+  sm: 'lg:pl-6 lg:pr-2',
+  md: 'lg:pl-8 lg:pr-3',
+  lg: 'lg:pl-12 lg:pr-5',
+};
+
+/** Mobile horizontal inset — tighter, and asymmetric for the same reason. */
+export const insetXClsMobile: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'pl-3 pr-1',
+  sm: 'pl-4 pr-1.5',
+  md: 'pl-5 pr-2',
+  lg: 'pl-6 pr-3',
+};
+
+/**
+ * Resolves the inset token into one class string covering both breakpoints.
+ *
+ * A caller may also pass raw Tailwind instead of a token; that escape hatch is
+ * applied verbatim to both rows, since we cannot know how to split it.
+ */
+export function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
+  const token = (value ?? 'sm') as keyof typeof insetXClsMobile;
+  if (!(token in insetXClsMobile)) return value as string;
+  return cn(insetXClsMobile[token], insetXClsDesktop[token]);
+}
+

package/src/layouts/SettingsLayout/README.md

@@ -1,6 +1,6 @@
 # SettingsLayout
 
-A Claude.ai-style **settings surface**: a searchable, grouped section rail on the
+A Claude.ai-style **settings surface**: a grouped section rail (search appears from 10 sections, `searchable`) on the
 left and a scrollable detail panel on the right. Available as a **global dialog**
 (URL-hash driven, zustand-backed, openable from anywhere) or an **inline form**.
 
@@ -127,7 +127,7 @@ ordering/labelling, or just name an ad-hoc `group` on a section:
 
 ```ts
 const groups = [
-  { id: 'general', label: 'General', order: 0 },
+  { id: 'general', order: 0 },
   { id: 'workspace', label: 'Workspace', order: 1 },
 ];
 ```
@@ -139,16 +139,19 @@ toggled via `builtins`:
 
 | id          | flag                 | default | content                              |
 | ----------- | -------------------- | ------- | ------------------------------------ |
-| `account`   | `builtins.account`   | `true`  | avatar + inline-editable profile/work fields, Preferences (Language dropdown + `ThemeSegmented`), and a **collapsible Danger zone** (delete account) |
-| `security`  | `builtins.security`  | `false` | two-factor auth (row-style)          |
+| `account`   | `builtins.account`   | `true`  | avatar, inline-editable profile/work fields, **Security** block (two-factor auth; hide with `builtins.security: false`) and a **collapsible Danger zone** (delete account) |
+| `general`   | `builtins.general`   | `true`  | **General** block: **Theme** (`ThemeSegmented`), **Time zone** (`TimezoneSelect` → `useTimezone`, sent as `X-Timezone`) and **Language** (shown when a layout i18n context exists); host rows from `generalRows` follow in a second block ("Other") |
 | `api-keys`  | `builtins.apiKeys`   | `true`  | API key display / regenerate / test (row-style) |
 
-Built-ins are merged **ahead of** app sections. They reuse the localized labels
+`generalRows` (on `SettingsDialog` / `SettingsForm` / `PrivateLayout settings`) takes
+your own `SettingRow`s for preferences only the host knows (e.g. a product-specific toggle); the layout adds none itself.
+
+Rail order: **Account** (opens first), **Preferences** (id `general`), then Platform → API keys. Built-ins are merged **ahead of** app sections. They reuse the localized labels
 and save/validation logic from `ProfileProvider`, so behaviour stays in one place.
 The built-in bodies are built from the ui-core `SettingRow`/`SettingsBlock`
 primitives (see below) — flat rows with hairline dividers, no card frames.
 
-> The `security` / `api-keys` bodies hit the real backend (2FA status, API key
+> The Account security block and `api-keys` body hit the real backend (2FA status, API key
 > retrieval). With no backend (e.g. Storybook) they show an error/empty state —
 > that's expected; gate them with `builtins` where there's no API.
 
@@ -215,17 +218,18 @@ SettingsLayout/
 │   └── useSettingsSections.ts pure: merge/order/group/filter sections
 ├── components/
 │   ├── SettingsShell.tsx      desktop rail+panel vs mobile tabs+panel (useIsMobile)
-│   ├── SettingsNav.tsx        desktop rail: title + search + grouped items
+│   ├── SettingsShell.tsx      header bar + rail + panel (desktop), tabs + panel (mobile)
+│   ├── SettingsNav.tsx        desktop rail: search + grouped items
 │   ├── SettingsNavItem.tsx    one rail row
 │   ├── SettingsTabs.tsx       mobile horizontal tab strip (text chips, auto-scroll active)
 │   ├── SettingsSearch.tsx     filter box
 │   └── SettingsPanel.tsx      header + independently-scrolling body
 └── sections/
-    ├── builtins.tsx           account/security/api-keys factory
-    ├── AccountSection.tsx     avatar + fields + preferences + danger zone (row-style)
+    ├── builtins.tsx           general/account/api-keys factory
+    ├── GeneralSection.tsx     Appearance + Language + host `generalRows`
+    ├── AccountSection.tsx     avatar + fields + 2FA + danger zone (row-style)
     ├── PreferencesRows.tsx    Language dropdown + ThemeSegmented as SettingRows
     ├── DeleteAccountRow.tsx   compact destructive row (inside collapsible Danger zone)
-    ├── SecuritySection.tsx    2FA wrapper
     └── ApiKeysSection.tsx     API-keys wrapper
 ```
 
@@ -256,3 +260,12 @@ exported too; the row primitives come from `@djangocfg/ui-core/components`.
 2. `useProfileDialogStore.open({ initialTab })` → `useSettingsDialog().open(id)`.
 3. Mount `<SettingsDialog/>` instead of `<ProfileDialog/>` (or pass `settings` to
    PrivateLayout). The account button can be repointed to `useSettingsDialog()`.
+
+## Localization
+
+Built-in text (rail labels, Preferences, Security, API key) comes from the
+self-contained dictionaries in `i18n/` (17 locales, `useSettingsCopy`), following the
+`@djangocfg/i18n` provider the host mounts, with English as the fallback. Widgets a host adds as sections (for example `mcpSettingsSection()` from `@djangocfg/widget-mcp`)
+follow the same provider. Text the host passes in (`sections`, `groups`, `generalRows`, titles) is the
+host's to translate; profile field labels still come from the central `layouts.profilePage.*`
+catalogue. A new built-in string goes into every `i18n/locales/*.ts` (`tsc` names a missing key).

package/src/layouts/SettingsLayout/SettingsDialog.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
+import { useAuth } from '@djangocfg/api/auth';
 import {
   Dialog,
   DialogContent,
@@ -13,6 +14,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import { SettingsForm } from './SettingsForm';
 import { useSettingsUrl } from './hooks/useSettingsUrl';
+import { useSettingsCopy } from './i18n';
 import { buildBuiltinSections } from './sections';
 import { useSettingsDialogStore } from './store';
 import type { SettingsDialogProps } from './types';
@@ -34,8 +36,9 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   sections: appSections = [],
   groups,
   builtins = {},
+  generalRows,
   initialSection,
-  searchable = true,
+  searchable = 'auto',
   enableDeleteAccount = true,
 }) => {
   const isOpen = useSettingsDialogStore((s) => s.isOpen);
@@ -43,39 +46,51 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   const close = useSettingsDialogStore((s) => s.close);
   const setSection = useSettingsDialogStore((s) => s.setSection);
   const isMobile = useIsMobile();
+  const copy = useSettingsCopy();
+  // Settings are about the signed-in user: for a guest the panels are empty, so `#settings` opens nothing until sign-in.
+  const { isAuthenticated } = useAuth();
 
   // Set of valid ids, so a bad URL hash falls back gracefully instead of
   // selecting a non-existent section. Cheap to recompute; built-ins are pure.
   const knownIds = useMemo(() => {
-    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount });
+    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount, copy });
     const ids = new Set<string>();
     [...builtin, ...appSections].forEach((s) => ids.add(s.id));
     return ids;
-  }, [builtins, enableDeleteAccount, appSections]);
+  }, [builtins, enableDeleteAccount, appSections, copy]);
+
+  // Menus (the account menu) link to these; only this component knows the host's sections.
+  const setMenuSections = useSettingsDialogStore((s) => s.setSections);
+  useEffect(() => {
+    const all = [...buildBuiltinSections({ builtins, enableDeleteAccount, copy }), ...appSections];
+    setMenuSections(all.filter((s) => !s.hidden).map(({ id, label, icon }) => ({ id, label, icon })));
+  }, [builtins, enableDeleteAccount, appSections, copy, setMenuSections]);
 
   const resolveSection = useCallback(
     (id: string | null) => (id && knownIds.has(id) ? id : null),
     [knownIds],
   );
 
-  useSettingsUrl({ urlKey, enabled: syncUrl, resolveSection });
+  useSettingsUrl({ urlKey, enabled: syncUrl && isAuthenticated, resolveSection });
 
-  const resolvedTitle = title ?? 'Settings';
+  const resolvedTitle = title ?? copy.nav.title;
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
+    <Dialog open={isOpen && isAuthenticated} onOpenChange={(open) => !open && close()}>
       <DialogContent
-        // Desktop: centered card with breathing room (capped, gap to edges).
+        // Desktop: large centred card, proportional to the viewport.
         // Mobile: near-fullscreen sheet (small inset) so the phone settings get
         // the whole screen, like Claude. Elevated `bg-card` lifts it off the page.
         className={cn(
-          'flex max-w-none flex-col gap-0 overflow-hidden border border-border bg-card p-0',
+          'flex max-w-none flex-col gap-0 overflow-hidden border border-foreground/5 bg-card p-0',
           isMobile
             ? 'h-[calc(100dvh-2rem)] w-[calc(100vw-1.5rem)]'
-            : 'h-[min(620px,calc(100vh-6rem))] w-[min(900px,calc(100vw-4rem))]',
+            // Claude proportions: 1024×800 at most, 1.28:1 at every size (ui-core
+            // DialogContent derives the width from the viewport height).
+            : '[--aspect-dialog:1.28] [--width-dialog:1024px]',
         )}
       >
-        {/* Accessible label — the visible heading lives in the nav rail. */}
+        {/* Accessible label — the visible heading is the shell header bar. */}
         <DialogTitle className="sr-only">
           {typeof resolvedTitle === 'string' ? resolvedTitle : 'Settings'}
         </DialogTitle>
@@ -89,6 +104,7 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
           sections={appSections}
           groups={groups}
           builtins={builtins}
+          generalRows={generalRows}
           initialSection={initialSection}
           searchable={searchable}
           enableDeleteAccount={enableDeleteAccount}

package/src/layouts/SettingsLayout/SettingsForm.tsx

@@ -8,7 +8,8 @@ import { Preloader } from '@djangocfg/ui-core/components';
 
 import { SettingsShell } from './components';
 import { SettingsProvider } from './context';
-import { buildBuiltinSections, BUILTIN_GROUP } from './sections';
+import { useSettingsCopy } from './i18n';
+import { buildBuiltinSections, BUILTIN_GROUP, PLATFORM_GROUP } from './sections';
 import type { SettingsFormProps, SettingsSection } from './types';
 
 /**
@@ -30,8 +31,9 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   sections: appSections = [],
   groups,
   builtins = {},
+  generalRows,
   initialSection,
-  searchable = true,
+  searchable = 'auto',
   enableDeleteAccount = true,
   activeSection,
   onSectionChange,
@@ -40,21 +42,23 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   bare = false,
 }: SettingsFormProps) => {
   const t = useAppT();
+  const copy = useSettingsCopy();
   const { user, isLoading } = useAuth();
 
   // Built-ins first, then app sections. Memoized so JSX identity is stable.
   const allSections = useMemo<SettingsSection[]>(() => {
-    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount });
+    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount, generalRows, copy });
     return [...builtin, ...appSections];
-  }, [builtins, enableDeleteAccount, appSections]);
+  }, [builtins, enableDeleteAccount, generalRows, appSections, copy]);
 
   // Ensure the built-in group exists/ordered even if the app passed its own groups.
   const allGroups = useMemo(() => {
     const provided = groups ?? [];
-    return provided.some((g) => g.id === BUILTIN_GROUP.id)
-      ? provided
-      : [BUILTIN_GROUP, ...provided];
-  }, [groups]);
+    const missing = [BUILTIN_GROUP, { ...PLATFORM_GROUP, label: copy.nav.platform }].filter(
+      (b) => !provided.some((g) => g.id === b.id),
+    );
+    return [...missing, ...provided];
+  }, [groups, copy]);
 
   // Uncontrolled selection fallback.
   const [localActive, setLocalActive] = useState<string | null>(initialSection ?? null);
@@ -82,7 +86,7 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   }
 
   // Default to "Settings" — this surface is broader than the old Profile page.
-  const resolvedTitle = title ?? 'Settings';
+  const resolvedTitle = title ?? copy.nav.title;
 
   return (
     <SettingsProvider

package/src/layouts/SettingsLayout/components/AccountMenuButton.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { Avatar, AvatarFallback, AvatarImage, Button, MenuBuilder } from '@djangocfg/ui-core/components';
+import type { MenuItem } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useAccountMenuItems } from '../hooks/useAccountMenuItems';
+
+export interface AccountMenuButtonProps {
+  /** `row`: avatar, name and chevron (a sidebar footer; the menu opens up). `avatar`: the avatar alone (a header; the menu opens down). */
+  variant?: 'row' | 'avatar';
+  /** Items between the Settings shortcuts and Sign out (language, app links). */
+  extra?: MenuItem[];
+  /** Small muted text after the name (a plan). */
+  plan?: string | null;
+  className?: string;
+}
+
+/**
+ * The ready user menu: trigger button plus the shared menu (email, Settings, a shortcut per
+ * Settings section, Sign out). Drop it into any chrome; renders nothing for a signed-out visitor.
+ * `PrivateLayout`'s sidebar footer builds on the same `useAccountMenuItems`.
+ */
+export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
+  variant = 'row',
+  extra,
+  plan,
+  className,
+}) => {
+  const { user } = useAuth();
+  const items = useAccountMenuItems({ extra });
+  const [open, setOpen] = React.useState(false);
+
+  if (!user) return null;
+
+  const name = user.display_username || user.email || 'User';
+  const initial = (name.charAt(0) || '?').toUpperCase();
+  const isRow = variant === 'row';
+
+  return (
+    <MenuBuilder
+      items={items}
+      open={open}
+      onOpenChange={setOpen}
+      side={isRow ? 'top' : 'bottom'}
+      align={isRow ? 'start' : 'end'}
+      sideOffset={8}
+      contentClassName="w-60 p-1.5"
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        aria-label={name}
+        className={cn(
+          'group min-w-0 select-none gap-2 rounded-lg font-normal focus-visible:ring-0',
+          isRow ? 'h-9 w-full justify-start px-2 text-left' : 'size-9 p-0',
+          className,
+        )}
+      >
+        <Avatar className="size-6 shrink-0">
+          <AvatarImage src={user.avatar ?? ''} alt={name} />
+          <AvatarFallback className="text-xs font-medium">{initial}</AvatarFallback>
+        </Avatar>
+        {isRow && (
+          <>
+            <span className="flex min-w-0 items-baseline gap-1">
+              <span className="truncate text-sm">{name}</span>
+              {plan ? <span className="shrink-0 text-xs text-muted-foreground">· {plan}</span> : null}
+            </span>
+            <ChevronDown
+              className="ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180"
+              aria-hidden
+            />
+          </>
+        )}
+      </Button>
+    </MenuBuilder>
+  );
+};

package/src/layouts/SettingsLayout/components/ApiKeySection/ApiKeySection.tsx

@@ -13,6 +13,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
+import { useSettingsLocale } from '../../i18n';
 import { ApiKeyProvider, useApiKeyContext } from './context';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -26,12 +27,12 @@ import { ApiKeyProvider, useApiKeyContext } from './context';
 //
 // A bare `new Date(iso)` would read a timestamp without a zone designator as
 // LOCAL time; the API sends UTC, so the `Z` is appended when it is missing.
-function formatDate(iso: string | null, fallback: string): string {
+function formatDate(iso: string | null, fallback: string, locale: string): string {
   if (!iso) return fallback;
   const utc = /(?:Z|[+-]\d{2}:?\d{2})$/.test(iso) ? iso : `${iso}Z`;
   const date = new Date(utc);
   if (Number.isNaN(date.getTime())) return fallback;
-  return new Intl.DateTimeFormat('en-US', {
+  return new Intl.DateTimeFormat(locale, {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
@@ -48,6 +49,7 @@ function isMasked(key: string): boolean {
 // ─────────────────────────────────────────────────────────────────────────────
 
 function ApiKeyCard() {
+  const locale = useSettingsLocale();
   const {
     labels,
     apiKey,
@@ -79,7 +81,7 @@ function ApiKeyCard() {
   // SettingRow renders `description` inside a block, so this is valid.
   const titleDescription = (
     <div className="flex flex-wrap items-center gap-2">
-      {apiKey && <Badge variant="secondary" className="text-xs">Active</Badge>}
+      {apiKey && <Badge variant="secondary" className="text-xs">{labels.active}</Badge>}
       <span>{labels.description}</span>
     </div>
   );
@@ -127,7 +129,7 @@ function ApiKeyCard() {
       {isFresh && (
         <div className="flex items-center gap-2 rounded-control bg-accent px-3 py-2 text-sm text-foreground">
           <KeyRound className="w-4 h-4 flex-shrink-0 text-primary" />
-          <span className="flex-1">This is your new API key — copy it now. It will be masked when you leave this page.</span>
+          <span className="flex-1">{labels.freshKey}</span>
           <Button variant="ghost" size="sm" className="h-7 px-2" onClick={dismissFresh}>
             <Check className="w-4 h-4 mr-1" />
             {labels.done}
@@ -150,7 +152,7 @@ function ApiKeyCard() {
 
       {/* API key value row */}
       {apiKey && (
-        <SettingRow label="API key" stacked>
+        <SettingRow label={labels.keyRow} stacked>
           <div className="flex items-center gap-2">
             <div className="flex-1 min-w-0 rounded-control bg-muted px-3 py-2.5 font-mono text-sm select-all">
               <span className={cn(masked && 'tracking-widest')}>
@@ -181,10 +183,10 @@ function ApiKeyCard() {
 
       {/* Dates */}
       {apiKey && createdAt && (
-        <SettingRow label={labels.created} value={formatDate(createdAt, '—')} />
+        <SettingRow label={labels.created} value={formatDate(createdAt, '—', locale)} />
       )}
       {apiKey && (
-        <SettingRow label={labels.reissued} value={formatDate(reissuedAt, labels.neverReissued)} />
+        <SettingRow label={labels.reissued} value={formatDate(reissuedAt, labels.neverReissued, locale)} />
       )}
 
       {error && (

package/src/layouts/SettingsLayout/components/ApiKeySection/context.tsx

@@ -5,45 +5,9 @@ import React, { createContext, useCallback, useContext, useMemo, useState } from
 import { useApiKey } from '@djangocfg/api/hooks';
 import { toast } from '@djangocfg/ui-core/hooks';
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Labels (hardcoded English — same pattern as TwoFactorSection)
-// ─────────────────────────────────────────────────────────────────────────────
+import { useSettingsCopy, type SettingsCopy } from '../../i18n';
 
-export interface ApiKeyLabels {
-  title: string;
-  description: string;
-  created: string;
-  reissued: string;
-  neverReissued: string;
-  regenerate: string;
-  confirmRegenerate: string;
-  regenerating: string;
-  regenerated: string;
-  failedToRegenerate: string;
-  done: string;
-  test: string;
-  testing: string;
-  testSuccess: string;
-  testFailed: string;
-}
-
-const LABELS: ApiKeyLabels = {
-  title: 'API Key',
-  description: 'Your personal API key for programmatic access',
-  created: 'Created',
-  reissued: 'Last reissued',
-  neverReissued: 'Never reissued',
-  regenerate: 'Regenerate API Key',
-  confirmRegenerate: 'Click to confirm',
-  regenerating: 'Regenerating…',
-  regenerated: 'API key regenerated',
-  failedToRegenerate: 'Failed to regenerate API key',
-  done: 'Done',
-  test: 'Test API Key',
-  testing: 'Testing…',
-  testSuccess: 'API key is valid',
-  testFailed: 'API key test failed',
-};
+export type ApiKeyLabels = SettingsCopy['apiKey'];
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Context
@@ -83,6 +47,7 @@ export const useApiKeyContext = (): ApiKeyContextValue => {
 export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { apiKey, reissuedAt, createdAt, isLoading, isRegenerating, isTesting, regenerate, testKey, refresh } = useApiKey();
 
+  const LABELS = useSettingsCopy().apiKey;
   const [isArmed, setIsArmed] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [testResult, setTestResult] = useState<boolean | null>(null);
@@ -109,7 +74,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       setError(LABELS.failedToRegenerate);
       toast.error(LABELS.failedToRegenerate);
     }
-  }, [regenerate]);
+  }, [regenerate, LABELS]);
 
   const handleTest = useCallback(async () => {
     if (!apiKey) return;
@@ -126,7 +91,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       setTestResult(false);
       toast.error(LABELS.testFailed);
     }
-  }, [apiKey, testKey]);
+  }, [apiKey, testKey, LABELS]);
 
   const value = useMemo<ApiKeyContextValue>(() => ({
     labels: LABELS,
@@ -146,7 +111,7 @@ export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     isTesting,
     testResult,
   }), [
-    apiKey, reissuedAt, createdAt, isLoading, error,
+    LABELS, apiKey, reissuedAt, createdAt, isLoading, error,
     isArmed, arm, disarm, handleRegenerate, isRegenerating, isFresh, dismissFresh,
     handleTest, isTesting, testResult,
   ]);