Buy selection enh and refactor; AllVariantsBuyCarousel (#90)

UI:
* MediaStack and Image: transform scale() support via MediaTransform
* primitives/slider
* improvements to Carousel

CMMC:
* better single-family carousel layout
* slider implemented in single-family
* LevelNodesWidget --> NodeTabs
* enabled sort of items (esp for showSlider) 'asc' | 'desc' | 'none'
* impl accessItemOptions() for ItemSelector options
* impl accessMultiSelectorOptions() for MultiFamilySelector options
* impl image only variant in ButtonItemSelector
* fixed: AddToCartWidget height jump
* fixed: slider thumb interaction w drawer
* SingleFamilySelector (code compiles)
* Heading Area for multi
* terminal --> outermost
* individual skus and families supported in AllVariants
* bump: [email protected], [email protected]

packages/commerce/components/buy/_to_deprecate_select-family-item-card.tsx

@@ -66,7 +66,6 @@ const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & Item
       // TODO disable if nothing selected
     (selItemRef.item && !isLoading) && (
       <AddToCartWidget 
-        size='default' 
         item={selItemRef.item}
         onQuantityChanged={onQuantityChanged} 
         className={cn('lg:min-w-[160px] lg:mx-auto', className)}

packages/commerce/components/buy/_to_deprecate_select-family-item-panel.tsx

@@ -106,7 +106,7 @@ const SelectFamilyItemPanel: React.FC<
 
   const AddToCartArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
     (selectedItemRef.item && !isLoading) ? (
-      <AddToCartWidget size='default' item={selectedItemRef.item} className={className}/>
+      <AddToCartWidget item={selectedItemRef.item} className={className}/>
     ) : (
       <div className={cn('h-6 w-12 invisible', className)} />
     )

packages/commerce/components/buy/add-to-cart-widget.tsx

@@ -14,7 +14,6 @@ const AddToCartWidget: React.FC<{
   disabled?: boolean
   className?: string
   buttonClx?: string
-  size?: ButtonSizes
   variant?: 'minimal' | 'primary' | 'outline'
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
@@ -23,7 +22,6 @@ const AddToCartWidget: React.FC<{
   disabled=false,
   className='',
   buttonClx='',
-  size='xs',
   onQuantityChanged
 }) => {
 
@@ -100,21 +98,24 @@ const AddToCartWidget: React.FC<{
   return ( item.isInCart ? (
     <div className={cn(
       'flex flex-row items-stretch justify-between ',
+        // should match 'xs' and 'default' button heights
+      (ghost ? 'h-8' : 'h-10'),
       ROUNDED_CLX,
       (primary ? 'bg-primary' : 'bg-transparent'), 
       (outline ? 'border border-muted' : ''),
       className
     )}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
-        size={size}
+        size={ghost ? 'xs' : 'default'}
         variant={primary ? 'primary' : 'ghost'}
         rounded={ghost ? 'full' : ROUNDED_VAL}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-start group', 
           (ghost ? 'px-1' : 'px-2'), 
           (outline ? 'hover:bg-transparent' : ''),
-          buttonClx
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
         )}
         key='left'
         onClick={dec}
@@ -128,14 +129,15 @@ const AddToCartWidget: React.FC<{
         <div className={'text-sm grow-0 shrink-0 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}
+        size={ghost ? 'xs' : 'default'}
         variant={primary ? 'primary' : 'ghost'}
         rounded={ghost ? 'full' : ROUNDED_VAL}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-end group', 
           (ghost ? 'px-1' : 'px-2'), 
           (outline ? 'hover:bg-transparent' : ''),
-          buttonClx
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
         )}
         onClick={inc}
         key='right'
@@ -146,7 +148,7 @@ const AddToCartWidget: React.FC<{
   ) : (
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
-      size={size}
+      size={ghost ? 'xs' : 'default'}
       variant={variant as ButtonVariants}
       rounded={ROUNDED_VAL}
       className={cn(buttonClx, className)}

packages/commerce/components/buy/buy-card.tsx

@@ -18,7 +18,7 @@ import { useCommerce } from '../../service/context'
 import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
-import LevelNodesWidget from '../select-family/level-nodes-widget'
+import NodeTabs from '../node-tabs'
 import AddToCartWidget from './add-to-cart-widget'
 
 const BuyCard: React.FC<{
@@ -170,7 +170,7 @@ const BuyCard: React.FC<{
     }
   }
 
-  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies?.[0]?.title
+  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title
 
   const itemsToShow = (!cmmc.hasSelection) ? undefined : 
     allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
@@ -205,7 +205,7 @@ const BuyCard: React.FC<{
           <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
         )}
       </ApplyTypography>
-      <LevelNodesWidget
+      <NodeTabs
         className={cn(
           'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
           'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
@@ -247,7 +247,6 @@ const BuyCard: React.FC<{
     )}
     {(cmmc.currentItem) && (
       <AddToCartWidget 
-        size='default' 
         item={cmmc.currentItem}
         onQuantityChanged={onQuantityChanged} 
         className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}