@djangocfg/layouts 2.1.605 → 2.1.607

package/src/layouts/AuthLayout/styles/oauth.css

@@ -0,0 +1,78 @@
+/**
+ * Provider sign-in (components/oauth). The buttons themselves are theme-token
+ * utilities in `OAuthProviderButton`; this file holds only what a utility
+ * cannot: the column, the room held while the provider list loads, and the
+ * developer hint. Sizes are tokens so the reserve and the buttons agree.
+ */
+
+:root {
+  /* A provider button is at least this tall (above the 44px touch minimum). */
+  --auth-oauth-height: 3rem;
+  --auth-oauth-gap: 0.75rem;
+}
+
+.auth-oauth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-oauth-gap);
+}
+
+/* Holds the room of two buttons, the gap and the divider while the server's
+   provider list loads, so the email field does not jump when it arrives. */
+.auth-oauth-reserve {
+  height: calc(2 * var(--auth-oauth-height) + var(--auth-oauth-gap) + var(--auth-gap) + 1rem);
+}
+
+/* The line for whoever deploys the site, under a notice about configuration. */
+.auth-oauth-hint {
+  margin-top: 0.5rem;
+  color: var(--auth-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+/* The failure notice: icon | text | close, one layout for every code. Radius,
+   border and padding follow the provider button; colours are theme tokens. */
+.auth-oauth-notice {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: 0.75rem;
+  padding: 0.75rem 0.5rem 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in oklab, var(--muted) 50%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/* The icon box is one text line tall, so it centres on the first line. */
+.auth-oauth-notice-icon {
+  box-sizing: content-box;
+  width: 1rem;
+  height: 1rem;
+  padding-block: 0.125rem;
+  color: var(--auth-muted);
+}
+
+.auth-oauth-notice-title {
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.auth-oauth-notice-body {
+  color: var(--auth-muted);
+}
+
+.auth-oauth-notice-title + .auth-oauth-notice-body {
+  margin-top: 0.125rem;
+}
+
+/* 32px hit area, centred on the first text line (20px) via the negative margin. */
+.auth-oauth-notice-close {
+  width: 2rem;
+  height: 2rem;
+  margin-block: -0.375rem;
+  color: var(--auth-muted);
+}

package/src/layouts/PrivateLayout/README.md

@@ -279,5 +279,7 @@ const header: HeaderConfig = {
 | State | Behaviour |
 |---|---|
 | Docked | Width from `--sidebar-width`; drag the right edge, arrow keys, double-click to reset. |
-| Collapsed (desktop) | Hidden. A trigger stays top-left; hovering it (or the free area around it) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
-| Mobile (< md) | Drawer up to 22rem: 44px rows, 20px icons, close button, safe-area insets. Trigger is a 44px ghost button, top-left. |
+| Collapsed (desktop) | Hidden. A trigger stays top-left in a 48px top bar (in flow, so content never sits under it); hovering the trigger (or the free area around it) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
+| Mobile (< md) | Drawer up to 22rem: 44px rows, 14px text, 18px icons, 8px side padding, 12px vertical body padding, close button. The drawer header and footer respect the safe areas (at least 1rem). The trigger is a 40px ghost button in a 48px in-flow top bar (also for `contentPadding="none"` pages) that adds `env(safe-area-inset-top)`. |
+
+Row metrics (`geometry.ts`): desktop rows 36px, mobile rows 44px (touch target), both `text-sm` with 16px (desktop) or 18px (mobile) icons and group labels in `text-xs`. Safe-area insets only exist when the host app sets `viewportFit: "cover"` in its Next.js `viewport` export; without it the offsets fall back to the fixed minimums.

package/src/layouts/PrivateLayout/components/PrivateContent.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+
+import { SidebarProvider } from '@djangocfg/ui-core/components';
+
+import { PrivateContent } from './PrivateContent';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let host: HTMLElement | null = null;
+let root: Root | null = null;
+
+beforeAll(() => {
+  window.matchMedia ??= ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  host?.remove();
+  host = root = null;
+});
+
+function render(defaultOpen: boolean, padding: 'none' | 'default') {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  act(() =>
+    root!.render(
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <PrivateContent padding={padding} scroll={padding === 'none' ? 'hidden' : 'auto'}>
+          <p>page</p>
+        </PrivateContent>
+      </SidebarProvider>,
+    ),
+  );
+  return host;
+}
+
+describe('PrivateContent top bar', () => {
+  it.each(['none', 'default'] as const)('reserves an in-flow, safe-area aware bar for the trigger (padding %s)', (padding) => {
+    const el = render(false, padding);
+    const bar = el.querySelector('[data-sidebar="topbar"]')!;
+    expect(bar).not.toBeNull();
+    expect(bar.className).toContain('env(safe-area-inset-top');
+    expect(bar.className).not.toMatch(/\babsolute\b/);
+    expect(bar.querySelector('[data-sidebar="trigger"]')).not.toBeNull();
+    // The page is a sibling after the bar, never underneath it.
+    expect(bar.nextElementSibling?.textContent).toBe('page');
+  });
+
+  it('draws no bar while the sidebar is docked', () => {
+    expect(render(true, 'default').querySelector('[data-sidebar="topbar"]')).toBeNull();
+  });
+});

package/src/layouts/PrivateLayout/components/PrivateContent.tsx

@@ -1,6 +1,7 @@
 /**
- * Private layout main column: the scroll surface, plus the sidebar trigger
- * whenever the sidebar is not docked (collapsed on desktop, always on mobile).
+ * Private layout main column: the scroll surface, plus a top bar holding the sidebar trigger
+ * whenever the sidebar is not docked (collapsed on desktop, always on mobile). The bar is in
+ * flow and safe-area aware, so no page content (padded or full-bleed) sits under the trigger.
  * On desktop (fine pointer) the trigger sits in a hover zone that peeks the sidebar open after a short intent delay.
  */
 
@@ -50,11 +51,12 @@ export function PrivateContent({
 
   const showTrigger = hasSidebar && (isMobile || state === 'collapsed');
 
-  // The trigger floats over the top-left corner; reserve its row.
+  // The trigger lives in its own in-flow bar (below), so content never sits under it, with or without
+  // content padding. Without a bar the scroll surface starts at the top edge, so keep the bar's room only.
   const topPadding = showTrigger
-    ? 'pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+    ? 'pt-2 sm:pt-4 lg:pt-4'
     : hasSidebar
-      ? 'max-md:pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))] md:pt-6 lg:pt-8'
+      ? 'pt-6 lg:pt-8'
       : 'pt-4 sm:pt-6 lg:pt-8';
 
   const scrollAreaClass = cn(
@@ -73,11 +75,16 @@ export function PrivateContent({
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
       {showTrigger ? (
         <div
-          data-sidebar="trigger-zone"
-          {...(isMobile || !peek?.hoverEnabled ? undefined : peek.zoneProps)}
-          className="absolute left-0 top-[env(safe-area-inset-top,0px)] z-20 flex size-14 items-center justify-center"
+          data-sidebar="topbar"
+          className="relative z-20 flex h-12 shrink-0 box-content items-center bg-background pl-2 pt-[env(safe-area-inset-top,0px)]"
         >
-          <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
+          <div
+            data-sidebar="trigger-zone"
+            {...(isMobile || !peek?.hoverEnabled ? undefined : peek.zoneProps)}
+            className="flex size-12 items-center justify-center"
+          >
+            <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
+          </div>
         </div>
       ) : null}
       <div className={scrollAreaClass}>

package/src/layouts/PrivateLayout/components/PrivateSidebarAccount.tsx

@@ -146,7 +146,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const expandedMeta = (
     <>
       <span className="flex min-w-0 items-baseline gap-1 text-left">
-        <span className="truncate text-base text-sidebar-foreground">{account.displayName}</span>
+        <span className="truncate text-sm text-sidebar-foreground">{account.displayName}</span>
         {account.plan ? (
           <span className="shrink-0 text-xs text-sidebar-foreground/50">· {account.plan}</span>
         ) : null}

package/src/layouts/PrivateLayout/components/SidebarBody.tsx

@@ -39,7 +39,7 @@ export function SidebarBody() {
       <div
         data-sidebar="content"
         className={cn(
-          'flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden',
+          'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden',
           SIDEBAR_SPACING[isMobile ? 'mobile' : 'desktop'].body,
         )}
       >

package/src/layouts/PrivateLayout/components/SidebarBrand.tsx

@@ -38,7 +38,7 @@ function SidebarBrandRaw() {
         <span
           className={cn(
             'flex shrink-0 items-center justify-center rounded-lg bg-sidebar-primary',
-            isMobile ? 'size-9' : 'size-7',
+            isMobile ? 'size-8' : 'size-7',
           )}
         >
           {header?.brandIcon ? (
@@ -49,7 +49,7 @@ function SidebarBrandRaw() {
             </span>
           )}
         </span>
-        <span className={cn('truncate font-medium tracking-tight', isMobile ? 'text-lg' : 'text-base')}>
+        <span className={'truncate text-base font-medium tracking-tight'}>
           {brandTitle}
         </span>
       </Link>

package/src/layouts/PrivateLayout/components/SidebarNavGroup.tsx

@@ -29,8 +29,8 @@ import { SidebarNavItem } from './SidebarNavItem';
 
 const groupClassFor = (inset: string) =>
   cn(
-    `gap-0 ${inset} py-1`,
-    '[&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-sidebar-border/60 [&:not(:first-child)]:pt-2',
+    `gap-0 ${inset} py-1.5`,
+    '[&:not(:first-child)]:mt-1.5 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-sidebar-border/60 [&:not(:first-child)]:pt-3',
   );
 
 /** A `separated` group draws its own, stronger divider (below), so it drops the hairline and takes more air. */
@@ -43,7 +43,7 @@ function GroupDivider({ inset }: { inset: string }) {
       role="separator"
       aria-orientation="horizontal"
       data-sidebar="group-divider"
-      className={cn(inset, 'mb-2 mt-3 h-px shrink-0 bg-sidebar-border')}
+      className={cn(inset, 'mb-3 mt-3 h-px shrink-0 bg-sidebar-border')}
     />
   );
 }
@@ -98,7 +98,7 @@ function SidebarNavGroupRaw({ group }: { group: SidebarGroupConfig }) {
                 type="button"
                 aria-expanded={open}
                 className={cn(
-                  'flex w-full items-center gap-2.5 rounded-lg font-normal text-sidebar-foreground',
+                  'flex w-full items-center rounded-lg font-normal text-sidebar-foreground',
                   'transition-colors duration-150 hover:bg-sidebar-accent/60',
                   'outline-none ring-sidebar-ring focus-visible:ring-2',
                   geometry.item,
@@ -117,7 +117,7 @@ function SidebarNavGroupRaw({ group }: { group: SidebarGroupConfig }) {
             </CollapsibleTrigger>
             <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
               <SidebarGroupContent>
-                <SidebarMenu className="mt-0.5 gap-0.5">{rows}</SidebarMenu>
+                <SidebarMenu className="mt-1 gap-0.5">{rows}</SidebarMenu>
               </SidebarGroupContent>
             </CollapsibleContent>
           </Collapsible>

package/src/layouts/PrivateLayout/components/SidebarNavItem.tsx

@@ -66,7 +66,7 @@ function SidebarSettingsNavItem({ item, hideItemIcons }: { item: SidebarSettings
         onClick={open}
         aria-haspopup="dialog"
         aria-current={active ? 'true' : undefined}
-        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && 'pl-8')}
+        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && geometry.indent)}
       >
         <ItemContent item={item} hideItemIcons={hideItemIcons} />
       </SidebarMenuButton>
@@ -83,7 +83,7 @@ function SidebarLinkNavItem({ item, hideItemIcons }: { item: SidebarLinkItem; hi
       <SidebarMenuButton
         asChild
         isActive={active}
-        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && 'pl-8')}
+        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && geometry.indent)}
       >
         <Link href={item.href} aria-current={active ? 'page' : undefined}>
           <ItemContent item={item} hideItemIcons={hideItemIcons} />

package/src/layouts/PrivateLayout/geometry.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+
+import { NAV_GEOMETRY, SIDEBAR_SPACING } from './geometry';
+
+const SIZES = /\btext-(base|lg|xl|2xl)\b/;
+
+describe('sidebar geometry', () => {
+  for (const form of ['desktop', 'mobile'] as const) {
+    it(`${form}: rows use 14px text and a 16-18px icon, not a large font`, () => {
+      expect(NAV_GEOMETRY[form].item).toMatch(/\btext-sm\b/);
+      expect(NAV_GEOMETRY[form].item).not.toMatch(SIZES);
+      expect(NAV_GEOMETRY[form].item).toMatch(/\[&>svg\]:size-(4|\[18px\])/);
+      expect(NAV_GEOMETRY[form].label).toMatch(/\btext-xs\b/);
+    });
+
+    it(`${form}: horizontal inset is tight (8px), vertical body padding is roomier`, () => {
+      expect(NAV_GEOMETRY[form].inset).toBe('px-2');
+      expect(NAV_GEOMETRY[form].item).toMatch(/\bpx-2\b/);
+      expect(SIDEBAR_SPACING[form].body).toMatch(/\bpy-3\b/);
+    });
+  }
+
+  it('mobile rows keep a 44px touch target; desktop rows are 36px', () => {
+    expect(NAV_GEOMETRY.mobile.item).toMatch(/\bh-11\b/);
+    expect(NAV_GEOMETRY.desktop.item).toMatch(/\bh-9\b/);
+  });
+
+  it('mobile header and footer never go under the status bar or home indicator', () => {
+    expect(SIDEBAR_SPACING.mobile.header).toContain('env(safe-area-inset-top');
+    expect(SIDEBAR_SPACING.mobile.footer).toContain('env(safe-area-inset-bottom');
+  });
+});

package/src/layouts/PrivateLayout/geometry.ts

@@ -5,17 +5,21 @@
 
 export const NAV_GEOMETRY = {
   desktop: {
-    item: 'h-8 gap-2.5 px-2.5 text-base [&>svg]:size-4',
-    label: 'h-7 px-2.5 text-xs',
+    item: 'h-9 gap-2.5 px-2 text-sm [&>svg]:size-4',
+    label: 'h-7 px-2 text-xs',
     /** Horizontal inset of groups, slots and the divider; equals the header and footer inset. */
     inset: 'px-2',
     dividerInset: 'mx-2',
+    /** Left padding of a row without an icon, so its text lines up with the text of rows that have one (8 + 16 + 10px). */
+    indent: 'pl-[34px]',
   },
   mobile: {
-    item: 'h-11 gap-3 px-3 text-lg [&>svg]:size-5',
-    label: 'h-8 px-3 text-sm',
-    inset: 'px-3',
-    dividerInset: 'mx-3',
+    item: 'h-11 gap-2.5 px-2 text-sm [&>svg]:size-[18px]',
+    label: 'h-8 px-2 text-xs',
+    inset: 'px-2',
+    dividerInset: 'mx-2',
+    /** 8 + 18 + 10px. */
+    indent: 'pl-9',
   },
 } as const;
 
@@ -23,19 +27,19 @@ export type NavGeometry = (typeof NAV_GEOMETRY)[keyof typeof NAV_GEOMETRY];
 
 /**
  * One spacing scale for the three blocks of the sidebar (header, list, footer). On mobile every
- * block uses the same 0.75rem unit on the sides and the safe-area aware edge; the list gives
- * 0.5rem between blocks.
+ * block keeps tight sides (0.5rem rows, 0.75rem header) and roomier verticals, with the top and
+ * bottom edges safe-area aware (never less than 1rem).
  */
 export const SIDEBAR_SPACING = {
   desktop: {
-    header: 'px-3 pb-1 pt-3',
-    body: 'py-2',
-    footer: 'p-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]',
+    header: 'pl-4 pr-2 pb-2 pt-3',
+    body: 'gap-1 py-3',
+    footer: 'px-2 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]',
   },
   mobile: {
-    header: 'px-3 pb-2 pt-[max(0.75rem,env(safe-area-inset-top,0px))]',
-    body: 'py-2',
-    footer: 'p-3 pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]',
+    header: 'pl-4 pr-2 pb-3 pt-[max(1rem,env(safe-area-inset-top,0px))]',
+    body: 'gap-1 py-3',
+    footer: 'px-2 pt-3 pb-[max(1rem,env(safe-area-inset-bottom,0px))]',
   },
 } as const;
 

package/src/testing/MockAuthFormProvider.tsx

@@ -11,7 +11,7 @@ import {
 } from '@djangocfg/api/auth';
 
 import { AuthFormContext } from '../layouts/AuthLayout/context';
-import { resolveOAuthProviders } from '../layouts/AuthLayout/components/oauth/oauthProviders';
+import { resolveOAuthProviders } from '../layouts/AuthLayout/components/oauth/providers/resolveProviders';
 import type { AuthFormContextType, AuthLayoutConfig, OAuthFailure } from '../layouts/AuthLayout/types';
 
 // Storybook-only provider. Reproduces the AuthFormContext shape with

package/src/layouts/AuthLayout/components/oauth/OAuthButtons.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import React, { memo, useCallback, useMemo } from 'react';
-
-import { type OAuthProviderId, useOAuthLogin } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-
-import { AuthButton, type AuthButtonProps } from '../shared';
-import { GithubIcon } from './GithubIcon';
-import { GoogleIcon } from './GoogleIcon';
-import { useOAuthErrorText } from './oauthErrors';
-
-interface OAuthProviderEntry {
-  Icon: React.FC;
-  variant: NonNullable<AuthButtonProps['variant']>;
-  labelKey: 'layouts.auth.identifier.oauth.github' | 'layouts.auth.identifier.oauth.google';
-}
-
-/** One entry per provider the client can run; keyed by the API package's id type, so a new provider fails typecheck until it has a button. */
-export const OAUTH_PROVIDER_UI: Record<OAuthProviderId, OAuthProviderEntry> = {
-  github: { Icon: GithubIcon, variant: 'secondary', labelKey: 'layouts.auth.identifier.oauth.github' },
-  google: { Icon: GoogleIcon, variant: 'google', labelKey: 'layouts.auth.identifier.oauth.google' },
-};
-
-export interface OAuthButtonsProps {
-  providers: readonly OAuthProviderId[];
-  sourceUrl?: string;
-  /** Disables every button, e.g. while the email form is submitting. */
-  disabled?: boolean;
-  onError?: (message: string) => void;
-}
-
-/**
- * The provider buttons: same size and weight each, progress only on the one
- * clicked, the rest disabled while its flow is in flight.
- */
-function OAuthButtonsRaw({ providers, sourceUrl, disabled, onError }: OAuthButtonsProps) {
-  const t = useAppT();
-  const errorText = useOAuthErrorText();
-
-  const { start, loadingProvider, isLoading } = useOAuthLogin({
-    sourceUrl,
-    onError: (message, code) => onError?.(errorText(code, message)),
-  });
-
-  const labels = useMemo(
-    () => Object.fromEntries(providers.map((id) => [id, t(OAUTH_PROVIDER_UI[id].labelKey)])) as Record<string, string>,
-    [providers, t],
-  );
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      const id = event.currentTarget.dataset.provider as OAuthProviderId;
-      void start(id);
-    },
-    [start],
-  );
-
-  return (
-    <div className="auth-oauth" role="group">
-      {providers.map((id) => {
-        const { Icon, variant } = OAUTH_PROVIDER_UI[id];
-        return (
-          <AuthButton
-            key={id}
-            type="button"
-            variant={variant}
-            data-provider={id}
-            loading={loadingProvider === id}
-            disabled={disabled || (isLoading && loadingProvider !== id)}
-            onClick={handleClick}
-          >
-            <Icon />
-            {labels[id]}
-          </AuthButton>
-        );
-      })}
-    </div>
-  );
-}
-
-export const OAuthButtons = memo(OAuthButtonsRaw);

package/src/layouts/AuthLayout/components/oauth/OAuthNotice.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { Info, X } from 'lucide-react';
-import React, { memo, useCallback, useEffect } from 'react';
-
-import { isOAuthProviderId, useOAuthLogin } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-import { Alert, AlertDescription, AlertTitle, Button } from '@djangocfg/ui-core/components';
-
-import type { OAuthFailure } from '../../types';
-import { describeOAuthFailure } from './oauthNoticeCopy';
-
-export interface OAuthNoticeProps {
-  failure: OAuthFailure;
-  sourceUrl?: string;
-  /** Closes the notice (button or Escape). */
-  onDismiss: () => void;
-  /** Takes the visitor to the email field; the notice closes with it. */
-  onUseEmail: () => void;
-}
-
-/** Brand names are not translated; an id we do not know is shown as it came. */
-const providerLabel = (id: string): string => {
-  if (id === 'github') return 'GitHub';
-  if (id === 'google') return 'Google';
-  return id;
-};
-
-/**
- * What the sign-in form says after a provider round trip failed: one calm
- * sentence, at most one next step, and a way to close it. Not a dialog: the
- * form underneath stays usable and focus stays where it was.
- *
- * `role="status"` (polite): the visitor did nothing wrong, so it informs
- * without interrupting. Renders nothing for a cancelled sign-in.
- */
-function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoticeProps) {
-  const t = useAppT();
-  const copy = describeOAuthFailure(failure.code);
-  const provider = providerLabel(failure.provider);
-  const canRetry = isOAuthProviderId(failure.provider);
-
-  const { start, isLoading } = useOAuthLogin({ sourceUrl });
-  const handleRetry = useCallback(() => {
-    if (isOAuthProviderId(failure.provider)) void start(failure.provider);
-  }, [start, failure.provider]);
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onDismiss();
-    };
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
-  }, [onDismiss]);
-
-  if (!copy) return null;
-
-  // A retry for a provider this client has no button for would go nowhere: send the visitor to email instead.
-  const action = copy.action === 'retry' && !canRetry ? 'email' : copy.action;
-  const title = copy.titleKey ? t(copy.titleKey) : null;
-  const body = t(copy.bodyKey, { provider });
-
-  return (
-    <Alert role="status" className="auth-oauth-notice relative pr-10">
-      <Info className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-      <div>
-        {title && <AlertTitle>{title}</AlertTitle>}
-        <AlertDescription className="text-muted-foreground">{body}</AlertDescription>
-        {action === 'email' && (
-          <Button type="button" size="sm" className="mt-3" onClick={onUseEmail}>
-            {t('layouts.auth.oauth.notice.useEmail')}
-          </Button>
-        )}
-        {action === 'retry' && (
-          <Button type="button" size="sm" className="mt-3" disabled={isLoading} onClick={handleRetry}>
-            {t('layouts.auth.oauth.notice.retry', { provider })}
-          </Button>
-        )}
-      </div>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="absolute right-1 top-1 h-8 w-8"
-        aria-label={t('layouts.auth.oauth.notice.dismiss')}
-        onClick={onDismiss}
-      >
-        <X className="h-4 w-4" aria-hidden="true" />
-      </Button>
-    </Alert>
-  );
-}
-
-export const OAuthNotice = memo(OAuthNoticeRaw);

package/src/layouts/AuthLayout/components/oauth/oauthErrors.ts

@@ -1,23 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-
-import type { OAuthFailureCode } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-
-import { OAUTH_CODE_TO_KEY, OAUTH_ERROR_KEYS } from './oauthNoticeCopy';
-
-/**
- * The visitor-facing sentence for a failure: the translated copy of its code,
- * else the text the hook carried (server prose), else the generic sentence.
- */
-export const useOAuthErrorText = () => {
-  const t = useAppT();
-  return useCallback(
-    (code?: OAuthFailureCode | null, fallback?: string | null): string => {
-      if (code) return t(OAUTH_CODE_TO_KEY[code]);
-      return fallback || t(OAUTH_ERROR_KEYS.generic);
-    },
-    [t],
-  );
-};

package/src/layouts/AuthLayout/components/oauth/oauthNoticeCopy.test.ts

@@ -1,36 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { describeOAuthFailure } from './oauthNoticeCopy';
-
-describe('describeOAuthFailure', () => {
-  it('says nothing when the visitor cancelled', () => {
-    expect(describeOAuthFailure('cancelled')).toBeNull();
-  });
-
-  it('points a staff account at the email code, with a heading', () => {
-    expect(describeOAuthFailure('link_not_allowed')).toEqual({
-      titleKey: 'layouts.auth.oauth.notice.linkNotAllowedTitle',
-      bodyKey: 'layouts.auth.oauth.error.link_not_allowed',
-      action: 'email',
-    });
-  });
-
-  it('offers a retry where trying again can help', () => {
-    for (const code of ['invalid_state', 'oauth_exchange_failed', 'provider_unavailable', 'server_error'] as const) {
-      expect(describeOAuthFailure(code)?.action).toBe('retry');
-    }
-  });
-
-  it('offers nothing the visitor cannot act on', () => {
-    expect(describeOAuthFailure('account_inactive')?.action).toBe('none');
-    expect(describeOAuthFailure('rate_limited')?.action).toBe('none');
-  });
-
-  it('treats a missing code as the generic failure', () => {
-    expect(describeOAuthFailure(undefined)).toEqual({
-      titleKey: undefined,
-      bodyKey: 'layouts.auth.oauth.error.generic',
-      action: 'retry',
-    });
-  });
-});