65:I[8513,["/_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"],"ScrollBar"] 71: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"] 53:["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.56 0.21 300)"}}],["$","p",null,{"children":"oklch(0.56 0.21 300)"}]]}]}]]}] 54:["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 55:["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 56:["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.3 0.03 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.3 0.03 285 / 10%)"}]]}]}]]}] 57:["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-depth",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.32 0.03 285 / 20%)"}}],["$","p",null,{"children":"oklch(0.32 0.03 285 / 20%)"}]]}]}]]}] 58:["$","div","gloss-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 10%)"}]]}]}]]}] 59:["$","div","liquid-tint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-tint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 18%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 18%)"}]]}]}]]}] 5a:["$","div","liquid-fallback",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-fallback",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5b:["$","div","liquid-rim",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-rim",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 5c:["$","div","liquid-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.2 0.02 285 / 10%)"}]]}]}]]}] 5d:["$","div","liquid-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 26%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 26%)"}]]}]}]]}] 5e:["$","div","liquid-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5f:["$","div","liquid-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.25 0.03 285 / 14%)"}}],["$","p",null,{"children":"oklch(0.25 0.03 285 / 14%)"}]]}]}]]}] 60:["$","$L65",null,{"orientation":"horizontal"}] 61:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.8 0.16 55)"}}],["$","p",null,{"children":"oklch(0.8 0.16 55)"}]]}]}]]}],["$","div","glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.05 40)"}}],["$","p",null,{"children":"oklch(0.22 0.05 40)"}]]}]}]]}],["$","div","glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.7 0.2 15)"}}],["$","p",null,{"children":"oklch(0.7 0.2 15)"}]]}]}]]}],["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.2 300)"}}],["$","p",null,{"children":"oklch(0.65 0.2 300)"}]]}]}]]}],["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.19 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(0.19 0 0 / 55%)"}]]}]}]]}],["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 16%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 16%)"}]]}]}]]}],["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0 0 0 / 30%)"}}],["$","p",null,{"children":"oklch(0 0 0 / 30%)"}]]}]}]]}],["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":"$L66"}],"$L67"]}],"$L68","$L69","$L6a","$L6b","$L6c","$L6d","$L6e","$L6f"]}],"$L70"]}]}]]}] 62:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow)"}]]}],["$","div","color-glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-foreground)"}]]}],["$","div","color-glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-2)"}]]}],["$","div","color-glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-3)"}]]}],["$","div","color-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glass)"}]]}],["$","div","color-gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--gloss-highlight)"}]]}],["$","div","shadow-gloss",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-gloss",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -1px 0 0 var(--gloss-shade), 0 0 0 1px var(--gloss-edge), 0 1px 2px 0 var(--gloss-depth), 0 4px 12px -4px var(--gloss-depth)"}]]}],["$","div","shadow-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -10px 24px -18px var(--gloss-shade), inset 0 0 0 1px var(--gloss-edge), 0 2px 6px -1px var(--gloss-depth), 0 18px 40px -12px var(--gloss-depth)"}]]}],["$","div","shadow-well",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-well",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 3px 0 var(--gloss-depth), inset 0 0 0 1px var(--gloss-edge), 0 1px 0 0 var(--gloss-highlight)"}]]}]]}],["$","$L65",null,{"orientation":"horizontal"}]]}]}]]}] 63:null 72:T2809,"use client" import * as React from "react" import { Check } from "@/components/animate-ui/icons/check" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { AfterglowMark, Field, GitHubMark, GoogleMark, SubmitLabel, checkEmail, useSubmit, type Provider, } from "@/components/ui/auth-parts" import { LiquidGlass } from "@/components/ui/liquid-glass" import { cn } from "@/lib/utils" type Credentials = { email: string; password: string } type AuthGlassProps = { onSubmit?: (values: Credentials) => Promise | void onProvider?: (provider: Provider) => void /** what the glass sits on; defaults to layered dusk waves */ background?: React.ReactNode className?: string } // back to front: each wave is lit along its crest and darker below const waves = [ "M0 330C260 270 470 280 720 330S1190 420 1440 320V900H0Z", "M0 450C300 380 560 400 820 460S1250 530 1440 430V900H0Z", "M0 560C250 500 590 590 900 545S1290 480 1440 540V900H0Z", "M0 670C320 630 650 700 960 655S1320 610 1440 660V900H0Z", "M0 790C360 745 760 800 1100 765S1390 755 1440 775V900H0Z", ] function Waves() { // unique gradient ids, so two scenes on one page don't share them const id = React.useId().replace(/[^\w-]/g, "") return ( ) } const well = "h-11 rounded-[14px] border-foreground/12 bg-foreground/[0.06] shadow-[inset_0_1px_2px_oklch(0_0_0/18%)] focus-within:border-foreground/30 focus-within:ring-foreground/10" const quiet = "inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-full border border-foreground/12 bg-foreground/[0.06] text-[13px] font-medium shadow-[inset_0_1px_0_oklch(1_0_0/18%)] transition-[background-color,scale] duration-150 ease-out motion-reduce:transition-none outline-none hover:bg-foreground/[0.1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground/40 motion-safe:active:scale-[0.98] [&_svg]:size-4" // a pane of clear glass over dusk waves; its curved rim bends the crests behind it export function AuthGlass({ onSubmit, onProvider, background, className }: AuthGlassProps) { const reduceMotion = useReducedMotion() const { status, error, run } = useSubmit(onSubmit) const [errors, setErrors] = React.useState<{ email?: string; password?: string }>({}) function handleSubmit(event: React.FormEvent) { event.preventDefault() const data = new FormData(event.currentTarget) const email = String(data.get("email") ?? "") const password = String(data.get("password") ?? "") const next = { email: checkEmail(email), password: password ? undefined : "Enter your password.", } setErrors(next) if (next.email || next.password) return run({ email: email.trim(), password }) } const swap = { initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.97, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: 0.12 } }, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] as const }, } return (

{background ?? } {status === "done" ? (

You’re in

Opening your workspace…

) : (

Sign in to Afterglow

Welcome back. Pick up where you left off.

)}

) } 73:T310d,"use client" import * as React from "react" import { isMotionValue, motion, useMotionValue, useTransform, type MotionValue, } from "motion/react" import { ringMask } from "@/lib/afterglow" import { cn } from "@/lib/utils" /* * Liquid glass: a pane that bends whatever sits behind it, like Apple's * Liquid Glass. The rim is a curved lens, so content near the edges is * pulled inward, while the flat middle stays clear. * * Refraction is an SVG displacement map used as a backdrop-filter, which only * Chromium supports. Other browsers get a frosted fallback with the same rim. */ const SAMPLES = 128 const INDEX_OF_REFRACTION = 1.5 // convex squircle: flat in the middle, rounding off toward the rim const surface = (x: number) => Math.pow(1 - Math.pow(1 - x, 4), 0.25) // how far a straight-down ray is bent sideways at each point across the rim function rimProfile(bezel: number) { const profile = new Float32Array(SAMPLES) for (let i = 0; i < SAMPLES; i++) { const x = i / (SAMPLES - 1) const a = Math.max(x - 0.001, 0) const b = Math.min(x + 0.001, 1) const slope = (surface(b) - surface(a)) / (b - a) const incident = Math.atan(slope) const refracted = Math.asin(Math.sin(incident) / INDEX_OF_REFRACTION) const thickness = bezel * (0.25 + surface(x)) profile[i] = thickness * Math.tan(incident - refracted) } return profile } type DisplacementMap = { url: string; scale: number } const maps = new Map() function displacementMap( width: number, height: number, radius: number, bezel: number, magnify: number ): DisplacementMap { const key = [width, height, radius, bezel, magnify].join(":") const cached = maps.get(key) if (cached) return cached const profile = rimProfile(bezel) const dx = new Float32Array(width * height) const dy = new Float32Array(width * height) let max = 0 for (let j = 0; j < height; j++) { for (let i = 0; i < width; i++) { // signed distance to a rounded rectangle, and the outward normal const px = i + 0.5 - width / 2 const py = j + 0.5 - height / 2 const qx = Math.abs(px) - width / 2 + radius const qy = Math.abs(py) - height / 2 + radius const inside = -(Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - radius) let nx = 0 let ny = 0 if (qx > 0 && qy > 0) { const length = Math.hypot(qx, qy) || 1 nx = (qx / length) * Math.sign(px) ny = (qy / length) * Math.sign(py) } else if (qx > qy) nx = Math.sign(px) else ny = Math.sign(py) let x = -px * magnify let y = -py * magnify if (inside >= 0 && inside < bezel) { // sample inward, so the rim shows what's just inside the edge const shift = profile[Math.round((inside / bezel) * (SAMPLES - 1))] x -= nx * shift y -= ny * shift } const k = j * width + i dx[k] = x dy[k] = y max = Math.max(max, Math.abs(x), Math.abs(y)) } } const canvas = document.createElement("canvas") canvas.width = width canvas.height = height const context = canvas.getContext("2d") if (!context) return { url: "", scale: 0 } const image = context.createImageData(width, height) for (let k = 0; k < width * height; k++) { // 128 is "no shift"; red moves along x, green along y image.data[k * 4] = 128 + (dx[k] / (max || 1)) * 127 image.data[k * 4 + 1] = 128 + (dy[k] / (max || 1)) * 127 image.data[k * 4 + 2] = 128 image.data[k * 4 + 3] = 255 } context.putImageData(image, 0, 0) const map = { url: canvas.toDataURL(), scale: max * 2 } if (maps.size > 48) maps.delete(maps.keys().next().value!) maps.set(key, map) return map } // only Chromium can use an SVG filter as a backdrop-filter function canRefract() { const nav = navigator as Navigator & { userAgentData?: { brands: { brand: string }[] } } if (nav.userAgentData) { return nav.userAgentData.brands.some((b) => b.brand === "Chromium") } return /Chrome\/\d+/.test(nav.userAgent) && !/Firefox|FxiOS/.test(nav.userAgent) } const noopSubscribe = () => () => {} function useCanRefract() { return React.useSyncExternalStore(noopSubscribe, canRefract, () => false) } type LiquidGlassProps = React.ComponentProps<"div"> & { /** width of the curved rim in px, defaults to the corner radius (max 24) */ bezel?: number /** 0 is flat glass, 1 is the full lens; pass a motion value to animate it */ refraction?: number | MotionValue /** zooms the middle like a magnifier, 0 to 0.3 */ magnify?: number /** blur behind the glass in px */ frost?: number /** a color mixed over the glass, e.g. for a tinted primary button */ tint?: string /** * fades the whole pane in and out. Never fade a parent of liquid glass * instead: an ancestor with opacity cuts the glass off from what's behind it. */ presence?: number | MotionValue } function LiquidGlass({ bezel, refraction = 1, magnify = 0, frost = 1, tint, presence = 1, className, children, ...props }: LiquidGlassProps) { const ref = React.useRef(null) const displaceRef = React.useRef(null) const id = `liquid-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}` const canRefractHere = useCanRefract() // A fixed zero opts out of SVG backdrop sampling entirely. Native frosting avoids // clipped-backdrop seams when flat panes overlap and change stacking order. // Motion values still keep the map ready so they can animate away from zero. const refract = canRefractHere && (typeof refraction !== "number" || refraction > 0) const [shape, setShape] = React.useState<{ w: number; h: number; r: number }>() // the scale last written to the filter, so a no-op resize can put it back const applied = React.useRef(0) React.useEffect(() => { const node = ref.current if (!node || !refract) return const measure = () => { const w = Math.round(node.offsetWidth) const h = Math.round(node.offsetHeight) const raw = getComputedStyle(node).borderTopLeftRadius const value = parseFloat(raw) || 0 const r = Math.round( Math.min(raw.endsWith("%") ? (value / 100) * Math.min(w, h) : value, w / 2, h / 2) ) setShape((prev) => { if (prev?.w === w && prev.h === h && prev.r === r) { displaceRef.current?.setAttribute("scale", String(applied.current)) return prev } return { w, h, r } }) } // measure right away, then wait for resizing to settle before rebuilding the map let first = true let frame = 0 let timer = 0 const observer = new ResizeObserver(() => { if (first) { first = false measure() return } // until the new map is ready, the old one would bend the wrong pixels displaceRef.current?.setAttribute("scale", "0") window.clearTimeout(timer) timer = window.setTimeout(() => { frame = requestAnimationFrame(measure) }, 100) }) observer.observe(node) return () => { observer.disconnect() window.clearTimeout(timer) cancelAnimationFrame(frame) } }, [refract]) const map = React.useMemo(() => { if (!refract || !shape || shape.w < 2 || shape.h < 2) return undefined const rim = Math.max(1, Math.min(bezel ?? Math.min(shape.r, 24), shape.w / 2, shape.h / 2)) return displacementMap(shape.w, shape.h, shape.r, Math.round(rim), magnify) }, [bezel, magnify, refract, shape]) // animate refraction by scaling the filter, without rebuilding the map React.useEffect(() => { if (!map) return const apply = (v: number) => { applied.current = map.scale * v displaceRef.current?.setAttribute("scale", String(applied.current)) } if (typeof refraction === "number") { apply(refraction) return } apply(refraction.get()) return refraction.on("change", apply) }, [map, refraction]) const ownPresence = useMotionValue(isMotionValue(presence) ? 1 : presence) const visible = isMotionValue(presence) ? presence : ownPresence React.useEffect(() => { if (!isMotionValue(presence)) ownPresence.set(presence) }, [ownPresence, presence]) const rimOpacity = useTransform(visible, (v) => v * 0.95) const strength = isMotionValue(refraction) ? refraction.get() : refraction const backdrop = map ? `url(#${id})` : `blur(${Math.max(frost, 10)}px) saturate(1.6)` return (

:where(:not([data-glass-layer]))]:relative", className)} {...props} > {map && ( )} {/* tint, heavier when there's no refraction so text stays legible */} {/* volume: light gathers inside the top edge, shade settles along the bottom */} {/* rim light: bright where the light comes from (top left), softer opposite */} {children}

) } export { LiquidGlass, useCanRefract, type LiquidGlassProps } 74:T2535,"use client" import * as React from "react" import { Eye, EyeOff, KeyRound } from "lucide-react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { Fingerprint } from "@/components/animate-ui/icons/fingerprint" import { LoaderCircle as Loader2 } from "@/components/animate-ui/icons/loader-circle" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* Shared pieces for the auth blocks: brand marks, provider buttons, fields, a divider and a small hook that runs a submit with loading and error states. */ function GoogleMark({ mono = false, ...props }: React.ComponentProps<"svg"> & { mono?: boolean }) { // mono draws the G in the current text color, for quiet monochrome buttons const fill = (color: string) => (mono ? "currentColor" : color) return ( ) } // the afterglow mark: a sun setting on the horizon, centered in its 24px box function AfterglowMark(props: React.ComponentProps<"svg">) { return ( ) } function GitHubMark(props: React.ComponentProps<"svg">) { return ( ) } const providers = { google: { label: "Google", icon: }, github: { label: "GitHub", icon: }, sso: { label: "SSO", icon: }, passkey: { label: "passkey", icon: }, } type Provider = keyof typeof providers type ProviderButtonProps = Omit, "children"> & { provider: Provider /** "Continue with", "Log in with"… */ verb?: string /** a small "Last used" badge in the corner */ lastUsed?: boolean } function ProviderButton({ provider, verb = "Continue with", lastUsed, className, type = "button", ...props }: ProviderButtonProps) { const { label, icon } = providers[provider] return ( ) } function Divider({ children = "or", className }: { children?: React.ReactNode; className?: string }) { return (

{children}

) } type FieldProps = Omit, "size"> & { label: string /** shown under the field and announced by screen readers */ error?: string /** a link or action placed at the end of the label row, e.g. "Forgot?" */ aside?: React.ReactNode /** classes for the input's box, so each theme can style it */ boxClassName?: string labelClassName?: string } function Field({ label, error, aside, type = "text", className, boxClassName, labelClassName, id, ...props }: FieldProps) { const autoId = React.useId() const inputId = id ?? autoId const errorId = `${inputId}-error` const [reveal, setReveal] = React.useState(false) const password = type === "password" return (

{label} {aside}

{password && ( )}

{error && ( {error} )}

) } type Status = "idle" | "loading" | "done" /** * Runs an async submit with loading and error states. The block calls * `run(values)`; your `onSubmit` does the real work and throws to show an error. */ function useSubmit(onSubmit?: (values: T) => Promise | void) { const [status, setStatus] = React.useState("idle") const [error, setError] = React.useState() async function run(values: T) { setError(undefined) setStatus("loading") try { await onSubmit?.(values) setStatus("done") } catch (reason) { setError(reason instanceof Error ? reason.message : "Something went wrong. Try again.") setStatus("idle") } } return { status, error, setError, run, reset: () => setStatus("idle") } } // a label that swaps to a spinner while the form is busy function SubmitLabel({ loading, children }: { loading: boolean; children: React.ReactNode }) { const reduceMotion = useReducedMotion() return ( {loading ? : children} ) } const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ function checkEmail(value: string) { if (!value.trim()) return "Enter your email address." if (!EMAIL.test(value.trim())) return "That doesn't look like an email address." return undefined } export { AfterglowMark, Divider, Field, GitHubMark, GoogleMark, ProviderButton, SubmitLabel, checkEmail, useSubmit, type FieldProps, type Provider, type ProviderButtonProps, } 75:T705,import type { CSSProperties } from "react" import type { TargetAndTransition, Transition } from "motion/react" // shared spring presets, every component picks from these export const springs = { snappy: { stiffness: 520, damping: 34, mass: 0.6 }, soft: { stiffness: 260, damping: 26, mass: 0.8 }, glide: { stiffness: 120, damping: 20, mass: 1 }, } as const export type SpringName = keyof typeof springs export function spring(name: SpringName): Transition { return { type: "spring", ...springs[name] } } // how a glow fades once its source moves away: slow, with a long tail export const afterglow = { linger: 0.9, ease: [0.22, 1, 0.36, 1], } as const satisfies { linger: number; ease: Transition["ease"] } // paints only the padding ring of an element, used for glowing borders export const ringMask: CSSProperties = { WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", maskComposite: "exclude", } // small icon gestures, played when a control is pressed or selected export const iconGestures = { pop: { scale: [1, 1.2, 1] }, ring: { rotate: [0, -18, 14, -9, 4, 0], scale: [1, 1.12, 1] }, // a gear looks the same after half a turn, so it can rest there and snap back unseen turn: { rotate: [0, 180], scale: [1, 1.12, 1] }, hop: { y: [0, -3, 0], scale: [1, 1.1, 1] }, nudge: { x: [0, 2.5, 0], scale: [1, 1.1, 1] }, } satisfies Record export type IconGesture = keyof typeof iconGestures // leaving a gesture is instant: every gesture already ends at, or looks like, its resting pose export const iconRest: TargetAndTransition = { scale: 1, rotate: 0, x: 0, y: 0, transition: { duration: 0 } } 64:["$","$L71",null,{"files":[{"path":"components/blocks/auth-glass.tsx","content":"$72","type":"registry:block","target":"components/blocks/auth-glass.tsx"},{"path":"components/ui/liquid-glass.tsx","content":"$73","type":"registry:ui"},{"path":"components/ui/auth-parts.tsx","content":"$74","type":"registry:ui"},{"path":"lib/afterglow.ts","content":"$75","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]