@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/marketing/navbars/navbar-3.tsx

@@ -1,303 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentProps, type Ref } from 'react'
-import { Menu } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Separator } from '../../../ui/separator'
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '../../../ui/sheet'
-import { cn } from '../../../lib/utils'
-import type { CTA } from '../../../lib/types'
-
-export interface NavLink {
-  label: string
-  href?: string
-}
-
-export interface Navbar3Props {
-  navLinks: NavLink[]
-  /** Brand text shown next to the logo mark. */
-  logoText: string
-  logoHref?: string
-  /** Current path used to highlight the active nav link. */
-  currentPath?: string
-  /** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
-  signIn?: CTA
-  /** Primary call-to-action. Rendered as a link when `href` is set, otherwise as a button. */
-  cta?: CTA
-  /**
-   * When `true` (default), the header condenses into a floating rounded pill once scrolled.
-   * Set to `false` for a plain solid bar instead of the condensing pill.
-   */
-  floatingPill?: boolean
-  /** Fired when the sign-in button (no `href`) is clicked. */
-  onSignIn?: () => void
-  /** Fired when the CTA button (no `href`) is clicked. */
-  onCtaClick?: () => void
-}
-
-/**
- * Composition contract
- * --------------------
- * The header is `fixed`, so the first section of the page must clear it with `pt-16`,
- * and `html { scroll-padding-top: 4rem }` keeps in-page anchors from landing underneath it.
- *
- * Set `floatingPill` to false for a plain solid bar on scroll instead of the condensing pill.
- */
-function Logo({ text, href }: { text: string; href?: string }) {
-  const className =
-    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
-
-  const content = (
-    <>
-      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
-        <path
-          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-          fill='currentColor'
-        />
-        <path
-          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-          fill='currentColor'
-        />
-        <path
-          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-      </svg>
-      <span className='text-base font-semibold tracking-tight'>{text}</span>
-    </>
-  )
-
-  if (!href) {
-    return <span className={className}>{content}</span>
-  }
-
-  return (
-    <a href={href} className={className}>
-      {content}
-    </a>
-  )
-}
-
-function ActionButton({
-  cta,
-  onClick,
-  variant,
-  className,
-  rounded,
-  ref,
-}: {
-  cta: CTA
-  onClick?: () => void
-  variant?: ComponentProps<typeof Button>['variant']
-  className?: string
-  rounded?: boolean
-  ref?: Ref<HTMLButtonElement>
-}) {
-  const classes = cn(rounded && 'rounded-full', className)
-
-  if (cta.href && !onClick) {
-    return (
-      <Button variant={variant} size='sm' className={classes} asChild ref={ref}>
-        <a href={cta.href}>{cta.label}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button variant={variant} size='sm' className={classes} onClick={onClick} ref={ref}>
-      {cta.label}
-    </Button>
-  )
-}
-
-export function Navbar3({
-  navLinks,
-  logoText,
-  logoHref,
-  currentPath,
-  signIn,
-  cta,
-  floatingPill = true,
-  onSignIn,
-  onCtaClick,
-}: Navbar3Props) {
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const [scrolled, setScrolled] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  /**
-   * Scroll detection:
-   * - Inside the store preview the scroller is an overflow ancestor (not the viewport).
-   *   IntersectionObserver + an out-of-flow sentinel is unreliable there, so use scrollTop.
-   * - On a normal page, an IntersectionObserver on the 8px sentinel gives hysteresis without
-   *   flickering at a hard `scrollY > 8` threshold.
-   */
-  useEffect(() => {
-    const sentinel = sentinelRef.current
-    if (!sentinel) {
-      return
-    }
-
-    let scrollParent: HTMLElement | null = null
-    let ancestor: HTMLElement | null = sentinel.parentElement
-    while (ancestor) {
-      const { overflowY } = getComputedStyle(ancestor)
-      if (
-        (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
-        ancestor.scrollHeight > ancestor.clientHeight + 1
-      ) {
-        scrollParent = ancestor
-        break
-      }
-      ancestor = ancestor.parentElement
-    }
-
-    if (scrollParent) {
-      const scroller = scrollParent
-      const update = () => setScrolled(scroller.scrollTop > 8)
-      update()
-      scroller.addEventListener('scroll', update, { passive: true })
-      return () => scroller.removeEventListener('scroll', update)
-    }
-
-    const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), {
-      threshold: 0,
-    })
-
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <>
-      {/*
-        Absolute + out of flow: keeps an 8px hysteresis target for the observer
-        without painting a blank strip under the transparent (unscrolled) header.
-      */}
-      <div
-        ref={sentinelRef}
-        aria-hidden='true'
-        className='pointer-events-none absolute inset-x-0 top-0 h-2'
-      />
-
-      <header className='fixed inset-x-0 top-0 z-50'>
-        <div
-          className={cn(
-            'mx-auto flex h-14 items-center justify-between gap-4 transition-all duration-300 ease-out motion-reduce:transition-none',
-            scrolled
-              ? floatingPill
-                ? 'border-border/60 bg-background/80 mt-3 max-w-5xl rounded-full border px-4 shadow-sm backdrop-blur-md sm:px-5'
-                : 'border-border/60 bg-background/90 max-w-full border-b px-4 backdrop-blur-md sm:px-6 lg:px-8'
-              : 'max-w-7xl border border-transparent px-4 sm:px-6 lg:px-8'
-          )}
-        >
-          <Logo text={logoText} href={logoHref} />
-
-          <nav aria-label='Main' className='hidden lg:block'>
-            <ul className='flex items-center gap-1'>
-              {navLinks.map(link => {
-                const isActive = link.href !== undefined && link.href === currentPath
-                const className = cn(
-                  'hover:text-foreground focus-visible:ring-ring rounded-full px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
-                  isActive ? 'text-foreground' : 'text-muted-foreground'
-                )
-
-                return (
-                  <li key={link.label}>
-                    {link.href ? (
-                      <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
-                        {link.label}
-                      </a>
-                    ) : (
-                      <span className={className}>{link.label}</span>
-                    )}
-                  </li>
-                )
-              })}
-            </ul>
-          </nav>
-
-          <div className='hidden items-center gap-2 lg:flex'>
-            {signIn && <ActionButton cta={signIn} onClick={onSignIn} variant='ghost' />}
-            {cta && <ActionButton cta={cta} onClick={onCtaClick} rounded={floatingPill} />}
-          </div>
-
-          <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger asChild>
-              <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
-                <Menu />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side='right' className='w-full max-w-xs p-0'>
-              <SheetHeader className='border-border border-b'>
-                <SheetTitle className='text-left text-base'>Menu</SheetTitle>
-              </SheetHeader>
-
-              <nav aria-label='Mobile' className='flex flex-col px-2 py-2'>
-                {navLinks.map(link => {
-                  const isActive = link.href !== undefined && link.href === currentPath
-                  const className = cn(
-                    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
-                    isActive ? 'text-foreground' : 'text-muted-foreground'
-                  )
-
-                  return (
-                    <SheetClose key={link.label} asChild>
-                      {link.href ? (
-                        <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
-                          {link.label}
-                        </a>
-                      ) : (
-                        <button type='button' className={className}>
-                          {link.label}
-                        </button>
-                      )}
-                    </SheetClose>
-                  )
-                })}
-              </nav>
-
-              <div className='mt-auto flex flex-col gap-4 p-4'>
-                <Separator />
-                <div className='flex flex-col gap-2'>
-                  {signIn && (
-                    <SheetClose asChild>
-                      <ActionButton cta={signIn} onClick={onSignIn} variant='outline' className='w-full' />
-                    </SheetClose>
-                  )}
-                  {cta && (
-                    <SheetClose asChild>
-                      <ActionButton cta={cta} onClick={onCtaClick} className='w-full' />
-                    </SheetClose>
-                  )}
-                </div>
-              </div>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </header>
-    </>
-  )
-}
-
-export default Navbar3

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

@@ -1,56 +0,0 @@
-import { Children, isValidElement, type ReactNode } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } 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 absent avatar', () => {
-  it('renders the fallback initials, never an empty image source, when avatar is absent', () => {
-    const html = renderToStaticMarkup(<Navbar4AccountMenu user={user} />)
-    expect(html).toContain('>A<')
-    expect(html).not.toContain('src=""')
-    expect(html).not.toContain('<img')
-  })
-
-  it('treats an empty avatar string as absent rather than an empty source', () => {
-    const html = renderToStaticMarkup(<Navbar4AccountMenu user={{ ...user, avatar: '' }} />)
-    expect(html).toContain('>A<')
-    expect(html).not.toContain('src=""')
-  })
-})
-
-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', () => {
-    const onSignOut = vi.fn()
-    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut }))
-    ;(item.onSelect as () => void)()
-    expect(onSignOut).toHaveBeenCalledTimes(1)
-  })
-
-  it('prevents duplicate sign-out while the consumer reports the logout pending', () => {
-    const onSignOut = vi.fn()
-    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut }))
-    expect(item.disabled).toBe(true)
-    const select = item.onSelect as () => void
-    select()
-    select()
-    expect(onSignOut).not.toHaveBeenCalled()
-  })
-})

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

@@ -1,134 +0,0 @@
-import { Heart, HelpCircle, LogOut, MapPin, Package, Settings } from 'lucide-react'
-
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Button } from '../../../ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../../ui/dropdown-menu'
-
-export interface StoreUser {
-  name: string
-  email: string
-  avatar?: string
-  initials: string
-}
-
-export interface AccountMenuItem {
-  label: string
-  href: string
-  description?: string
-  icon?: 'orders' | 'wishlist' | 'addresses' | 'settings'
-}
-
-export interface Navbar4AccountMenuProps {
-  /** Signed-in user. When omitted, the menu is not rendered. */
-  user?: StoreUser
-  /** Account links shown below the user header. Defaults to `[]`. */
-  items?: AccountMenuItem[]
-  onHelp?: () => void
-  onSignOut?: () => void
-  pending?: boolean
-}
-
-const accountIcons = {
-  orders: Package,
-  wishlist: Heart,
-  addresses: MapPin,
-  settings: Settings,
-} as const
-
-export function Navbar4AccountMenu({
-  user,
-  items = [],
-  onHelp,
-  onSignOut,
-  pending = false,
-}: Navbar4AccountMenuProps) {
-  if (!user) {
-    return null
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='size-11 rounded-full'
-          disabled={pending}
-          aria-label={`Account menu for ${user.name}`}
-        >
-          <Avatar size='sm' className='pointer-events-none size-8'>
-            <AvatarImage src={user.avatar || undefined} alt='' />
-            <AvatarFallback>{user.initials}</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align='end'
-        sideOffset={8}
-        className='w-64 origin-(--transform-origin) p-1.5 duration-[250ms] data-closed:duration-150'
-      >
-        <DropdownMenuGroup>
-          <DropdownMenuLabel className='px-2 py-2 font-normal'>
-            <div className='flex items-center gap-3'>
-              <Avatar size='sm' className='pointer-events-none'>
-                <AvatarImage src={user.avatar || undefined} alt='' />
-                <AvatarFallback>{user.initials}</AvatarFallback>
-              </Avatar>
-              <div className='min-w-0'>
-                <p className='text-foreground truncate text-sm font-medium'>{user.name}</p>
-                <p className='text-muted-foreground truncate text-xs'>{user.email}</p>
-              </div>
-            </div>
-          </DropdownMenuLabel>
-          {items.length > 0 ? <DropdownMenuSeparator /> : null}
-          {items.map(item => {
-            const Icon = item.icon ? accountIcons[item.icon] : Package
-            return (
-              <DropdownMenuItem key={item.href} asChild disabled={pending} className='gap-2.5 px-2 py-2'>
-                <a href={item.href}>
-                  <Icon className='text-muted-foreground size-4' />
-                  <span className='flex min-w-0 flex-col'>
-                    <span className='text-sm'>{item.label}</span>
-                    {item.description ? (
-                      <span className='text-muted-foreground text-xs font-normal'>{item.description}</span>
-                    ) : null}
-                  </span>
-                </a>
-              </DropdownMenuItem>
-            )
-          })}
-          {onHelp || onSignOut ? <DropdownMenuSeparator /> : null}
-          {onHelp ? (
-            <DropdownMenuItem
-              disabled={pending}
-              className='gap-2.5 px-2 py-2'
-              onSelect={() => { if (!pending) onHelp() }}
-            >
-              <HelpCircle className='text-muted-foreground size-4' />
-              Help & support
-            </DropdownMenuItem>
-          ) : null}
-          {onSignOut ? (
-            <DropdownMenuItem
-              disabled={pending}
-              variant='destructive'
-              className='gap-2.5 px-2 py-2'
-              onSelect={() => { if (!pending) onSignOut() }}
-            >
-              <LogOut className='size-4' />
-              Sign out
-            </DropdownMenuItem>
-          ) : null}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.test.tsx

@@ -1,204 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { Navbar4CartSheet, type CartItem } from './navbar-4-cart-sheet'
-
-const items: CartItem[] = [
-  { id: 'line_1', name: 'Taladro', variant: 'Rojo', price: 45, qty: 2, image: 'https://cdn.example/t.jpg' },
-]
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-const noop = () => {}
-
-describe('Navbar4CartSheet — authoritative subtotal', () => {
-  it('never renders a fake zero for a supplied but absent/malformed subtotal', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        subtotal={{ amount: '', currencyCode: 'USD' }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('—')
-  })
-
-  it('preserves a legitimate zero subtotal', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        subtotal={{ amount: '0', currencyCode: 'USD' }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('—')
-  })
-
-  it('falls back to the legacy local subtotal only when none is supplied', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).toContain('$90.00')
-  })
-})
-
-describe('Navbar4CartSheet — canonical line amounts', () => {
-  it('renders the canonical backend line amount in its currency, not price times qty', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={[{ ...items[0], price: 0, lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('EUR 90.00')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('never falls back to a numeric amount when a canonical line amount is missing', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={[{ ...items[0], price: 45, lineTotal: undefined }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).not.toContain('$90.00')
-    expect(html).toContain('—')
-  })
-
-  it('shows the unavailable label for a malformed canonical line amount', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={[{ ...items[0], lineTotal: { amount: '', currencyCode: 'USD' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('—')
-  })
-
-  it('preserves legacy numeric rendering when canonical mode is omitted', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={[{ ...items[0], lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).toContain('$90.00')
-    expect(html).not.toContain('EUR 90.00')
-  })
-})
-
-describe('Navbar4CartSheet — read/mutation lifecycle', () => {
-  it('shows a pending state instead of claiming an empty cart', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(html).toContain('Actualizando el carrito')
-    expect(html).not.toContain('Your cart is empty')
-  })
-
-  it('shows a recoverable error state with its retry action', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        state='error'
-        errorLabel='No se pudo leer el carrito.'
-        retryLabel='Reintentar'
-        onRetry={noop}
-      />,
-    )
-    expect(html).toContain('No se pudo leer el carrito.')
-    expect(html).toContain('Reintentar')
-    expect(html).toContain('role="alert"')
-  })
-
-  it('disables mutation controls while pending', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(html).toContain('aria-label="Increase quantity, Taladro"')
-    expect(html).toContain('disabled')
-  })
-})
-
-describe('Navbar4CartSheet — action availability', () => {
-  it('suppresses the checkout action when checkout is not installed', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        checkoutUnavailable
-        onCheckout={noop}
-      />,
-    )
-    expect(html).not.toContain('>Checkout</button>')
-    expect(html).toContain('View cart')
-  })
-
-  it('disables the checkout action while the cart is not ready', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
-    )
-    expect(html).toContain('>Checkout</button>')
-    expect(html).toMatch(/disabled[^>]*>Checkout<\/button>/)
-  })
-
-  it('suppresses the review action when the cart view is not installed', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        viewCartUnavailable
-        onViewCart={noop}
-      />,
-    )
-    expect(html).not.toContain('View cart')
-  })
-})
-
-describe('Navbar4CartSheet — accessibility', () => {
-  it('names the line mutation controls', () => {
-    const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} />,
-    )
-    expect(html).toMatch(/aria-label="[^"]*(Increase|Decrease|Aumentar|Disminuir)[^"]*"/)
-    expect(html).toMatch(/aria-label="[^"]*(Remove|Quitar)[^"]*"/)
-  })
-
-  it('announces pending reads politely and errors as an alert', () => {
-    const pending = renderToStaticMarkup(
-      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(pending).toMatch(/role="status"[^>]*aria-live="polite"/)
-    const error = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
-    )
-    expect(error).toMatch(/role="alert"/)
-  })
-})