@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/blocks/auth/auth-flow-block.tsx

@@ -3,35 +3,22 @@
 import * as React from "react"
 import { MotionConfig } from "motion/react"
 
-import type { SocialProvider } from "@/components/composed/social-providers"
-import type { AuthAccent } from "@/lib/auth-accent"
 import { cn } from "@/lib/utils"
 import { AuthCard, AuthSuccess, MorphStep } from "./auth-shell"
-import { CodeAuthBlock, type CodeAuthBlockProps } from "./code-auth-block"
+import { CodeAuthBlock } from "./code-auth-block"
 import {
   ForgotPasswordBlock,
-  type ForgotPasswordBlockProps,
 } from "./forgot-password-block"
-import { LoginBlock, type LoginBlockProps } from "./login-block"
+import { LoginBlock } from "./login-block"
 import {
   OnboardingBlock,
-  type OnboardingBlockProps,
-  type OnboardingStepConfig,
-  type OnboardingValue,
 } from "./onboarding-block"
-import { SignupBlock, type SignupBlockProps } from "./signup-block"
+import { SignupBlock } from "./signup-block"
 import {
   UpdatePasswordBlock,
-  type UpdatePasswordBlockProps,
 } from "./update-password-block"
-import type {
-  AuthFlowId,
-  AuthFlowState,
-  AuthFlowStep,
-  AuthUser,
-  BeginAuthVerificationOptions,
-} from "./auth-state-type"
 import { useAuthFlow, useAuthFlowActions } from "./use-auth-state"
+import type { IAuthFlowBlockProps, TAuthFlowDirective, TAuthFlowHandler } from "./type"
 
 /**
  * Where the flow goes after a step callback resolves. Returned from every
@@ -48,78 +35,6 @@ import { useAuthFlow, useAuthFlowActions } from "./use-auth-state"
  * which owns its transient error/shake state (see `react/CLAUDE.md`,
  * "Third implementation: auth").
  */
-export type AuthFlowDirective =
-  | { user: AuthUser }
-  | { verify: BeginAuthVerificationOptions }
-  | { step: AuthFlowStep }
-  | void
-
-export type AuthFlowHandler<Data = void> = (
-  data: Data
-) => Promise<AuthFlowDirective> | AuthFlowDirective
-
-/** Per-step prop overrides, merged over the orchestrator's wiring — spread
- * last, so an app can restyle a block or unhook a default navigation link
- * (`{ login: { onSignup: undefined } }` removes the sign-up hand-off). */
-export interface AuthFlowStepOverrides {
-  login?: Partial<LoginBlockProps>
-  signup?: Partial<SignupBlockProps>
-  "verify-code"?: Partial<CodeAuthBlockProps>
-  "forgot-password"?: Partial<ForgotPasswordBlockProps>
-  "update-password"?: Partial<UpdatePasswordBlockProps>
-  onboarding?: Partial<OnboardingBlockProps>
-}
-
-export interface AuthFlowBlockProps {
-  /** Which flow instance to orchestrate. The default flow unless a re-auth
-   * modal or a second surface needs its own. */
-  flowId?: AuthFlowId
-  /** Brand mark handed to every step's card. */
-  logo?: React.ReactNode
-  /** Brand accent handed to every step's card. */
-  accent?: AuthAccent
-  /** Social providers offered on the login and signup steps. */
-  providers?: SocialProvider[]
-  /** The login attempt. Resolve with a directive; reject to show the error
-   * in the block. */
-  onLogin?: AuthFlowHandler<{
-    email: string
-    password: string
-    remember: boolean
-  }>
-  /** The signup attempt. */
-  onSignup?: AuthFlowHandler<{ name: string; email: string; password: string }>
-  /** A social provider chosen on the login or signup step. */
-  onProviderSelect?: AuthFlowHandler<SocialProvider>
-  /** The forgot-password request. Resolving without a directive stays on the
-   * step (the block shows its own "link sent" state). */
-  onRequestReset?: AuthFlowHandler<{ email: string }>
-  /** The code entered on the verification step. */
-  onVerifyCode?: AuthFlowHandler<string>
-  /** "Resend code" on the verification step. */
-  onResendCode?: AuthFlowHandler
-  /** The update-password submit. */
-  onUpdatePassword?: AuthFlowHandler<{ password: string }>
-  /** Onboarding finished, with the merged profile. */
-  onOnboardingComplete?: AuthFlowHandler<Record<string, OnboardingValue>>
-  /** Declared onboarding steps, handed to `OnboardingBlock`. */
-  onboardingSteps?: OnboardingStepConfig[]
-  /** Per-step prop overrides, merged over the orchestrator's wiring. */
-  steps?: AuthFlowStepOverrides
-  /** Replace any step's UI entirely; return `undefined` to keep the default
-   * for that step. Receives the flow state for destination copy etc. */
-  renderStep?: (
-    step: AuthFlowStep,
-    flow: AuthFlowState
-  ) => React.ReactNode | undefined
-  /** Replaces the whole default success card. */
-  success?: React.ReactNode
-  /** Card title of the default success step. */
-  successTitle?: string
-  /** Body under the default success step's "You're signed in" check. */
-  successDescription?: string
-  className?: string
-}
 
 /**
  * Renders the right auth block for the flow's current step with the store
@@ -127,7 +42,7 @@ export interface AuthFlowBlockProps {
  * `useAuthFlow`. Navigation links between steps (login ↔ signup, forgot
  * password, back from verification) are pre-wired to `goToStep`; each
  * submit-shaped prop awaits your handler and applies the returned
- * {@link AuthFlowDirective}.
+ * {@link TAuthFlowDirective}.
  *
  * The blocks themselves stay untouched: passwords, codes and field drafts
  * live in their local state, and a rejected handler renders as the block's
@@ -164,12 +79,12 @@ export function AuthFlowBlock({
   successTitle = "Welcome",
   successDescription,
   className,
-}: AuthFlowBlockProps): React.ReactElement {
+}: IAuthFlowBlockProps): React.ReactElement {
   const flow = useAuthFlow(flowId)
   const { goToStep, beginVerification, complete } = useAuthFlowActions(flowId)
 
   const apply = React.useCallback(
-    (directive: AuthFlowDirective) => {
+    (directive: TAuthFlowDirective) => {
       if (!directive) return
       if ("user" in directive) complete(directive.user)
       else if ("verify" in directive) beginVerification(directive.verify)
@@ -181,7 +96,7 @@ export function AuthFlowBlock({
   /** Wrap a handler so its directive lands in the store. Errors propagate —
    * the block owns the error rendering. Absent handlers stay absent, so a
    * block keeps its "no handler" affordances (hidden buttons etc.). */
-  function run<Data>(handler: AuthFlowHandler<Data> | undefined) {
+  function run<Data>(handler: TAuthFlowHandler<Data> | undefined) {
     if (!handler) return undefined
     return async (data: Data) => {
       apply(await handler(data))

package/src/components/blocks/auth/auth-session-atom.ts

@@ -16,18 +16,18 @@
 import { atom } from "jotai"
 
 import type {
-  AuthSessionState,
-  AuthSessionStatus,
-  AuthUser,
-} from "./auth-state-type"
+  IAuthSessionState,
+  TAuthSessionStatus,
+  IAuthUser,
+} from "./type"
 
 // ── primitives ───────────────────────────────────────────────────────────
 
 /** `"unknown"` until the app restores or rejects a session at boot. */
-export const authSessionStatusAtom = atom<AuthSessionStatus>("unknown")
+export const authSessionStatusAtom = atom<TAuthSessionStatus>("unknown")
 authSessionStatusAtom.debugLabel = "auth-session/status"
 
-export const authUserAtom = atom<AuthUser | null>(null)
+export const authUserAtom = atom<IAuthUser | null>(null)
 authUserAtom.debugLabel = "auth-session/user"
 
 // ── derived ──────────────────────────────────────────────────────────────
@@ -37,7 +37,7 @@ export const isAuthenticatedAtom = atom(
 )
 isAuthenticatedAtom.debugLabel = "auth-session/isAuthenticated"
 
-export const authSessionStateAtom = atom<AuthSessionState>((get) => ({
+export const authSessionStateAtom = atom<IAuthSessionState>((get) => ({
   status: get(authSessionStatusAtom),
   user: get(authUserAtom),
 }))
@@ -45,7 +45,7 @@ authSessionStateAtom.debugLabel = "auth-session/state"
 
 // ── actions ──────────────────────────────────────────────────────────────
 
-export const signInAtom = atom(null, (_get, set, user: AuthUser) => {
+export const signInAtom = atom(null, (_get, set, user: IAuthUser) => {
   set(authUserAtom, user)
   set(authSessionStatusAtom, "authenticated")
 })
@@ -53,7 +53,7 @@ signInAtom.debugLabel = "auth-session/signIn"
 
 export const updateAuthUserAtom = atom(
   null,
-  (get, set, patch: Partial<AuthUser>) => {
+  (get, set, patch: Partial<IAuthUser>) => {
     const user = get(authUserAtom)
     // No-op when signed out: there is no user to merge into, and inventing
     // one from a partial patch would fabricate an identity.

package/src/components/blocks/auth/auth-shell.tsx

@@ -12,13 +12,12 @@ import {
 } from "@/components/ui/card";
 import { Frame, FrameFooter } from "@/components/ui/frame";
 import { Separator } from "@/components/ui/separator";
-import { type AuthAccent, authAccentVars } from "@/lib/auth-accent";
+import { type TAuthAccent, authAccentVars } from "@/lib/auth-accent";
 import { cn } from "@/lib/utils";
 
 /** transitions.dev motion scale, shared by all auth blocks. */
 export const EASE = [0.22, 1, 0.36, 1] as const;
 
-export type AuthStatus = "idle" | "loading" | "success" | "error";
 
 /**
  * Frame shell shared by the auth blocks (coss particle p-card-8): a raised
@@ -43,7 +42,7 @@ export function AuthCard({
   /** Brand mark rendered above the title. Omit for no logo row at all. */
   logo?: React.ReactNode;
   /** Brand accent for the card's primary action. Omit to keep `bg-primary`. */
-  accent?: AuthAccent;
+  accent?: TAuthAccent;
 }) {
   return (
     <MotionConfig reducedMotion="user">

package/src/components/blocks/auth/auth-state.ts

@@ -38,15 +38,3 @@ export {
   useAuthSession,
   useAuthSessionActions,
 } from "./use-auth-state"
-export type {
-  AuthFlowActions,
-  AuthFlowChannel,
-  AuthFlowId,
-  AuthFlowState,
-  AuthFlowStep,
-  AuthSessionActions,
-  AuthSessionState,
-  AuthSessionStatus,
-  AuthUser,
-  BeginAuthVerificationOptions,
-} from "./auth-state-type"

package/src/components/blocks/auth/code-auth-block.tsx

@@ -5,8 +5,9 @@ import { motion } from "motion/react";
 import * as React from "react";
 
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import { OTPField, OTPFieldInput } from "@/components/ui/otp-field";
-import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { authAccentActionStyles } from "@/lib/auth-accent";
 import { cn } from "@/lib/utils";
 import {
   AuthCard,
@@ -15,28 +16,8 @@ import {
   EASE,
   MorphStep,
   useCountdown,
-  type AuthStatus,
 } from "./auth-shell";
-
-export interface CodeAuthBlockProps {
-  /** Brand mark rendered above the title. Omit for no logo row at all. */
-  logo?: React.ReactNode;
-  /** Brand accent for the primary action. Omit to keep the default primary. */
-  accent?: AuthAccent;
-  /** Where the code was sent; drives copy and icon. */
-  channel?: "email" | "sms";
-  /** Masked destination shown in the description, e.g. "y•••@example.com". */
-  destination?: string;
-  length?: number;
-  /** Submit automatically once all digits are entered. */
-  autoSubmit?: boolean;
-  /** Seconds before "Resend code" becomes available. 0 disables the wait. */
-  resendSeconds?: number;
-  /** Reject (or throw) to show the error shake and clear the code. */
-  onVerify?: (code: string) => Promise<void> | void;
-  onResend?: () => Promise<void> | void;
-  onBack?: () => void;
-}
+import type { ICodeAuthBlockProps, TAuthStatus } from "./type";
 
 export function CodeAuthBlock({
   channel = "email",
@@ -49,8 +30,9 @@ export function CodeAuthBlock({
   onVerify,
   onResend,
   onBack,
-}: CodeAuthBlockProps) {
-  const [status, setStatus] = React.useState<AuthStatus>("idle");
+}: ICodeAuthBlockProps) {
+  const codeFieldId = React.useId();
+  const [status, setStatus] = React.useState<TAuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [code, setCode] = React.useState("");
   const [resendCount, setResendCount] = React.useState(0);
@@ -72,7 +54,7 @@ export function CodeAuthBlock({
         setError(cause instanceof Error ? cause.message : "Invalid code.");
       }
     },
-    [onVerify],
+    [onVerify]
   );
 
   function handleChange(value: string) {
@@ -93,10 +75,11 @@ export function CodeAuthBlock({
   return (
     <AuthCard
       title="Enter verification code"
+      className="[&_[data-slot=card-header]]:gap-3 [&_[data-slot=card-header]]:pb-8 [&_[data-slot=card-description]]:text-xs [&_[data-slot=card-description]]:leading-relaxed"
       logo={logo}
       accent={accent}
       description={
-        <span className="inline-flex items-center gap-1.5">
+        <span className="gap-1.5 inline-flex items-center">
           <ChannelIcon className="size-3.5 shrink-0" />
           <span>
             We sent a {length}-digit code to your {channelLabel}
@@ -127,14 +110,18 @@ export function CodeAuthBlock({
             description="Your identity has been confirmed."
           />
         ) : (
-          <div className="flex flex-col items-center gap-4">
+          <div className="gap-4 flex flex-col items-center">
             <motion.div
               // Shake the whole field on error; keying by message replays it.
               key={error ?? "steady"}
               animate={error ? { x: [0, -8, 8, -5, 5, 0] } : { x: 0 }}
               transition={{ duration: 0.4, ease: "easeInOut" }}
             >
+              <Label className="sr-only" htmlFor={codeFieldId}>
+                Verification code
+              </Label>
               <OTPField
+                id={codeFieldId}
                 length={length}
                 value={code}
                 onValueChange={handleChange}
@@ -144,7 +131,6 @@ export function CodeAuthBlock({
                   <OTPFieldInput
                     key={`slot-${index}`}
                     aria-invalid={error ? true : undefined}
-                    aria-label={`Digit ${index + 1} of ${length}`}
                   />
                 ))}
               </OTPField>
@@ -163,12 +149,12 @@ export function CodeAuthBlock({
             <motion.p
               layout
               transition={{ duration: 0.25, ease: EASE }}
-              className="text-center text-sm text-muted-foreground"
+              className="text-sm text-center text-muted-foreground"
             >
               {remaining > 0 ? (
                 <>
                   Resend code in{" "}
-                  <span className="font-medium tabular-nums text-foreground">
+                  <span className="font-medium text-foreground tabular-nums">
                     {remaining}s
                   </span>
                 </>

package/src/components/blocks/auth/forgot-password-block.tsx

@@ -6,26 +6,15 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { authAccentActionStyles } from "@/lib/auth-accent";
 import { cn } from "@/lib/utils";
 import {
   AuthCard,
   AuthError,
   AuthSuccess,
   MorphStep,
-  type AuthStatus,
 } from "./auth-shell";
-
-export interface ForgotPasswordBlockProps {
-  title?: string;
-  description?: string;
-  /** Brand mark rendered above the title. Omit for no logo row at all. */
-  logo?: React.ReactNode;
-  /** Brand accent for the primary action. Omit to keep the default primary. */
-  accent?: AuthAccent;
-  onSubmit?: (data: { email: string }) => Promise<void> | void;
-  onBackToLogin?: () => void;
-}
+import type { IForgotPasswordBlockProps, TAuthStatus } from "./type";
 
 export function ForgotPasswordBlock({
   title = "Reset your password",
@@ -34,9 +23,9 @@ export function ForgotPasswordBlock({
   description = "Enter your email and we will send you a reset link",
   onSubmit,
   onBackToLogin,
-}: ForgotPasswordBlockProps) {
+}: IForgotPasswordBlockProps) {
   const emailId = React.useId();
-  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [status, setStatus] = React.useState<TAuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [email, setEmail] = React.useState("");
 

package/src/components/blocks/auth/linked-accounts-block.tsx

@@ -5,7 +5,6 @@ import * as React from "react"
 
 import {
   SOCIAL_PROVIDERS,
-  type SocialProvider,
 } from "@/components/composed/social-providers"
 import { Button } from "@/components/ui/button"
 import {
@@ -18,35 +17,10 @@ import {
 import { Spinner } from "@/components/ui/spinner"
 import { cn } from "@/lib/utils"
 import { AuthError, EASE } from "./auth-shell"
+import type { ILinkedAccountsBlockProps } from "./type"
+import type { TSocialProvider } from "@/components/composed/types"
+import { Users2 } from "lucide-react"
 
-/** One sign-in identity attached to the account. */
-export interface LinkedIdentity {
-  id: string
-  provider: SocialProvider
-  /** Account address shown under the provider name, when known. */
-  email?: string | null
-}
-
-export interface LinkedAccountsBlockProps {
-  title?: string
-  description?: string
-  /** Identities already attached to the account. */
-  identities?: LinkedIdentity[]
-  /** Providers offered as connect candidates; connected ones are filtered out. */
-  providers?: SocialProvider[]
-  /** Shows the loading row instead of the list. */
-  loading?: boolean
-  /**
-   * The account can also sign in through a method that has no row in this
-   * list — an email/password credential, say. Lifts the last-method guard,
-   * which otherwise refuses to disconnect the final listed identity.
-   */
-  hasOtherSignInMethods?: boolean
-  /** Reject (or throw) to show the inline error. */
-  onLink?: (provider: SocialProvider) => Promise<void> | void
-  onUnlink?: (id: string) => Promise<void> | void
-  className?: string
-}
 
 const LAST_METHOD_EXPLANATION =
   "This is your only way to sign in, so it can't be disconnected."
@@ -67,10 +41,10 @@ export function LinkedAccountsBlock({
   onLink,
   onUnlink,
   className,
-}: LinkedAccountsBlockProps) {
+}: ILinkedAccountsBlockProps) {
   const noteId = React.useId()
   const [error, setError] = React.useState<string | null>(null)
-  const [linking, setLinking] = React.useState<SocialProvider | null>(null)
+  const [linking, setLinking] = React.useState<TSocialProvider | null>(null)
   const [unlinking, setUnlinking] = React.useState<string | null>(null)
 
   const connected = new Set(identities.map((identity) => identity.provider))
@@ -81,7 +55,7 @@ export function LinkedAccountsBlock({
   // the account reachable, so it lifts the guard.
   const lastMethod = !hasOtherSignInMethods && identities.length <= 1
 
-  async function connect(provider: SocialProvider) {
+  async function connect(provider: TSocialProvider) {
     if (busy) return
     setError(null)
     setLinking(provider)
@@ -115,7 +89,7 @@ export function LinkedAccountsBlock({
     <MotionConfig reducedMotion="user">
       <Card className={cn("w-full", className)} data-slot="auth-block">
         <CardHeader>
-          <CardTitle>{title}</CardTitle>
+          <CardTitle className="inline-flex items-center gap-1"><Users2 size={18} /> {title}</CardTitle>
           <CardDescription>{description}</CardDescription>
         </CardHeader>
         <CardPanel>
@@ -203,12 +177,12 @@ export function LinkedAccountsBlock({
               )}
 
               {connectable.map((provider) => {
-                const { label, BrandIcon, brandClassName } =
+                const { label, BrandIcon, brandClassName, buttonClassName, labelClassName } =
                   SOCIAL_PROVIDERS[provider]
                 return (
                   <Button
                     key={provider}
-                    className="w-full"
+                    className={cn("w-full", buttonClassName)}
                     type="button"
                     variant="outline"
                     disabled={busy}
@@ -216,7 +190,7 @@ export function LinkedAccountsBlock({
                     onClick={() => void connect(provider)}
                   >
                     <BrandIcon aria-hidden="true" className={brandClassName} />
-                    <span className="flex-1">Connect {label}</span>
+                    <span className={cn("flex-1", labelClassName)}>Connect {label}</span>
                   </Button>
                 )
               })}

package/src/components/blocks/auth/login-block.tsx

@@ -5,14 +5,13 @@ import * as React from "react";
 import { PasswordInput } from "@/components/composed/password-input";
 import {
   SocialProviders,
-  type SocialProvider,
 } from "@/components/composed/social-providers";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { authAccentActionStyles } from "@/lib/auth-accent";
 import { cn } from "@/lib/utils";
 import {
   AuthCard,
@@ -21,30 +20,9 @@ import {
   AuthSuccess,
   MorphStep,
   Reveal,
-  type AuthStatus,
 } from "./auth-shell";
-
-export interface LoginBlockProps {
-  title?: string;
-  description?: string;
-  /** Brand mark rendered above the title. Omit for no logo row at all. */
-  logo?: React.ReactNode;
-  /** Brand accent for the primary action. Omit to keep the default primary. */
-  accent?: AuthAccent;
-  /** Social providers to offer; empty array hides the social section. */
-  providers?: SocialProvider[];
-  showRememberMe?: boolean;
-  showForgotPassword?: boolean;
-  /** Reject (or throw) to show the error state with the error's message. */
-  onSubmit?: (data: {
-    email: string;
-    password: string;
-    remember: boolean;
-  }) => Promise<void> | void;
-  onProviderSelect?: (provider: SocialProvider) => Promise<void> | void;
-  onForgotPassword?: () => void;
-  onSignup?: () => void;
-}
+import type { ILoginBlockProps, TAuthStatus } from "./type";
+import type { TSocialProvider } from "@/components/composed/types";
 
 export function LoginBlock({
   title = "Login to your account",
@@ -58,13 +36,13 @@ export function LoginBlock({
   onProviderSelect,
   onForgotPassword,
   onSignup,
-}: LoginBlockProps) {
+}: ILoginBlockProps) {
   const emailId = React.useId();
   const rememberId = React.useId();
-  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [status, setStatus] = React.useState<TAuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [loadingProvider, setLoadingProvider] =
-    React.useState<SocialProvider | null>(null);
+    React.useState<TSocialProvider | null>(null);
   const [remember, setRemember] = React.useState(false);
   const [email, setEmail] = React.useState("");
   const [emailValid, setEmailValid] = React.useState(false);
@@ -102,7 +80,7 @@ export function LoginBlock({
     }
   }
 
-  async function handleProvider(provider: SocialProvider) {
+  async function handleProvider(provider: TSocialProvider) {
     setError(null);
     setLoadingProvider(provider);
     try {

package/src/components/blocks/auth/onboarding/profile-step.tsx

@@ -10,35 +10,24 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import type {
-  OnboardingFieldConfig,
-  OnboardingStepConfig,
-  OnboardingValue,
-} from "../onboarding-block";
-
-export interface ProfileStepProps {
-  step: OnboardingStepConfig;
-  /** Seed values, so drafts survive back/forward navigation. */
-  values: Record<string, OnboardingValue>;
-  submitting?: boolean;
-  submitLabel: string;
-  onSubmit: (values: Record<string, OnboardingValue>) => void | Promise<void>;
-  onBack?: () => void;
-  /** Reports every edit so the flow can restore drafts across navigation. */
-  onDraftChange?: (name: string, value: OnboardingValue) => void;
-}
+    IProfileStepProps,
+  TOnboardingFieldConfig,
+  TOnboardingValue,
+} from "../type";
+
 
 function initialValue(
-  field: OnboardingFieldConfig,
-  saved: OnboardingValue | undefined,
-): OnboardingValue {
+  field: TOnboardingFieldConfig,
+  saved: TOnboardingValue | undefined,
+): TOnboardingValue {
   if (field.kind === "checkbox") return typeof saved === "boolean" ? saved : false;
   return typeof saved === "string" ? saved : "";
 }
 
 /** Built-in validation, mirroring the declared `FieldConfig` contract. */
 function validateField(
-  field: OnboardingFieldConfig,
-  value: OnboardingValue,
+  field: TOnboardingFieldConfig,
+  value: TOnboardingValue,
 ): string | null {
   const required = field.required === true;
 
@@ -81,9 +70,9 @@ export function ProfileStep({
   onSubmit,
   onBack,
   onDraftChange,
-}: ProfileStepProps) {
+}: IProfileStepProps) {
   const idPrefix = React.useId();
-  const [draft, setDraft] = React.useState<Record<string, OnboardingValue>>(
+  const [draft, setDraft] = React.useState<Record<string, TOnboardingValue>>(
     () =>
       Object.fromEntries(
         step.fields.map((field) => [
@@ -94,7 +83,7 @@ export function ProfileStep({
   );
   const [errors, setErrors] = React.useState<Record<string, string>>({});
 
-  function setValue(name: string, value: OnboardingValue) {
+  function setValue(name: string, value: TOnboardingValue) {
     setDraft((current) => ({ ...current, [name]: value }));
     onDraftChange?.(name, value);
     // Clear a field's error as soon as it is edited; re-validation happens on
@@ -119,7 +108,7 @@ export function ProfileStep({
     }
     setErrors({});
 
-    const submitted: Record<string, OnboardingValue> = {};
+    const submitted: Record<string, TOnboardingValue> = {};
     for (const field of step.fields) {
       const value = draft[field.name];
       submitted[field.name] = typeof value === "string" ? value.trim() : value;