@thorprovider/storefront 0.4.0-mvp.0 → 0.4.0-mvp.2

package/assets/templates/app/lib/__STOREFRONT__/registry.tsx

@@ -5,25 +5,34 @@
 //
 // The shell renders the live backend cart: the Navbar mini-cart and the cart
 // drawer read the authoritative cart state and dispatch cart mutations to the
-// Server Actions. Add-to-cart from a listing navigates to the product detail so
-// a variant is chosen explicitly (there is no first-variant shortcut).
+// Server Actions. A listing card's add-to-cart adds the product's first
+// purchasable variant (the card shortcut); opening a product from a listing
+// navigates to the detail, where a variant is chosen explicitly.
 
 import { defineRegistry, useStateStore } from '@json-render/react'
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
 import {
+  BackToTop as BackToTopBlock,
   Banner1,
   FooterSection1,
+  MobileBottomNav as MobileBottomNavBlock,
   Navbar1,
   Navbar4,
   ProductCard1,
-  ShoppingCart4,
+  SkipToContent as SkipToContentBlock,
+  type BackToTopProps,
+  type MobileBottomNavProps,
+  type SkipToContentProps,
 } from '@thorprovider/blocks'
+import { isAvailableMoney } from '@thorprovider/blocks/contracts'
+import type { Money } from '@thorprovider/types'
 import { catalog } from './catalog'
 import type { CartLineState, CartTotalsState } from './state'
 import { useStorefrontHandlers } from './handlers'
-import { resolveIcon } from './icon-map'
+import { cartViewAvailable, checkoutAvailable, mountedFeatureNames } from './composition'
 import {
   bannerPropsSchema,
-  cartDrawerPropsSchema,
   footerPropsSchema,
   navbarPropsSchema,
   productCardPropsSchema,
@@ -40,10 +49,12 @@ interface NavCartItem {
   price: number
   qty: number
   image?: string
+  lineTotal?: Money
 }
 
 /** CartLineState -> Navbar4 cart line. `price` is legacy; the authoritative
- *  subtotal is passed separately, so it is never computed from the line. */
+ *  subtotal and per-line total are passed separately, so neither is computed
+ *  from the line. */
 function toNavCartItems(cart: CartLineState[]): NavCartItem[] {
   return cart.map((line) => ({
     id: line.id,
@@ -52,19 +63,36 @@ function toNavCartItems(cart: CartLineState[]): NavCartItem[] {
     price: 0,
     qty: line.quantity,
     image: line.image,
+    lineTotal: line.lineTotal,
   }))
 }
 
 const baseComponents = {
   Layout: ({ children, slots }: { children?: React.ReactNode; slots?: Record<string, React.ReactNode> }) => {
     useStorefrontHandlers()
+    const { set } = useStateStore()
+    const pathname = usePathname()
+    // The mobile bottom navigation is feature-gated; when it is installed the
+    // main content reserves bottom padding so the fixed bar never obscures it.
+    const hasBottomNav = mountedFeatureNames.includes('navigability')
+    // Central dismissal: any route or history change closes the shared cart
+    // lateral, so it never lingers across navigation (forward/back included).
+    useEffect(() => {
+      set('/cartOpen', false)
+    }, [pathname, set])
     return (
       <div className="flex min-h-screen flex-col">
+        {slots?.chrome}
         {slots?.notices}
         <header className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           {slots?.header}
         </header>
-        <main className="flex-1">{children}</main>
+        <main
+          id="main-content"
+          className={hasBottomNav ? 'flex-1 pb-16 md:pb-0' : 'flex-1'}
+        >
+          {children}
+        </main>
         <footer>{slots?.footer}</footer>
       </div>
     )
@@ -72,6 +100,22 @@ const baseComponents = {
   // Neutral page root: renders the route page without shell chrome. Using it
   // instead of `Layout` keeps the shell from mounting twice per page.
   Page: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  // Navigability chrome, feature-gated by the shell spec (only referenced when
+  // the feature is installed). Props are cast to the block contracts; the
+  // catalog schema is the runtime guard.
+  SkipToContent: ({ props }: { props: Record<string, unknown> }) => {
+    const p = props as unknown as SkipToContentProps
+    return <SkipToContentBlock {...p} />
+  },
+  BackToTop: ({ props }: { props: Record<string, unknown> }) => {
+    const p = props as unknown as BackToTopProps
+    return <BackToTopBlock {...p} />
+  },
+  MobileBottomNav: ({ props }: { props: Record<string, unknown> }) => {
+    const pathname = usePathname()
+    const p = props as unknown as MobileBottomNavProps
+    return <MobileBottomNavBlock {...p} currentHref={p.currentHref ?? pathname} />
+  },
   // Reserved top region for system/status messages. Self-gates on state and
   // collapses to nothing when there is no notice. A configured mock is labelled
   // as demo data; a real-mode failure is surfaced visibly, never hidden.
@@ -112,6 +156,18 @@ const baseComponents = {
     const { state, set } = useStateStore()
     const cart = (state.cart ?? []) as CartLineState[]
     const totals = state.cartTotals as CartTotalsState | null
+    const cartError = typeof state.cartError === 'string' ? state.cartError : undefined
+    const readError = typeof state.cartReadError === 'string' ? state.cartReadError : undefined
+    const errorLabel = cartError ?? readError
+    const cartState = state.cartPending ? 'pending' : errorLabel ? 'error' : 'idle'
+    // Checkout is offered only when the required backend amounts are present and
+    // valid: a missing/malformed subtotal, total, or line amount blocks it, while
+    // an undetermined shipping amount does not (AC-CART-4.4 / UC-CART-7).
+    const amountsValid =
+      cart.every((line) => isAvailableMoney(line.lineTotal)) &&
+      totals !== null &&
+      isAvailableMoney(totals.subtotal) &&
+      isAvailableMoney(totals.total)
     return (
       <Navbar4
         storeCategories={parsed.storeCategories}
@@ -122,13 +178,30 @@ const baseComponents = {
         logoAccent={parsed.logoAccent}
         className={parsed.className}
         accountHref={parsed.accountHref}
+        // The current route marks the matching category link as the current page
+        // (accessibly, beyond color alone); no link is marked when it does not
+        // match any destination.
+        currentPath={usePathname()}
         // Held global search (E2 task 5.4): default to hidden so no global
         // search is presented while the contract is unverified; the user-owned
         // shell seam may opt in with `showSearch: true`.
         showSearch={parsed.showSearch ?? false}
         items={toNavCartItems(cart)}
         subtotal={totals?.subtotal}
-        onViewCart={() => emit('openCart')}
+        // One shared lateral: visibility is driven by the shared `cartOpen`
+        // state (a successful add opens it; navigation dismisses it). The
+        // canonical line amounts and lifecycle states come from the same cart
+        // state the standalone `/cart` view reads.
+        canonicalCart
+        cartState={cartState}
+        cartErrorLabel={errorLabel}
+        onCartRetry={() => emit('refreshCart')}
+        cartOpen={state.cartOpen === true}
+        onCartOpenChange={(open) => set('/cartOpen', open)}
+        checkoutUnavailable={!checkoutAvailable}
+        checkoutDisabled={cartState !== 'idle' || cart.length === 0 || !amountsValid}
+        viewCartUnavailable={!cartViewAvailable}
+        onViewCart={() => emit('goToCart')}
         onCheckout={() => emit('goToCheckout')}
         onQtyChange={(id, delta) => {
           set('/qtyDelta', { id, delta })
@@ -141,47 +214,6 @@ const baseComponents = {
       />
     )
   },
-  CartDrawer: ({ props, emit }: { props: Record<string, unknown>; emit: (event: string) => void }) => {
-    const parsed = cartDrawerPropsSchema.parse(props)
-    const { state, set } = useStateStore()
-    const cart = (state.cart ?? []) as CartLineState[]
-    const totals = state.cartTotals as CartTotalsState | null
-    const cartError = typeof state.cartError === 'string' ? state.cartError : undefined
-    return (
-      <ShoppingCart4
-        items={cart.map((line) => ({
-          id: line.id,
-          name: line.name,
-          price: 0,
-          quantity: line.quantity,
-          image: line.image,
-          variant: line.variant,
-          lineTotal: line.lineTotal,
-          unitPrice: line.unitPrice,
-        }))}
-        promotions={parsed.promotions.map((promo) => ({
-          threshold: promo.threshold,
-          reward: promo.reward,
-          icon: resolveIcon(promo.icon),
-        }))}
-        totals={totals ?? undefined}
-        totalsState={state.cartPending ? 'pending' : cartError ? 'error' : 'idle'}
-        totalsErrorLabel={cartError}
-        onRetryTotals={() => emit('refreshCart')}
-        onQuantityChange={(id, quantity) => {
-          const line = cart.find((candidate) => candidate.id === id)
-          if (!line) return
-          set('/qtyUpdate', { id, merchandiseId: line.merchandiseId, quantity })
-          emit('updateQuantity')
-        }}
-        onRemove={(id) => {
-          set('/lastRemoved', id)
-          emit('removeFromCart')
-        }}
-        onCheckout={() => emit('goToCheckout')}
-      />
-    )
-  },
   Banner: ({ props, emit }: { props: Record<string, unknown>; emit: (event: string) => void }) => {
     const parsed = bannerPropsSchema.parse(props)
     const { set } = useStateStore()
@@ -231,7 +263,7 @@ const baseComponents = {
         products={parsed.products}
         heading={parsed.heading}
         maxItems={parsed.maxItems}
-        // No first-variant shortcut: open the detail so a variant is chosen.
+        // This base card opens the detail so a variant is chosen explicitly.
         onAddToCart={(product) => {
           select(product)
           emit('openProduct')

package/assets/templates/app/lib/__STOREFRONT__/runtime.ts

@@ -5,6 +5,8 @@
 import type { StorefrontLoaderFn } from '@thorprovider/runtime/render-core/app'
 import { createStorefrontApp } from '@thorprovider/runtime/render-core/app'
 import { __STOREFRONT_CAMEL__Spec } from './spec'
+import { entitySeoExtractors } from './spec/seo'
+import { getSiteUrl } from './store-context'
 import { views } from './views'
 
 const loaders: Record<string, StorefrontLoaderFn> = Object.assign({}, ...views.map((view) => view.loader))
@@ -12,6 +14,7 @@ const loaders: Record<string, StorefrontLoaderFn> = Object.assign({}, ...views.m
 export const __STOREFRONT_CAMEL__App = createStorefrontApp({
   spec: __STOREFRONT_CAMEL__Spec,
   loaders,
+  entitySeo: { siteUrl: getSiteUrl(), extract: entitySeoExtractors },
 })
 
 export type { StorefrontLoaderFn }

package/assets/templates/app/lib/__STOREFRONT__/schema.ts

@@ -70,7 +70,7 @@ export const shellAccentSchema = z.object({
 
 export const storefrontNavbarPropsSchema = z.object({
   storeCategories: z.array(navCategorySchema),
-  shippingNote: z.string(),
+  shippingNote: z.string().optional(),
   utilityLinks: z.array(z.object({ label: z.string(), href: z.string() })),
   logoText: z.string(),
   logoHref: z.string().optional(),
@@ -82,19 +82,6 @@ export const storefrontNavbarPropsSchema = z.object({
   showSearch: z.boolean().optional(),
 })
 
-// Mirrors ShoppingCart4 (block) minus the runtime-bound `items`; the registry
-// fills items from /cart. promotions carry icon NAMES resolved via icon-map.
-export const cartPromotionSchema = z.object({
-  threshold: z.number(),
-  reward: z.string(),
-  icon: z.string(),
-})
-
-export const cartDrawerPropsSchema = z.object({
-  promotions: z.array(cartPromotionSchema),
-  taxRate: z.number().optional(),
-})
-
 export const bannerPropsSchema = z.object({
   badge: z.string().optional(),
   message: z.string(),
@@ -119,3 +106,31 @@ export const footerPropsSchema = z.object({
     .object({ placeholder: z.string().optional(), buttonLabel: z.string().optional() })
     .optional(),
 })
+
+// Navigability chrome contracts, mirrored from @thorprovider/blocks so the
+// shell catalog/registry share the scaffold's zod version.
+export const skipToContentPropsSchema = z.object({
+  targetId: z.string(),
+  label: z.string().optional(),
+  className: z.string().optional(),
+})
+
+export const backToTopPropsSchema = z.object({
+  threshold: z.number().optional(),
+  label: z.string().optional(),
+  className: z.string().optional(),
+})
+
+export const mobileBottomNavItemSchema = z.object({
+  id: z.string().optional(),
+  label: z.string(),
+  href: z.string(),
+  icon: z.string().optional(),
+})
+
+export const mobileBottomNavPropsSchema = z.object({
+  items: z.array(mobileBottomNavItemSchema),
+  currentHref: z.string().optional(),
+  ariaLabel: z.string().optional(),
+  className: z.string().optional(),
+})

package/assets/templates/app/lib/__STOREFRONT__/section-observation.ts

@@ -0,0 +1,182 @@
+'use client'
+
+// Generated by Thor Commerce storefront (host: section observation)
+//
+// Optional, host-owned merchandising observation. DISABLED BY DEFAULT: nothing is
+// observed, transmitted, or stored until the host registers an adapter through
+// `configureSectionObservation`. The pure controller (validation, impression
+// dedupe, conservative lineage) lives in @thorprovider/runtime/contracts; this
+// module only adds the browser glue (visibility, per-view-visit identity) and the
+// adapter seam. Adapter failures never interrupt navigation, cart, or checkout.
+
+import { useEffect, useRef, useState } from 'react'
+import {
+  createInMemoryRecorder,
+  createObservationController,
+  type ConfirmedEvent,
+  type ObservationContext,
+  type ObservationController,
+  type SectionObservationAdapter,
+} from '@thorprovider/runtime/contracts'
+
+let controller: ObservationController | null = null
+let viewVisitId: string | null = null
+let viewVisitSeq = 0
+
+function nextViewVisitId(): string {
+  viewVisitSeq += 1
+  return `${Date.now().toString(36)}-${viewVisitSeq}`
+}
+
+/** Stable for one view visit (page load). */
+function getViewVisitId(): string {
+  if (!viewVisitId) viewVisitId = nextViewVisitId()
+  return viewVisitId
+}
+
+function reportFailure(scope: string, error: unknown): void {
+  console.error(
+    `[storefront/observation] ${scope} failed`,
+    error instanceof Error ? error.message : error,
+  )
+}
+
+/** Register (or clear) the host adapter. Null disables observation entirely. */
+export function configureSectionObservation(adapter: SectionObservationAdapter | null): void {
+  controller = adapter
+    ? createObservationController({
+        adapter,
+        onError: (error) => reportFailure('adapter', error),
+      })
+    : null
+}
+
+export function isSectionObservationEnabled(): boolean {
+  return controller !== null
+}
+
+export function getSectionObservationController(): ObservationController | null {
+  return controller
+}
+
+/** An in-memory recorder for verification/tests (never a production sink). */
+export function createInMemorySectionRecorder(): ReturnType<typeof createInMemoryRecorder> {
+  return createInMemoryRecorder()
+}
+
+export function setSectionObservationContext(context?: ObservationContext): void {
+  try {
+    controller?.setContext(context)
+  } catch (error) {
+    reportFailure('setContext', error)
+  }
+}
+
+/**
+ * Observe a confirmed host transition. Only recorded when a section origin
+ * exists for the current session/context; otherwise it stays unattributed.
+ */
+export function recordConfirmedTransition(
+  event: ConfirmedEvent,
+  input?: { productHandle?: string; destination?: string },
+): void {
+  try {
+    controller?.noteConfirmed(event, input)
+  } catch (error) {
+    reportFailure(event, error)
+  }
+}
+
+export interface UseSectionObservationInput {
+  sectionId: string
+  sectionType: string
+  sectionVariant?: string
+  objective?: string
+  context?: ObservationContext
+}
+
+/**
+ * Observe a section's exposure and product clicks. When observation is disabled
+ * no IntersectionObserver is attached and the returned callback is a no-op.
+ */
+export function useSectionObservation(input: UseSectionObservationInput) {
+  const enabled = isSectionObservationEnabled() && input.sectionId.length > 0
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [inView, setInView] = useState(false)
+  const { sectionId, sectionType, sectionVariant, objective, context } = input
+
+  useEffect(() => {
+    if (!enabled) return
+    const element = containerRef.current
+    if (!element || typeof IntersectionObserver === 'undefined') return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.intersectionRatio >= 0.5) setInView(true)
+        }
+      },
+      { threshold: [0.5] },
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [enabled])
+
+  useEffect(() => {
+    if (!enabled || !inView) return
+    const timer = setTimeout(() => {
+      controller?.observeImpression({
+        viewVisitId: getViewVisitId(),
+        sectionId,
+        sectionType,
+        ...(sectionVariant ? { sectionVariant } : {}),
+        ...(objective ? { objective } : {}),
+        ...(context ? { context } : {}),
+      })
+    }, 1000)
+    return () => clearTimeout(timer)
+  }, [enabled, inView, sectionId, sectionType, sectionVariant, objective, context])
+
+  const noteProductClick = (product: { id: string | number; href?: string }): void => {
+    if (!enabled) return
+    try {
+      controller?.noteClick({
+        viewVisitId: getViewVisitId(),
+        sectionId,
+        sectionType,
+        ...(sectionVariant ? { sectionVariant } : {}),
+        ...(objective ? { objective } : {}),
+        ...(context ? { context } : {}),
+        productHandle: String(product.id),
+        ...(product.href ? { destination: product.href } : {}),
+      })
+    } catch (error) {
+      reportFailure('noteClick', error)
+    }
+  }
+
+  return { containerRef, noteProductClick, enabled }
+}
+
+/**
+ * Observe a successfully rendered product destination. Recorded only when it
+ * matches the current section origin; otherwise it stays unattributed.
+ */
+export function useProductVisitObservation(
+  productHandle: string | null | undefined,
+  destination?: string,
+): void {
+  const enabled = isSectionObservationEnabled()
+
+  useEffect(() => {
+    if (!enabled || !productHandle) return
+    try {
+      controller?.noteProductVisit({
+        viewVisitId: getViewVisitId(),
+        productHandle: String(productHandle),
+        ...(destination ? { destination } : {}),
+      })
+    } catch (error) {
+      reportFailure('noteProductVisit', error)
+    }
+  }, [enabled, productHandle, destination])
+}

package/assets/templates/app/lib/__STOREFRONT__/section-sources.ts

@@ -0,0 +1,130 @@
+// Derived host helper: per-instance resolution for data-bound sections.
+//
+// A data-bound section (for example `products`) keeps its *selection* in a
+// user-owned, per-instance config keyed by the section's stable id
+// (`views/<view>/data.ts` -> `sectionSources`). This module is the single host
+// boundary that turns that config into resolved, validated view state:
+//
+//   * it validates each source with the canonical `sectionSourceSchema` (an
+//     invalid or missing source yields an `unconfigured` state, never a guess);
+//   * it resolves each selection through the existing canonical catalog bridge
+//     (`getCatalogResults`), so equal queries share request-local work, differing
+//     store/channel/region/currency contexts stay isolated, and unsupported
+//     criteria are reported rather than dropped;
+//   * it maps each canonical product to the shared presentation contract via the
+//     host mapper, so an unresolved price stays truthful instead of becoming $0;
+//   * it returns one discriminated state per section id, so a failing section
+//     never erases its siblings and a real failure is never replaced by mock data.
+//
+// Orphan sources (ids no longer referenced by the composition) are ignored.
+
+import { getCatalogResults } from '@thorprovider/runtime/commerce'
+import {
+  MERCHANDISING_SECTION_MAX_ITEMS,
+  sectionSourceSchema,
+} from '@thorprovider/runtime/contracts'
+import {
+  PRODUCT_IMAGE_FALLBACK,
+  isCompleteFiniteDecimal,
+  type ProductPresentation,
+} from '@thorprovider/blocks'
+import type { Product, StoreContext } from '@thorprovider/types'
+
+/** Per-instance section selection config, keyed by the section's stable id. */
+export type SectionSources = Record<string, unknown>
+
+/**
+ * Canonical `Product` (unified provider output) → `ProductPresentation` for the
+ * merchandising product sections. Unlike the card mapper, this NEVER drops a
+ * product with an unresolved price: the canonical `Money` is passed through and
+ * the block renders a truthful "unavailable" state instead of inventing `$0`.
+ * Optional fields (image alt, rating, badge) are omitted — never `""` or a
+ * fabricated value — and a missing image falls back to the shared placeholder so
+ * no `<img>` is rendered without a `src`.
+ *
+ * This lives in the derived host helper (not the user-owned mappers module) so an
+ * upgraded home whose `mappers.ts` predates this capability still compiles.
+ */
+export function toProductPresentation(product: Product): ProductPresentation {
+  const min = product.priceRange?.minVariantPrice
+  const compareAt = product.variants.find(
+    (variant) => variant.compareAtPrice && isCompleteFiniteDecimal(variant.compareAtPrice.amount),
+  )?.compareAtPrice
+  const image = product.featuredImage?.url || product.images[0]?.url || PRODUCT_IMAGE_FALLBACK
+  const imageAlt = product.featuredImage?.altText || undefined
+  return {
+    id: product.handle,
+    title: product.title,
+    image,
+    imageAlt,
+    href: `/products/${product.handle}`,
+    price: min ?? { amount: '', currencyCode: '' },
+    compareAtPrice: compareAt,
+    rating: undefined,
+    badge: undefined,
+  }
+}
+
+/** The resolved state the view state model carries for one data-bound section. */
+export interface SectionViewState {
+  status:
+    | 'unconfigured'
+    | 'ready'
+    | 'empty'
+    | 'invalid-query'
+    | 'unsupported-query'
+    | 'unmounted-capability'
+    | 'data-error'
+  products: ProductPresentation[]
+}
+
+/**
+ * Read the optional `sectionSources` export from a user-owned data module
+ * without hard-importing it, so a home scaffolded before this capability (whose
+ * `data.ts` has no such export) still compiles and simply renders every
+ * data-bound section as `unconfigured`.
+ */
+export function resolveSectionSources(module: unknown): SectionSources {
+  const candidate = (module as { sectionSources?: unknown } | null | undefined)?.sectionSources
+  return candidate && typeof candidate === 'object' ? (candidate as SectionSources) : {}
+}
+
+/**
+ * Resolve the state for every referenced data-bound section id. Sections resolve
+ * concurrently and independently; each entry is always present so the registry
+ * can render a truthful state for its section.
+ */
+export async function resolveSectionViewStates(
+  ids: readonly string[],
+  sources: SectionSources,
+  context: StoreContext,
+): Promise<Record<string, SectionViewState>> {
+  const states: Record<string, SectionViewState> = {}
+  await Promise.all(
+    ids.map(async (id) => {
+      const parsed = sectionSourceSchema.safeParse(sources[id])
+      if (!parsed.success) {
+        states[id] = { status: 'unconfigured', products: [] }
+        return
+      }
+      const source = parsed.data
+      try {
+        const outcome = await getCatalogResults(source.query, context)
+        if (!outcome.ok) {
+          states[id] = { status: outcome.error.code, products: [] }
+          return
+        }
+        const maxItems = source.maxItems ?? MERCHANDISING_SECTION_MAX_ITEMS
+        const products = outcome.results.products
+          .slice(0, maxItems)
+          .map(toProductPresentation)
+        states[id] = { status: products.length > 0 ? 'ready' : 'empty', products }
+      } catch {
+        // A transport/provider failure is surfaced as a per-section data error,
+        // never as fabricated or mock products, and never discards siblings.
+        states[id] = { status: 'data-error', products: [] }
+      }
+    }),
+  )
+  return states
+}

package/assets/templates/app/lib/__STOREFRONT__/shell/content.ts

@@ -6,8 +6,8 @@
 //
 // Neutral defaults only: no delivery, shipping, or promo promise is made here,
 // and footer links point only at routes the generated storefront actually
-// serves (`/`, `/categorias`, `/checkout`, and the static pages `/contacto`,
-// `/sobre-nosotros`, `/terminos`, `/privacidad`). Brand colors and copy belong
+// serves (`/`, `/categories`, `/checkout`, and the static pages `/contact`,
+// `/about`, `/terms`, `/privacy`). Brand colors and copy belong
 // in your own content, never in the package.
 //
 // The scaffold ships no newsletter submit callback, so the footer newsletter is
@@ -67,23 +67,31 @@ export const footerClassName: string | undefined = undefined
 export const brandDescription: string =
   'Catálogo en línea de productos para tu hogar y tu negocio.'
 
+/**
+ * Optional navbar utility-strip note (e.g. `'Nuevo horario de atención de 9 a
+ * 18 h'`). Empty by default: while it is empty and there are no utility links,
+ * the strip is not rendered, so a fresh storefront shows no note. Set a real
+ * note here to display it.
+ */
+export const shippingNote: string = ''
+
 /** Neutral footer links — only routes the storefront serves; no dead `#` links. */
 export const linkColumns: ShellLinkColumn[] = [
   {
     title: 'Comprar',
     links: [
       { label: 'Inicio', href: '/' },
-      { label: 'Todas las categorías', href: '/categorias' },
+      { label: 'Todas las categorías', href: '/categories' },
       { label: 'Finalizar compra', href: '/checkout' },
     ],
   },
   {
     title: 'Información',
     links: [
-      { label: 'Contacto', href: '/contacto' },
-      { label: 'Sobre nosotros', href: '/sobre-nosotros' },
-      { label: 'Términos y condiciones', href: '/terminos' },
-      { label: 'Política de privacidad', href: '/privacidad' },
+      { label: 'Contacto', href: '/contact' },
+      { label: 'Sobre nosotros', href: '/about' },
+      { label: 'Términos y condiciones', href: '/terms' },
+      { label: 'Política de privacidad', href: '/privacy' },
     ],
   },
 ]
@@ -94,3 +102,19 @@ export const linkColumns: ShellLinkColumn[] = [
  * renders no form — never a fake one.
  */
 export const newsletter: false | ShellNewsletter = false
+
+// Primary destinations for the mobile bottom navigation. Only routes the
+// storefront actually serves; the icons come from the shared category icon set.
+export interface ShellBottomNavItem {
+  id?: string
+  label: string
+  href: string
+  icon?: string
+}
+
+export const mobileBottomNavItems: ShellBottomNavItem[] = [
+  { id: 'home', label: 'Inicio', href: '/', icon: 'home' },
+  { id: 'categories', label: 'Categorías', href: '/categories', icon: 'store' },
+  { id: 'cart', label: 'Carrito', href: '/cart', icon: 'boxes' },
+  { id: 'account', label: 'Cuenta', href: '/account', icon: 'shield' },
+]