@cogenta/theme-restaurant 0.3.2

package/src/render/blocks/collection-list.ts

@@ -0,0 +1,189 @@
+import type { CollectionListBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  buildCollectionListQuery,
+  type ContentEntry,
+  entryExcerpt,
+  entryImage,
+  entryTitle,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  nestedHeadingTag,
+  type RenderContext,
+  renderImageSource,
+} from '@cogenta/theme-kit'
+
+/**
+ * The only block of the seventeen that reads data at render time — contract
+ * B marks it `runtime: 'server'` for that reason. The read is *not* done
+ * here: `query` builds the request from the block's own fields
+ * (`@cogenta/theme-kit`'s `buildCollectionListQuery`, shared across every
+ * theme), the caller awaits `ctx.content.list(...)` before rendering starts,
+ * and this function stays a pure function of the entries handed to it.
+ */
+export { buildCollectionListQuery as query }
+
+/**
+ * The signature piece of this theme: a `collectionList` on a `menu_item`-shaped
+ * collection is rendered as a real, priced menu, not a card grid.
+ *
+ * Contract B fixes no "menu" block (a menu of dishes is a `collectionList`
+ * grouped and formatted by the theme, per `docs/lots/L25-templates-pro.md`
+ * "pièges connus" — a new block would need an RFC). Grouping reads the
+ * entry's raw `category` field directly: a theme sees a whole entry, not
+ * only the fields contract A's system columns declare, and `category` is
+ * exactly the field the `restaurant` blueprint's `menu_item` collection
+ * names for this. An entry with no `category` (or a collection that never
+ * declares one) still renders, in one unlabelled group — grouping is a
+ * presentation choice, never a requirement placed back on the schema.
+ *
+ * `price` is read as a plain number (contract A's `f.number`, not a
+ * currency type — commerce's real money lives in contract E, untouched
+ * here) and formatted with `Intl.NumberFormat`'s `currency: 'EUR'`: the
+ * currency itself is not part of what a theme's `RenderContext` carries, so
+ * EUR is this theme's own documented demo default, exactly the way the
+ * `store` blueprint's own catalogue prices need no currency conversion
+ * either. A site that prices in another currency still gets a sensibly
+ * localised number; only the currency symbol would need a real per-site
+ * setting this contract does not yet offer.
+ */
+
+function priceLabel(entry: ContentEntry, ctx: RenderContext): string | null {
+  const raw = entry.price
+  if (typeof raw !== 'number' || !Number.isFinite(raw)) return null
+  try {
+    return new Intl.NumberFormat(ctx.locale, { style: 'currency', currency: 'EUR' }).format(raw)
+  } catch {
+    // An `Intl` failure (an exotic `ctx.locale`) is still a real number worth
+    // showing, just without locale-aware grouping/decimal marks.
+    return raw.toFixed(2)
+  }
+}
+
+function categoryOf(entry: ContentEntry): string {
+  const raw = entry.category
+  return typeof raw === 'string' && raw.trim() !== '' ? raw : ''
+}
+
+/** One level below `tag`, clamped at `h6` — the same rule `nestedHeadingTag` applies, extended one step further for the dish name under its category heading. */
+function stepDown(tag: HeadingTag): HeadingTag {
+  const level = Math.min(6, Number(tag.slice(1)) + 1)
+  return `h${level}` as HeadingTag
+}
+
+function renderDish(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const excerpt = entryExcerpt(entry)
+  const price = priceLabel(entry, ctx)
+  const photo = entryImage(entry, ctx, { width: 120, height: 120, fit: 'cover' })
+  return h(
+    'li',
+    { class: 'cg-menu__dish' },
+    photo === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-menu__dish-photo' },
+          renderImageSource(photo, { sizes: '5rem', className: 'cg-menu__dish-image' }),
+        ),
+    h(
+      'div',
+      { class: 'cg-menu__dish-body' },
+      h(
+        'div',
+        { class: 'cg-menu__dish-row' },
+        heading(tag, { class: 'cg-menu__dish-name' }, entryTitle(entry, ctx)),
+        // Leader and price are one wrapping unit (`cg-menu__dish-tail`): on
+        // a narrow screen where the name alone fills the row, the dotted
+        // leader must move to the next line together with the price it
+        // points to — never left dangling at the end of the name's line
+        // with the price it introduces stranded on a line of its own.
+        h(
+          'span',
+          { class: 'cg-menu__dish-tail' },
+          h('span', { class: 'cg-menu__dish-leader', 'aria-hidden': 'true' }),
+          price === null ? null : h('span', { class: 'cg-menu__dish-price' }, price),
+        ),
+      ),
+      excerpt === undefined ? null : h('p', { class: 'cg-menu__dish-description' }, excerpt),
+    ),
+  )
+}
+
+function renderGroup(
+  category: string,
+  entries: readonly ContentEntry[],
+  ctx: RenderContext,
+  groupTag: HeadingTag,
+): HtmlElement {
+  const dishTag = stepDown(groupTag)
+  return h(
+    'div',
+    { class: 'cg-menu__group' },
+    category === '' ? null : heading(groupTag, { class: 'cg-menu__group-title' }, category),
+    h(
+      'ul',
+      { class: 'cg-menu__dishes' },
+      entries.map((entry) => renderDish(entry, ctx, dishTag)),
+    ),
+  )
+}
+
+function groupByCategory(entries: readonly ContentEntry[]): readonly [string, ContentEntry[]][] {
+  const order: string[] = []
+  const groups = new Map<string, ContentEntry[]>()
+  for (const entry of entries) {
+    const key = categoryOf(entry)
+    const bucket = groups.get(key)
+    if (bucket === undefined) {
+      groups.set(key, [entry])
+      order.push(key)
+    } else {
+      bucket.push(entry)
+    }
+  }
+  return order.map((key) => [key, groups.get(key) as ContentEntry[]])
+}
+
+export function renderCollectionList(
+  block: CollectionListBlock,
+  ctx: RenderContext,
+  entries: readonly ContentEntry[],
+): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const groupTag = nestedHeadingTag('collectionList', hasTitle)
+  const groups = groupByCategory(entries)
+  const body =
+    entries.length === 0
+      ? h('p', { class: 'cg-menu__empty' }, ctx.t('collection.empty'))
+      : h(
+          'div',
+          { class: 'cg-menu__groups' },
+          groups.map(([category, items]) => renderGroup(category, items, ctx, groupTag)),
+        )
+
+  return h(
+    'section',
+    { class: 'cg-menu', 'data-block': 'collectionList', 'data-layout': block.layout },
+    hasTitle
+      ? heading(
+          blockHeadingTag('collectionList') ?? 'h2',
+          { class: 'cg-menu__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-menu__viewport',
+            role: 'region',
+            'aria-label': block.title ?? ctx.t('collection.carousel'),
+            tabindex: '0',
+          },
+          body,
+        )
+      : body,
+  )
+}

package/src/render/blocks/cta.ts

@@ -0,0 +1,31 @@
+import type { CtaBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * "Book now / Call us" — a centred, dark, full-bleed close, mirroring the
+ * hero's own centred treatment so the page opens and closes on the same
+ * note. `--cg-scrim` gives the panel its depth; nothing here is a literal
+ * colour (R3/isolation test).
+ */
+export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-close', 'data-block': 'cta' },
+    heading(
+      blockHeadingTag('cta') ?? 'h2',
+      { class: 'cg-close__title', 'data-field': 'title' },
+      block.title,
+    ),
+    block.text === undefined
+      ? null
+      : h('p', { class: 'cg-close__text', 'data-field': 'text' }, block.text),
+    actionList(ctx, block.actions, block.title),
+  )
+}

package/src/render/blocks/embed.ts

@@ -0,0 +1,105 @@
+import type { EmbedBlock } from '@cogenta/blocks'
+import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Nothing here contacts a third party before the visitor has consented —
+ * this theme's own blueprint uses `provider: 'other'` for a map embed
+ * (`consentRequired: true`), which this renderer never has a trusted frame
+ * source for anyway, so it always renders the honest placeholder card below.
+ *
+ * When `consentRequired` is true (or the provider/URL cannot be turned into
+ * a trusted frame source) the block renders a self-contained card and an
+ * outbound link — no `<iframe>`, no `<script>`, no preconnect. An embed
+ * that "only" loads a thumbnail has already handed the visitor's IP address
+ * and a cookie to the provider, which is the exact transfer consent was
+ * supposed to gate. The theme ships no consent *button*, because it ships
+ * no JavaScript: granting consent is a site-wide decision that belongs to
+ * the consent layer, not to a block.
+ */
+
+/** `null` means "this provider has no embeddable frame we trust". */
+function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string | null {
+  const url = URL.parse(rawUrl)
+  if (url === null) return null
+  const segments = url.pathname.split('/').filter((segment) => segment !== '')
+
+  switch (provider) {
+    case 'youtube': {
+      const id = url.hostname.endsWith('youtu.be')
+        ? segments[0]
+        : (url.searchParams.get('v') ?? segments[1])
+      return id === undefined || id === null ? null : `https://www.youtube-nocookie.com/embed/${id}`
+    }
+    case 'vimeo': {
+      const id = segments.find((segment) => /^\d+$/.test(segment))
+      return id === undefined ? null : `https://player.vimeo.com/video/${id}`
+    }
+    case 'dailymotion': {
+      const id = url.hostname.endsWith('dai.ly') ? segments[0] : segments[segments.length - 1]
+      return id === undefined ? null : `https://geo.dailymotion.com/player.html?video=${id}`
+    }
+    case 'spotify': {
+      const [kind, id] = segments
+      return kind === undefined || id === undefined
+        ? null
+        : `https://open.spotify.com/embed/${kind}/${id}`
+    }
+    case 'soundcloud':
+      return `https://w.soundcloud.com/player/?url=${encodeURIComponent(rawUrl)}`
+    default:
+      // bluesky, mastodon, other (a map link, in this theme's own
+      // blueprint): the link card is the rendering.
+      return null
+  }
+}
+
+function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-embed__placeholder' },
+    h('p', { class: 'cg-embed__provider', 'aria-hidden': 'true' }, block.provider),
+    h('p', { class: 'cg-embed__notice' }, reason),
+    h(
+      'a',
+      {
+        class: 'cg-embed__link',
+        href: ctx.link(block.url),
+        rel: 'noopener noreferrer nofollow',
+      },
+      ctx.t('embed.open', { provider: block.provider }),
+    ),
+  )
+}
+
+export function renderEmbed(block: EmbedBlock, ctx: RenderContext): HtmlElement {
+  const source = block.consentRequired ? null : frameSource(block.provider, block.url)
+  const ratio = aspectRatio(block.ratio) ?? '16 / 9'
+
+  return h(
+    'div',
+    {
+      class: 'cg-embed',
+      'data-block': 'embed',
+      'data-provider': block.provider,
+      'data-consent': block.consentRequired ? 'required' : 'not-required',
+      style: `--cg-ratio:${ratio}`,
+    },
+    source === null
+      ? consentCard(
+          block,
+          ctx,
+          block.consentRequired
+            ? ctx.t('embed.consentRequired', { provider: block.provider })
+            : ctx.t('embed.unsupported', { provider: block.provider }),
+        )
+      : h('iframe', {
+          class: 'cg-embed__frame',
+          src: source,
+          title: ctx.t('embed.title', { provider: block.provider }),
+          loading: 'lazy',
+          referrerpolicy: 'strict-origin-when-cross-origin',
+          allow: 'accelerometer; clipboard-write; encrypted-media; picture-in-picture; fullscreen',
+          allowfullscreen: true,
+        }),
+  )
+}

package/src/render/blocks/faq.ts

@@ -0,0 +1,53 @@
+import type { FaqBlock, FaqItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * `<details>`/`<summary>` — zero bytes of JavaScript. Kept visually distinct
+ * from `accordion` (this theme's own "Hours & location"): each question
+ * carries a small serif numeral rather than the plus/minus mark, the
+ * "questions before you book" register of a restaurant's own FAQ.
+ */
+function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
+  const number = String(index + 1).padStart(2, '0')
+  return h(
+    'li',
+    { class: 'cg-faq__item' },
+    h(
+      'details',
+      { class: 'cg-faq__details' },
+      h(
+        'summary',
+        { class: 'cg-faq__question' },
+        h('span', { class: 'cg-faq__index', 'aria-hidden': 'true' }, number),
+        h('span', { class: 'cg-faq__question-text' }, item.question),
+      ),
+      h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-faq', 'data-block': 'faq' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('faq') ?? 'h2',
+          { class: 'cg-faq__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-faq__items' },
+      block.items.map((item, index) => renderItem(item, ctx, index)),
+    ),
+  )
+}

package/src/render/blocks/feature-grid.ts

@@ -0,0 +1,61 @@
+import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  href,
+  nestedHeadingTag,
+  type RenderContext,
+  renderIcon,
+} from '@cogenta/theme-kit'
+
+/**
+ * A row of three centred columns, each topped by a thin circular icon mark —
+ * the "how we cook" / "what makes this kitchen" convention, never a boxed
+ * feature card.
+ */
+function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const title =
+    item.link === undefined
+      ? heading(tag, { class: 'cg-craft__title' }, item.title)
+      : heading(
+          tag,
+          { class: 'cg-craft__title' },
+          h('a', { class: 'cg-craft__link', href: href(ctx, item.link) }, item.title),
+        )
+  const icon =
+    item.icon === undefined
+      ? null
+      : (renderIcon(item.icon, { className: 'cg-craft__glyph' }) ??
+        h('span', { class: 'cg-craft__mark-fallback', 'data-icon': item.icon }))
+  return h(
+    'li',
+    { class: 'cg-craft__item' },
+    icon === null ? null : h('span', { class: 'cg-craft__mark', 'aria-hidden': 'true' }, icon),
+    title,
+    item.text === undefined ? null : h('p', { class: 'cg-craft__text' }, item.text),
+  )
+}
+
+export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-craft', 'data-block': 'featureGrid' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('featureGrid') ?? 'h2',
+          { class: 'cg-craft__title-heading', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-craft__items' },
+      block.items.map((item) => renderItem(item, ctx, itemTag)),
+    ),
+  )
+}

package/src/render/blocks/gallery.ts

@@ -0,0 +1,40 @@
+import type { GalleryBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Ships **no JavaScript**. `layout: 'masonry'` (the dining-room gallery this
+ * theme's own blueprint seeds) is a CSS multi-column flow — `column-count`
+ * with `break-inside: avoid` on each tile — which needs no measurement pass
+ * a script would otherwise have to do; `grid`/`carousel` keep the same
+ * zero-JS scroll-snapping list every other layout in this theme uses.
+ */
+export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
+  const items = h(
+    'ul',
+    { class: 'cg-gallery__items' },
+    block.items.map((item) =>
+      h(
+        'li',
+        { class: 'cg-gallery__item' },
+        image(ctx, item.media, { sizes: '(min-width: 48rem) 22rem, 60vw' }),
+      ),
+    ),
+  )
+
+  return h(
+    'section',
+    { class: 'cg-gallery', 'data-block': 'gallery', 'data-layout': block.layout },
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-gallery__viewport',
+            role: 'region',
+            'aria-label': ctx.t('gallery.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/hero.ts

@@ -0,0 +1,58 @@
+import type { HeroBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The full-bleed dining-room hero: the media (when present) fills the whole
+ * band, a gradient scrim sits between it and the copy so the centred text
+ * stays legible over a photo of any tone, and the eyebrow/title/subtitle are
+ * centred — the "elegant restaurant homepage" convention (Divi/Astra
+ * "Restaurant") rather than the left-aligned marketing hero the other
+ * built-in themes use.
+ *
+ * The scrim is a CSS gradient composed from `--cg-scrim` (itself derived
+ * from the skin's own ink, see `tokens.css`), never a literal colour: a
+ * skin with a lighter ink still gets a scrim tuned to it.
+ */
+export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
+  const tag = blockHeadingTag('hero') ?? 'h1'
+  return h(
+    'section',
+    {
+      class: 'cg-hero',
+      'data-block': 'hero',
+      'data-has-media': block.media === undefined ? 'false' : 'true',
+    },
+    block.media === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-hero__media' },
+          image(ctx, block.media, {
+            className: 'cg-hero__image',
+            loading: 'eager',
+            sizes: '100vw',
+          }),
+          h('div', { class: 'cg-hero__scrim', 'aria-hidden': 'true' }),
+        ),
+    h(
+      'div',
+      { class: 'cg-hero__body' },
+      block.eyebrow === undefined
+        ? null
+        : h('p', { class: 'cg-hero__eyebrow', 'data-field': 'eyebrow' }, block.eyebrow),
+      heading(tag, { class: 'cg-hero__title', 'data-field': 'title' }, block.title),
+      block.subtitle === undefined
+        ? null
+        : h('p', { class: 'cg-hero__subtitle', 'data-field': 'subtitle' }, block.subtitle),
+      actionList(ctx, block.actions, ctx.t('hero.actions')),
+    ),
+  )
+}

package/src/render/blocks/logo-strip.ts

@@ -0,0 +1,35 @@
+import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). The lighter-weight "as seen in" row next to
+ * `logos`: no per-logo name or link, so no accessible-name field to
+ * require — each image's own alt text (set once, in the media library)
+ * names it, exactly as `logos` falls back to when a link is absent.
+ */
+function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-press-strip__item' },
+    image(ctx, item.media, { className: 'cg-press-strip__image', variant: { fit: 'contain' } }),
+  )
+}
+
+export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'figure',
+    { class: 'cg-press-strip', 'data-block': 'logoStrip' },
+    h(
+      'ul',
+      { class: 'cg-press-strip__items' },
+      block.logos.map((item) => renderItem(item, ctx)),
+    ),
+    block.caption === undefined
+      ? null
+      : h(
+          'figcaption',
+          { class: 'cg-press-strip__caption', 'data-field': 'caption' },
+          block.caption,
+        ),
+  )
+}

package/src/render/blocks/logos.ts

@@ -0,0 +1,53 @@
+import type { LogoItem, LogosBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * "Featured in" / press mentions, held back to a quiet grayscale until
+ * hovered — contract B says the organisation's name **is** the accessible
+ * name of the link, so the logo image carries it as `alt` text when the
+ * media entity has none, and no visually hidden duplicate is added.
+ */
+function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
+  const logo = image(ctx, item.media, {
+    className: 'cg-press__logo',
+    altFrom: item.name,
+    variant: { fit: 'contain' },
+  })
+  return h(
+    'li',
+    { class: 'cg-press__item' },
+    item.url === undefined
+      ? logo
+      : h(
+          'a',
+          { class: 'cg-press__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
+          logo,
+        ),
+  )
+}
+
+export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-press', 'data-block': 'logos' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('logos') ?? 'h2',
+          { class: 'cg-press__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-press__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/media-figure.ts

@@ -0,0 +1,39 @@
+import type { MediaFigureBlock } from '@cogenta/blocks'
+import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * A thin hairline frame around the image, a small italic caption beneath —
+ * the restrained, "printed menu insert" treatment consistent with this
+ * theme's gallery and embed placeholder.
+ */
+export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
+  const ratio = aspectRatio(block.ratio)
+  const hasCaption = block.caption !== undefined || block.credit !== undefined
+  return h(
+    'figure',
+    {
+      class: 'cg-plate',
+      'data-block': 'mediaFigure',
+      'data-align': block.align ?? 'center',
+      style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
+    },
+    h(
+      'div',
+      { class: 'cg-plate__frame' },
+      image(ctx, block.media, {
+        className: 'cg-plate__media',
+        sizes: '(min-width: 48rem) 42rem, 100vw',
+      }),
+    ),
+    hasCaption
+      ? h(
+          'figcaption',
+          { class: 'cg-plate__caption' },
+          block.caption,
+          block.credit === undefined
+            ? null
+            : h('span', { class: 'cg-plate__credit', 'data-field': 'credit' }, block.credit),
+        )
+      : null,
+  )
+}