4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T7fe0,"use client"; import type { ComponentProps, FocusEvent, FormEvent, ReactNode } from "react"; import { useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type AuthMode = "sign-in" | "sign-up" | "reset"; export type AuthFieldName = "name" | "email" | "password"; /** Returns the failure message, or null when the value passes. */ export type AuthValidator = (value: string) => string | null; export interface AuthProvider { id: string; label: string; icon?: ReactNode; } export interface AuthFormValues { email: string; password: string; /** Present in sign-up mode. */ name?: string; } export type AuthFormProps = Omit, "onSubmit"> & { /** Which face the form shows. */ mode?: AuthMode; /** Called with the field values once they pass validation. */ onSubmit: (values: AuthFormValues) => void; /** Renders the footer swap link and enables mode switching. */ onModeChange?: (mode: AuthMode) => void; /** Locks the fields and puts the action in its working state. */ isBusy?: boolean; /** Structured failure message rendered above the action. */ error?: string | null; /** Server-side verdicts pinned to fields (e.g. incorrect password). */ fieldErrors?: Partial>; /** * Per-field validators merged over the mode defaults — return the * failure message, or null when the value passes. Use it to bring * your own password policy. */ validators?: Partial>; /** OAuth-style providers rendered under the divider. */ providers?: AuthProvider[]; /** Called with the provider id. */ onProvider?: (id: string) => void; /** Renders the forgot link on the password row (sign-in only). */ onForgotPassword?: () => void; /** * The email a reset link was sent to. In reset mode this flips the * form to its confirmation face. */ resetSentTo?: string | null; /** Renders the "send again" link on the confirmation face. */ onResend?: () => void; /** Brand mark slot above the title. */ mark?: ReactNode; title?: string; description?: string; /** * "card" (default) draws the house surface — border, bg-card, * padding. "bare" renders naked for split layouts that supply * their own panel. */ variant?: "card" | "bare"; }; /* ───────────────────────────────────────────────────────── * ENTRANCE STORYBOARD * * Read top-to-bottom. Each value is ms after mount; every * group rises 8px and fades in over 500ms, fields one at a * time — the form introduces itself in reading order. * Static under reduced motion. * * 0ms mark, title, description * 80ms first field (then +60ms per field) * 260ms primary action * 340ms divider, providers, footer * ───────────────────────────────────────────────────────── */ const TIMING: Record< "header" | "fields" | "fieldStagger" | "action" | "meta", number > = { // primary action action: 260, // ms between each field fieldStagger: 60, // first field fields: 80, // mark, title, description header: 0, // divider, providers, footer meta: 340, }; const RISE = "fill-mode-backwards fade-in-0 slide-in-from-bottom-2 animate-in duration-500 motion-reduce:animate-none"; /* ───────────────────────────────────────────────────────── * FIELD STORYBOARD — "light in a tube" * * The frame stays neutral; the light does the talking. * * focus a primary beam sweeps along the field's bottom * edge, left to right (250ms strong ease-out, * transform-only) and the label warms to * foreground * blur the beam withdraws; a filled field validates on * leave — never while you're still typing, and * never for a field you merely tabbed past * (required verdicts wait for submit) * invalid the whole box takes the verdict — destructive * border and a whisper of destructive fill — the * message takes over the label slot in place * (crossfade, no layout shift — the frame never * moves), and an X draws itself into the field * edge * valid a check draws itself into the field edge, * stroke first to last (300ms ease-out) * edit any verdict clears instantly — the system * responds, it doesn't linger * submit all fields judged at once; the first failure * takes focus; onSubmit fires only on a clean * pass. Server fieldErrors pin until edited. * ───────────────────────────────────────────────────────── */ const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; const EMAIL_SHAPE = /^\S+@\S+\.\S+$/u; /* Better Auth's server defaults — client verdicts agree with them. */ const MIN_PASSWORD = 8; const MAX_PASSWORD = 128; export const validateEmail = (value: string): string | null => { if (!value) { return "Add your email."; } return EMAIL_SHAPE.test(value) ? null : "Not a valid email."; }; const VALIDATORS: Record< AuthMode, Partial string | null>> > = { reset: { email: validateEmail, }, "sign-in": { email: validateEmail, password: (value) => (value ? null : "Add your password."), }, "sign-up": { email: validateEmail, name: (value) => (value.trim() ? null : "Add your name."), password: (value) => { if (value.length < MIN_PASSWORD) { return "At least 8 characters."; } return value.length > MAX_PASSWORD ? "At most 128 characters." : null; }, }, }; /* Per-mode copy: sentence case, no exclamation marks. */ const COPY: Record< AuthMode, { title: string; description: string; action: string; working: string } > = { reset: { action: "Send reset link", description: "Enter your email and we'll send you a reset link.", title: "Reset your password", working: "Sending…", }, "sign-in": { action: "Sign in", description: "Sign in to continue to your workspace.", title: "Welcome back", working: "Signing in…", }, "sign-up": { action: "Create account", description: "Start building on your own database.", title: "Create your account", working: "Creating account…", }, }; /* ───────────────────────────────────────────────────────── * ACTION STORYBOARD — "ignition" * * dormant ghost: hairline border, muted label — the form * hasn't earned the color yet * charged every visible field has content: the action * fills to neon on a 300ms ramp and a soft * primary glow blooms * press scale 0.98, 160ms — the interface is listening * busy the working label shimmers under lock * ───────────────────────────────────────────────────────── */ /* The charged CTA speaks through color and the sweep alone — no glow. */ const CTA_GLOW = ""; const AuthFormHeader = ({ description, error, mark, title, }: { description: string; error: string | null; mark?: ReactNode; title: string; }) => (

{mark ? ( {mark} ) : null}

{title}

{/* The form's voice: normally the pitch, on failure the verdict — swapped in place so the frame never moves. */}

{error ?? description}

); /** Divider, provider buttons, and the mode-swap footer. */ const FIELD_NAMES: Record = { reset: ["email"], "sign-in": ["email", "password"], "sign-up": ["name", "email", "password"], }; /** Header copy resolution: overrides win, then the face speaks. */ const headerCopy = ( copy: (typeof COPY)[AuthMode], sent: boolean, resetSentTo: string | null, title?: string, description?: string ) => ({ description: description ?? (sent ? `A reset link is on its way to ${resetSentTo}.` : copy.description), title: title ?? (sent ? "Check your email" : copy.title), }); /** The confirmation face: a drawn check and the way back. */ const ResetSentFace = ({ isBusy, onResend, }: { isBusy: boolean; onResend?: () => void; }) => (

{onResend ? ( ) : null}

); /* The footer swap per face: each mode offers the way back. */ const META_SWAP: Record = { reset: { ask: "Remembered it?", go: "Sign in", to: "sign-in" }, "sign-in": { ask: "New here?", go: "Create account", to: "sign-up" }, "sign-up": { ask: "Already have an account?", go: "Sign in", to: "sign-in" }, }; const AuthFormMeta = ({ isBusy, mode, onModeChange, onProvider, providers, }: { isBusy: boolean; mode: AuthMode; onModeChange?: (mode: AuthMode) => void; onProvider?: (id: string) => void; providers?: AuthProvider[]; }) => (

{providers?.length ? ( <>

{providers.map((provider) => ( ))}

) : null} {onModeChange ? (

{META_SWAP[mode].ask}{" "}

) : null}

); /* ───────────────────────────────────────────────────────── * STRENGTH STORYBOARD — sign-up password only * * The beam doubles as the meter: its reach grows with the * password and its color warms from destructive through * neutral to primary. The word ("weak" / "fair" / "strong") * rides the trailing slot — nothing changes height. * Scoring matches Better Auth's defaults (8–128 chars) as * the floor, then rewards mixed case, digits, symbols, and * length. * ───────────────────────────────────────────────────────── */ export interface StrengthMeter { label: string; ratio: number; tone: "weak" | "fair" | "strong"; } const METER_TONE: Record = { fair: "bg-foreground/50", strong: "bg-primary", weak: "bg-destructive", }; const METER_WORD: Record = { fair: "text-muted-foreground", strong: "text-primary", weak: "text-destructive", }; const STRENGTH_STEPS = 5; const FAIR_FLOOR = 2; const STRONG_FLOOR = 4; const LONG_PASSWORD = 12; export const scorePassword = (value: string): number => { let score = 0; if (value.length >= MIN_PASSWORD) { score += 1; } if (value.length >= LONG_PASSWORD) { score += 1; } if (/[a-z]/u.test(value) && /[A-Z]/u.test(value)) { score += 1; } if (/\d/u.test(value)) { score += 1; } if (/[^a-zA-Z0-9]/u.test(value)) { score += 1; } return score; }; export interface PasswordRequirement { label: string; met: boolean; } /** The checklist the popover renders while the password field is focused. */ const passwordRequirements = (value: string): PasswordRequirement[] => [ { label: "8+ characters", met: value.length >= MIN_PASSWORD }, { label: "upper & lower case", met: /[a-z]/u.test(value) && /[A-Z]/u.test(value), }, { label: "a number", met: /\d/u.test(value) }, { label: "a symbol", met: /[^a-zA-Z0-9]/u.test(value) }, ]; /** Null when empty — the meter only speaks once you've started. */ const strengthMeter = (value: string): StrengthMeter | null => { if (!value) { return null; } const score = scorePassword(value); let tone: StrengthMeter["tone"] = "weak"; if (score >= STRONG_FLOOR) { tone = "strong"; } else if (score >= FAIR_FLOOR) { tone = "fair"; } return { label: tone, ratio: tone === "strong" ? 1 : Math.max(score / STRENGTH_STEPS, 0.12), tone, }; }; const beamTone = ( error: string | null | undefined, meter: StrengthMeter | null | undefined ) => { // Invalid verdicts paint the whole box (see FIELD_INPUT usage); // the beam stands down instead of doubling the signal. if (error) { return "scale-x-0 bg-destructive"; } if (meter) { return METER_TONE[meter.tone]; } return "scale-x-0 bg-primary group-focus-within:scale-x-100"; }; /* ───────────────────────────────────────────────────────── * REQUIREMENTS POPOVER * * Portaled to the body and pinned to the input's rect (fixed * position, re-measured on scroll and resize), so it floats * above every sibling — no stacking context, not even the * charged CTA, can paint over it. Each rule flips * from a muted dot to a drawn primary check as the password * satisfies it. Floating, so nothing in the form shifts. * ───────────────────────────────────────────────────────── */ const RequirementsPopover = ({ anchor, requirements, }: { anchor: { current: HTMLInputElement | null }; requirements: PasswordRequirement[]; }) => { const [rect, setRect] = useState(null); useEffect(() => { const measure = () => { const el = anchor.current; if (el) { setRect(el.getBoundingClientRect()); } }; const frame = requestAnimationFrame(measure); window.addEventListener("scroll", measure, true); window.addEventListener("resize", measure); return () => { cancelAnimationFrame(frame); window.removeEventListener("scroll", measure, true); window.removeEventListener("resize", measure); }; }, [anchor]); if (!rect) { return null; } return createPortal( , document.body ); }; /* The field frame stays neutral in every state — the beam under the * input and the label carry the verdict. */ const FIELD_INPUT = "w-full rounded-md border border-border/60 bg-transparent px-3 py-2 text-base caret-primary sm:text-sm outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-border focus:border-border disabled:cursor-not-allowed disabled:opacity-60"; /** A verdict glyph that draws itself in, stroke first to last. */ const DrawnGlyph = ({ kind }: { kind: "check" | "cross" }) => ( ); /** One field: mono label slot that the verdict takes over in place, * a focus beam, and a drawn check or cross at the field edge. */ const AuthField = ({ autoComplete, delay, disabled, error, label, meter, name, onEdit, requirements, onLeave, placeholder, trailing, type, valid, }: { autoComplete: string; delay: number; disabled: boolean; error?: string | null; label: string; meter?: StrengthMeter | null; name: AuthFieldName; requirements?: PasswordRequirement[]; onEdit: (field: AuthFieldName) => void; onLeave: (field: AuthFieldName, value: string) => void; placeholder: string; trailing?: ReactNode; type: string; valid?: boolean; }) => { const messageId = useId(); const anchorRef = useRef(null); const [focused, setFocused] = useState(false); return ( {/* The label slot: the verdict takes it over in place — same row, same height, zero layout shift. */} {error ?? label} {trailing} ) => { setFocused(false); onLeave(name, event.target.value); }} onChange={() => onEdit(name)} onFocus={() => setFocused(true)} placeholder={placeholder} ref={anchorRef} type={type} /> {/* The beam: primary light sweeps in on focus; a verdict relights it in destructive and keeps it lit. With a strength meter, the beam's reach IS the reading. */} ); }; /** Sign up shows the strength reading; sign in shows the forgot link. */ const passwordTrailing = ( signUp: boolean, meter: StrengthMeter | null, onForgotPassword?: () => void ): ReactNode => { if (signUp) { return meter ? ( {meter.label} ) : undefined; } return onForgotPassword ? ( ) : undefined; }; /** The per-mode field stack; hidden (not unmounted) on the sent face. */ const AuthFormFields = ({ hidden, isBusy, meter, mode, onEdit, onForgotPassword, onLeave, requirements, verdictFor, }: { hidden: boolean; isBusy: boolean; meter: StrengthMeter | null; mode: AuthMode; onEdit: (field: AuthFieldName) => void; onForgotPassword?: () => void; onLeave: (field: AuthFieldName, value: string) => void; requirements?: PasswordRequirement[]; verdictFor: (field: AuthFieldName) => { error: string | null; valid: boolean; }; }) => { const signUp = mode === "sign-up"; const reset = mode === "reset"; return ( ); }; type Verdicts = Partial< Record >; /** Server verdicts pin first; local blur/submit verdicts follow. */ const resolveVerdict = ( field: AuthFieldName, verdicts: Verdicts, fieldErrors?: Partial> ) => { const server = fieldErrors?.[field]; const local = verdicts[field]; return { error: server ?? local?.error ?? null, valid: !server && local?.valid === true, }; }; /** The ignition action. */ const AuthFormAction = ({ charged, isBusy, label, working, }: { charged: boolean; isBusy: boolean; label: string; working: string; }) => (

); /** Judge every visible field at once; report the first failure. */ const judgeAll = ( rules: Partial>, fields: AuthFieldName[], data: FormData ) => { const verdicts: Verdicts = {}; let firstFailure: AuthFieldName | null = null; for (const field of fields) { const check = rules[field]; if (!check) { continue; } const value = String(data.get(field) ?? ""); const failure = check(value); verdicts[field] = { error: failure, valid: !failure && value.length > 0 }; if (failure && !firstFailure) { firstFailure = field; } } return { firstFailure, verdicts }; }; export const AuthForm = ({ className, description, error = null, fieldErrors, isBusy = false, mark, mode = "sign-in", onForgotPassword, onModeChange, onResend, onProvider, onSubmit, providers, resetSentTo = null, title, validators, variant = "card", ...props }: AuthFormProps) => { const copy = COPY[mode]; const signUp = mode === "sign-up"; const reset = mode === "reset"; const sent = reset && Boolean(resetSentTo); const rules = { ...VALIDATORS[mode], ...validators }; const [judged, setJudged] = useState<{ mode: AuthMode; verdicts: Verdicts }>({ mode, verdicts: {}, }); const [charged, setCharged] = useState(false); const [password, setPassword] = useState(""); // Render-time re-seed: flipping modes clears every verdict. if (judged.mode !== mode) { setJudged({ mode, verdicts: {} }); setCharged(false); setPassword(""); } const fieldNames = FIELD_NAMES[mode]; const verdictFor = (field: AuthFieldName) => resolveVerdict(field, judged.verdicts, fieldErrors); const judge = (field: AuthFieldName, value: string) => { const check = rules[field]; // Skipping past an empty field isn't a mistake yet — required // verdicts wait for submit. if (!(check && value)) { return; } const failure = check(value); setJudged((prev) => ({ mode, verdicts: { ...prev.verdicts, [field]: { error: failure, valid: !failure && value.length > 0 }, }, })); }; const clear = (field: AuthFieldName) => { setJudged((prev) => ({ mode, verdicts: { ...prev.verdicts, [field]: undefined }, })); }; /** The action charges once every visible field has content. */ const handleFormChange = (event: FormEvent) => { const data = new FormData(event.currentTarget); setCharged( fieldNames.every((field) => String(data.get(field) ?? "").length > 0) ); setPassword(String(data.get("password") ?? "")); }; const meter = signUp ? strengthMeter(password) : null; const requirements = signUp ? passwordRequirements(password) : undefined; const handleSubmit = (event: FormEvent) => { event.preventDefault(); if (isBusy) { return; } const form = event.currentTarget; const data = new FormData(form); const values: AuthFormValues = { email: String(data.get("email") ?? ""), password: String(data.get("password") ?? ""), ...(signUp && { name: String(data.get("name") ?? "") }), }; if (sent) { return; } // Judge everything at once; the first failure takes focus. const { firstFailure, verdicts } = judgeAll(rules, fieldNames, data); setJudged({ mode, verdicts }); if (firstFailure) { form.querySelector(`[name="${firstFailure}"]`)?.focus(); return; } onSubmit(values); }; return (

{/* The confirmation face: the fields yield — the form's work is done, the inbox's begins. */} {sent ? : null} {/* Fields crossfade when the mode flips, entering one at a time. */}