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

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

@@ -12,11 +12,15 @@ import {
   logoAccent,
   navbarClassName,
   newsletter,
+  shippingNote,
 } from './content'
 
 export const navbarShellProps = {
   logoAccent,
   className: navbarClassName,
+  // Optional utility-strip note. Empty by default, so the strip renders only
+  // once a real note (or a utility link) is configured.
+  shippingNote,
   // Global navigation search is held until a verified backend search contract
   // exists (E2 task 5.4), so the generated storefront presents NO search
   // control. A merchant may set this to `true` to opt in once the contract is

package/assets/templates/app/lib/__STOREFRONT__/spec/index.ts

@@ -6,6 +6,8 @@ import type { NextAppSpec } from '@json-render/next'
 import { storefrontInitialState } from '../state'
 import { views } from '../views'
 import { footerShellProps, navbarShellProps } from '../shell/props'
+import { mobileBottomNavItems } from '../shell/content'
+import { mountedFeatureConfigs, mountedFeatureNames } from '../composition'
 import type { StorefrontElement } from './types'
 
 export type { StorefrontElement }
@@ -34,12 +36,49 @@ const routes = Object.fromEntries(
 
 // The default layout is the storefront chrome shared by every page: the
 // system notice region sits in the notices slot (always first, above the
-// header), the announcement banner and navbar live in the header slot, the
-// footer in the footer slot, and the cart drawer is a page-level child of
-// Layout (rendered outside the slots so it can overlay the whole shell). This
+// header), the announcement banner and navbar live in the header slot, and the
+// footer in the footer slot. The cart is a lateral panel owned by the navbar
+// (opened by the navbar icon or a successful add), never an inline element of
+// the shell, so page content is never followed by a duplicated cart. This
 // mirrors the reference app so a fresh scaffold ships a real storefront, not a
 // bare page.
+// The navigability feature contributes its chrome only when it is installed.
+// `mountedFeatureNames` is the general presence seam (unfiltered by the catalog
+// boundary), so a removed feature leaves no dangling skip link, back-to-top, or
+// bottom navigation behind.
+const hasNavigability = mountedFeatureNames.includes('navigability')
+const navigabilityConfig = (mountedFeatureConfigs['navigability'] ?? {}) as {
+  showBackToTop?: boolean
+}
+const showBackToTop = navigabilityConfig.showBackToTop !== false
+
 const shellElements: Record<string, StorefrontElement> = {
+  // Navigability chrome, present only when the feature is installed. The skip
+  // link is the first focusable element (rendered before the notices); the
+  // back-to-top and mobile bottom navigation are fixed-position aids.
+  ...(hasNavigability
+    ? {
+        skipToContent: {
+          type: 'SkipToContent',
+          props: { targetId: 'main-content' },
+        },
+        ...(showBackToTop
+          ? {
+              backToTop: {
+                type: 'BackToTop',
+                props: { label: 'Volver arriba' },
+              },
+            }
+          : {}),
+        mobileBottomNav: {
+          type: 'MobileBottomNav',
+          props: {
+            items: mobileBottomNavItems,
+            ariaLabel: 'Navegación principal',
+          },
+        },
+      }
+    : {}),
   // Reserved top region for system/status messages. Only the shell layout
   // references it, so it renders once and always as the first element.
   notice: {
@@ -51,7 +90,7 @@ const shellElements: Record<string, StorefrontElement> = {
     props: {
       badge: 'Novedades',
       message: 'Descubre el catálogo de __SITE_NAME__.',
-      href: '/categorias',
+      href: '/categories',
       linkLabel: 'Ver catálogo',
     },
     visible: { $state: '/bannerDismissed', not: true },
@@ -61,8 +100,9 @@ const shellElements: Record<string, StorefrontElement> = {
     type: 'StorefrontNavbar',
     props: {
       storeCategories: { $state: '/navCategories' },
-      // Neutral store info: no delivery/COD/shipping promise is made by default.
-      shippingNote: 'Catálogo en línea',
+      // No shipping/delivery/COD note is shipped by default; the note comes
+      // from the user-owned shell seam (`...navbarShellProps` below) and is
+      // empty unless the merchant sets one, so no placeholder strip renders.
       utilityLinks: [],
       logoText: '__SITE_NAME__',
       logoHref: '/',
@@ -72,29 +112,12 @@ const shellElements: Record<string, StorefrontElement> = {
     },
     on: {
       openCart: { action: 'openCart' },
+      goToCart: { action: 'goToCart' },
       goToCheckout: { action: 'goToCheckout' },
       applyQuantityDelta: { action: 'applyQuantityDelta' },
       removeFromCart: { action: 'removeFromCart' },
     },
   },
-  'cart.drawer': {
-    type: 'CartDrawer',
-    props: {
-      // No fabricated free-shipping threshold or reward: the backend is the only
-      // source of shipping amounts, and a promotion promise is not supported by
-      // the default fixture. A merchant may add promotions as customization.
-      promotions: [],
-      taxRate: 0.0,
-    },
-    visible: { $state: '/cartOpen', eq: true },
-    on: {
-      updateQuantity: { action: 'updateQuantity' },
-      removeFromCart: { action: 'removeFromCart' },
-      goToCheckout: { action: 'goToCheckout' },
-      closeCart: { action: 'closeCart' },
-      refreshCart: { action: 'refreshCart' },
-    },
-  },
   footer: {
     type: 'Footer',
     props: {
@@ -123,8 +146,15 @@ export const __STOREFRONT_CAMEL__Spec: NextAppSpec = {
         layout: {
           type: 'Layout',
           props: {},
-          slots: { notices: ['notice'], header: ['banner', 'navbar'], footer: ['footer'] },
-          children: ['slot', 'cart.drawer'],
+          slots: {
+            ...(hasNavigability
+              ? { chrome: ['skipToContent', 'backToTop', 'mobileBottomNav'] }
+              : {}),
+            notices: ['notice'],
+            header: ['banner', 'navbar'],
+            footer: ['footer'],
+          },
+          children: ['slot'],
         },
         // The page content is injected at the Slot element by @json-render/next.
         // Without it the rendered layout drops the page and the store looks empty.

package/assets/templates/app/lib/__STOREFRONT__/spec/seo.ts

@@ -3,6 +3,12 @@
 // host files. Kept free of Next.js, React, and env imports so the logic is
 // testable at the source and the host files stay thin.
 
+import type { EntitySeo } from '@thorprovider/runtime/contracts'
+import {
+  mapCategoryEntityToSeo,
+  mapProductEntityToSeo,
+} from '@thorprovider/runtime/contracts'
+
 /** The routes the storefront can serve as fixed pages (no dynamic `[` segment). */
 export function fixedRoutePaths(routes: Record<string, unknown>): string[] {
   return Object.keys(routes).filter((path) => !path.includes('['))
@@ -24,3 +30,162 @@ export function sitemapUrls(
 export function robotsSitemapUrl(siteUrl: string | undefined): string | undefined {
   return siteUrl ? new URL('/sitemap.xml', siteUrl).toString() : undefined
 }
+
+/**
+ * Surfaces that are never public: they require a shopper session or hold
+ * checkout state and must not be indexed or listed in the sitemap.
+ */
+export const PRIVATE_ROUTE_PREFIXES = ['/account', '/checkout'] as const
+
+/** True when a path is (or is nested under) a private surface. */
+export function isPrivatePath(path: string): boolean {
+  return PRIVATE_ROUTE_PREFIXES.some(
+    (prefix) => path === prefix || path.startsWith(`${prefix}/`),
+  )
+}
+
+/**
+ * The paths `robots.txt` disallows: the fixed private surfaces plus any private
+ * path the known route set declares. Public routes are never returned.
+ */
+export function robotsDisallowPaths(routes: Record<string, unknown>): string[] {
+  const paths = new Set<string>(PRIVATE_ROUTE_PREFIXES)
+  for (const path of Object.keys(routes)) {
+    if (isPrivatePath(path)) paths.add(path)
+  }
+  return [...paths]
+}
+
+/**
+ * Per-route entity-SEO extractors keyed by the route's loader name. Each runs
+ * after the same request-scoped loader as the page and maps the real loaded
+ * entity through the pure `@thorprovider/runtime/contracts` mappers. The route
+ * prefix is supplied here because the runtime stays route-agnostic.
+ */
+export const entitySeoExtractors: Record<
+  string,
+  (data: Record<string, unknown>) => EntitySeo | undefined
+> = {
+  product: (data) =>
+    mapProductEntityToSeo(data.selectedProduct, { pathPrefix: '/products' }),
+  category: (data) =>
+    mapCategoryEntityToSeo(data.categoryEntity, { pathPrefix: '/categories' }),
+}
+
+/** A public catalog entity referenced by its stable id and public path. */
+export interface PublicEntityRef {
+  id: string
+  path: string
+}
+
+/** One page of public entities plus the cursor for the next page, if any. */
+export interface PublicEntityPage {
+  items: PublicEntityRef[]
+  nextCursor?: string
+}
+
+/** A page-fetching callback for the bounded entity enumeration. */
+export type PublicEntityPageFetcher = (
+  cursor: string | undefined,
+) => Promise<PublicEntityPage>
+
+/** Explicit reason an enumeration did not complete. */
+export type SitemapEnumerationFailure =
+  | { kind: 'enumeration'; message: string }
+  | { kind: 'bound'; maxPages: number }
+  | { kind: 'cycle'; id: string }
+
+export type SitemapEnumerationResult =
+  | { ok: true; entities: PublicEntityRef[] }
+  | { ok: false; failure: SitemapEnumerationFailure }
+
+/** The traversal bound: an enumeration that exceeds it fails, never truncates. */
+export const DEFAULT_SITEMAP_MAX_PAGES = 100
+
+/**
+ * Enumerate public entities across pagination, de-duplicated by id, with a
+ * visited-id cycle guard and a maximum-page bound. A fetch failure, a bound hit,
+ * or a repeated id/cursor returns an explicit typed failure instead of an
+ * apparently-complete or truncated list.
+ */
+export async function enumeratePublicEntities(
+  fetchPage: PublicEntityPageFetcher,
+  options: { maxPages?: number } = {},
+): Promise<SitemapEnumerationResult> {
+  const maxPages = options.maxPages ?? DEFAULT_SITEMAP_MAX_PAGES
+  const seenIds = new Set<string>()
+  const seenCursors = new Set<string>()
+  const entities: PublicEntityRef[] = []
+  let cursor: string | undefined
+
+  for (let pages = 0; ; pages += 1) {
+    if (pages >= maxPages) {
+      return { ok: false, failure: { kind: 'bound', maxPages } }
+    }
+
+    let page: PublicEntityPage
+    try {
+      page = await fetchPage(cursor)
+    } catch (error) {
+      return {
+        ok: false,
+        failure: {
+          kind: 'enumeration',
+          message: error instanceof Error ? error.message : String(error),
+        },
+      }
+    }
+
+    for (const item of page.items) {
+      if (seenIds.has(item.id)) {
+        return { ok: false, failure: { kind: 'cycle', id: item.id } }
+      }
+      seenIds.add(item.id)
+      entities.push(item)
+    }
+
+    const next = page.nextCursor
+    if (next === undefined || next === '') {
+      return { ok: true, entities }
+    }
+    if (seenCursors.has(next)) {
+      return { ok: false, failure: { kind: 'cycle', id: next } }
+    }
+    seenCursors.add(next)
+    cursor = next
+  }
+}
+
+/**
+ * Raised by `app/sitemap.ts` when enumeration fails, so the route responds with
+ * a non-success instead of an apparently-complete sitemap.
+ */
+export class SitemapEnumerationError extends Error {
+  readonly failure: SitemapEnumerationFailure
+  constructor(failure: SitemapEnumerationFailure) {
+    super(`Sitemap enumeration failed (${failure.kind})`)
+    this.name = 'SitemapEnumerationError'
+    this.failure = failure
+  }
+}
+
+/**
+ * Combine the fixed public routes with the enumerated public entities into
+ * de-duplicated absolute sitemap entries. Private surfaces are never listed.
+ */
+export function buildSitemapEntries(input: {
+  routes: Record<string, unknown>
+  siteUrl: string
+  entities: readonly PublicEntityRef[]
+}): { url: string }[] {
+  const urls = new Set<string>()
+  for (const path of fixedRoutePaths(input.routes)) {
+    if (!isPrivatePath(path)) urls.add(new URL(path, input.siteUrl).toString())
+  }
+  for (const entity of input.entities) {
+    if (!isPrivatePath(entity.path)) {
+      urls.add(new URL(entity.path, input.siteUrl).toString())
+    }
+  }
+  return [...urls].map((url) => ({ url }))
+}

package/assets/templates/app/lib/__STOREFRONT__/store-context.ts

@@ -9,8 +9,10 @@
 // owns the environment contract; the commerce bridge owns the backend calls.
 //
 // The values are the multitenancy seam: a future tenancy layer varies
-// storeId/channel/region/currency without redefining the commerce shapes. The
-// currency is NEVER hardcoded — it always comes from the host environment.
+// storeId/channel/region/currency without redefining the commerce shapes. In
+// real mode the currency is NEVER hardcoded — it comes from the host
+// environment; mock mode resolves a labelled fixture context so the store runs
+// with no environment configured at all.
 
 import type { StoreContext } from '@thorprovider/types'
 import { storeContextSchema } from '@thorprovider/runtime/contracts'
@@ -23,7 +25,7 @@ export const STORE_CONTEXT_ENV = {
   storeId: 'THOR_STORE_ID',
   salesChannelId: 'MEDUSA_SALES_CHANNEL_ID',
   regionId: 'MEDUSA_REGION_ID',
-  currencyCode: 'THOR_CURRENCY_CODE',
+  currencyCode: 'MEDUSA_CURRENCY_CODE',
 } as const
 
 /** Real-mode backend configuration required before any provider call. */
@@ -90,6 +92,19 @@ export function getSiteUrl(): string | undefined {
   return parseSiteUrl(process.env[SITE_URL_ENV])
 }
 
+/**
+ * Fixture context resolved in mock mode. It satisfies `storeContextSchema` and
+ * mirrors the values the bundled mock provider serves, so a store with no
+ * environment configured still has a valid context to render and operate its
+ * cart against. It is a labelled fixture, never a real backend identity.
+ */
+export const MOCK_STORE_CONTEXT: StoreContext = {
+  storeId: 'mock-store',
+  salesChannelId: 'mock-sales-channel',
+  regionId: 'mock-region-us',
+  currencyCode: 'USD',
+}
+
 function requireEnv(name: string): string {
   const value = process.env[name]
   if (typeof value !== 'string' || value.trim() === '') {
@@ -101,13 +116,17 @@ function requireEnv(name: string): string {
 }
 
 /**
- * Resolve and validate the single-store context from the host environment.
+ * Resolve and validate the single-store context.
  *
- * Validated through the shared runtime schema, so an invalid context is rejected
- * before any commerce call. Throws `StoreConfigError` naming the missing
- * variable — never a secret value.
+ * Mock mode returns the labelled fixture context and reads no environment
+ * variables, so a created store runs with no configuration. Real mode resolves
+ * the four variables from the host environment and validates them through the
+ * shared runtime schema, so an invalid context is rejected before any commerce
+ * call. Throws `StoreConfigError` naming the missing variable — never a secret
+ * value.
  */
 export function getStoreContext(): StoreContext {
+  if (!isRealMode()) return MOCK_STORE_CONTEXT
   const candidate = {
     storeId: requireEnv(STORE_CONTEXT_ENV.storeId),
     salesChannelId: requireEnv(STORE_CONTEXT_ENV.salesChannelId),

package/assets/templates/app/lib/__STOREFRONT__/views/sections/index.ts

@@ -8,8 +8,9 @@
 import type { ViewCatalogEntry } from '../types'
 import { ctaSection } from './cta'
 import { faqSection } from './faq'
+import { productsSection } from './products'
 
-export const sectionModules = [faqSection, ctaSection] as const
+export const sectionModules = [faqSection, ctaSection, productsSection] as const
 
 export const sectionCatalog: Record<string, ViewCatalogEntry> = Object.assign(
   {},

package/assets/templates/app/lib/__STOREFRONT__/views/sections/products.client.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+// Optional section fragment: products (mirrors recipes/sections.json) — client registry.
+// The matching server-side catalog lives in products.tsx. A data-bound section
+// renders one of two verified presentations (ProductCard1 grid, or the combined
+// grid-and-carousel ProductShowcase1) chosen by the resolved `variant`. The
+// selection and resolved products arrive through the view state; this boundary
+// only validates them and wires navigation/purchase callbacks.
+
+import {
+  ProductCard1 as ProductCard1Block,
+  ProductShowcase1 as ProductShowcase1Block,
+  type ProductCard1Product,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import { useSectionObservation } from '../../section-observation'
+import { productsPropsSchema, type ProductsStatus } from './schema.products'
+import type { ViewRegistry } from '../types'
+
+// Truthful, actionable messages for the non-`ready` states. A failed or
+// unconfigured section never fabricates products.
+function sectionStatusMessage(status: ProductsStatus): string {
+  switch (status) {
+    case 'unconfigured':
+      return 'Esta sección de productos aún no tiene una selección configurada.'
+    case 'empty':
+      return 'Esta selección no tiene productos disponibles por ahora.'
+    case 'invalid-query':
+      return 'La selección de productos de esta sección no es válida.'
+    case 'unsupported-query':
+      return 'Esta selección usa criterios que el catálogo no admite.'
+    case 'unmounted-capability':
+      return 'Esta selección requiere una capacidad que este catálogo no tiene montada.'
+    case 'data-error':
+      return 'No se pudieron cargar los productos de esta sección.'
+    default:
+      return ''
+  }
+}
+
+export const productsRegistry: ViewRegistry = {
+  Products: ({ props, emit }) => {
+    const { set } = useStateStore()
+    const parsed = productsPropsSchema.parse(props)
+    const { containerRef, noteProductClick } = useSectionObservation({
+      sectionId: parsed.sectionId ?? '',
+      sectionType: parsed.sectionType ?? 'products',
+      ...(parsed.variant ? { sectionVariant: parsed.variant } : {}),
+      ...(parsed.objective ? { objective: parsed.objective } : {}),
+    })
+
+    if (parsed.status !== 'ready') {
+      return (
+        <section
+          aria-label={parsed.heading ?? 'Productos'}
+          className="mx-auto w-full max-w-7xl px-4 py-12"
+        >
+          {parsed.heading ? (
+            <h2 className="mb-2 text-2xl font-semibold tracking-tight">{parsed.heading}</h2>
+          ) : null}
+          <p className="text-sm text-muted-foreground">{sectionStatusMessage(parsed.status)}</p>
+        </section>
+      )
+    }
+
+    // The detail affordance opens the product so a variant is chosen explicitly.
+    // It is also the section's observation origin (disabled by default).
+    const openProduct = (product: ProductCard1Product) => {
+      noteProductClick(product)
+      set('/lastClicked', product)
+      emit('openProduct')
+    }
+
+    // Product-card shortcut: the add affordance adds the product's first
+    // purchasable variant (resolved server-side from the product id), then opens
+    // the mini-cart. It is not the section's observation origin.
+    const addToCart = (product: ProductCard1Product) => {
+      set('/lastClicked', product)
+      emit('addClickedToCart')
+    }
+
+    const shared = {
+      products: parsed.products,
+      heading: parsed.heading,
+      description: parsed.description,
+      onAddToCart: addToCart,
+      onProductClick: openProduct,
+    }
+
+    return (
+      <div ref={containerRef}>
+        {parsed.variant === 'ProductShowcase1' ? (
+          <ProductShowcase1Block {...shared} />
+        ) : (
+          <ProductCard1Block {...shared} />
+        )}
+      </div>
+    )
+  },
+}

package/assets/templates/app/lib/__STOREFRONT__/views/sections/products.tsx

@@ -0,0 +1,19 @@
+// Optional section fragment: products (mirrors recipes/sections.json)
+// Server-side part: element type + zod catalog entry. The component mappings
+// live in products.client.tsx ('use client'). Unlike the stateless editorial
+// fragments (faq/cta), the products section is data-bound: its per-instance
+// selection is resolved by the host loader and delivered through the view state,
+// so this catalog entry describes the *resolved* props shape.
+
+import { productsPropsSchema } from './schema.products'
+
+export const productsSection = {
+  elementType: 'Products',
+  catalog: {
+    Products: {
+      props: productsPropsSchema,
+      description: 'Data-bound product presentation (grid or combined grid-and-carousel).',
+    },
+  },
+  registryModule: './products.client',
+}

package/assets/templates/app/lib/__STOREFRONT__/views/sections/schema.products.ts

@@ -0,0 +1,39 @@
+// Optional section fragment: products (mirrors recipes/sections.json) — shared contract.
+// Zod mirror of the resolved Products section props, shared by the server catalog
+// (products.tsx) and the client registry (products.client.tsx). The product list
+// reuses the canonical presentation contract owned by @thorprovider/blocks so the
+// section renders exactly what the host mapped from the catalog result.
+
+import { z } from 'zod'
+import { productPresentationSchema } from '@thorprovider/blocks'
+
+// The per-instance resolution status the host loader computes for a data-bound
+// section. `ready`/`empty` carry resolved products; the remaining states carry no
+// products and render an actionable, truthful message instead.
+export const productsStatusSchema = z.enum([
+  'unconfigured',
+  'ready',
+  'empty',
+  'invalid-query',
+  'unsupported-query',
+  'unmounted-capability',
+  'data-error',
+])
+
+export const productsPropsSchema = z.object({
+  sectionId: z.string().min(1).optional(),
+  sectionType: z.string().min(1).optional(),
+  variant: z.string().optional(),
+  // Defensive defaults: a missing resolved state (e.g. the view loader could not
+  // run) degrades to a truthful error instead of crashing the render.
+  status: productsStatusSchema.default('data-error'),
+  products: z.array(productPresentationSchema).default([]),
+  heading: z.string().optional(),
+  description: z.string().optional(),
+  objective: z.string().optional(),
+  ctaLabel: z.string().optional(),
+  ctaHref: z.string().optional(),
+})
+
+export type ProductsProps = z.infer<typeof productsPropsSchema>
+export type ProductsStatus = z.infer<typeof productsStatusSchema>

package/assets/templates/features/checkout/handlers.ts

@@ -15,6 +15,7 @@ import {
   syncCheckoutAddressAction,
 } from '../../actions'
 import type { CartStatePatch, PlaceOrderResult } from '../../commerce'
+import { recordConfirmedTransition } from '../../section-observation'
 
 // The always-required core of an address. Optional fields (province, phone,
 // postal code) are left to the runtime validator so the host does not impose a
@@ -49,6 +50,9 @@ export function useCheckoutHandlers() {
     const applyResult = (result: PlaceOrderResult) => {
       set('/checkoutPending', false)
       if (result.status === 'order') {
+        // A confirmed, persisted order — observed only on a genuine order result
+        // (not captured funds) and only when a section origin exists.
+        recordConfirmedTransition('order_confirmed')
         // ONE atomic write carries the order and its backend lines.
         set('/lastReceipt', { order: result.order, lines: result.lines })
         set('/orderStatus', 'complete')
@@ -93,6 +97,8 @@ export function useCheckoutHandlers() {
 
     const handlers: Record<string, () => void> = {
       goToCheckout: () => {
+        // A confirmed checkout transition (the shopper started checkout).
+        recordConfirmedTransition('checkout_started')
         set('/cartOpen', false)
         navigate('/checkout')
       },

package/assets/templates/features/customer-auth/state.ts

@@ -19,7 +19,13 @@ export interface CustomerAuthState {
   accountOrdersPending: boolean
   /** The order-history load failure, or null when it loaded. */
   accountOrdersError: string | null
-  /** The order number selected for the inline detail; null when none is open. */
+  /** The backend's real total for the authenticated customer on the store channel. */
+  accountOrdersCount: number
+  /** The 1-based order-history page currently loaded. */
+  accountOrdersPage: number
+  /** The bounded page size used for the order-history window. */
+  accountOrdersPageSize: number
+  /** The real backend order id selected for the inline detail; null when none is open. */
   accountSelectedOrderId: string | null
 }
 
@@ -32,5 +38,8 @@ export const customerAuthState: CustomerAuthState = {
   accountOrders: [],
   accountOrdersPending: false,
   accountOrdersError: null,
+  accountOrdersCount: 0,
+  accountOrdersPage: 1,
+  accountOrdersPageSize: 10,
   accountSelectedOrderId: null,
 }

package/assets/templates/views/account/index.tsx

@@ -95,7 +95,7 @@ export const account: ViewModule = {
   catalog,
   registry,
   route: {
-    path: '/cuenta',
+    path: '/account',
     loaderName: 'account',
     layout: 'default',
     metadata: {