@ecomiq/storefront 2.0.22 → 2.1.4

package/src/storefront-definition/renderer.tsx

@@ -1,905 +0,0 @@
-import { Fragment, type CSSProperties, type ReactNode } from 'react'
-import type { Collection, ProductSummary } from '@ecomiq/core'
-import { buttonVariants } from '../ui/button'
-import { cn } from '../ui/cn'
-import type {
-  CollectionGridStorefrontSection,
-  HeroStorefrontSection,
-  ImageTextStorefrontSection,
-  NewsletterStorefrontSection,
-  ProductGridStorefrontSection,
-  PromoBannerStorefrontSection,
-  RichTextStorefrontSection,
-  StorefrontAction,
-  StorefrontDefinition,
-  StorefrontFontFamily,
-  StorefrontImage,
-  StorefrontNavigationItem,
-  StorefrontSection,
-  StorefrontThemeTokens,
-  TestimonialsStorefrontSection,
-} from '@ecomiq/storefront-definition'
-
-export interface DefinitionData {
-  productsBySectionId?: Readonly<
-    Record<string, readonly ProductSummary[] | undefined>
-  >
-  collectionsBySectionId?: Readonly<
-    Record<string, readonly Collection[] | undefined>
-  >
-}
-
-export interface SectionContext {
-  data: DefinitionData
-  locale: string
-  currency: string
-  assets: AssetManifest
-}
-
-export type AssetManifest = Readonly<Record<string, string>>
-
-export function storefrontImageSrc(
-  image: StorefrontImage | undefined,
-  assets: AssetManifest,
-): string | undefined {
-  if (image === undefined) return undefined
-  if (typeof image === 'string') return image
-  return assets[image.assetId]
-}
-
-export function storefrontImageAlt(
-  image: StorefrontImage | undefined,
-  fallback: string,
-): string {
-  return typeof image === 'object' && image.alt ? image.alt : fallback
-}
-
-export interface SectionProps<
-  TSection extends StorefrontSection,
-> {
-  section: TSection
-  context: SectionContext
-}
-
-export interface SectionRegistry {
-  hero: (
-    props: SectionProps<HeroStorefrontSection>,
-  ) => ReactNode
-  'product-grid': (
-    props: SectionProps<ProductGridStorefrontSection>,
-  ) => ReactNode
-  'collection-grid': (
-    props: SectionProps<CollectionGridStorefrontSection>,
-  ) => ReactNode
-  'promo-banner': (
-    props: SectionProps<PromoBannerStorefrontSection>,
-  ) => ReactNode
-  'image-text': (
-    props: SectionProps<ImageTextStorefrontSection>,
-  ) => ReactNode
-  'rich-text': (
-    props: SectionProps<RichTextStorefrontSection>,
-  ) => ReactNode
-  testimonials: (
-    props: SectionProps<TestimonialsStorefrontSection>,
-  ) => ReactNode
-  newsletter: (
-    props: SectionProps<NewsletterStorefrontSection>,
-  ) => ReactNode
-}
-
-export interface DefinitionSectionsProps {
-  definition: StorefrontDefinition
-  data?: DefinitionData
-  locale?: string
-  currency?: string
-  registry?: SectionRegistry
-  assets?: AssetManifest
-}
-
-export interface DefinitionShellProps {
-  definition: StorefrontDefinition
-  children: ReactNode
-  showChrome?: boolean
-  className?: string
-}
-
-export interface DefinitionRendererProps extends DefinitionSectionsProps {
-  showChrome?: boolean
-  className?: string
-}
-
-type StorefrontThemeStyle = CSSProperties & {
-  '--background': string
-  '--foreground': string
-  '--card': string
-  '--card-foreground': string
-  '--primary': string
-  '--primary-foreground': string
-  '--secondary': string
-  '--secondary-foreground': string
-  '--muted': string
-  '--muted-foreground': string
-  '--accent': string
-  '--accent-foreground': string
-  '--border': string
-  '--input': string
-  '--ring': string
-  '--radius': string
-  '--storefront-font-body': string
-  '--storefront-font-heading': string
-  '--storefront-section-padding': string
-}
-
-function fontStack(font: StorefrontFontFamily): string {
-  if (font === 'editorial-serif') {
-    return 'Iowan Old Style, Baskerville, Times New Roman, serif'
-  }
-  if (font === 'humanist-sans') {
-    return 'Avenir Next, Avenir, Segoe UI, sans-serif'
-  }
-  return 'ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif'
-}
-
-function radiusValue(radius: StorefrontThemeTokens['radius']): string {
-  if (radius === 'none') return '0rem'
-  if (radius === 'small') return '0.375rem'
-  if (radius === 'large') return '1rem'
-  return '0.625rem'
-}
-
-function sectionPaddingValue(
-  density: StorefrontThemeTokens['density'],
-): string {
-  if (density === 'compact') return '2.5rem'
-  if (density === 'airy') return '5rem'
-  return '4rem'
-}
-
-function themeStyle(theme: StorefrontThemeTokens): StorefrontThemeStyle {
-  return {
-    '--background': theme.colors.background,
-    '--foreground': theme.colors.foreground,
-    '--card': theme.colors.card,
-    '--card-foreground': theme.colors.cardForeground,
-    '--primary': theme.colors.primary,
-    '--primary-foreground': theme.colors.primaryForeground,
-    '--secondary': theme.colors.secondary,
-    '--secondary-foreground': theme.colors.secondaryForeground,
-    '--muted': theme.colors.muted,
-    '--muted-foreground': theme.colors.mutedForeground,
-    '--accent': theme.colors.accent,
-    '--accent-foreground': theme.colors.accentForeground,
-    '--border': theme.colors.border,
-    '--input': theme.colors.border,
-    '--ring': theme.colors.primary,
-    '--radius': radiusValue(theme.radius),
-    '--storefront-font-body': fontStack(theme.typography.body),
-    '--storefront-font-heading': fontStack(theme.typography.heading),
-    '--storefront-section-padding': sectionPaddingValue(theme.density),
-  }
-}
-
-function sectionSurfaceClass(section: StorefrontSection): string {
-  if (section.surface === 'muted') return 'bg-muted'
-  if (section.surface === 'accent') {
-    return 'bg-accent text-accent-foreground'
-  }
-  return 'bg-background'
-}
-
-function StorefrontActionLink({
-  action,
-  variant = 'default',
-}: {
-  action: StorefrontAction
-  variant?: 'default' | 'secondary' | 'outline'
-}) {
-  const className = buttonVariants({ variant, size: 'lg' })
-  const isExternal =
-    action.href.startsWith('https://') ||
-    action.href.startsWith('mailto:') ||
-    action.href.startsWith('tel:')
-
-  const opensNewWindow = action.href.startsWith('https://')
-  return (
-    <a
-      href={action.href}
-      className={className}
-      rel={isExternal && opensNewWindow ? 'noreferrer' : undefined}
-      target={isExternal && opensNewWindow ? '_blank' : undefined}
-    >
-      {action.label}
-    </a>
-  )
-}
-
-function StorefrontNavigationLink({
-  item,
-}: {
-  item: StorefrontNavigationItem
-}) {
-  const className =
-    'flex min-h-10 items-center px-2 text-sm text-muted-foreground transition-colors [@media(hover:hover)]:hover:text-foreground'
-  const opensNewWindow = item.external || item.href.startsWith('https://')
-  const isExternal =
-    opensNewWindow ||
-    item.href.startsWith('mailto:') ||
-    item.href.startsWith('tel:')
-
-  return (
-    <a
-      href={item.href}
-      className={className}
-      rel={isExternal && opensNewWindow ? 'noreferrer' : undefined}
-      target={isExternal && opensNewWindow ? '_blank' : undefined}
-    >
-      {item.label}
-    </a>
-  )
-}
-
-function HeroSectionRenderer({
-  section,
-  context,
-}: SectionProps<HeroStorefrontSection>) {
-  const isCentered = section.align === 'center'
-  const heroImageSrc = storefrontImageSrc(section.image, context.assets)
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section relative isolate min-h-[min(72vh,680px)] overflow-hidden',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      {heroImageSrc ? (
-        <>
-          <img
-            src={heroImageSrc}
-            alt={storefrontImageAlt(section.image, section.imageAlt)}
-            width={1600}
-            height={900}
-            fetchPriority="high"
-            className="absolute inset-0 -z-20 h-full w-full object-cover"
-          />
-          <div className="absolute inset-0 -z-10 bg-black/55" aria-hidden />
-        </>
-      ) : null}
-      <div
-        className={cn(
-          'mx-auto flex min-h-[inherit] w-full max-w-6xl items-center px-4',
-          isCentered && 'justify-center text-center',
-        )}
-      >
-        <div
-          className={cn(
-            'max-w-2xl',
-            section.image && 'text-white',
-            isCentered && 'flex flex-col items-center',
-          )}
-        >
-          {section.eyebrow ? (
-            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.16em] opacity-75">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h1
-            id={`${section.id}-title`}
-            className="text-balance text-4xl font-semibold leading-[1.02] tracking-[-0.022em] sm:text-5xl lg:text-6xl"
-          >
-            {section.title}
-          </h1>
-          {section.description ? (
-            <p className="mt-5 max-w-[65ch] text-pretty text-base leading-relaxed opacity-80 sm:text-lg">
-              {section.description}
-            </p>
-          ) : null}
-          {section.primaryAction || section.secondaryAction ? (
-            <div className="mt-8 flex flex-wrap gap-3">
-              {section.primaryAction ? (
-                <StorefrontActionLink action={section.primaryAction} />
-              ) : null}
-              {section.secondaryAction ? (
-                <StorefrontActionLink
-                  action={section.secondaryAction}
-                  variant="outline"
-                />
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function gridColumnsClass(columns: 2 | 3 | 4): string {
-  if (columns === 2) return 'sm:grid-cols-2'
-  if (columns === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
-  return 'sm:grid-cols-2 lg:grid-cols-4'
-}
-
-function SectionHeading({
-  id,
-  title,
-  description,
-}: {
-  id: string
-  title: string
-  description?: string
-}) {
-  return (
-    <header className="mb-8 max-w-2xl">
-      <h2
-        id={id}
-        className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-      >
-        {title}
-      </h2>
-      {description ? (
-        <p className="mt-3 text-pretty leading-relaxed text-muted-foreground">
-          {description}
-        </p>
-      ) : null}
-    </header>
-  )
-}
-
-function ProductGridSectionRenderer({
-  section,
-  context,
-}: SectionProps<ProductGridStorefrontSection>) {
-  const products = (context.data.productsBySectionId?.[section.id] ?? []).slice(
-    0,
-    section.limit,
-  )
-  const formatter = new Intl.NumberFormat(context.locale, {
-    style: 'currency',
-    currency: context.currency,
-  })
-
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-6xl px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        {products.length > 0 ? (
-          <div
-            className={cn(
-              'grid grid-cols-2 gap-x-4 gap-y-8',
-              gridColumnsClass(section.columns),
-            )}
-          >
-            {products.map((product) => (
-              <a
-                key={product.id}
-                href={`/products/${product.slug}`}
-                className="group rounded-lg focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <div className="aspect-square overflow-hidden rounded-lg bg-muted outline outline-1 -outline-offset-1 outline-black/10">
-                  {product.imageUrl ? (
-                    <img
-                      src={product.imageUrl}
-                      alt={product.name}
-                      width={640}
-                      height={640}
-                      loading="lazy"
-                      className="h-full w-full object-cover transition-transform duration-300 ease-out [@media(hover:hover)]:group-hover:scale-[1.025] motion-reduce:transition-none"
-                    />
-                  ) : (
-                    <div className="flex h-full items-center justify-center px-4 text-center text-xs text-muted-foreground">
-                      Imagen no disponible
-                    </div>
-                  )}
-                </div>
-                <div className="pt-3">
-                  {product.brand ? (
-                    <p className="text-xs text-muted-foreground">
-                      {product.brand}
-                    </p>
-                  ) : null}
-                  <h3 className="mt-1 line-clamp-2 text-pretty text-sm font-medium leading-snug">
-                    {product.name}
-                  </h3>
-                  <p className="mt-1 text-sm font-semibold tabular-nums">
-                    {formatter.format(product.price)}
-                  </p>
-                </div>
-              </a>
-            ))}
-          </div>
-        ) : (
-          <p className="border-t py-6 text-sm text-muted-foreground">
-            Aún no hay productos para mostrar.
-          </p>
-        )}
-      </div>
-    </section>
-  )
-}
-
-function CollectionGridSectionRenderer({
-  section,
-  context,
-}: SectionProps<CollectionGridStorefrontSection>) {
-  const collections = (
-    context.data.collectionsBySectionId?.[section.id] ?? []
-  ).slice(0, section.limit)
-
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-6xl px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        {collections.length > 0 ? (
-          <div className={cn('grid gap-4', gridColumnsClass(section.columns))}>
-            {collections.map((collection) => (
-              <a
-                key={collection.id}
-                href={`/collections/${collection.slug}`}
-                className="group relative min-h-72 overflow-hidden rounded-lg bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {collection.imageUrl ? (
-                  <img
-                    src={collection.imageUrl}
-                    alt={collection.name}
-                    width={960}
-                    height={720}
-                    loading="lazy"
-                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-out [@media(hover:hover)]:group-hover:scale-105 motion-reduce:transition-none"
-                  />
-                ) : null}
-                <div className="absolute inset-0 bg-black/55" aria-hidden />
-                <div className="absolute inset-x-0 bottom-0 p-5 text-white">
-                  <h3 className="text-balance text-xl font-semibold tracking-[-0.012em]">
-                    {collection.name}
-                  </h3>
-                  {collection.description ? (
-                    <p className="mt-1 line-clamp-2 text-pretty text-sm text-white/80">
-                      {collection.description}
-                    </p>
-                  ) : null}
-                </div>
-              </a>
-            ))}
-          </div>
-        ) : (
-          <p className="border-t py-6 text-sm text-muted-foreground">
-            Aún no hay colecciones para mostrar.
-          </p>
-        )}
-      </div>
-    </section>
-  )
-}
-
-function PromoBannerSectionRenderer({
-  section,
-}: SectionProps<PromoBannerStorefrontSection>) {
-  const isPrimary = section.tone === 'primary'
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        isPrimary
-          ? 'bg-primary text-primary-foreground'
-          : sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 sm:flex-row sm:items-end sm:justify-between">
-        <div className="max-w-3xl">
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] opacity-75">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          {section.description ? (
-            <p className="mt-3 max-w-[65ch] text-pretty leading-relaxed opacity-80">
-              {section.description}
-            </p>
-          ) : null}
-        </div>
-        {section.action ? (
-          <StorefrontActionLink
-            action={section.action}
-            variant={isPrimary ? 'secondary' : 'default'}
-          />
-        ) : null}
-      </div>
-    </section>
-  )
-}
-
-function ImageTextSectionRenderer({
-  section,
-  context,
-}: SectionProps<ImageTextStorefrontSection>) {
-  const imageFirst = section.imagePosition === 'left'
-  const imageSrc = storefrontImageSrc(section.image, context.assets)
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto grid w-full max-w-6xl items-center gap-8 px-4 md:grid-cols-2 md:gap-12">
-        <img
-          src={imageSrc}
-          alt={storefrontImageAlt(section.image, section.imageAlt)}
-          width={960}
-          height={720}
-          loading="lazy"
-          className={cn(
-            'aspect-[4/3] h-full w-full rounded-lg object-cover outline outline-1 -outline-offset-1 outline-black/10',
-            !imageFirst && 'md:order-2',
-          )}
-        />
-        <div className={cn(!imageFirst && 'md:order-1')}>
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          <p className="mt-4 max-w-[65ch] whitespace-pre-line text-pretty leading-relaxed text-muted-foreground">
-            {section.body}
-          </p>
-          {section.action ? (
-            <div className="mt-7">
-              <StorefrontActionLink action={section.action} />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function RichTextSectionRenderer({
-  section,
-}: SectionProps<RichTextStorefrontSection>) {
-  const isCentered = section.align === 'center'
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={section.title ? `${section.id}-title` : undefined}
-      data-storefront-section={section.id}
-    >
-      <div
-        className={cn(
-          'mx-auto w-full max-w-3xl px-4',
-          isCentered && 'text-center',
-        )}
-      >
-        {section.title ? (
-          <h2
-            id={`${section.id}-title`}
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-        ) : null}
-        <div className={cn('space-y-4', section.title && 'mt-5')}>
-          {section.paragraphs.map((paragraph, index) => (
-            <p
-              key={`${section.id}-paragraph-${index}`}
-              className="whitespace-pre-line text-pretty leading-7 text-muted-foreground"
-            >
-              {paragraph}
-            </p>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function testimonialColumnsClass(columns: 1 | 2 | 3): string {
-  if (columns === 1) return 'grid-cols-1'
-  if (columns === 2) return 'md:grid-cols-2'
-  return 'md:grid-cols-2 lg:grid-cols-3'
-}
-
-function TestimonialsSectionRenderer({
-  section,
-}: SectionProps<TestimonialsStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-6xl px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        <div
-          className={cn('grid gap-5', testimonialColumnsClass(section.columns))}
-        >
-          {section.items.map((item) => (
-            <figure
-              key={item.id}
-              className="flex h-full flex-col justify-between border-t pt-6 text-foreground"
-            >
-              <blockquote className="text-pretty text-lg leading-relaxed">
-                “{item.quote}”
-              </blockquote>
-              <figcaption className="mt-8 text-sm">
-                <span className="font-semibold">{item.author}</span>
-                {item.role ? (
-                  <span className="mt-1 block text-muted-foreground">
-                    {item.role}
-                  </span>
-                ) : null}
-              </figcaption>
-            </figure>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function NewsletterSectionRenderer({
-  section,
-}: SectionProps<NewsletterStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto grid w-full max-w-6xl gap-7 px-4 md:grid-cols-[1fr_minmax(280px,440px)] md:items-end">
-        <div className="max-w-2xl">
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          {section.description ? (
-            <p className="mt-3 text-pretty leading-relaxed text-muted-foreground">
-              {section.description}
-            </p>
-          ) : null}
-        </div>
-        <form action={section.formAction} method="post" className="flex gap-2">
-          <label htmlFor={`${section.id}-email`} className="sr-only">
-            Correo electrónico
-          </label>
-          <input
-            id={`${section.id}-email`}
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            placeholder={section.emailPlaceholder}
-            className="min-h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-sm placeholder:text-muted-foreground"
-          />
-          <button
-            type="submit"
-            className={buttonVariants({ variant: 'default', size: 'lg' })}
-          >
-            {section.buttonLabel}
-          </button>
-        </form>
-      </div>
-    </section>
-  )
-}
-
-export const defaultStorefrontSectionRegistry: SectionRegistry = {
-  hero: HeroSectionRenderer,
-  'product-grid': ProductGridSectionRenderer,
-  'collection-grid': CollectionGridSectionRenderer,
-  'promo-banner': PromoBannerSectionRenderer,
-  'image-text': ImageTextSectionRenderer,
-  'rich-text': RichTextSectionRenderer,
-  testimonials: TestimonialsSectionRenderer,
-  newsletter: NewsletterSectionRenderer,
-}
-
-export function renderStorefrontSection(
-  section: StorefrontSection,
-  registry: SectionRegistry,
-  context: SectionContext,
-): ReactNode {
-  if (section.type === 'hero') return registry.hero({ section, context })
-  if (section.type === 'product-grid') {
-    return registry['product-grid']({ section, context })
-  }
-  if (section.type === 'collection-grid') {
-    return registry['collection-grid']({ section, context })
-  }
-  if (section.type === 'promo-banner') {
-    return registry['promo-banner']({ section, context })
-  }
-  if (section.type === 'image-text') {
-    return registry['image-text']({ section, context })
-  }
-  if (section.type === 'rich-text') {
-    return registry['rich-text']({ section, context })
-  }
-  if (section.type === 'testimonials') {
-    return registry.testimonials({ section, context })
-  }
-  return registry.newsletter({ section, context })
-}
-
-function StorefrontChrome({
-  definition,
-  children,
-}: {
-  definition: StorefrontDefinition
-  children: ReactNode
-}) {
-  return (
-    <>
-      <a
-        href="#storefront-definition-main"
-        className="sr-only z-100 rounded-md bg-background px-3 py-2 text-sm focus:not-sr-only focus:fixed focus:left-3 focus:top-3"
-      >
-        Ir al contenido
-      </a>
-      {definition.navigation.items.length > 0 ? (
-        <header className="border-b bg-background">
-          <nav
-            className="mx-auto flex min-h-14 w-full max-w-6xl flex-wrap items-center gap-x-4 px-4"
-            aria-label="Navegación principal"
-          >
-            {definition.navigation.items.map((item) => (
-              <StorefrontNavigationLink key={item.id} item={item} />
-            ))}
-          </nav>
-        </header>
-      ) : null}
-      <main id="storefront-definition-main">{children}</main>
-      <footer className="border-t bg-muted/40">
-        <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-          {definition.footer.text ? <p>{definition.footer.text}</p> : null}
-          {definition.footer.items.length > 0 ? (
-            <nav
-              className="flex flex-wrap gap-x-3"
-              aria-label="Navegación del pie"
-            >
-              {definition.footer.items.map((item) => (
-                <StorefrontNavigationLink key={item.id} item={item} />
-              ))}
-            </nav>
-          ) : null}
-        </div>
-      </footer>
-    </>
-  )
-}
-
-export function DefinitionSections({
-  definition,
-  data = {},
-  locale = 'es-PE',
-  currency = 'PEN',
-  registry = defaultStorefrontSectionRegistry,
-  assets = {},
-}: DefinitionSectionsProps) {
-  const context: SectionContext = {
-    data,
-    locale,
-    currency,
-    assets,
-  }
-
-  return definition.sections
-    .filter((section) => section.enabled)
-    .map((section) => (
-      <Fragment key={section.id}>
-        {renderStorefrontSection(section, registry, context)}
-      </Fragment>
-    ))
-}
-
-export function DefinitionShell({
-  definition,
-  children,
-  showChrome = true,
-  className,
-}: DefinitionShellProps) {
-  const content = showChrome ? (
-    <StorefrontChrome definition={definition}>{children}</StorefrontChrome>
-  ) : (
-    children
-  )
-
-  return (
-    <div
-      className={cn(
-        'storefront-definition min-h-full bg-background text-foreground antialiased',
-        className,
-      )}
-      style={themeStyle(definition.theme)}
-      data-storefront-definition-version={definition.version}
-      data-storefront-definition-revision={definition.revision}
-    >
-      {content}
-    </div>
-  )
-}
-
-export function DefinitionRenderer({
-  definition,
-  data,
-  locale,
-  currency,
-  registry,
-  showChrome = true,
-  className,
-}: DefinitionRendererProps) {
-  return (
-    <DefinitionShell
-      definition={definition}
-      showChrome={showChrome}
-      className={className}
-    >
-      <DefinitionSections
-        definition={definition}
-        data={data}
-        locale={locale}
-        currency={currency}
-        registry={registry}
-      />
-    </DefinitionShell>
-  )
-}