@luxfi/core 5.2.6 → 5.2.8

package/commerce/ui/context.tsx

@@ -19,6 +19,13 @@ import type { CommerceDrawer, SelectAndBuy, RecentActivity } from './store'
 import { CommerceUIStore } from './store'
 import conf from './conf'
 
+const LOG = false ////////////////////
+const log = (s: string) => {
+  if (LOG) {
+    console.log('CMMC UI CONTEXT ' + s)
+  }
+}
+
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
 enableStaticRendering(typeof window === "undefined")
 
@@ -41,13 +48,9 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
 }) => {
 
   const cmmc = useCommerce()
-  const pathName = usePathname()
-  const isCheckout = pathName === '/checkout'
-  const ref = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
-
-  if (ref.current.checkingOut != isCheckout) {
-    ref.current.setCheckingOut(isCheckout)
-  }
+  const pathname = usePathname()
+  const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
+  const prevPathRef = useRef<string>('initial')
 
   const onResize = () => { 
     const width = window.innerWidth 
@@ -58,36 +61,57 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
         desktopMin = parseInt(twConfig.theme?.screens.md)
       }
       if (width < desktopMin) {
-        if (!ref.current.isMobile) {
-          ref.current.setMobile(true)
+        if (!storeRef.current.isMobile) {
+          storeRef.current.setMobile(true)
         }
       }
-      else if (ref.current.isMobile) {
-        ref.current.setMobile(false)
+      else if (storeRef.current.isMobile) {
+        storeRef.current.setMobile(false)
       }
     }
-    ref.current.setViewportHeight(window.innerHeight)
+    storeRef.current.setViewportHeight(window.innerHeight)
   }
 
   const onResize_debounced = useDebounceCallback(onResize, 500)
 
   useLayoutEffect(() => {
-    ref.current.initialize()
+    storeRef.current.initialize()
     onResize()
     window.addEventListener('resize', onResize_debounced);
     return () => {
       window.removeEventListener('resize', onResize_debounced)
-      ref.current.dispose() 
+      storeRef.current.dispose() 
     }
   }, [])
 
   useEffect(() => {
-    ref.current.reset()
-  }, [pathName])
+    const checkingOut = (pathname === '/checkout')
+
+    /////////////////////////////////////
+    log("useEffect: pathname: " + pathname)
+    log("useEffect: prev pathname: " + prevPathRef.current)
+    
+    if (storeRef.current.checkingOut === undefined || storeRef.current._checkingOut!== checkingOut) {
+      log("useEffect: setting checkingOut to: " + checkingOut) /////////////////////////////////////
+      storeRef.current.setCheckingOut(checkingOut)
+    }
+    if ( prevPathRef.current === 'initial') {
+      prevPathRef.current = pathname
+      // no need to reset  
+    }
+    else if (
+      !checkingOut
+      &&
+      prevPathRef.current !== pathname
+    ) {
+      storeRef.current.reset()
+      prevPathRef.current = pathname
+    }  
+  }, [pathname])
 
 
   return (
-    <CommerceUIContext.Provider value={ref.current}>
+    <CommerceUIContext.Provider value={storeRef.current}>
       {children}
     </CommerceUIContext.Provider>
   )

package/commerce/ui/store.ts

@@ -1,5 +1,6 @@
 import { 
   action,
+  autorun,
   computed, 
   makeObservable, 
   observable,
@@ -9,9 +10,10 @@ import {
 
 import type { CommerceService, LineItem, ObsLineItemRef } from '@hanzo/commerce/types'
 
-const logOn = false
+const LOG = false ////////////////////
+
 const log = (s: string) => {
-  if (logOn) {
+  if (LOG) {
     console.log('COMMERCE_UI ' + s)
   }
 }
@@ -69,7 +71,7 @@ class CommerceUIStore implements
 
   _currentSkuPath: string | undefined = undefined
   _closedByUser: boolean = false
-  _checkingOut: boolean = false
+  _checkingOut: boolean | undefined = undefined
   _ignoreStateChange: boolean = false
   _activePoint: SnapPoint | null = null 
   
@@ -116,6 +118,7 @@ class CommerceUIStore implements
       showCheckout: computed,
       snapPointPx: computed,
       state: computed,
+      open: computed
     })
   }
 
@@ -135,6 +138,16 @@ class CommerceUIStore implements
         }
       }
     ))
+    this._reactionDisposers.push(autorun(() => {
+      log('AUTORUN: OPEN: ' + this.open)
+      log('AUTORUN:' + // ===============
+        '[showCheckout: '  + this.showCheckout + 
+        '], [showAdded: ' + this.showAdded + 
+        '], [showBuy: ' + this.showBuy + 
+        '], [closedByUser: ' + this._closedByUser + 
+        '], [checkingOut: ' + this._checkingOut + ']'
+      ) // ===========
+    }))
   }
 
   reset = () => {
@@ -191,7 +204,7 @@ class CommerceUIStore implements
   get ignoreStateChange(): boolean { return this._ignoreStateChange }
   setIgnoreStateChange = (b: boolean): void => { this._ignoreStateChange = b}
 
-  get checkingOut(): boolean { return this._checkingOut }
+  get checkingOut(): boolean | undefined { return this._checkingOut }
   setCheckingOut = (b: boolean): void => { this._checkingOut = b }
 
   get activePoint(): SnapPoint | null { return this._activePoint }
@@ -218,26 +231,41 @@ class CommerceUIStore implements
   }
 
   get open(): boolean {
+
+    log('open():' + // ===============
+      ' showCheckout: '  + this.showCheckout + 
+      ' showAdded: ' + this.showAdded + 
+      ' showBuy: ' + this.showBuy
+    ) // ===========
+
+
+
     return ( 
-      !this.closedByUser 
+      this._checkingOut !== undefined
+      &&
+      !this._checkingOut 
+      &&
+      !this.closedByUser
       && 
       (this.showCheckout || this.showAdded || this.showBuy)
     )
   }
 
   get state(): DrawerState {
-    if (this.showBuy) {
-      return 'full'
-    }
-    else if (!this.closedByUser && (this.showAdded || this.showCheckout)) {
-      return 'micro'
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return 'full'
+      }
+      else if (this.showAdded || this.showCheckout) {
+        return 'micro'
+      }
     }
     return 'closed'
   }
 
   get showBuy(): boolean {return !!this.currentSkuPath}
-  get showAdded(): boolean { return !this._checkingOut && !!this.item}
-  get showCheckout(): boolean { return !this._checkingOut && !this._service.cartEmpty}
+  get showAdded(): boolean { return !!this.item}
+  get showCheckout(): boolean { return !this._service.cartEmpty}
   get modal(): boolean { return this.state !== 'micro'}
 
   get microHeight(): SnapPoint {

package/components/auth/login-panel.tsx

@@ -58,7 +58,7 @@ const LoginPanel: React.FC<{
               onClick={close}
               className='w-fit !min-w-0 p-2'
             >
-              <Logo size='md' spanClassName='!cursor-pointer' layout='text-only'/>
+              <Logo size='md' textClx='!cursor-pointer' variant='text-only'/>
             </Button>
             <Carousel
               options={{ align: 'center', loop: true }}

package/components/back-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+
+import { ChevronLeft } from 'lucide-react'
+
+
+import { 
+  Button, 
+  buttonVariants, 
+} from '@hanzo/ui/primitives'
+
+import type { VariantProps } from '@hanzo/ui/util'
+
+const BackButton: React.FC<{
+  variant?: VariantProps<typeof buttonVariants>['variant']
+  size?: VariantProps<typeof buttonVariants>['size']
+  clx?: string
+  iconClx?: string
+}> = ({
+  variant='ghost',
+  size='default',
+  clx='',
+  iconClx='',
+}) => {
+
+  const router = useRouter()
+  const back = () => {router.back()}
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={back}
+      className={clx}
+    >
+      <ChevronLeft className={iconClx}/>
+    </Button> 
+  )
+}
+
+export default BackButton

package/components/commerce/checkout-panel/dt-checkout-panel.tsx

@@ -1,56 +1,73 @@
 'use client'
 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 { CartPanel } from '@hanzo/commerce'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import { cn } from '@hanzo/ui/util'
 
-import * as Icons from '../../icons'
+import { BackButton, Logo, Tooltip } from '../..'
 import DesktopBagCarousel from './dt-bag-carousel'
-import CloseButton from './close-button'
-import { cn } from '@hanzo/ui/util'
 import LinksRow from './links-row'
 
 const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
   index: number
   stepNames: string[]
-  close:() => void
+  close: () => void
   className?: string
-}> = ({
+}> = observer(({
   index,
   stepNames,
   close,
   className='',
   children
-}) => ( 
+}) => {
 
+  const cmmc = useCommerce()
+
+  return ( 
   <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  className)}>
-    <div className='w-full h-full bg-background flex flex-row items-start justify-end'>
-      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start p-8'>
-        <CloseButton close={close} size='md'/>
-        <div className='w-full max-w-[550px] mx-auto flex flex-col gap-3'>
-          <DesktopBagCarousel className='h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
+    <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 onClick={close} size='md' href='/' variant='text-only' outerClx='logo-outer-tooltip-class' />
+          <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
+        </div>
+        <BackButton size='sm' clx={
+          'z-10 absolute top-14 left-6 !px-0 aspect-square ' + 
+          'rounded-full hover:!bg-level-3 ' + 
+          //'border border-transparent hover:border-muted-2 ' + 
+          'back-button-tooltip-class '
+        }/>
+        <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
+        <div key={2} className={cn(
+          'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
+          (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
+        )}>
+          <DesktopBagCarousel className='grow-0 h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
           <CartPanel 
             className='w-full border-none p-0' 
-            itemClx='mb-3' 
-            totalClx='sticky -bottom-1 p-1 bg-background'
+            itemClx='mb-2' 
+            totalClx='sticky bottom-0 bg-background'
             listClx='pr-3'
             scrollAfter={5}
-            scrollHeightClx='h-[50vh]'
+            scrollHeightClx='min-h-[50vh] grow'
             showPromoCode
             showShipping
+            selectItems
           />
         </div>
       </div>
     </div>
-    <div className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
+    <div key={2} className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
       <ScrollArea className='w-full flex flex-row items-start justify-start overflow-y-auto'>
         <div className='h-full w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-          <div className='bg-level-1 sticky h-30 pb-8 w-full top-0 flex justify-center items-end'>
+          <div key={1} className='bg-level-1 sticky h-30 pb-8 w-full top-0 flex justify-center items-end'>
             <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
             <StepIndicator dotSizeRem={1.5} steps={stepNames} currentStep={index} className='gap-2 text-base w-pr-70' />
           </div>
-          <div className='w-full max-w-[550px] mx-auto pb-10'>
+          <div key={2} className='w-full max-w-[550px] mx-auto pb-10'>
             {children}
           </div>
         </div>
@@ -63,5 +80,6 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
     </div>
   </div>
 )
+})
 
 export default DesktopCheckoutPanel

package/components/commerce/checkout-panel/mb-checkout-panel.tsx

@@ -6,7 +6,7 @@ import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
 import { CartAccordian } from '@hanzo/commerce'
 
-import CloseButton from './close-button'
+import { Logo } from '../..'
 import BagButton from '../bag-button'
 import LinksRow from './links-row'
 
@@ -25,7 +25,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & {
 
   <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4', className)}>
     <div className='sticky top-0 w-full flex flex-row justify-between items-center bg-background'>
-      <CloseButton close={close} size='xs' />
+      <Logo onClick={close} size='xs' href='/' />
       {/* Need wrapper div since 'noLogin' returns null if no logged in user */}
       <div className='w-10 h-10 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
     </div>

package/components/commerce/desktop-nav-menu.tsx

@@ -17,111 +17,6 @@ import {
 } from '@hanzo/ui/primitives'
 import Warpcast from "../icons/warpcast"
 
-// const components: { title: string; href: string; description: string }[] = [
-//   {
-//     title: "Alert Dialog",
-//     href: "/docs/primitives/alert-dialog",
-//     description:
-//       "A modal dialog that interrupts the user with important content and expects a response.",
-//   },
-//   {
-//     title: "Hover Card",
-//     href: "/docs/primitives/hover-card",
-//     description:
-//       "For sighted users to preview content available behind a link.",
-//   },
-//   {
-//     title: "Progress",
-//     href: "/docs/primitives/progress",
-//     description:
-//       "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
-//   },
-//   {
-//     title: "Scroll-area",
-//     href: "/docs/primitives/scroll-area",
-//     description: "Visually or semantically separates content.",
-//   },
-//   {
-//     title: "Tabs",
-//     href: "/docs/primitives/tabs",
-//     description:
-//       "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
-//   },
-//   {
-//     title: "Tooltip",
-//     href: "/docs/primitives/tooltip",
-//     description:
-//       "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-//   },
-// ]
-
-// export function NavigationMenuDemo() {
-//   return (
-//     <NavigationMenu>
-//       <NavigationMenuList>
-//         <NavigationMenuItem>
-//           <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-//           <NavigationMenuContent>
-//             <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-//               <li className="row-span-3">
-//                 <NavigationMenuLink asChild>
-//                   <a
-//                     className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-//                     href="/"
-//                   >
-//                     {/* <Icons.logo className="h-6 w-6" /> */}
-//                     <div className="mb-2 mt-4 text-lg font-medium">
-//                       shadcn/ui
-//                     </div>
-//                     <p className="text-sm leading-tight text-muted-foreground">
-//                       Beautifully designed components that you can copy and
-//                       paste into your apps. Accessible. Customizable. Open
-//                       Source.
-//                     </p>
-//                   </a>
-//                 </NavigationMenuLink>
-//               </li>
-//               <ListItem href="/docs" title="Introduction">
-//                 Re-usable components built using Radix UI and Tailwind CSS.
-//               </ListItem>
-//               <ListItem href="/docs/installation" title="Installation">
-//                 How to install dependencies and structure your app.
-//               </ListItem>
-//               <ListItem href="/docs/primitives/typography" title="Typography">
-//                 Styles for headings, paragraphs, lists...etc
-//               </ListItem>
-//             </ul>
-//           </NavigationMenuContent>
-//         </NavigationMenuItem>
-//         <NavigationMenuItem>
-//           <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-//           <NavigationMenuContent>
-//             <ul className="w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-1 lg:w-[600px] ">
-//               {components.map((component) => (
-//                 <ListItem
-//                   key={component.title}
-//                   title={component.title}
-//                   href={component.href}
-//                 >
-//                   {component.description}
-//                 </ListItem>
-//               ))}
-//             </ul>
-//           </NavigationMenuContent>
-//         </NavigationMenuItem>
-//         <NavigationMenuItem>
-//           <Link href="/docs" legacyBehavior passHref>
-//             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-//               Documentation
-//             </NavigationMenuLink>
-//           </Link>
-//         </NavigationMenuItem>
-//       </NavigationMenuList>
-//     </NavigationMenu>
-//   )
-// }
-
-
 const DesktopNav: React.FC<{
   links: LinkDefExtended[],
 }> = ({
@@ -135,7 +30,7 @@ const DesktopNav: React.FC<{
 
             if (el.isAIMenu) {
               return (
-                <NavigationMenuItem>
+                <NavigationMenuItem key={index}>
                   <Link href={el.href} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       {el.title}
@@ -145,11 +40,11 @@ const DesktopNav: React.FC<{
               )
             } else if (el.title == 'Community') {
               return (
-                <NavigationMenuItem>
+                <NavigationMenuItem key={index}>
                   <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
                   <NavigationMenuContent>
-                    <ul className="grid md:grid-cols-2 gap-3 p-6 md:w-[400px] lg:w-[500px]">
-                      <li className="row-span-3">
+                    <ul className="grid md:grid-cols-2 gap-3 p-6 md:w-[400px] lg:w-[500px]" key={index}>
+                      <li className="row-span-3" key='0'>
                         <NavigationMenuLink asChild>
                           <a
                             className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
@@ -165,12 +60,12 @@ const DesktopNav: React.FC<{
                           </a>
                         </NavigationMenuLink>
                       </li>
-                      {el.childMenu?.map((component) => (
-                        <div className="relative flex items-center my-2">
+                      {el.childMenu?.map((component, index) => (
+                        <div className="relative flex items-center my-2" key={index}>
                           <div className="mr-2 mt-0">
                           {component.icon}
                           </div>
-                          <ListItem href={component.href} title={component.title}>
+                          <ListItem href={component.href} title={component.title} key={index}>
                             {component.contents}
                           </ListItem>
                         </div>
@@ -182,13 +77,13 @@ const DesktopNav: React.FC<{
               )
             } else {
               return (
-                <NavigationMenuItem>
+                <NavigationMenuItem key={index}>
                   <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
                   <NavigationMenuContent>
-                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[500px] ">
-                      {el.childMenu?.map((component) => (
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[500px] " key={index}>
+                      {el.childMenu?.map((component, index) => (
                         <ListItem
-                          key={component.title}
+                          key={index}
                           title={component.title}
                           href={component.href}
                         >
@@ -211,9 +106,9 @@ export default DesktopNav
 const ListItem = React.forwardRef<
   React.ElementRef<"a">,
   React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
+>(({ className, title, children, key, ...props }, ref) => {
   return (
-    <li>
+    <li key={key}>
       <NavigationMenuLink asChild>
         <a
           ref={ref}

package/components/commerce/drawer/index.tsx

@@ -27,14 +27,6 @@ const CommerceUIComponent: React.FC = observer(() => {
     router.push('/checkout')
   }
 
-    // see handleCloseGesture()
-  const setOpen = (b: boolean): void => {
-    if (!b) {
-      if (!drawer.closedByUser) {
-        drawer.setClosedByUser(true)
-      }
-    }
-  }
 
   const handleHandleClicked = (): void => {
 
@@ -64,19 +56,10 @@ const CommerceUIComponent: React.FC = observer(() => {
     return false
   }
 
-
   return (
     <CommerceDrawer 
-      open={drawer.open} 
-      setOpen={setOpen}
-      snapPoints={drawer.points}
-      modal={drawer.modal}
-      activeSnapPoint={drawer.activePoint}
-      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
       handleHandleClicked={handleHandleClicked}
       handleCloseGesture={handleCloseGesture}
-      micro={drawer.state === 'micro'}
-      mobile={drawer.isMobile}
       drawerClx='flex flex-col'
     >
       {drawer.state === 'full' && (

package/components/commerce/drawer/shell.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, {type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
 
 import { 
   Drawer, 
@@ -10,74 +11,75 @@ import {
 import { cn } from '@hanzo/ui/util'
 
 import '../../../style/drawer-handle-overrides.css'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
 
 const CommerceDrawer: React.FC<PropsWithChildren & 
-  Omit<DrawerProps, 'onOpenChange'> & 
+  Omit<DrawerProps, 
+    'onOpenChange' | 
+    'open' | 
+    'snapPoints' | 
+    'modal' |
+    'setActiveSnapPoint' | 
+    'activeSnapPoint' 
+  > & 
   {
-    setOpen: (b: boolean) => void
     handleHandleClicked: () => void
     drawerClx?: string
-    mobile?: boolean
-    micro?: boolean
   }
-> = ({
+> = observer(({
   children,
-  open,
-  setOpen,
-  modal,
-  snapPoints,
-  setActiveSnapPoint,
-  activeSnapPoint,
   handleHandleClicked,
   drawerClx='',
-  mobile=false,
-  micro=false,
   ...rest
-}) => (
-    // @ts-ignore
-  <Drawer 
-    open={open} 
-    onOpenChange={setOpen} 
-    modal={modal} 
-    snapPoints={snapPoints}
-    setActiveSnapPoint={setActiveSnapPoint}
-    activeSnapPoint={activeSnapPoint}
-    fastDragSkipsToEnd={false}
-    dragHandleOnly={true}
-    handleHandleClicked={handleHandleClicked}
-    extendHandleDragRegion={false}
-//    debugOutput
-    {...rest}
-  >
-    <DrawerContent 
-      defaultHandle={false} 
-      className={cn(
-        'border-0',
-        //(micro ? (mobile ? 'mt-4 pt-1.5' : 'mt-5 pt-4') : 'mt-5 pt-5'),
-        mobile ? 'pt-5' : 'pt-6',
-        'w-full h-full',
-      )}
-       // https://github.com/radix-ui/primitives/discussions/935
-      onOpenAutoFocus={(e) => {e.preventDefault()}}
+}) => {
+  
+  const drawer = useCommerceDrawer()
+
+  return (
+    <Drawer 
+      open={drawer.open} 
+      onOpenChange={() => {}} 
+      modal={drawer.modal} 
+      snapPoints={drawer.points}
+      activeSnapPoint={drawer.activePoint}
+      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
+      fastDragSkipsToEnd={false}
+      dragHandleOnly={true}
+      handleHandleClicked={handleHandleClicked}
+      extendHandleDragRegion={false}
+  //    debugOutput
+      {...rest}
     >
-      <DrawerHandle 
+      <DrawerContent 
+        defaultHandle={false} 
         className={cn(
-          'absolute top-0 left-0 right-0 mx-auto z-10',
-          'flex justify-center items-start',
-          'border-t rounded-t-lg border-muted-2',
-          mobile ? 'h-5 touch-pan-y' : 'h-6',
-        )} 
+          'border-0',
+          drawer.isMobile ? 'pt-5' : 'pt-6',
+          'w-full h-full',
+        )}
+        // https://github.com/radix-ui/primitives/discussions/935
+        onOpenAutoFocus={(e) => {e.preventDefault()}}
       >
-        <div className={cn(
-            // pseudo-handle
-          'rounded-[3px] bg-level-3',
-          mobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
-          !mobile ? 'cursor-grab active:cursor-grabbing' : '',
-        )} />
-      </DrawerHandle>
-      {children}
-    </DrawerContent>
-  </Drawer>
-)
+        <DrawerHandle 
+          className={cn(
+            'absolute top-0 left-0 right-0 mx-auto z-10',
+            'flex justify-center items-start',
+            'border-t rounded-t-lg border-muted-3',
+            drawer.isMobile ? 'h-5 touch-pan-y' : 'h-6',
+          )} 
+        >
+          <div className={cn(
+              // pseudo-handle
+            'rounded-[3px] bg-level-3',
+            drawer.isMobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
+            !drawer.isMobile ? 'cursor-grab active:cursor-grabbing' : '',
+          )} />
+        </DrawerHandle>
+        {children}
+      </DrawerContent>
+    </Drawer>
+  )
+})
+
 
 export default CommerceDrawer

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

@@ -2,9 +2,7 @@
 import React, { useState } from 'react'
 import { Plus } from 'lucide-react'
 import { Search } from '../icons'
-import { ChatWidget } from '../../components'
 import { Button, Card } from '@hanzo/ui/primitives'
-import LuxLogo from '../icons/lux-logo'
 
 interface MobileNavMenuAIProps {
     setMenuOpen: (open: boolean) => void

package/components/footer.tsx

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

package/components/header/desktop.tsx

@@ -32,18 +32,10 @@ const DesktopHeader: React.FC<{
         'flex flex-row h-[80px] items-center  justify-between ' +
         'px-[8px] w-full mx-auto max-w-screen'
       }>
-        <Logo size='md' href='/' className='hidden lg:flex' key='two' layout='text-only'/>
-        <Logo size='sm' href='/' className='hidden md:flex lg:hidden' key='one' layout='text-only'/>
+        <Logo size='md' href='/' outerClx='hidden lg:flex' key='two' variant='text-only'/>
+        <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant='text-only'/>
         {/* md or larger */}
         <div className='flex gap-4 items-center'>
-          {/* <NavItems 
-            currentAs={currentAs}
-            items={links} 
-            className='flex md:gap-4 lg:justify-between lg:gap-7' 
-            itemClx='font-nav h-8'
-            key='three'
-          /> */}
-
           <DesktopNav links = {links}/>
           <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
           <AuthWidget/>

package/components/header/mobile.tsx

@@ -86,28 +86,25 @@ const MobileHeader: React.FC<{
     // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
     return (<>
       <header className={cn(
-        `bg-background fixed z-header top-0 left-0 w-full h-19 ${menuOpen() ? 'hidden' : 'block'}`,
+        `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
         className
       )}>
         {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
-        <div className="flex h-11 items-center justify-between pl-6 pr-4">
-          <div className='h-[74px] w-pr-100 flex flex-row justify-between items-center font-bold'>
-            <Logo href='/' size='sm' className={'top-[3px] h-full'} layout='text-only' />
-            {/* Not that key to the cross-fade effect 
-              is that this is **on top of** the logo. */}
-            {menuOpen() && (
-              <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
-              'flex flex-row ' +
-              'bg-background animate-mobile-menu-open'
-            }>
-                <Icons.Avatar className='self-center ' />
-              </div>
-            )}
-            <div className='flex gap-0 flex-row'>
-              <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
-              <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
+        <div className='w-full h-11 flex flex-row justify-between items-center font-bold pl-6 pr-4'>
+          <Logo href='/' size='sm' outerClx={'top-[3px] h-full'} variant='text-only' />
+          {/* Not that key to the cross-fade effect 
+            is that this is **on top of** the logo. */}
+          {menuOpen() && (
+            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            'flex flex-row ' +
+            'bg-background animate-mobile-menu-open'
+          }>
+              <Icons.Avatar className='self-center ' />
             </div>
-
+          )}
+          <div className='flex gap-0 flex-row'>
+            <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
+            <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
           </div>
 
         </div>

package/components/index.ts

@@ -12,6 +12,7 @@ export { default as NotFound } from './not-found'
 
 export { default as AuthListener } from './auth/auth-listener'
 export { default as AddWidget } from './commerce/add-widget'
+export { default as BackButton } from './back-button'
 export { default as BuyDrawer } from './commerce/drawer'
 export { default as DrawerMargin } from './drawer-margin'
 export { default as BuyButton } from './commerce/buy-button'
@@ -20,6 +21,7 @@ export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as CheckoutWidget } from './commerce/checkout-widget'
 export { default as LoginPanel } from './auth/login-panel'
 export { default as Scripts } from './scripts'
+export { default as Tooltip } from './tooltip'
 
 export { default as EmblaAutoplay } from 'embla-carousel-autoplay'
 

package/components/logo.tsx

@@ -2,77 +2,85 @@ import React from 'react'
 import Link from 'next/link'
 
 import { type TShirtSize  } from '@hanzo/ui/types'
+
 import { cn } from '@hanzo/ui/util'
 
 import * as Icons from './icons'
 
+const TEXT = 'LUX'
+
 const Logo: React.FC<{
   size?: TShirtSize
-  layout?: 'text-only' | 'logo-only' | 'full'
+  variant?: 'text-only' | 'logo-only' | 'full'
+  onClick?: () => void
   href?: string
-  className?: string
-  spanClassName?: string
+  outerClx?: string
+  textClx?: string
 }> = ({
   size,
   href, // no default please!
-  className='',
-  spanClassName,
-  layout='full'
+  outerClx='',
+  textClx='',
+  variant='full',
+  onClick,
 }) => {
   let classes: any = {}
-  const toAdd = (layout === 'logo-only') ? {
-    span: ' hidden',
-    icon: ''
-  } :
-  (layout === 'text-only') ? {
-    span: '',
-    icon: ' hidden'
-  } : 
-  {
-    span: '',
-    icon: ''
-  }
+  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' + toAdd.icon
-    classes.span = 'text-3xl' + toAdd.span
+    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' + toAdd.icon
-    classes.span = 'text-[1.8rem]/[1.8rem] tracking-tighter' + toAdd.span
+    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' + toAdd.icon
-    classes.span = 'text-lg' + toAdd.span
+    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' + toAdd.icon
-    classes.span = 'text-base' + toAdd.span
+    classes.icon = 'h-4 w-4 mr-1 color-inherit '
+    classes.span = 'text-base '
   }
 
-  const outerClasses = 'flex flex-row items-center ' + className
-  const spanClasses = 'inline-block font-bold font-heading ' 
-    + spanClassName
-    + (href ? ' hover:text-accent ' : ' cursor-default ') 
-    + classes.span 
+  classes.icon += toAdd.icon
+  classes.span += toAdd.span
 
-  const Inner: React.FC = () => (<>
-      <Icons.logo className={classes.icon} />
-      <span className={cn(spanClasses, ' text-inherit')}>LUX</span>
-  </>)
 
+  const outerClasses = 'flex flex-row items-center ' + outerClx
+  const spanClasses = 'inline-block font-bold font-heading ' 
+    + textClx
+    + (href ? ' hover:text-accent cursor-pointer ' : ' cursor-default ') 
+    + classes.span 
 
   return (
     href ? (
-      <Link href={href} className={outerClasses} >
-        <Inner />
+      <Link href={href} className={outerClasses} onClick={onClick} >
+        <Icons.logo className={classes.icon} />
+        <span className={spanClasses}>{TEXT}</span>
       </Link>
-  
     ) : (
-      <span className={outerClasses} >
-        <Inner />
+      <span className={outerClasses} onClick={onClick}>
+        <Icons.logo className={classes.icon} />
+        <span className={spanClasses}>{TEXT}</span>
       </span>
     )
   )

package/components/tooltip.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React from 'react'
+import { Tooltip as RTTooltip, type PlacesType } from 'react-tooltip'
+
+const Tooltip: React.FC<{
+  select: string
+  text: string
+  position?: PlacesType // https://react-tooltip.com/docs/options
+  clx?: string
+  offset?: number
+}> = ({
+  select,
+  text,
+  clx='',
+  position='bottom',
+  offset=2
+}) => (
+  <RTTooltip 
+    anchorSelect={select} 
+    noArrow 
+    opacity={1} 
+    content={text} 
+    place={position}
+    offset={offset}
+    delayShow={100}
+    delayHide={100}
+    className={'!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating' + clx}
+  />
+)
+
+export default Tooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "5.2.6",
+  "version": "5.2.8",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -44,6 +44,7 @@
     "firebase": "10.12.0",
     "react-device-detect": "^2.2.3",
     "react-social-icons": "^6.4.0",
+    "react-tooltip": "^5.26.4",
     "request": "^2.88.2",
     "usehooks-ts": "^3.1.0"
   },

package/components/commerce/checkout-panel/close-button.tsx

@@ -1,26 +0,0 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@hanzo/ui/util'
-
-import Logo from '../../logo'
-import type { TShirtSize } from '@hanzo/ui/types'
-
-const CloseButton: React.FC<{
-  close: () => void
-  size?: TShirtSize 
-  className?: string
-}> = ({
-  close,
-  size,
-  className=''
-}) => (
-  <div
-    onClick={close}
-    className={cn('md:self-start', className)}
-  >
-    <Logo layout='text-only' href='/' size={size}/>
-  </div>    
-)
-
-export default CloseButton