@luxfi/ui 5.5.4 → 5.5.5

package/components/auth/callback.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { useIam } from '@hanzo/iam/react'
+
+import { resume } from './resume'
+
+  /**
+   * The site's OAuth redirect target. IAM sends the authorization code here and
+   * this redeems it for tokens with the PKCE verifier the browser kept, then
+   * returns the visitor to the page they left.
+   */
+const Callback = () => {
+
+  const { handleCallback } = useIam()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    handleCallback()
+      .then(() => { window.location.replace(resume()) })
+      .catch((e: Error) => { setError(e.message) })
+      /* Runs once: the authorization code is single-use. */
+  }, [])
+
+  return (
+    <main className='flex min-h-screen items-center justify-center p-8 text-center'>
+      {error ? (
+        <div className='flex flex-col gap-4'>
+          <p role='alert'>{error}</p>
+          <a href='/' className='underline'>Back to the site</a>
+        </div>
+      ) : (
+        <p>Signing you in…</p>
+      )}
+    </main>
+  )
+}
+
+export default Callback

package/components/auth/login-panel.tsx

@@ -1,55 +1,26 @@
 'use client'
 
+import React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { setCookie } from 'cookies-next'
 
 import { cn } from '@hanzo/ui/util'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login } from '@hanzo/auth/components'
 
-import { LuxLogo } from '../icons'
+import Login from './login'
+import { LuxLogo } from '@luxfi/logo'
 import Logo from '../logo'
 import { EmblaAutoplay } from '..'
 import { legal } from '../../site-def/footer'
 
 const LoginPanel: React.FC<{
   close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
   className?: string
   reviews: { text: string, author: string, href: string }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
 }> = ({
   close,
-  getStartedUrl = '/',
-  redirectUrl,
   className = '',
-  reviews,
-  setIsLogin
+  reviews
 }) => {
-    const router = useRouter()
-
-    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
-    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
-    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
-    // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
-    // Otherwise, the functionality is split across modules! (and client/fw!) 
-    // (This was never my intent w the onLoginChanged callback.)
-    const onLogin = (token: string) => {
-      for (let i = 0; i < domains.length; i ++) {
-        setCookie('auth-token', token, {
-          domain: domains[i],
-          path: '/',
-          sameSite: 'none',
-          secure: true,
-          httpOnly: false,
-          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-        })
-      }
-
-      redirectUrl && router.push(redirectUrl)
-    }
 
     return (
       <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
@@ -61,7 +32,7 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='w-fit !min-w-0 p-2'
               >
-                <Logo size='md' textClx='!cursor-pointer' variant='text-only' />
+                <Logo size='md' variant='wordmark' />
               </Button>
               <Carousel
                 options={{ align: 'center', loop: true }}
@@ -90,17 +61,17 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
               >
-                <LuxLogo className='w-5 h-5' />
+                <LuxLogo variant='white' size={20} />
               </Button>
-              <Login
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
+              <Login className='w-full max-w-sm' />
+              <p className='text-sm opacity-50'>
+                {legal.map(({ title, href }, index) => (
+                  <React.Fragment key={href}>
+                    {index > 0 && ' · '}
+                    <Link href={href} className='underline'>{title}</Link>
+                  </React.Fragment>
+                ))}
+              </p>
             </div>
           </div>
         </div>

package/components/auth/login.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { cn } from '@hanzo/ui/util'
+import { Login as IamLogin, useIam } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+  /**
+   * Sign-in rendered in place, on this site's own domain: IAM mints an
+   * authorization code bound to a PKCE challenge and the form navigates to
+   * /auth/callback to redeem it. No credential ever reaches this bundle's
+   * origin, and there is one sign-in surface rather than one per app.
+   */
+const Login: React.FC<{
+  className?: string
+  onSuccess?: (token: string) => void
+}> = ({
+  className,
+  onSuccess
+}) => {
+
+  const { config } = useIam()
+    /* OIDC anti-CSRF nonce, one per mounted form. */
+  const [state] = useState(() => crypto.randomUUID())
+
+    /* Sign-in leaves for /auth/callback, so record the page holding this form to
+      come back to. */
+  useEffect(remember, [])
+
+  return (
+    <IamLogin
+      serverUrl={config.serverUrl}
+      clientId={config.clientId}
+      redirectUri={config.redirectUri}
+      organization={config.organization}
+      state={state}
+        /* Naming a class replaces the view's own, so keep both: the site skins
+          .hanzo-iam-* once, in lux-global.css. */
+      className={cn('hanzo-iam-card', className)}
+      onSuccess={onSuccess}
+    />
+  )
+}
+
+export default Login

package/components/auth/provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { type PropsWithChildren } from 'react'
+
+import { IamProvider } from '@hanzo/iam/react'
+import { BRAND_SERVER_URLS } from '@hanzo/iam/paths'
+import type { IAMConfig } from '@hanzo/iam/browser'
+
+  /* These are Lux sites, so they sign in at Lux's own issuer. Naming another
+    brand's would send a Lux user to a login page that has never heard of the
+    redirect_uri they came from. */
+const ORG = 'lux'
+
+  /* Where the authorization code comes back. Every site mounts <Callback/> here. */
+const CALLBACK = '/auth/callback'
+
+  /* The OAuth client a site presents itself as: the `<org>-<app>` pair registered
+    on lux.id, so lux.shop is `lux-shop`. */
+const configure = (app: string): IAMConfig => ({
+  serverUrl: BRAND_SERVER_URLS[ORG],
+  organization: ORG,
+  clientId: `${ORG}-${app}`,
+    /* Read per render rather than at module load: one bundle serves the real
+      host and any preview of it, and each must redeem its code back to itself. */
+  redirectUri: (typeof window === 'undefined' ? '' : window.location.origin) + CALLBACK,
+})
+
+  /* Provider is memoized on the config's values, not its identity, so building a
+    fresh object here does not rebuild the SDK. */
+const Auth: React.FC<{ app: string } & PropsWithChildren> = ({ app, children }) => (
+  <IamProvider config={configure(app)}>{children}</IamProvider>
+)
+
+export default Auth

package/components/auth/resume.ts

@@ -0,0 +1,16 @@
+  /* Where the visitor was when they chose to sign in. The OIDC round-trip lands
+    on /auth/callback, so without this every sign-in would end at the home page.
+    Session-scoped: it describes one trip through the browser, not a preference. */
+const KEY = 'lux-auth-resume'
+
+const remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search)
+}
+
+const resume = (): string => {
+  const to = sessionStorage.getItem(KEY)
+  sessionStorage.removeItem(KEY)
+  return to ?? '/'
+}
+
+export { remember, resume }

package/components/auth/widget.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React, { useContext } from 'react'
+
+import { Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+interface Props {
+    /** Hide the sign-in button, leaving only the profile of an already signed-in
+      user. Checkout wants this: it has its own sign-in step. */
+  noLogin?: boolean
+  className?: string
+    /** Sign in in place instead of leaving for lux.id — the mobile drawer opens
+      its own panel. */
+  handleLogin?: () => void
+}
+
+const Widget: React.FC<Props> = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+
+  const { isAuthenticated, isLoading, login, logout } = useIam()
+  const identity = useIamIdentity()
+
+    /* Say nothing until the stored token has been read, rather than flashing
+      "Login" at someone who is already signed in. */
+  if (isLoading) {
+    return null
+  }
+
+  if (!isAuthenticated) {
+    return noLogin ? null : (
+      <Button
+        variant='primary'
+        className={cn('h-8 w-fit !min-w-0', className)}
+        onClick={handleLogin ?? (() => { remember(); void login() })}
+      >
+        Login
+      </Button>
+    )
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          size='icon'
+          className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+        >{identity?.initials}</Button>
+      </PopoverTrigger>
+      <PopoverContent className='bg-level-0'>
+        <div className='grid gap-4'>
+          <div className='space-y-2 truncate'>
+            <h4 className='font-medium leading-none truncate'>{identity?.name}</h4>
+            {identity?.email && identity.email !== identity.name && (
+              <p className='text-sm opacity-50 truncate'>{identity.email}</p>
+            )}
+          </div>
+          <Separator />
+          <Button variant='outline' onClick={() => { logout() }}>Logout</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+  /* The widget rides in shared chrome, and not every site mounts <Auth> —
+    app/credit carries its own root layout. A site that offers no sign-in shows
+    no sign-in, which is why the context is read before any hook that needs it. */
+const AuthWidget: React.FC<Props> = (props) => (
+  useContext(IamContext) ? <Widget {...props} /> : null
+)
+
+export default AuthWidget

package/components/chat-widget.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Button, Card } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { LuxLogo } from './icons'
+import { LuxLogo } from '@luxfi/logo'
 import type { ChatbotSuggestedQuestion } from '../types'
 
 const ChatWidget: React.FC<{
@@ -58,16 +58,14 @@ const ChatWidget: React.FC<{
         <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
           <h1 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h1>
           <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <LuxLogo width={24} height={24}/>
+            <LuxLogo variant='white' size={24}/>
           </Button>
         </div>
         <iframe src={iframeSrc} className='h-full' />
       </Card>
     </div>
 
-    <LuxLogo
-      width={28}
-      height={28}
+    <span
       onClick={onClick}
       className={cn(
           // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
@@ -77,8 +75,9 @@ const ChatWidget: React.FC<{
         showChatbot ? 'rotate-180' : '',
         buttonClx
       )}
-      strokeWidth={1}
-    />
+    >
+      <LuxLogo variant='white' size={28} />
+    </span>
   </>)
 }
 

package/components/commerce/checkout-panel/desktop-cp.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../../auth/widget'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 import { cn } from '@hanzo/ui/util'
 
@@ -26,7 +26,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
       <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
         <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
           <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
-            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
+            <Logo size='md' href='/' onClick={onLeave} variant='wordmark' outerClx='logo-outer-tooltip-class' />
             <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
           </div>
           <BackButton 

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -3,7 +3,7 @@ import React, { type PropsWithChildren } from 'react'
 
 import { StepIndicator } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../../auth/widget'
 
 import { BackButton, Logo } from '../..'
 import BagButton from '../bag-button'
@@ -31,7 +31,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
           }
           onBack={onLeave}
         />
-        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
+        <Logo size='xs' variant='wordmark' href='/' onClick={onLeave} outerClx='-ml-2'/>
       </div>
       <StepIndicator 
         dotSizeRem={1} 

package/components/footer.tsx

@@ -34,7 +34,7 @@ const Footer: React.FC<{
         'md:flex md:flex-row md:justify-between px-[24px]' 
       }>
         <div className='hidden lg:flex flex-col' key={0}>
-          <Logo size='md' variant='text-only' />
+          <Logo size='md' variant='wordmark' />
         </div>
         {footer.map((defs: LinkDef[], index: number) => {
 

package/components/header/desktop.tsx

@@ -1,7 +1,7 @@
 import React, { type PropsWithChildren } from 'react'
 
 import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import AuthWidget from '../auth/widget'
 
 import Logo, { type LogoVariant } from '../logo'
 
@@ -25,7 +25,7 @@ const DesktopHeader: React.FC<{
   noAuth=false,
   noCommerce=false,
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
     const [isMenuOpened, setIsMenuOpen] = React.useState(false);
 
@@ -42,7 +42,7 @@ const DesktopHeader: React.FC<{
           'flex flex-row h-[80px] items-center justify-between ' +
           'mx-[24px] w-full max-w-screen'
         }>
-          <Logo size={logoVariant === 'logo-only' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
+          <Logo size={logoVariant === 'mark' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
           <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant={logoVariant} />
           {/* md or larger */}
           <div className='flex w-full gap-4 items-center justify-center'>
@@ -52,7 +52,7 @@ const DesktopHeader: React.FC<{
             {!noCommerce && (
               <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
             )}
-            <AuthWidget noLogin={noAuth}/>
+            {!noAuth && <AuthWidget />}
             {children}
           </div>
         </div>

package/components/header/index.tsx

@@ -18,7 +18,7 @@ const Header: React.FC<{
   siteDef,
   className = '',
   children,
-  logoVariant='text-only'
+  logoVariant='full'
 }) => {
 
     // TODO

package/components/header/mobile-nav-menu-ai.tsx

@@ -15,7 +15,7 @@ const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
         <>
             <div className="w-full  text-2xl cursor-pointer">
                 <div className='flex justify-between'>
-                    <Logo variant='text-only' size='md' outerClx={'p-6 h-full'} />
+                    <Logo variant='wordmark' size='md' outerClx={'p-6 h-full'} />
                     <Plus width={28} height={28} className={
                         'block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 ' +
                         (!open ? 'rotate-none' : 'rotate-[135deg] scale-110')

package/components/header/mobile-nav-menu.tsx

@@ -5,7 +5,7 @@ import { cn } from '@hanzo/ui/util'
 import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
 import MobileNavMenuAI from './mobile-nav-menu-ai'
 import MobileNavMenuItem from './mobile-nav-menu-item'
-import MobileAuthWidget from '../auth/mobile-login-button'
+import AuthWidget from '../auth/widget'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
 import { ChevronDown } from 'lucide-react'
 import Link from 'next/link'
@@ -94,7 +94,7 @@ const MobileNav: React.FC<{
             })}
           </Accordion>
         </div>
-        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+        <AuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
       </div>
     ) : null
   );

package/components/header/mobile.tsx

@@ -6,7 +6,7 @@ import type { LinkDef } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
 
 import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { LoginPanel } from '@hanzo/auth/components'
+import Login from '../auth/login'
 import sendGAEvent from '../../next/analytics/google-analytics'
 
 import { Avatar, Bag } from '../icons'
@@ -95,7 +95,7 @@ const MobileHeader: React.FC<{
       )}>
         {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
         <div className='w-full h-full flex flex-row justify-between items-center font-bold pr-5'>
-          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='text-only' />
+          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='wordmark' />
           {/* Not that key to the cross-fade effect 
             is that this is **on top of** the logo. */}
           {menuOpen() && (
@@ -129,7 +129,7 @@ const MobileHeader: React.FC<{
           'flex flex-column bg-background z-below-header animate-mobile-menu-open'
         }>
           {(!!!noAuth && menuState === 'login') ? (
-            <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
+            <Login onSuccess={onLoginChanged} className='sm:animate-in sm:zoom-in-90 m-auto w-full max-w-sm px-8' />
           ) : (
             (!!!noCommerce && menuState === 'bag') ? (
 

package/components/icons/index.ts

@@ -1,6 +1,5 @@
 export { default as Avatar } from './avatar'
 export { default as Bag } from './bag-icon'
 export { default as LeftArrow } from './left-arrow'
-export { default as LuxLogo } from './lux-logo'
 export { default as RightArrow } from './right-arrow'
 export { default as SocialIcon, type SocialIconProps } from './social-icon'

package/components/index.ts

@@ -10,7 +10,8 @@ export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
-export { default as AuthListener } from './auth/auth-listener'
+export { default as Auth } from './auth/provider'
+export { default as Login } from './auth/login'
 export { default as BackButton } from './back-button'
 export { default as BuyDrawer } from './commerce/drawer'
 export { default as DrawerMargin } from './drawer-margin'
@@ -18,7 +19,6 @@ export { default as BuyButton } from './commerce/buy-button'
 export { default as CheckoutButton } from './commerce/checkout-button'
 export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as LoginPanel } from './auth/login-panel'
-export { default as SignupPanel } from './auth/signup-panel'
 export { default as Analytics } from './analytics'
 export { default as Tooltip } from './tooltip'
 

package/components/logo.tsx

@@ -1,13 +1,30 @@
 import React from 'react'
 import Link from 'next/link'
 
-import { type TShirtSize  } from '@hanzo/ui/types'
+import { type TShirtSize } from '@hanzo/ui/types'
+import { Logo as Mark, Wordmark } from '@luxfi/logo'
 
-import { LuxLogo } from './icons'
-
-const TEXT = 'LUX'
-type LogoVariant = 'text-only' | 'logo-only' | 'full'
+/**
+ * mark     — the triangle alone
+ * wordmark — the LUX letterforms alone
+ * full     — the mark beside the wordmark
+ *
+ * Both halves come from @luxfi/logo, which is the one home for Lux brand art.
+ * This file used to draw its own triangle and set the letters "LUX" in the body
+ * font, so every Lux site wore typed text where the wordmark belongs — and no
+ * variant could fix it, because neither the mark nor the wordmark was here to
+ * ask for. Art lives in the brand package; this composes it.
+ */
+type LogoVariant = 'mark' | 'wordmark' | 'full'
 
+/** Mark height in px, and the wordmark height that stands with it. */
+const SIZE: Record<string, { mark: number, word: number, gap: string }> = {
+  xl: { mark: 40, word: 22, gap: 'gap-4' },
+  lg: { mark: 40, word: 22, gap: 'gap-4' },
+  md: { mark: 32, word: 18, gap: 'gap-3' },
+  sm: { mark: 24, word: 13, gap: 'gap-2' },
+  xs: { mark: 16, word: 9, gap: 'gap-1.5' },
+}
 
 const Logo: React.FC<{
   size?: TShirtSize
@@ -15,74 +32,29 @@ const Logo: React.FC<{
   onClick?: () => void
   href?: string
   outerClx?: string
-  textClx?: string
 }> = ({
-  size,
+  size = 'md',
   href, // no default please!
-  outerClx='',
-  textClx='',
-  variant='full',
+  outerClx = '',
+  variant = 'full',
   onClick,
 }) => {
-  let classes: any = {}
-  const toAdd = (variant === 'logo-only') ? 
-    {
-      span: 'hidden',
-      icon: ''
-    }  
-    :
-    (variant === 'text-only') ? 
-      {
-        span: '',
-        icon: 'hidden'
-      } 
-      : 
-      {
-        span: '',
-        icon: ''
-      }
-
-  if (size === 'lg' || size === 'xl' ) { // for safety
-    classes.icon = 'h-10 w-10 mr-4 color-inherit ' 
-    classes.span = 'text-3xl ' 
-  }
-    // match lux.network
-  else if (size === 'md') {
-    classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit '
-    classes.span = 'text-[1.8rem]/[1.8rem] tracking-tighter '
-  }
-  else if (size === 'sm' ) {
-    classes.icon = 'h-6 w-6 mr-2 color-inherit ' 
-    classes.span = 'text-lg '
-  }
-    // xs
-  else {
-    classes.icon = 'h-4 w-4 mr-1 color-inherit '
-    classes.span = 'text-base '
-  }
-
-  classes.icon += toAdd.icon
-  classes.span += toAdd.span
-
+  const s = SIZE[size as string] ?? SIZE.md
+  const clx = 'flex flex-row items-center ' + s.gap + ' '
+    + (href ? 'hover:opacity-80 cursor-pointer ' : 'cursor-default ')
+    + outerClx
 
-  const outerClasses = 'flex flex-row items-center ' + outerClx
-  const spanClasses = 'inline-block font-bold font-heading ' 
-    + textClx
-    + (href ? ' hover:opacity-80 cursor-pointer ' : ' cursor-default ') 
-    + classes.span 
+  // White on both counts: the Lux ground is black and the brand's accent is
+  // white, so the mark and the letters carry the same value.
+  const art = (<>
+    {variant !== 'wordmark' && <Mark variant='white' size={s.mark} />}
+    {variant !== 'mark' && <Wordmark height={s.word} />}
+  </>)
 
-  return (
-    href ? (
-      <Link href={href} className={outerClasses} onClick={onClick} >
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </Link>
-    ) : (
-      <span className={outerClasses} onClick={onClick}>
-        <LuxLogo className={classes.icon} />
-        <span className={spanClasses}>{TEXT}</span>
-      </span>
-    )
+  return href ? (
+    <Link href={href} className={clx} onClick={onClick}>{art}</Link>
+  ) : (
+    <span className={clx} onClick={onClick}>{art}</span>
   )
 }
 

package/components/security/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+import type { SiteDef } from '../../site-def'
+import Footer from '../footer'
+import Header from '../header'
+import Main from '../main'
+
+const Security: React.FC<{
+  contact: string
+  header?: boolean
+  siteDef: SiteDef
+}> = ({
+  contact,
+  header = false,
+  siteDef
+}) => (<>
+  {header && <Header siteDef={siteDef} />}
+  <Main className='px-8 sm:px-10 pb-16'>
+    <ApplyTypography className='w-full max-w-[46rem] mx-auto flex flex-col gap-6 pt-12'>
+      <h1>Reporting a security problem</h1>
+      <p>
+        Email <a href={`mailto:${contact}`}>{contact}</a>. Tell us what you found and how to
+        reproduce it. Send it to us before you tell anyone else, and do not open a public issue.
+      </p>
+      <p>
+        A real report from a stranger is worth more than another internal review. We read every one.
+      </p>
+      <h2>What happens next</h2>
+      <p>
+        Someone will read your report and reply. If we can reproduce the problem we will tell you
+        what we are doing about it, and tell you again once it is fixed. If we cannot reproduce it
+        we will say so and ask you for what we are missing.
+      </p>
+      <h2>While you are looking</h2>
+      <p>
+        Test against accounts and data that are your own. Do not read, change, or keep data that
+        belongs to someone else. If you reach it by accident, stop, and say so in your report.
+      </p>
+      <p>
+        Do not run anything that degrades the service for other people. No load testing, no denial
+        of service, no mass automated scanning, and no social engineering of our staff or our users.
+      </p>
+      <h2>For scanners</h2>
+      <p>
+        This page is the policy named by{' '}
+        <a href='/.well-known/security.txt'>/.well-known/security.txt</a>, per RFC 9116.
+      </p>
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef} />
+</>)
+
+export default Security

package/next/middleware/determine-device-mw.ts

@@ -1,6 +1,5 @@
 import { NextRequest, NextResponse, userAgent } from 'next/server'
 import { getSelectorsByUserAgent } from 'react-device-detect'
-import { setCookie } from 'cookies-next'
 
 // writed this way so they can be chained :)
 const determineDeviceMW = async (request: NextRequest) => {
@@ -10,18 +9,6 @@ const determineDeviceMW = async (request: NextRequest) => {
   const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ? 'desktop' : 'unknown'))
   const { nextUrl: url } = request
   //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
-  const auth_token = url.searchParams.get('auth-token')
-  if (auth_token) {
-    setCookie('auth-token', auth_token, {
-      domain: url.hostname,
-      path: '/',
-      sameSite: 'none',
-      secure: true,
-      httpOnly: false,
-      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-    })
-    url.searchParams.delete('auth-token')
-  }
   url.searchParams.set('agent', agent)
   return NextResponse.rewrite(url)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -20,6 +20,8 @@
   ],
   "exports": {
     ".": "./components/index.ts",
+    "./auth-callback": "./components/auth/callback.tsx",
+    "./security": "./components/security/index.tsx",
     "./commerce": "./commerce/ui/context.tsx",
     "./root-layout": "./root-layout/index.tsx",
     "./next": "./next/index.ts",
@@ -29,11 +31,10 @@
     "./util": "./util/index.ts"
   },
   "dependencies": {
+    "@luxfi/logo": "^1.0.10",
     "@next/third-parties": "^16.1.0",
-    "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.1.6",
-    "firebase": "10.12.0",
     "framer-motion": "^11.2.12",
     "markdown-to-jsx": "^7.4.7",
     "react-device-detect": "^2.2.3",
@@ -43,9 +44,10 @@
     "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "2.5.8",
-    "@hanzo/commerce": "7.3.10",
+    "@hanzo/iam": "0.21.9",
+    "@hanzo/commerce": "7.6.4",
     "@hanzo/ui": "5.3.34",
+    "@luxfi/menu-icons": "^1.0.2",
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "0.470.0",
     "mobx": "^6.12.3",
@@ -56,8 +58,7 @@
     "react-dom": "19.2.0",
     "react-hook-form": "7.54.2",
     "validator": "^13.11.0",
-    "zod": "3.23.8",
-    "@luxfi/menu-icons": "1.0.2"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.3.2",

package/root-layout/index.tsx

@@ -2,15 +2,13 @@ import React, { type PropsWithChildren } from 'react'
 import type { Viewport } from 'next'
 
 import { Toaster } from '@hanzo/ui/primitives'
-import { AuthServiceProvider } from '@hanzo/auth/service'
-import type { AuthServiceConf } from '@hanzo/auth/types'
 import { CommerceProvider } from '@hanzo/commerce'
 
 import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
 import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
 
 import { CommerceUIProvider } from '../commerce/ui/context'
-import { AuthListener, ChatWidget, Header, Analytics } from '../components'
+import { Auth, ChatWidget, Header, Analytics } from '../components'
 
 import CommerceDrawer from '../components/commerce/drawer'
 
@@ -57,10 +55,6 @@ function RootLayout({
   chatbot?: boolean
 } & PropsWithChildren) {
 
-  // For static export, we don't have server-side auth
-  // User auth will be handled client-side via AuthListener
-  const currentUser = null
-
   const Guts: React.FC = () => (<>
     {showHeader && <Header siteDef={siteDef}/>}
     {children}
@@ -87,7 +81,7 @@ function RootLayout({
         display: 'none', // see analytics.tsx
       }}>
         <Analytics/>
-        <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
+        <Auth app={siteDef.app}>
         {siteDef?.commerce ? (
           <CommerceProvider config={siteDef.commerce!} >
             <CommerceUIProvider >
@@ -98,8 +92,7 @@ function RootLayout({
         ) : (
           <Guts />
         )}
-          <AuthListener/>
-        </AuthServiceProvider>
+        </Auth>
         <Toaster position='top-center' duration={3000}/>
       </body>
     </html>

package/style/lux-global.css

@@ -18,6 +18,55 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   @apply uppercase;
 }
 
+/* Hanzo IAM's sign-in views ship structure, not skin. This is the one place
+ * that markup meets the Lux surface -- colours come from lux-colors so the
+ * form follows the theme like everything else.
+ */
+.hanzo-iam-card,
+.hanzo-iam-form {
+  @apply flex flex-col gap-3 w-full;
+}
+
+.hanzo-iam-form input {
+  @apply w-full rounded-sm px-3 py-2 text-base;
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+
+.hanzo-iam-btn {
+  @apply w-full rounded-sm px-3 py-2 text-base font-semibold cursor-pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+
+.hanzo-iam-btn:disabled {
+  @apply opacity-50 cursor-default;
+}
+
+.hanzo-iam-divider {
+  @apply text-sm uppercase;
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-error {
+  @apply text-sm;
+  color: hsl(0 70% 60%);
+}
+
 /* Specific style fixes for react-square-web-payments-sdk -
  * reduce gap between card input and pay button
  */

package/types/site-def.ts

@@ -7,6 +7,13 @@ import type ChatbotConfig from './chatbot-config'
 
 interface SiteDef {
 
+    /**
+     * Short name of this site, which with the org names the IAM application it
+     * signs in as: 'quest' is the client `lux-quest` on lux.id. Required, so a
+     * site cannot ship a login button that belongs to no one.
+     */
+  app: string
+
     /** url of this site.  All nav links in the system will show it in 'current' state */
   currentAs?: string
 

package/components/auth/auth-listener.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useAuth } from '@hanzo/auth/service'
-import { getCookie } from 'cookies-next'
-
-const AuthListener = () => {
-  const auth = useAuth()
-
-  useEffect(() => {
-    // Sites that do not share a login origin leave this unset; without it there
-    // is nothing to ask, so asking would only fetch the string "undefined".
-    const loginSite = process.env.NEXT_PUBLIC_LOGIN_SITE_URL
-    if (!loginSite) return
-
-    fetch(`${loginSite}/api/auth/get-auth-token`, {
-      method: 'GET',
-      credentials: 'include',
-    })
-    .then(response => response.json())
-    .then((data: any) => {
-      const token = data.reqToken
-      if (!!token) {
-        auth.loginWithCustomToken(token)
-      }
-    })
-    .catch(() => { /* no shared session available */ })
-  }, [auth])
-
-  return ( <></> )
-}
-
-export default AuthListener

package/components/auth/auth-token/clear-auth-token.tsx

@@ -1,12 +0,0 @@
-import domains from '../common-auth-domains'
-
-const ClearAuthToken = () => {
-  return (<>
-    {domains.map(({url}) => (
-      /* Clear auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/clear-auth-token`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default ClearAuthToken

package/components/auth/auth-token/set-auth-token.tsx

@@ -1,16 +0,0 @@
-import domains from '../common-auth-domains'
-
-const SetAuthToken: React.FC<{
-  authToken: string
-}> = ({
-  authToken,
-}) => {
-  return (<>
-    {!!authToken && domains.map(({url}) => (
-      /* Set auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/set-auth-token?token=${authToken}`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default SetAuthToken

package/components/auth/common-auth-domains.ts

@@ -1,17 +0,0 @@
-const domains = [
-  { id: 'lux.market', url: 'https://lux.market' },
-  { id: 'lux.shop', url: 'https://lux.shop' },
-  { id: 'lux.credit', url: 'https://lux.credit' },
-  { id: 'lux.network', url: 'https://lux.network' },
-  { id: 'wallet.lux.network', url: 'https://wallet.lux.network' },
-  { id: 'safe.lux.network', url: 'https://safe.lux.network' },
-  { id: 'lux.finance', url: 'https://lux.finance' },
-  { id: 'lux.exchange', url: 'https://lux.exchange' },
-  { id: 'lux.quest', url: 'https://lux.quest' },
-  { id: 'lux.id', url: 'https://lux.id' },
-  { id: 'lux.chat', url: 'https://lux.chat' }
-]
-
-export {
-  domains as default
-}

package/components/auth/mobile-login-button.tsx

@@ -1,112 +0,0 @@
-'use client'
-import React from "react"
-import { observer } from "mobx-react-lite"
-
-import {
-    Button,
-    LinkElement,
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-    Separator
-} from '@hanzo/ui/primitives'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { useAuth } from "@hanzo/auth/service"
-
-import { Ethereum } from "@hanzo/auth/icons"
-
-const MobileAuthWidget: React.FC<{
-    noLogin?: boolean
-    className?: string
-    handleLogin?: () => void
-}> = observer(({
-    noLogin = false,
-    className
-}) => {
-    const auth = useAuth()
-    const handleLogin = () => {
-        window.location.href = "https://lux.id";
-      };
-
-    if (!auth) {
-        return null
-    }
-    if (!auth.loggedIn && typeof window !== 'undefined') {
-        return (noLogin ? null : (
-            (handleLogin) ? (
-                <div className="flex items-center py-1 px-1 gap-1">
-                    <Button
-                        variant='primary'
-                        className='text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Sign Up
-                    </Button>
-                    <Button
-                        variant='outline'
-                        className=' text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Log In
-                    </Button>
-                </div>
-            ) : (
-                // Without a login origin there is nowhere to send them, and the
-                // link would read `undefined?redirectUrl=…` — which next/link
-                // prefetches, so every page fetches a 404 it can never use.
-                process.env.NEXT_PUBLIC_LOGIN_SITE_URL ? (
-                    <LinkElement
-                        def={{
-                            href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
-                            title: 'Login',
-                            variant: 'primary',
-                            newTab: false
-                        } satisfies LinkDef}
-                        className='h-8 w-fit !min-w-0'
-                    />
-                ) : null
-            )
-        ))
-    }
-
-    return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    size='icon'
-                    className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
-                >{auth.user?.email[0]}</Button>
-            </PopoverTrigger>
-            <PopoverContent className='bg-level-0'>
-                <div className="grid gap-4">
-                    <div className="space-y-2 truncate">
-                        {auth.user?.displayName ? (
-                            <>
-                                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
-                                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
-                            </>
-                        ) : (
-                            <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
-                        )}
-                        {auth.user?.walletAddress ? (
-                            <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
-                        ) : (
-                            <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
-                                <Ethereum height={20} />Connect your wallet
-                            </Button>
-                        )}
-                    </div>
-                    <Separator />
-                    <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
-                </div>
-            </PopoverContent>
-        </Popover>
-    )
-
-})
-
-export default MobileAuthWidget

package/components/auth/signup-panel.tsx

@@ -1,113 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-
-import { setCookie } from 'cookies-next'
-
-import { cn } from '@hanzo/ui/util'
-import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login, SignupPanel as Signup } from '@hanzo/auth/components'
-
-import { LuxLogo } from '../icons'
-import Logo from '../logo'
-import { EmblaAutoplay } from '..'
-import { legal } from '../../site-def/footer'
-
-const SignupPanel: React.FC<{
-  close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
-  className?: string
-  reviews: { text: string, author: string, href: string }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({
-  close,
-  getStartedUrl = '/',
-  redirectUrl,
-  className = '',
-  reviews,
-  setIsLogin
-}) => {
-    const router = useRouter()
-
-    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
-    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
-    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
-
-    // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
-    // Otherwise, the functionality is split across modules! (and client/fw!) 
-    // (This was never my intent w the onLoginChanged callback.)
-    const onLogin = (token: string) => {
-      for (let i = 0; i < domains.length; i++) {
-        setCookie('auth-token', token, {
-          domain: domains[i],
-          path: '/',
-          sameSite: 'none',
-          secure: true,
-          httpOnly: false,
-          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-        })
-      }
-
-      redirectUrl && router.push(redirectUrl)
-    }
-
-    return (
-      <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
-        <div className='hidden md:flex w-full h-full bg-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] flex-row items-end justify-end overflow-y-auto min-h-screen'>
-          <div className='h-full w-full max-w-[750px] px-8 pt-0'>
-            <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
-              <Button
-                variant='ghost'
-                onClick={close}
-                className='w-fit !min-w-0 p-2'
-              >
-                <Logo size='md' textClx='!cursor-pointer' variant='text-only' />
-              </Button>
-              <Carousel
-                options={{ align: 'center', loop: true }}
-                className='w-full'
-                plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
-              >
-                <CarouselContent>
-                  {reviews.map(({ text, author, href }, index) => (
-                    <CarouselItem key={index}>
-                      <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
-                        <p>“{text}“</p>
-                        <p className='text-sm'>{author}</p>
-                      </Link>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-              </Carousel>
-            </div>
-          </div>
-        </div>
-        <div className='w-full h-full bg-background flex flex-row items-center'>
-          <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
-            <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
-              <Button
-                variant='ghost'
-                onClick={close}
-                className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
-              >
-                <LuxLogo className='w-5 h-5' />
-              </Button>
-              <Signup
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-export default SignupPanel

package/components/icons/lux-logo.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const LuxLogo: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"  {...props}>
-    <polygon points="25,46.65 50,3.35 0,3.35" fill="white" stroke='black' strokeWidth={props.strokeWidth}/>
-  </svg>
-)
-
-export default LuxLogo