@thorprovider/blocks 0.1.2 → 0.1.3

package/src/blocks/e-commerce/product-list/product-showcase-1.tsx

@@ -0,0 +1,277 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ChevronLeft, ChevronRight, Star } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardFooter } from '../../../ui/card'
+import { formatMoney } from '../../../lib/money'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+export interface ProductShowcase1Props {
+  products: ProductPresentation[]
+  heading?: string
+  description?: string
+  pageSize?: number
+  prevLabel?: string
+  nextLabel?: string
+  /** Label for the current-page status, e.g. "Página". */
+  pageLabel?: string
+  unavailablePriceLabel?: string
+  emptyLabel?: string
+  addToCartLabel?: string
+  onAddToCart?: (product: ProductPresentation) => void
+  onProductClick?: (product: ProductPresentation) => void
+}
+
+const DEFAULT_PAGE_SIZE = 6
+const SWIPE_THRESHOLD = 48
+
+function chunk<T>(items: readonly T[], size: number): T[][] {
+  const pages: T[][] = []
+  for (let index = 0; index < items.length; index += size) {
+    pages.push(items.slice(index, index + size))
+  }
+  return pages
+}
+
+function compareAtText(product: ProductPresentation): string | undefined {
+  const compareAt = product.compareAtPrice
+  if (!compareAt) return undefined
+  const formatted = formatMoney(compareAt)
+  const price = formatMoney(product.price)
+  if (!formatted || !price) return undefined
+  if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined
+  return formatted
+}
+
+/**
+ * Combined grid-and-carousel product presentation: fixed-size grid pages
+ * navigated manually (prev/next) with a visible current-page indication. There
+ * is no autoplay, no auto-advance, and no infinite loop. Controls are real
+ * buttons (keyboard operable and visible at every breakpoint); touch swipe is an
+ * addition, never the only way to navigate. Below-fold images are lazy.
+ *
+ * Data access lives in the host: this block only renders the props it receives
+ * and reports interactions through callbacks (no backend/router/measurement
+ * imports).
+ */
+export function ProductShowcase1({
+  products,
+  heading,
+  description,
+  pageSize = DEFAULT_PAGE_SIZE,
+  prevLabel = 'Anterior',
+  nextLabel = 'Siguiente',
+  pageLabel = 'Página',
+  unavailablePriceLabel = 'Precio no disponible',
+  emptyLabel = 'No hay productos para mostrar.',
+  addToCartLabel = 'Agregar al carrito',
+  onAddToCart,
+  onProductClick,
+}: ProductShowcase1Props) {
+  const reduceMotion = useReducedMotion()
+  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE
+  const pages = useMemo(() => chunk(products, size), [products, size])
+  const pageCount = pages.length
+  const [page, setPage] = useState(0)
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1)
+
+  const goTo = (next: number) => {
+    if (pageCount === 0) return
+    if (next < 0 || next >= pageCount) return
+    setPage(next)
+  }
+
+  if (pageCount === 0) {
+    return (
+      <section className='py-12'>
+        <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+          {heading && (
+            <h2 className='mb-4 text-center text-2xl font-bold text-balance md:text-3xl'>
+              {heading}
+            </h2>
+          )}
+          <p className='text-muted-foreground text-center'>{emptyLabel}</p>
+        </div>
+      </section>
+    )
+  }
+
+  const visible = pages[safePage]
+
+  return (
+    <section
+      className='py-12'
+      aria-roledescription='carousel'
+      onKeyDown={(event) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          goTo(safePage - 1)
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          goTo(safePage + 1)
+        }
+      }}
+    >
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {(heading || description) && (
+          <div className='mb-8 text-center'>
+            {heading && (
+              <h2 className='text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
+            )}
+            {description && <p className='text-muted-foreground mt-2 text-balance'>{description}</p>}
+          </div>
+        )}
+
+        <div
+          onTouchStart={(event) => setTouchStart(event.touches[0]?.clientX ?? null)}
+          onTouchEnd={(event) => {
+            if (touchStart === null) return
+            const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart
+            if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1)
+            else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1)
+            setTouchStart(null)
+          }}
+        >
+          <motion.div
+            key={safePage}
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+            className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'
+          >
+            {visible.map((product) => {
+              const compareAt = compareAtText(product)
+              return (
+                <Card
+                  key={product.id}
+                  className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${
+                    onProductClick ? 'cursor-pointer' : ''
+                  }`}
+                  onClick={onProductClick ? () => onProductClick(product) : undefined}
+                >
+                  <CardContent className='flex flex-1 flex-col gap-4 px-4'>
+                    <div className='relative aspect-square overflow-hidden rounded-md'>
+                      {product.badge && (
+                        <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>
+                          {product.badge}
+                        </span>
+                      )}
+                      <img
+                        src={product.image || undefined}
+                        alt={product.imageAlt ?? product.title}
+                        className='size-full rounded-md object-contain'
+                        loading='lazy'
+                        width={400}
+                        height={400}
+                      />
+                    </div>
+
+                    <div className='flex flex-1 flex-col'>
+                      <h3 className='mb-1 font-medium text-balance'>
+                        {onProductClick ? (
+                          <button
+                            type='button'
+                            onClick={(event) => {
+                              event.stopPropagation()
+                              onProductClick(product)
+                            }}
+                            className='hover:text-primary cursor-pointer text-left transition-colors'
+                          >
+                            {product.title}
+                          </button>
+                        ) : (
+                          product.title
+                        )}
+                      </h3>
+                      {typeof product.rating === 'number' && Number.isFinite(product.rating) && (
+                        <div className='text-muted-foreground mb-1 flex items-center gap-1 text-xs'>
+                          <Star className='size-3.5 fill-current' aria-hidden='true' />
+                          <span>{product.rating.toFixed(1)}</span>
+                        </div>
+                      )}
+                      <div className='mt-auto flex items-baseline gap-2'>
+                        <p className='font-semibold'>
+                          {formatMoney(product.price) ?? unavailablePriceLabel}
+                        </p>
+                        {compareAt && (
+                          <p className='text-muted-foreground text-sm line-through'>{compareAt}</p>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+
+                  <CardFooter className='bg-transparent border-t-0 px-3 pt-0 md:px-4'>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='h-8 w-full cursor-pointer px-3 text-sm'
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onAddToCart?.(product)
+                      }}
+                    >
+                      {addToCartLabel}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              )
+            })}
+          </motion.div>
+        </div>
+
+        {pageCount > 1 && (
+          <div className='mt-6 flex items-center justify-center gap-3'>
+            <Button
+              type='button'
+              variant='outline'
+              size='icon-sm'
+              className='cursor-pointer'
+              aria-label={prevLabel}
+              disabled={safePage === 0}
+              onClick={() => goTo(safePage - 1)}
+            >
+              <ChevronLeft className='size-4' aria-hidden='true' />
+            </Button>
+
+            <div className='flex items-center gap-2'>
+              {pages.map((_, index) => (
+                <button
+                  key={index}
+                  type='button'
+                  aria-label={`${pageLabel} ${index + 1}`}
+                  aria-current={index === safePage ? 'true' : undefined}
+                  className={`size-2 rounded-full transition-colors ${
+                    index === safePage ? 'bg-primary' : 'bg-muted-foreground/40'
+                  }`}
+                  onClick={() => goTo(index)}
+                />
+              ))}
+            </div>
+
+            <Button
+              type='button'
+              variant='outline'
+              size='icon-sm'
+              className='cursor-pointer'
+              aria-label={nextLabel}
+              disabled={safePage === pageCount - 1}
+              onClick={() => goTo(safePage + 1)}
+            >
+              <ChevronRight className='size-4' aria-hidden='true' />
+            </Button>
+          </div>
+        )}
+
+        <p aria-live='polite' className='sr-only'>
+          {pageLabel} {safePage + 1} / {pageCount}
+        </p>
+      </div>
+    </section>
+  )
+}
+
+export default ProductShowcase1

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.test.tsx

@@ -135,3 +135,95 @@ describe('ShoppingCart4 — backend-authoritative totals', () => {
     expect(html).toContain('>1<')
   })
 })
+
+describe('ShoppingCart4 — presentation and action availability', () => {
+  it('defaults to the compact collapsible card', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
+    )
+    expect(html).toContain('max-w-md')
+    expect(html).toContain('Contraer carrito')
+    expect(html).toContain('max-h-64')
+  })
+
+  it('renders page presentation as a wide, always-expanded review with a heading', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+      />,
+    )
+    expect(html).toContain('max-w-3xl')
+    expect(html).toContain('<h1')
+    expect(html).not.toContain('Contraer carrito')
+    expect(html).not.toContain('max-h-64')
+  })
+
+  it('offers a continue-shopping action in page presentation', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        onContinueShopping={() => {}}
+      />,
+    )
+    expect(html).toContain('Seguir comprando')
+  })
+
+  it('suppresses checkout when the checkout feature is unavailable', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        checkoutUnavailable
+      />,
+    )
+    expect(html).not.toContain('Ver carrito y finalizar')
+  })
+
+  it('disables checkout while the cart is not ready', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        checkoutDisabled
+      />,
+    )
+    expect(html).toMatch(/<button[^>]*disabled[^>]*>[^<]*Ver carrito y finalizar/)
+  })
+})
+
+describe('ShoppingCart4 — accessibility', () => {
+  it('names every line mutation control', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
+    )
+    expect(html).toContain('aria-label="Disminuir cantidad, Taladro"')
+    expect(html).toContain('aria-label="Aumentar cantidad, Taladro"')
+    expect(html).toContain('aria-label="Quitar Taladro"')
+  })
+
+  it('announces pending totals politely and errors as an alert', () => {
+    const pending = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totalsState='pending' />,
+    )
+    expect(pending).toContain('aria-live="polite"')
+    expect(pending).toContain('Actualizando totales')
+    const error = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totalsState='error' />,
+    )
+    expect(error).toMatch(/role="alert"/)
+  })
+})

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.tsx

@@ -49,10 +49,19 @@ export interface ShoppingCart4RecentlyViewed {
   image?: string
 }
 
+export type ShoppingCart4Presentation = 'compact' | 'page'
+
 export interface ShoppingCart4Props {
   items: ShoppingCart4Item[]
   promotions: ShoppingCart4Promotion[]
   recentlyViewed?: ShoppingCart4RecentlyViewed[]
+  /**
+   * Layout presentation. `compact` (default) is the collapsible quick-cart
+   * card; `page` is a wide, always-expanded review layout with a primary
+   * heading, no collapse control, and normal page scrolling. Both use the same
+   * line controls and authoritative monetary rendering.
+   */
+  presentation?: ShoppingCart4Presentation
   /**
    * Backend-authoritative totals. The curated cart renders these verbatim; it
    * never computes subtotal/tax/shipping/total locally.
@@ -100,6 +109,12 @@ export interface ShoppingCart4Props {
   removeLabel?: string
   decreaseLabel?: string
   increaseLabel?: string
+  continueShoppingLabel?: string // 'Seguir comprando'
+  // action availability:
+  /** Suppress the checkout action (e.g. the checkout feature is not installed). */
+  checkoutUnavailable?: boolean
+  /** Disable checkout while the cart is not ready (pending/error/invalid totals). */
+  checkoutDisabled?: boolean
   // callbacks:
   /**
    * ABSOLUTE quantity for a backend cart line-item id (distinct from the
@@ -113,6 +128,8 @@ export interface ShoppingCart4Props {
   onPayWithApple?: () => void
   onPayWithGoogle?: () => void
   onRecentlyViewedClick?: (id: string) => void
+  /** Page presentation only: navigate back to browsing. */
+  onContinueShopping?: () => void
 }
 
 const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
@@ -127,6 +144,7 @@ export function ShoppingCart4({
   items,
   promotions,
   recentlyViewed,
+  presentation = 'compact',
   totals,
   totalsState = 'idle',
   totalsErrorLabel = 'No se pudieron actualizar los totales.',
@@ -162,6 +180,9 @@ export function ShoppingCart4({
   removeLabel = 'Quitar',
   decreaseLabel = 'Disminuir cantidad',
   increaseLabel = 'Aumentar cantidad',
+  continueShoppingLabel = 'Seguir comprando',
+  checkoutUnavailable,
+  checkoutDisabled,
   onQuantityChange,
   onRemove,
   onCheckout,
@@ -169,15 +190,22 @@ export function ShoppingCart4({
   onPayWithApple,
   onPayWithGoogle,
   onRecentlyViewedClick,
+  onContinueShopping,
 }: ShoppingCart4Props) {
   const [isExpanded, setIsExpanded] = useState(true)
   const [quickCheckout, setQuickCheckout] = useState(false)
 
+  const isPage = presentation === 'page'
+  // The page presentation is always expanded; only the compact card collapses.
+  const expanded = isPage ? true : isExpanded
   const format = formatPrice ?? (value => usdFormatter.format(value))
   const money = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
   const subtotalAmount = isAvailableMoney(totals?.subtotal) ? Number(totals.subtotal.amount) : 0
   const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
   const hasExpress = Boolean(onQuickCheckout || onPayWithApple || onPayWithGoogle)
+  // While totals/mutations are pending, keep confirmed data visible but block
+  // conflicting edits and checkout until the backend responds.
+  const mutationsDisabled = totalsState === 'pending'
 
   const sortedPromotions = [...promotions].sort((a, b) => a.threshold - b.threshold)
   const currentPromo = (() => {
@@ -279,31 +307,41 @@ export function ShoppingCart4({
 
   return (
     <section className='py-8'>
-      <div className='mx-auto max-w-md px-4'>
-        <Card className='shadow-lg'>
+      <div className={cn('mx-auto px-4', isPage ? 'max-w-3xl' : 'max-w-md')}>
+        {isPage ? (
+          <h1 className='mb-6 text-2xl font-semibold tracking-tight'>{titleLabel}</h1>
+        ) : null}
+        <Card className={isPage ? 'shadow-sm' : 'shadow-lg'}>
           {/* Header */}
           <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-3'>
             <CardTitle className='flex items-center gap-2'>
               <ShoppingCart className='size-5' />
               {titleLabel} ({itemCount})
             </CardTitle>
-            <Button
-              variant='ghost'
-              className='h-8 cursor-pointer px-3 text-xs'
-              size='sm'
-              onClick={() => setIsExpanded(!isExpanded)}
-              aria-expanded={isExpanded}
-              aria-label={isExpanded ? collapseLabel : expandLabel}
-            >
-              {isExpanded ? <X /> : <Plus />}
-            </Button>
+            {!isPage ? (
+              <Button
+                variant='ghost'
+                className='h-8 cursor-pointer px-3 text-xs'
+                size='sm'
+                onClick={() => setIsExpanded(!isExpanded)}
+                aria-expanded={isExpanded}
+                aria-label={isExpanded ? collapseLabel : expandLabel}
+              >
+                {isExpanded ? <X /> : <Plus />}
+              </Button>
+            ) : null}
           </CardHeader>
 
           <CardContent className='flex flex-col gap-6'>
             {items.length === 0 ? (
-              <div className='flex flex-col items-center justify-center gap-2 py-6 text-center'>
+              <div className='flex flex-col items-center justify-center gap-4 py-6 text-center'>
                 <ShoppingCart className='text-muted-foreground/50 size-10' />
                 <p className='text-muted-foreground text-sm'>{emptyLabel}</p>
+                {isPage && onContinueShopping ? (
+                  <Button variant='outline' onClick={onContinueShopping}>
+                    {continueShoppingLabel}
+                  </Button>
+                ) : null}
               </div>
             ) : (
               <>
@@ -337,10 +375,16 @@ export function ShoppingCart4({
                   </div>
                 ) : null}
 
-                {isExpanded && (
+                {expanded && (
                   <>
                     {/* Cart Items */}
-                    <div className='scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex max-h-64 flex-col gap-4 overflow-y-auto'>
+                    <div
+                      className={cn(
+                        'flex flex-col gap-4',
+                        !isPage &&
+                          'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent max-h-64 overflow-y-auto',
+                      )}
+                    >
                       {items.map(item => (
                         <div key={item.id} className='flex items-start gap-3'>
                           {item.image ? (
@@ -366,7 +410,7 @@ export function ShoppingCart4({
                                       ? () => onQuantityChange(item.id, item.quantity - 1)
                                       : undefined
                                   }
-                                  disabled={item.quantity <= 1}
+                                  disabled={item.quantity <= 1 || mutationsDisabled}
                                   aria-label={`${decreaseLabel}, ${item.name}`}
                                 >
                                   <Minus />
@@ -382,6 +426,7 @@ export function ShoppingCart4({
                                       : undefined
                                   }
                                   aria-label={`${increaseLabel}, ${item.name}`}
+                                  disabled={mutationsDisabled}
                                 >
                                   <Plus />
                                 </Button>
@@ -390,6 +435,7 @@ export function ShoppingCart4({
                                   size='sm'
                                   className='text-destructive hover:text-destructive ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs'
                                   onClick={onRemove ? () => onRemove(item.id) : undefined}
+                                  disabled={mutationsDisabled}
                                   aria-label={`${removeLabel} ${item.name}`}
                                 >
                                   <X />
@@ -445,13 +491,28 @@ export function ShoppingCart4({
                       ) : null}
 
                       {/* Checkout Button */}
-                      <Button
-                        size='lg'
-                        className='h-10 w-full cursor-pointer px-8'
-                        onClick={hasExpress && quickCheckout ? onQuickCheckout : onCheckout}
-                      >
-                        {hasExpress && quickCheckout ? quickCheckoutLabel : checkoutLabel}
-                      </Button>
+                      {!checkoutUnavailable ? (
+                        <Button
+                          size='lg'
+                          className='h-10 w-full cursor-pointer px-8'
+                          onClick={hasExpress && quickCheckout ? onQuickCheckout : onCheckout}
+                          disabled={checkoutDisabled || totalsState === 'pending'}
+                        >
+                          {hasExpress && quickCheckout ? quickCheckoutLabel : checkoutLabel}
+                        </Button>
+                      ) : null}
+
+                      {/* Continue shopping — page presentation only */}
+                      {isPage && onContinueShopping ? (
+                        <Button
+                          variant='outline'
+                          size='lg'
+                          className='h-10 w-full cursor-pointer px-8'
+                          onClick={onContinueShopping}
+                        >
+                          {continueShoppingLabel}
+                        </Button>
+                      ) : null}
 
                       {/* Estimated Delivery — only when supplied, never fabricated */}
                       {estimatedDeliveryLabel ? (
@@ -473,7 +534,7 @@ export function ShoppingCart4({
                 )}
 
                 {/* Collapsed Summary */}
-                {!isExpanded && (
+                {!expanded && (
                   <div className='flex flex-col gap-3'>
                     <div className='flex items-center justify-between'>
                       <span className='text-muted-foreground text-sm'>
@@ -491,7 +552,7 @@ export function ShoppingCart4({
                 )}
 
                 {/* Recently Viewed */}
-                {isExpanded && recentlyViewed && recentlyViewed.length > 0 && (
+                {expanded && recentlyViewed && recentlyViewed.length > 0 && (
                   <div className='flex flex-col gap-3'>
                     <h4 className='text-sm font-medium'>{recentlyViewedLabel}</h4>
                     <div className='grid grid-cols-3 gap-2'>

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.test.tsx

@@ -63,3 +63,10 @@ describe('StorefrontHero1 — optional editorial image', () => {
     expect(html).toContain('Taladro percutor')
   })
 })
+
+describe('StorefrontHero1 — product card secondary action label', () => {
+  it('defaults the second product-card action to "Ver producto"', () => {
+    const html = renderToStaticMarkup(<StorefrontHero1 {...base} products={[product]} />)
+    expect(html).toContain('Ver producto')
+  })
+})

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.tsx

@@ -98,7 +98,7 @@ function StorefrontHero1({
   onBuyNow,
   onSelectColor,
   addToCartLabel = 'Agregar al carrito',
-  buyNowLabel = 'Comprar ahora',
+  buyNowLabel = 'Ver producto',
   newLabel = 'Nuevo',
   outOfStockLabel = 'Agotado',
   colorsLabel = 'Colores:',

package/src/blocks/marketing/navbars/navbar-4-account-menu.test.tsx

@@ -0,0 +1,38 @@
+import { Children, isValidElement, type ReactNode } from 'react'
+import { describe, expect, it } from 'vitest'
+import { Navbar4AccountMenu } from './navbar-4-account-menu'
+import { DropdownMenuItem } from '../../../ui/dropdown-menu'
+
+// Inspect the block-owned menu items without mounting Radix's browser portal.
+function menuItems(node: ReactNode): Record<string, unknown>[] {
+  return Children.toArray(node).flatMap(child => {
+    if (!isValidElement<{ children?: ReactNode }>(child)) return []
+    return [
+      ...(child.type === DropdownMenuItem ? [child.props as Record<string, unknown>] : []),
+      ...menuItems(child.props.children),
+    ]
+  })
+}
+
+const user = { name: 'Ada', email: 'ada@example.test', initials: 'A' }
+
+describe('Navbar4AccountMenu consumer actions', () => {
+  it('omits help and sign-out when no consumer actions exist', () => {
+    expect(menuItems(Navbar4AccountMenu({ user }))).toEqual([])
+  })
+
+  it('dispatches sign-out to its consumer', () => {
+    let calls = 0
+    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut: () => { calls++ } }))
+    ;(item.onSelect as () => void)()
+    expect(calls).toBe(1)
+  })
+
+  it('rejects further sign-out selection while the consumer is pending', () => {
+    let calls = 0
+    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut: () => { calls++ } }))
+    expect(item.disabled).toBe(true)
+    ;(item.onSelect as () => void)()
+    expect(calls).toBe(0)
+  })
+})