@ecomiq/storefront 2.0.22 → 2.1.3

package/src/storefront-definition/renderer.tsx

@@ -2,7 +2,14 @@ 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 {
+  resolveStorefrontSectionStyle,
+  scopeStorefrontCss,
+  storefrontSectionCssScope,
+  STOREFRONT_SITE_CSS_SCOPE,
+} from '@ecomiq/storefront-definition'
 import type {
+  StorefrontPage,
   CollectionGridStorefrontSection,
   HeroStorefrontSection,
   ImageTextStorefrontSection,
@@ -15,9 +22,20 @@ import type {
   StorefrontFontFamily,
   StorefrontImage,
   StorefrontNavigationItem,
+  StorefrontContentWidth,
+  StorefrontNamedStyle,
   StorefrontSection,
+  StorefrontSectionStyle,
+  StorefrontSpace,
   StorefrontThemeTokens,
   TestimonialsStorefrontSection,
+  FeatureGridStorefrontSection,
+  FaqStorefrontSection,
+  StatsStorefrontSection,
+  LogoWallStorefrontSection,
+  GalleryStorefrontSection,
+  ColumnsStorefrontSection,
+  VideoStorefrontSection,
 } from '@ecomiq/storefront-definition'
 
 export interface DefinitionData {
@@ -34,6 +52,7 @@ export interface SectionContext {
   locale: string
   currency: string
   assets: AssetManifest
+  styles: readonly StorefrontNamedStyle[]
 }
 
 export type AssetManifest = Readonly<Record<string, string>>
@@ -77,6 +96,17 @@ export interface SectionRegistry {
   'image-text': (
     props: SectionProps<ImageTextStorefrontSection>,
   ) => ReactNode
+  'feature-grid': (
+    props: SectionProps<FeatureGridStorefrontSection>,
+  ) => ReactNode
+  faq: (props: SectionProps<FaqStorefrontSection>) => ReactNode
+  stats: (props: SectionProps<StatsStorefrontSection>) => ReactNode
+  'logo-wall': (
+    props: SectionProps<LogoWallStorefrontSection>,
+  ) => ReactNode
+  gallery: (props: SectionProps<GalleryStorefrontSection>) => ReactNode
+  columns: (props: SectionProps<ColumnsStorefrontSection>) => ReactNode
+  video: (props: SectionProps<VideoStorefrontSection>) => ReactNode
   'rich-text': (
     props: SectionProps<RichTextStorefrontSection>,
   ) => ReactNode
@@ -90,6 +120,7 @@ export interface SectionRegistry {
 
 export interface DefinitionSectionsProps {
   definition: StorefrontDefinition
+  pageId?: string
   data?: DefinitionData
   locale?: string
   currency?: string
@@ -97,6 +128,16 @@ export interface DefinitionSectionsProps {
   assets?: AssetManifest
 }
 
+export function storefrontPageFor(
+  definition: StorefrontDefinition,
+  pageId?: string,
+): StorefrontPage | null {
+  if (pageId === undefined) {
+    return definition.pages.find((page) => page.kind === 'home') ?? null
+  }
+  return definition.pages.find((page) => page.id === pageId) ?? null
+}
+
 export interface DefinitionShellProps {
   definition: StorefrontDefinition
   children: ReactNode
@@ -188,6 +229,152 @@ function sectionSurfaceClass(section: StorefrontSection): string {
   return 'bg-background'
 }
 
+const SPACE_VALUES: Record<StorefrontSpace, string> = {
+  none: '0rem',
+  xs: '1rem',
+  sm: '2rem',
+  md: '3.5rem',
+  lg: '5.5rem',
+  xl: '8rem',
+}
+
+const CONTENT_WIDTH_VALUES: Record<StorefrontContentWidth, string> = {
+  narrow: '48rem',
+  contained: '72rem',
+  wide: '90rem',
+  full: '100%',
+}
+
+const TEXT_STEPS: ReadonlyArray<readonly [string, number]> = [
+  ['--text-sm', 0.875],
+  ['--text-base', 1],
+  ['--text-lg', 1.125],
+  ['--text-xl', 1.25],
+  ['--text-2xl', 1.5],
+  ['--text-3xl', 1.875],
+  ['--text-4xl', 2.25],
+  ['--text-5xl', 3],
+  ['--text-6xl', 3.75],
+]
+
+const FONT_SCALE_VALUES = { sm: 0.875, md: 1, lg: 1.125, xl: 1.25 }
+
+/**
+ * Superficie derivada del fondo de la seccion: en vez de dejar las tarjetas y
+ * los bordes con el token del tema (blanco sobre un fondo oscuro), se acercan
+ * al color del texto lo justo para seguir leyendose como una capa aparte.
+ */
+function lift(background: string, amount = '8%'): string {
+  return `color-mix(in oklab, ${background}, var(--foreground) ${amount})`
+}
+
+function readableOn(background: string): string {
+  const value = background.slice(1)
+  const channels = [0, 2, 4].map((offset) => {
+    const channel = Number.parseInt(value.slice(offset, offset + 2), 16) / 255
+    return channel <= 0.04045
+      ? channel / 12.92
+      : ((channel + 0.055) / 1.055) ** 2.4
+  })
+  const luminance =
+    0.2126 * (channels[0] ?? 0) +
+    0.7152 * (channels[1] ?? 0) +
+    0.0722 * (channels[2] ?? 0)
+  return luminance > 0.36 ? '#0b0b0c' : '#ffffff'
+}
+
+function sectionFrameStyle(
+  style: StorefrontSectionStyle,
+  assets: AssetManifest,
+): CSSProperties {
+  const variables: Record<string, string> = {}
+
+  const backgroundImageSrc = storefrontImageSrc(style.backgroundImage, assets)
+  if (style.background) {
+    variables['--background'] = style.background
+    variables['--muted'] = style.background
+    variables['--accent'] = style.background
+    variables['--card'] = lift(style.background)
+    variables['--secondary'] = lift(style.background)
+    variables['--card-foreground'] = 'var(--foreground)'
+    variables['--secondary-foreground'] = 'var(--foreground)'
+    if (!style.border) variables['--border'] = lift(style.background, '18%')
+  }
+  if (backgroundImageSrc) {
+    variables['--background'] = 'transparent'
+    variables['--muted'] = 'transparent'
+    variables['--accent'] = 'transparent'
+  }
+  if (style.text) {
+    variables['--foreground'] = style.text
+    variables['--accent-foreground'] = style.text
+    variables['--muted-foreground'] =
+      `color-mix(in oklab, ${style.text} 68%, transparent)`
+  }
+  if (style.accent) {
+    variables['--primary'] = style.accent
+    variables['--primary-foreground'] = readableOn(style.accent)
+    variables['--ring'] = style.accent
+  }
+  if (style.border) {
+    variables['--border'] = style.border
+    variables['--input'] = style.border
+  }
+  if (style.radius) variables['--radius'] = radiusValue(style.radius)
+  if (style.paddingTop) {
+    variables['--storefront-section-padding-top'] = SPACE_VALUES[style.paddingTop]
+  }
+  if (style.paddingBottom) {
+    variables['--storefront-section-padding-bottom'] =
+      SPACE_VALUES[style.paddingBottom]
+  }
+  if (style.width) {
+    variables['--storefront-content-width'] = CONTENT_WIDTH_VALUES[style.width]
+  }
+  if (style.fontScale && style.fontScale !== 'md') {
+    const factor = FONT_SCALE_VALUES[style.fontScale]
+    for (const [token, rem] of TEXT_STEPS) {
+      variables[token] = `${(rem * factor).toFixed(4)}rem`
+    }
+  }
+  if (backgroundImageSrc) {
+    variables.backgroundImage = `url("${backgroundImageSrc}")`
+    variables.backgroundSize = 'cover'
+    variables.backgroundPosition = 'center'
+  }
+
+  return variables as CSSProperties
+}
+
+function sectionFrameClass(
+  style: StorefrontSectionStyle,
+): string | undefined {
+  if (style.visibility === 'desktop') return 'hidden md:block'
+  if (style.visibility === 'mobile') return 'md:hidden'
+  return undefined
+}
+
+export function storefrontPageCss(
+  page: StorefrontPage,
+  styles: readonly StorefrontNamedStyle[],
+): string {
+  return page.sections
+    .filter((section) => section.enabled)
+    .map((section) => {
+      const css = resolveStorefrontSectionStyle(section, styles).css
+      return css
+        ? scopeStorefrontCss(css, storefrontSectionCssScope(section.id))
+        : ''
+    })
+    .filter((css) => css.length > 0)
+    .join('\n')
+}
+
+function StorefrontCustomStyle({ css }: { css: string }) {
+  if (css.length === 0) return null
+  return <style dangerouslySetInnerHTML={{ __html: css }} />
+}
+
 function StorefrontActionLink({
   action,
   variant = 'default',
@@ -269,7 +456,7 @@ function HeroSectionRenderer({
       ) : null}
       <div
         className={cn(
-          'mx-auto flex min-h-[inherit] w-full max-w-6xl items-center px-4',
+          'mx-auto flex min-h-[inherit] w-full max-w-(--storefront-content-width) items-center px-4',
           isCentered && 'justify-center text-center',
         )}
       >
@@ -281,18 +468,19 @@ function HeroSectionRenderer({
           )}
         >
           {section.eyebrow ? (
-            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.16em] opacity-75">
+            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.16em] opacity-75" data-storefront-text="eyebrow">
               {section.eyebrow}
             </p>
           ) : null}
           <h1
             id={`${section.id}-title`}
+            data-storefront-text="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">
+            <p className="mt-5 max-w-[65ch] text-pretty text-base leading-relaxed opacity-80 sm:text-lg" data-storefront-text="description">
               {section.description}
             </p>
           ) : null}
@@ -334,12 +522,13 @@ function SectionHeading({
     <header className="mb-8 max-w-2xl">
       <h2
         id={id}
+        data-storefront-text="title"
         className="text-balance text-3xl font-semibold tracking-[-0.022em]"
       >
         {title}
       </h2>
       {description ? (
-        <p className="mt-3 text-pretty leading-relaxed text-muted-foreground">
+        <p className="mt-3 text-pretty leading-relaxed text-muted-foreground" data-storefront-text="description">
           {description}
         </p>
       ) : null}
@@ -369,7 +558,7 @@ function ProductGridSectionRenderer({
       aria-labelledby={`${section.id}-title`}
       data-storefront-section={section.id}
     >
-      <div className="mx-auto w-full max-w-6xl px-4">
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
         <SectionHeading
           id={`${section.id}-title`}
           title={section.title}
@@ -447,7 +636,7 @@ function CollectionGridSectionRenderer({
       aria-labelledby={`${section.id}-title`}
       data-storefront-section={section.id}
     >
-      <div className="mx-auto w-full max-w-6xl px-4">
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
         <SectionHeading
           id={`${section.id}-title`}
           title={section.title}
@@ -510,21 +699,22 @@ function PromoBannerSectionRenderer({
       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="mx-auto flex w-full max-w-(--storefront-content-width) 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">
+            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] opacity-75" data-storefront-text="eyebrow">
               {section.eyebrow}
             </p>
           ) : null}
           <h2
             id={`${section.id}-title`}
+            data-storefront-text="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">
+            <p className="mt-3 max-w-[65ch] text-pretty leading-relaxed opacity-80" data-storefront-text="description">
               {section.description}
             </p>
           ) : null}
@@ -555,7 +745,7 @@ function ImageTextSectionRenderer({
       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">
+      <div className="mx-auto grid w-full max-w-(--storefront-content-width) items-center gap-8 px-4 md:grid-cols-2 md:gap-12">
         <img
           src={imageSrc}
           alt={storefrontImageAlt(section.image, section.imageAlt)}
@@ -569,17 +759,18 @@ function ImageTextSectionRenderer({
         />
         <div className={cn(!imageFirst && 'md:order-1')}>
           {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground" data-storefront-text="eyebrow">
               {section.eyebrow}
             </p>
           ) : null}
           <h2
             id={`${section.id}-title`}
+            data-storefront-text="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">
+          <p className="mt-4 max-w-[65ch] whitespace-pre-line text-pretty leading-relaxed text-muted-foreground" data-storefront-text="body">
             {section.body}
           </p>
           {section.action ? (
@@ -615,6 +806,7 @@ function RichTextSectionRenderer({
         {section.title ? (
           <h2
             id={`${section.id}-title`}
+            data-storefront-text="title"
             className="text-balance text-3xl font-semibold tracking-[-0.022em]"
           >
             {section.title}
@@ -653,7 +845,7 @@ function TestimonialsSectionRenderer({
       aria-labelledby={`${section.id}-title`}
       data-storefront-section={section.id}
     >
-      <div className="mx-auto w-full max-w-6xl px-4">
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
         <SectionHeading
           id={`${section.id}-title`}
           title={section.title}
@@ -662,7 +854,7 @@ function TestimonialsSectionRenderer({
         <div
           className={cn('grid gap-5', testimonialColumnsClass(section.columns))}
         >
-          {section.items.map((item) => (
+          {section.blocks.map((item) => (
             <figure
               key={item.id}
               className="flex h-full flex-col justify-between border-t pt-6 text-foreground"
@@ -698,21 +890,22 @@ function NewsletterSectionRenderer({
       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="mx-auto grid w-full max-w-(--storefront-content-width) 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">
+            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground" data-storefront-text="eyebrow">
               {section.eyebrow}
             </p>
           ) : null}
           <h2
             id={`${section.id}-title`}
+            data-storefront-text="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">
+            <p className="mt-3 text-pretty leading-relaxed text-muted-foreground" data-storefront-text="description">
               {section.description}
             </p>
           ) : null}
@@ -742,6 +935,293 @@ function NewsletterSectionRenderer({
   )
 }
 
+
+function FeatureGridSectionRenderer({
+  section,
+}: SectionProps<FeatureGridStorefrontSection>) {
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
+        {section.title ? (
+          <SectionHeading
+            id={`${section.id}-title`}
+            title={section.title}
+            description={section.description}
+          />
+        ) : null}
+        <div className={cn('grid gap-6', gridColumnsClass(section.columns))}>
+          {section.blocks.map((block) => (
+            <div key={block.id}>
+              <h3
+                className="text-base font-semibold"
+                data-storefront-text="title"
+              >
+                {block.title}
+              </h3>
+              {block.description ? (
+                <p
+                  className="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground"
+                  data-storefront-text="description"
+                >
+                  {block.description}
+                </p>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function FaqSectionRenderer({ section }: SectionProps<FaqStorefrontSection>) {
+  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-3xl px-4">
+        <SectionHeading
+          id={`${section.id}-title`}
+          title={section.title}
+          description={section.description}
+        />
+        <dl className="divide-y border-t">
+          {section.blocks.map((block) => (
+            <div key={block.id} className="py-5">
+              <dt className="text-base font-semibold">{block.question}</dt>
+              <dd className="mt-2 whitespace-pre-line text-pretty leading-relaxed text-muted-foreground">
+                {block.answer}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  )
+}
+
+function StatsSectionRenderer({
+  section,
+}: SectionProps<StatsStorefrontSection>) {
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
+        {section.title ? (
+          <SectionHeading id={`${section.id}-title`} title={section.title} />
+        ) : null}
+        <dl className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {section.blocks.map((block) => (
+            <div key={block.id}>
+              <dt className="text-3xl font-semibold tracking-[-0.02em]">
+                {block.value}
+              </dt>
+              <dd className="mt-1 text-sm text-muted-foreground">
+                {block.label}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  )
+}
+
+function LogoWallSectionRenderer({
+  section,
+  context,
+}: SectionProps<LogoWallStorefrontSection>) {
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
+        {section.title ? (
+          <SectionHeading id={`${section.id}-title`} title={section.title} />
+        ) : null}
+        <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
+          {section.blocks.map((block) => {
+            const src = storefrontImageSrc(block.image, context.assets)
+            if (!src) return null
+            return (
+              <li key={block.id}>
+                <img
+                  alt={block.alt}
+                  className="h-8 w-auto opacity-70 transition-opacity hover:opacity-100"
+                  loading="lazy"
+                  src={src}
+                />
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+function GallerySectionRenderer({
+  section,
+  context,
+}: SectionProps<GalleryStorefrontSection>) {
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
+        {section.title ? (
+          <SectionHeading
+            id={`${section.id}-title`}
+            title={section.title}
+            description={section.description}
+          />
+        ) : null}
+        <div className={cn('grid gap-3', gridColumnsClass(section.columns))}>
+          {section.blocks.map((block) => {
+            const src = storefrontImageSrc(block.image, context.assets)
+            if (!src) return null
+            return (
+              <figure key={block.id}>
+                <img
+                  alt={block.alt}
+                  className="aspect-[4/3] w-full rounded-md object-cover"
+                  loading="lazy"
+                  src={src}
+                />
+                {block.caption ? (
+                  <figcaption className="mt-2 text-xs text-muted-foreground">
+                    {block.caption}
+                  </figcaption>
+                ) : null}
+              </figure>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function ColumnsSectionRenderer({
+  section,
+  context,
+}: SectionProps<ColumnsStorefrontSection>) {
+  const columns = Math.min(Math.max(section.blocks.length, 2), 4) as 2 | 3 | 4
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
+        {section.title ? (
+          <SectionHeading
+            id={`${section.id}-title`}
+            title={section.title}
+            description={section.description}
+          />
+        ) : null}
+        <div className={cn('grid gap-8', gridColumnsClass(columns))}>
+          {section.blocks.map((block) => {
+            const src = storefrontImageSrc(block.image, context.assets)
+            return (
+              <div key={block.id}>
+                {src ? (
+                  <img
+                    alt={block.imageAlt ?? ''}
+                    className="mb-4 aspect-[4/3] w-full rounded-md object-cover"
+                    loading="lazy"
+                    src={src}
+                  />
+                ) : null}
+                <h3
+                  className="text-lg font-semibold"
+                  data-storefront-text="title"
+                >
+                  {block.title}
+                </h3>
+                {block.body ? (
+                  <p className="mt-2 text-pretty leading-relaxed text-muted-foreground">
+                    {block.body}
+                  </p>
+                ) : null}
+                {block.action ? (
+                  <div className="mt-4">
+                    <StorefrontActionLink action={block.action} />
+                  </div>
+                ) : null}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function VideoSectionRenderer({
+  section,
+  context,
+}: SectionProps<VideoStorefrontSection>) {
+  const poster = storefrontImageSrc(section.poster, context.assets)
+  return (
+    <section
+      className={cn(
+        'storefront-definition-section',
+        sectionSurfaceClass(section),
+      )}
+      data-storefront-section={section.id}
+    >
+      <div className="mx-auto w-full max-w-4xl px-4">
+        {section.title ? (
+          <SectionHeading
+            id={`${section.id}-title`}
+            title={section.title}
+            description={section.description}
+          />
+        ) : null}
+        <div className="overflow-hidden rounded-lg border bg-muted">
+          <video
+            className="aspect-video w-full"
+            controls
+            preload="none"
+            {...(poster ? { poster } : {})}
+            src={section.url}
+          >
+            {section.posterAlt ?? ''}
+          </video>
+        </div>
+      </div>
+    </section>
+  )
+}
+
 export const defaultStorefrontSectionRegistry: SectionRegistry = {
   hero: HeroSectionRenderer,
   'product-grid': ProductGridSectionRenderer,
@@ -751,12 +1231,70 @@ export const defaultStorefrontSectionRegistry: SectionRegistry = {
   'rich-text': RichTextSectionRenderer,
   testimonials: TestimonialsSectionRenderer,
   newsletter: NewsletterSectionRenderer,
+  'feature-grid': FeatureGridSectionRenderer,
+  faq: FaqSectionRenderer,
+  stats: StatsSectionRenderer,
+  'logo-wall': LogoWallSectionRenderer,
+  gallery: GallerySectionRenderer,
+  columns: ColumnsSectionRenderer,
+  video: VideoSectionRenderer,
+}
+
+function StorefrontSectionFrame({
+  section,
+  context,
+  children,
+}: {
+  section: StorefrontSection
+  context: SectionContext
+  children: ReactNode
+}) {
+  const resolved = resolveStorefrontSectionStyle(section, context.styles)
+  const style = sectionFrameStyle(resolved, context.assets)
+  const className = sectionFrameClass(resolved)
+  const overlay = resolved.backgroundOverlay
+  const hasFrame =
+    Object.keys(style).length > 0 || className !== undefined || Boolean(overlay)
+  if (!hasFrame) return children
+
+  return (
+    <div
+      className={cn(
+        'storefront-definition-frame text-foreground',
+        Boolean(resolved.backgroundImage) && 'relative isolate',
+        className,
+      )}
+      style={style}
+      data-storefront-section-frame={section.id}
+    >
+      {overlay ? (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10 bg-black"
+          style={{ opacity: overlay }}
+        />
+      ) : null}
+      {children}
+    </div>
+  )
 }
 
 export function renderStorefrontSection(
   section: StorefrontSection,
   registry: SectionRegistry,
   context: SectionContext,
+): ReactNode {
+  return (
+    <StorefrontSectionFrame section={section} context={context}>
+      {renderStorefrontSectionBody(section, registry, context)}
+    </StorefrontSectionFrame>
+  )
+}
+
+function renderStorefrontSectionBody(
+  section: StorefrontSection,
+  registry: SectionRegistry,
+  context: SectionContext,
 ): ReactNode {
   if (section.type === 'hero') return registry.hero({ section, context })
   if (section.type === 'product-grid') {
@@ -777,6 +1315,27 @@ export function renderStorefrontSection(
   if (section.type === 'testimonials') {
     return registry.testimonials({ section, context })
   }
+  if (section.type === 'feature-grid') {
+    return registry['feature-grid']({ section, context })
+  }
+  if (section.type === 'faq') {
+    return registry.faq({ section, context })
+  }
+  if (section.type === 'stats') {
+    return registry.stats({ section, context })
+  }
+  if (section.type === 'logo-wall') {
+    return registry['logo-wall']({ section, context })
+  }
+  if (section.type === 'gallery') {
+    return registry.gallery({ section, context })
+  }
+  if (section.type === 'columns') {
+    return registry.columns({ section, context })
+  }
+  if (section.type === 'video') {
+    return registry.video({ section, context })
+  }
   return registry.newsletter({ section, context })
 }
 
@@ -795,28 +1354,28 @@ function StorefrontChrome({
       >
         Ir al contenido
       </a>
-      {definition.navigation.items.length > 0 ? (
-        <header className="border-b bg-background">
+      {definition.site.navigation.items.length > 0 ? (
+        <header className="border-b bg-background" data-storefront-chrome="navigation">
           <nav
-            className="mx-auto flex min-h-14 w-full max-w-6xl flex-wrap items-center gap-x-4 px-4"
+            className="mx-auto flex min-h-14 w-full max-w-(--storefront-content-width) flex-wrap items-center gap-x-4 px-4"
             aria-label="Navegación principal"
           >
-            {definition.navigation.items.map((item) => (
+            {definition.site.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 ? (
+      <footer className="border-t bg-muted/40" data-storefront-chrome="footer">
+        <div className="mx-auto flex w-full max-w-(--storefront-content-width) flex-col gap-4 px-4 py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+          {definition.site.footer.text ? <p>{definition.site.footer.text}</p> : null}
+          {definition.site.footer.items.length > 0 ? (
             <nav
               className="flex flex-wrap gap-x-3"
               aria-label="Navegación del pie"
             >
-              {definition.footer.items.map((item) => (
+              {definition.site.footer.items.map((item) => (
                 <StorefrontNavigationLink key={item.id} item={item} />
               ))}
             </nav>
@@ -829,6 +1388,7 @@ function StorefrontChrome({
 
 export function DefinitionSections({
   definition,
+  pageId,
   data = {},
   locale = 'es-PE',
   currency = 'PEN',
@@ -840,15 +1400,26 @@ export function DefinitionSections({
     locale,
     currency,
     assets,
+    styles: definition.site.styles,
   }
 
-  return definition.sections
-    .filter((section) => section.enabled)
-    .map((section) => (
-      <Fragment key={section.id}>
-        {renderStorefrontSection(section, registry, context)}
-      </Fragment>
-    ))
+  const page = storefrontPageFor(definition, pageId)
+  if (!page) return null
+
+  return (
+    <>
+      <StorefrontCustomStyle
+        css={storefrontPageCss(page, definition.site.styles)}
+      />
+      {page.sections
+        .filter((section) => section.enabled)
+        .map((section) => (
+          <Fragment key={section.id}>
+            {renderStorefrontSection(section, registry, context)}
+          </Fragment>
+        ))}
+    </>
+  )
 }
 
 export function DefinitionShell({
@@ -869,10 +1440,13 @@ export function DefinitionShell({
         'storefront-definition min-h-full bg-background text-foreground antialiased',
         className,
       )}
-      style={themeStyle(definition.theme)}
+      style={themeStyle(definition.site.theme)}
       data-storefront-definition-version={definition.version}
       data-storefront-definition-revision={definition.revision}
     >
+      <StorefrontCustomStyle
+        css={scopeStorefrontCss(definition.site.css, STOREFRONT_SITE_CSS_SCOPE)}
+      />
       {content}
     </div>
   )
@@ -880,6 +1454,7 @@ export function DefinitionShell({
 
 export function DefinitionRenderer({
   definition,
+  pageId,
   data,
   locale,
   currency,
@@ -895,6 +1470,7 @@ export function DefinitionRenderer({
     >
       <DefinitionSections
         definition={definition}
+        pageId={pageId}
         data={data}
         locale={locale}
         currency={currency}