@thorprovider/blocks 0.1.2 → 0.1.3

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'
@@ -163,7 +163,12 @@ function CartBadge({ count }: CartBadgeProps) {
 
 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 +178,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 +187,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 +214,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 +259,13 @@ export interface Navbar4Props {
 
 export function Navbar4({
   storeCategories,
-  shippingNote,
+  shippingNote = '',
   utilityLinks,
   logoText,
   logoHref,
   logoAccent,
   accountHref,
+  currentPath,
   showSearch = true,
   searchQuery: searchQueryProp,
   onSearchChange,
@@ -236,8 +279,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 +356,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 +371,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 +426,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 +448,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 +488,43 @@ export function Navbar4({
             </>
           ) : null}
 
-          {user ? (
-            <div className='hidden lg:block'>
-              <Navbar4AccountMenu
-                user={user}
-                items={accountMenuItems}
-                onHelp={onHelp}
-                onSignOut={onSignOut}
-              />
-            </div>
+          {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>
+          ) : 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 +551,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 +583,4 @@ export function Navbar4({
   )
 }
 
-export default Navbar4
+export default Navbar4

package/src/index.ts

@@ -56,6 +56,12 @@ export { default as ProductCard1 } from './blocks/e-commerce/product-list/produc
 export { default as ProductCard2 } from './blocks/e-commerce/product-list/product-card-2'
 export { default as ProductCard3 } from './blocks/e-commerce/product-list/product-card-3'
 export { default as ProductCard5 } from './blocks/e-commerce/product-list/product-card-5'
+export { default as ProductShowcase1 } from './blocks/e-commerce/product-list/product-showcase-1'
+export type {
+  ProductCard1Product,
+  ProductCard1Props,
+} from './blocks/e-commerce/product-list/product-card-1'
+export type { ProductShowcase1Props } from './blocks/e-commerce/product-list/product-showcase-1'
 export { default as ProductOverview1 } from './blocks/e-commerce/product-overview/product-overview-1'
 export type {
   ProductOverview1Props,
@@ -87,6 +93,14 @@ export { MobileCategoryDrawer, mobileCategoryDrawerPropsSchema } from './blocks/
 export type { MobileCategoryDrawerProps } from './blocks/e-commerce/navigation/mobile-category-drawer'
 export { CategoryIcon, categoryIconNameSchema, categoryIconPropsSchema } from './blocks/e-commerce/navigation/category-icon'
 export type { CategoryIconName, CategoryIconProps } from './blocks/e-commerce/navigation/category-icon'
+export { Breadcrumb, breadcrumbItemSchema, breadcrumbPropsSchema } from './blocks/e-commerce/navigation/breadcrumb'
+export type { BreadcrumbItemData, BreadcrumbProps } from './blocks/e-commerce/navigation/breadcrumb'
+export { SkipToContent, skipToContentPropsSchema } from './blocks/e-commerce/navigation/skip-to-content'
+export type { SkipToContentProps } from './blocks/e-commerce/navigation/skip-to-content'
+export { BackToTop, backToTopPropsSchema, resolveScrollBehavior } from './blocks/e-commerce/navigation/back-to-top'
+export type { BackToTopProps } from './blocks/e-commerce/navigation/back-to-top'
+export { MobileBottomNav, mobileBottomNavItemSchema, mobileBottomNavPropsSchema } from './blocks/e-commerce/navigation/mobile-bottom-nav'
+export type { MobileBottomNavItem, MobileBottomNavProps } from './blocks/e-commerce/navigation/mobile-bottom-nav'
 export { menuItemSchema, collectionItemSchema } from './lib/types/menu'
 export type { MenuItem, CollectionItem } from './lib/types/menu'
 export { default as CategoryFilter1 } from './blocks/e-commerce/category-filters/category-filter-1'
@@ -205,6 +219,8 @@ export {
   buttonPropsSchema,
   storeContainer1PropsSchema,
   productCard1PropsSchema,
+  productPresentationSchema,
+  productShowcase1PropsSchema,
   shoppingCart4PropsSchema,
   navbar4PropsSchema,
   paymentMethodSchema,
@@ -225,6 +241,8 @@ export type {
   ButtonSpecProps,
   StoreContainer1SpecProps,
   ProductCard1SpecProps,
+  ProductPresentation,
+  ProductShowcase1SpecProps,
   ShoppingCart4SpecProps,
   Navbar4SpecProps,
   CardProduct,

package/src/lib/contracts.ts

@@ -203,7 +203,7 @@ export type NavCartItem = z.infer<typeof navCartItemSchema>
 export const storeUserSchema = z.object({
   name: z.string(),
   email: z.string(),
-  avatar: z.string(),
+  avatar: z.string().optional(),
   initials: z.string(),
 })
 export type StoreUser = z.infer<typeof storeUserSchema>
@@ -282,6 +282,54 @@ export const productCard1PropsSchema = z.object({
 })
 export type ProductCard1SpecProps = z.infer<typeof productCard1PropsSchema>
 
+/**
+ * Canonical product presentation — the serializable projection a storefront host
+ * produces from a canonical `Product` for the merchandising sections. Unlike
+ * `cardProductSchema` (legacy, numeric `price`), `price`/`compareAtPrice` carry
+ * canonical `Money` (decimal major-unit string + currency code), so the block
+ * formats in the shopper's currency and locale and renders a truthful
+ * unavailable state instead of `$0`. Optional fields are omitted, never `""`.
+ *
+ * This contract is additive: `cardProductSchema` and its consumers are
+ * unchanged, and a legacy numeric `price` still renders the legacy output.
+ */
+export const productPresentationSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  title: z.string(),
+  /** Omitted (never `""`) when the backend has no image. */
+  image: z.string().optional(),
+  imageAlt: z.string().optional(),
+  /** Product destination; omitted when unknown. */
+  href: z.string().optional(),
+  price: moneySchema,
+  /** Comparison ("was") price; rendered only when valid and higher than `price`. */
+  compareAtPrice: moneySchema.optional(),
+  /** Only from real evidence; omitted otherwise (never fabricated). */
+  rating: z.number().optional(),
+  badge: z.string().optional(),
+})
+export type ProductPresentation = z.infer<typeof productPresentationSchema>
+
+/**
+ * Serializable contract for the combined grid-and-carousel product
+ * presentation (`ProductShowcase1`). The grid pages are fixed-size, navigated
+ * manually (prev/next) with a visible current-page indication; there is no
+ * autoplay and no infinite loop. React-only callbacks are excluded.
+ */
+export const productShowcase1PropsSchema = z.object({
+  products: z.array(productPresentationSchema),
+  heading: z.string().optional(),
+  description: z.string().optional(),
+  pageSize: z.number().int().positive().optional(),
+  prevLabel: z.string().optional(),
+  nextLabel: z.string().optional(),
+  pageLabel: z.string().optional(),
+  unavailablePriceLabel: z.string().optional(),
+  emptyLabel: z.string().optional(),
+  addToCartLabel: z.string().optional(),
+})
+export type ProductShowcase1SpecProps = z.infer<typeof productShowcase1PropsSchema>
+
 export const shoppingCart4PropsSchema = z.object({
   items: z.array(cartItemSchema),
   promotions: z.array(promotionSchema).default([]),
@@ -349,7 +397,7 @@ export type HeroImage = z.infer<typeof heroImageSchema>
 
 export const navbar4PropsSchema = z.object({
   storeCategories: z.array(storeCategorySchema),
-  shippingNote: z.string(),
+  shippingNote: z.string().optional(),
   utilityLinks: z.array(utilityLinkSchema),
   logoText: z.string(),
   logoHref: z.string().optional(),
@@ -368,6 +416,8 @@ export const navbar4PropsSchema = z.object({
   subtotalUnavailableLabel: z.string().optional(),
   user: storeUserSchema.optional(),
   accountMenuItems: z.array(accountMenuItemSchema).optional(),
+  accountPending: z.boolean().optional(),
+  accountUnavailable: z.boolean().optional(),
 })
 export type Navbar4SpecProps = z.infer<typeof navbar4PropsSchema>
 
@@ -410,4 +460,4 @@ export type CtaSection1SpecProps = z.infer<typeof ctaSection1PropsSchema>
 // Pure monetary helpers, re-exported from the server-safe contracts entry so a
 // host boundary can validate/format `Money` without importing the React entry.
 export { isCompleteFiniteDecimal, isAvailableMoney, formatMoney } from './money'
-export { resolveAbsoluteQuantity } from './cart'
+export { resolveAbsoluteQuantity } from './cart'