@luxfi/core 5.0.7 → 5.1.0

package/commerce/{data/index.ts → index.ts}

@@ -13,6 +13,6 @@ export const getBullionFamilies = (videoMap: Map<string, VideoDef>) => (
   )
 )
 
-export { default as serviceOptions } from '../../conf/lux-commerce-options'
+export { default as serviceOptions } from './lux-service-options'
 export { default as bullionPrice1oz } from './bullion-price-1oz'
 

package/components/commerce/buy-drawer/drawer.tsx

@@ -3,70 +3,29 @@ import React, {type PropsWithChildren } from 'react'
 
 import { X as LucideX} from 'lucide-react'
 
-import { 
-  Button, 
-  Drawer, 
-  DrawerContent, 
-  DrawerHandle,
-  type DrawerProps,
-  useDrawerContext 
-} from '@hanzo/ui/primitives'
+import { Button, Drawer, DrawerContent, type DrawerProps } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import '../../../style/drawer-handle-overrides.css'
-
 const CommerceDrawer: React.FC<PropsWithChildren & 
   Omit<DrawerProps, 'onOpenChange'> & 
   {
     setOpen: (b: boolean) => void
-    handleHandleClicked: () => void
     drawerClx?: string
-    setActiveSPIndexSetter?: (fn: (snapPoint: number | string | null) => void) => void
   }
 > = ({
   children,
   open,
   setOpen,
   modal,
-  snapPoints,
-  setActiveSnapPoint,
-  activeSnapPoint,
-  handleHandleClicked,
-  setActiveSPIndexSetter,
   drawerClx='',
   ...rest
-}) => {
-  
- 
-  return (
+}) => (
     // @ts-ignore
-  <Drawer 
-    open={open} 
-    onOpenChange={setOpen} 
-    modal={modal} 
-    snapPoints={snapPoints}
-    setActiveSnapPoint={setActiveSnapPoint}
-    activeSnapPoint={activeSnapPoint}
-    fastDragSkipsToEnd={false}
-    handleOnly={true}
-    setActiveSPIndexSetter={setActiveSPIndexSetter}
-    
-
-    {...rest}
-  >
-    <DrawerContent defaultHandle={false} className={cn(
+  <Drawer open={open} onOpenChange={setOpen} modal={modal} {...rest}>
+    <DrawerContent modal={modal} className={cn(
       'rounded-t-xl mt-6 pt-6',
       drawerClx
     )}>
-
-      <DrawerHandle 
-        className={
-          'absolute left-0 right-0 mx-auto top-2 ' + 
-          'w-[100px] h-3 rounded-full bg-level-3 hover:bg-level-2 shrink-0'
-        } 
-        handleClick={handleHandleClicked}
-      />
-
       {children}
       <Button
         variant='ghost'
@@ -79,7 +38,6 @@ const CommerceDrawer: React.FC<PropsWithChildren &
     </DrawerContent>
   </Drawer>
 )
-}
 
 
 export default CommerceDrawer

package/components/commerce/buy-drawer/index.tsx

@@ -1,242 +1,44 @@
 'use client'
-import React, { useEffect, useRef, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import { action, computed, makeObservable, observable, reaction, type IReactionDisposer } from 'mobx'
+import React from 'react'
+import { useRouter } from 'next/navigation'
 import { observer } from 'mobx-react-lite'
 
-import { CarouselBuyCard, useCommerce } from '@hanzo/commerce'
-
-import { useCommerceUI } from '../../../commerce/ui-context'
+import { useCommerceUI, CarouselBuyCard } from '@hanzo/commerce'
 
 import CommerceDrawer from './drawer'
 import CheckoutButton from '../checkout-button'
 
-const BUY = '700px'
-const MICRO = '120px'
-const BOTH = [MICRO, BUY]
-const BUY_ONLY = [BUY]
-const MICRO_ONLY = [MICRO]
-
-type DrawerMode = 'checkout' | 'added' | 'buy' | 'buy-added' | 'buy-checkout' | 'none' | 'closed' // manually
-type DrawerState = 'micro' | 'buy' | 'closed'
-
-const MODE_TO_STATE = {
-  checkout: 'micro',
-  added: 'micro',
-  buy: 'buy',
-  'buy-checkout': 'buy',
-  'buy-added': 'buy',
-  none: 'closed',
-  closed: 'closed'
-} satisfies Record<DrawerMode, DrawerState>
-
-const MODE_TO_POINTS = {
-  checkout: MICRO_ONLY,
-  added: BOTH,
-  buy: BUY_ONLY,
-  'buy-checkout': BOTH,
-  'buy-added': BOTH,
-  none: BOTH,
-  closed: BOTH
-}
-
-
-class ObsDrawerState {
-
-  _mode: DrawerMode = 'none'
-
-  constructor() {
-    makeObservable(this, {
-      _mode: observable,
-      setMode: action,
-      mode: computed,
-      state: computed,
-      points: computed,
-      modal: computed,
-      activePoint: computed
-    })
-  }
-
-  get mode(): DrawerMode {return this._mode}
-  get state(): DrawerState  { return MODE_TO_STATE[this._mode] }
-  get points(): (number | string)[] { return MODE_TO_POINTS[this._mode] }
-  get modal(): boolean { return this.state !== 'micro' }
-  get activePoint(): number | string | null {
-    if (this.state === 'buy') return BUY
-    if (this.state === 'micro') return MICRO
-    return null
-  }
-
-  setMode = (m: DrawerMode) => {this._mode = m}
-}
-
 const CommerceUIComponent: React.FC = observer(() => {
 
-  const cmmc = useCommerce()
   const ui = useCommerceUI()
   const router = useRouter()
-  const isCheckout = usePathname() === '/checkout'
-
-  const stateRef = useRef<ObsDrawerState>(new ObsDrawerState())
-  const reactionDisposers = useRef<IReactionDisposer[]>([])
-
-  const [activeSnapPoint, setActiveSnapPoint] = useState<string | number | null>(null)
-  const setterRef = useRef<((index: number ) => void) | undefined>(undefined)
-
-  useEffect(() => {
-
-    reactionDisposers.current.push(reaction(
-
-      () => ({
-        buy: !!ui.buyOptionsSkuPath,
-        added: !isCheckout && ui.item,
-        checkout: !isCheckout && !cmmc.cartEmpty,
-        closed: ui.closed
-      }),
-      ({buy, added, checkout, closed}) => {
-        let mode: DrawerMode = 'none' // TODO: 'closed'
-        if (buy) {
-          if (added) {
-            mode = 'buy-added'
-          }
-          else if (checkout) {
-            mode = 'buy-checkout'
-          }
-          else {
-            mode = 'buy'
-          }
-        }
-        else {
-          if (closed) {
-            mode = 'closed'
-          }
-          else if (added) {
-            mode = 'added'
-          }
-          else if (checkout) {
-            mode = 'checkout'
-          }
-        }
-        stateRef.current.setMode(mode) 
-      },
-      {equals: (val, prev) => (
-        val.buy === prev.buy 
-        && 
-        val.added === prev.added
-        &&
-        val.checkout === prev.checkout
-        &&
-        val.closed === prev.closed
-      )}
-    )),
-    reactionDisposers.current.push(reaction(
-      () => ( stateRef.current.state ),
-      (s) => {
-        if (s === 'buy') {
-          //setterRef.current?.(stateRef.current.points.length - 1)
-          setActiveSnapPoint(BUY)
-        }
-        else if (s === 'micro') {
-          //setterRef.current?.(0)
-          setActiveSnapPoint(MICRO)
-        }
-      }
-    ))
-    return () => {
-      reactionDisposers.current?.forEach((d) => {d()})
-    }
-  }, [isCheckout])
-
-  const _setActiveSnapPoint = (pt: string | number | null): void => {
-    console.log("ON CHANGE: ", pt)
-    setActiveSnapPoint(pt)  
-  }
 
   const handleCheckout = () => {
     router.push('/checkout')
   }
 
-  const reallyOnlyCloseDrawer = (b: boolean) => {
     // Should only ever be called internally to close
-    // Using handleCloseGesture()
-  }
-
-  const handleHandleClicked = () => {
-    console.log("HANDLE CLICKED")
-
-    if (stateRef.current.state === 'buy') {
-      const toks = stateRef.current.mode.split('-')
-      if (toks.length <= 1) {
-        console.log("CLOSING 'BUY' ... ")
-        ui.hideBuyOptions()
-      }
-      else {
-        console.log("CLOSING 'BUY' to ", toks[1])
-        ui.hideBuyOptions()
-      }
-    }
-    else if (stateRef.current.state === 'micro') {
-      if (stateRef.current.mode === 'checkout') {
-        console.log(" CLOSING 'CHECKOUT' ... ")
-        ui.setClosed(true)
-      }
-      else if (stateRef.current.mode === 'added') {
-        console.log(" OPENING 'ADDED' ... ")
-        ui.showBuyOptions(ui.item?.sku ?? '')
-      }
-    }
-  }
-
-  const handleCloseGesture = () => {
-    if (stateRef.current.state === 'buy') {
-      console.log(" CLOSING 'BUY' ... ")
-      const toks = stateRef.current.mode.split('-')
-      if (toks.length <= 1) {
-        stateRef.current.setMode('none')
-      }
-      else {
-        stateRef.current.setMode(toks[1] as DrawerMode) // 'checkout' or 'added'
-      }
-      return true // "handled!"
+  const reallyOnlyCloseDrawer = (b: boolean) => {
+    if (!b ) {
+      ui.hideBuyOptions()
     }
-    console.log("DEFAULT CLOSE ACTION")
-    return false
   }
 
-
-  const setActiveSPIndexSetter = (fn: (index: number ) => void): void => {
-    setterRef.current = fn 
-  }
-
-
   return (
     <CommerceDrawer 
-      open={!(stateRef.current.state === 'closed')} 
+      open={!!ui.buyOptionsSkuPath} 
       setOpen={reallyOnlyCloseDrawer}
-      drawerClx={'w-full h-full'}
-      snapPoints={stateRef.current.points}
-      modal={stateRef.current.modal}
-      activeSnapPoint={activeSnapPoint}
-      setActiveSnapPoint={_setActiveSnapPoint}
-      handleHandleClicked={handleHandleClicked}
-      setActiveSPIndexSetter={setActiveSPIndexSetter}
-      handleCloseGesture={handleCloseGesture}
+      drawerClx={'w-full md:max-w-[550px] md:mx-auto lg:max-w-[50vw]'}
     >
-      {stateRef.current.state === 'buy' && (
-        <CarouselBuyCard 
-          skuPath={ui.buyOptionsSkuPath!} 
-          checkoutButton={
-            <CheckoutButton handleCheckout={handleCheckout} className='w-full min-w-[160px] sm:max-w-[320px]'/>
-          }
-          onQuantityChanged={ui.itemQuantityChanged}
-          clx='w-full'
-          addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
-          selectorClx='max-w-[475px]'
-        />
-      )}
-      {stateRef.current.state === 'micro' && (
-        <p>Mode: {stateRef.current.mode}</p>
-      )}
+      <CarouselBuyCard 
+        skuPath={ui.buyOptionsSkuPath!} 
+        checkoutButton={
+          <CheckoutButton handleCheckout={handleCheckout} className='w-full min-w-[160px] sm:max-w-[320px]'/>
+        }
+        clx='w-full'
+        addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
+        selectorClx='max-w-[475px]'
+      />
     </CommerceDrawer>
   )
 })

package/components/commerce/checkout-button.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef } from 'react'
 import { observable, type IObservableValue, reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
+import { type LucideProps } from 'lucide-react'
 
 import { Button, type ButtonProps } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
@@ -11,15 +12,11 @@ import * as Icons from '../icons'
 
 const IconAndQuantity: React.FC<{
   animateOnQuantityChange?: boolean
-  showArrow?: boolean
-  showQuantity?: boolean
   clx?: string
   iconClx?: string
   digitClx?: string
 }> = observer(({
-  animateOnQuantityChange=false,
-  showArrow=true,
-  showQuantity=true,
+  animateOnQuantityChange=true,
   clx='',
   iconClx='',
   digitClx=''
@@ -50,7 +47,6 @@ const IconAndQuantity: React.FC<{
 
   return (
     <div className={cn('flex items-center justify-center', clx)}>
-    {showQuantity && (
       <div className={cn(
         'relative flex items-center justify-center mr-1', 
         ((wiggleRef.current.get() === 'more') ? 
@@ -64,13 +60,12 @@ const IconAndQuantity: React.FC<{
           'absolute left-0 right-0 top-0 bottom-0',
           digitClx
         )}>
-          <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
+          <div style={{color: 'white' /* tailwind bug? */, fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
         </div>
         )}
         <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
       </div>            
-    )}
-      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
+      <span style={{fontSize: '17px',}}>&rsaquo;</span>
     </div>
   )
 })  
@@ -78,7 +73,6 @@ const IconAndQuantity: React.FC<{
 const CheckoutButton: React.FC<ButtonProps & {
   handleCheckout: () => void
   showQuantity?: boolean
-  showArrow?: boolean
   animateOnQuantityChange?: boolean
   centerText?: boolean
 }> = ({
@@ -87,10 +81,8 @@ const CheckoutButton: React.FC<ButtonProps & {
   rounded='lg',
   className,
   showQuantity=true,
-  showArrow=true,
   animateOnQuantityChange=true,
   centerText=true,
-  children,
   ...rest
 }) => {
 
@@ -101,27 +93,22 @@ const CheckoutButton: React.FC<ButtonProps & {
       variant={variant}
       rounded={rounded}
       className={cn(
-        'flex justify-between items-stretch group', 
-        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
         className, 
+        'flex justify-between items-stretch', 
+        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : ''
       )}
     >
-      {centerText && ( // must scale this one too, as it effects layout
+      {showQuantity && centerText && (
+        <IconAndQuantity clx='invisible' />
+      )}
+      <div className='flex justify-center items-center'>Checkout</div>
+      {showQuantity && (
         <IconAndQuantity 
-          showArrow={showArrow} 
-          showQuantity={showQuantity}
-          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
+          animateOnQuantityChange={animateOnQuantityChange}
+          iconClx='fill-fg-foreground'
+          digitClx='text-primary-fg leading-none font-bold font-sans' 
         />
       )}
-      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
-      <IconAndQuantity 
-        clx='group-hover:scale-105 transition-scale transition-duration-300'
-        animateOnQuantityChange={animateOnQuantityChange}
-        showArrow={showArrow} 
-        showQuantity={showQuantity}
-        iconClx='fill-background'
-        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
-      />
     </Button>
   )
 }

package/components/commerce/checkout-widget/index.tsx

@@ -1,104 +1,18 @@
 'use client'
-import React, { useRef } from 'react'
+import React from 'react'
 import { createPortal } from 'react-dom'
 import { usePathname, useRouter } from 'next/navigation'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
-import { useStepAnimation } from '@hanzo/ui/util-client'
-
 import { Image } from '@hanzo/ui/primitives'
 
-import { useCommerceUI } from '../../../commerce/ui-context'
+import { useCommerceUI } from '@hanzo/commerce'
 
 import CheckoutButton from '../checkout-button'
 import useAnimationClxSet from './use-anim-clx-set'
+import useLaggingItemRef from './use-lagging-item-ref'
 import CONST from './const'
-import type { LineItem } from '@hanzo/commerce/types'
-
-const transStyle = (t: { transition: string, from : string, to: string } | undefined) : any => (
-  t ? {
-    transitionProperty: t.transition,
-    transitionTimingFunction: CONST.animTimingFn,
-    transitionDuration: `${CONST.animDurationMs}ms`
-  } : {}        
-)
-
-const transClx = (on: boolean, t: { transition: string, from : string, to: string } | undefined) : string => (
-  on ? (t?.from ?? '') : (t?.to ?? '')
-)
-
-const VARS: any = {
-  BR: {
-    pos: 'bottom-[24px] right-[66px]',
-    width: 'w-initial', 
-    centerText: false,
-    coClx: 'w-auto',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100 origin-right', 
-        to: 'scale-x-0 opacity-0 origin-right'
-      }
-    },
-    showArrow: true
-  },
-  TR: {
-    pos: 'top-[48px] md:top-[80px] right-[28px]',
-    width: 'w-initial', 
-    centerText: false,
-    showQuantity: false,
-    showArrow: true,
-    coClx: 'w-auto px-3 gap-1',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform',
-        from : 'scale-x-100 origin-right', 
-        to: 'scale-x-0 origin-right'
-      }
-    },
-  },
-  TRIO: {
-    pos: 'top-[48px] md:top-[70px] right-[28px]',
-    centerText: false,
-    showQuantity: true,
-    showArrow: true,
-    width: 'w-initial', 
-    coClx: 'hidden',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100', 
-        to: 'scale-x-50 opacity-0'
-      }
-    },
-  }
-}
-
-const v = 'TR'
 
 const CheckoutWidget: React.FC<{
   clx?: string
@@ -112,78 +26,58 @@ const CheckoutWidget: React.FC<{
   const clxSet = useAnimationClxSet(isCheckout)
 
   const itemRef = useCommerceUI()
-
-    // for rendering content after itemRef.item() would return false
-  const persistentRef = useRef<LineItem | undefined>(undefined)
-
-    // Doing double duty of being initial step fn for StepAnimation,
-    // and also capturing the item for persistentRef :)
-  const initialStepFn = (): boolean => {
-    if (!!itemRef.item && !persistentRef.current) {
-      persistentRef.current = itemRef.item
-    }  
-    return !!itemRef.item
-  }
-  const steps = useStepAnimation(initialStepFn, [CONST.animDurationMs, CONST.animDurationMs, CONST.animDurationMs])
+  const laggingRef = useLaggingItemRef(itemRef, CONST.animDurationMs)
 
   const handleCheckout = () => { router.push('/checkout')}
 
   return globalThis?.document?.body && createPortal(
     (<div 
       className={cn(
-        VARS[v].width,
-        'z-below-modal-2 fixed ',
-        VARS[v].pos,
-        'rounded-lg',
+        'min-w-[160px] sm:max-w-[320px] w-[calc(100%-72px)] ml-2 !h-10',
+        'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
+        'rounded-lg bg-background',
         'flex',
-        steps.notPast(0) ? 'bg-background' : '',
-        steps.notPast(1) ? 'gap-2' : '',
+        itemRef.item ? 'gap-2' : '',
         clxSet.asArray.join(' ')
       )}
-      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
+      style={laggingRef.item ? {} : CONST.shadowStyle}
     >
       <div 
         className={cn(
           'flex flex-row justify-between items-center', 
-          transClx(steps.notPast(0), VARS[v].activeItemAnim.info),
-          VARS[v].itemClx, 
-          steps.notPast(1) ? 'px-3 border rounded-lg bg-level-1 border-muted-3' : '' 
+          itemRef.item ? CONST.compWidthClx.itemInfo : 'w-0',
+          laggingRef.item ? 'px-3 border rounded-lg border-muted-3' : '' 
         )}
-        style={transStyle(VARS[v].activeItemAnim.info)}
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
       >
-        {steps.notPast(1) && persistentRef.current?.img && (
-          <Image def={persistentRef.current.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
-        )} 
-        {steps.notPast(1) && persistentRef.current && (<div className='text-foreground grow ml-1'>
-          <p className='whitespace-nowrap text-ellipsis text-sm'>{persistentRef.current.title}</p>
-          <p className='whitespace-nowrap text-clip text-xxs' >recently added...</p>
-        </div>)}
+        {laggingRef.item?.img ? (
+          <Image def={laggingRef.item.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
+        ) : ( // placeholder so things align
+          <div style={{height: CONST.itemImgConstraint.h, width: CONST.itemImgConstraint.w}} className='bg-level-3 grow-0 shrink-0'/>
+        )}
+
+        <div className='text-muted grow ml-1'>
+          {laggingRef.item && (<>
+            <p className='whitespace-nowrap text-sm'>{laggingRef.item.title}</p>
+            <p className='whitespace-nowrap text-xxs' >recently added...</p>
+          </>)}
+        </div>
       </div>
       <CheckoutButton 
         handleCheckout={handleCheckout} 
-        centerText={VARS[v].centerText ?? !steps.notPast(0)}
-        variant='primary' 
-        rounded='lg' 
-        showQuantity={VARS[v].showQuantity ?? true}
-        showArrow={VARS[v].showArrow ?? true}
-        className={cn(
-            // for setting and unsetting 'gap'
-          transClx((VARS[v].activeItemAnim.coText ? steps.notPast(3) : true), VARS[v].activeItemAnim.co),
-          VARS[v].coClx
-        )} 
-        style={transStyle(VARS[v].activeItemAnim.co)}
-      >
-        <div 
-          className={cn(
-            'overflow-hidden',
-            'flex justify-center items-center',
-            transClx(steps.notPast(2), VARS[v].activeItemAnim.coText),
-          )} 
-          style={transStyle(VARS[v].activeItemAnim.coText)}
-        >
-          Checkout
-        </div>
-      </CheckoutButton>
+        centerText={!!!itemRef.item}
+        variant='primary' rounded='lg' 
+        className={cn(itemRef.item ? CONST.compWidthClx.checkout : 'w-full')} 
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
+      />        
     </div>),
     globalThis?.document?.body
   )

package/components/commerce/checkout-widget/use-anim-clx-set.ts

@@ -1,10 +1,8 @@
 import { useEffect, useRef } from 'react'
 import { reaction, runInAction} from 'mobx'
 
-import { useCommerce } from '@hanzo/commerce'
-
 import ObsStringSet from './obs-string-set'
-import { useCommerceUI } from '../../../commerce/ui-context'
+import { useCommerce, useCommerceUI } from '@hanzo/commerce'
 
 export default (isCheckout: boolean): ObsStringSet => {
 

package/components/commerce/checkout-widget/use-lagging-item-ref.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react'
+import { reaction } from 'mobx'
+
+import type { LineItem, ObsLineItemRef } from "@hanzo/commerce/types"
+import { LineItemRef } from '@hanzo/commerce'
+
+export default (orig: ObsLineItemRef, lagMs: number): ObsLineItemRef => {
+
+    // a ref that is synced to 'orig', but persists for lagMs longer
+    // so ui does not jump while animating out.
+    // (Fascilitates for start and end states in animation) 
+  const laggingRef = useRef<LineItemRef>(new LineItemRef())
+
+  useEffect(() => (
+    reaction(
+      () => (orig.item),
+      (item: LineItem | undefined) => {
+        if (item) { 
+          laggingRef.current.set(item) 
+        }
+        else { 
+          setTimeout(() => { laggingRef.current.set(undefined) }, lagMs) 
+        }
+      },
+      {equals: (val, prev) => (val?.sku === prev?.sku)}
+    )
+  ), [])
+
+  return laggingRef.current
+}

package/components/header/desktop.tsx

@@ -29,7 +29,7 @@ const DesktopHeader: React.FC<{
       {/* md or larger */}
       <div className={
         'flex flex-row h-[80px] items-center  justify-between ' +
-        'px-[32px] w-full 2xl:mx-auto max-w-screen-2xl'
+        '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'/>

package/components/index.ts

@@ -10,12 +10,18 @@ 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 AddWidget } from './commerce/add-widget'
 export { default as BuyDrawer } from './commerce/buy-drawer'
-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 CheckoutWidget } from './commerce/checkout-widget'
 export { default as LoginPanel } from './auth/login-panel'
 export { default as Scripts } from './scripts'
 
+
+/* PLEASE KEEP
+export { 
+  default as HeadMetadata, 
+  getTitleFromTemplateString, 
+  TwitterComponent
+} from './head-metadata'
+*/

package/conf/index.ts

@@ -1,7 +1,5 @@
 import type { SelectionUISpecifier } from '@hanzo/commerce/types'
 
-export { default as commerceServiceOptions } from './lux-commerce-options'
-
 export const selectionUISpecifiers = {
 
   'LXM-CN': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "5.0.7",
+  "version": "5.1.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -27,7 +27,7 @@
   },
   "exports": {
     ".": "./components/index.ts",
-    "./commerce-data": "./commerce/data/index.ts",
+    "./commerce": "./commerce/index.ts",
     "./root-layout": "./root-layout/index.tsx",
     "./server-actions": "./server-actions/index.ts",
     "./next": "./next/index.ts",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@hanzo/auth": "2.4.6",
-    "@hanzo/commerce": "7.0.3",
-    "@hanzo/ui": "3.7.22",
+    "@hanzo/commerce": "7.0.2",
+    "@hanzo/ui": "3.7.0",
     "@next/third-parties": "^14.1.0",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -50,15 +50,13 @@
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "^0.344.0",
-    "mobx": "^6.12.0",
-    "mobx-react-lite": "^4.0.5",
     "next": "14.1.3",
     "next-themes": "^0.2.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3",
     "validator": "^13.11.0",
-    "zod": "3.23.8"
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",
@@ -66,8 +64,8 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/mdx": "^2.0.9",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.18",
     "tailwindcss": "^3.4.2",
     "typescript": "5.3.3"
   }

package/root-layout/index.tsx

@@ -10,10 +10,9 @@ 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, Scripts } from '../components'
-
 import BuyDrawer from '../components/commerce/buy-drawer'
+import CheckoutWidget from '../components/commerce/checkout-widget'
 
 import { selectionUISpecifiers } from '../conf'
 import type SiteDef from '../types/site-def'
@@ -100,10 +99,9 @@ const RootLayout: React.FC<PropsWithChildren & {
             options={siteDef.commerce!.options}
             uiSpecs={selectionUISpecifiers}
           >
-            <CommerceUIProvider >
-              <Guts />
-              <BuyDrawer />
-            </CommerceUIProvider>
+            <Guts />
+            <BuyDrawer />
+            <CheckoutWidget />
           </CommerceProvider>
         ) : (
           <Guts />

package/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "../tsconfig.modules.base.json",
+  "extends": "../tsconfig.lux.base.json",
   "include": [
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
   ],
   "exclude": [
-    "node_modules"
-  ]
+    "node_modules",
+  ],
 }

package/commerce/ui-context/commerce-ui.ts

@@ -1,118 +0,0 @@
-import { 
-  action,
-  computed, 
-  makeObservable, 
-  observable, 
-} from 'mobx'
-import type { CommerceService, LineItem, ObsLineItemRef } from '@hanzo/commerce/types'
-
-
-interface CommerceUI extends ObsLineItemRef {
-  showBuyOptions: (skuPath: string) => void
-  hideBuyOptions: () => void
-  get buyOptionsSkuPath(): string | undefined
-
-  itemQuantityChanged(sku: string, val: number, prevVal: number): void
-
-  get closed(): boolean
-  setClosed(b: boolean): void
-
-}
-
-class CommerceUIStore implements CommerceUI {
-
-  static readonly TIMEOUT = 1500
-  _buyOptionsSkuPath: string | undefined = undefined
-  _closed: boolean = false
-  _paused: boolean = false
-  _activeItem: LineItem | undefined = undefined
-  _lastActivity: number | undefined = undefined
-  _service: CommerceService
-
-  constructor(s: CommerceService) {
-    this._service = s
-    makeObservable(this, {
-      _buyOptionsSkuPath: observable,
-      _activeItem: observable.shallow, 
-      _closed: observable,
-      showBuyOptions: action,
-      hideBuyOptions: action,
-      buyOptionsSkuPath: computed,
-      itemQuantityChanged: action,
-      setClosed: action,
-      closed: computed,
-      tick: action,
-      item: computed
-    })
-  }
-
-  showBuyOptions = (skuPath: string): void => {
-    this._service.setCurrentItem(undefined)
-    this._buyOptionsSkuPath = skuPath
-    this._paused = true
-    this._closed = false
-  } 
-
-  hideBuyOptions = (): void => {
-    this._buyOptionsSkuPath = undefined
-    this._paused = false
-    if (this._lastActivity) {
-      this._lastActivity = Date.now()
-    }
-  }
-
-  get buyOptionsSkuPath(): string | undefined {
-    return this._buyOptionsSkuPath
-  } 
-
-  tick = () => {
-    if (
-      !this._paused
-      &&
-      this._lastActivity 
-      && 
-      (Date.now() - this._lastActivity >= CommerceUIStore.TIMEOUT)
-    ) {
-      this._activeItem = undefined
-      this._lastActivity = undefined
-    }
-  }
-
-  itemQuantityChanged = (sku: string, val: number, oldVal: number): void  => {
-
-    if (val === 0) {
-      if (this._activeItem?.sku === sku) {
-        this._activeItem = undefined
-        this._lastActivity = undefined
-      }
-      // otherwise ignore
-    }
-    else if (val < oldVal) {
-      if (this._activeItem?.sku === sku) {
-        this._lastActivity = Date.now()
-      }
-      // otherwise ignore
-    }
-    else {
-      this._activeItem = this._service.getItemBySku(sku)
-      this._lastActivity = Date.now()
-    }
-  } 
-
-  get item(): LineItem | undefined {
-    return this._activeItem
-  }
-
-  get closed(): boolean {
-    return this._closed
-  }
-
-  setClosed = (b: boolean): void => { this._closed = b}
-
-  dispose = () => {}
-}
-
-export {
-  CommerceUIStore,
-  type CommerceUI
-}

package/commerce/ui-context/index.tsx

@@ -1,50 +0,0 @@
-'use client'
-import React, { 
-  createContext, 
-  useContext, 
-  useRef, 
-  type PropsWithChildren, 
-  useEffect
-} from 'react'
-
-// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
-import { enableStaticRendering } from 'mobx-react-lite'
-enableStaticRendering(typeof window === "undefined")
-
-import  { type CommerceUI, CommerceUIStore } from './commerce-ui'
-import { useCommerce } from '@hanzo/commerce'
-
-const CommerceUIContext = createContext<CommerceUIStore | undefined>(undefined)
-
-const useCommerceUI = (): CommerceUI => {
-  return useContext(CommerceUIContext) as CommerceUIStore
-}
-
-const CommerceUIProvider: React.FC<PropsWithChildren & {
-  DEBUG_NO_TICK?: boolean
-}> = ({ 
-  children,
-  DEBUG_NO_TICK=false
-}) => {
-
-  const cmmc = useCommerce()
-  const valueRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc))
-
-  useEffect(() => {
-
-    //valueRef.current = new CommerceUIStore(cmmc)
-    return () => { valueRef.current?.dispose() }
-  }, [])
-
-  return (
-    <CommerceUIContext.Provider value={valueRef.current}>
-      {children}
-    </CommerceUIContext.Provider>
-  )
-}
-
-export {
-  useCommerceUI, 
-  CommerceUIProvider
-}
-

package/components/commerce/add-widget.tsx

@@ -1,20 +0,0 @@
-'use client'
-import React from 'react'
-
-import type { LineItem } from '@hanzo/commerce/types'
-import  { AddToCartWidget } from '@hanzo/commerce'
-
-import { useCommerceUI } from '../../commerce/ui-context'
-
-const AddWidget: React.FC<{
-  item: LineItem
-  disabled?: boolean
-  className?: string
-  buttonClx?: string
-  variant?: 'minimal' | 'primary' | 'outline'
-}> = (props) => {
-  const ui = useCommerceUI()
-  return <AddToCartWidget {...props} onQuantityChanged={ui.itemQuantityChanged}/>
-}
-
-export default AddWidget

package/components/commerce/buy-button.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { type VariantProps } from '@hanzo/ui/util'
-
-import { cn } from '@hanzo/ui/util'
-import { useCommerceUI } from '../../commerce/ui-context'
-
-const BuyButton: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-  {
-    skuPath: string
-    className?: string 
-  }
-> = ({
-  skuPath,
-  children,
-  className='',
-  ...rest
-}) => {
-
-  const ui = useCommerceUI()
-  const handleClick = () => { ui.showBuyOptions(skuPath) }
-  
-  return (
-    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
-      {children}
-    </Button>
-  )
-}
-
-export default BuyButton

package/style/drawer-handle-overrides.css

@@ -1,154 +0,0 @@
-[vaul-drawer] {
-  touch-action: none;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, 100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='top'] {
-  transform: translate3d(0, -100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='left'] {
-  transform: translate3d(-100%, 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='right'] {
-  transform: translate3d(100%, 0, 0);
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
-  overflow-y: hidden !important;
-}
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
-  overflow-y: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
-  overflow-x: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
-  overflow-x: hidden !important;
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-overlay] {
-  opacity: 0;
-  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-overlay][vaul-drawer-visible='true'] {
-  opacity: 1;
-}
-
-[vaul-drawer]::after {
-  content: '';
-  position: absolute;
-  background: inherit;
-  background-color: inherit;
-}
-
-[vaul-drawer][vaul-drawer-direction='top']::after {
-  top: initial;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom']::after {
-  top: 100%;
-  bottom: initial;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='left']::after {
-  left: initial;
-  right: 100%;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='right']::after {
-  left: 100%;
-  right: initial;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-handle] {
-  /* opacity: 0.8; */
-  touch-action: pan-y;
-  cursor: grab;
-}
-
-/* [vaul-handle]:hover, */
-[vaul-handle]:active {
-  opacity: 1;
-}
-
-[vaul-handle]:active {
-  cursor: grabbing;
-}
-
-[vaul-handle-hitarea] {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: max(100%, 2.75rem); /* 44px */
-  height: max(100%, 2.75rem); /* 44px */
-  touch-action: inherit;
-}
-
-[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
-  opacity: 0;
-}
-
-[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
-  opacity: 1;
-}
-
-/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
-@keyframes fake-animation {
-  from {
-  }
-  to {
-  }
-}
-
-@media (pointer: fine) {
-  [vaul-handle-hitarea] {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  [vaul-drawer] {
-    user-select: none;
-  }
-}
-