@thorprovider/blocks 0.1.2 → 1.0.0

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

@@ -27,8 +27,16 @@ export interface CartItem {
   qty: number
   /** Optional; an absent image is omitted rather than serialized as `""`. */
   image?: string
+  /**
+   * Canonical backend line amount. Required for truthful rendering in
+   * `canonical` mode; when absent/invalid the line shows the unavailable
+   * label rather than a numeric fallback.
+   */
+  lineTotal?: Money
 }
 
+export type CartSheetState = 'idle' | 'pending' | 'error'
+
 export interface Navbar4CartSheetProps {
   items: CartItem[]
   /**
@@ -49,6 +57,31 @@ export interface Navbar4CartSheetProps {
   formatPrice?: (value: number) => string
   onCheckout?: () => void
   onViewCart?: () => void
+  /**
+   * Backend-authoritative rendering. When `true`, each line amount comes from
+   * the item's canonical `lineTotal` Money and the sheet never recomputes
+   * `price * qty`. When omitted/false, legacy numeric rendering is preserved
+   * for standalone consumers.
+   */
+  canonical?: boolean
+  /** Shown in `canonical` mode when a line amount is missing or malformed. */
+  lineUnavailableLabel?: string
+  /** Cart read/mutation lifecycle. Pending retains confirmed lines; error is recoverable. */
+  state?: CartSheetState
+  /** Message shown when `state` is `error`. */
+  errorLabel?: string
+  /** Label for the recovery action in the error state. */
+  retryLabel?: string
+  /** Recovery action invoked from the error state. */
+  onRetry?: () => void
+  /** Label shown while `state` is `pending`. */
+  pendingLabel?: string
+  /** When `true`, the checkout action is suppressed (checkout not installed). */
+  checkoutUnavailable?: boolean
+  /** When `true`, the checkout action is disabled (cart not ready / invalid amounts). */
+  checkoutDisabled?: boolean
+  /** When `true`, the review action is suppressed (cart view not installed). */
+  viewCartUnavailable?: boolean
 }
 
 const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
@@ -81,12 +114,24 @@ export function Navbar4CartSheet({
   formatPrice,
   onCheckout,
   onViewCart,
+  canonical = false,
+  lineUnavailableLabel = '—',
+  state = 'idle',
+  errorLabel = 'No se pudo actualizar el carrito.',
+  retryLabel = 'Reintentar',
+  onRetry,
+  pendingLabel = 'Actualizando el carrito…',
+  checkoutUnavailable = false,
+  checkoutDisabled = false,
+  viewCartUnavailable = false,
 }: Navbar4CartSheetProps) {
   const reduceMotion = useReducedMotion()
   const format = formatPrice ?? (value => usdFormatter.format(value))
   const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
   const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null
   const isEmpty = items.length === 0
+  const isPending = state === 'pending'
+  const isError = state === 'error'
   /** Wait for the last cart row's exit before revealing empty copy. */
   const [showEmpty, setShowEmpty] = useState(isEmpty)
 
@@ -96,9 +141,46 @@ export function Navbar4CartSheet({
     }
   }, [isEmpty])
 
+  const lineAmount = (item: CartItem): string => {
+    if (canonical) {
+      if (item.lineTotal === undefined) {
+        return lineUnavailableLabel
+      }
+      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel
+    }
+    return format(item.price * item.qty)
+  }
+
+  // A confirmed empty cart is only claimed when no read/mutation is in flight
+  // and no read error is outstanding; otherwise the sheet shows loading/error.
+  const showConfirmedEmpty = showEmpty && !isPending && !isError
+  const mutationsDisabled = isPending
+
   return (
     <>
       <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
+        {isPending ? (
+          <p
+            role='status'
+            aria-live='polite'
+            className='border-border text-muted-foreground border-b px-4 py-2 text-sm'
+          >
+            {pendingLabel}
+          </p>
+        ) : null}
+        {isError ? (
+          <div
+            role='alert'
+            className='border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm'
+          >
+            <span className='text-destructive'>{errorLabel}</span>
+            {onRetry ? (
+              <Button variant='ghost' size='sm' onClick={onRetry}>
+                {retryLabel}
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
         <ul className='flex-1 overflow-y-auto px-4'>
           <AnimatePresence
             initial={false}
@@ -139,7 +221,7 @@ export function Navbar4CartSheet({
                         <p className='text-muted-foreground text-sm'>{item.variant}</p>
                       ) : null}
                     </div>
-                    <p className='text-sm font-medium'>{format(item.price * item.qty)}</p>
+                    <p className='text-sm font-medium'>{lineAmount(item)}</p>
                   </div>
 
                   <div className='mt-auto flex items-center justify-between pt-2'>
@@ -149,6 +231,7 @@ export function Navbar4CartSheet({
                         size='icon'
                         className='size-8 rounded-r-none'
                         aria-label={`Decrease quantity, ${item.name}`}
+                        disabled={mutationsDisabled}
                         onClick={() => onQtyChange(item.id, -1)}
                       >
                         <Minus />
@@ -159,6 +242,7 @@ export function Navbar4CartSheet({
                         size='icon'
                         className='size-8 rounded-l-none'
                         aria-label={`Increase quantity, ${item.name}`}
+                        disabled={mutationsDisabled}
                         onClick={() => onQtyChange(item.id, 1)}
                       >
                         <Plus />
@@ -169,6 +253,7 @@ export function Navbar4CartSheet({
                       size='sm'
                       className='text-muted-foreground hover:text-foreground'
                       aria-label={`Remove ${item.name} from cart`}
+                      disabled={mutationsDisabled}
                       onClick={() => onRemove(item.id)}
                     >
                       Remove
@@ -181,7 +266,7 @@ export function Navbar4CartSheet({
         </ul>
 
         <AnimatePresence>
-          {showEmpty ? (
+          {showConfirmedEmpty ? (
             <motion.div
               key='empty'
               initial={false}
@@ -257,19 +342,27 @@ export function Navbar4CartSheet({
           <div className='flex items-center justify-between text-sm'>
             <span className='text-muted-foreground'>Subtotal</span>
             <span className='font-medium tabular-nums'>
-              {subtotalProp !== undefined
+              {canonical || subtotalProp !== undefined
                 ? authoritativeSubtotal ?? subtotalUnavailableLabel
                 : format(localSubtotal)}
             </span>
           </div>
           <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
           <div className='flex flex-col gap-2'>
-            <Button className='w-full' onClick={onCheckout}>
-              Checkout
-            </Button>
-            <Button variant='ghost' className='w-full' onClick={onViewCart}>
-              View cart
-            </Button>
+            {checkoutUnavailable ? null : (
+              <Button
+                className='w-full'
+                disabled={checkoutDisabled || isPending}
+                onClick={onCheckout}
+              >
+                Checkout
+              </Button>
+            )}
+            {viewCartUnavailable ? null : (
+              <Button variant='ghost' className='w-full' onClick={onViewCart}>
+                View cart
+              </Button>
+            )}
           </div>
         </div>
       ) : null}

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

@@ -1,6 +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 { describe, expect, it, vi } from 'vitest'
+import { Navbar4, Navbar4AccountRetry } from './navbar-4'
+import { Navbar4AccountMenu } from './navbar-4-account-menu'
+import { navbar4PropsSchema } from '../../../lib/contracts'
 
 const base = {
   storeCategories: [],
@@ -9,6 +12,82 @@ const base = {
   logoText: 'ElectroCuba',
 }
 
+describe('Navbar4 — 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" />)
+    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} />)
+    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(<Navbar4 {...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} />)
+    expect(html).not.toContain('aria-label="Account')
+    expect(renderToStaticMarkup(<Navbar4AccountMenu />)).toBe('')
+  })
+
+  it('disables the identity trigger while a session operation is pending', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...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={() => {}} />,
+    )
+    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({
+      ...base, user, accountHref: '/account', accountMenuItems: [{ label: 'Account', href: '/account' }],
+      accountPending: true, accountUnavailable: true, onSignOut: () => {},
+    })
+    expect(parsed.user).toEqual(user)
+    expect(parsed.accountPending).toBe(true)
+    expect(parsed.accountUnavailable).toBe(true)
+    expect(parsed).not.toHaveProperty('onSignOut')
+  })
+})
+
+describe('Navbar4 — 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 = Navbar4AccountRetry({ 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 = Navbar4AccountRetry({ 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 = Navbar4AccountRetry({}) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(true)
+  })
+})
+
 describe('Navbar4 — optional logo accent', () => {
   it('renders the wordmark unchanged when no accent is supplied', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)
@@ -47,6 +126,53 @@ describe('Navbar4 — optional logo accent', () => {
   })
 })
 
+describe('Navbar4 — 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' />,
+    )
+    expect(strip(html)).toBe(false)
+  })
+
+  it('renders no utility strip when the note is omitted', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 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' />,
+    )
+    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' />,
+    )
+    expect(strip(html)).toBe(true)
+    expect(html).toContain('Entrega segura')
+  })
+
+  it('renders the utility strip when there is a utility link even with an empty note', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4
+        storeCategories={[]}
+        shippingNote=''
+        utilityLinks={[{ label: 'Ayuda', href: '/help' }]}
+        logoText='ElectroCuba'
+      />,
+    )
+    expect(strip(html)).toBe(true)
+    expect(html).toContain('Ayuda')
+  })
+})
+
 const category = { href: '/herramientas', label: 'Herramientas' }
 
 // The desktop nav link (the mobile drawer also emits an anchor for the same
@@ -86,6 +212,32 @@ describe('Navbar4 — optional outer surface className', () => {
   })
 })
 
+const cartTrigger = (html: string) =>
+  html.match(/<button[^>]*aria-label="Cart,[^"]*"[^>]*>/)?.[0] ?? ''
+
+describe('Navbar4 — controlled cart sheet visibility', () => {
+  it('keeps the uncontrolled sheet closed by default (legacy consumers unaffected)', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...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={() => {}} />,
+    )
+    expect(cartTrigger(html)).toContain('data-state="open"')
+    expect(cartTrigger(html)).toContain('aria-expanded="true"')
+  })
+
+  it('reflects a controlled closed state on the trigger', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...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)', () => {
   it('renders the search control by default (legacy consumers unaffected)', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)

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

@@ -2,14 +2,14 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Menu, Search, ShoppingBag, X } from 'lucide-react'
+import { Menu, Search, ShoppingBag, UserRound, RotateCcw, X } from 'lucide-react'
 
 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 } from './navbar-4-cart-sheet'
+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'
@@ -161,9 +161,42 @@ function CartBadge({ count }: CartBadgeProps) {
   )
 }
 
+export interface Navbar4AccountRetryProps {
+  /** 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 Navbar4AccountRetry({ pending = false, onRetry }: Navbar4AccountRetryProps) {
+  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 Navbar4Props {
   storeCategories: StoreCategory[]
-  shippingNote: string
+  /**
+   * Optional note shown in the desktop utility strip. When omitted (or empty)
+   * and there are no `utilityLinks`, the strip is not rendered at all, so a
+   * block with no optional content paints no empty decorative chrome.
+   */
+  shippingNote?: string
   utilityLinks: UtilityLink[]
   logoText: string
   logoHref?: string
@@ -173,7 +206,7 @@ export interface Navbar4Props {
    * `logoText`, the wordmark renders unchanged.
    */
   logoAccent?: LogoAccent
-  /** When provided, a mobile-only "Account" link is appended to the utility links. */
+  /** Account destination for anonymous shoppers on every viewport. */
   accountHref?: string
   /**
    * When `false`, no search control is rendered at all — neither the desktop
@@ -182,6 +215,11 @@ export interface Navbar4Props {
    * storefront passes `false` while no verified global search contract exists
    * (E2 task 5.4), so no global search is presented as working.
    */
+  /**
+   * The storefront's current route path. When it matches a destination the link
+   * is marked as the current page (accessibly, beyond color alone).
+   */
+  currentPath?: string
   showSearch?: boolean
   searchQuery?: string
   onSearchChange?: (value: string) => void
@@ -204,8 +242,40 @@ export interface Navbar4Props {
   accountMenuItems?: AccountMenuItem[]
   onHelp?: () => void
   onSignOut?: () => void
+  accountPending?: boolean
+  accountUnavailable?: boolean
+  onAccountRetry?: () => void
   onCheckout?: () => void
   onViewCart?: () => void
+  /**
+   * Controlled visibility for the cart sheet. When provided, the sheet opens
+   * and closes from this value and `onCartOpenChange` instead of internal
+   * state, so a host can share one cart surface across the navbar trigger and
+   * successful add-to-cart. Omit both to keep the legacy uncontrolled sheet.
+   */
+  cartOpen?: boolean
+  /** Change handler paired with `cartOpen` for a controlled sheet. */
+  onCartOpenChange?: (open: boolean) => void
+  /**
+   * Backend-authoritative cart rendering for the sheet. When `true`, line
+   * amounts use each item's canonical `lineTotal` Money and never fall back to
+   * numeric `price * qty`. Omit for the legacy numeric rendering.
+   */
+  canonicalCart?: boolean
+  /** Cart read/mutation lifecycle for the sheet. */
+  cartState?: CartSheetState
+  /** Message shown when `cartState` is `error`. */
+  cartErrorLabel?: string
+  /** Recovery action label for the error state. */
+  cartRetryLabel?: string
+  /** Recovery action invoked from the error state. */
+  onCartRetry?: () => void
+  /** When `true`, the sheet's checkout action is suppressed (checkout not installed). */
+  checkoutUnavailable?: boolean
+  /** When `true`, the sheet's checkout action is disabled (cart not ready). */
+  checkoutDisabled?: boolean
+  /** When `true`, the sheet's review action is suppressed (cart view not installed). */
+  viewCartUnavailable?: boolean
   /**
    * Consumer-supplied classes merged onto the outer `<header>` as the final
    * argument, so a semantic surface such as `bg-brand-nav
@@ -217,12 +287,13 @@ export interface Navbar4Props {
 
 export function Navbar4({
   storeCategories,
-  shippingNote,
+  shippingNote = '',
   utilityLinks,
   logoText,
   logoHref,
   logoAccent,
   accountHref,
+  currentPath,
   showSearch = true,
   searchQuery: searchQueryProp,
   onSearchChange,
@@ -236,8 +307,21 @@ export function Navbar4({
   accountMenuItems,
   onHelp,
   onSignOut,
+  accountPending = false,
+  accountUnavailable = false,
+  onAccountRetry,
   onCheckout,
   onViewCart,
+  cartOpen,
+  onCartOpenChange,
+  canonicalCart,
+  cartState,
+  cartErrorLabel,
+  cartRetryLabel,
+  onCartRetry,
+  checkoutUnavailable,
+  checkoutDisabled,
+  viewCartUnavailable,
   className,
 }: Navbar4Props) {
   /**
@@ -300,6 +384,13 @@ export function Navbar4({
   // default foreground (and the default hover surface).
   const navLinkColor =
     className !== undefined ? 'text-inherit hover:text-foreground' : 'text-foreground'
+  // The current page is marked beyond color: an accessible current state plus a
+  // visible weight/underline, and nothing when no destination matches.
+  const isCurrent = (href?: string) => href !== undefined && href === currentPath
+
+  // The desktop utility strip is decorative chrome: it is painted only when it
+  // has content (a non-empty note or at least one utility link), never empty.
+  const hasUtilityContent = shippingNote.trim().length > 0 || utilityLinks.length > 0
 
   return (
     <header
@@ -308,23 +399,25 @@ export function Navbar4({
         className ?? 'bg-background/95 supports-backdrop-filter:bg-background/80',
       )}
     >
-      <div className='bg-foreground text-background hidden lg:block'>
-        <div className='mx-auto flex h-9 w-full max-w-7xl items-center justify-between px-4 text-xs tracking-wide sm:px-6 lg:px-8'>
-          <p className='text-background/80'>{shippingNote}</p>
-          <ul className='flex items-center gap-5'>
-            {utilityLinks.map(link => (
-              <li key={`${link.href}:${link.label}`}>
-                <a
-                  href={link.href}
-                  className='text-background/80 hover:text-background transition-colors duration-150'
-                >
-                  {link.label}
-                </a>
-              </li>
-            ))}
-          </ul>
+      {hasUtilityContent ? (
+        <div className='bg-foreground text-background hidden lg:block'>
+          <div className='mx-auto flex h-9 w-full max-w-7xl items-center justify-between px-4 text-xs tracking-wide sm:px-6 lg:px-8'>
+            <p className='text-background/80'>{shippingNote}</p>
+            <ul className='flex items-center gap-5'>
+              {utilityLinks.map(link => (
+                <li key={`${link.href}:${link.label}`}>
+                  <a
+                    href={link.href}
+                    className='text-background/80 hover:text-background transition-colors duration-150'
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
-      </div>
+      ) : null}
 
       <div className='mx-auto flex h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8'>
         <Button
@@ -361,9 +454,11 @@ export function Navbar4({
                 <li key={category.href} className='group relative'>
                   <a
                     href={category.href}
+                    aria-current={isCurrent(category.href) ? 'page' : undefined}
                     className={cn(
                       'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
                       category.emphasis ? 'text-destructive' : navLinkColor,
+                      isCurrent(category.href) && 'font-semibold underline underline-offset-4',
                     )}
                   >
                     {category.label}
@@ -381,9 +476,11 @@ export function Navbar4({
                 <li key={category.href}>
                   <a
                     href={category.href}
+                    aria-current={isCurrent(category.href) ? 'page' : undefined}
                     className={cn(
                       'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
                       category.emphasis ? 'text-destructive' : navLinkColor,
+                      isCurrent(category.href) && 'font-semibold underline underline-offset-4',
                     )}
                   >
                     {category.label}
@@ -419,18 +516,33 @@ export function Navbar4({
             </>
           ) : null}
 
-          {user ? (
-            <div className='hidden lg:block'>
-              <Navbar4AccountMenu
-                user={user}
-                items={accountMenuItems}
-                onHelp={onHelp}
-                onSignOut={onSignOut}
-              />
-            </div>
+          {accountUnavailable ? (
+            <Navbar4AccountRetry pending={accountPending} onRetry={onAccountRetry} />
+          ) : user ? (
+            <Navbar4AccountMenu
+              user={user}
+              items={accountMenuItems}
+              onHelp={onHelp}
+              onSignOut={onSignOut}
+              pending={accountPending}
+            />
+          ) : accountHref ? (
+            accountPending ? (
+              <Button variant='ghost' size='icon' className='size-11' disabled aria-label='Loading account session'>
+                <UserRound aria-hidden='true' />
+              </Button>
+            ) : (
+              <Button variant='ghost' size='icon' className='size-11' asChild>
+                <a href={accountHref} aria-label='Account' aria-current={isCurrent(accountHref) ? 'page' : undefined}>
+                  <UserRound aria-hidden='true' />
+                </a>
+              </Button>
+            )
           ) : null}
 
-          <Sheet>
+          <Sheet
+            {...(cartOpen !== undefined ? { open: cartOpen, onOpenChange: onCartOpenChange } : {})}
+          >
             <SheetTrigger asChild>
               <Button
                 variant='ghost'
@@ -457,6 +569,14 @@ export function Navbar4({
                 formatMoney={formatMoney}
                 onCheckout={onCheckout}
                 onViewCart={onViewCart}
+                canonical={canonicalCart}
+                state={cartState}
+                errorLabel={cartErrorLabel}
+                retryLabel={cartRetryLabel}
+                onRetry={onCartRetry}
+                checkoutUnavailable={checkoutUnavailable}
+                checkoutDisabled={checkoutDisabled}
+                viewCartUnavailable={viewCartUnavailable}
               />
             </SheetContent>
           </Sheet>
@@ -481,4 +601,4 @@ export function Navbar4({
   )
 }
 
-export default Navbar4
+export default Navbar4