@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/notification-inbox/data.ts

@@ -0,0 +1,129 @@
+import type { BreadcrumbItem, StatusDotTone } from '@gntik-ai/ui';
+
+export type InboxCategory = 'mention' | 'deployment' | 'billing' | 'access';
+
+export interface InboxNotification {
+  id: string;
+  title: string;
+  /** One-line preview in the list. */
+  preview: string;
+  /** Full message in the detail pane (paragraphs). */
+  body: string[];
+  from: string;
+  time: Date;
+  read: boolean;
+  category: InboxCategory;
+  /** Colour of the unread dot. */
+  tone: StatusDotTone;
+  /** Where "Open" leads. */
+  href?: string;
+}
+
+export const inboxCategoryLabels: Record<InboxCategory, string> = {
+  mention: 'Mention',
+  deployment: 'Deployment',
+  billing: 'Billing',
+  access: 'Access',
+};
+
+const MIN = 60_000;
+const NOW = Date.now();
+
+/** Neutral sample notifications, newest first. */
+export const inboxNotifications: InboxNotification[] = [
+  {
+    id: 'ntf_01',
+    title: 'Budget alert: api-gateway at 97%',
+    preview: 'Requests will be throttled once the monthly limit is reached.',
+    body: [
+      'The api-gateway project has used 97% of its monthly budget. Requests will be throttled once the limit is reached.',
+      'Raise the limit from Billing or reduce traffic to stay under it until the cycle resets on the 1st.',
+    ],
+    from: 'Billing',
+    time: new Date(NOW - 4 * MIN),
+    read: false,
+    category: 'billing',
+    tone: 'warning',
+    href: '/billing',
+  },
+  {
+    id: 'ntf_02',
+    title: 'Sam Patel mentioned you in “Release checklist”',
+    preview: '@dana can you confirm the rollback plan before Friday?',
+    body: [
+      '“@dana can you confirm the rollback plan before Friday? The migration touches the orders table.”',
+      'Reply in the thread to keep the discussion in one place.',
+    ],
+    from: 'Sam Patel',
+    time: new Date(NOW - 22 * MIN),
+    read: false,
+    category: 'mention',
+    tone: 'primary',
+    href: '/projects/web-app/docs/release-checklist',
+  },
+  {
+    id: 'ntf_03',
+    title: 'Deployment web-app build 418 succeeded',
+    preview: 'Promoted to production in eu-west-1 and us-east-1.',
+    body: [
+      'Build 418 of web-app was promoted to production in eu-west-1 and us-east-1.',
+      'Health checks passed in 42 s. The previous build stays available for instant rollback for 24 hours.',
+    ],
+    from: 'Deployments',
+    time: new Date(NOW - 75 * MIN),
+    read: false,
+    category: 'deployment',
+    tone: 'success',
+    href: '/deployments',
+  },
+  {
+    id: 'ntf_04',
+    title: 'Deployment orders-api build 212 failed',
+    preview: 'Health check timed out in ap-south-1. Traffic stayed on build 211.',
+    body: [
+      'Build 212 of orders-api failed its health check in ap-south-1 after 30 s. Traffic stayed on build 211.',
+      'Open the deployment to see the logs and retry.',
+    ],
+    from: 'Deployments',
+    time: new Date(NOW - 5 * 60 * MIN),
+    read: true,
+    category: 'deployment',
+    tone: 'destructive',
+    href: '/deployments',
+  },
+  {
+    id: 'ntf_05',
+    title: 'Lee Chen requested access to Billing',
+    preview: 'Approve or decline from Members.',
+    body: [
+      'Lee Chen asked for a role that includes Billing permissions.',
+      'Approve or decline the request from the Members page. Requests expire after 7 days.',
+    ],
+    from: 'Access requests',
+    time: new Date(NOW - 26 * 60 * MIN),
+    read: true,
+    category: 'access',
+    tone: 'info',
+    href: '/members',
+  },
+  {
+    id: 'ntf_06',
+    title: 'Invoice INV-2044 is available',
+    preview: '$4,210.00 for September · paid by card ending 4242.',
+    body: [
+      'Your September invoice INV-2044 for $4,210.00 was paid with the card ending in 4242.',
+      'Download the PDF from Billing.',
+    ],
+    from: 'Billing',
+    time: new Date(NOW - 3 * 24 * 60 * MIN),
+    read: true,
+    category: 'billing',
+    tone: 'neutral',
+    href: '/billing',
+  },
+];
+
+export const inboxBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Notifications' },
+];

package/src/notification-inbox/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Notification inbox',
+  family: 'Work',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Master–detail inbox in the console: All / Unread / Mentions filter (ToggleGroup), read and unread rows, a detail pane with Open, Mark as unread and Archive, and Back on small screens.',
+  layout: 'SidebarLayout · Page · SplitLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header'],
+};

package/src/pending-activation/Page.test.tsx

@@ -0,0 +1,390 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectTypeOf } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import PendingActivationPage, { type PendingActivationPageProps } from './Page';
+
+const recoveryLinks = [
+  { label: 'Sign in', href: '/sign-in' },
+  { label: 'Review sign-up', href: '/sign-up' },
+];
+const states = [
+  ['default', {}],
+  ['loading', { loading: true }],
+  ['no-access', { errorState: 'no-access' }],
+  ['not-found', { errorState: 'not-found' }],
+  ['error', { errorState: 'error' }],
+] as const;
+const onAction = vi.fn();
+const actions = [
+  { label: 'Review request', href: '/requests/2048?from=pending' },
+  { label: 'Check status', onClick: onAction },
+  { label: 'Account details', href: '/account' },
+];
+
+describe('PendingActivationPage', () => {
+  it('accepts consumer labels for recovery, skip navigation, actions and retry', () => {
+    const { rerender } = render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        recoveryLabel="Return to your account"
+        skipLinkLabel="Skip to account status"
+        actionsLabel="Next steps"
+        actions={actions}
+      />,
+    );
+    expect(screen.getByRole('navigation', { name: 'Return to your account' })).toBeVisible();
+    expect(screen.getByRole('link', { name: 'Skip to account status' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Next steps' })).toBeVisible();
+    rerender(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        errorState="error"
+        retryLabel="Check again"
+        onRetry={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Check again' })).toBeVisible();
+  });
+
+  it.each(states)('tabs through the visible controls in %s with focus rings', async (_, state) => {
+    const user = userEvent.setup();
+    render(<PendingActivationPage {...state} recoveryLinks={recoveryLinks} actions={actions} onRetry={() => {}} />);
+    // AuthLayout supplies its skip link before the page's own controls.
+    await user.tab();
+    expect(screen.getByRole('link', { name: /Skip/ })).toHaveFocus();
+    const expected =
+      'errorState' in state
+        ? state.errorState === 'error'
+          ? ['Retry', 'Sign in', 'Review sign-up']
+          : ['Sign in', 'Review sign-up']
+        : 'loading' in state
+          ? ['Sign in', 'Review sign-up']
+          : ['Review request', 'Check status', 'Account details', 'Sign in', 'Review sign-up'];
+    for (const name of expected) {
+      await user.tab();
+      const control = screen.getByRole(name === 'Retry' || name === 'Check status' ? 'button' : 'link', { name });
+      expect(control).toHaveFocus();
+      expect(control).toHaveClass('focus-visible:outline-focus-ring');
+    }
+    await user.tab();
+    expect(document.body).toHaveFocus();
+  });
+
+  it('preserves reading order and renders labels as text', () => {
+    const { container } = render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        title="Heading"
+        intro="Intro"
+        statusTitle="Status"
+        statusMessage="Message"
+        reference={{ label: 'Reference', value: 'REF-1' }}
+        actions={[
+          {
+            label: '<script>throw new Error()</script>',
+            href: '/continue?next=%3Cscript%3E',
+          },
+        ]}
+      />,
+    );
+    const content = screen.getByRole('main').textContent ?? '';
+    const offsets = [
+      'Heading',
+      'Intro',
+      'Status',
+      'Message',
+      'Reference',
+      'REF-1',
+      '<script>throw new Error()</script>',
+      'Sign in',
+    ].map((text) => content.indexOf(text));
+    expect(offsets.every((offset) => offset >= 0)).toBe(true);
+    expect(offsets).toEqual([...offsets].sort((a, b) => a - b));
+    expect(container.querySelector('script')).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: '<script>throw new Error()</script>' })).toHaveAttribute(
+      'href',
+      '/continue?next=%3Cscript%3E',
+    );
+  });
+
+  it.each(states)('has no email-verification affordances or network calls in %s', (_, state) => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch');
+    const xhrSpy = vi.spyOn(XMLHttpRequest.prototype, 'open');
+    try {
+      render(<PendingActivationPage {...state} recoveryLinks={recoveryLinks} onRetry={() => {}} />);
+      expect(
+        screen.queryByRole('button', {
+          name: /resend|change.*email|support|request access/i,
+        }),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: /resend|change.*email|support/i })).not.toBeInTheDocument();
+      expect(screen.queryByText(/\d+:\d{2}/)).not.toBeInTheDocument();
+      expect(fetchSpy).not.toHaveBeenCalled();
+      expect(xhrSpy).not.toHaveBeenCalled();
+    } finally {
+      fetchSpy.mockRestore();
+      xhrSpy.mockRestore();
+    }
+  });
+
+  it.each([
+    ['default', {}],
+    ['loading without actions', { loading: true }],
+    ['loading with actions', { loading: true, actions }],
+    ['with reference', { reference: { label: 'Request received', value: 'REQ-2048' } }],
+    ['with actions', { actions }],
+    ['no-access', { errorState: 'no-access' }],
+    ['not-found', { errorState: 'not-found' }],
+    ['error', { errorState: 'error', onRetry: () => {} }],
+  ] as const)('has no non-contrast axe violations in %s across all themes', async (_, state) => {
+    const originalClassName = document.documentElement.className;
+    try {
+      for (const theme of ['dark', 'light', 'high_contrast']) {
+        document.documentElement.className = theme;
+        const { container, unmount } = render(<PendingActivationPage {...state} recoveryLinks={recoveryLinks} />);
+        try {
+          await expectNoAxeViolations(container);
+        } finally {
+          unmount();
+        }
+      }
+    } finally {
+      document.documentElement.className = originalClassName;
+    }
+  });
+
+  it.each(states)('keeps both exact recovery destinations in %s', (_, state) => {
+    render(<PendingActivationPage {...state} recoveryLinks={recoveryLinks} />);
+    const recovery = screen.getByRole('navigation', {
+      name: 'Account recovery',
+    });
+    expect(within(recovery).getAllByRole('link')).toHaveLength(2);
+    expect(within(recovery).getByRole('link', { name: 'Sign in' })).toHaveAttribute('href', '/sign-in');
+    expect(within(recovery).getByRole('link', { name: 'Review sign-up' })).toHaveAttribute('href', '/sign-up');
+    expectTypeOf<Pick<PendingActivationPageProps, 'recoveryLinks'>>().toEqualTypeOf<{
+      recoveryLinks: readonly { label: string; href: string }[];
+    }>();
+  });
+
+  it.each(['no-access', 'not-found'] as const)('shows consumer %s copy without action controls', (errorState) => {
+    const { container } = render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        errorState={errorState}
+        errorTitle="Cannot open this account"
+        errorMessage="Return to registration to continue."
+        actions={actions}
+        loading
+      />,
+    );
+    expect(
+      screen.getByRole('heading', {
+        level: 2,
+        name: 'Cannot open this account',
+      }),
+    ).toBeVisible();
+    expect(screen.getByText('Return to registration to continue.')).toBeVisible();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Available actions' })).not.toBeInTheDocument();
+    if (errorState === 'no-access') expect(container.querySelector('svg.lucide-lock')).toBeInTheDocument();
+  });
+
+  it('omits internal error codes and demo content with default error copy', () => {
+    render(<PendingActivationPage recoveryLinks={recoveryLinks} errorState="error" onRetry={() => {}} />);
+    const error = screen.getByRole('region', {
+      name: 'Account status unavailable',
+    });
+    expect(error).toHaveTextContent(
+      /^Account status unavailableWe could not load your account status\. Try again in a moment\.Retry$/,
+    );
+    expect(within(error).getAllByRole('button')).toEqual([within(error).getByRole('button', { name: 'Retry' })]);
+  });
+
+  it.each(['click', 'Enter', 'Space'])('retries once using %s without demo controls or details', async (gesture) => {
+    const onRetry = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        errorState="error"
+        errorTitle="Status unavailable"
+        errorMessage="Try loading your status again."
+        onRetry={onRetry}
+        actions={actions}
+      />,
+    );
+    expect(screen.getByRole('heading', { level: 2, name: 'Status unavailable' })).toBeVisible();
+    expect(screen.getByText('Try loading your status again.')).toBeVisible();
+    expect(screen.getByRole('region', { name: 'Status unavailable' })).toHaveTextContent(
+      /^Status unavailableTry loading your status again\.Retry$/,
+    );
+    const retry = screen.getByRole('button', { name: 'Retry' });
+    expect(screen.getAllByRole('button')).toEqual([retry]);
+    expect(screen.queryByText(/req_8f2c41d07a9b|503|GET \/v1/)).not.toBeInTheDocument();
+    if (gesture === 'click') await user.click(retry);
+    else {
+      retry.focus();
+      await user.keyboard(gesture === 'Enter' ? '{Enter}' : ' ');
+    }
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it.each([[[]], [actions]])('shows busy skeletons and no controls while loading %j', (suppliedActions) => {
+    render(<PendingActivationPage recoveryLinks={recoveryLinks} loading actions={suppliedActions} />);
+    const region = screen.getByRole('region', { name: 'Available actions' });
+    expect(region).toHaveAttribute('aria-busy', 'true');
+    expect(region.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThan(0);
+    expect(within(region).queryByRole('button')).not.toBeInTheDocument();
+    expect(within(region).queryByRole('link')).not.toBeInTheDocument();
+    for (const placeholder of region.querySelectorAll('[aria-hidden="true"]')) {
+      expect(placeholder).toHaveClass('motion-reduce:animate-none');
+    }
+  });
+
+  it('renders supplied links and buttons in order, calls buttons, and omits an empty region', async () => {
+    onAction.mockClear();
+    const user = userEvent.setup();
+    const { rerender } = render(<PendingActivationPage recoveryLinks={recoveryLinks} actions={actions} />);
+    const region = screen.getByRole('region', { name: 'Available actions' });
+    expect([...region.querySelectorAll('a,button')].map((node) => node.textContent)).toEqual([
+      'Review request',
+      'Check status',
+      'Account details',
+    ]);
+    expect(within(region).getByRole('link', { name: 'Review request' })).toHaveAttribute(
+      'href',
+      '/requests/2048?from=pending',
+    );
+    expect(within(region).getByRole('link', { name: 'Account details' })).toHaveAttribute('href', '/account');
+    await user.click(within(region).getByRole('button', { name: 'Check status' }));
+    expect(onAction).toHaveBeenCalledOnce();
+    rerender(<PendingActivationPage recoveryLinks={recoveryLinks} actions={[]} />);
+    expect(screen.queryByRole('region', { name: 'Available actions' })).not.toBeInTheDocument();
+  });
+
+  it('removes stale actions during refresh and hides the region when none remain', () => {
+    const { rerender } = render(<PendingActivationPage recoveryLinks={recoveryLinks} actions={actions} />);
+    expect(screen.getByRole('link', { name: 'Review request' })).toBeVisible();
+
+    rerender(<PendingActivationPage recoveryLinks={recoveryLinks} actions={actions} loading />);
+    const busyRegion = screen.getByRole('region', {
+      name: 'Available actions',
+    });
+    expect(busyRegion).toHaveAttribute('aria-busy', 'true');
+    expect(within(busyRegion).queryByRole('link')).not.toBeInTheDocument();
+    expect(within(busyRegion).queryByRole('button')).not.toBeInTheDocument();
+
+    // An empty action response must keep placeholders until loading finishes.
+    rerender(<PendingActivationPage recoveryLinks={recoveryLinks} actions={[]} loading />);
+    expect(screen.getByRole('region', { name: 'Available actions' })).toHaveAttribute('aria-busy', 'true');
+
+    rerender(<PendingActivationPage recoveryLinks={recoveryLinks} actions={[]} />);
+    expect(screen.queryByRole('region', { name: 'Available actions' })).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Sign in' })).toHaveAttribute('href', '/sign-in');
+    expect(screen.getByRole('link', { name: 'Review sign-up' })).toHaveAttribute('href', '/sign-up');
+  });
+
+  it('shows an optional reference after status and removes it when absent', () => {
+    const { rerender } = render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        reference={{ label: 'Request received', value: 'REQ-2048' }}
+      />,
+    );
+    const reference = screen.getByRole('status', { name: 'Request received' });
+    expect(reference).toHaveAccessibleDescription('REQ-2048');
+    expect(screen.getAllByRole('status')[1]).toBe(reference);
+    rerender(<PendingActivationPage recoveryLinks={recoveryLinks} />);
+    expect(screen.queryByRole('status', { name: 'Request received' })).not.toBeInTheDocument();
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+  });
+
+  it.each(['no-access', 'not-found', 'error'] as const)(
+    'retains status, reference and recovery when entering and leaving %s',
+    (errorState) => {
+      const props = {
+        recoveryLinks,
+        actions,
+        title: 'Awaiting review',
+        intro: 'Your registration is complete.',
+        statusTitle: 'Review pending',
+        statusMessage: 'We will notify you after approval.',
+        reference: { label: 'Request received', value: 'REQ-2048' },
+        onRetry: () => {},
+      };
+      const { rerender } = render(<PendingActivationPage {...props} />);
+
+      rerender(
+        <PendingActivationPage
+          {...props}
+          errorState={errorState}
+          errorTitle="Cannot load account status"
+          errorMessage="Return to sign in or try again."
+          loading
+        />,
+      );
+      expect(screen.getAllByRole('heading', { level: 1 })).toHaveLength(1);
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Awaiting review');
+      expect(screen.getByText('Your registration is complete.')).toBeVisible();
+      expect(screen.getByRole('status', { name: 'Review pending' })).toHaveAccessibleDescription(
+        'We will notify you after approval.',
+      );
+      expect(screen.getByRole('status', { name: 'Request received' })).toHaveAccessibleDescription('REQ-2048');
+      expect(screen.queryByRole('region', { name: 'Available actions' })).not.toBeInTheDocument();
+      expect(screen.queryAllByRole('button')).toEqual(
+        errorState === 'error' ? [screen.getByRole('button', { name: 'Retry' })] : [],
+      );
+      expect(screen.getByRole('link', { name: 'Sign in' })).toHaveAttribute('href', '/sign-in');
+      expect(screen.getByRole('link', { name: 'Review sign-up' })).toHaveAttribute('href', '/sign-up');
+
+      rerender(<PendingActivationPage {...props} />);
+      expect(screen.queryByRole('heading', { level: 2 })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Review request' })).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Check status' })).toBeVisible();
+      expect(screen.getByRole('link', { name: 'Account details' })).toBeVisible();
+    },
+  );
+
+  it('renders a meaningful default preview', () => {
+    render(<PendingActivationPage />);
+    expect(
+      screen.getByRole('heading', {
+        level: 1,
+        name: 'Your account is awaiting activation',
+      }),
+    ).toBeVisible();
+    expect(screen.getByRole('link', { name: 'Sign in' })).toHaveAttribute('href', '/sign-in');
+  });
+
+  it.each(states)('keeps one consumer h1 and intro in %s', (_, state) => {
+    render(
+      <PendingActivationPage
+        {...state}
+        recoveryLinks={recoveryLinks}
+        title="Awaiting review"
+        intro="Your registration is complete."
+      />,
+    );
+    expect(screen.getAllByRole('heading', { level: 1 })).toHaveLength(1);
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Awaiting review');
+    expect(screen.getByText('Your registration is complete.')).toBeVisible();
+  });
+
+  it.each(['info', 'warning', undefined] as const)('announces status politely with tone %s', (statusTone) => {
+    render(
+      <PendingActivationPage
+        recoveryLinks={recoveryLinks}
+        statusTitle="Review pending"
+        statusMessage="We will notify you after approval."
+        statusTone={statusTone}
+      />,
+    );
+    const status = screen.getByRole('status', { name: 'Review pending' });
+    expect(status).toHaveAccessibleDescription('We will notify you after approval.');
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(within(status).queryByRole('button')).not.toBeInTheDocument();
+    expectTypeOf<PendingActivationPageProps['statusTone']>().toEqualTypeOf<'info' | 'warning' | undefined>();
+  });
+});

package/src/pending-activation/Page.tsx

@@ -0,0 +1,145 @@
+import { AuthHeader, ErrorPanel, InlineCallout } from '@gntik-ai/blocks';
+import { Lock, SearchX } from '@gntik-ai/icons';
+import { AuthLayout, Button, EmptyState, Link, Skeleton, Stack } from '@gntik-ai/ui';
+import { pendingActivationSample } from './data';
+
+/** Navigation targets are passed directly to Link; validation belongs to the consumer. */
+export type PendingActivationLink = { label: string; href: string };
+
+/** An allowed navigation link or consumer callback. */
+export type PendingActivationAction =
+  (PendingActivationLink & { onClick?: never }) | { label: string; href?: never; onClick: () => void };
+
+export interface PendingActivationPageProps {
+  /** The only page-level heading, also retained in recovery states. */
+  title?: string;
+  /** Description directly below the page heading. */
+  intro?: string;
+  /** Title announced by the polite status callout, retained in recovery states; match copy to the current state. */
+  statusTitle?: string;
+  /** Current approval or activation status, supplied by the consumer. */
+  statusMessage?: string;
+  /** Informational or warning presentation; defaults to info, never assertive. */
+  statusTone?: 'info' | 'warning';
+  /** Optional request identifier; absent references render no callout. */
+  reference?: { label: string; value: string };
+  /** Allowed navigation links or callback buttons, rendered in input order. */
+  actions?: readonly PendingActivationAction[];
+  /** Accessible name of the actions region, including while loading. */
+  actionsLabel?: string;
+  /** Loading takes precedence over the supplied actions. */
+  loading?: boolean;
+  /** Recovery variant; omitted for the normal pending state. */
+  errorState?: 'no-access' | 'not-found' | 'error';
+  /** Recovery heading below the h1; defaults to the selected state's sample copy. */
+  errorTitle?: string;
+  /** Consumer explanation of the failure and how to recover. */
+  errorMessage?: string;
+  /** Retry handler for the error variant; promises show the kit's retry loading state. */
+  onRetry?: () => void | Promise<void>;
+  /** Text on the error variant's retry button. */
+  retryLabel?: string;
+  /** Consumer navigation, retained in every state. Required when configuring the page. */
+  recoveryLinks: readonly PendingActivationLink[];
+  /** Accessible name of the recovery navigation. */
+  recoveryLabel?: string;
+  /** AuthLayout skip link text. */
+  skipLinkLabel?: string;
+}
+
+/** Presentational account approval step; render without props for the catalogue preview. */
+export default function PendingActivationPage({
+  title = pendingActivationSample.title,
+  intro = pendingActivationSample.intro,
+  statusTitle = pendingActivationSample.statusTitle,
+  statusMessage = pendingActivationSample.statusMessage,
+  statusTone = 'info',
+  reference,
+  actions = [],
+  actionsLabel = 'Available actions',
+  loading = false,
+  errorState,
+  errorTitle,
+  errorMessage,
+  onRetry,
+  retryLabel = 'Retry',
+  recoveryLinks = pendingActivationSample.recoveryLinks,
+  recoveryLabel = 'Account recovery',
+  skipLinkLabel = 'Skip to account status',
+}: PendingActivationPageProps | Record<string, never> = {}) {
+  const recovery = errorState ? pendingActivationSample.recovery[errorState] : undefined;
+  return (
+    <AuthLayout fullScreen variant="card" skipLinkLabel={skipLinkLabel}>
+      <AuthHeader headingLevel="h1" title={title} description={intro} />
+      <Stack gap={4}>
+        <InlineCallout
+          tone={statusTone}
+          title={statusTitle}
+          description={statusMessage}
+          actions={[]}
+          dismissible={false}
+        />
+        {reference && (
+          <InlineCallout
+            tone="info"
+            title={reference.label}
+            description={reference.value}
+            actions={[]}
+            dismissible={false}
+          />
+        )}
+        {errorState === 'error' ? (
+          <ErrorPanel
+            titleAs="h2"
+            title={errorTitle ?? recovery?.title}
+            message={errorMessage ?? recovery?.message}
+            code={null}
+            requestId=""
+            details=""
+            secondaryAction={null}
+            onRetry={onRetry}
+            retryLabel={retryLabel}
+          />
+        ) : errorState ? (
+          <EmptyState
+            titleAs="h2"
+            icon={errorState === 'no-access' ? Lock : SearchX}
+            bordered
+            className="mx-auto"
+            title={errorTitle ?? recovery?.title}
+            description={errorMessage ?? recovery?.message}
+          />
+        ) : (
+          (loading || actions.length > 0) && (
+            <section aria-label={actionsLabel} aria-busy={loading}>
+              <Stack gap={2}>
+                {loading
+                  ? Array.from({ length: Math.max(2, actions.length) }, (_, index) => (
+                      <Skeleton key={index} className="h-10 w-full" />
+                    ))
+                  : actions.map((action, index) =>
+                      action.href !== undefined ? (
+                        <Link key={index} href={action.href}>
+                          {action.label}
+                        </Link>
+                      ) : (
+                        <Button key={index} variant="secondary" onClick={action.onClick}>
+                          {action.label}
+                        </Button>
+                      ),
+                    )}
+              </Stack>
+            </section>
+          )
+        )}
+        <nav aria-label={recoveryLabel} className="flex flex-wrap justify-center gap-4">
+          {recoveryLinks.map((link, index) => (
+            <Link key={index} href={link.href}>
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+      </Stack>
+    </AuthLayout>
+  );
+}