@cogenta/theme-portfolio 1.1.2

package/src/index.ts

@@ -0,0 +1,19 @@
+// The shared contract D primitives every theme package implements against —
+// re-exported so a consumer of this package never has to know they live in
+// `@cogenta/theme-kit` to use them alongside this theme's own blocks.
+export * from '@cogenta/theme-kit'
+export * from './render/blocks/collection-list.js'
+export * from './render/blocks/cta.js'
+export * from './render/blocks/embed.js'
+export * from './render/blocks/faq.js'
+export * from './render/blocks/feature-grid.js'
+export * from './render/blocks/gallery.js'
+export * from './render/blocks/hero.js'
+export * from './render/blocks/logos.js'
+export * from './render/blocks/media-figure.js'
+export * from './render/blocks/prose.js'
+export * from './render/blocks/quote.js'
+export * from './render/blocks/stats.js'
+export * from './render/chrome.js'
+export * from './render/render-block.js'
+export * from './render/term-archive.js'

package/src/render/blocks/accordion.ts

@@ -0,0 +1,64 @@
+import type { AccordionBlock, AccordionItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * Same zero-JS mechanism as `faq.ts` — `<details>`/`<summary>` gives
+ * expand/collapse, keyboard operation and the `[open]` state to assistive
+ * technology for free — but with markup and class names of its own
+ * (`cg-accordion__*`, never `cg-faq__*`) so the two blocks can diverge
+ * visually later without one quietly dragging the other along. RFC 0001
+ * treats them as two distinct editorial intents sharing one data shape; this
+ * package keeps that distinction in its markup too.
+ *
+ * The marker here is a plain rotating caret rather than `faq.ts`'s plus/
+ * cross, and questions sit in a numbered ledger the same way `logos.ts`'s
+ * items do — an accordion reads as an indexed list of topics, not a wall of
+ * frequently-asked questions.
+ */
+function renderItem(item: AccordionItem, ctx: RenderContext, index: number): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-accordion__item' },
+    h(
+      'details',
+      { class: 'cg-accordion__details' },
+      h(
+        'summary',
+        { class: 'cg-accordion__question' },
+        h(
+          'span',
+          { class: 'cg-accordion__index', 'aria-hidden': 'true' },
+          String(index + 1).padStart(2, '0'),
+        ),
+        h('span', { class: 'cg-accordion__label' }, item.question),
+      ),
+      h('div', { class: 'cg-accordion__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderAccordion(block: AccordionBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-accordion', 'data-block': 'accordion' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('accordion') ?? 'h2',
+          { class: 'cg-accordion__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-accordion__items' },
+      block.items.map((item, index) => renderItem(item, ctx, index)),
+    ),
+  )
+}

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

@@ -0,0 +1,181 @@
+import type { CollectionListBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  buildCollectionListQuery,
+  type ContentEntry,
+  entryDate,
+  entryExcerpt,
+  entryHref,
+  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
+ * (`@cogenta/theme-kit`'s `buildCollectionListQuery`, shared across every
+ * theme since it derives purely from the block's own fields), the caller
+ * awaits `ctx.content.list(...)` before rendering starts, and this function
+ * stays a pure function of the entries it is handed.
+ *
+ * `list` keeps this theme's original register — a numbered mono index, the
+ * title set at feature-headline scale, the date pushed to the far edge —
+ * unchanged since L23. `grid`/`carousel` (`theme@1.4`) retile the same
+ * entries into full-bleed project cards instead: a cover (`entryImage`,
+ * 4:3), the title in display type, and — read straight off the raw
+ * `ContentEntry` this block's entries already are, never invented — the
+ * entry's own `role`/`year` fields as a meta line when a collection happens
+ * to declare them (the `portfolio` blueprint's `project` does; any other
+ * collection simply shows no meta line).
+ */
+export { buildCollectionListQuery as query }
+
+function rawText(entry: ContentEntry, field: string): string | undefined {
+  const value = entry[field]
+  return typeof value === 'string' && value.trim() !== '' ? value : undefined
+}
+
+/** `role`/`year`, read straight off the entry — the "raw field" meta line a grid card shows when the collection behind it has them. */
+function renderCardMeta(entry: ContentEntry): HtmlElement | null {
+  const role = rawText(entry, 'role')
+  const year = rawText(entry, 'year')
+  if (role === undefined && year === undefined) return null
+  return h(
+    'p',
+    { class: 'cg-collection__meta' },
+    role === undefined ? null : h('span', { class: 'cg-collection__meta-role' }, role),
+    year === undefined ? null : h('span', { class: 'cg-collection__meta-year' }, year),
+  )
+}
+
+function renderCard(
+  entry: ContentEntry,
+  ctx: RenderContext,
+  tag: HeadingTag,
+  index: number,
+): HtmlElement {
+  const cover = entryImage(entry, ctx, { width: 900, height: 675, fit: 'cover' })
+  return h(
+    'li',
+    { class: 'cg-entry cg-entry--card' },
+    h(
+      'article',
+      { class: 'cg-entry__body' },
+      h(
+        'a',
+        { class: 'cg-entry__cover-link', href: entryHref(entry, ctx), tabindex: -1 },
+        cover === undefined
+          ? h('span', { class: 'cg-entry__cover-empty', 'aria-hidden': 'true' })
+          : renderImageSource(cover, {
+              className: 'cg-entry__cover',
+              sizes: '(min-width: 80rem) 50vw, 100vw',
+            }),
+      ),
+      h(
+        'span',
+        { class: 'cg-entry__index', 'aria-hidden': 'true' },
+        String(index + 1).padStart(2, '0'),
+      ),
+      heading(
+        tag,
+        { class: 'cg-entry__title' },
+        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      renderCardMeta(entry),
+    ),
+  )
+}
+
+function renderRow(
+  entry: ContentEntry,
+  ctx: RenderContext,
+  tag: HeadingTag,
+  index: number,
+): HtmlElement {
+  const date = entryDate(entry)
+  const excerpt = entryExcerpt(entry)
+  return h(
+    'li',
+    { class: 'cg-entry' },
+    h(
+      'article',
+      { class: 'cg-entry__body' },
+      h(
+        'span',
+        { class: 'cg-entry__index', 'aria-hidden': 'true' },
+        String(index + 1).padStart(2, '0'),
+      ),
+      heading(
+        tag,
+        { class: 'cg-entry__title' },
+        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-entry__date', datetime: date },
+            // Formatted in the rendered locale rather than left as an ISO
+            // string: the machine-readable form is already in `datetime`.
+            new Intl.DateTimeFormat(ctx.locale, { dateStyle: 'long' }).format(new Date(date)),
+          ),
+      excerpt === undefined ? null : h('p', { class: 'cg-entry__excerpt' }, excerpt),
+    ),
+  )
+}
+
+export function renderCollectionList(
+  block: CollectionListBlock,
+  ctx: RenderContext,
+  entries: readonly ContentEntry[],
+): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const entryTag = nestedHeadingTag('collectionList', hasTitle)
+  const isTiled = block.layout === 'grid' || block.layout === 'carousel'
+  const renderItem = isTiled ? renderCard : renderRow
+  const items =
+    entries.length === 0
+      ? h('p', { class: 'cg-collection__empty' }, ctx.t('collection.empty'))
+      : h(
+          'ol',
+          { class: 'cg-collection__items' },
+          entries.map((entry, index) => renderItem(entry, ctx, entryTag, index)),
+        )
+
+  return h(
+    'section',
+    {
+      class: 'cg-block cg-collection',
+      'data-block': 'collectionList',
+      'data-layout': block.layout,
+    },
+    hasTitle
+      ? heading(
+          blockHeadingTag('collectionList') ?? 'h2',
+          { class: 'cg-collection__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-collection__viewport',
+            role: 'region',
+            'aria-label': block.title ?? ctx.t('collection.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/cta.ts

@@ -0,0 +1,37 @@
+import type { CtaBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The one panel on the page that inverts the palette — ink background, paper
+ * text — so it reads as a full stop rather than another section. The title
+ * is set at the same display scale as the hero: a call to action on a
+ * portfolio site is a second headline, not a footnote.
+ */
+export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-cta', 'data-block': 'cta' },
+    h(
+      'div',
+      { class: 'cg-cta__frame' },
+      heading(
+        blockHeadingTag('cta') ?? 'h2',
+        { class: 'cg-cta__title', 'data-field': 'title' },
+        block.title,
+      ),
+      block.text === undefined
+        ? null
+        : h('p', { class: 'cg-cta__text', 'data-field': 'text' }, block.text),
+      // `actions` is required and non-empty for a `cta`, so the list is always
+      // rendered; the null branch stays reachable only through invalid data.
+      actionList(ctx, block.actions, block.title),
+    ),
+  )
+}

package/src/render/blocks/embed.ts

@@ -0,0 +1,111 @@
+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.
+ *
+ * When `consentRequired` is true the block renders a self-contained card and
+ * an outbound link — no `<iframe>`, no script tag, no preconnect, no poster
+ * image fetched from the provider. 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. The card carries a bracketed provider tag in the
+ * mono register — `[ youtube ]` — the theme's own visual shorthand for
+ * "something external belongs here".
+ */
+
+/** `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': {
+      // `youtube-nocookie.com` is the privacy-preserving host, and the only one
+      // this theme will point an iframe at.
+      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 post embed is a script tag, which this
+      // theme does not load. 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('span', { class: 'cg-embed__tag' }, `[ ${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)
+  // Video providers are 16:9 unless the editor framed them otherwise; without a
+  // ratio the frame would collapse and shift the layout as it loads.
+  const ratio = aspectRatio(block.ratio) ?? '16 / 9'
+
+  return h(
+    'div',
+    {
+      class: 'cg-block 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,
+          // An iframe with no accessible name is announced as "frame" and
+          // nothing else. WCAG 4.1.2, and the single most common embed defect.
+          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,54 @@
+import type { FaqBlock, FaqItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * `<details>`/`<summary>` rather than a scripted accordion: expanding,
+ * keyboard operation, the expanded state announced to assistive technology
+ * and in-page search all come from the browser, at zero bytes of
+ * JavaScript.
+ *
+ * The question is plain text inside `<summary>`, not a heading: a heading
+ * nested in a summary is rendered inconsistently across screen readers, and
+ * the questions are already reachable as a list under the block's own
+ * heading. A CSS-drawn plus mark (rotated to a cross on `[open]`) replaces
+ * the native marker rather than a chevron — the theme's own vocabulary of
+ * shapes, kept purely visual.
+ */
+function renderItem(item: FaqItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-faq__item' },
+    h(
+      'details',
+      { class: 'cg-faq__details' },
+      h('summary', { class: 'cg-faq__question' }, h('span', {}, 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-block 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) => renderItem(item, ctx)),
+    ),
+  )
+}

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

@@ -0,0 +1,68 @@
+import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  href,
+  nestedHeadingTag,
+  type RenderContext,
+  renderIcon,
+} from '@cogenta/theme-kit'
+
+/**
+ * The item's title is the link, so the link's accessible name is the
+ * feature's name — a bare "learn more" repeated across a grid is the
+ * classic failure of WCAG 2.4.4, and the block carries no label field to
+ * write one anyway.
+ *
+ * `icon` names a symbol (`renderIcon`, `theme@1.4`) — drawn small and
+ * accent-coloured, decorative (`aria-hidden`, the title already carries the
+ * accessible name) — sitting *above* the running index numeral this theme
+ * has always drawn from a CSS counter, never replacing it: the numeral is
+ * this theme's own editorial device, the icon is the shared vocabulary's.
+ * An item with no icon, or one whose name this theme does not recognise,
+ * keeps exactly the pre-1.4 numeral-only card.
+ */
+function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const title =
+    item.link === undefined
+      ? heading(tag, { class: 'cg-feature__title' }, item.title)
+      : heading(
+          tag,
+          { class: 'cg-feature__title' },
+          h('a', { class: 'cg-feature__link', href: href(ctx, item.link) }, item.title),
+        )
+  const icon =
+    item.icon === undefined ? null : renderIcon(item.icon, { className: 'cg-feature__icon' })
+  return h(
+    'li',
+    { class: 'cg-feature', 'data-icon': item.icon },
+    icon,
+    h('span', { class: 'cg-feature__index', 'aria-hidden': 'true' }),
+    title,
+    item.text === undefined ? null : h('p', { class: 'cg-feature__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-block cg-features', 'data-block': 'featureGrid' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('featureGrid') ?? 'h2',
+          { class: 'cg-features__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-features__items' },
+      block.items.map((item) => renderItem(item, ctx, itemTag)),
+    ),
+  )
+}

package/src/render/blocks/gallery.ts

@@ -0,0 +1,55 @@
+import type { GalleryBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * The carousel ships **no JavaScript**. It is a scroll-snapping list, which
+ * gives touch swiping, trackpad scrolling and — because the list is focusable
+ * and labelled — arrow-key scrolling, with none of the failure modes of a
+ * scripted carousel: no auto-advance to fight (WCAG 2.2.2), no focus stolen
+ * from an off-screen slide, and it still works before hydration.
+ *
+ * Every tile carries a decorative index badge (`aria-hidden`, a CSS counter)
+ * — a numbered contact sheet rather than a plain image wall, and never a
+ * second name for the picture a screen reader would announce.
+ *
+ * A focusable scrollable region needs an accessible name, or a screen reader
+ * announces an unlabelled tab stop; that is WCAG 2.4.3 and 4.1.2 both.
+ */
+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' },
+        h('span', { class: 'cg-gallery__index', 'aria-hidden': 'true' }),
+        image(ctx, item.media, {
+          className: 'cg-gallery__image',
+          sizes: '(min-width: 48rem) 22rem, 60vw',
+        }),
+      ),
+    ),
+  )
+
+  return h(
+    'section',
+    {
+      class: 'cg-block 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,55 @@
+import type { HeroBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The hero carries the page's `h1` — contract B declares `headingLevel: 'h1'`
+ * for it, and `renderPage` relies on that to avoid emitting a second one.
+ *
+ * Structurally distinct from a centred banner: the eyebrow becomes a running
+ * index mark set in the mono register (`— eyebrow`), the title is a display
+ * headline that overflows its own column on wide screens (`blocks.css` gives
+ * it a fluid `clamp()`), and the media is offset into the title's own
+ * negative margin rather than sitting in a tidy second column — the overlap
+ * is what makes this a poster, not a slide.
+ */
+export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
+  const tag = blockHeadingTag('hero') ?? 'h1'
+  return h(
+    'section',
+    { class: 'cg-block cg-hero', 'data-block': 'hero' },
+    h(
+      'div',
+      { class: 'cg-hero__frame' },
+      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')),
+    ),
+    block.media === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-hero__media' },
+          // The only image on the page that is above the fold by construction,
+          // so the only one that must not be lazy: lazy-loading the LCP element
+          // is a measured Lighthouse regression, not a theoretical one.
+          image(ctx, block.media, {
+            className: 'cg-hero__image',
+            loading: 'eager',
+            sizes: '(min-width: 64rem) 46vw, 100vw',
+          }),
+        ),
+  )
+}

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

@@ -0,0 +1,38 @@
+import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Lighter-weight than `logos` on purpose (RFC 0001): no per-mark `name`/
+ * `url`, so no link, no accessible-name field to write, and no numbered
+ * ledger row — this is the quieter "as seen in" strip, marks set edge to
+ * edge with no dividers, desaturated exactly like `logos.ts`'s own marks
+ * (the theme's one visual language for "a logo not currently in focus").
+ * The image's own alt text (set once, in the media library) is what names
+ * each mark, same as `logos.ts` falls back to when a link is absent — never
+ * invented here, which is why `image` is called with no `altFrom`.
+ */
+function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-logostrip__item' },
+    image(ctx, item.media, {
+      className: 'cg-logostrip__image',
+      variant: { fit: 'contain' },
+    }),
+  )
+}
+
+export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'figure',
+    { class: 'cg-block cg-logostrip', 'data-block': 'logoStrip' },
+    h(
+      'ul',
+      { class: 'cg-logostrip__items' },
+      block.logos.map((item) => renderItem(item, ctx)),
+    ),
+    block.caption === undefined
+      ? null
+      : h('figcaption', { class: 'cg-logostrip__caption', 'data-field': 'caption' }, block.caption),
+  )
+}