@braintwopoint0/playback-commons 0.2.3 → 0.2.5

package/dist/ui/index.js

@@ -2866,6 +2866,733 @@ function NewsletterForm2({
     }
   );
 }
+
+// src/ui/site-footer.tsx
+import Link3 from "next/link";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+var INK_MUTED = "rgba(214,213,201,0.64)";
+var INK_SUBTLE = "rgba(214,213,201,0.44)";
+var LINE = "rgba(214,213,201,0.08)";
+function FooterLinkItem2({ link }) {
+  const classes = "text-[14px] text-[rgba(214,213,201,0.64)] hover:text-[var(--timberwolf)] transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]";
+  if (link.external) {
+    return /* @__PURE__ */ jsx38(
+      "a",
+      {
+        href: link.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: classes,
+        children: link.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx38(Link3, { href: link.href, className: classes, children: link.label });
+}
+function SiteFooter({
+  columns,
+  siteName = "PLAYBACK",
+  newsletterEndpoint = "/api/newsletter/subscribe",
+  newsletterSource = "footer",
+  newsletterLabel = "Newsletter",
+  newsletterTitle = "Updates from the Network.",
+  newsletterSubtitle = "Only when relevant. No spam."
+}) {
+  return /* @__PURE__ */ jsxs22(
+    "footer",
+    {
+      id: "footer",
+      className: "mt-24 border-t bg-[var(--night)]",
+      style: { borderTopColor: LINE },
+      "aria-labelledby": "site-footer-heading",
+      children: [
+        /* @__PURE__ */ jsxs22("h2", { id: "site-footer-heading", className: "sr-only", children: [
+          siteName,
+          " site footer"
+        ] }),
+        /* @__PURE__ */ jsxs22("div", { className: "mx-auto max-w-[1400px] px-6 sm:px-10", children: [
+          /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-6 pt-16 pb-10 md:flex-row md:items-start md:justify-between md:gap-10 md:pt-20", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "max-w-[36ch]", children: [
+              /* @__PURE__ */ jsx38(
+                "p",
+                {
+                  className: "text-[11px] uppercase tracking-[0.22em] font-semibold",
+                  style: { color: INK_SUBTLE },
+                  children: newsletterLabel
+                }
+              ),
+              /* @__PURE__ */ jsx38("p", { className: "mt-3 text-[17px] md:text-[19px] leading-[1.35] tracking-[-0.01em] text-[var(--timberwolf)]", children: newsletterTitle }),
+              /* @__PURE__ */ jsx38(
+                "p",
+                {
+                  className: "mt-2 text-[13px] leading-[1.5]",
+                  style: { color: INK_MUTED },
+                  children: newsletterSubtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx38("div", { className: "w-full md:max-w-md md:pt-1", children: /* @__PURE__ */ jsx38(
+              NewsletterForm2,
+              {
+                endpoint: newsletterEndpoint,
+                source: newsletterSource
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx38("div", { className: "border-t py-14", style: { borderTopColor: LINE }, children: /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-2 gap-x-6 gap-y-10 md:grid-cols-4", children: columns.map((col) => /* @__PURE__ */ jsxs22("nav", { "aria-label": col.title, children: [
+            /* @__PURE__ */ jsx38(
+              "p",
+              {
+                className: "text-[12px] uppercase tracking-[0.14em] mb-4",
+                style: { color: INK_SUBTLE },
+                children: col.title
+              }
+            ),
+            /* @__PURE__ */ jsx38("ul", { className: "flex flex-col gap-3", children: col.links.map((link) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(FooterLinkItem2, { link }) }, `${col.title}-${link.label}`)) })
+          ] }, col.title)) }) }),
+          /* @__PURE__ */ jsx38(FooterCreditsBar, {})
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/sign-in-form.tsx
+import * as React28 from "react";
+import Link4 from "next/link";
+import {
+  AlertCircle,
+  Eye,
+  EyeOff,
+  Loader2,
+  Lock,
+  Mail
+} from "lucide-react";
+
+// src/auth/shared.ts
+function validateEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+function validatePassword(password) {
+  const errors = [];
+  if (password.length < 8) {
+    errors.push("Password must be at least 8 characters long");
+  }
+  if (!/(?=.*[a-z])/.test(password)) {
+    errors.push("Password must contain at least one lowercase letter");
+  }
+  if (!/(?=.*[A-Z])/.test(password)) {
+    errors.push("Password must contain at least one uppercase letter");
+  }
+  if (!/(?=.*\d)/.test(password)) {
+    errors.push("Password must contain at least one number");
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+function getAuthErrorMessage(error) {
+  if (!error) return "An unknown error occurred";
+  const message = error.message || error.error_description || error.toString();
+  const errorMappings = {
+    "Invalid login credentials": "Invalid email or password. Please check your credentials and try again.",
+    "Email not confirmed": "Please check your email and click the confirmation link before signing in.",
+    "User already registered": "An account with this email address already exists. Please sign in instead.",
+    "Password should be at least 6 characters": "Password must be at least 6 characters long.",
+    "Signup requires a valid password": "Please provide a valid password.",
+    "Invalid email": "Please provide a valid email address.",
+    "Email rate limit exceeded": "Too many emails sent. Please wait before requesting another.",
+    'duplicate key value violates unique constraint "profiles_username_key"': "This username is already taken. Please choose a different username."
+  };
+  return errorMappings[message] || message;
+}
+
+// src/supabase/client.ts
+import { createBrowserClient } from "@supabase/ssr";
+function createClient() {
+  const cookieDomain = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    {
+      ...cookieDomain && {
+        cookieOptions: { domain: cookieDomain }
+      }
+    }
+  );
+}
+
+// src/ui/sign-in-form.tsx
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+var COOLDOWN_THRESHOLD = 3;
+var COOLDOWN_DURATION_MS = 3e4;
+function SignInForm({
+  onSuccess,
+  forgotPasswordHref,
+  signUpHref,
+  initialError,
+  emailPlaceholder = "you@example.com",
+  title = "Welcome back",
+  subtitle = "Sign in to access your account"
+}) {
+  const [email, setEmail] = React28.useState("");
+  const [password, setPassword] = React28.useState("");
+  const [showPassword, setShowPassword] = React28.useState(false);
+  const [error, setError] = React28.useState(initialError ?? "");
+  const [loading, setLoading] = React28.useState(false);
+  const [consecutiveErrors, setConsecutiveErrors] = React28.useState(0);
+  const [cooldownUntil, setCooldownUntil] = React28.useState(null);
+  const [supabase] = React28.useState(() => createClient());
+  React28.useEffect(() => {
+    if (initialError) setError(initialError);
+  }, [initialError]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (cooldownUntil && Date.now() < cooldownUntil) {
+      const secondsLeft = Math.ceil((cooldownUntil - Date.now()) / 1e3);
+      setError(`Too many attempts. Please wait ${secondsLeft} seconds.`);
+      return;
+    }
+    if (!email || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+    if (!validateEmail(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+    setLoading(true);
+    try {
+      const { error: signInError } = await supabase.auth.signInWithPassword({
+        email,
+        password
+      });
+      if (signInError) {
+        setError(getAuthErrorMessage(signInError));
+        const newCount = consecutiveErrors + 1;
+        setConsecutiveErrors(newCount);
+        if (newCount >= COOLDOWN_THRESHOLD) {
+          setCooldownUntil(Date.now() + COOLDOWN_DURATION_MS);
+          setConsecutiveErrors(0);
+        }
+      } else {
+        setConsecutiveErrors(0);
+        setCooldownUntil(null);
+        onSuccess?.(email);
+      }
+    } catch {
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs23("div", { className: "bg-card border border-border rounded-xl p-8 space-y-6", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx39("h1", { className: "text-2xl font-bold text-[var(--timberwolf)] mb-2", children: title }),
+      /* @__PURE__ */ jsx39("p", { className: "text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs23("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      error && /* @__PURE__ */ jsx39(
+        "div",
+        {
+          id: "signin-error",
+          role: "alert",
+          "aria-live": "polite",
+          className: "bg-red-900/20 border border-red-700/30 rounded-lg p-3",
+          children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-red-400 text-sm", children: [
+            /* @__PURE__ */ jsx39(AlertCircle, { className: "h-4 w-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsx39("span", { children: error })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx39(Label, { htmlFor: "email", className: "text-[var(--timberwolf)]", children: "Email" }),
+        /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx39(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              placeholder: emailPlaceholder,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              className: "h-11 pl-10",
+              disabled: loading,
+              autoComplete: "email",
+              "aria-invalid": !!error,
+              "aria-describedby": error ? "signin-error" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx39(Mail, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx39(Label, { htmlFor: "password", className: "text-[var(--timberwolf)]", children: "Password" }),
+        /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx39(
+            Input,
+            {
+              id: "password",
+              type: showPassword ? "text" : "password",
+              placeholder: "Enter your password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              className: "h-11 pl-10 pr-10",
+              disabled: loading,
+              autoComplete: "current-password",
+              "aria-invalid": !!error,
+              "aria-describedby": error ? "signin-error" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx39(Lock, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx39(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword((prev) => !prev),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-[var(--timberwolf)]",
+              disabled: loading,
+              "aria-label": showPassword ? "Hide password" : "Show password",
+              "aria-pressed": showPassword,
+              children: showPassword ? /* @__PURE__ */ jsx39(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx39(Eye, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] }),
+      forgotPasswordHref ? /* @__PURE__ */ jsx39("div", { className: "flex justify-end -mt-1", children: /* @__PURE__ */ jsx39(
+        Link4,
+        {
+          href: forgotPasswordHref,
+          className: "text-xs text-muted-foreground hover:text-[var(--timberwolf)] transition-colors",
+          children: "Forgot your password?"
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsx39(
+        Button,
+        {
+          type: "submit",
+          className: "w-full h-11 bg-[var(--timberwolf)] text-[var(--night)] hover:bg-[var(--ash-grey)]",
+          disabled: loading,
+          children: loading ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
+            /* @__PURE__ */ jsx39(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+            "Signing in..."
+          ] }) : "Sign in"
+        }
+      )
+    ] }),
+    signUpHref ? /* @__PURE__ */ jsx39("div", { className: "text-center text-sm", children: /* @__PURE__ */ jsxs23("p", { className: "text-muted-foreground", children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsx39(
+        Link4,
+        {
+          href: signUpHref,
+          className: "text-[var(--timberwolf)] hover:underline",
+          children: "Sign up"
+        }
+      )
+    ] }) }) : null
+  ] });
+}
+
+// src/ui/forgot-password-form.tsx
+import * as React29 from "react";
+import Link5 from "next/link";
+import {
+  AlertCircle as AlertCircle2,
+  ArrowLeft,
+  CheckCircle,
+  Loader2 as Loader22,
+  Mail as Mail2
+} from "lucide-react";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+var RESEND_COOLDOWN_MS = 3e4;
+var COOLDOWN_STORAGE_KEY = "playback:pwreset-cooldown-until";
+function ForgotPasswordForm({
+  redirectTo,
+  loginHref = "/auth/login",
+  title = "Forgot password?",
+  subtitle = "Enter your email and we'll send you a reset link."
+}) {
+  const [email, setEmail] = React29.useState("");
+  const [error, setError] = React29.useState("");
+  const [loading, setLoading] = React29.useState(false);
+  const [emailSent, setEmailSent] = React29.useState(false);
+  const [cooldownUntil, setCooldownUntilState] = React29.useState(
+    null
+  );
+  const [now, setNow] = React29.useState(() => Date.now());
+  const [supabase] = React29.useState(() => createClient());
+  const setCooldownUntil = (value) => {
+    setCooldownUntilState(value);
+    if (typeof window === "undefined") return;
+    if (value === null) {
+      window.sessionStorage.removeItem(COOLDOWN_STORAGE_KEY);
+    } else {
+      window.sessionStorage.setItem(COOLDOWN_STORAGE_KEY, String(value));
+    }
+  };
+  React29.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const stored = window.sessionStorage.getItem(COOLDOWN_STORAGE_KEY);
+    if (!stored) return;
+    const parsed = Number(stored);
+    if (!Number.isFinite(parsed) || parsed <= Date.now()) {
+      window.sessionStorage.removeItem(COOLDOWN_STORAGE_KEY);
+      return;
+    }
+    setCooldownUntilState(parsed);
+  }, []);
+  React29.useEffect(() => {
+    if (!cooldownUntil) return;
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [cooldownUntil]);
+  const cooldownSecondsLeft = cooldownUntil && cooldownUntil > now ? Math.ceil((cooldownUntil - now) / 1e3) : 0;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (cooldownSecondsLeft > 0) {
+      setError(`Please wait ${cooldownSecondsLeft} seconds before resending.`);
+      return;
+    }
+    if (!email) {
+      setError("Please enter your email address");
+      return;
+    }
+    if (!validateEmail(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+    setLoading(true);
+    try {
+      const { error: resetError } = await supabase.auth.resetPasswordForEmail(
+        email,
+        { redirectTo }
+      );
+      if (resetError) {
+        setError(getAuthErrorMessage(resetError));
+      } else {
+        setEmailSent(true);
+        setCooldownUntil(Date.now() + RESEND_COOLDOWN_MS);
+      }
+    } catch {
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (emailSent) {
+    return /* @__PURE__ */ jsxs24("div", { className: "bg-card border border-border rounded-xl p-8 space-y-6 text-center", children: [
+      /* @__PURE__ */ jsx40("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx40("div", { className: "h-12 w-12 rounded-full bg-[var(--timberwolf)]/10 border border-[var(--timberwolf)]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx40(CheckCircle, { className: "h-6 w-6 text-[var(--timberwolf)]" }) }) }),
+      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx40("h1", { className: "text-2xl font-bold text-[var(--timberwolf)]", children: "Check your email" }),
+        /* @__PURE__ */ jsxs24("p", { className: "text-sm text-muted-foreground", children: [
+          "We sent a reset link to",
+          " ",
+          /* @__PURE__ */ jsx40("span", { className: "text-[var(--timberwolf)] font-medium", children: email }),
+          ". If it's not in your inbox, check spam."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs24("div", { className: "space-y-3 pt-2", children: [
+        /* @__PURE__ */ jsx40(
+          Button,
+          {
+            onClick: () => {
+              setEmailSent(false);
+              setEmail("");
+              setError("");
+            },
+            variant: "outline",
+            className: "w-full h-11",
+            disabled: cooldownSecondsLeft > 0,
+            children: cooldownSecondsLeft > 0 ? `Send another email in ${cooldownSecondsLeft}s` : "Send another email"
+          }
+        ),
+        /* @__PURE__ */ jsx40(Link5, { href: loginHref, className: "block", children: /* @__PURE__ */ jsxs24(Button, { className: "w-full h-11 bg-[var(--timberwolf)] text-[var(--night)] hover:bg-[var(--ash-grey)]", children: [
+          /* @__PURE__ */ jsx40(ArrowLeft, { className: "h-4 w-4 mr-2" }),
+          "Back to sign in"
+        ] }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs24("div", { className: "bg-card border border-border rounded-xl p-8 space-y-6", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx40("h1", { className: "text-2xl font-bold text-[var(--timberwolf)] mb-2", children: title }),
+      /* @__PURE__ */ jsx40("p", { className: "text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs24("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      error && /* @__PURE__ */ jsx40(
+        "div",
+        {
+          id: "forgot-error",
+          role: "alert",
+          "aria-live": "polite",
+          className: "bg-red-900/20 border border-red-700/30 rounded-lg p-3",
+          children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 text-red-400 text-sm", children: [
+            /* @__PURE__ */ jsx40(AlertCircle2, { className: "h-4 w-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { children: error })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx40(Label, { htmlFor: "email", className: "text-[var(--timberwolf)]", children: "Email" }),
+        /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx40(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              placeholder: "you@example.com",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              className: "h-11 pl-10",
+              disabled: loading,
+              autoComplete: "email",
+              autoFocus: true,
+              "aria-invalid": !!error,
+              "aria-describedby": error ? "forgot-error" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx40(Mail2, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx40(
+        Button,
+        {
+          type: "submit",
+          className: "w-full h-11 bg-[var(--timberwolf)] text-[var(--night)] hover:bg-[var(--ash-grey)]",
+          disabled: loading || cooldownSecondsLeft > 0,
+          children: loading ? /* @__PURE__ */ jsxs24(Fragment7, { children: [
+            /* @__PURE__ */ jsx40(Loader22, { className: "h-4 w-4 mr-2 animate-spin" }),
+            "Sending email..."
+          ] }) : cooldownSecondsLeft > 0 ? `Try again in ${cooldownSecondsLeft}s` : "Send reset link"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx40("div", { className: "text-center text-sm", children: /* @__PURE__ */ jsxs24(
+      Link5,
+      {
+        href: loginHref,
+        className: "inline-flex items-center gap-1.5 text-muted-foreground hover:text-[var(--timberwolf)] transition-colors",
+        children: [
+          /* @__PURE__ */ jsx40(ArrowLeft, { className: "h-3.5 w-3.5" }),
+          "Back to sign in"
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/ui/reset-password-form.tsx
+import * as React30 from "react";
+import Link6 from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  AlertCircle as AlertCircle3,
+  CheckCircle as CheckCircle2,
+  Eye as Eye2,
+  EyeOff as EyeOff2,
+  Loader2 as Loader23,
+  Lock as Lock2
+} from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+function ResetPasswordForm({
+  loginHref = "/auth/login",
+  initialError,
+  redirectDelayMs = 3e3,
+  title = "Reset password",
+  subtitle = "Enter a new password for your account."
+}) {
+  const [password, setPassword] = React30.useState("");
+  const [confirmPassword, setConfirmPassword] = React30.useState("");
+  const [showPassword, setShowPassword] = React30.useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = React30.useState(false);
+  const [error, setError] = React30.useState(initialError ?? "");
+  const [loading, setLoading] = React30.useState(false);
+  const [passwordReset, setPasswordReset] = React30.useState(false);
+  const router = useRouter();
+  const [supabase] = React30.useState(() => createClient());
+  React30.useEffect(() => {
+    if (initialError) setError(initialError);
+  }, [initialError]);
+  React30.useEffect(() => {
+    if (!passwordReset) return;
+    const id = setTimeout(() => {
+      router.push(loginHref);
+    }, redirectDelayMs);
+    return () => clearTimeout(id);
+  }, [passwordReset, router, loginHref, redirectDelayMs]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (!password || !confirmPassword) {
+      setError("Please fill in both fields");
+      return;
+    }
+    const { isValid, errors } = validatePassword(password);
+    if (!isValid) {
+      setError(errors[0]);
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    try {
+      const { error: updateError } = await supabase.auth.updateUser({
+        password
+      });
+      if (updateError) {
+        setError(getAuthErrorMessage(updateError));
+      } else {
+        try {
+          await supabase.auth.signOut({ scope: "global" });
+        } catch (signOutError) {
+          console.warn(
+            "[ResetPasswordForm] global sign-out failed after successful update",
+            signOutError
+          );
+        }
+        setPasswordReset(true);
+      }
+    } catch {
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (passwordReset) {
+    return /* @__PURE__ */ jsxs25("div", { className: "bg-card border border-border rounded-xl p-8 space-y-6 text-center", children: [
+      /* @__PURE__ */ jsx41("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx41("div", { className: "h-12 w-12 rounded-full bg-[var(--timberwolf)]/10 border border-[var(--timberwolf)]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx41(CheckCircle2, { className: "h-6 w-6 text-[var(--timberwolf)]" }) }) }),
+      /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx41("h1", { className: "text-2xl font-bold text-[var(--timberwolf)]", children: "Password updated" }),
+        /* @__PURE__ */ jsx41("p", { className: "text-sm text-muted-foreground", children: "Redirecting you to sign in\u2026" })
+      ] }),
+      /* @__PURE__ */ jsx41(Link6, { href: loginHref, className: "block pt-2", children: /* @__PURE__ */ jsx41(Button, { className: "w-full h-11 bg-[var(--timberwolf)] text-[var(--night)] hover:bg-[var(--ash-grey)]", children: "Continue to sign in" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs25("div", { className: "bg-card border border-border rounded-xl p-8 space-y-6", children: [
+    /* @__PURE__ */ jsxs25("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx41("h1", { className: "text-2xl font-bold text-[var(--timberwolf)] mb-2", children: title }),
+      /* @__PURE__ */ jsx41("p", { className: "text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs25("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      error && /* @__PURE__ */ jsx41(
+        "div",
+        {
+          id: "reset-error",
+          role: "alert",
+          "aria-live": "polite",
+          className: "bg-red-900/20 border border-red-700/30 rounded-lg p-3",
+          children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-red-400 text-sm", children: [
+            /* @__PURE__ */ jsx41(AlertCircle3, { className: "h-4 w-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsx41("span", { children: error })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx41(Label, { htmlFor: "password", className: "text-[var(--timberwolf)]", children: "New password" }),
+        /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx41(
+            Input,
+            {
+              id: "password",
+              type: showPassword ? "text" : "password",
+              placeholder: "Enter a new password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              className: "h-11 pl-10 pr-10",
+              disabled: loading,
+              autoComplete: "new-password",
+              autoFocus: true,
+              "aria-invalid": !!error,
+              "aria-describedby": error ? "reset-error" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx41(Lock2, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx41(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPassword((prev) => !prev),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-[var(--timberwolf)]",
+              disabled: loading,
+              "aria-label": showPassword ? "Hide password" : "Show password",
+              "aria-pressed": showPassword,
+              children: showPassword ? /* @__PURE__ */ jsx41(EyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx41(Eye2, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx41(
+          Label,
+          {
+            htmlFor: "confirmPassword",
+            className: "text-[var(--timberwolf)]",
+            children: "Confirm new password"
+          }
+        ),
+        /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx41(
+            Input,
+            {
+              id: "confirmPassword",
+              type: showConfirmPassword ? "text" : "password",
+              placeholder: "Re-enter your new password",
+              value: confirmPassword,
+              onChange: (e) => setConfirmPassword(e.target.value),
+              className: "h-11 pl-10 pr-10",
+              disabled: loading,
+              autoComplete: "new-password",
+              "aria-invalid": !!error,
+              "aria-describedby": error ? "reset-error" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx41(Lock2, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx41(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowConfirmPassword((prev) => !prev),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-[var(--timberwolf)]",
+              disabled: loading,
+              "aria-label": showConfirmPassword ? "Hide password" : "Show password",
+              "aria-pressed": showConfirmPassword,
+              children: showConfirmPassword ? /* @__PURE__ */ jsx41(EyeOff2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx41(Eye2, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx41("p", { className: "text-xs text-muted-foreground", children: "At least 8 characters with an uppercase letter, a lowercase letter, and a number." }),
+      /* @__PURE__ */ jsx41(
+        Button,
+        {
+          type: "submit",
+          className: "w-full h-11 bg-[var(--timberwolf)] text-[var(--night)] hover:bg-[var(--ash-grey)]",
+          disabled: loading,
+          children: loading ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+            /* @__PURE__ */ jsx41(Loader23, { className: "h-4 w-4 mr-2 animate-spin" }),
+            "Updating password..."
+          ] }) : "Update password"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx41("div", { className: "text-center text-sm", children: /* @__PURE__ */ jsx41(
+      Link6,
+      {
+        href: loginHref,
+        className: "text-muted-foreground hover:text-[var(--timberwolf)] transition-colors",
+        children: "Back to sign in"
+      }
+    ) })
+  ] });
+}
 export {
   AnimatedTooltip,
   Avatar,
@@ -2909,6 +3636,7 @@ export {
   FlipWords,
   Footer,
   FooterCreditsBar,
+  ForgotPasswordForm,
   HeroHighlight,
   Highlight,
   HoverCard,
@@ -2924,6 +3652,7 @@ export {
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  ResetPasswordForm,
   SearchBar,
   SectionCard,
   Select,
@@ -2947,6 +3676,8 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  SignInForm,
+  SiteFooter,
   Skeleton,
   StatsGrid,
   Switch,