@hanzo/commerce 6.0.0 → 6.1.0

package/components/buy/_to_deprecate_select-category-item-card.tsx

@@ -39,7 +39,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       const item = items[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatCurrencyValue(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.optionLabel + ', ' + formatCurrencyValue(item.price)}</p>
         </div>
       )
     }
@@ -56,6 +56,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
           selectSku={selectSku}
           clx='mt-2'
           showQuantity={false}
+          scrollList={false}
           itemClx='flex flex-row gap-2.5 items-center'
         />
       </div>

package/components/buy/_to_deprecate_select-category-item-panel.tsx

@@ -52,7 +52,7 @@ const SelectCategoryItemPanel: React.FC<
         <div className={cn('w-full border rounded-xl p-6 ')}>
           <div className={cn('w-full aspect-square  relative')}>
             <Image
-              src={category.img}
+              src={category.img.src}
               fill
               sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
               alt={category.title}
@@ -96,6 +96,8 @@ const SelectCategoryItemPanel: React.FC<
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
             showQuantity={showQuantity}
+                      scrollList={false}
+
             clx='block columns-2 gap-4'
             itemClx='flex flex-row gap-2 items-center mb-2.5'
           />
@@ -124,7 +126,7 @@ const SelectCategoryItemPanel: React.FC<
         </h3>
         {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
-            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
+            {(soleOption ? '' : (selectedItemRef.item.optionLabel + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
           </h6>
         ) : ''}
       </div>

package/components/buy/add-to-cart-widget.tsx

@@ -27,8 +27,8 @@ const AddToCartWidget: React.FC<{
   onQuantityChanged
 }) => {
 
-  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
-  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-bold text-primary-fg '
+  const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1 opacity-50'
+  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-semibold text-primary-fg '
 
   if (disabled) {
     return (
@@ -81,12 +81,14 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old - 1) 
     }
+    /*
     if (old === 1) {
       toast(`Removed ${item.title} from your bag.`)
     }
     else {
       toast(`Changed quantity to ${old - 1} for ${item.title}.`)
     }
+    */
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,
@@ -117,7 +119,7 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}

package/components/buy/buy-card.tsx

@@ -1,98 +1,182 @@
 'use client'
 import React, { useRef, useEffect, type ComponentType } from 'react'
-import { autorun  } from 'mobx'
+import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
 
-import type { SelectedPaths, ItemSelectorProps, LineItem } from '../../types'
+import type { 
+  SelectedPaths, 
+  ItemSelectorProps, 
+  ItemSelectorCompProps,
+  LineItem, 
+  Category, 
+  ProductTreeNode, 
+} from '../../types'
+
 import { useCommerce } from '../../service/context'
-import { getFacetValuesMutator } from '../../util'
+import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
-import FacetValuesWidget from '../facet-values-widget'
+import LevelNodesWidget from '../level-nodes-widget'
 import AddToCartWidget from './add-to-cart-widget'
 import ItemMedia from '../item/item-media'
 import { ApplyTypography } from '@hanzo/ui/primitives'
 
 const BuyCard: React.FC<{
   skuPath: string
+
+    /** For any selectors that show a list of choices,
+     * starting with 'scrollAfter' elements, 
+     * the list will scroll, and the card will
+     * have 'scrollHeightClx' applied to it to define and fix the height.
+     * This is most like something like '80vh' 
+     * defaults are '5' and 'h-[70vh]'
+     * */
+  scrollAfter?: number
+  scrollHeightClx?: string
+
+  clx?: string
+  catWidgetClx?: string
+  addWidgetClx?: string
+
   selector: ComponentType<ItemSelectorProps>
-  selShowPrice?: boolean
-  selShowQuantity?: boolean
-  selClx?: string
-  selSoleItemClx?: string
-  selItemClx?: string
-  selExt?: any
+  selectorProps?: ItemSelectorCompProps 
+
+    /** Show all items from all sibling categories
+     * If skuPath defines a Category, the first of it's items will 
+     * be selected. The facet widget will just select a the first 
+     * item in the chosen Category without changings the overall set
+     * of choices. */
   allVariants?: boolean
-  className?: string
-  facetsWidgetClx?: string
-  facetsAs?: 'image' | 'label' | 'image-and-label'
-  addWidgetClx?: string
-  mobile?: boolean
+
+  categoryTabAs?: 'image' | 'label' | 'image-and-label'
+  showItemMedia?: boolean
+
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+  mobile?: boolean
 }> = observer(({
   skuPath,
-  className='',
-  facetsWidgetClx='',
-  selector: Selector,
-  selShowPrice=true,
-  selShowQuantity=false,
-  selClx='',
-  selItemClx='',
-  selSoleItemClx='',
-  selExt,
+  scrollAfter=5,
+  scrollHeightClx='h-[80vh]',
+  clx='',
+  catWidgetClx='',
   addWidgetClx='',
-  facetsAs='image-and-label', 
-  allVariants=true,
+  selector: Selector,
+  selectorProps={
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+  },
+  categoryTabAs='image-and-label', 
+  showItemMedia=true,
+  allVariants=false,
   mobile=false,
   onQuantityChanged,
 }) => {
 
   const cmmc = useCommerce()
-  const levelRef = useRef<number>(-1)
+  const inst = useRef<{
+    level: number,
+    requestedCat : Category | undefined
+    requestedNode: ProductTreeNode | undefined
+    currentCat: ObsStringMutator
+    disposers: IReactionDisposer[]
+  } | undefined>(undefined)
 
-  const requestedCat = cmmc.getCategory(skuPath) 
-  const levelNode = requestedCat ? undefined : cmmc.getNodeAtPath(skuPath)
 
   useEffect(() => {
 
+    let requestedCat = cmmc.getCategory(skuPath) 
+    let requestedNode = requestedCat ? undefined : cmmc.getNodeAtPath(skuPath)
+    let initialCat = undefined
     const toks = skuPath.split('-')
-    levelRef.current = toks.length - 1
-    if (levelRef.current === 0) {
-      throw new Error('BuyCard.useEffect(): must specify at least a Level 1 skuPath!') 
+    const level = toks.length - 1
+    if (level === 0) {
+      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
     }
-    const fsv: SelectedPaths = {}
-    for (let level = 1; level <= levelRef.current; level++ ) {
-      fsv[level] = [toks[level]]   
+    const paths: SelectedPaths = {}
+    for (let l = 1; l <= level; l++ ) {
+      paths[l] = [toks[l]]   
     } 
-      // Actually specify the requested Cat, 
-      // or the first Cat if no Cats at this level
-    if (!requestedCat) {
-      fsv[levelRef.current + 1] = [levelNode!.subNodes![0].skuToken]
+    if (requestedCat) { 
+      if (allVariants && level >= 2) {
+          // select all siblings of requestedCat.
+          // ie, go one level back
+        delete paths[level]
+        initialCat = requestedCat
+        requestedCat = undefined
+        requestedNode = cmmc.getNodeAtPath(toks.slice(0, -1).join('-'))
+      }
     }
-    cmmc.selectPaths(fsv)
-
-    return autorun(() => {
-      const cats = cmmc.selectedCategories
-        // Original requestedCat was legit
-      if (requestedCat /* && (cats.length === 0 || cats[0].id !== requestedCat.id) */) {
-        if (
-          !cmmc.currentItem 
-          || 
-          cmmc.currentItem.categoryId !== requestedCat.id 
-          || 
-          requestedCat.products.length === 1
-        ) {
-          cmmc.setCurrentItem(requestedCat.products[0].sku)
-        }
+    else {
+        // select siblings paths
+      if (allVariants) {
+        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
       }
-      else if (cats.length > 0) {
-        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cats[0].id) {
-          cmmc.setCurrentItem(cats[0].products[0].sku)
-        }
+        // Actually select the the first cat at the cat level, 
+      else {
+        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
       }
-    })
-  }, [requestedCat, levelNode?.subNodes])
+    }
+
+    const selectedCats = cmmc.selectPaths(paths)
+    initialCat = initialCat ? initialCat : (requestedCat ? requestedCat : selectedCats[0])
+    cmmc.setCurrentItem(initialCat.products[0].sku)
+    const currentCat = new ObsStringMutator(initialCat!.id.split('-').pop()!)
+
+    inst.current = {
+      level,
+      requestedCat,
+      requestedNode,
+      currentCat,
+      disposers: []
+    }
+
+    if (!allVariants) {
+      inst.current?.disposers.push(reaction(
+        () => {
+          const cats = cmmc.selectedCategories
+          return (cats.length > 0) ? cats[0].id : undefined
+        },
+        (catId) => {
+          if (catId && catId !== cmmc.currentItem?.categoryId) {
+            const cat = cmmc.getCategory(catId)
+            cmmc.setCurrentItem(cat?.products[0].sku)
+          }
+        }
+      ))
+    }
+
+    return () => {
+      inst.current?.disposers.forEach((d) => {d()})
+    }
+
+  }, [])
+
+  const setCatPath = (pathValue: string | null) => {
+    if (inst.current?.currentCat.get() !== pathValue) {
+      inst.current?.currentCat.set(pathValue) 
+    }
+    const found = cmmc.selectedItems.find((item) => (item.categoryId.endsWith(pathValue!)))
+    if (found) { 
+      cmmc.setCurrentItem(found.sku) 
+    }
+  }
+
+  const selectSku = (sku: string) => {
+    cmmc.setCurrentItem(sku)
+    const pathValue = cmmc.currentItem?.categoryId.split('-').pop()!
+    if (pathValue !== inst.current?.currentCat.get()) {
+      inst.current?.currentCat.set(pathValue) 
+    }
+  }
+
+  const catTitle = inst.current?.requestedCat ? inst.current.requestedCat.title : cmmc.selectedCategories?.[0]?.title
+
+  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
+    allVariants ? cmmc.selectedItems : cmmc.selectedCategories[0].products as LineItem[]
+
 
   const TitleArea: React.FC<{
     title: string
@@ -109,49 +193,63 @@ const BuyCard: React.FC<{
     </ApplyTypography>
   )
 
-  const catTitle = requestedCat ? requestedCat.title : cmmc.selectedCategories?.[0]?.title
-
+  const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter)
   return (
-    <div className={cn('px-4 md:px-6 pt-3 pb-4 flex flex-col items-center', className)} >
-    {levelNode && (<>
-      <ApplyTypography className=''>
-        <h3>{levelNode.label}</h3>
-        {levelNode.subNodesLabel && (
-          <h6 className='!text-center mt-4 mb-1'>{levelNode.subNodesLabel}</h6>
+    <div className={cn(
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', 
+      clx,
+      scroll ? scrollHeightClx : 'h-auto'
+    )} >
+    {inst.current?.requestedNode && (<>
+      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
+        <h3>{inst.current!.requestedNode.label}</h3>
+        {inst.current!.requestedNode.subNodesLabel && (
+          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
         )}
       </ApplyTypography>
-      <FacetValuesWidget
+      <LevelNodesWidget
         className={cn(
-          'grid gap-0 ' + `grid-cols-${levelNode!.subNodes!.length}`, 
+          'grid gap-0 ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
           'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px]',
-          facetsWidgetClx  
+          (scroll ? 'shrink-0' : ''),
+          catWidgetClx  
         )} 
         mobile={mobile}
-        mutator={getFacetValuesMutator(levelRef.current + 1, cmmc)} 
+        mutator={allVariants ? 
+          {
+            get: () => (inst.current!.currentCat.s),
+            set: setCatPath
+          }
+          : 
+          getFacetValuesMutator(inst.current.level + 1, cmmc)
+        } 
         itemClx='flex-col h-auto gap-0 py-1 px-3'
         buttonClx={
           'h-full ' +
           '!border-level-3'
         }
-        facetValues={levelNode!.subNodes!}
-        show={facetsAs}
+        levelNodes={inst.current.requestedNode.subNodes!}
+        show={categoryTabAs}
       />
     </>)} 
-    {!levelNode && catTitle && (
+    {!inst.current?.requestedNode && catTitle && (
       <TitleArea title={catTitle} clx=''/>
     )}
-    {(cmmc.currentItem) && (<ItemMedia item={cmmc.currentItem} />)} 
-    {cmmc.selectedCategories[0] && (
+    {(cmmc.currentItem && showItemMedia) && (
+      <ItemMedia item={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+    )} 
+    {itemsToShow && (
       <Selector 
-        items={cmmc.selectedCategories[0].products as LineItem[]}
+        items={itemsToShow}
         selectedItemRef={cmmc}
-        selectSku={cmmc.setCurrentItem.bind(cmmc)}
-        clx={selClx}
-        itemClx={selItemClx}
-        soleItemClx={selSoleItemClx}
-        ext={selExt}
-        showPrice={selShowPrice}
-        showQuantity={selShowQuantity}
+        selectSku={selectSku}
+        {...selectorProps}
+        scrollList={scroll}
+        showCategory={selectorProps.showCategory ? 
+          selectorProps.showCategory
+          :
+          (allVariants && !inst.current?.requestedCat)
+        }
       />  
     )}
     {(cmmc.currentItem) && (
@@ -159,7 +257,7 @@ const BuyCard: React.FC<{
         size='default' 
         item={cmmc.currentItem}
         onQuantityChanged={onQuantityChanged} 
-        className={cn('min-w-[160px] mx-auto mt-4', addWidgetClx)}
+        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
       />
     )} 
     </div >

package/components/buy/buy-drawer.tsx

@@ -12,9 +12,12 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
+import { getUISpecFromPath } from '../../util'
+
 import BuyCard from './buy-card'
 import RadioItemSelector from '../select/radio-selector'
 import ImageItemSelector from '../select/image-selector'
+import CarouselItemSelector from '../select/carousel-selector'
 
 const BuyDrawer: React.FC<{
   skuPath: string
@@ -40,6 +43,14 @@ const BuyDrawer: React.FC<{
     //}
   }
 
+  const spec = getUISpecFromPath(skuPath) ?? {
+    selector: 'radio',
+    allVariants: false
+  }
+
+  const selector = spec.selector === 'radio' ? RadioItemSelector :
+    (spec.selector === 'image' ? ImageItemSelector : CarouselItemSelector)
+
   return (
     <Drawer open={open} onOpenChange={setOpen} >
       <DrawerTrigger asChild className={triggerClx}>
@@ -51,15 +62,15 @@ const BuyDrawer: React.FC<{
       >
         <BuyCard 
           skuPath={skuPath} 
+          scrollAfter={spec.selector === 'carousel' ? 999 : undefined}
           mobile={mobile} 
           onQuantityChanged={onQuantityChanged} 
-          className={cn('w-full', cardClx)}
-          selector={ImageItemSelector}
-          selClx=''
-          selItemClx=''
-          selSoleItemClx='mb-3'
-          addWidgetClx=''
-          facetsAs='label'
+          clx={cn('w-full', cardClx)}
+          selector={selector}
+          selectorProps={{soleItemClx:'mb-3'}}
+          showItemMedia={spec.selector !== 'carousel'}
+          categoryTabAs='label'
+          allVariants={spec.allVariants}
         />
         <Button
           variant='ghost'

package/components/cart/cart-panel/cart-line-item.tsx

@@ -1,16 +1,15 @@
 'use client'
 
 import React from 'react'
-import Image from 'next/image'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
 
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../buy/add-to-cart-widget'
 import { useCommerce } from '../../../service/context'
-import type { Dimensions } from '@hanzo/ui/types'
 
 const DEF_IMG_SIZE=40
 
@@ -27,47 +26,38 @@ const CartLineItem: React.FC<{
   className?: string
   imgSizePx?: number
   showPromoCode?: boolean
+  itemClicked?: (item: LineItem) => void
+  selected?: boolean
 }> = observer(({
   item,
   className='',
   imgSizePx=DEF_IMG_SIZE,
-  showPromoCode
+  showPromoCode=false,
+  itemClicked,
+  selected=false
 }) => {
 
   const cmmc = useCommerce()
   const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
-  
-  let dim: Dimensions 
-  if (item.imgAR) {
-    if (item.imgAR >= 1) {
-      dim = {
-        w: imgSizePx,
-        h: imgSizePx / item.imgAR
-      }
-    }
-    else {
-      dim = {
-        w: imgSizePx * item.imgAR,
-        h: imgSizePx
-      }
-    }
-  }
-  else {
-    dim = {
-      w: imgSizePx,
-      h: imgSizePx
-    }
-  }
 
   return (
     <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-      <div className='flex flex-row justify-between items-center gap-2'>
-      {!!item.img ? (
-        <Image src={item.img} alt={item.title + ' image'} height={dim.h} width={dim.w} className=''/>
-      ) : ( // placeholder so things align
-        <div style={{height: imgSizePx, width: imgSizePx}}/>
-      )}
-        <div className='grow leading-tight'>{renderTitle(item.title)}</div>
+      <div 
+        className={
+          'flex flex-row justify-between items-center gap-1 ' + 
+          (itemClicked && !selected ? 'cursor-pointer ' : 'cursor-default ') 
+        } 
+        onClick={() => {itemClicked && itemClicked(item)}}
+      >
+        {/* 1px gap between image and border for better emphasis w small images */}
+        <div className={selected ? 'border-foreground p-[1px] border rounded-sm' : 'p-[2px]'}>
+        {item.img ? (
+          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
+        ) : ( // placeholder so things align
+          <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
+        )}
+        </div>
+        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>

package/components/cart/cart-panel/index.tsx

@@ -11,6 +11,7 @@ import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'
 import PromoCode from './promo-code'
+import type { LineItem } from '../../../types'
 
 const CartPanel: React.FC<PropsWithChildren & {
     /** fix size and scroll after 'scrollAfter items in teh cart. */
@@ -25,6 +26,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   buttonClx?: string
   showPromoCode?: boolean
   showShipping?: boolean
+  selectItems?: boolean
     /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
@@ -41,6 +43,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   buttonClx='',
   showPromoCode=false,
   showShipping=false,
+  selectItems=false,
   handleCheckout,
 }) => {
 
@@ -74,6 +77,10 @@ const CartPanel: React.FC<PropsWithChildren & {
     handleCheckout && handleCheckout()
   }
 
+  const itemClicked = (item: LineItem) => { 
+    cmmc.setCurrentItem(item.sku) 
+  }
+
   const Main: React.FC = observer(() => (<>
     {cmmc.cartEmpty ? (
       <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
@@ -85,6 +92,8 @@ const CartPanel: React.FC<PropsWithChildren & {
         item={item}
         className={cn('mb-2', itemClx)}
         showPromoCode={showPromoCode}
+        itemClicked={selectItems ? itemClicked : undefined}
+        selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}
       />
     ))}
     </>)}

package/components/index.ts

@@ -7,7 +7,7 @@ export { default as BuyDrawer } from './buy/buy-drawer'
 export { default as CartAccordian } from './cart/cart-accordian'
 export { default as CartPanel } from './cart/cart-panel'
 
-export { default as FacetValuesWidget } from './facet-values-widget'
+export { default as LevelNodesWidget } from './level-nodes-widget'
 
 export { default as PaymentStepForm } from './checkout/payment-step-form'
 export { default as ShippingStepForm } from './checkout/shipping-step-form'

package/components/item/item-media.tsx

@@ -2,29 +2,26 @@ import React from 'react'
 
 import Spline from '@splinetool/react-spline'
 
-import type { Dimensions } from '@hanzo/ui/types'
+import { Image  } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import {
   VideoBlockComponent,
-  ImageBlockComponent,
-  type ImageBlock,
   type Block,
   type VideoBlock
 } from '@hanzo/ui/blocks'
-import type { LineItem } from '../../types'
+import type { Product } from '../../types'
 
 const ItemMedia: React.FC<{
-  item: LineItem
-  constrainTo?: Dimensions
+  item: Product
+  constrainTo?: {w: number, h: number}
   clx?: string
 }> = ({
-  item,
+  item: {img, video, animation},
   constrainTo: cnst = {w: 250, h: 250},
   clx=''
 }) => {
 
-  const {title, img, video, animation} = item
     // Order of precedence: 3D > MP4 > Image
   return animation ? ( 
     <Spline
@@ -38,21 +35,17 @@ const ItemMedia: React.FC<{
     />
   ) : video ? (
     <VideoBlockComponent
-      constraint={cnst}
+      constrainTo={cnst}
       block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
       className={clx}
     />
-  ) : (
-    <ImageBlockComponent
-      block={{
-        blockType: 'image',
-        src: img ?? '',
-        alt: title + ' image',
-        dim: cnst
-      } satisfies ImageBlock as Block} 
+  ) : (img && 
+    <Image
+      def={img}
+      constrainTo={cnst} 
       className={cn('m-auto', clx)}
     />
-  )
+  ) // TODO: return placeholder
 }
 
 export default ItemMedia