@cogenta/theme-entreprise 1.1.2 → 1.3.3

package/src/render/blocks/embed.ts

@@ -1,22 +1,21 @@
 import type { EmbedBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
  * 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>`, 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.
+ * When `consentRequired` is true the block renders a notice and an outbound
+ * link: no `<iframe>`, no `<script>`, no preconnect, no poster fetched from
+ * the provider. An embed that "only" loads a thumbnail has already handed
+ * the visitor's IP address to the provider, which is the 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. Until that layer exists, the card is the honest
- * rendering — it says what would be loaded and lets the visitor go there
- * deliberately. The card is framed the same way `mediaFigure` and `gallery`
- * are (a thin bordered plate with a small provider tag), so the three read
- * as one family of "media placeholder" treatments.
+ * The theme ships no consent button, because it ships no JavaScript:
+ * granting consent is a site-wide decision for the consent layer, not a
+ * block. The notice is the honest rendering until that layer exists. It
+ * holds the same eight central columns and the same ratio the frame would,
+ * so the page does not reflow when consent is later granted.
  */
 
 /** `null` means "this provider has no embeddable frame we trust". */
@@ -28,7 +27,7 @@ function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string |
   switch (provider) {
     case 'youtube': {
       // `youtube-nocookie.com` is the privacy-preserving host, and the only
-      // one this theme will point an iframe at.
+      // one this theme points an iframe at.
       const id = url.hostname.endsWith('youtu.be')
         ? segments[0]
         : (url.searchParams.get('v') ?? segments[1])
@@ -52,17 +51,17 @@ function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string |
       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.
+      // theme does not load. The notice is the rendering.
       return null
   }
 }
 
-function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+function consentNotice(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
   return h(
     'div',
-    { class: 'cg-embed__placeholder' },
+    { class: 'cg-embed__notice' },
     h('p', { class: 'cg-embed__provider', 'aria-hidden': 'true' }, block.provider),
-    h('p', { class: 'cg-embed__notice' }, reason),
+    h('p', { class: 'cg-embed__reason' }, reason),
     h(
       'a',
       {
@@ -77,39 +76,43 @@ function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): Htm
 
 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.
+  // 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(
+  return section(
     'div',
+    'embed',
+    'cg-embed',
     {
-      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,
-          // 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,
-        }),
+    'div',
+    h(
+      'div',
+      { class: 'cg-embed__frame-box' },
+      source === null
+        ? consentNotice(
+            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).
+            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

@@ -7,23 +7,20 @@ import {
   type RenderContext,
   renderRichText,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `<details>`/`<summary>` rather than a scripted accordion: expanding,
- * keyboard operation, and the expanded state announced to assistive
- * technology all come from the browser, at zero bytes of JavaScript.
- *
- * Each row carries a numeral (`01`, `02`, …) ahead of the question — the
- * same indexing language `featureGrid` uses — and the disclosure affordance
- * is a plus/minus mark drawn from two CSS borders, not an icon font.
+ * Two columns: the title holds the left four and stays in view while the
+ * questions, on the right eight, scroll past it. Each question is a row
+ * between hairlines with a plus that turns into a minus when open.
  *
- * The question is plain text inside `<summary>`, never a heading: a heading
- * nested in a `<summary>` renders inconsistently across screen readers, and
- * the questions are already reachable as a list under the block's own
- * heading.
+ * `<details>`/`<summary>` rather than a scripted accordion: expanding,
+ * keyboard operation and the expanded state announced to assistive
+ * technology all come from the browser, at zero bytes of JavaScript. The
+ * question is plain text inside `<summary>`, never a heading: a heading
+ * nested in a `<summary>` is announced inconsistently across screen readers.
  */
-function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
-  const number = String(index + 1).padStart(2, '0')
+function renderItem(item: FaqItem, ctx: RenderContext): HtmlElement {
   return h(
     'li',
     { class: 'cg-faq__item' },
@@ -33,8 +30,8 @@ function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlEleme
       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('span', { class: 'cg-toggle-mark', 'aria-hidden': 'true' }),
       ),
       h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
     ),
@@ -42,20 +39,27 @@ function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlEleme
 }
 
 export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-faq', 'data-block': 'faq' },
+    'faq',
+    'cg-faq',
+    { 'data-titled': block.title === undefined ? 'false' : 'true' },
+    'div',
     block.title === undefined
       ? null
-      : heading(
-          blockHeadingTag('faq') ?? 'h2',
-          { class: 'cg-faq__title', 'data-field': 'title' },
-          block.title,
+      : h(
+          'div',
+          { class: 'cg-head cg-head--aside cg-head--sticky' },
+          heading(
+            blockHeadingTag('faq') ?? 'h2',
+            { class: 'cg-head__title', 'data-field': 'title' },
+            block.title,
+          ),
         ),
     h(
       'ul',
       { class: 'cg-faq__items' },
-      block.items.map((item, index) => renderItem(item, ctx, index)),
+      block.items.map((item) => renderItem(item, ctx)),
     ),
   )
 }

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

@@ -8,66 +8,73 @@ import {
   href,
   nestedHeadingTag,
   type RenderContext,
-  renderIcon,
 } from '@cogenta/theme-kit'
+import { arrow, ordinal, section } from '../layout.js'
 
 /**
- * This theme's "our services" section — a card grid, each card led by a
- * real inline glyph (`renderIcon`) inside a flat, accent-tinted square, the
- * B2B "capability card" register a consultancy or software vendor's
- * services page uses, replacing the numbered ledger rows this block used to
- * render (a plain list read as a table of contents, not as a services
- * pitch a visitor scans in one pass).
+ * A numbered list of capabilities, ruled by hairlines: `01` to `06`, each
+ * row a name in the display serif and a short description beside it.
  *
- * Capped at three columns on a wide screen — a six-item grid staying 3×2
- * rather than drifting to four columns plus two orphans, the same
- * discipline `theme-saas`'s own `featureGrid` holds.
+ * This is how a consultancy presents its practices, and deliberately not a
+ * grid of identical cards with icon tiles. The block's own title holds the
+ * left four columns (and stays in view while the list scrolls past it on a
+ * wide screen); the list takes the right eight.
  *
- * As in every other theme, the item's title carries the link so the link's
- * accessible name is the feature's own name (WCAG 2.4.4) — the block has no
- * separate label field to write a "learn more" with anyway.
+ * `icon` is stored by contract B as a symbol name, and this theme chooses not
+ * to draw it: in a numbered, typographic list an icon is decoration, and the
+ * ordinal already does the work of marking each row.
+ *
+ * A row with a link is clickable as a whole, but the link itself stays on the
+ * item's title, so its accessible name is the practice's own name
+ * (WCAG 2.4.4).
  */
-function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+function renderItem(
+  item: FeatureItem,
+  index: number,
+  ctx: RenderContext,
+  tag: HeadingTag,
+): HtmlElement {
   const title =
     item.link === undefined
-      ? heading(tag, { class: 'cg-service__title' }, item.title)
+      ? heading(tag, { class: 'cg-practice__title' }, item.title)
       : heading(
           tag,
-          { class: 'cg-service__title' },
-          h('a', { class: 'cg-service__link', href: href(ctx, item.link) }, item.title),
+          { class: 'cg-practice__title' },
+          h('a', { class: 'cg-practice__link', href: href(ctx, item.link) }, item.title, arrow()),
         )
   return h(
     'li',
-    { class: 'cg-service' },
-    item.icon === undefined
-      ? null
-      : h(
-          'span',
-          { class: 'cg-service__icon', 'data-icon': item.icon, 'aria-hidden': 'true' },
-          renderIcon(item.icon),
-        ),
+    { class: 'cg-practice', 'data-linked': item.link === undefined ? undefined : 'true' },
+    h('span', { class: 'cg-practice__index', 'aria-hidden': 'true' }, ordinal(index)),
     title,
-    item.text === undefined ? null : h('p', { class: 'cg-service__text' }, item.text),
+    item.text === undefined ? null : h('p', { class: 'cg-practice__text' }, item.text),
   )
 }
 
 export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
   const hasTitle = block.title !== undefined
   const itemTag = nestedHeadingTag('featureGrid', hasTitle)
-  return h(
+  return section(
     'section',
-    { class: 'cg-services', 'data-block': 'featureGrid' },
+    'featureGrid',
+    'cg-practices',
+    { 'data-titled': hasTitle ? 'true' : 'false' },
+    'div',
     hasTitle
-      ? heading(
-          blockHeadingTag('featureGrid') ?? 'h2',
-          { class: 'cg-services__title', 'data-field': 'title' },
-          block.title ?? '',
+      ? h(
+          'div',
+          { class: 'cg-head cg-head--aside' },
+          heading(
+            blockHeadingTag('featureGrid') ?? 'h2',
+            { class: 'cg-head__title', 'data-field': 'title' },
+            block.title ?? '',
+          ),
         )
       : null,
     h(
-      'ul',
-      { class: 'cg-services__items' },
-      block.items.map((item) => renderItem(item, ctx, itemTag)),
+      'ol',
+      { class: 'cg-practices__items' },
+      block.items.map((item, index) => renderItem(item, index, ctx, itemTag)),
     ),
   )
 }

package/src/render/blocks/gallery.ts

@@ -1,37 +1,42 @@
 import type { GalleryBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * Ships **no JavaScript**. A scroll-snapping list 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 any styling loads.
+ * Photographs on the grid, with no frames and no rounded plates.
  *
- * Each tile is a thin-bordered plate rather than a shadowed, fully-rounded
- * card — consistent with the framed treatment `mediaFigure` and `embed`
- * use, so a page mixing all three reads as one system.
+ * `grid` crops every picture to the same 4:3 ratio in rows of three (two for
+ * a pair), so a set reads as a considered series. `masonry` keeps each
+ * picture's own proportions in three flowing columns. `carousel` is a
+ * scroll-snapping row: touch, trackpad and arrow keys all work because the
+ * list is focusable and labelled, with no JavaScript, no auto-advance
+ * (WCAG 2.2.2) and no focus stolen from an off-screen slide.
  */
 export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
   const items = h(
     'ul',
-    { class: 'cg-gallery__items' },
+    {
+      class: 'cg-gallery__items',
+      'data-count': String(Math.min(block.items.length, 6)),
+    },
     block.items.map((item) =>
       h(
         'li',
         { class: 'cg-gallery__item' },
-        image(ctx, item.media, { sizes: '(min-width: 48rem) 22rem, 60vw' }),
+        image(ctx, item.media, {
+          className: 'cg-gallery__image',
+          sizes: '(min-width: 64rem) 30vw, (min-width: 40rem) 45vw, 85vw',
+        }),
       ),
     ),
   )
 
-  return h(
+  return section(
     'section',
-    {
-      class: 'cg-gallery',
-      'data-block': 'gallery',
-      'data-layout': block.layout,
-    },
+    'gallery',
+    'cg-gallery',
+    { 'data-layout': block.layout },
+    'div',
     block.layout === 'carousel'
       ? h(
           'div',

package/src/render/blocks/hero.ts

@@ -8,52 +8,64 @@ import {
   image,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * The hero carries the page's `h1` (contract B: `headingLevel: 'h1'`), so
- * `renderPage` relies on it to avoid emitting a second one.
+ * A typographic hero on the twelve-column grid.
  *
- * Structurally distinct from a centred/split "marketing" hero: the eyebrow,
- * title, subtitle and actions sit in a single left-aligned column with a
- * vertical accent rule (`cg-hero__mark`) standing beside the copy — the
- * "confident report cover" read the aesthetic direction asks for — while the
- * media sits in its own bordered frame with corner marks, never behind a
- * decorative gradient wash.
+ * The title leads, set large in the display serif across ten columns. Below
+ * it the page splits: the subtitle and the actions hold a narrow column on
+ * the left, and the photograph takes the right-hand seven columns, cropped
+ * frankly, with no frame, no shadow and no shape behind it. The eyebrow is
+ * a line of small capitals after a short rule, never a pill.
+ *
+ * With no media the subtitle moves to the right half of the grid instead, so
+ * a hero without a picture is still an asymmetric composition rather than a
+ * column of centred text.
+ *
+ * The hero carries the page's `h1` (contract B: `headingLevel: 'h1'`), which
+ * is why `renderPage` never adds a second one.
  */
 export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
   const tag = blockHeadingTag('hero') ?? 'h1'
-  return h(
+  const actions = actionList(ctx, block.actions, ctx.t('hero.actions'))
+  const hasAside = block.subtitle !== undefined || actions !== null
+  return section(
     'section',
-    { class: 'cg-hero', 'data-block': 'hero' },
+    'hero',
+    'cg-hero',
+    { 'data-media': block.media === undefined ? 'none' : 'present' },
+    'div',
     h(
       'div',
       { class: 'cg-hero__intro' },
-      h('span', { class: 'cg-hero__mark', 'aria-hidden': 'true' }),
-      h(
-        'div',
-        { class: 'cg-hero__copy' },
-        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.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),
     ),
+    hasAside
+      ? h(
+          'div',
+          { class: 'cg-hero__aside' },
+          block.subtitle === undefined
+            ? null
+            : h('p', { class: 'cg-hero__subtitle', 'data-field': 'subtitle' }, block.subtitle),
+          actions,
+        )
+      : null,
     block.media === undefined
       ? null
       : h(
           'div',
-          { class: 'cg-hero__frame' },
+          { class: 'cg-hero__media' },
           // The only image above the fold by construction, so the only one
-          // that must not be lazy — a lazy-loaded LCP element is a measured
-          // Lighthouse regression, not a theoretical one.
+          // that must not be lazy: a lazy-loaded LCP element is a measured
+          // Lighthouse regression.
           image(ctx, block.media, {
-            className: 'cg-hero__media',
+            className: 'cg-hero__image',
             loading: 'eager',
-            sizes: '(min-width: 64rem) 46vw, 100vw',
+            sizes: '(min-width: 64rem) 56vw, 100vw',
           }),
         ),
   )

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

@@ -1,36 +1,46 @@
 import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). The lighter-weight "as seen in" / social-proof 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` already falls back to when a link is absent.
+ * `blocks@2.0` (RFC 0001). The lighter "selected clients" line under a hero:
+ * the caption as a small-capital label in the left columns, then the marks
+ * in one even row across the rest, in greyscale, between two hairlines.
  *
- * Unlike `logos`'s held-back-until-hovered grayscale treatment, this strip
- * renders every mark at full colour and even weight in a single row — the
- * quieter, denser "as seen in" convention, distinct from the client-cards
- * feel `logos` is built for.
+ * The `<figcaption>` comes first in the figure so the label reads before the
+ * marks it introduces. No per-logo name or link: each image's own alt text
+ * (set once, in the media library) names it.
  */
 function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
   return h(
     'li',
-    { class: 'cg-logo-band__item' },
-    image(ctx, item.media, { className: 'cg-logo-band__image', variant: { fit: 'contain' } }),
+    { class: 'cg-logo-strip__item' },
+    image(ctx, item.media, {
+      className: 'cg-logo-strip__logo',
+      variant: { fit: 'contain' },
+      sizes: '12rem',
+    }),
   )
 }
 
 export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
+    'div',
+    'logoStrip',
+    'cg-logo-strip',
+    { 'data-count': String(Math.min(block.logos.length, 8)) },
     'figure',
-    { class: 'cg-logo-band', 'data-block': 'logoStrip' },
+    block.caption === undefined
+      ? null
+      : h(
+          'figcaption',
+          { class: 'cg-logo-strip__caption', 'data-field': 'caption' },
+          block.caption,
+        ),
     h(
       'ul',
-      { class: 'cg-logo-band__items' },
+      { class: 'cg-logo-strip__items' },
       block.logos.map((item) => renderItem(item, ctx)),
     ),
-    block.caption === undefined
-      ? null
-      : h('figcaption', { class: 'cg-logo-band__caption', 'data-field': 'caption' }, block.caption),
   )
 }

package/src/render/blocks/logos.ts

@@ -7,25 +7,24 @@ import {
   image,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * A "trusted by" client strip. 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: a link whose only content is an image with `alt` text is already
- * named.
+ * A client register: wordmarks in greyscale, each in its own cell of a ruled
+ * table, so a dozen marks of different shapes and weights still line up.
  *
- * The restrained, grayscale-leaning treatment (`filter: grayscale()` in the
- * stylesheet) is the "held back until hovered" client-logo language the
- * aesthetic direction calls for — a `filter`, never `grayscale` baked into
- * the media itself, since the underlying asset still arrives as a real
- * `<img>` from `image()`.
+ * Contract B says the organisation's name is the accessible name of the
+ * link, so the image carries it as `alt` when the media entity has none, and
+ * no visually hidden duplicate is added. Greyscale is a `filter` in the
+ * stylesheet, never baked into the media: the same asset still renders in
+ * colour wherever a site owner uses it elsewhere.
  */
 function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
   const logo = image(ctx, item.media, {
     className: 'cg-clients__logo',
     altFrom: item.name,
     variant: { fit: 'contain' },
+    sizes: '12rem',
   })
   return h(
     'li',
@@ -41,20 +40,37 @@ function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
 }
 
 export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-clients', 'data-block': 'logos' },
+    'logos',
+    'cg-clients',
+    {},
+    'div',
     block.title === undefined
       ? null
-      : heading(
-          blockHeadingTag('logos') ?? 'h2',
-          { class: 'cg-clients__title', 'data-field': 'title' },
-          block.title,
+      : h(
+          'div',
+          { class: 'cg-head' },
+          heading(
+            blockHeadingTag('logos') ?? 'h2',
+            { class: 'cg-head__title', 'data-field': 'title' },
+            block.title,
+          ),
         ),
     h(
       'ul',
-      { class: 'cg-clients__items' },
+      { class: 'cg-clients__items', 'data-columns': String(columnsFor(block.items.length)) },
       block.items.map((item) => renderItem(item, ctx)),
     ),
   )
 }
+
+/**
+ * How many columns the register uses on a wide screen: four when the marks
+ * fill whole rows of four, otherwise three, so a register never ends on a
+ * row of empty ruled cells when a whole-row layout exists.
+ */
+function columnsFor(count: number): number {
+  if (count <= 3) return Math.max(count, 1)
+  return count % 4 === 0 ? 4 : 3
+}