@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/sign-in-card/Page.test.tsx

@@ -0,0 +1,182 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import type { SignInFormRef } from '@gntik-ai/blocks';
+import { expectNoAxeViolations } from '../test/a11y';
+import SignInCardPage from './Page';
+
+describe('SignInCardPage', () => {
+  it('suppresses every internal heading beside a page heading and hides or replaces optional regions', () => {
+    const { container, rerender } = render(
+      <>
+        <h1>Account access</h1>
+        <SignInCardPage suppressAllHeadings footer={null} signUpPrompt={null} sso={null} />
+      </>,
+    );
+    expect(container.querySelectorAll('h1')).toHaveLength(1);
+    expect(screen.getByRole('main').querySelector('h1,h2,h3,h4,h5,h6,[role="heading"]')).toBeNull();
+    expect(screen.getByRole('form', { name: 'Sign in' })).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Terms' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Privacy Policy' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Create an account' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: 'Single sign-on' })).not.toBeInTheDocument();
+    rerender(<SignInCardPage headingLevel="h2" footer="Account support" />);
+    expect(screen.getByRole('heading', { level: 2, name: 'Sign in' })).toBeInTheDocument();
+    expect(screen.getByText('Account support')).toBeInTheDocument();
+    rerender(<SignInCardPage headingLevel={null} aria-label="Account access" />);
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.getByRole('form', { name: 'Account access' })).toBeInTheDocument();
+  });
+
+  it('forwards identifier, validation, field help, focus and server ARIA props unchanged', async () => {
+    const onSubmit = vi.fn();
+    const ref = createRef<SignInFormRef>();
+    const props = {
+      ref,
+      onSubmit,
+      identifier: {
+        type: 'text' as const,
+        autoComplete: 'username',
+        label: 'Username',
+        help: 'Account name',
+        helpId: 'username-help',
+        minLength: 3,
+        maxLength: 120,
+      },
+      passwordHelp: 'Account password',
+      passwordHelpId: 'password-help',
+      messages: {
+        identifierRequired: 'Username is required.',
+        identifierInvalid: 'Use three characters.',
+        passwordRequired: 'Password is required.',
+      },
+      'aria-describedby': 'form-feedback',
+    };
+    const { rerender } = render(<SignInCardPage {...props} />);
+    const input = screen.getByLabelText('Username');
+    const password = screen.getByLabelText('Password');
+    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveAttribute('autocomplete', 'username');
+    expect(input).toHaveAttribute('minlength', '3');
+    expect(input).toHaveAttribute('maxlength', '120');
+    expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('novalidate');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(input).toHaveFocus();
+    expect(onSubmit).not.toHaveBeenCalled();
+    for (const [field, message, helpId] of [
+      [input, 'Username is required.', 'username-help'],
+      [password, 'Password is required.', 'password-help'],
+    ] as const) {
+      const error = screen.getByText(message).closest('[role="alert"]');
+      expect(field).toHaveAttribute('aria-invalid', 'true');
+      expect(field.getAttribute('aria-describedby')?.split(' ')).toEqual(expect.arrayContaining([helpId, error?.id]));
+    }
+    await userEvent.type(input, 'ab');
+    expect(screen.getByText('Use three characters.')).toBeInTheDocument();
+    await userEvent.type(input, 'c');
+    await userEvent.type(password, 'secret');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(password).not.toHaveAttribute('aria-invalid');
+    rerender(
+      <SignInCardPage
+        {...props}
+        fieldInvalid={{ identifier: true, password: true }}
+        feedbackId="credential-feedback"
+        error="Credentials were not accepted."
+      />,
+    );
+    for (const [field, helpId] of [
+      [input, 'username-help'],
+      [password, 'password-help'],
+    ] as const) {
+      expect(field).toHaveAttribute('aria-invalid', 'true');
+      expect(field.getAttribute('aria-describedby')?.split(' ')).toEqual(
+        expect.arrayContaining([helpId, 'credential-feedback']),
+      );
+    }
+    expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('aria-describedby', 'form-feedback');
+    input.focus();
+    ref.current?.focus('password');
+    expect(password).toHaveFocus();
+  });
+
+  it('renders the card form without SSO', async () => {
+    const { container } = render(<SignInCardPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in' })).toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: 'Single sign-on' })).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Privacy Policy' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('shows a server error and runs forgot password', async () => {
+    const onForgotPassword = vi.fn();
+    render(<SignInCardPage error="Incorrect email or password." onForgotPassword={onForgotPassword} />);
+    expect(screen.getByText('Incorrect email or password.')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('link', { name: 'Forgot password?' }));
+    expect(onForgotPassword).toHaveBeenCalledOnce();
+  });
+
+  it('takes the heading copy from props', () => {
+    render(<SignInCardPage title="Welcome back to the console" description="Sign in with your tenant account." />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Welcome back to the console' })).toBeInTheDocument();
+    expect(screen.getByText('Sign in with your tenant account.')).toBeInTheDocument();
+  });
+});
+
+// Public rendering seams: identifier mode, theme, heading policy and validation/recovery state.
+describe('SignInCardPage accessibility matrix', () => {
+  for (const theme of ['dark', 'light', 'high_contrast'] as const) {
+    for (const mode of ['email', 'username'] as const) {
+      for (const suppressed of [false, true]) {
+        for (const state of ['initial', 'errors'] as const) {
+          it(`${theme} / ${mode} / headings ${!suppressed} / ${state}`, async () => {
+            const onSubmit = vi.fn();
+            const { container } = render(
+              <ThemeProvider defaultMode={theme} storageKey={null}>
+                <h1>Account access</h1>
+                <SignInCardPage
+                  identifier={
+                    mode === 'username'
+                      ? {
+                          type: 'text',
+                          autoComplete: 'username',
+                          label: 'Username',
+                          help: 'Use your account name.',
+                          minLength: 3,
+                          maxLength: 120,
+                        }
+                      : undefined
+                  }
+                  suppressAllHeadings={suppressed}
+                  messages={{
+                    identifierRequired: 'Account name is required.',
+                    passwordRequired: 'Password is required.',
+                  }}
+                  onSubmit={onSubmit}
+                />
+              </ThemeProvider>,
+            );
+            if (state === 'initial' || state === 'errors') {
+              const input = screen.getByRole('textbox', { name: mode === 'username' ? 'Username' : 'Email' });
+              expect(input).toHaveAttribute('type', mode === 'username' ? 'text' : 'email');
+              expect(input).toHaveAttribute('autocomplete', mode === 'username' ? 'username' : 'email');
+              expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('novalidate');
+              if (state === 'errors') {
+                await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+                expect(input).toHaveFocus();
+                expect(input).toHaveAttribute('aria-invalid', 'true');
+                expect(onSubmit).not.toHaveBeenCalled();
+                expect(screen.getByText('Account name is required.')).toBeInTheDocument();
+                expect(screen.getByLabelText('Password')).toHaveAttribute('aria-invalid', 'true');
+              }
+            }
+            if (suppressed) expect(container.querySelectorAll('h1,h2,h3,h4,h5,h6,[role="heading"]')).toHaveLength(1);
+            await expectNoAxeViolations(container);
+          });
+        }
+      }
+    }
+  }
+});

package/src/sign-in-card/Page.tsx

@@ -0,0 +1,82 @@
+import { SignInForm, type SignInValues, type SignInFormProps } from '@gntik-ai/blocks';
+import { AuthLayout, Link } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { signInCardCopy } from './data';
+
+export interface SignInCardPageProps extends SignInFormProps {
+  onSubmit: (values: SignInValues) => void | Promise<void>;
+  error: string | null;
+  defaultEmail: string;
+  forgotPasswordHref: string;
+  onForgotPassword: () => void;
+  signUpHref: string;
+  onSignUp: () => void;
+  /** Optional SSO area under the form; hidden by default. */
+  sso: ReactNode;
+  eyebrow: ReactNode;
+  title: ReactNode;
+  description: ReactNode;
+  termsHref: string;
+  privacyHref: string;
+  logo: ReactNode;
+  /** Replaces the legal footer; `null` hides it. */
+  footer?: ReactNode;
+  /** Suppresses all internal headings, including the embedded form heading. */
+  suppressAllHeadings?: boolean;
+}
+
+/** Card sign-in: AuthLayout `card` + SignInForm without SSO. */
+export default function SignInCardPage({
+  onSubmit,
+  error,
+  defaultEmail,
+  forgotPasswordHref,
+  onForgotPassword,
+  signUpHref,
+  onSignUp,
+  sso = null,
+  eyebrow = signInCardCopy.eyebrow,
+  title = signInCardCopy.title,
+  description = signInCardCopy.description,
+  termsHref = signInCardCopy.termsHref,
+  privacyHref = signInCardCopy.privacyHref,
+  logo,
+  footer,
+  suppressAllHeadings = false,
+  headingLevel,
+  ...formProps
+}: Partial<SignInCardPageProps>) {
+  return (
+    <AuthLayout
+      fullScreen
+      variant="card"
+      logo={logo}
+      footer={
+        footer === undefined ? (
+          <>
+            By signing in you agree to the <Link href={termsHref}>Terms</Link> and{' '}
+            <Link href={privacyHref}>Privacy Policy</Link>.
+          </>
+        ) : (
+          footer
+        )
+      }
+    >
+      <SignInForm
+        {...formProps}
+        headingLevel={suppressAllHeadings ? null : headingLevel}
+        onSubmit={onSubmit}
+        error={error}
+        defaultEmail={defaultEmail}
+        forgotPasswordHref={forgotPasswordHref}
+        onForgotPassword={onForgotPassword}
+        signUpHref={signUpHref}
+        onSignUp={onSignUp}
+        sso={sso}
+        eyebrow={eyebrow}
+        title={title}
+        description={description}
+      />
+    </AuthLayout>
+  );
+}

package/src/sign-in-card/data.ts

@@ -0,0 +1,8 @@
+/** Copy for the card sign-in (no SSO, legal footer). */
+export const signInCardCopy = {
+  eyebrow: 'Welcome back',
+  title: 'Sign in',
+  description: 'Use the email and password for your account.',
+  termsHref: '#terms',
+  privacyHref: '#privacy',
+};

package/src/sign-in-card/examples/Username.tsx

@@ -0,0 +1,28 @@
+import SignInCardPage, { type SignInCardPageProps } from '../Page';
+
+/** /preview.html?kind=template&id=sign-in-card--username */
+export default function Username(props: Pick<SignInCardPageProps, 'headingLevel' | 'suppressAllHeadings'>) {
+  return (
+    <SignInCardPage
+      {...props}
+      identifier={{
+        type: 'text',
+        autoComplete: 'username',
+        label: 'Username',
+        help: 'Use your account name.',
+        placeholder: 'Account name',
+        minLength: 3,
+        maxLength: 120,
+      }}
+      messages={{
+        identifierRequired: 'Enter your username.',
+        identifierInvalid: 'Use at least three characters.',
+        passwordRequired: 'Enter your password.',
+      }}
+      description="Use your account name to continue."
+      footer={null}
+      signUpPrompt={null}
+      sso={null}
+    />
+  );
+}

package/src/sign-in-card/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Sign in (card)',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Centred card sign-in with default email and password, legal footer and no SSO. Supports identifier (type, autoComplete, label, help/helpId, placeholder, minLength/maxLength), messages (identifierRequired/identifierInvalid/identifierTooShort/passwordRequired), and React 19 ref.focus. The kit owns inline validation and focuses the first invalid field; consumers supply messages, not a second inline validator. Server errors use error + fieldInvalid + feedbackId; aria-describedby describes the form, while flagged inputs also retain their help and error ids. headingLevel (h1/h2/h3/null) suppresses the heading without losing the form name; aria-label/aria-labelledby override the default name. Forwards SignInForm props unchanged, including passwordHelp/passwordHelpId and ref.focus(identifier/password). Text submissions retain email and add identifier. suppressAllHeadings suppresses every internal heading. footer, sso and signUpPrompt accept replacements or null. Preview: sign-in-card--username.',
+  layout: 'AuthLayout',
+  blocks: ['sign-in-form'],
+};

package/src/sign-up/Page.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import SignUpPage from './Page';
+
+describe('SignUpPage', () => {
+  it('renders the form, SSO options and brand panel', async () => {
+    const { container } = render(<SignUpPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Create your account' })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: 'Single sign-on' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('requires the terms, then creates the account', async () => {
+    const onSubmit = vi.fn();
+    render(<SignUpPage onSubmit={onSubmit} />);
+    await userEvent.type(screen.getByLabelText('Full name'), 'Avery Collins');
+    await userEvent.type(screen.getByLabelText('Work email'), 'avery@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'long-enough-pass');
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(screen.getByText('Accept the terms to continue.')).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('checkbox'));
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: 'Avery Collins',
+      email: 'avery@example.com',
+      password: 'long-enough-pass',
+    });
+  });
+});

package/src/sign-up/Page.tsx

@@ -0,0 +1,70 @@
+import { SignUpForm, SsoButtons, type SignUpValues, type SsoProvider } from '@gntik-ai/blocks';
+import { AuthLayout } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import { BrandPanel, type BrandPanelCopy } from '../sign-in/BrandPanel';
+import { signUpBrand, signUpSsoProviders } from './data';
+
+export interface SignUpPageProps {
+  /** Creates the account. A returned promise shows the loading state; a rejection shows in the alert. */
+  onSubmit: (values: SignUpValues) => void | Promise<void>;
+  /** Starts single sign-on with a provider id. */
+  onSso: (providerId: string) => void;
+  ssoProviders: SsoProvider[];
+  error: string | null;
+  minPasswordLength: number;
+  termsHref: string;
+  privacyHref: string;
+  signInHref: string;
+  onSignIn: () => void;
+  brand: BrandPanelCopy;
+  brandFooter: ReactNode;
+  logo: ReactNode;
+}
+
+/** Split sign-up: AuthLayout brand panel + SignUpForm with SsoButtons. */
+export default function SignUpPage({
+  onSubmit,
+  onSso,
+  ssoProviders = signUpSsoProviders,
+  error,
+  minPasswordLength,
+  termsHref,
+  privacyHref,
+  signInHref,
+  onSignIn,
+  brand = signUpBrand,
+  brandFooter = signUpBrand.footer,
+  logo,
+}: Partial<SignUpPageProps>) {
+  const [ssoLoading, setSsoLoading] = useState<string | null>(null);
+  return (
+    <AuthLayout
+      fullScreen
+      variant="split"
+      logo={logo}
+      brand={<BrandPanel {...brand} />}
+      brandFooter={brandFooter}
+      skipLinkLabel="Skip to sign-up form"
+    >
+      <SignUpForm
+        onSubmit={onSubmit}
+        error={error}
+        minPasswordLength={minPasswordLength}
+        termsHref={termsHref}
+        privacyHref={privacyHref}
+        signInHref={signInHref}
+        onSignIn={onSignIn}
+        sso={
+          <SsoButtons
+            providers={ssoProviders}
+            loadingId={ssoLoading}
+            onSelect={(id) => {
+              setSsoLoading(id);
+              onSso?.(id);
+            }}
+          />
+        }
+      />
+    </AuthLayout>
+  );
+}

package/src/sign-up/data.ts

@@ -0,0 +1,15 @@
+import { ssoProviders } from '@gntik-ai/blocks';
+
+export { ssoProviders as signUpSsoProviders };
+
+/** Brand panel copy for the split layout. */
+export const signUpBrand = {
+  eyebrow: 'Free for small teams',
+  headline: 'Your whole team, one workspace.',
+  features: [
+    'Invite teammates with roles from day one',
+    'Projects, environments and deployments together',
+    'Usage-based plans, no card to start',
+  ],
+  footer: 'SOC 2 · encrypted at rest · audited access',
+};

package/src/sign-up/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Sign up',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Split sign-up: brand panel with the value pitch, name, work email and password with a strength meter, terms consent and single sign-on.',
+  layout: 'AuthLayout',
+  blocks: ['sign-up-form', 'sso-buttons'],
+};

package/src/sso-login/Page.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import SsoLoginPage from './Page';
+
+describe('SsoLoginPage', () => {
+  it('renders the work email step', async () => {
+    const { container } = render(<SsoLoginPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in with SSO' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('looks up the email and shows the redirecting state', async () => {
+    const onSubmit = vi.fn();
+    const onCancel = vi.fn();
+    const { container } = render(<SsoLoginPage onSubmit={onSubmit} onCancel={onCancel} providerName="Acme Identity" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Continue with SSO' }));
+    expect(screen.getByText('Enter a valid work email.')).toBeInTheDocument();
+    await userEvent.type(screen.getByLabelText('Work email'), 'dana@acme.example');
+    await userEvent.click(screen.getByRole('button', { name: 'Continue with SSO' }));
+    expect(onSubmit).toHaveBeenCalledWith('dana@acme.example');
+    expect(await screen.findByRole('heading', { level: 1, name: 'Redirecting to Acme Identity' })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Waiting for Acme Identity');
+    await expectNoAxeViolations(container);
+    await userEvent.click(screen.getByRole('button', { name: 'Use a different email' }));
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in with SSO' })).toBeInTheDocument();
+  });
+
+  it('shows a lookup failure', async () => {
+    render(
+      <SsoLoginPage
+        defaultEmail="dana@unknown.example"
+        onSubmit={() => Promise.reject(new Error('No SSO connection for this domain.'))}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue with SSO' }));
+    expect(await screen.findByText('No SSO connection for this domain.')).toBeInTheDocument();
+  });
+});

package/src/sso-login/Page.tsx

@@ -0,0 +1,151 @@
+import { AuthHeader } from '@gntik-ai/blocks';
+import { Building2 } from '@gntik-ai/icons';
+import {
+  Alert,
+  AuthLayout,
+  Button,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  Link,
+  Spinner,
+  Stack,
+  Text,
+} from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import { ssoEmailPattern, ssoLoginSample } from './data';
+
+export interface SsoLoginPageProps {
+  /**
+   * Looks up the domain's identity provider and starts the redirect. A rejection's message shows
+   * in the alert (e.g. "No SSO connection for this domain").
+   */
+  onSubmit: (email: string) => void | Promise<void>;
+  /** Leaves the redirecting state. */
+  onCancel: () => void;
+  defaultEmail: string;
+  /** Name shown while redirecting. */
+  providerName: string;
+  signInHref: string;
+  error: string | null;
+  logo: ReactNode;
+}
+
+/** Card SSO entry: work email → "Redirecting to your identity provider". */
+export default function SsoLoginPage({
+  onSubmit,
+  onCancel,
+  defaultEmail = ssoLoginSample.defaultEmail,
+  providerName = ssoLoginSample.providerName,
+  signInHref = ssoLoginSample.signInHref,
+  error: errorProp = null,
+  logo,
+}: Partial<SsoLoginPageProps>) {
+  const [email, setEmail] = useState(defaultEmail);
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [redirecting, setRedirecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const invalid = submitted && !ssoEmailPattern.test(email.trim());
+  const domain = email.trim().split('@')[1] ?? '';
+  const alert = errorProp ?? error;
+
+  const start = async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      await onSubmit?.(email.trim());
+      setRedirecting(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Single sign-on could not start. Try again.');
+    }
+    setLoading(false);
+  };
+
+  const footer = (
+    <>
+      Not using SSO? <Link href={signInHref}>Sign in with a password</Link>
+    </>
+  );
+
+  return (
+    <AuthLayout fullScreen variant="card" logo={logo} skipLinkLabel="Skip to single sign-on" footer={footer}>
+      {redirecting ? (
+        <Stack gap={6}>
+          <AuthHeader
+            className="mb-0"
+            eyebrow="Single sign-on"
+            title={`Redirecting to ${providerName}`}
+            description={
+              <>
+                <span className="font-medium text-foreground">{domain}</span> signs in through {providerName}. If
+                nothing happens in a few seconds, try again.
+              </>
+            }
+          />
+          <Stack direction="row" align="center" gap={3} role="status">
+            <Spinner size={18} />
+            <Text variant="supporting" tone="muted">
+              Waiting for {providerName}…
+            </Text>
+          </Stack>
+          <Stack gap={2}>
+            <Button variant="secondary" size="lg" className="w-full" onClick={() => void start()} loading={loading}>
+              Try again
+            </Button>
+            <Button
+              variant="ghost"
+              size="lg"
+              className="w-full"
+              onClick={() => {
+                setRedirecting(false);
+                onCancel?.();
+              }}
+            >
+              Use a different email
+            </Button>
+          </Stack>
+        </Stack>
+      ) : (
+        <>
+          <AuthHeader
+            eyebrow="Single sign-on"
+            title="Sign in with SSO"
+            description="Enter your work email and we'll send you to your organization's identity provider."
+          />
+          <form
+            noValidate
+            aria-label="Single sign-on"
+            className="flex flex-col gap-4"
+            onSubmit={(e) => {
+              e.preventDefault();
+              setSubmitted(true);
+              if (ssoEmailPattern.test(email.trim())) void start();
+            }}
+          >
+            {alert && <Alert tone="destructive" description={alert} />}
+            <Field invalid={invalid}>
+              <FieldLabel>Work email</FieldLabel>
+              <Input
+                type="email"
+                leadingIcon={Building2}
+                autoComplete="email"
+                placeholder="name@company.com"
+                value={email}
+                onValueChange={setEmail}
+                required
+              />
+              <FieldDescription>Your domain decides where you sign in.</FieldDescription>
+              <FieldError match={invalid}>Enter a valid work email.</FieldError>
+            </Field>
+            <Button type="submit" size="lg" loading={loading} className="mt-2 w-full">
+              Continue with SSO
+            </Button>
+          </form>
+        </>
+      )}
+    </AuthLayout>
+  );
+}

package/src/sso-login/data.ts

@@ -0,0 +1,10 @@
+/** Sample copy for the single sign-on lookup. */
+export const ssoLoginSample = {
+  defaultEmail: '',
+  signInHref: '#sign-in',
+  /** Identity provider shown while redirecting (resolved from the email domain in a real product). */
+  providerName: 'your identity provider',
+};
+
+/** Simple shape check before asking the server for the domain's identity provider. */
+export const ssoEmailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

package/src/sso-login/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Single sign-on',
+  family: 'Auth',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Centred card SSO entry: work email lookup, then a "Redirecting to your identity provider" state with cancel and a password fallback.',
+  layout: 'AuthLayout',
+  blocks: [],
+};