@thorprovider/blocks 1.0.0 → 2.0.0

package/src/blocks/application/login-forms/login-page.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import { useId, useState, type FormEvent } from 'react'
+import { Eye, EyeOff, Lock, type LucideIcon } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { Label } from '../../../ui/label'
+import { CheckboxCheck } from '../../e-commerce/checkout-forms/checkbox-check'
+
+export interface LoginPageFormData {
+  email: string
+  password: string
+  remember: boolean
+}
+
+export interface LoginPageProvider {
+  /** Must be unique within one `providers` list. */
+  id: string
+  label: string
+}
+
+export interface LoginPageProps {
+  presentation: 'card' | 'social'
+  logoText?: string
+  welcomeTitleLabel?: string
+  welcomeDescriptionLabel?: string
+  emailLabel?: string
+  emailPlaceholder?: string
+  passwordLabel?: string
+  passwordPlaceholder?: string
+  rememberMeLabel?: string
+  forgotPasswordLabel?: string
+  signInLabel?: string
+  orContinueWithLabel?: string
+  dontHaveAccountLabel?: string
+  createAccountLabel?: string
+  showPasswordAriaLabel?: string
+  hidePasswordAriaLabel?: string
+  providers?: LoginPageProvider[]
+  providerIcons?: Record<string, LucideIcon>
+  onSubmit?: (data: { email: string; password: string; remember: boolean }) => void
+  onForgotPassword?: () => void
+  onCreateAccount?: () => void
+  onProviderSelect?: (providerId: string) => void
+}
+
+export function LoginPage({
+  presentation,
+  logoText,
+  welcomeTitleLabel = 'Bienvenido de nuevo',
+  welcomeDescriptionLabel = 'Inicia sesión para continuar',
+  emailLabel = 'Correo electrónico',
+  emailPlaceholder = 'taller@correo.com',
+  passwordLabel = 'Contraseña',
+  passwordPlaceholder = '••••••••',
+  rememberMeLabel = 'Recuérdame',
+  forgotPasswordLabel = '¿Olvidaste tu contraseña?',
+  signInLabel = 'Iniciar sesión',
+  orContinueWithLabel = 'O continúa con',
+  dontHaveAccountLabel = '¿No tienes una cuenta?',
+  createAccountLabel = 'Crea una cuenta',
+  showPasswordAriaLabel = 'Mostrar contraseña',
+  hidePasswordAriaLabel = 'Ocultar contraseña',
+  providers = [],
+  providerIcons = {},
+  onSubmit,
+  onForgotPassword,
+  onCreateAccount,
+  onProviderSelect,
+}: LoginPageProps) {
+  if (presentation !== 'card' && presentation !== 'social') {
+    throw new Error('LoginPage requires a valid presentation: "card" or "social".')
+  }
+
+  const providerIds = new Set<string>()
+  for (const provider of providers ?? []) {
+    if (providerIds.has(provider.id)) {
+      throw new Error('LoginPage provider ids must be unique.')
+    }
+    providerIds.add(provider.id)
+  }
+
+  const id = useId()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [remember, setRemember] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSubmit?.({ email, password, remember })
+  }
+
+  const fields = (
+    <form onSubmit={handleSubmit} className='flex flex-col gap-5'>
+      <div className='flex flex-col gap-2'>
+        <Label htmlFor={`${id}-email`}>{emailLabel}</Label>
+        <Input
+          id={`${id}-email`}
+          type='email'
+          autoComplete='email'
+          placeholder={emailPlaceholder}
+          value={email}
+          onChange={event => setEmail(event.target.value)}
+        />
+      </div>
+
+      <div className='flex flex-col gap-2'>
+        <Label htmlFor={`${id}-password`}>{passwordLabel}</Label>
+        <div className='relative'>
+          <Input
+            id={`${id}-password`}
+            type={showPassword ? 'text' : 'password'}
+            autoComplete='current-password'
+            placeholder={passwordPlaceholder}
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            className='pe-10'
+          />
+          <Button
+            type='button'
+            variant='ghost'
+            size='icon'
+            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}
+            className='absolute end-0 top-1/2 size-9 -translate-y-1/2 cursor-pointer hover:bg-transparent'
+            onClick={() => setShowPassword(value => !value)}
+          >
+            {showPassword ? <EyeOff aria-hidden='true' /> : <Eye aria-hidden='true' />}
+          </Button>
+        </div>
+      </div>
+
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <div className='flex items-center gap-2'>
+          <CheckboxCheck
+            id={`${id}-remember`}
+            checked={remember}
+            onCheckedChange={value => setRemember(value === true)}
+          />
+          <Label htmlFor={`${id}-remember`} className='text-sm font-normal text-muted-foreground'>
+            {rememberMeLabel}
+          </Label>
+        </div>
+        {onForgotPassword && (
+          <Button type='button' variant='link' className='h-auto cursor-pointer p-0 text-sm' onClick={onForgotPassword}>
+            {forgotPasswordLabel}
+          </Button>
+        )}
+      </div>
+
+      <Button type='submit' className='h-9 w-full cursor-pointer px-4 py-2'>
+        {signInLabel}
+      </Button>
+    </form>
+  )
+
+  const providerSection = providers.length > 0 && onProviderSelect && (
+    <div className='flex flex-col gap-4'>
+      <div className='flex items-center gap-3' aria-hidden='true'>
+        <span className='h-px flex-1 bg-border' />
+        <span className='text-muted-foreground text-xs uppercase'>{orContinueWithLabel}</span>
+        <span className='h-px flex-1 bg-border' />
+      </div>
+      <div
+        className={presentation === 'card' ? 'grid grid-cols-3 gap-3' : 'grid grid-cols-2 gap-4'}
+        role='group'
+        aria-label={orContinueWithLabel}
+      >
+        {providers.map(provider => {
+          const Icon = providerIcons[provider.id] as LucideIcon | undefined
+          return (
+            <Button
+              key={provider.id}
+              type='button'
+              variant='outline'
+              aria-label={provider.label}
+              className='h-9 w-full cursor-pointer px-3 py-2'
+              onClick={() => onProviderSelect(provider.id)}
+            >
+              {Icon ? <Icon aria-hidden='true' className='size-5' /> : provider.label}
+              {presentation === 'social' && Icon ? <span>{provider.label}</span> : null}
+            </Button>
+          )
+        })}
+      </div>
+    </div>
+  )
+
+  const createAccount = onCreateAccount && (
+    <p className='flex justify-center gap-1 text-center text-sm'>
+      <span>{dontHaveAccountLabel}</span>
+      <Button type='button' variant='link' className='h-auto cursor-pointer p-0 text-sm' onClick={onCreateAccount}>
+        {createAccountLabel}
+      </Button>
+    </p>
+  )
+
+  if (presentation === 'card') {
+    return (
+      <div className='w-full max-w-md'>
+        <Card className='w-full p-8 shadow-2xl'>
+          <header className='mb-8 flex flex-col items-center text-center'>
+            <div className='bg-secondary mb-4 flex size-14 items-center justify-center rounded-full border'>
+              <Lock aria-hidden='true' className='size-6' />
+            </div>
+            {logoText && <p className='text-muted-foreground mb-2 text-sm font-semibold'>{logoText}</p>}
+            <h1 className='mb-2 text-2xl font-bold tracking-tight'>{welcomeTitleLabel}</h1>
+            <p className='text-muted-foreground text-sm'>{welcomeDescriptionLabel}</p>
+          </header>
+          <div className='flex flex-col gap-6'>
+            {fields}
+            {providerSection}
+            {createAccount}
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex w-full max-w-md flex-col gap-6'>
+      {logoText && <div className='text-center text-2xl font-medium'>{logoText}</div>}
+      <Card>
+        <CardHeader className='text-center'>
+          <CardTitle className='text-2xl font-bold text-balance'>{welcomeTitleLabel}</CardTitle>
+          <CardDescription>{welcomeDescriptionLabel}</CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-col gap-5'>
+          {fields}
+          {providerSection}
+          {createAccount}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default LoginPage

package/src/blocks/application/password-recovery/forgot-password-page-1.tsx

@@ -306,14 +306,12 @@ export function ForgotPasswordPage1({
   }
 
   return (
-    <section className="from-background to-muted/50 relative isolate flex min-h-dvh w-full items-center justify-center overflow-hidden bg-linear-to-br">
-      <div className="relative z-10 container mx-auto flex min-h-dvh items-center justify-center px-4 py-12 sm:py-16">
-        <Card className="bg-background/80 relative w-full max-w-md ring-0 p-6 shadow-2xl backdrop-blur-md sm:p-8">
-          <ForgotPasswordPage1BrandMark />
-          {renderStepContent()}
-        </Card>
-      </div>
-    </section>
+    <div className="w-full max-w-md">
+      <Card className="bg-background/80 relative w-full max-w-md ring-0 p-6 shadow-2xl backdrop-blur-md sm:p-8">
+        <ForgotPasswordPage1BrandMark />
+        {renderStepContent()}
+      </Card>
+    </div>
   )
 }
 

package/src/blocks/application/signup-forms/signup-page-1.tsx

@@ -81,150 +81,148 @@ export function SignUpPage1({
   }
 
   return (
-    <section className='from-background to-muted/50 relative isolate flex min-h-dvh w-full flex-col items-center justify-center overflow-hidden bg-linear-to-br'>
-      <div className='relative z-10 container mx-auto flex min-h-dvh flex-col items-center justify-center px-4 py-12'>
-        <Card className='relative w-full max-w-lg p-8 shadow-2xl ring-0'>
-          <div className='mb-8 flex flex-col items-center'>
-            <div className='my-4 flex justify-center'>
-              <div className='bg-secondary relative size-14 rounded-full border'>
-                <div className='flex h-full items-center justify-center'>
-                  <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
-                    <path
-                      d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-                      fill='currentColor'
-                    />
-                    <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
-                    <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
-                    <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
-                    <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
-                  </svg>
-                </div>
+    <div className='flex w-full max-w-lg flex-col items-center'>
+      <Card className='relative w-full max-w-lg p-8 shadow-2xl ring-0'>
+        <div className='mb-8 flex flex-col items-center'>
+          <div className='my-4 flex justify-center'>
+            <div className='bg-secondary relative size-14 rounded-full border'>
+              <div className='flex h-full items-center justify-center'>
+                <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                  <path
+                    d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+                    fill='currentColor'
+                  />
+                  <path
+                    d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+                    fill='currentColor'
+                  />
+                  <path
+                    d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+                    fill='currentColor'
+                  />
+                  <path
+                    d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+                    fill='currentColor'
+                  />
+                  <path
+                    d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+                    fill='currentColor'
+                  />
+                  <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
+                  <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
+                  <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
+                  <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
+                </svg>
               </div>
             </div>
-            {logoText && <div className='text-base font-semibold tracking-tight'>{logoText}</div>}
-            <h1 className='mb-2 mt-4 text-center text-2xl font-bold tracking-tight'>{createAccountTitleLabel}</h1>
-            <p className='text-muted-foreground text-center text-sm'>{createAccountDescriptionLabel}</p>
           </div>
+          {logoText && <div className='text-base font-semibold tracking-tight'>{logoText}</div>}
+          <h1 className='mb-2 mt-4 text-center text-2xl font-bold tracking-tight'>{createAccountTitleLabel}</h1>
+          <p className='text-muted-foreground text-center text-sm'>{createAccountDescriptionLabel}</p>
+        </div>
 
-          <form className='flex flex-col gap-6' onSubmit={handleSubmit}>
-            <div className='relative'>
-              <Input
-                id='fullname'
-                name='fullName'
-                type='text'
-                placeholder={fullNamePlaceholder}
-                aria-label={fullNameLabel}
-                className='bg-transparent h-9 ps-10 text-sm'
-                autoComplete='name'
-                required
-              />
-              <User className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
-            </div>
+        <form className='flex flex-col gap-6' onSubmit={handleSubmit}>
+          <div className='relative'>
+            <Input
+              id='fullname'
+              name='fullName'
+              type='text'
+              placeholder={fullNamePlaceholder}
+              aria-label={fullNameLabel}
+              className='bg-transparent h-9 ps-10 text-sm'
+              autoComplete='name'
+              required
+            />
+            <User className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+          </div>
 
-            <div className='relative'>
-              <Input
-                id='email'
-                name='email'
-                type='email'
-                placeholder={emailPlaceholder}
-                aria-label={emailLabel}
-                className='bg-transparent h-9 ps-10 text-sm'
-                autoComplete='email'
-                required
-              />
-              <Mail className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
-            </div>
+          <div className='relative'>
+            <Input
+              id='email'
+              name='email'
+              type='email'
+              placeholder={emailPlaceholder}
+              aria-label={emailLabel}
+              className='bg-transparent h-9 ps-10 text-sm'
+              autoComplete='email'
+              required
+            />
+            <Mail className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+          </div>
 
-            <div className='relative'>
-              <Input
-                id='password'
-                name='password'
-                type='password'
-                placeholder={passwordPlaceholder}
-                aria-label={passwordLabel}
-                className='bg-transparent h-9 ps-10 text-sm'
-                autoComplete='new-password'
-                required
-              />
-              <Lock className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
-            </div>
+          <div className='relative'>
+            <Input
+              id='password'
+              name='password'
+              type='password'
+              placeholder={passwordPlaceholder}
+              aria-label={passwordLabel}
+              className='bg-transparent h-9 ps-10 text-sm'
+              autoComplete='new-password'
+              required
+            />
+            <Lock className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+          </div>
 
-            <Button className='h-9 w-full cursor-pointer px-4 py-2' type='submit'>
-              {createAccountLabel}
-            </Button>
+          <Button className='h-9 w-full cursor-pointer px-4 py-2' type='submit'>
+            {createAccountLabel}
+          </Button>
 
-            {socialButtons.length > 0 && (
-              <>
-                <div className='relative my-6 text-center'>
-                  <div className='absolute inset-0 flex items-center'>
-                    <div className='w-full border-t' />
-                  </div>
-                  <div className='relative flex justify-center text-xs uppercase'>
-                    <span className='bg-card text-muted-foreground px-2'>{orSignUpWithLabel}</span>
-                  </div>
+          {socialButtons.length > 0 && (
+            <>
+              <div className='relative my-6 text-center'>
+                <div className='absolute inset-0 flex items-center'>
+                  <div className='w-full border-t' />
                 </div>
-
-                <div className='grid grid-cols-3 gap-3'>
-                  {socialButtons.map(button => (
-                    <Button key={button.name} variant='outline' className='h-9 w-full cursor-pointer px-4 py-2'>
-                      <button.icon />
-                      <span className='sr-only'>{socialAriaLabel.replace('{name}', button.name)}</span>
-                    </Button>
-                  ))}
+                <div className='relative flex justify-center text-xs uppercase'>
+                  <span className='bg-card text-muted-foreground px-2'>{orSignUpWithLabel}</span>
                 </div>
-              </>
-            )}
-          </form>
+              </div>
 
-          <p className='mt-6 flex justify-center gap-1 text-center text-sm'>
-            <span>{alreadyHaveAccountLabel}</span>
-            {onSignIn ? (
-              <button type='button' onClick={onSignIn} className='underline underline-offset-4'>
-                {signInLabel}
-              </button>
-            ) : (
-              <span className='underline underline-offset-4'>{signInLabel}</span>
-            )}
-          </p>
-        </Card>
+              <div className='grid grid-cols-3 gap-3'>
+                {socialButtons.map(button => (
+                  <Button key={button.name} variant='outline' className='h-9 w-full cursor-pointer px-4 py-2'>
+                    <button.icon />
+                    <span className='sr-only'>{socialAriaLabel.replace('{name}', button.name)}</span>
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+        </form>
 
-        <p className='text-muted-foreground relative z-10 mt-8 max-w-lg px-8 text-center text-xs text-balance'>
-          {termsLabel}{' '}
-          {termsHref ? (
-            <a href={termsHref} className='hover:text-primary underline underline-offset-4'>
-              {termsLinkLabel}
-            </a>
-          ) : (
-            <span className='hover:text-primary underline underline-offset-4'>{termsLinkLabel}</span>
-          )}{' '}
-          {termsAndLabel}{' '}
-          {privacyHref ? (
-            <a href={privacyHref} className='hover:text-primary underline underline-offset-4'>
-              {privacyLinkLabel}
-            </a>
+        <p className='mt-6 flex justify-center gap-1 text-center text-sm'>
+          <span>{alreadyHaveAccountLabel}</span>
+          {onSignIn ? (
+            <button type='button' onClick={onSignIn} className='underline underline-offset-4'>
+              {signInLabel}
+            </button>
           ) : (
-            <span className='hover:text-primary underline underline-offset-4'>{privacyLinkLabel}</span>
+            <span className='underline underline-offset-4'>{signInLabel}</span>
           )}
-          .
         </p>
-      </div>
-    </section>
+      </Card>
+
+      <p className='text-muted-foreground relative z-10 mt-8 max-w-lg px-8 text-center text-xs text-balance'>
+        {termsLabel}{' '}
+        {termsHref ? (
+          <a href={termsHref} className='hover:text-primary underline underline-offset-4'>
+            {termsLinkLabel}
+          </a>
+        ) : (
+          <span className='hover:text-primary underline underline-offset-4'>{termsLinkLabel}</span>
+        )}{' '}
+        {termsAndLabel}{' '}
+        {privacyHref ? (
+          <a href={privacyHref} className='hover:text-primary underline underline-offset-4'>
+            {privacyLinkLabel}
+          </a>
+        ) : (
+          <span className='hover:text-primary underline underline-offset-4'>{privacyLinkLabel}</span>
+        )}
+        .
+      </p>
+    </div>
   )
 }
 

package/src/blocks/application/verification/verify-1.tsx

@@ -162,7 +162,7 @@ export function Verify1({
 
   if (verified) {
     return (
-      <div className='bg-muted/30 relative flex min-h-dvh w-full items-center justify-center overflow-hidden px-4 py-12'>
+      <div className='relative w-full max-w-md'>
         {/* Fired once, over the whole field rather than the card, so the paper has somewhere
             to fall. The success is stated in the heading below; this only decorates it. */}
         <Confetti fire origin={{ x: 0.5, y: 0.5 }} />
@@ -187,7 +187,7 @@ export function Verify1({
   }
 
   return (
-    <div className='bg-muted/30 flex min-h-dvh w-full items-center justify-center px-4 py-12'>
+    <div className='w-full max-w-md'>
       <Card className='w-full max-w-md gap-6 py-8 shadow-lg'>
         <CardHeader className='gap-2 px-8 text-center'>
           <span

package/src/blocks/application/viewport-ownership.test.tsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+//
+// Invariant: an auth composition renders into the host page and never owns it.
+// A page (route shell, or a template the host owns) supplies the canvas: height,
+// backdrop, centring. Keeping this assertion next to the blocks means a new auth
+// surface cannot quietly reintroduce a second viewport owner.
+import { beforeAll, describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { LoginPage } from './login-forms/login-page';
+import { SignUpPage1 } from './signup-forms/signup-page-1';
+import { ForgotPasswordPage1 } from './password-recovery/forgot-password-page-1';
+import { Verify1 } from './verification/verify-1';
+
+beforeAll(() => {
+  Object.assign(SVGElement.prototype, { getTotalLength: () => 15 });
+});
+
+const PAGE_SHELL = /min-h-dvh|min-h-screen|h-dvh|h-screen|bg-linear-to-br/;
+
+const surfaces = [
+  ['LoginPage (card)', () => <LoginPage presentation="card" />],
+  ['LoginPage (social)', () => <LoginPage presentation="social" />],
+  ['SignUpPage1', () => <SignUpPage1 />],
+  ['ForgotPasswordPage1', () => <ForgotPasswordPage1 />],
+  ['Verify1', () => <Verify1 />],
+] as const;
+
+describe.each(surfaces)('%s', (_name, renderBlock) => {
+  it('does not declare a page landmark', () => {
+    render(renderBlock());
+    expect(screen.queryByRole('main')).toBeNull();
+  });
+
+  it('renders into a neutral content-sized root', () => {
+    const { container } = render(renderBlock());
+    const root = container.firstElementChild;
+    expect(root?.tagName).toBe('DIV');
+    expect(root?.className).not.toMatch(PAGE_SHELL);
+    expect(container.innerHTML).not.toMatch(PAGE_SHELL);
+  });
+});