@luxfi/core 5.0.5 → 5.0.6

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

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

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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,50 @@
+'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

@@ -0,0 +1,20 @@
+'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

@@ -0,0 +1,34 @@
+'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/components/commerce/buy-drawer/drawer.tsx

@@ -3,29 +3,70 @@ import React, {type PropsWithChildren } from 'react'
 
 import { X as LucideX} from 'lucide-react'
 
-import { Button, Drawer, DrawerContent, type DrawerProps } from '@hanzo/ui/primitives'
+import { 
+  Button, 
+  Drawer, 
+  DrawerContent, 
+  DrawerHandle,
+  type DrawerProps,
+  useDrawerContext 
+} 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} {...rest}>
-    <DrawerContent modal={modal} className={cn(
+  <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(
       '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'
@@ -38,6 +79,7 @@ const CommerceDrawer: React.FC<PropsWithChildren &
     </DrawerContent>
   </Drawer>
 )
+}
 
 
 export default CommerceDrawer

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

@@ -1,44 +1,242 @@
 'use client'
-import React from 'react'
-import { useRouter } from 'next/navigation'
+import React, { useEffect, useRef, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { action, computed, makeObservable, observable, reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { useCommerceUI, CarouselBuyCard } from '@hanzo/commerce'
+import { CarouselBuyCard, useCommerce } from '@hanzo/commerce'
+
+import { useCommerceUI } from '../../../commerce/ui-context'
 
 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')
   }
 
-    // Should only ever be called internally to close
   const reallyOnlyCloseDrawer = (b: boolean) => {
-    if (!b ) {
-      ui.hideBuyOptions()
+    // 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!"
+    }
+    console.log("DEFAULT CLOSE ACTION")
+    return false
+  }
+
+
+  const setActiveSPIndexSetter = (fn: (index: number ) => void): void => {
+    setterRef.current = fn 
+  }
+
+
   return (
     <CommerceDrawer 
-      open={!!ui.buyOptionsSkuPath} 
+      open={!(stateRef.current.state === 'closed')} 
       setOpen={reallyOnlyCloseDrawer}
-      drawerClx={'w-full md:max-w-[550px] md:mx-auto lg:max-w-[50vw]'}
+      drawerClx={'w-full h-full'}
+      snapPoints={stateRef.current.points}
+      modal={stateRef.current.modal}
+      activeSnapPoint={activeSnapPoint}
+      setActiveSnapPoint={_setActiveSnapPoint}
+      handleHandleClicked={handleHandleClicked}
+      setActiveSPIndexSetter={setActiveSPIndexSetter}
+      handleCloseGesture={handleCloseGesture}
     >
-      <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]'
-      />
+      {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>
+      )}
     </CommerceDrawer>
   )
 })

package/components/commerce/checkout-button.tsx

@@ -2,7 +2,6 @@
 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'
@@ -12,11 +11,15 @@ import * as Icons from '../icons'
 
 const IconAndQuantity: React.FC<{
   animateOnQuantityChange?: boolean
+  showArrow?: boolean
+  showQuantity?: boolean
   clx?: string
   iconClx?: string
   digitClx?: string
 }> = observer(({
-  animateOnQuantityChange=true,
+  animateOnQuantityChange=false,
+  showArrow=true,
+  showQuantity=true,
   clx='',
   iconClx='',
   digitClx=''
@@ -47,6 +50,7 @@ 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') ? 
@@ -60,12 +64,13 @@ 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>            
-      <span style={{fontSize: '17px',}}>&rsaquo;</span>
+    )}
+      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
     </div>
   )
 })  
@@ -73,6 +78,7 @@ const IconAndQuantity: React.FC<{
 const CheckoutButton: React.FC<ButtonProps & {
   handleCheckout: () => void
   showQuantity?: boolean
+  showArrow?: boolean
   animateOnQuantityChange?: boolean
   centerText?: boolean
 }> = ({
@@ -81,8 +87,10 @@ const CheckoutButton: React.FC<ButtonProps & {
   rounded='lg',
   className,
   showQuantity=true,
+  showArrow=true,
   animateOnQuantityChange=true,
   centerText=true,
+  children,
   ...rest
 }) => {
 
@@ -93,22 +101,27 @@ 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') : ''
       )}
     >
-      {showQuantity && centerText && (
-        <IconAndQuantity clx='invisible' />
-      )}
-      <div className='flex justify-center items-center'>Checkout</div>
-      {showQuantity && (
+      {centerText && ( // must scale this one too, as it effects layout
         <IconAndQuantity 
-          animateOnQuantityChange={animateOnQuantityChange}
-          iconClx='fill-fg-foreground'
-          digitClx='text-primary-fg leading-none font-bold font-sans' 
+          showArrow={showArrow} 
+          showQuantity={showQuantity}
+          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
         />
       )}
+      {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,18 +1,104 @@
 'use client'
-import React from 'react'
+import React, { useRef } 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 '@hanzo/commerce'
+import { useCommerceUI } from '../../../commerce/ui-context'
 
 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
@@ -26,58 +112,78 @@ const CheckoutWidget: React.FC<{
   const clxSet = useAnimationClxSet(isCheckout)
 
   const itemRef = useCommerceUI()
-  const laggingRef = useLaggingItemRef(itemRef, CONST.animDurationMs)
+
+    // 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 handleCheckout = () => { router.push('/checkout')}
 
   return globalThis?.document?.body && createPortal(
     (<div 
       className={cn(
-        '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',
+        VARS[v].width,
+        'z-below-modal-2 fixed ',
+        VARS[v].pos,
+        'rounded-lg',
         'flex',
-        itemRef.item ? 'gap-2' : '',
+        steps.notPast(0) ? 'bg-background' : '',
+        steps.notPast(1) ? 'gap-2' : '',
         clxSet.asArray.join(' ')
       )}
-      style={laggingRef.item ? {} : CONST.shadowStyle}
+      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
     >
       <div 
         className={cn(
           'flex flex-row justify-between items-center', 
-          itemRef.item ? CONST.compWidthClx.itemInfo : 'w-0',
-          laggingRef.item ? 'px-3 border rounded-lg border-muted-3' : '' 
+          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' : '' 
         )}
-        style={{
-          transitionProperty: 'width',
-          transitionTimingFunction: CONST.animTimingFn,
-          transitionDuration: `${CONST.animDurationMs}ms`
-        }}
+        style={transStyle(VARS[v].activeItemAnim.info)}
       >
-        {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>
+        {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>)}
       </div>
       <CheckoutButton 
         handleCheckout={handleCheckout} 
-        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`
-        }}
-      />        
+        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>
     </div>),
     globalThis?.document?.body
   )

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

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

package/components/index.ts

@@ -10,18 +10,12 @@ 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,5 +1,7 @@
 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.5",
+  "version": "5.0.6",
   "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": "./commerce/index.ts",
+    "./commerce-data": "./commerce/data/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.2",
-    "@hanzo/ui": "3.7.0",
+    "@hanzo/commerce": "7.0.3",
+    "@hanzo/ui": "3.7.22",
     "@next/third-parties": "^14.1.0",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -50,13 +50,15 @@
   "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.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
     "validator": "^13.11.0",
-    "zod": "3.21.4"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",
@@ -64,8 +66,8 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/mdx": "^2.0.9",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "tailwindcss": "^3.4.2",
     "typescript": "5.3.3"
   }

package/root-layout/index.tsx

@@ -10,9 +10,10 @@ 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'
@@ -99,9 +100,10 @@ const RootLayout: React.FC<PropsWithChildren & {
             options={siteDef.commerce!.options}
             uiSpecs={selectionUISpecifiers}
           >
-            <Guts />
-            <BuyDrawer />
-            <CheckoutWidget />
+            <CommerceUIProvider >
+              <Guts />
+              <BuyDrawer />
+            </CommerceUIProvider>
           </CommerceProvider>
         ) : (
           <Guts />

package/style/drawer-handle-overrides.css

@@ -0,0 +1,154 @@
+[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;
+  }
+}
+

package/tsconfig.json

@@ -2,9 +2,9 @@
   "extends": "../tsconfig.modules.base.json",
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
   ],
   "exclude": [
-    "node_modules",
-  ],
+    "node_modules"
+  ]
 }

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

@@ -1,30 +0,0 @@
-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
-}