@fayz-ai/saas 0.1.6

package/src/plugins/WidgetSlot.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { usePluginRuntimeOptional, getWidgetsForZone, resolvePluginComponent } from '@fayz-ai/core'
+
+/** Renders all plugin widgets registered for a zone, in order. Plugins fill
+ *  these slots (detail-tab zones, page zones) without the host knowing them. */
+export function WidgetSlot({
+  zone,
+  contextOverrides,
+  ...props
+}: { zone: string; contextOverrides?: Record<string, unknown> } & Record<string, unknown>) {
+  const runtime = usePluginRuntimeOptional()
+  if (!runtime) return null
+  const widgets = getWidgetsForZone(runtime, zone, contextOverrides as never)
+  if (!widgets.length) return null
+  return (
+    <>
+      {widgets.map((widget, i) => {
+        const Component = resolvePluginComponent(widget) as React.ComponentType<Record<string, unknown>> | undefined
+        if (!Component) return null
+        const w = widget as unknown as { config?: unknown; plugin?: unknown; props?: Record<string, unknown> }
+        // Pass BOTH contracts: the saas-core widget contract (config/runtime/
+        // plugin/widget) the de-bridged plugins expect, AND the spread props
+        // that native archetype zones use.
+        return (
+          <Component
+            key={widget.id ?? `${zone}-${i}`}
+            config={w.config}
+            runtime={{ ...runtime.context, ...(contextOverrides ?? {}) }}
+            plugin={w.plugin}
+            widget={widget}
+            {...(w.props ?? {})}
+            {...props}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/plugins/createPluginContext.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useStore as useZustandStore, type StoreApi } from 'zustand'
+
+/**
+ * createPluginContext — the standard config/provider/store React context trio that
+ * every plugin re-implemented by hand (~100 lines each). One call returns the
+ * provider component plus the three typed hooks:
+ *
+ *   const ctx = createPluginContext<ResolvedCrmConfig, CrmDataProvider, CrmUIState>('CrmPage')
+ *   export const CrmContextProvider = ctx.ContextProvider
+ *   export const useCrmConfig = ctx.useConfig
+ *   export const useCrmProvider = ctx.useProvider
+ *   export const useCrmStore = ctx.useStore
+ *
+ * `displayName` is only used in the "must be used within …" error messages.
+ */
+export interface PluginContextApi<TConfig, TProvider, TUIState> {
+  ContextProvider: React.FC<{
+    config: TConfig
+    provider: TProvider
+    store: StoreApi<TUIState>
+    children?: React.ReactNode
+  }>
+  useConfig: () => TConfig
+  useProvider: () => TProvider
+  useStore: <T>(selector: (state: TUIState) => T) => T
+}
+
+export function createPluginContext<TConfig, TProvider, TUIState>(
+  displayName: string,
+): PluginContextApi<TConfig, TProvider, TUIState> {
+  const ConfigContext = React.createContext<TConfig | null>(null)
+  const ProviderContext = React.createContext<TProvider | null>(null)
+  const StoreContext = React.createContext<StoreApi<TUIState> | null>(null)
+
+  const ContextProvider: PluginContextApi<TConfig, TProvider, TUIState>['ContextProvider'] = ({
+    config, provider, store, children,
+  }) => (
+    <ConfigContext.Provider value={config}>
+      <ProviderContext.Provider value={provider}>
+        <StoreContext.Provider value={store}>
+          {children}
+        </StoreContext.Provider>
+      </ProviderContext.Provider>
+    </ConfigContext.Provider>
+  )
+  ContextProvider.displayName = `${displayName}ContextProvider`
+
+  function useConfig(): TConfig {
+    const ctx = React.useContext(ConfigContext)
+    if (!ctx) throw new Error(`useConfig must be used within ${displayName}`)
+    return ctx
+  }
+
+  function useProvider(): TProvider {
+    const ctx = React.useContext(ProviderContext)
+    if (!ctx) throw new Error(`useProvider must be used within ${displayName}`)
+    return ctx
+  }
+
+  function useStore<T>(selector: (state: TUIState) => T): T {
+    const store = React.useContext(StoreContext)
+    if (!store) throw new Error(`useStore must be used within ${displayName}`)
+    return useZustandStore(store, selector)
+  }
+
+  return { ContextProvider, useConfig, useProvider, useStore }
+}

package/src/plugins/createViewRouter.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+/**
+ * parseViewId — the ONE canonical way to split a module view string into its base
+ * and optional `:id` param. Replaces the per-plugin mix of `.slice('x-detail:'.length)`,
+ * `.split(':')[1]`, and regex. `'leads-detail:42'` → `{ base: 'leads-detail', id: '42' }`,
+ * `'channels'` → `{ base: 'channels' }`.
+ */
+export function parseViewId(view: string): { base: string; id?: string } {
+  const i = view.indexOf(':')
+  return i === -1 ? { base: view } : { base: view.slice(0, i), id: view.slice(i + 1) }
+}
+
+export interface ViewRoute {
+  /** view base id, e.g. 'channels' (exact) or 'channel-detail' (matches 'channel-detail:<id>') */
+  id: string
+  /** render the view; `id` is the parsed `:id` param for detail/edit routes */
+  render: (params: { id?: string }) => React.ReactNode
+}
+
+/**
+ * createViewRouter — declarative replacement for the hand-written `renderView()`
+ * switch every plugin repeated. Maps a view's base id to a renderer and falls back
+ * to `fallbackId` for unknown views. Define routes inside the component so their
+ * `render` closures can capture `navigate`/handlers:
+ *
+ *   const renderView = createViewRouter([
+ *     { id: 'channels',        render: () => <ChannelsView onOpen={(id) => navigate(`channel-detail:${id}`)} /> },
+ *     { id: 'channel-detail',  render: ({ id }) => <ChannelDetailView channelId={id!} onBack={() => navigate('channels')} /> },
+ *     { id: 'overview',        render: () => <OverviewView /> },
+ *   ], 'overview')
+ *   ...
+ *   {renderView(view)}
+ *
+ * Not a fit for plugins that collapse detail/edit into a parent view + mode
+ * (e.g. financial's `parseIntent`) — those should still use `parseViewId` directly.
+ */
+export function createViewRouter(routes: ViewRoute[], fallbackId: string): (view: string) => React.ReactNode {
+  const map = new Map(routes.map((r) => [r.id, r]))
+  return (view: string) => {
+    const { base, id } = parseViewId(view)
+    const route = map.get(base) ?? map.get(fallbackId)
+    return route ? route.render({ id }) : null
+  }
+}

package/src/shell/components/auth/CenteredLogin.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { LoginForm } from './LoginForm'
+import { SignupForm } from './SignupForm'
+import { RecoveryForm } from './RecoveryForm'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { AuthProvider } from '../../types'
+
+interface CenteredLoginProps {
+  appName: string
+  logo?: React.ReactNode
+  tagline?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+  onSuccess?: () => void
+}
+
+type View = 'login' | 'signup' | 'recovery'
+
+export function CenteredLogin({ appName, logo, tagline, showOAuth, oauthProviders, onSuccess }: CenteredLoginProps) {
+  const [view, setView] = useState<View>('login')
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-sidebar p-4">
+      {/* Decorative background */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute -left-40 top-1/4 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />
+        <div className="absolute -right-40 bottom-1/4 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />
+      </div>
+
+      {/* Card — light */}
+      <div className="relative w-full max-w-md rounded-2xl border border-border/50 bg-card p-8 shadow-2xl sm:p-10">
+        {/* Logo + heading */}
+        <div className="mb-8 text-center">
+          <div className="mb-4 flex justify-center">{logo}</div>
+          <h1 className="text-2xl font-bold text-foreground">
+            {view === 'login' ? t('auth.login.welcomeBack') : view === 'signup' ? t('auth.signup.title') : t('auth.recovery.title')}
+          </h1>
+          {view === 'login' && (
+            <p className="mt-1 text-sm text-muted-foreground">
+              {tagline ?? (
+                <>
+                  {t('auth.login.noAccountYet')}{' '}
+                  <button type="button" onClick={() => setView('signup')} className="font-medium text-primary hover:underline">
+                    {t('auth.signUp')}
+                  </button>
+                </>
+              )}
+            </p>
+          )}
+          {view === 'signup' && (
+            <p className="mt-1 text-sm text-muted-foreground">
+              {t('auth.signup.hasAccount')}{' '}
+              <button type="button" onClick={() => setView('login')} className="font-medium text-primary hover:underline">
+                {t('auth.signIn')}
+              </button>
+            </p>
+          )}
+          {view === 'recovery' && (
+            <p className="mt-1 text-sm text-muted-foreground">{t('auth.recovery.resetSubtitle')}</p>
+          )}
+        </div>
+
+        {/* Form — override text colors for dark card */}
+        <div>
+          {view === 'login' && (
+            <LoginForm
+              onSuccess={onSuccess}
+              onForgotPassword={() => setView('recovery')}
+              showOAuth={showOAuth}
+              oauthProviders={oauthProviders}
+            />
+          )}
+
+          {view === 'signup' && (
+            <SignupForm onSuccess={onSuccess} />
+          )}
+
+          {view === 'recovery' && (
+            <RecoveryForm onBackToLogin={() => setView('login')} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/shell/components/auth/LoginForm.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react'
+import { cn } from '../../lib/cn'
+import { useAuth } from '../../hooks/useAuth'
+import { useTranslation } from '../../hooks/useTranslation'
+import { OAuthButtons } from './OAuthButtons'
+import type { AuthProvider } from '../../types'
+
+interface LoginFormProps {
+  onSuccess?: () => void
+  onForgotPassword?: () => void
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+  className?: string
+}
+
+export function LoginForm({
+  onSuccess,
+  onForgotPassword,
+  showOAuth = false,
+  oauthProviders = ['google', 'github'],
+  className,
+}: LoginFormProps) {
+  const { signIn, signInWithOAuth, loading } = useAuth()
+  const { t } = useTranslation()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    try {
+      await signIn(email, password)
+      onSuccess?.()
+    } catch (err: any) {
+      setError(err.message ?? t('auth.login.failedDefault'))
+    }
+  }
+
+  const handleOAuthClick = async (provider: AuthProvider) => {
+    setError(null)
+    try {
+      await signInWithOAuth(provider)
+    } catch (err: any) {
+      setError(err.message ?? t('auth.login.failedWithProvider', { provider }))
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn('flex flex-col gap-4 w-full max-w-sm', className)}
+    >
+      {error && (
+        <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="login-email" className="text-sm font-medium text-foreground">
+          {t('auth.email')}
+        </label>
+        <input
+          id="login-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('auth.login.placeholder.email')}
+          required
+          autoComplete="email"
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="login-password" className="text-sm font-medium text-foreground">
+          {t('auth.password')}
+        </label>
+        <input
+          id="login-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder={t('auth.login.placeholder.password')}
+          required
+          autoComplete="current-password"
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+
+      {onForgotPassword && (
+        <button
+          type="button"
+          onClick={onForgotPassword}
+          className="text-sm text-muted-foreground hover:text-foreground self-end -mt-2 transition-colors"
+        >
+          {t('auth.forgotPassword')}
+        </button>
+      )}
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="inline-flex items-center justify-center h-10 px-4 py-2 rounded-md bg-primary border border-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors disabled:opacity-50 disabled:pointer-events-none"
+      >
+        {loading ? t('auth.login.signingIn') : t('auth.signIn')}
+      </button>
+
+      {showOAuth && oauthProviders.length > 0 && (
+        <>
+          <div className="relative my-2">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">{t('auth.login.orContinueWith')}</span>
+            </div>
+          </div>
+          <OAuthButtons
+            providers={oauthProviders}
+            onProviderClick={handleOAuthClick}
+          />
+        </>
+      )}
+    </form>
+  )
+}

package/src/shell/components/auth/LoginPage.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { SplitLogin } from './SplitLogin'
+import { CenteredLogin } from './CenteredLogin'
+import type { AuthProvider } from '../../types'
+
+interface LoginPageProps {
+  appName: string
+  logo?: React.ReactNode
+  layout?: 'split' | 'centered'
+  tagline?: string
+  description?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+  onSuccess?: () => void
+}
+
+export function LoginPage({ layout = 'split', ...props }: LoginPageProps) {
+  if (layout === 'centered') {
+    return <CenteredLogin {...props} />
+  }
+  return <SplitLogin {...props} />
+}

package/src/shell/components/auth/OAuthButtons.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { AuthProvider } from '../../types'
+
+interface OAuthButtonsProps {
+  providers: Exclude<AuthProvider, 'email'>[]
+  onProviderClick?: (provider: AuthProvider) => void
+  className?: string
+}
+
+function GoogleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+    </svg>
+  )
+}
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  )
+}
+
+function AppleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+    </svg>
+  )
+}
+
+const providerConfig: Record<Exclude<AuthProvider, 'email'>, { label: string; icon: React.FC<{ className?: string }> }> = {
+  google: { label: 'Google', icon: GoogleIcon },
+  github: { label: 'GitHub', icon: GitHubIcon },
+  apple: { label: 'Apple', icon: AppleIcon },
+}
+
+export function OAuthButtons({ providers, onProviderClick, className }: OAuthButtonsProps) {
+  const { t } = useTranslation()
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {providers.map((provider) => {
+        const config = providerConfig[provider]
+        const Icon = config.icon
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => onProviderClick?.(provider)}
+            className="inline-flex items-center justify-center gap-2 h-10 px-4 py-2 rounded-md border border-input bg-background text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
+          >
+            <Icon className="h-4 w-4" />
+            {t('auth.oauth.continueWith', { provider: config.label })}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/shell/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useAuth } from '../../hooks/useAuth'
+import { usePermission } from '../../hooks/usePermission'
+import type { MemberRole } from '../../types'
+
+interface ProtectedRouteProps {
+  children?: React.ReactNode
+  requiredRole?: MemberRole
+  fallback?: React.ReactNode
+  onUnauthenticated?: () => void
+}
+
+function LoadingSkeleton() {
+  return <div className="min-h-screen" />
+}
+
+export function ProtectedRoute({ children, requiredRole, fallback, onUnauthenticated }: ProtectedRouteProps) {
+  const { user, loading, initialized } = useAuth()
+  const { requireRole } = usePermission()
+
+  React.useEffect(() => {
+    if (initialized && !loading && !user && onUnauthenticated) {
+      onUnauthenticated()
+    }
+  }, [initialized, loading, user, onUnauthenticated])
+
+  if (!initialized || loading) {
+    return <LoadingSkeleton />
+  }
+
+  if (!user) {
+    return <LoadingSkeleton />
+  }
+
+  if (requiredRole && !requireRole(requiredRole)) {
+    if (fallback) {
+      return <>{fallback}</>
+    }
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <h2 className="text-lg font-semibold text-foreground mb-2">Access Denied</h2>
+          <p className="text-sm text-muted-foreground">
+            You do not have permission to access this page.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}

package/src/shell/components/auth/RecoveryForm.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import { cn } from '../../lib/cn'
+import { useAuth } from '../../hooks/useAuth'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface RecoveryFormProps {
+  onSuccess?: () => void
+  onBackToLogin?: () => void
+  className?: string
+}
+
+export function RecoveryForm({
+  onSuccess,
+  onBackToLogin,
+  className,
+}: RecoveryFormProps) {
+  const { resetPassword, loading } = useAuth()
+  const { t } = useTranslation()
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    try {
+      await resetPassword(email)
+      setSubmitted(true)
+      onSuccess?.()
+    } catch (err: any) {
+      setError(err.message ?? t('auth.recovery.failedDefault'))
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div className={cn('flex flex-col gap-4 w-full max-w-sm text-center', className)}>
+        <div className="rounded-md bg-success/10 border border-success/30 px-4 py-6">
+          <h3 className="text-sm font-medium text-success mb-1">
+            {t('auth.recovery.checkEmail')}
+          </h3>
+          <p className="text-sm text-success">
+            {t('auth.recovery.resetLinkSent', { email })}
+          </p>
+        </div>
+        {onBackToLogin && (
+          <button
+            type="button"
+            onClick={onBackToLogin}
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {t('auth.recovery.backToLogin')}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn('flex flex-col gap-4 w-full max-w-sm', className)}
+    >
+      <p className="text-sm text-muted-foreground">
+        {t('auth.recovery.description')}
+      </p>
+
+      {error && (
+        <div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="recovery-email" className="text-sm font-medium text-foreground">
+          {t('auth.email')}
+        </label>
+        <input
+          id="recovery-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('auth.login.placeholder.email')}
+          required
+          autoComplete="email"
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="inline-flex items-center justify-center h-10 px-4 py-2 rounded-md bg-primary border border-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors disabled:opacity-50 disabled:pointer-events-none"
+      >
+        {loading ? t('auth.recovery.sending') : t('auth.recovery.sendResetLink')}
+      </button>
+
+      {onBackToLogin && (
+        <button
+          type="button"
+          onClick={onBackToLogin}
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {t('auth.recovery.backToLogin')}
+        </button>
+      )}
+    </form>
+  )
+}