@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/{marketing/navbars/navbar-4-cart-sheet.test.tsx → e-commerce/navigation/storefront-navbar-cart-sheet.test.tsx}

@@ -1,6 +1,6 @@
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
-import { Navbar4CartSheet, type CartItem } from './navbar-4-cart-sheet'
+import { StorefrontNavbarCartSheet, type CartItem } from './storefront-navbar-cart-sheet'
 
 const items: CartItem[] = [
   { id: 'line_1', name: 'Taladro', variant: 'Rojo', price: 45, qty: 2, image: 'https://cdn.example/t.jpg' },
@@ -11,10 +11,10 @@ const formatMoney = (money: { amount: string; currencyCode: string }) =>
 
 const noop = () => {}
 
-describe('Navbar4CartSheet — authoritative subtotal', () => {
+describe('StorefrontNavbarCartSheet — authoritative subtotal', () => {
   it('never renders a fake zero for a supplied but absent/malformed subtotal', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -28,7 +28,7 @@ describe('Navbar4CartSheet — authoritative subtotal', () => {
 
   it('preserves a legitimate zero subtotal', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -42,7 +42,7 @@ describe('Navbar4CartSheet — authoritative subtotal', () => {
 
   it('falls back to the legacy local subtotal only when none is supplied', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -53,10 +53,10 @@ describe('Navbar4CartSheet — authoritative subtotal', () => {
   })
 })
 
-describe('Navbar4CartSheet — canonical line amounts', () => {
+describe('StorefrontNavbarCartSheet — canonical line amounts', () => {
   it('renders the canonical backend line amount in its currency, not price times qty', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={[{ ...items[0], price: 0, lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
         onQtyChange={noop}
         onRemove={noop}
@@ -70,7 +70,7 @@ describe('Navbar4CartSheet — canonical line amounts', () => {
 
   it('never falls back to a numeric amount when a canonical line amount is missing', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={[{ ...items[0], price: 45, lineTotal: undefined }]}
         onQtyChange={noop}
         onRemove={noop}
@@ -84,7 +84,7 @@ describe('Navbar4CartSheet — canonical line amounts', () => {
 
   it('shows the unavailable label for a malformed canonical line amount', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={[{ ...items[0], lineTotal: { amount: '', currencyCode: 'USD' } }]}
         onQtyChange={noop}
         onRemove={noop}
@@ -98,7 +98,7 @@ describe('Navbar4CartSheet — canonical line amounts', () => {
 
   it('preserves legacy numeric rendering when canonical mode is omitted', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={[{ ...items[0], lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
         onQtyChange={noop}
         onRemove={noop}
@@ -110,10 +110,10 @@ describe('Navbar4CartSheet — canonical line amounts', () => {
   })
 })
 
-describe('Navbar4CartSheet — read/mutation lifecycle', () => {
+describe('StorefrontNavbarCartSheet — 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' />,
+      <StorefrontNavbarCartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
     )
     expect(html).toContain('Actualizando el carrito')
     expect(html).not.toContain('Your cart is empty')
@@ -121,7 +121,7 @@ describe('Navbar4CartSheet — read/mutation lifecycle', () => {
 
   it('shows a recoverable error state with its retry action', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -138,17 +138,17 @@ describe('Navbar4CartSheet — read/mutation lifecycle', () => {
 
   it('disables mutation controls while pending', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
+      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
     )
     expect(html).toContain('aria-label="Increase quantity, Taladro"')
     expect(html).toContain('disabled')
   })
 })
 
-describe('Navbar4CartSheet — action availability', () => {
+describe('StorefrontNavbarCartSheet — action availability', () => {
   it('suppresses the checkout action when checkout is not installed', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -162,7 +162,7 @@ describe('Navbar4CartSheet — action availability', () => {
 
   it('disables the checkout action while the cart is not ready', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
+      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
     )
     expect(html).toContain('>Checkout</button>')
     expect(html).toMatch(/disabled[^>]*>Checkout<\/button>/)
@@ -170,7 +170,7 @@ describe('Navbar4CartSheet — action availability', () => {
 
   it('suppresses the review action when the cart view is not installed', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet
+      <StorefrontNavbarCartSheet
         items={items}
         onQtyChange={noop}
         onRemove={noop}
@@ -182,10 +182,10 @@ describe('Navbar4CartSheet — action availability', () => {
   })
 })
 
-describe('Navbar4CartSheet — accessibility', () => {
+describe('StorefrontNavbarCartSheet — accessibility', () => {
   it('names the line mutation controls', () => {
     const html = renderToStaticMarkup(
-      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} />,
+      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} />,
     )
     expect(html).toMatch(/aria-label="[^"]*(Increase|Decrease|Aumentar|Disminuir)[^"]*"/)
     expect(html).toMatch(/aria-label="[^"]*(Remove|Quitar)[^"]*"/)
@@ -193,11 +193,11 @@ describe('Navbar4CartSheet — accessibility', () => {
 
   it('announces pending reads politely and errors as an alert', () => {
     const pending = renderToStaticMarkup(
-      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+      <StorefrontNavbarCartSheet 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' />,
+      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
     )
     expect(error).toMatch(/role="alert"/)
   })

package/src/blocks/{marketing/navbars/navbar-4-cart-sheet.tsx → e-commerce/navigation/storefront-navbar-cart-sheet.tsx}

@@ -37,7 +37,7 @@ export interface CartItem {
 
 export type CartSheetState = 'idle' | 'pending' | 'error'
 
-export interface Navbar4CartSheetProps {
+export interface StorefrontNavbarCartSheetProps {
   items: CartItem[]
   /**
    * Quantity DELTA for a backend cart line-item id. The boundary converts the
@@ -104,7 +104,7 @@ const revealHidden = { opacity: 0, y: 12, filter: 'blur(3px)' }
 const revealShown = { opacity: 1, y: 0, filter: 'blur(0px)' }
 const revealExit = { opacity: 0, y: 0, filter: 'blur(0px)', transition: { duration: 0.2, ease: 'easeOut' as const } }
 
-export function Navbar4CartSheet({
+export function StorefrontNavbarCartSheet({
   items,
   onQtyChange,
   onRemove,
@@ -124,7 +124,7 @@ export function Navbar4CartSheet({
   checkoutUnavailable = false,
   checkoutDisabled = false,
   viewCartUnavailable = false,
-}: Navbar4CartSheetProps) {
+}: StorefrontNavbarCartSheetProps) {
   const reduceMotion = useReducedMotion()
   const format = formatPrice ?? (value => usdFormatter.format(value))
   const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)

package/src/blocks/{marketing/navbars/navbar-4-mobile-nav.tsx → e-commerce/navigation/storefront-navbar-mobile-nav.tsx}

@@ -2,33 +2,25 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '..
 import { Separator } from '../../../ui/separator'
 import { SheetClose } from '../../../ui/sheet'
 import { cn } from '../../../lib/utils'
-
-export interface StoreCategory {
-  label: string
-  href: string
-  /** Rendered as an accordion inside the mobile sheet; omit for a flat link. */
-  children?: { label: string; href: string }[]
-  /** Styles the link with `text-destructive` — reserve it for one entry. */
-  emphasis?: boolean
-}
+import type { StoreCategory } from '../../../lib/contracts'
 
 export interface UtilityLink {
   label: string
   href: string
 }
 
-export interface Navbar4MobileNavProps {
+export interface StorefrontNavbarMobileNavProps {
   storeCategories: StoreCategory[]
   utilityLinks: UtilityLink[]
   /** When provided, an extra "Account" link is appended after the utility links. */
   accountHref?: string
 }
 
-export function Navbar4MobileNav({
+export function StorefrontNavbarMobileNav({
   storeCategories,
   utilityLinks,
   accountHref,
-}: Navbar4MobileNavProps) {
+}: StorefrontNavbarMobileNavProps) {
   return (
     <nav aria-label='Store' className='px-2 py-2'>
       <Accordion type='multiple'>

package/src/blocks/{marketing/navbars/navbar-4-search-bar.tsx → e-commerce/navigation/storefront-navbar-search-bar.tsx}

@@ -2,19 +2,19 @@ import { Search } from 'lucide-react'
 
 import { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'
 
-export interface Navbar4SearchBarProps {
+export interface StorefrontNavbarSearchBarProps {
   value: string
   onValueChange: (value: string) => void
   onDismiss?: () => void
   id?: string
 }
 
-export function Navbar4SearchBar({
+export function StorefrontNavbarSearchBar({
   value,
   onValueChange,
   onDismiss,
   id = 'store-search',
-}: Navbar4SearchBarProps) {
+}: StorefrontNavbarSearchBarProps) {
   return (
     <form
       role='search'

package/src/blocks/{marketing/navbars/navbar-4.test.tsx → e-commerce/navigation/storefront-navbar.test.tsx}

@@ -1,8 +1,9 @@
+import type { ReactElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { Navbar4 } from './navbar-4'
-import { Navbar4AccountMenu } from './navbar-4-account-menu'
-import { navbar4PropsSchema } from '../../../lib/contracts'
+import { describe, expect, it, vi } from 'vitest'
+import { StorefrontNavbar, StorefrontNavbarAccountRetry } from './storefront-navbar'
+import { StorefrontNavbarAccountMenu } from './storefront-navbar-account-menu'
+import { storefrontNavbarPropsSchema } from '../../../lib/contracts'
 
 const base = {
   storeCategories: [],
@@ -11,42 +12,49 @@ const base = {
   logoText: 'ElectroCuba',
 }
 
-describe('Navbar4 — account affordance', () => {
+describe('StorefrontNavbar — account affordance', () => {
   const user = { name: 'Ada Lovelace', email: 'ada@example.test', initials: 'AL' }
 
   it('offers a visible account destination to anonymous shoppers', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} accountHref="/account" />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} accountHref="/account" />)
     expect(html).toMatch(/<a[^>]*href="\/account"[^>]*aria-label="Account"/)
   })
 
   it('renders the identity trigger without a desktop-only wrapper or empty image', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} user={user} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} user={user} />)
     expect(html).toContain('Account menu for Ada Lovelace')
     expect(html).not.toMatch(/<div class="hidden lg:block"><button[^>]*aria-label="Account/)
     expect(html).not.toContain('src=""')
   })
 
+  it('renders the fallback initials when the identity has no avatar, never an empty image source', () => {
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} user={user} />)
+    expect(html).toContain('>AL<')
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('<img')
+  })
+
   it('renders no account control without identity or destination', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
     expect(html).not.toContain('aria-label="Account')
-    expect(renderToStaticMarkup(<Navbar4AccountMenu />)).toBe('')
+    expect(renderToStaticMarkup(<StorefrontNavbarAccountMenu />)).toBe('')
   })
 
   it('disables the identity trigger while a session operation is pending', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} user={user} accountPending />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} user={user} accountPending />)
     expect(html).toMatch(/<button[^>]*disabled=""[^>]*aria-label="Account menu for Ada Lovelace"/)
   })
 
   it('distinguishes unavailable identity from anonymous and offers retry', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} accountHref="/account" accountUnavailable onAccountRetry={() => {}} />,
+      <StorefrontNavbar {...base} accountHref="/account" accountUnavailable onAccountRetry={() => {}} />,
     )
     expect(html).toContain('aria-label="Retry account session"')
     expect(html).not.toContain('aria-label="Account"')
   })
 
   it('keeps serializable identity and feedback while stripping callbacks', () => {
-    const parsed = navbar4PropsSchema.parse({
+    const parsed = storefrontNavbarPropsSchema.parse({
       ...base, user, accountHref: '/account', accountMenuItems: [{ label: 'Account', href: '/account' }],
       accountPending: true, accountUnavailable: true, onSignOut: () => {},
     })
@@ -57,16 +65,39 @@ describe('Navbar4 — account affordance', () => {
   })
 })
 
-describe('Navbar4 — optional logo accent', () => {
+describe('StorefrontNavbar — consumer-controlled session retry', () => {
+  type RetryProps = { onClick?: () => void; disabled?: boolean }
+
+  it('dispatches the consumer retry action from the unavailable affordance', () => {
+    const onRetry = vi.fn()
+    const control = StorefrontNavbarAccountRetry({ onRetry }) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(false)
+    control.props.onClick?.()
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('holds retry inert while reconciliation is pending', () => {
+    const onRetry = vi.fn()
+    const control = StorefrontNavbarAccountRetry({ pending: true, onRetry }) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(true)
+  })
+
+  it('holds retry inert when no consumer callback is bound (no empty affordance)', () => {
+    const control = StorefrontNavbarAccountRetry({}) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(true)
+  })
+})
+
+describe('StorefrontNavbar — optional logo accent', () => {
   it('renders the wordmark unchanged when no accent is supplied', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
     expect(html).toContain('>ElectroCuba</span>')
     expect(html).not.toContain('text-brand-promo')
   })
 
   it('accents a matched trailing segment without duplicating the wordmark', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+      <StorefrontNavbar {...base} logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
     )
     expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
     expect(html.match(/Electro/g)).toHaveLength(1)
@@ -75,54 +106,54 @@ describe('Navbar4 — optional logo accent', () => {
 
   it('accents the full wordmark when the accent covers all of it', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} logoAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
+      <StorefrontNavbar {...base} logoAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
     )
     expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
   })
 
   it('does not accent when the segment is not a trailing match', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} logoAccent={{ text: 'Electro' }} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} logoAccent={{ text: 'Electro' }} />)
     expect(html).toContain('>ElectroCuba</span>')
     expect(html).not.toContain('<span class="">')
   })
 
   it('keeps the wordmark as the accessible text of the logo link', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} logoHref='/' logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+      <StorefrontNavbar {...base} logoHref='/' logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
     )
     expect(html).toContain('href="/"')
     expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
   })
 })
 
-describe('Navbar4 — optional utility strip', () => {
+describe('StorefrontNavbar — optional utility strip', () => {
   // The desktop utility strip is the only element with this inner track class.
   const strip = (html: string) => html.includes('h-9 w-full max-w-7xl')
 
   it('renders no utility strip when the note is empty and there are no utility links', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 storeCategories={[]} shippingNote='' utilityLinks={[]} logoText='ElectroCuba' />,
+      <StorefrontNavbar storeCategories={[]} shippingNote='' utilityLinks={[]} logoText='ElectroCuba' />,
     )
     expect(strip(html)).toBe(false)
   })
 
   it('renders no utility strip when the note is omitted', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 storeCategories={[]} utilityLinks={[]} logoText='ElectroCuba' />,
+      <StorefrontNavbar storeCategories={[]} utilityLinks={[]} logoText='ElectroCuba' />,
     )
     expect(strip(html)).toBe(false)
   })
 
   it('treats a whitespace-only note as empty', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 storeCategories={[]} shippingNote='   ' utilityLinks={[]} logoText='ElectroCuba' />,
+      <StorefrontNavbar storeCategories={[]} shippingNote='   ' utilityLinks={[]} logoText='ElectroCuba' />,
     )
     expect(strip(html)).toBe(false)
   })
 
   it('renders the utility strip with a non-empty note', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 storeCategories={[]} shippingNote='Entrega segura' utilityLinks={[]} logoText='ElectroCuba' />,
+      <StorefrontNavbar storeCategories={[]} shippingNote='Entrega segura' utilityLinks={[]} logoText='ElectroCuba' />,
     )
     expect(strip(html)).toBe(true)
     expect(html).toContain('Entrega segura')
@@ -130,7 +161,7 @@ describe('Navbar4 — optional utility strip', () => {
 
   it('renders the utility strip when there is a utility link even with an empty note', () => {
     const html = renderToStaticMarkup(
-      <Navbar4
+      <StorefrontNavbar
         storeCategories={[]}
         shippingNote=''
         utilityLinks={[{ label: 'Ayuda', href: '/help' }]}
@@ -149,9 +180,9 @@ const category = { href: '/herramientas', label: 'Herramientas' }
 const navLinkClass = (html: string) =>
   html.match(/<a href="\/herramientas" class="([^"]*hover:bg-muted[^"]*)"/)?.[1] ?? ''
 
-describe('Navbar4 — optional outer surface className', () => {
+describe('StorefrontNavbar — optional outer surface className', () => {
   it('keeps the default surface (incl. backdrop-filter variant) and nav link color when className is omitted', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} storeCategories={[category]} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} storeCategories={[category]} />)
     expect(html).toContain('bg-background/95')
     expect(html).toContain('supports-backdrop-filter:bg-background/80')
     expect(navLinkClass(html)).toContain('text-foreground')
@@ -160,7 +191,7 @@ describe('Navbar4 — optional outer surface className', () => {
 
   it('gives the consumer full surface ownership when className is supplied (no default background or variant)', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+      <StorefrontNavbar {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
     )
     expect(html).toContain('bg-brand-nav')
     expect(html).toContain('text-brand-nav-foreground')
@@ -174,7 +205,7 @@ describe('Navbar4 — optional outer surface className', () => {
 
   it('lets nav links inherit the branded surface text color with a correct hover foreground', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+      <StorefrontNavbar {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
     )
     expect(navLinkClass(html)).toContain('text-inherit')
     expect(navLinkClass(html)).toContain('hover:text-foreground')
@@ -184,15 +215,15 @@ describe('Navbar4 — optional outer surface className', () => {
 const cartTrigger = (html: string) =>
   html.match(/<button[^>]*aria-label="Cart,[^"]*"[^>]*>/)?.[0] ?? ''
 
-describe('Navbar4 — controlled cart sheet visibility', () => {
+describe('StorefrontNavbar — controlled cart sheet visibility', () => {
   it('keeps the uncontrolled sheet closed by default (legacy consumers unaffected)', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
     expect(cartTrigger(html)).toContain('data-state="closed"')
   })
 
   it('reflects a controlled open state on the trigger', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} cartOpen={true} onCartOpenChange={() => {}} />,
+      <StorefrontNavbar {...base} cartOpen={true} onCartOpenChange={() => {}} />,
     )
     expect(cartTrigger(html)).toContain('data-state="open"')
     expect(cartTrigger(html)).toContain('aria-expanded="true"')
@@ -200,23 +231,23 @@ describe('Navbar4 — controlled cart sheet visibility', () => {
 
   it('reflects a controlled closed state on the trigger', () => {
     const html = renderToStaticMarkup(
-      <Navbar4 {...base} cartOpen={false} onCartOpenChange={() => {}} />,
+      <StorefrontNavbar {...base} cartOpen={false} onCartOpenChange={() => {}} />,
     )
     expect(cartTrigger(html)).toContain('data-state="closed"')
     expect(cartTrigger(html)).toContain('aria-expanded="false"')
   })
 })
 
-describe('Navbar4 — optional showSearch (E2 task 5.4)', () => {
+describe('StorefrontNavbar — optional showSearch (E2 task 5.4)', () => {
   it('renders the search control by default (legacy consumers unaffected)', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
     expect(html).toContain('role="search"')
     expect(html).toContain('type="search"')
     expect(html).toContain('aria-label="Search products"')
   })
 
   it('renders no search control when showSearch is false, keeping the rest of the chrome', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={false} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} showSearch={false} />)
     expect(html).not.toContain('role="search"')
     expect(html).not.toContain('type="search"')
     expect(html).not.toContain('aria-label="Search products"')
@@ -226,7 +257,7 @@ describe('Navbar4 — optional showSearch (E2 task 5.4)', () => {
   })
 
   it('renders the search control when showSearch is explicitly true', () => {
-    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={true} />)
+    const html = renderToStaticMarkup(<StorefrontNavbar {...base} showSearch={true} />)
     expect(html).toContain('role="search"')
     expect(html).toContain('type="search"')
   })

package/src/blocks/{marketing/navbars/navbar-4.tsx → e-commerce/navigation/storefront-navbar.tsx}

@@ -8,12 +8,12 @@ import { Button } from '../../../ui/button'
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'
 import { cn } from '../../../lib/utils'
 
-import { Navbar4AccountMenu, type AccountMenuItem, type StoreUser } from './navbar-4-account-menu'
-import { Navbar4CartSheet, type CartItem, type CartSheetState } from './navbar-4-cart-sheet'
-import type { UtilityLink } from './navbar-4-mobile-nav'
-import { Navbar4SearchBar } from './navbar-4-search-bar'
-import { MegaMenu } from '../../e-commerce/navigation/mega-menu'
-import { MobileCategoryDrawer } from '../../e-commerce/navigation/mobile-category-drawer'
+import { StorefrontNavbarAccountMenu, type AccountMenuItem, type StoreUser } from './storefront-navbar-account-menu'
+import { StorefrontNavbarCartSheet, type CartItem, type CartSheetState } from './storefront-navbar-cart-sheet'
+import type { UtilityLink } from './storefront-navbar-mobile-nav'
+import { StorefrontNavbarSearchBar } from './storefront-navbar-search-bar'
+import { MegaMenu } from './mega-menu'
+import { MobileCategoryDrawer } from './mobile-category-drawer'
 import type { MenuItem } from '../../../lib/types/menu'
 import type { Money } from '@thorprovider/types'
 import type { StoreCategory } from '../../../lib/contracts'
@@ -161,7 +161,35 @@ function CartBadge({ count }: CartBadgeProps) {
   )
 }
 
-export interface Navbar4Props {
+export interface StorefrontNavbarAccountRetryProps {
+  /** Consumer-owned reconciliation in flight; holds the affordance inert. */
+  pending?: boolean
+  /** Consumer-owned recovery action. Without it the affordance is inert. */
+  onRetry?: () => void
+}
+
+/**
+ * Recovery affordance for an unavailable session. The block never resolves the
+ * session itself: it surfaces the state and dispatches the consumer's retry.
+ * Extracted (hooks-free) so the dispatch is testable without a DOM.
+ */
+export function StorefrontNavbarAccountRetry({ pending = false, onRetry }: StorefrontNavbarAccountRetryProps) {
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      className='size-11'
+      disabled={pending || !onRetry}
+      aria-label='Retry account session'
+      title='Account session unavailable'
+      onClick={onRetry}
+    >
+      <RotateCcw aria-hidden='true' />
+    </Button>
+  )
+}
+
+export interface StorefrontNavbarProps {
   storeCategories: StoreCategory[]
   /**
    * Optional note shown in the desktop utility strip. When omitted (or empty)
@@ -257,7 +285,7 @@ export interface Navbar4Props {
   className?: string
 }
 
-export function Navbar4({
+export function StorefrontNavbar({
   storeCategories,
   shippingNote = '',
   utilityLinks,
@@ -295,7 +323,7 @@ export function Navbar4({
   checkoutDisabled,
   viewCartUnavailable,
   className,
-}: Navbar4Props) {
+}: StorefrontNavbarProps) {
   /**
    * Integration seam
    * ----------------
@@ -467,7 +495,7 @@ export function Navbar4({
           {showSearch ? (
             <>
               <div className='hidden lg:block lg:w-64'>
-                <Navbar4SearchBar
+                <StorefrontNavbarSearchBar
                   id='store-search'
                   value={searchQuery}
                   onValueChange={setSearchQuery}
@@ -489,19 +517,9 @@ export function Navbar4({
           ) : null}
 
           {accountUnavailable ? (
-            <Button
-              variant='ghost'
-              size='icon'
-              className='size-11'
-              disabled={accountPending || !onAccountRetry}
-              aria-label='Retry account session'
-              title='Account session unavailable'
-              onClick={onAccountRetry}
-            >
-              <RotateCcw aria-hidden='true' />
-            </Button>
+            <StorefrontNavbarAccountRetry pending={accountPending} onRetry={onAccountRetry} />
           ) : user ? (
-            <Navbar4AccountMenu
+            <StorefrontNavbarAccountMenu
               user={user}
               items={accountMenuItems}
               onHelp={onHelp}
@@ -542,7 +560,7 @@ export function Navbar4({
                   Cart{count > 0 ? ` (${count})` : ''}
                 </SheetTitle>
               </SheetHeader>
-              <Navbar4CartSheet
+              <StorefrontNavbarCartSheet
                 items={items}
                 onQtyChange={changeQty}
                 onRemove={removeItem}
@@ -571,7 +589,7 @@ export function Navbar4({
 
       {showSearch && searchOpen ? (
         <div className='border-border flex flex-col gap-0 border-t p-4 lg:hidden'>
-          <Navbar4SearchBar
+          <StorefrontNavbarSearchBar
             id='store-search-mobile'
             value={searchQuery}
             onValueChange={setSearchQuery}
@@ -583,4 +601,4 @@ export function Navbar4({
   )
 }
 
-export default Navbar4
+export default StorefrontNavbar