sections/cookbook-header/
├── section.jsx
├── schema.json
└── styles.css

groups/header.json          # defaults do layout group
theme.json                  # layoutGroups.header → cookbook-header
config/settings.schema.json # color_schemes para color_scheme field

{
  "id": "menu",
  "type": "menu",
  "label": "Menu principal",
  "default": "main"
}

import { useStorefrontMenus, StorefrontNav } from '@corvex/runtime';

const menuHandle = settings.menu || 'main';
const { getMenu, loading } = useStorefrontMenus([menuHandle]);
const menu = getMenu(menuHandle);

<StorefrontNav
  menu={menu}
  emptyFallback={<span>{loading ? 'Carregando…' : 'Menu não publicado'}</span>}
/>

import { ColorSchemeScope, useThemeSettingsReader } from '@corvex/runtime';

const { settings: themeSettings, schema: themeSettingsSchema } =
  useThemeSettingsReader();

<ColorSchemeScope
  as="header"
  colorSchemeId={settings.colorScheme}
  themeSettings={themeSettings}
  themeSettingsSchema={themeSettingsSchema}
  style={{
    background: 'var(--color-background, #fff)',
    color: 'var(--color-text, #111827)',
  }}
>
  …
</ColorSchemeScope>

"layoutGroups": {
  "header": {
    "name": "Cabeçalho",
    "position": "before",
    "sections": ["cookbook-header"]
  }
}

import { useCorvexCart } from '@corvex/runtime';

const { itemCount } = useCorvexCart();

<a href="/cart">Carrinho ({itemCount})</a>