# Una splash page, un riquadro inserito e un bordo spezzato

> Una tempesta in due tavole: splash al vivo sotto una vignetta inserita, fascia al vivo su tre lati, un gabbiano oltre il bordo, una vignetta di sole didascalie.

- Versione HTML: https://postext.dev/it/cookbook/splash-inset-broken-border
- Ricetta Nº 147 · Fumetti e manga · Livello 2 (Intermedio) · Output: Canvas, PDF
- Generi: Fumetti
- Richiede postext ≥ 1.25.0, postext-pdf ≥ 1.25.0 · provata con 1.33.7, postext-pdf 1.33.7 il 2026-10-15
- Pagine: [1](https://postext.dev/cookbook/splash-inset-broken-border/it/p01.webp?v=26898fe5), [2](https://postext.dev/cookbook/splash-inset-broken-border/it/p02.webp?v=26898fe5)
- PDF: https://postext.dev/cookbook/splash-inset-broken-border/it/splash-inset-broken-border.pdf?v=26898fe5
- Apri nella Sandbox: https://postext.dev/it/sandbox#recipe=splash-inset-broken-border&lang=it (.postext: https://postext.dev/cookbook/splash-inset-broken-border/it/splash-inset-broken-border.postext)
- Ultimo aggiornamento: 2026-10-10
- Altre lingue: [en](https://postext.dev/en/cookbook/splash-inset-broken-border.md), [es](https://postext.dev/es/cookbook/splash-inset-broken-border.md), [ca](https://postext.dev/ca/cookbook/splash-inset-broken-border.md), [de](https://postext.dev/de/cookbook/splash-inset-broken-border.md), [fr](https://postext.dev/fr/cookbook/splash-inset-broken-border.md), [pt](https://postext.dev/pt/cookbook/splash-inset-broken-border.md), [zh](https://postext.dev/zh/cookbook/splash-inset-broken-border.md), [ja](https://postext.dev/ja/cookbook/splash-inset-broken-border.md), [ar](https://postext.dev/ar/cookbook/splash-inset-broken-border.md)

## In breve

Due pagine di un fumetto su una tempesta: un’immagine enorme che riempie tutta la prima pagina con una piccola immagine di una ragazza inserita dentro, poi una pagina in cui un gabbiano vola fuori dalla sua cornice.

## Che cosa comporrai

Due tavole della tempesta del *Faro di Porthcove*. La prima è una splash: un’unica immagine del faro nella tempesta esce da ogni bordo della pagina, con una piccola vignetta incorniciata di Maya alla finestra posata sul suo angolo inferiore. La seconda si apre con un’onda al vivo su tre lati; sotto, un gabbiano vola fuori dalla vignetta del guardiano attraverso il suo bordo, e una vignetta stretta senza immagine contiene due didascalie su un fondo blu notte. Il formato è quello di un comic book americano, 168 × 259 mm con 3 mm di abbondanza, e le pagine sono in dieci lingue.

**Questa ricetta risponde a:**

- Come porto al vivo una vignetta, o lascio che il disegno esca dal bordo della vignetta?

## La risposta breve

```js
// script.js, righe 44–64
// In the Markdown, the panel attributes do the work:
//   :::page{split="*" bleed}                 one panel, every edge bled off the page
//   ::panel{art=sp-maya-face inset="56 64 38 30"}   over the panel before it: x y w h in %
//   ::panel{art=sp-wave bleed="top start end"}      only the edges that touch the trim
//   ::panel{art=sp-tomas pop=sp-tomas-pop}   a transparent layer drawn over the border
//   ::panel{bg=night}                        no picture: captions on a palette colour
// A bleeding panel runs to the bleed box, 3 mm past the trim, and loses its border on those
// sides. The pop layer is cropped and placed exactly like the panel's picture, then drawn
// after the border without the panel's clip, so whatever it holds outside the cell shows.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) },
  panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8.5), color: col('ink'), inset: mm(2) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('lamp'), stroke: col('ink') },
    { id: 'inner', fill: col('paper'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('ink'), halo: pt(2) },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
```

## Ingredienti

**Insegna**

- [Riquadri sovrapposti, vignette al vivo e bordi spezzati](https://postext.dev/it/docs/comics.md#vignette-e-disegni): inset= posa una vignetta piccola sopra la precedente, bleed porta una vignetta oltre il taglio e pop= disegna sopra il bordo un livello scontornato del disegno, così una figura esce dalla sua vignetta.
- [Disegni nelle vignette e ritagli](https://postext.dev/it/docs/comics.md#vignette-e-disegni): art= mette un’immagine in una vignetta e la ritaglia sulla cella attorno alla sua zona sicura, così lo stesso disegno si adatta a qualsiasi divisione; focus= sceglie il punto da conservare, fit=contain mostra l’immagine intera.

**Usa anche**

- [Divisione in vignette](https://postext.dev/it/docs/comics.md#dividere-la-tavola)
- [Bordi e spazi delle vignette](https://postext.dev/it/docs/comics.md#vignette-e-disegni)
- [Effetti sonori](https://postext.dev/it/docs/comics.md#stili-delle-nuvolette)
- [Pagine a fumetti](https://postext.dev/it/docs/comics.md#tavole-a-fumetti)
- [Lettering dei fumetti](https://postext.dev/it/docs/comics.md#lettering)
- [Rifare il lettering in altre lingue](https://postext.dev/it/docs/comics.md#lettering)
- [Stili delle nuvolette](https://postext.dev/it/docs/comics.md#stili-delle-nuvolette)
- [Zona sicura dell’immagine](https://postext.dev/it/docs/document-format.md#zona-sicura)
- [Tavolozza di colori semantica](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori)
- [Pagine su un canvas](https://postext.dev/it/docs/configuration-programmatic-usage.md#rendere-una-pagina-come-bitmap)
- [Esportazione in PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf)
- [Colore della carta](https://postext.dev/it/docs/configuration-page-layout.md#pagina)
- [Font incorporati nel PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#perché-un-provider-di-font)
- [Figure e tabelle come risorse](https://postext.dev/it/docs/document-format.md#risorse)

**La configurazione in breve**

- [`bodyText`](https://postext.dev/it/docs/configuration-text.md#testo-corrente), [`colorPalette`](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori), [`comics`](https://postext.dev/it/docs/comics.md#tavole-a-fumetti), [`footer`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`header`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`headings`](https://postext.dev/it/docs/configuration-text.md#titoli), [`layout`](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione), [`locale`](https://postext.dev/it/docs/configuration-text.md#sillabazione), [`page`](https://postext.dev/it/docs/configuration-page-layout.md#pagina)

**API**

- [`buildDocument`](https://postext.dev/it/docs/configuration-programmatic-usage.md#costruire-un-documento), [`decompressWoff2`](https://postext.dev/it/docs/configuration-programmatic-usage.md#provider-di-font-per-il-browser-fontsource--woff2), `loadVerticalAlternates`, [`registerResourceImage`](https://postext.dev/it/docs/architecture.md#superficie-dellapi), [`renderPageToCanvas`](https://postext.dev/it/docs/configuration-programmatic-usage.md#rendere-una-pagina-come-bitmap), [`renderToPdf`](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf), [`withLoadedFonts`](https://postext.dev/it/docs/configuration-programmatic-usage.md#caricare-i-font-prima-dellimpaginazione)

**Caratteri**

- Comic Neue (OFL-1.1), Bangers (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), ZCOOL QingKe HuangYou (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)

## Preparazione

### 1 · Porta la splash al vivo su ogni lato

Il codice è nella [risposta breve](https://postext.dev/it/cookbook/splash-inset-broken-border.md#la-risposta-breve) qui sopra. `split="*"` fa dell’intera cornice una sola cella, e `bleed` sulla pagina porta ogni vignetta che tocca la cornice fino al riquadro di abbondanza, 3 mm oltre il taglio, senza bordo su quei lati ([dividere la pagina](https://postext.dev/it/docs/comics.md#dividere-la-tavola)). A pagina 2, `bleed="top start end"` sull’onda porta al vivo solo quei tre lati; il suo piede mantiene lo spazio tra le vignette sottostanti. `start` e `end` seguono la direzione di lettura, quindi le edizioni giapponese e araba, lette da destra a sinistra, portano al vivo gli stessi lati.

### 2 · Posa una vignetta inserita sulla splash

`inset="56 64 38 30"` colloca la vignetta di Maya al 56% e al 64% della vignetta che la precede, larga il 38% e alta il 30%. Una vignetta inserita non occupa una cella: viene posata sulla splash, mantiene il proprio bordo e si legge subito dopo. La sua immagine è ritagliata sul suo riquadro in base alla sua zona sicura, qui il volto di Maya.

![Pagina 1. La splash page: il faro in una tempesta notturna, al vivo su tutti e quattro i lati, «KRA-BUUM» in lettere bianche accanto al fulmine, la didascalia «La notte della grande tempesta, il faro di Porthcove non si spense mai.» in alto a sinistra e, in basso a destra, una piccola vignetta inserita con cornice, il volto di Maya dietro una finestra bagnata dalla pioggia, con la nuvoletta «Il nonno è ancora là fuori, sul ballatoio.»](https://postext.dev/cookbook/splash-inset-broken-border/it/p01.webp?v=26898fe5)

*La vignetta inserita: il volto di Maya nella sua cornice sopra l’angolo inferiore della splash, con la sua voce interiore.*

### 3 · Lascia che un gabbiano rompa il bordo

```js
// script.js, righe 111–197
// From the art manifest; fractions of each picture, the same in every language. The gull's
// layer is a transparent PNG the size of the keeper's picture, so it shares its crop.
const face = (x, y, width, height) => ({ x, y, width, height });
const ART = {
  'sp-splash': { width: 708, height: 1000, safeArea: face(0.26, 0.14, 0.6, 0.48),
    anchors: [{ id: 'sfx', x: 0.82, y: 0.4 }], avoid: [face(0.28, 0.15, 0.17, 0.35)] },
  'sp-maya-face': { width: 1000, height: 1000, safeArea: face(0.33, 0.26, 0.35, 0.34),
    anchors: [{ id: 'maya', x: 0.52, y: 0.48, face: face(0.37, 0.27, 0.29, 0.31) }] },
  'sp-wave': { width: 1400, height: 600, safeArea: face(0.4, 0.12, 0.53, 0.6),
    anchors: [{ id: 'sfx', x: 0.6, y: 0.35 }], avoid: [face(0.82, 0.02, 0.06, 0.3)] },
  'sp-tomas': { width: 1000, height: 1000, safeArea: face(0.22, 0.13, 0.6, 0.49),
    anchors: [{ id: 'tomas', x: 0.63, y: 0.345, head: { x: 0.67, y: 0.24 },
      face: face(0.56, 0.17, 0.24, 0.25) }], avoid: [face(0.32, 0.13, 0.15, 0.33)] },
  'sp-tomas-pop': { width: 1000, height: 1000 },
};
const ALT = {
  'sp-splash': t({ en: 'The red-and-white lighthouse in a night storm, waves exploding on the '
      + 'rocks, its beam cutting through the rain, lightning behind.',
    es: 'El faro rojo y blanco en una noche de tormenta: las olas revientan en las rocas, el haz '
      + 'corta la lluvia y detrás cae un rayo.',
    ca: 'El far vermell i blanc en una nit de tempesta: les onades esclaten a les roques, el feix '
      + 'talla la pluja i al darrere cau un llamp.',
    zh: '暴风雨之夜，红白相间的灯塔，浪头在礁石上炸开，光束穿过雨幕，后面是闪电。',
    ar: 'المنارة الحمراء والبيضاء في ليلة عاصفة، والموج يتفجّر على الصخور، وشعاعها يشقّ المطر، '
      + 'وخلفها برق.',
    ja: '嵐の夜の赤と白の灯台。岩に波が砕け、光の帯が雨を切り裂き、後ろで稲妻が光る。',
    pt: 'O farol vermelho e branco numa noite de tempestade: as ondas arrebentam nas pedras, o '
      + 'facho corta a chuva e, atrás, cai um raio.',
    fr: 'Le phare rouge et blanc par une nuit de tempête : les vagues explosent sur les rochers, '
      + 'le faisceau fend la pluie et, derrière, un éclair.',
    de: 'Der rot-weiße Leuchtturm in einer Sturmnacht: Wellen explodieren an den Felsen, sein '
      + 'Strahl schneidet durch den Regen, dahinter ein Blitz.',
    it: 'Il faro bianco e rosso in una notte di tempesta: le onde si infrangono sugli '
      + 'scogli, il fascio di luce taglia la pioggia e, dietro, cade un fulmine.' }),
  'sp-maya-face': t({ en: 'Maya’s face behind a rain-streaked window, hood up, lit by the lamp.',
    es: 'La cara de Maya tras una ventana surcada de lluvia, con la capucha puesta y la luz de la '
      + 'lámpara.',
    ca: 'La cara de la Maya darrere una finestra plena de pluja, amb la caputxa posada i la llum '
      + 'del llum.',
    zh: '玛雅戴着兜帽，脸贴在满是雨痕的窗后，被灯光照亮。',
    ar: 'وجه مايا خلف نافذة يسيل عليها المطر، والقلنسوة على رأسها، ونور المصباح عليها.',
    ja: '雨の筋が流れる窓の向こうに、フードをかぶったマヤの顔。ランプの光に照らされている。',
    pt: 'O rosto de Maya atrás de uma janela riscada de chuva, de capuz, à luz da lamparina.',
    fr: 'Le visage de Maya derrière une vitre striée de pluie, capuche sur la tête, à la lueur de '
      + 'la lampe.',
    de: 'Mayas Gesicht hinter einem regenüberströmten Fenster, die Kapuze auf, vom Licht der '
      + 'Lampe beleuchtet.',
    it: 'Il volto di Maya dietro una finestra rigata di pioggia, col cappuccio alzato, '
      + 'alla luce della lampada.' }),
  'sp-wave': t({ en: 'A huge wave bursts over black rocks below the lighthouse at night.',
    es: 'Una ola enorme revienta sobre las rocas negras al pie del faro, de noche.',
    ca: 'Una onada enorme esclata sobre les roques negres al peu del far, de nit.',
    zh: '夜里，一道巨浪在灯塔下的黑色礁石上炸开。',
    ar: 'موجة هائلة تتفجّر ليلًا فوق الصخور السوداء تحت المنارة.',
    ja: '夜、灯台の下の黒い岩に巨大な波が砕け散る。',
    pt: 'Uma onda enorme arrebenta nas pedras negras ao pé do farol, à noite.',
    fr: 'Une vague énorme se brise sur les rochers noirs au pied du phare, la nuit.',
    de: 'Eine gewaltige Welle bricht nachts über die schwarzen Felsen unter dem Leuchtturm.',
    it: 'Un’onda enorme si abbatte sugli scogli neri ai piedi del faro, di notte.' }),
  'sp-tomas': t({ en: 'The keeper in an oilskin on the lantern gallery holds up a storm lantern, '
      + 'his beard whipping in the wind.',
    es: 'El farero, con impermeable de hule en la galería, levanta un farol; el viento le agita '
      + 'la barba.',
    ca: 'El faroner, amb impermeable d’hule a la galeria, aixeca un fanal; el vent li remena la '
      + 'barba.',
    zh: '守塔人穿着油布雨衣站在灯室回廊上，高举一盏防风灯，胡子被风吹得乱飞。',
    ar: 'الحارس بمعطفه المشمّع على شرفة الفانوس يرفع مصباح العاصفة، والريح تعبث بلحيته.',
    ja: '油合羽の灯台守が回廊でカンテラを掲げる。ひげが風にあおられている。',
    pt: 'O faroleiro, de capa impermeável na galeria, ergue um lampião; o vento agita a barba '
      + 'dele.',
    fr: 'Le gardien, en ciré sur la galerie du phare, brandit une lanterne ; le vent lui fouette '
      + 'la barbe.',
    de: 'Der Wärter in Ölzeug hebt auf der Galerie der Laterne eine Sturmlaterne; der Wind '
      + 'peitscht ihm den Bart.',
    it: 'Il guardiano del faro, in cerata sul ballatoio, solleva una lanterna; il vento '
      + 'gli sferza la barba.' }),
  'sp-tomas-pop': t({ en: 'A herring gull flies out across the panel’s left border.',
    es: 'Una gaviota sale volando por el borde izquierdo de la viñeta.',
    ca: 'Una gavina surt volant per la vora esquerra de la vinyeta.',
    zh: '一只银鸥飞出格子的左边框。',
    ar: 'نورس فضي يطير خارجًا عبر الحافة اليسرى للإطار.',
    ja: 'セグロカモメがコマの左の枠を越えて飛んでいく。',
    pt: 'Uma gaivota sai voando pela borda esquerda do quadro.',
    fr: 'Une mouette s’envole par-dessus le bord gauche de la case.',
    de: 'Eine Silbermöwe fliegt über den linken Rand des Panels hinaus.',
    it: 'Un gabbiano esce in volo oltre il bordo sinistro della vignetta.' }),
};
```

`pop=sp-tomas-pop` nomina una seconda immagine per la vignetta del guardiano: un PNG trasparente delle dimensioni della sua immagine con sopra solo il gabbiano. Postext lo ritaglia e lo colloca esattamente come il disegno della vignetta, poi lo disegna dopo il bordo e fuori dal ritaglio della vignetta, così la parte del gabbiano che sta oltre la cella vola sopra il bordo e il margine ([vignette e disegni](https://postext.dev/it/docs/comics.md#vignette-e-disegni)). `focus="45% 50%"` sposta il ritaglio a sinistra entro quanto la zona sicura permette, così il gabbiano sta a cavallo del bordo sinistro invece che fuori nel margine.

### 4 · Lascia una vignetta senza immagine

```js
// script.js, righe 19–31
const palette = {
  ink: '#141b24', // panel borders and lettering
  night: '#1d2a3a', // the ground of the text-only panel
  lamp: '#f2c14e', // the captions: the colour of the lantern
  accent: '#e9f0f5', // sound effects: surf white, outlined in ink
  muted: '#5c6672', // folios
  paper: '#fbfaf7',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } },
];
```

Un `::panel` senza `art` è una cella vuota con il bordo dello stile delle vignette; `bg=night` la riempie con un colore della palette. Le sue didascalie, `at=top` e `at=bottom`, sono accostate ai suoi bordi superiore e inferiore, una pausa silenziosa dopo la tempesta.

## La ricetta completa

Un unico file, composto a partire dalla cartella della ricetta con il testo di esempio e il kit comune del Ricettario già inclusi; costruisce la propria pagina. Per eseguirlo, mettilo in uno `<script type="module">` di una pagina vuota, oppure incollalo nel pannello JS di un nuovo pen di CodePen (come modulo). Importa postext da esm.sh: non c’è niente da installare né da compilare.

- Cartella della ricetta: https://github.com/drnachio/postext/tree/main/cookbook/splash-inset-broken-border

### script.js

```js
// ═══ Postext Cookbook · Nº 147 · A splash page, an inset and a broken border ═══════
// https://postext.dev/en/cookbook/splash-inset-broken-border
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Comic Neue, Bangers and the faces of five editions (OFL) · Needs postext ≥ 1.25.0
//
// Two pages of a storm: a splash page that bleeds off all four edges with a small inset panel
// laid over it, then a page whose top tier bleeds off three edges, whose second panel lets a
// gull fly out over its border, and whose last panel holds only captions on a night-blue ground.
import {
  buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage, loadVerticalAlternates,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'it'; // @lang: 'en' | 'es' | 'ca' | 'zh' | 'ar' | 'ja' | 'pt' | 'fr' | 'de' | 'it'
const RECIPE = 'splash-inset-broken-border';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: storm blue, lamplight and the white of the surf
const palette = {
  ink: '#141b24', // panel borders and lettering
  night: '#1d2a3a', // the ground of the text-only panel
  lamp: '#f2c14e', // the captions: the colour of the lantern
  accent: '#e9f0f5', // sound effects: surf white, outlined in ink
  muted: '#5c6672', // folios
  paper: '#fbfaf7',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } },
];
// #endregion

// #region editions: six editions, each lettered in faces for its script
const [LETTERING, SFX] = t({
  en: ['Comic Neue', 'Bangers'], es: ['Comic Neue', 'Bangers'], ca: ['Comic Neue', 'Bangers'],
  ja: ['Zen Antique', 'Dela Gothic One'], zh: ['ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou'],
  ar: ['Playpen Sans Arabic', 'Lalezar'], pt: ['Comic Neue', 'Bangers'],
  fr: ['Comic Neue', 'Bangers'], de: ['Comic Neue', 'Bangers'], it: ['Comic Neue', 'Bangers'],
});
// #endregion

// #region answer: a bleed, an inset and a pop-out, written on the panels themselves
// In the Markdown, the panel attributes do the work:
//   :::page{split="*" bleed}                 one panel, every edge bled off the page
//   ::panel{art=sp-maya-face inset="56 64 38 30"}   over the panel before it: x y w h in %
//   ::panel{art=sp-wave bleed="top start end"}      only the edges that touch the trim
//   ::panel{art=sp-tomas pop=sp-tomas-pop}   a transparent layer drawn over the border
//   ::panel{bg=night}                        no picture: captions on a palette colour
// A bleeding panel runs to the bleed box, 3 mm past the trim, and loses its border on those
// sides. The pop layer is cropped and placed exactly like the panel's picture, then drawn
// after the border without the panel's clip, so whatever it holds outside the cell shows.
const comics = {
  gutter: { horizontal: mm(4), vertical: mm(3) },
  panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
  lettering: { fontFamily: LETTERING, fontSize: pt(8.5), color: col('ink'), inset: mm(2) },
  balloonStyles: [
    { id: 'speech', stroke: col('ink') },
    { id: 'caption', fill: col('lamp'), stroke: col('ink') },
    { id: 'inner', fill: col('paper'), stroke: col('ink') },
    { id: 'sfx', fontFamily: SFX, color: col('accent'), haloColor: col('ink'), halo: pt(2) },
  ],
  runningHeads: true, // a comic page has no running head unless asked: here, its folio
};
// #endregion

const footer = { elements: [{ kind: 'text', id: 'folio', content: '{pageNumber}',
  fontFamily: LETTERING, fontSize: pt(7.5), color: col('muted'), align: 'center',
  placement: { anchor: { to: 'page', edge: 'bottom' }, offset: { x: mm(0), y: mm(-7) } } }] };

const config = () => ({
  locale: t({ en: 'en-gb', es: 'es', ca: 'ca', ja: 'ja', zh: 'zh-Hans', ar: 'ar',
    pt: 'pt-BR', fr: 'fr', de: 'de', it: 'it' }),
  colorPalette, comics,
  // The trim of an American comic book, 6⅝ × 10³⁄₁₆ in, with 3 mm of bleed.
  page: { sizePreset: 'custom', width: mm(168), height: mm(259), bleed: mm(3), dpi: 150,
    backgroundColor: col('paper'),
    margins: { top: mm(14), bottom: mm(16), left: mm(13), right: mm(11), mirror: true } },
  layout: { layoutType: 'single' },
  bodyText: { fontFamily: LETTERING, fontSize: pt(10), lineHeight: pt(14), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink') },
  headings: { fontFamily: SFX, color: col('ink'),
    // The story opens on the next page, recto or verso.
    levels: [{ level: 1, fontSize: pt(30), breakBefore: { enabled: true, parity: 'any' } }] },
  header: { elements: [] }, footer,
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`:::page{split="*" bleed}
::panel{art=sp-splash}
caption{at=top-start}: La notte della grande tempesta, il faro di Porthcove non si spense mai.
sfx{at="82% 42%" rotate=8 size=1.4}: KRA-BUUM
::panel{art=sp-maya-face inset="56 64 38 30"}
maya{inner}: Il nonno è ancora là fuori, sul ballatoio.
:::

:::page{split="36 / * [72 | *]"}
::panel{art=sp-wave bleed="top start end"}
sfx{at="60% 32%" rotate=-6 size=1.6}: SPLAAASH
caption{at=top-start}: Il mare risaliva gli scogli come se volesse prendersi la casa.
::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%"}
tomas: Calma, vecchia mia. Ne hai viste di peggio.
tomas: E anch’io.
::panel{bg=night}
caption{at=top}: All’alba il vento si era calmato.
caption{at=bottom}: I gabbiani tornarono per primi.
:::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: the five pictures and the gull's layer
// From the art manifest; fractions of each picture, the same in every language. The gull's
// layer is a transparent PNG the size of the keeper's picture, so it shares its crop.
const face = (x, y, width, height) => ({ x, y, width, height });
const ART = {
  'sp-splash': { width: 708, height: 1000, safeArea: face(0.26, 0.14, 0.6, 0.48),
    anchors: [{ id: 'sfx', x: 0.82, y: 0.4 }], avoid: [face(0.28, 0.15, 0.17, 0.35)] },
  'sp-maya-face': { width: 1000, height: 1000, safeArea: face(0.33, 0.26, 0.35, 0.34),
    anchors: [{ id: 'maya', x: 0.52, y: 0.48, face: face(0.37, 0.27, 0.29, 0.31) }] },
  'sp-wave': { width: 1400, height: 600, safeArea: face(0.4, 0.12, 0.53, 0.6),
    anchors: [{ id: 'sfx', x: 0.6, y: 0.35 }], avoid: [face(0.82, 0.02, 0.06, 0.3)] },
  'sp-tomas': { width: 1000, height: 1000, safeArea: face(0.22, 0.13, 0.6, 0.49),
    anchors: [{ id: 'tomas', x: 0.63, y: 0.345, head: { x: 0.67, y: 0.24 },
      face: face(0.56, 0.17, 0.24, 0.25) }], avoid: [face(0.32, 0.13, 0.15, 0.33)] },
  'sp-tomas-pop': { width: 1000, height: 1000 },
};
const ALT = {
  'sp-splash': t({ en: 'The red-and-white lighthouse in a night storm, waves exploding on the '
      + 'rocks, its beam cutting through the rain, lightning behind.',
    es: 'El faro rojo y blanco en una noche de tormenta: las olas revientan en las rocas, el haz '
      + 'corta la lluvia y detrás cae un rayo.',
    ca: 'El far vermell i blanc en una nit de tempesta: les onades esclaten a les roques, el feix '
      + 'talla la pluja i al darrere cau un llamp.',
    zh: '暴风雨之夜，红白相间的灯塔，浪头在礁石上炸开，光束穿过雨幕，后面是闪电。',
    ar: 'المنارة الحمراء والبيضاء في ليلة عاصفة، والموج يتفجّر على الصخور، وشعاعها يشقّ المطر، '
      + 'وخلفها برق.',
    ja: '嵐の夜の赤と白の灯台。岩に波が砕け、光の帯が雨を切り裂き、後ろで稲妻が光る。',
    pt: 'O farol vermelho e branco numa noite de tempestade: as ondas arrebentam nas pedras, o '
      + 'facho corta a chuva e, atrás, cai um raio.',
    fr: 'Le phare rouge et blanc par une nuit de tempête : les vagues explosent sur les rochers, '
      + 'le faisceau fend la pluie et, derrière, un éclair.',
    de: 'Der rot-weiße Leuchtturm in einer Sturmnacht: Wellen explodieren an den Felsen, sein '
      + 'Strahl schneidet durch den Regen, dahinter ein Blitz.',
    it: 'Il faro bianco e rosso in una notte di tempesta: le onde si infrangono sugli '
      + 'scogli, il fascio di luce taglia la pioggia e, dietro, cade un fulmine.' }),
  'sp-maya-face': t({ en: 'Maya’s face behind a rain-streaked window, hood up, lit by the lamp.',
    es: 'La cara de Maya tras una ventana surcada de lluvia, con la capucha puesta y la luz de la '
      + 'lámpara.',
    ca: 'La cara de la Maya darrere una finestra plena de pluja, amb la caputxa posada i la llum '
      + 'del llum.',
    zh: '玛雅戴着兜帽，脸贴在满是雨痕的窗后，被灯光照亮。',
    ar: 'وجه مايا خلف نافذة يسيل عليها المطر، والقلنسوة على رأسها، ونور المصباح عليها.',
    ja: '雨の筋が流れる窓の向こうに、フードをかぶったマヤの顔。ランプの光に照らされている。',
    pt: 'O rosto de Maya atrás de uma janela riscada de chuva, de capuz, à luz da lamparina.',
    fr: 'Le visage de Maya derrière une vitre striée de pluie, capuche sur la tête, à la lueur de '
      + 'la lampe.',
    de: 'Mayas Gesicht hinter einem regenüberströmten Fenster, die Kapuze auf, vom Licht der '
      + 'Lampe beleuchtet.',
    it: 'Il volto di Maya dietro una finestra rigata di pioggia, col cappuccio alzato, '
      + 'alla luce della lampada.' }),
  'sp-wave': t({ en: 'A huge wave bursts over black rocks below the lighthouse at night.',
    es: 'Una ola enorme revienta sobre las rocas negras al pie del faro, de noche.',
    ca: 'Una onada enorme esclata sobre les roques negres al peu del far, de nit.',
    zh: '夜里，一道巨浪在灯塔下的黑色礁石上炸开。',
    ar: 'موجة هائلة تتفجّر ليلًا فوق الصخور السوداء تحت المنارة.',
    ja: '夜、灯台の下の黒い岩に巨大な波が砕け散る。',
    pt: 'Uma onda enorme arrebenta nas pedras negras ao pé do farol, à noite.',
    fr: 'Une vague énorme se brise sur les rochers noirs au pied du phare, la nuit.',
    de: 'Eine gewaltige Welle bricht nachts über die schwarzen Felsen unter dem Leuchtturm.',
    it: 'Un’onda enorme si abbatte sugli scogli neri ai piedi del faro, di notte.' }),
  'sp-tomas': t({ en: 'The keeper in an oilskin on the lantern gallery holds up a storm lantern, '
      + 'his beard whipping in the wind.',
    es: 'El farero, con impermeable de hule en la galería, levanta un farol; el viento le agita '
      + 'la barba.',
    ca: 'El faroner, amb impermeable d’hule a la galeria, aixeca un fanal; el vent li remena la '
      + 'barba.',
    zh: '守塔人穿着油布雨衣站在灯室回廊上，高举一盏防风灯，胡子被风吹得乱飞。',
    ar: 'الحارس بمعطفه المشمّع على شرفة الفانوس يرفع مصباح العاصفة، والريح تعبث بلحيته.',
    ja: '油合羽の灯台守が回廊でカンテラを掲げる。ひげが風にあおられている。',
    pt: 'O faroleiro, de capa impermeável na galeria, ergue um lampião; o vento agita a barba '
      + 'dele.',
    fr: 'Le gardien, en ciré sur la galerie du phare, brandit une lanterne ; le vent lui fouette '
      + 'la barbe.',
    de: 'Der Wärter in Ölzeug hebt auf der Galerie der Laterne eine Sturmlaterne; der Wind '
      + 'peitscht ihm den Bart.',
    it: 'Il guardiano del faro, in cerata sul ballatoio, solleva una lanterna; il vento '
      + 'gli sferza la barba.' }),
  'sp-tomas-pop': t({ en: 'A herring gull flies out across the panel’s left border.',
    es: 'Una gaviota sale volando por el borde izquierdo de la viñeta.',
    ca: 'Una gavina surt volant per la vora esquerra de la vinyeta.',
    zh: '一只银鸥飞出格子的左边框。',
    ar: 'نورس فضي يطير خارجًا عبر الحافة اليسرى للإطار.',
    ja: 'セグロカモメがコマの左の枠を越えて飛んでいく。',
    pt: 'Uma gaivota sai voando pela borda esquerda do quadro.',
    fr: 'Une mouette s’envole par-dessus le bord gauche de la case.',
    de: 'Eine Silbermöwe fliegt über den linken Rand des Panels hinaus.',
    it: 'Un gabbiano esce in volo oltre il bordo sinistro della vignetta.' }),
};
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
// Every face of the six editions; each edition loads the latin files of all of them and the
// Japanese, Chinese or Arabic files of its own two.
const FONTS = {
  'Comic Neue': ['400', '400i', '700', '700i'],
  Bangers: ['400'],
  'Zen Antique': ['400'],
  'Dela Gothic One': ['400'],
  'ZCOOL KuaiLe': ['400'],
  'ZCOOL QingKe HuangYou': ['400'],
  'Playpen Sans Arabic': ['400', '700'],
  Lalezar: ['400'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const faces = { [LETTERING]: FONTS[LETTERING], [SFX]: FONTS[SFX] };
await loadFonts(FONTS, markdown);
await loadCjkFonts(faces, markdown, { vertical: LANG === 'ja' }); // ja balloons are vertical
await loadArabicFonts(faces, markdown);
await loadComicFonts(faces, markdown); // the bold and italic the faces do not ship
const panel = (id, url) => comicPanel(id, url, { ...ART[id], alt: ALT[id] });
const resources = await Promise.all([
  panel('sp-splash', asset('sp-splash.jpg')), panel('sp-maya-face', asset('sp-maya-face.jpg')),
  panel('sp-wave', asset('sp-wave.jpg')), panel('sp-tomas', asset('sp-tomas.jpg')),
  panel('sp-tomas-pop', asset('sp-tomas-pop.png')),
]);
const doc = await withLoadedFonts(() => buildDocument({ markdown, resources }, config()),
  { ...kitFonts(FONTS), text: markdown });
showBook(doc, { title: t({ en: 'A splash page, an inset and a broken border',
  es: 'Una página splash, una viñeta insertada y un borde roto',
  pt: 'Uma página splash, um quadro inserido e uma borda quebrada',
  fr: 'Une pleine page, une case incrustée et un bord franchi',
  de: 'Eine Splash-Seite, ein eingesetztes Panel und ein durchbrochener Rahmen',
  it: 'Una splash page, una vignetta inserita e un bordo infranto' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: comicPdfProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`);

// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ─────

// ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook
function mm(value) { return { value, unit: 'mm' }; }
function pt(value) { return { value, unit: 'pt' }; }
function em(value) { return { value, unit: 'em' }; }
/** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */
function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; }
/** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */
function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; }

// ─── Kit · fonts v3 ── the same in every recipe · postext.dev/cookbook
// Postext loads the faces a config asks for before layout (prepareFonts,
// buildDocumentWithFonts) and asks the kit for the files: Fontsource's, the
// files the PDF embeds too.

/** The options of buildDocumentWithFonts / prepareFonts / withLoadedFonts:
 *  the Fontsource resolver, and the faces of FONTS loaded with the ones the
 *  config names. FONTS = { 'Family Name': ['400', '400i', '700'] }. */
function kitFonts(FONTS = {}) {
  const faces = Object.entries(FONTS).flatMap(([family, specs]) => specs.map((spec) =>
    ({ family, weight: parseInt(spec, 10), style: spec.endsWith('i') ? 'italic' : 'normal' })));
  return { resolve: fontsourceResolver, faces };
}

/** A face's Fontsource files, in a fixed order: latin, then latin-ext and greek
 *  when `text` needs them and the family ships them (kitSubsetsFor), each with
 *  its unicode-range. Null for a weight or slant Fontsource does not ship. */
async function fontsourceResolver(family, weight, style, { text = '' } = {}) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  if (meta && !(meta.weights.includes(weight) && meta.styles.includes(style))) return null;
  kitStatus('Loading fonts…');
  const at = await fontsourceAt(id);
  return ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({
    source: `${at}files/${id}-${subset}-${weight}-${style}.woff2`,
    unicodeRange: kitRanges()[subset],
  }));
}

/** The unicode-range of each Fontsource file the kit loads (a function: the
 *  kit is inlined after the pen's code, which runs before a const would be set). */
function kitRanges() {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  };
}

/** For the cjk, arabic and comics blocks, which add their own files: the
 *  faces of `faces` = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  č ł † α χ also load latin-ext and greek files (kitSubsetsFor). With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  The files are added once all have loaded, in the order asked (latin, then
 *  latin-ext, then greek), whatever order they arrive in: the last one added
 *  wins a character two files hold. Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = kitRanges();
  const jobs = [];
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const todo = [...new Set(specs)].map((spec) => [parseInt(spec, 10), spec.endsWith('i') ? 'italic' : 'normal'])
      .filter(([weight, style]) => !hasFace(family, weight, style)); // before any await
    const at = fontsourceAt(id);
    const meta = optional || /[^\0-ÿ]/u.test(text) ? await fontsourceMeta(family) : null;
    const subsets = ['latin', ...kitSubsetsFor(text, meta)];
    for (const [weight, style] of todo) {
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `${await at}files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().catch(() => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  const ready = await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return ready.filter((face) => face && document.fonts.add(face)).length;
}

/** A loaded FontFace covers this family, weight and style (fonts.check() would
 *  also say yes for families nobody declared). */
function hasFace(family, weight, style) {
  for (const face of document.fonts) {
    if (face.status !== 'loaded' || face.style !== style) continue;
    if (face.family.replace(/^["']|["']$/g, '') !== family) continue;
    const [low, high = low] = face.weight.split(' ').map(Number);
    if (weight >= low && weight <= high) return true;
  }
  return false;
}

/** The files beyond latin `text` needs that `meta`'s family ships. */
function kitSubsetsFor(text, meta) {
  return [[/[Ā-˿ᴀ-ᶿḀ-ỿ†ℓⱠ-Ɀ꜠-ꟿ]/u, 'latin-ext'], [/[Ͱ-Ͽ]/u, 'greek']]
    .filter(([re, x]) => re.test(text) && meta?.subsets?.includes(x)).map(([, x]) => x);
}

/** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */
function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); }

/** A package's folder at the one version @5 names now (#766). */
function fontsourceAt(id, u = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@`) {
  return (fontsourceAt.c ??= {})[id] ??= fetch(u + '5/package.json').then((r) => r.json())
    .then((p) => p.version || 5, () => 5).then((v) => `${u}${v}/`);
}

/** The family's Fontsource metadata (weights, styles, subsets), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

// ─── Kit · viewer v2 ── the same in every recipe · postext.dev/cookbook
/** The pages as spreads on a dark desk, page 1 alone, then verso | recto,
 *  each painted when it scrolls near. Other options go to renderPageToCanvas. */
function showPages(docs, { title, width = 460, ...render } = {}) {
  const root = viewer(title);
  const pages = [docs].flat().flatMap((doc) =>
    doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index })));
  const spreads = [];
  let verso = null;
  for (const p of pages) {
    if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; }
    else { spreads.push([verso, p]); verso = null; }
  }
  if (verso) spreads.push([verso, null]);
  const density = Math.min(window.devicePixelRatio || 1, 2);
  showPages.painter?.disconnect();
  const painter = new IntersectionObserver((entries) => {
    for (const { isIntersecting, target } of entries) {
      if (!isIntersecting) continue;
      painter.unobserve(target);
      const { doc, page } = target.postext;
      renderPageToCanvas(page, doc, target, { ...render, scale: (width * density) / page.width });
    }
  }, { rootMargin: '800px' });
  showPages.painter = painter;
  root.replaceChildren(...spreads.map((pair) => {
    const spread = document.createElement('div');
    spread.className = 'pt-spread';
    for (const p of pair) {
      const figure = document.createElement('figure');
      if (p) {
        const label = p.page.pageLabel || String(p.n + 1);
        const canvas = document.createElement('canvas');
        canvas.postext = p;
        canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', `Page ${label}`);
        const folio = document.createElement('figcaption');
        folio.textContent = label;
        figure.append(canvas, folio);
        painter.observe(canvas);
      } else figure.className = 'pt-blank';
      spread.append(figure);
    }
    return spread;
  }));
  kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`);
  document.documentElement.dataset.postext = 'ready';
  return pages.length;
}

/** The desk, the bar and the error reporting, created once. */
function viewer(title) {
  if (!document.getElementById('pt-kit')) {
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit">
      :root { color-scheme: dark; }
      body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; }
      #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px);
        border-bottom: 1px solid #23262d; }
      #pt-bar strong { color: #f4f1ea; font-weight: 600; }
      #pt-actions { display: flex; gap: 12px; margin-left: auto; }
      #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
      #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; }
      .pt-spread { display: flex; }
      .pt-spread figure { margin: 0; width: min(460px, 44vw); }
      .pt-spread canvas { display: block; width: 100%; background: #fff;
        box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif;
        letter-spacing: .18em; text-transform: uppercase; color: #6c7079; }
      .pt-blank { visibility: hidden; }
      @media (max-width: 760px) {
        .pt-spread { flex-direction: column; gap: 32px; }
        .pt-spread figure { width: min(460px, 92vw); }
        .pt-blank { display: none; }
      }
    </style>`);
    document.body.insertAdjacentHTML('afterbegin',
      '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>');
    document.getElementById('pt-title').textContent = document.title || 'Postext';
    addEventListener('error', (event) => kitFail(event.error ?? event.message));
    addEventListener('unhandledrejection', (event) => kitFail(event.reason));
  }
  if (title) document.getElementById('pt-title').textContent = title;
  return document.getElementById('pages')
    ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}

function kitStatus(text) {
  viewer();
  document.getElementById('pt-status').textContent = text;
}

function kitFail(error) {
  document.documentElement.dataset.postext = 'error';
  kitStatus(`Error: ${error?.message ?? error}`);
}

// ─── Kit · pdf v3 ── the same in every recipe that exports a PDF
/** The Fontsource files the screen used, as TrueType, with their range and
 *  place: the nearest weight the family ships, upright with no italic;
 *  latin, then what its letters need (kitSubsetsFor). */
async function fontsourceProvider(family, weight, style, request) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const text = String.fromCodePoint(...(request?.codePoints ?? []));
  const files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => {
    const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`);
    if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`);
    return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())),
      { unicodeRange: kitRanges()[subset], order });
  }));
  return files.length === 1 ? files[0] : files;
}

/** A "Build the PDF" button; then "Open the PDF" (a new tab: CodePen's frame
 *  shows no PDFs) and a download link. */
function offerPdf(makePdf, filename) {
  viewer();
  const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
  button.dataset.postextPdf = filename;
  button.addEventListener('click', async () => {
    button.disabled = true;
    button.textContent = 'Building the PDF…';
    try {
      const bytes = await makePdf();
      const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
      const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
      button.replaceWith(
        Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
        Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
    } catch (error) {
      button.disabled = false;
      button.textContent = 'Build the PDF';
      kitFail(error);
    }
  });
  document.getElementById('pt-actions').append(button);
}

// ─── Kit · images v3 ── recipes with pictures · postext.dev/cookbook
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup as a vector image, its fonts inside (inlineSvgFonts, ≥ 1.25).
 *  `options` go to registerResourceImage: { singleInk: true } tints it on the canvas. */
async function loadSvg(fileId, svg, options) {
  if (typeof inlineSvgFonts === 'function') svg = await inlineSvgFonts(svg, svgFaces);
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img, options);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** A face's Fontsource files: nearest weight; latin + what the SVG sets. */
async function svgFaces(family, weight, style, { codePoints = [] } = {}) {
  const [id, m] = [fontsourceId(family), await fontsourceMeta(family)];
  const w = m?.weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)) ?? weight;
  const s = m?.styles.includes(style) === false ? 'normal' : style;
  return Promise.all(['latin', ...kitSubsetsFor(String.fromCodePoint(...codePoints), m)].map(async (x) => new Uint8Array(
    await (await fetch(`${await fontsourceAt(id)}files/${id}-${x}-${w}-${s}.woff2`)).arrayBuffer())));
}

/** renderToPdf({ resourceBytes: imageBytes }) */
function imageBytes(fileId) { return loadImage.bytes?.get(fileId); }

/** renderToHtml({ resourceImageUrl: imageUrl }) */
function imageUrl(fileId) {
  const bytes = imageBytes(fileId);
  if (!bytes) return undefined;
  imageUrl.urls ??= new Map();
  if (!imageUrl.urls.has(fileId)) {
    const type = /\.svg$/i.test(fileId) ? 'image/svg+xml' : /\.png$/i.test(fileId) ? 'image/png' : 'image/jpeg';
    imageUrl.urls.set(fileId, URL.createObjectURL(new Blob([bytes], { type })));
  }
  return imageUrl.urls.get(fileId);
}

// ─── Kit · cjk v2 ── Chinese, Japanese and Korean books · postext.dev/cookbook
// Fontsource ships a CJK family as about a hundred files per weight, each
// declared in its stylesheet with the unicode-range it covers. The screen
// loads the files the sample touches; the PDF gets the same files for the
// characters its pages set in each face, and embeds each as a subset.
// A book bound on the right (vertical text) is shown with its spreads
// mirrored: page 1 alone on the left of the spine, then [3 | 2].

/** The files of a Fontsource face, read from its stylesheet: { url, range,
 *  ranges }, the last declared first (the order the browser tries them in). */
function cjkSlices(family, weight, style) {
  cjkSlices.cache ??= new Map();
  const id = fontsourceId(family);
  const css = `${id}/${weight}${style === 'italic' ? '-italic' : ''}.css`;
  if (!cjkSlices.cache.has(css)) {
    let at;
    cjkSlices.cache.set(css, fontsourceAt(id).then((a) => fetch(at = a + css.slice(id.length + 1)))
      .then((res) => {
        if (!res.ok) throw new Error(`Fontsource has no ${family} ${weight} ${style} (${res.status})`);
        return res.text();
      })
      .then((text) => [...text.matchAll(/@font-face\s*{([^}]*)}/g)].map(([, rule]) => {
        const range = /unicode-range:\s*([^;]+);/.exec(rule)?.[1].trim() ?? 'U+0-10FFFF';
        const ranges = range.split(',').map((part) => {
          const [lo, hi = lo] = part.trim().slice(2).split('-');
          return [parseInt(lo, 16), parseInt(hi, 16)];
        });
        return { url: new URL(/url\(([^)]+?\.woff2)\)/.exec(rule)[1], at).href, range, ranges };
      }).reverse()));
  }
  return cjkSlices.cache.get(css);
}

/** The file of `slices` the screen sets code point `cp` in, if any: the
 *  last one loadCjkFonts adds whose range holds it. A numbered file that
 *  repeats a letter of latin is added after latin, and wins it. */
function cjkSliceFor(slices, cp) {
  const holds = (slice) => slice.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
  return slices.reduce((last, slice) => (holds(slice) ? slice : last), undefined);
}

/** Whether Fontsource serves `family` as a Chinese, Japanese or Korean
 *  family (its subsets name the script). Fails when the API does not
 *  answer: a CJK face taken for a Latin one would paint in a system face. */
async function isCjkFamily(family) {
  const meta = await fontsourceMeta(family);
  if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
  return !!meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset));
}

/** faces = { 'Noto Serif TC': ['400', '700'] }, as for loadFonts: the
 *  whole FONTS object may be passed, its other families are left to
 *  loadFonts. Adds one FontFace per file of each CJK face with its
 *  unicodeRange, then loads the files `text` touches. `text` is what the
 *  faces set: the sample for the text face; a book in several voices calls
 *  it once per voice (loadCjkFonts({ 'LXGW WenKai TC': ['400'] }, quotes)),
 *  so the heading and quotation faces fetch and check only their own
 *  characters. Fails when a character of `text` is in no file of a face.
 *  List every weight the pages use: a weight left to the engine's later round
 *  gets the latin file only. With { vertical: true } it also loads each
 *  family's vertical forms (brackets, quotes, pause marks) for the canvas,
 *  which needs loadVerticalAlternates imported from postext. Resolves to
 *  the number of files loaded. */
async function loadCjkFonts(faces, text, { vertical = false } = {}) {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    if (vertical && typeof loadVerticalAlternates !== 'function') {
      throw new Error('loadCjkFonts(…, { vertical: true }) needs loadVerticalAlternates imported from postext');
    }
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isCjkFamily(family))) continue;
      const twin = [];
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const slices = await cjkSlices(family, weight, style);
        const missing = [...new Set(text)].filter((ch) => /\S/.test(ch) && !cjkSliceFor(slices, ch.codePointAt(0)));
        if (missing.length) {
          throw new Error(`${family} ${spec} has no file for ${missing.slice(0, 12).join(' ')}: `
            + `give each face the text it sets (loadCjkFonts({ '${family}': ['${spec}'] }, text))`);
        }
        for (const slice of slices) {
          document.fonts.add(new FontFace(family, `url(${slice.url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: slice.range }));
          twin.push({ source: slice.url, weight: String(weight), style, unicodeRange: slice.range });
        }
        const font = `${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`;
        loaded += (await document.fonts.load(font, text)).length;
        if (!document.fonts.check(font, text)) throw new Error(`${family} ${spec} did not load for the sample`);
      }
      // The same files under a twin name with the `vert` feature on: the
      // canvas paints the punctuation of vertical lines with it.
      if (vertical && twin.length) await loadVerticalAlternates(family, twin);
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with CJK faces: a family whose
 *  Fontsource subsets are Chinese, Japanese or Korean gets the files the
 *  screen set its pages' characters in (`request.codePoints`), each marked
 *  with its unicode-range and its place in the order loadCjkFonts added
 *  them: postext-pdf sets a character two files hold in the one added
 *  last, as the browser does. Any other family gets the latin file
 *  fontsourceProvider fetches (the "pdf" block) and, when the face sets
 *  letters only latin-ext has, that file too. */
async function cjkPdfProvider(family, weight, style, request) {
  if (!(await isCjkFamily(family))) return cjkLatinPdfFiles(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const slices = await cjkSlices(family, w, s);
  const picked = new Set();
  for (const cp of request?.codePoints ?? []) {
    const slice = cjkSliceFor(slices, cp);
    if (slice) picked.add(slice);
  }
  if (!picked.size) picked.add(slices[0]);
  return Promise.all(slices.map(async (slice, order) => {
    if (!picked.has(slice)) return null;
    const res = await fetch(slice.url);
    if (!res.ok) throw new Error(`Fontsource file ${slice.url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: slice.range, order });
  })).then((files) => files.filter(Boolean));
}

/** A Latin family set next to the CJK faces: its latin file, then its
 *  latin-ext file when the face sets letters only latin-ext has (ō ū in
 *  Hepburn rōmaji, ǎ in pinyin), the file loadFonts adds on screen for
 *  them, each marked with its unicode-range and its place in that order:
 *  the PDF sets a character in the file the browser took it from. A face
 *  Fontsource ships without latin-ext, or whose file does not come, gets
 *  latin alone, and the PDF names the letters it lacks. */
async function cjkLatinPdfFiles(family, weight, style, request) {
  const meta = await fontsourceMeta(family);
  const beyond = [...(request?.codePoints ?? [])].some(cjkLatinExtOnly);
  if (!beyond || !meta?.subsets?.includes('latin-ext')) return fontsourceProvider(family, weight, style);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const id = fontsourceId(family);
  const url = `${await fontsourceAt(id)}files/${id}-latin-ext-${w}-${s}.woff2`;
  const [latin, ext] = await Promise.all([fontsourceProvider(family, weight, style), fetch(url)
    .then(async (res) => (res.ok ? decompressWoff2(new Uint8Array(await res.arrayBuffer())) : null), () => null)]);
  const ranges = kitRanges();
  return ext ? [Object.assign(latin, { unicodeRange: ranges.latin, order: 0 }),
    Object.assign(ext, { unicodeRange: ranges['latin-ext'], order: 1 })] : latin;
}

/** Whether code point `cp` is in Fontsource's latin-ext file and not in
 *  its latin file: Latin Extended-A and -B, IPA, the spacing modifiers and
 *  Latin Extended Additional (loadFonts's test for latin-ext), less the
 *  few latin holds too (ı Œ œ ʻ ʼ ˆ ˚ ˜). */
function cjkLatinExtOnly(cp) {
  if (!((cp >= 0x100 && cp <= 0x2ff) || (cp >= 0x1e00 && cp <= 0x1eff))) return false;
  return ![0x131, 0x152, 0x153, 0x2bb, 0x2bc, 0x2c6, 0x2da, 0x2dc].includes(cp);
}

/** showPages for a book bound on either edge. A right-bound book (the
 *  document says so: doc.binding is 'right' for page.binding 'right' and
 *  for vertical text) lies on the desk as it opens: page 1 alone on the
 *  left of the spine, then [3 | 2], the spine shade on each page's inner
 *  edge. `binding` ('left' | 'right') overrides the document's. */
function showBook(docs, { binding, ...options } = {}) {
  const count = showPages(docs, options);
  const right = (binding ?? [docs].flat()[0]?.binding) === 'right';
  if (!document.getElementById('pt-kit-cjk')) {
    // The pages keep direction ltr: a canvas draws text in the direction its
    // element inherits, and under rtl each run would end where the engine
    // starts it, its brackets mirrored.
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit-cjk">
      .pt-spread[dir="rtl"] canvas { direction: ltr; }
      .pt-spread[dir="rtl"] figure:first-child canvas { box-shadow: inset 14px 0 14px -14px rgb(0 0 0 / .18),
        0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
    </style>`);
  }
  // Each pair stays [verso, recto] in the page; right to left, the verso
  // sits on the right. Phones stack the pages in reading order either way.
  for (const spread of document.querySelectorAll('#pages > .pt-spread')) spread.dir = right ? 'rtl' : 'ltr';
  document.getElementById('pages').dataset.binding = right ? 'right' : 'left';
  return count;
}

// ─── Kit · arabic v2 ── Arabic-script faces · postext.dev/cookbook
// Fontsource ships an Arabic family as one file per subset and weight: the
// `arabic` file holds the letters, the harakat, the Arabic-Indic digits, the
// Arabic punctuation and the presentation forms; `latin` and `latin-ext`
// hold the rest. loadFonts loads the latin files; this block adds the arabic
// file of every Arabic family, for the canvas and for the PDF, which shapes
// the letters with HarfBuzz from the same bytes.

/** The code points of Fontsource's `arabic` subset, as its stylesheets
 *  declare them (the same unicode-range the browser picks the file by). A
 *  function, not a const: the kit is inlined after the recipe's top-level
 *  awaits, and a const read before its line throws, where a function
 *  declaration is hoisted. */
function arabicRange() {
  return 'U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,'
    + 'U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,'
    + 'U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF';
}

/** Whether code point `cp` is in the arabic file. */
function inArabicRange(cp) {
  inArabicRange.ranges ??= arabicRange().split(',').map((part) => {
    const [lo, hi = lo] = part.slice(2).split('-');
    return [parseInt(lo, 16), parseInt(hi, 16)];
  });
  return inArabicRange.ranges.some(([lo, hi]) => cp >= lo && cp <= hi);
}

/** Whether Fontsource serves `family` with an `arabic` subset. Fails when
 *  the API does not answer: an Arabic face taken for a Latin one would set
 *  its letters in a system face. */
async function isArabicFamily(family) {
  const meta = await fontsourceMeta(family);
  if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
  return !!meta.subsets?.includes('arabic');
}

/** The arabic file of a face. */
async function arabicFileUrl(family, weight, style) {
  const id = fontsourceId(family);
  return `${await fontsourceAt(id)}files/${id}-arabic-${weight}-${style}.woff2`;
}

/** faces = { Amiri: ['400', '700'] }, as for loadFonts, after it: the whole
 *  FONTS object may be passed, its families without an arabic subset are
 *  left alone. Adds the arabic file of every listed weight of each Arabic
 *  family (the latin files come from loadFonts) and loads it. `text` is
 *  the sample: fails when it holds an Arabic-script character the arabic
 *  file does not cover. List every weight the pages set in Arabic: a weight
 *  left to the engine's later round gets the latin file only, and its Arabic letters
 *  fall back to a system face. Resolves to the number of files loaded. */
async function loadArabicFonts(faces, text = '') {
  kitStatus('Loading fonts…');
  let loaded = 0;
  try {
    const outside = [...new Set(text)].filter((ch) => /\p{Script=Arabic}/u.test(ch) && !inArabicRange(ch.codePointAt(0)));
    if (outside.length) throw new Error(`Fontsource's arabic files have no ${outside.slice(0, 12).join(' ')}`);
    for (const [family, specs] of Object.entries(faces)) {
      if (!(await isArabicFamily(family))) continue;
      for (const spec of new Set(specs)) {
        const weight = parseInt(spec, 10);
        const style = spec.endsWith('i') ? 'italic' : 'normal';
        const face = new FontFace(family, `url(${await arabicFileUrl(family, weight, style)}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: arabicRange() });
        document.fonts.add(await face.load().catch(() => {
          throw new Error(`Fontsource has no arabic file for ${family} ${weight} ${style}`);
        }));
        loaded++;
      }
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return loaded;
}

/** The PDF font provider for recipes with Arabic faces: a family with an
 *  arabic subset gets its arabic file when its pages set Arabic letters
 *  (`request.codePoints`), then its latin file, and its latin-ext file for
 *  the letters beyond latin (transliteration: ā ḥ ʿ), each marked with its
 *  unicode-range and its place in the order the screen added them (latin
 *  and latin-ext by loadFonts, then arabic): the arabic file also has a
 *  space and brackets, which the browser takes from latin, the file whose
 *  range holds them, and postext-pdf follows it. Any other family goes to
 *  fontsourceProvider (the "pdf" block). */
async function arabicPdfProvider(family, weight, style, request) {
  if (!(await isArabicFamily(family))) return fontsourceProvider(family, weight, style, request);
  const meta = await fontsourceMeta(family);
  const weights = meta.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && !meta.styles.includes('italic') ? 'normal' : style;
  const wanted = [...(request?.codePoints ?? [])];
  const id = fontsourceId(family);
  const subsets = !wanted.length || wanted.some(inArabicRange) ? ['arabic', 'latin'] : ['latin'];
  if (meta.subsets.includes('latin-ext') && wanted.some((cp) => /[Ā-˿Ḁ-ỿ]/u.test(String.fromCodePoint(cp)))) {
    subsets.push('latin-ext');
  }
  const at = await fontsourceAt(id);
  return Promise.all(subsets.map(async (subset) => {
    const url = `${at}files/${id}-${subset}-${w}-${s}.woff2`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Fontsource file ${url} (${res.status})`);
    const bytes = await decompressWoff2(new Uint8Array(await res.arrayBuffer()));
    return Object.assign(bytes, { unicodeRange: subset === 'arabic' ? arabicRange() : kitRanges()[subset],
      order: ['latin', 'latin-ext', 'greek', 'arabic'].indexOf(subset) });
  }));
}

// ─── Kit · comics v2 ── comic pages · postext.dev/cookbook
// The engine letters a comic in a face per language (defaultComicFont:
// Comic Neue, Zen Antique for Japanese, Noto Sans SC, LXGW WenKai TC,
// Playpen Sans Arabic; defaultComicSfxFont: Bangers, Dela Gothic One,
// ZCOOL KuaiLe, Lalezar) and asks for the bold of a shout or a sound effect
// and the italic of an inner voice. Most of these faces ship one weight and
// no italic: this block declares the file Fontsource does ship for those
// variants, so the canvas measures and paints the letters the PDF embeds
// (the providers snap to the shipped file) and not a bold or a slant the
// browser makes up. It also turns the art manifest into panel resources.

/** faces = { 'Comic Neue': ['400', '700'], Bangers: ['400'] }, as for
 *  loadFonts, after it (and after loadCjkFonts or loadArabicFonts for the
 *  faces of those scripts); the whole FONTS object may be passed. List in
 *  FONTS only what Fontsource ships (Bangers: ['400']): loadFonts fails on
 *  the rest. For each family, the regular, bold, italic and bold italic it
 *  lacks are declared with its nearest file (the regular for the bold, the
 *  upright for the italic) and loaded for `text`. A CJK face needs the cjk
 *  block; an Arabic face setting Arabic, the arabic block. Resolves to the
 *  number of variants added. */
async function loadComicFonts(faces, text = '') {
  kitStatus('Loading fonts…');
  let added = 0;
  try {
    for (const family of Object.keys(faces)) {
      const meta = await fontsourceMeta(family);
      if (!meta) throw new Error(`api.fontsource.org did not describe ${family}: reload to try again`);
      const weights = meta.weights?.length ? meta.weights : [400, 700];
      const styles = meta.styles?.length ? meta.styles : ['normal'];
      for (const [weight, style] of [[400, 'normal'], [700, 'normal'], [400, 'italic'], [700, 'italic']]) {
        if ((weights.includes(weight) && styles.includes(style)) || hasFace(family, weight, style)) continue;
        const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
        const s = style === 'italic' && styles.includes('italic') ? 'italic' : 'normal';
        for (const { url, range } of await comicFaceFiles(family, w, s, meta, text)) {
          document.fonts.add(new FontFace(family, `url(${url}) format('woff2')`,
            { weight: String(weight), style, unicodeRange: range }));
        }
        await document.fonts.load(`${style === 'italic' ? 'italic ' : ''}${weight} 16px "${family}"`, text || 'A');
        added++;
      }
    }
  } catch (error) {
    kitFail(error);
    throw error;
  }
  return added;
}

/** The files of a shipped face ({ url, range }): a CJK face's slices (the
 *  cjk block reads them from its stylesheet), else latin, the latin-ext
 *  and greek files `text` needs, and the arabic file when `text` holds
 *  Arabic. */
async function comicFaceFiles(family, weight, style, meta, text) {
  if (meta.subsets?.some((subset) => /^(chinese|japanese|korean)/.test(subset))) {
    if (typeof cjkSlices !== 'function') throw new Error(`${family} is a CJK face: list the cjk kit block`);
    return (await cjkSlices(family, weight, style)).map(({ url, range }) => ({ url, range }));
  }
  const id = fontsourceId(family);
  const at = await fontsourceAt(id);
  const file = (subset) => `${at}files/${id}-${subset}-${weight}-${style}.woff2`;
  const files = ['latin', ...kitSubsetsFor(text, meta)].map((subset) => ({ url: file(subset), range: comicRange(subset) }));
  if (meta.subsets?.includes('arabic') && /\p{Script=Arabic}/u.test(text)) {
    if (typeof arabicRange !== 'function') throw new Error(`${family} sets Arabic: list the arabic kit block`);
    files.unshift({ url: file('arabic'), range: arabicRange() });
  }
  return files;
}

/** The unicode-range loadFonts gives a Fontsource file. A function, not a
 *  const: the kit is inlined after the recipe's top-level awaits. */
function comicRange(subset) {
  return {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
    greek: 'U+0370-03FF',
  }[subset];
}

/** The PDF font provider of a comic in any script: a CJK face goes to
 *  cjkPdfProvider, an Arabic face to arabicPdfProvider, any other to
 *  fontsourceProvider (the "pdf" block). Each embeds the shipped weight
 *  and style nearest to the one asked for, the file loadComicFonts
 *  declared for the canvas. */
async function comicPdfProvider(family, weight, style, request) {
  const subsets = (await fontsourceMeta(family))?.subsets ?? [];
  if (subsets.some((subset) => /^(chinese|japanese|korean)/.test(subset))) {
    if (typeof cjkPdfProvider !== 'function') throw new Error(`${family} is a CJK face: list the cjk kit block`);
    return cjkPdfProvider(family, weight, style, request);
  }
  if (subsets.includes('arabic') && typeof arabicPdfProvider === 'function') {
    return arabicPdfProvider(family, weight, style, request);
  }
  return fontsourceProvider(family, weight, style, request);
}

/** A panel picture as a resource for art= (and pop=): loads `url`
 *  (write asset('lh-arrive.jpg') in the call, so the lint checks the file)
 *  and declares it with `meta`, its entry in the art manifest:
 *  { width, height, alt, safeArea, anchors, avoid, faces }. The safe area
 *  is what every crop keeps, the anchors the speakers' mouths, heads and
 *  faces, the avoid zones what no balloon covers unless a panel has no
 *  other room, and `faces` the faces of the people who do not speak, which
 *  no balloon ever covers; all in fractions of the picture, the same in
 *  every language. Without width and height, the picture's own size. Needs
 *  the images block. Resolves to the resource. */
async function comicPanel(id, url, meta = {}) {
  const fileId = decodeURIComponent(url.split('/').pop());
  await loadImage(fileId, url);
  let { width, height } = meta;
  if (!width || !height) {
    const bitmap = await createImageBitmap(new Blob([imageBytes(fileId)]));
    ({ width, height } = bitmap);
    bitmap.close();
  }
  return {
    id, typeId: meta.typeId ?? 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0,
    bitmap: { fileId, format: /\.png$/i.test(fileId) ? 'png' : 'jpeg', width, height },
    ...(meta.alt && { altText: meta.alt }),
    ...(meta.safeArea && { safeArea: meta.safeArea }),
    ...(meta.anchors?.length && { anchors: meta.anchors }),
    ...(meta.avoid?.length && { avoid: meta.avoid }),
    ...(meta.faces?.length && { faces: meta.faces }),
  };
}

// ─── /Kit ───────────────────────────────────────────────────────────────────────
```

## Varianti

### Porta al vivo anche tutta la fascia inferiore

```diff
-::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%"}
+::panel{art=sp-tomas pop=sp-tomas-pop focus="45% 50%" bleed="bottom start"}
```

### Dai alla vignetta inserita una cornice bianca

Uno stile di vignetta con nome cambia una sola vignetta; `style=` sulla vignetta lo sceglie.

```diff
   panel: { borderWidth: pt(1.2), borderColor: col('ink'), background: col('paper') },
+  panelStyles: [{ id: 'framed', borderWidth: pt(3), borderColor: col('paper') }],
```

## Errori frequenti

- Il livello pop deve avere esattamente le dimensioni in pixel dell’immagine della vignetta: Postext lo ritaglia con la stessa finestra, quindi una sagoma più piccola finirebbe nel posto sbagliato.
- L’abbondanza richiede `page.bleed`; senza, una vignetta al vivo si ferma al taglio.
- Un effetto sonoro accanto a un bordo al vivo può finire nell’abbondanza, oltre il taglio, dove la taglierina lo taglia. Il giapponese ザッバーン è una colonna alta cinque caratteri, quindi è fissato più in basso degli effetti latini, a `60% 44%`.

## Crediti

- Ricetta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Immagini: Vignetta: il faro nella tempesta (splash): Generated With Diffusion Models, originale
- Immagini: Vignetta: Maya alla finestra (vignetta inserita): Generated With Diffusion Models, originale
- Immagini: Vignetta: l’onda sugli scogli: Generated With Diffusion Models, originale
- Immagini: Vignetta: il guardiano sul ballatoio: Generated With Diffusion Models, originale
- Immagini: Vignetta: il gabbiano che vola oltre il bordo (livello trasparente): Generated With Diffusion Models, originale
- Caratteri: Comic Neue (OFL-1.1), Bangers (OFL-1.1), Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), ZCOOL QingKe HuangYou (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1)
- Codice: MIT · Contenuto di esempio: CC-BY-4.0

## Ricette correlate

- [Nº 144 · Le stesse vignette, tre suddivisioni della pagina](https://postext.dev/it/cookbook/comic-page-splitters.md): Cinque vignette impaginate con tre alberi di suddivisione: l’attributo split di :::page taglia la pagina e la zona sicura tiene il soggetto in ogni cella. · Livello 2 (Intermedio) · Fumetti
- [Nº 155 · Una pagina di Pepper&Carrot riletterata dalla trascrizione](https://postext.dev/it/cookbook/pepper-and-carrot-page.md): Due pagine di Pepper&Carrot (CC BY 4.0) ricomposte dalle tavole senza testo di David Revoy e dalle traduzioni ufficiali, nuvolette letterate in dieci lingue. · Livello 3 (Avanzato) · Fumetti
- [Nº 145 · Ogni tipo di nuvoletta in una pagina col faro](https://postext.dev/it/cookbook/balloon-kinds.md): Una pagina di fumetto con fumetti parlati, pensieri, sussurri, urla, radio, didascalie, voce interiore, nota e onomatopee, ognuno nominato tra graffe. · Livello 2 (Intermedio) · Fumetti