# Quadern d’activitats amb requadres que creixen

> Un quadern de ciències fet amb plantilles: els requadres d’una pila creixen amb el text, les línies van en marcs buits i el projecte passa de pàgina.

- Versió HTML: https://postext.dev/ca/cookbook/activity-book-growing-boxes
- Recepta Núm. 159 · Requadres i notes · Nivell 3 (Avançat) · Sortides: Canvas, PDF
- Gèneres: Quaderns i exercicis, Llibres de text
- Requereix postext ≥ 1.39.0, postext-pdf ≥ 1.39.0 · provada amb 1.39.0, postext-pdf 1.39.0 el 2026-10-17
- Pàgines: [1](https://postext.dev/cookbook/activity-book-growing-boxes/es/p01.webp?v=80302fc7), [2](https://postext.dev/cookbook/activity-book-growing-boxes/es/p02.webp?v=80302fc7), [3](https://postext.dev/cookbook/activity-book-growing-boxes/es/p03.webp?v=80302fc7), [4](https://postext.dev/cookbook/activity-book-growing-boxes/es/p04.webp?v=80302fc7), [5](https://postext.dev/cookbook/activity-book-growing-boxes/es/p05.webp?v=80302fc7)
- PDF: https://postext.dev/cookbook/activity-book-growing-boxes/es/activity-book-growing-boxes.pdf?v=80302fc7
- Obre al Sandbox: https://postext.dev/ca/sandbox#recipe=activity-book-growing-boxes&lang=es (.postext: https://postext.dev/cookbook/activity-book-growing-boxes/es/activity-book-growing-boxes.postext)
- Última actualització: 2026-10-17
- Altres idiomes: [en](https://postext.dev/en/cookbook/activity-book-growing-boxes.md), [es](https://postext.dev/es/cookbook/activity-book-growing-boxes.md), [de](https://postext.dev/de/cookbook/activity-book-growing-boxes.md), [fr](https://postext.dev/fr/cookbook/activity-book-growing-boxes.md), [it](https://postext.dev/it/cookbook/activity-book-growing-boxes.md), [pt](https://postext.dev/pt/cookbook/activity-book-growing-boxes.md), [zh](https://postext.dev/zh/cookbook/activity-book-growing-boxes.md), [ja](https://postext.dev/ja/cookbook/activity-book-growing-boxes.md), [ar](https://postext.dev/ar/cookbook/activity-book-growing-boxes.md)

## En poques paraules

Cinc pàgines d’un quadern de ciències sobre l’aigua. Cada pregunta va en un requadre amb línies a sota. Si la pregunta és més llarga, el requadre creix i baixa la resta. Un projecte llarg continua a la pàgina següent.

## Què compondràs

Cinc pàgines d’*El agua, de viaje*, la unitat 3 d’un quadern de Ciències de la Natura inventat per a 4t de Primària, en 210 × 280 mm. A la coberta, una pintura del cicle de l’aigua, generada amb un model de difusió, arriba fins a la sang i es fon amb el paper al peu; cinc fletxes vectorials s’aguanten sobre els seus elements, sobre un títol de 54 pt i una línia per al nom. Totes les fitxes surten de la mateixa plantilla de pàgina: la línia de la unitat, una banda blava amb el títol, un text breu al costat d’una vinyeta pintada i tres requadres d’activitat en blau pàl·lid amb una pestanya numerada. Sota el primer i el tercer requadre hi ha les línies per respondre. Cada requadre fa el que fa el seu text, així que la fitxa francesa, una línia més llarga aquí i allà, baixa les línies més que l’anglesa sense que canviï cap posició de la plantilla. El projecte, un pluviòmetre fet amb una ampolla, té més passos dels que caben en una pàgina: el requadre es talla al peu amb *Continúa* i continua a dalt d’una pàgina afegida, amb sis línies per a les observacions. Totes les paraules, també les de les pestanyes i el títol de les observacions, són al Markdown.

**Aquesta recepta respon a:**

- Com faig que els requadres d’activitat creixin amb el text i que un de llarg continuï a la pàgina següent?
- Com faig que una activitat que no hi cap continuï a la pàgina següent, amb una marca de «Continua»?
- Com faig una fitxa d'exercicis: línies per omplir, caixes de resposta, bancs de paraules, llistes de comprovació?

## La resposta curta

```js
// script.js, línies 49–75
// An empty frame is an answer space: the Markdown sends it nothing (optional: no slotEmpty).
// Its `rules` draw a line at the foot of every LINE mm of its height, so the lines are part
// of the frame and move with it when a box above grows. minHeight too: a box that runs out of
// room may not take the lines away from the child.
const answer = (name, lines) => ({ name, optional: true, width: mm(W), height: mm(LINE * lines),
  minHeight: mm(LINE * lines),
  rules: { every: mm(LINE), color: col('rule'), width: pt(0.75) } });
// A box is as tall as its text, never less than drawn: a longer text makes it taller and
// pushes everything after it in the group down the page.
const box = (name, style, minHeight) => ({ name, style, width: mm(W), minHeight: mm(minHeight) });
const sheet = {
  id: 'ficha',
  decoration: { elements: [kicker] },
  frames: [
    ...opening,
    // The group starts where its first box is placed: under the text, and runs down from there.
    { ...box('act-1', 'actividad', 22), placement: at('#texto', 'below', 0, 6) },
    answer('lineas-1', 3),
    box('act-2', 'actividad', 22),
    // The last box goes on overleaf, with the answer space after it, when its text outgrows
    // the page; the other two push it down instead.
    { ...box('act-3', 'actividad', 22), overflow: { continueIn: 'next-page' } },
    answer('lineas-3', 2),
  ],
  groups: [{ name: 'actividades', kind: 'stack', gap: mm(4.5),
    frames: ['act-1', 'lineas-1', 'act-2', 'act-3', 'lineas-3'] }],
};
```

## Ingredients

**Ensenya**

- [Marcs que creixen en un grup](https://postext.dev/ca/docs/composed-pages.md#quan-el-text-creix): Una pila o una fila de marcs d’una pàgina composta: un marc tan alt com el seu text, mai per sota del seu minHeight, empeny els marcs que el segueixen i el que hi va ancorat.
- [Marcs que continuen a la pàgina següent](https://postext.dev/ca/docs/composed-pages.md#quan-el-text-continua): overflow.continueIn porta el que un marc no pot contenir a una pàgina afegida després de la seva pàgina composta, feta amb un overflowTemplate, amb la marca de continuació de la llengua al tall.
- [Pàgines compostes](https://postext.dev/ca/docs/composed-pages.md#pàgines-compostes): Una pàgina que surt d’una plantilla de marcs amb nom a la configuració i s’omple amb una tanca ::::page el contingut de la qual anomena cada marc pel seu slot.

**També fa servir**

- [Espai vertical explícit](https://postext.dev/ca/docs/document-format-directives.md#space)
- [Chips en línia](https://postext.dev/ca/docs/configuration-styles.md#estils-de-xip)
- [Requadres](https://postext.dev/ca/docs/configuration-callouts.md#estils-davís)
- [Pestanyes numerades als requadres](https://postext.dev/ca/docs/configuration-callouts.md#estils-davís)
- [Textos, filets i caixes als dissenys de pàgina](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus)
- [Imatges als dissenys de pàgina](https://postext.dev/ca/docs/configuration-headers-footers.md#elements-dimatge)
- [Estils de títol](https://postext.dev/ca/docs/configuration-styles.md#estils-dencapçalament)
- [Llistes de pics i de comprovació](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-no-ordenades)
- [Llistes numerades](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-ordenades)
- [Marges simètrics](https://postext.dev/ca/docs/configuration-page-layout.md#marges-simètrics-mirall)
- [Capçaleres i folis](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus)
- [Paleta de color semàntica](https://postext.dev/ca/docs/configuration-fonts-colors-viewers.md#paleta-de-colors)
- [Pàgines en un canvas](https://postext.dev/ca/docs/configuration-programmatic-usage.md#renderitzar-una-pàgina-a-un-bitmap)
- [Exportació a PDF](https://postext.dev/ca/docs/configuration-pdf-output.md#generació-de-pdf)
- [Equilibri de columnes](https://postext.dev/ca/docs/configuration-page-flow.md#equilibratge-de-columnes)
- [Decoració ancorada als marcs](https://postext.dev/ca/docs/composed-pages.md#decoració-capçaleres-i-capes)
- [Atributs de títol](https://postext.dev/ca/docs/document-format.md#atributs-dencapçalament)
- [Figures just aquí](https://postext.dev/ca/docs/document-format-resources.md#inserció-en-bloc-opcional-collocació-en-línia-explícita)
- [Fonts incrustades al PDF](https://postext.dev/ca/docs/configuration-pdf-output.md#per-què-un-proveïdor-de-fonts)
- [Tipus de recurs propis](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs)
- [Figures i taules com a recursos](https://postext.dev/ca/docs/document-format-resources.md#recursos)
- [Marcs de text enllaçats](https://postext.dev/ca/docs/composed-pages.md#encadenar-marcs)

**La configuració d'un cop d'ull**

- [`bodyText`](https://postext.dev/ca/docs/configuration-text.md#text-de-cos), [`calloutStyles`](https://postext.dev/ca/docs/configuration-callouts.md#estils-davís), [`chipStyles`](https://postext.dev/ca/docs/configuration-styles.md#estils-de-xip), [`colorPalette`](https://postext.dev/ca/docs/configuration-fonts-colors-viewers.md#paleta-de-colors), [`footer`](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus), [`header`](https://postext.dev/ca/docs/configuration-headers-footers.md#capçaleres-i-peus), [`headingStyles`](https://postext.dev/ca/docs/configuration-styles.md#estils-dencapçalament), [`headings`](https://postext.dev/ca/docs/configuration-headings.md#encapçalaments), [`layout`](https://postext.dev/ca/docs/configuration-page-layout.md#disposició), [`locale`](https://postext.dev/ca/docs/configuration-language.md#partició-de-mots), [`orderedLists`](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-ordenades), [`page`](https://postext.dev/ca/docs/configuration-page-layout.md#pàgina), [`pageTemplates`](https://postext.dev/ca/docs/configuration-composed-pages.md#plantilles-de-pàgina), [`resourceTypes`](https://postext.dev/ca/docs/configuration-resources.md#tipus-de-recurs), [`unorderedLists`](https://postext.dev/ca/docs/configuration-lists-math.md#llistes-no-ordenades)

**API**

- [`buildDocumentWithFonts`](https://postext.dev/ca/docs/configuration-programmatic-usage.md#carregar-les-fonts-abans-de-compondre), [`decompressWoff2`](https://postext.dev/ca/docs/configuration-pdf-output.md#proveïdor-de-fonts-al-navegador-fontsource--woff2), [`registerResourceImage`](https://postext.dev/ca/docs/architecture.md#superfície-dapi), [`renderPageToCanvas`](https://postext.dev/ca/docs/configuration-programmatic-usage.md#renderitzar-una-pàgina-a-un-bitmap), [`renderToPdf`](https://postext.dev/ca/docs/configuration-pdf-output.md#generació-de-pdf)

**Tipus de lletra**

- Andika (OFL-1.1), Baloo 2 (OFL-1.1), Lexend (OFL-1.1)

## Elaboració

### 1 · Aboca cada activitat al seu requadre pel nom

La plantilla és [la resposta curta](https://postext.dev/ca/cookbook/activity-book-growing-boxes.md#la-resposta-curta) de dalt. Al Markdown, cada fitxa és una tanca `::::page`: el primer títol va al marc que té `takes: 'h1'`, el paràgraf al marc de flux i cada `:::frame{slot="…"}` al marc d’aquest nom, amb les paraules de la pestanya a `label`. Els marcs de resposta no reben res, i per això porten `optional: true`: un marc buit donaria l’avís `slotEmpty`. Una activitat de dibuix guarda el seu espai en blanc dins el mateix requadre amb `:::space{lines=3}`, perquè l’espai que necessita el dibuix forma part de la pregunta.

```md
:::frame{slot="act-1" label="1 · Lee y contesta"}
Marta vive en Zaragoza. El agua de su grifo sale del río Ebro…
:::
```

### 2 · Deixa que la pila mogui les línies amb els requadres

Cada requadre té un `minHeight` de 22 mm, l’alçada a què està dibuixat, i per sobre una alçada `auto`. El grup col·loca els cinc marcs l’un sota l’altre, a 4,5 mm, a partir del lloc on `act-1` es col·loca sota el text, de manera que un requadre més alt baixa tot el que el segueix. Les línies són del mateix marc buit: el seu `rules` dibuixa una línia al peu de cada 8 mm de la seva alçada, sota el text, de manera que les línies es mouen amb el marc i un espai de resposta més llarg és un marc més alt. Dona als marcs de resposta un `minHeight` igual a la seva alçada: quan un grup es queda sense lloc, l’[escala de reajustament](https://postext.dev/ca/docs/composed-pages.md#quan-tot-i-així-no-hi-cap) recupera espai dels marcs del grup fins al seu mínim, i el mínim d’un marc buit és res, amb la qual cosa les línies quedarien damunt del requadre següent. L’últim requadre de la fitxa, `act-3`, continua a la pàgina següent (`overflow.continueIn: 'next-page'`) quan el seu text no hi cap, i les línies de resposta que té a sota se’n van amb ell.

### 3 · Porta el projecte a la pàgina següent

```js
// script.js, línies 79–106
const project = {
  id: 'proyecto',
  overflowTemplate: 'proyecto-sigue',
  decoration: { elements: [kicker] },
  frames: [
    ...opening,
    { ...box('material', 'material', 20), placement: at('#texto', 'below', 0, 9) },
    // As tall as its text, never past the foot of the page, at full size: the rest ends
    // with the language's mark (Continúa, Continued, À suivre) and goes on on an added page.
    { name: 'pasos', style: 'proyecto', width: mm(W), overflow: { continueIn: 'next-page' } },
  ],
  groups: [{ name: 'trabajo', kind: 'stack', gap: mm(9), frames: ['material', 'pasos'] }],
};
// The added page: the rest of the steps at the head, then lines for the child's notes,
// under a heading the page fence names (notas="…").
const projectGoesOn = {
  id: 'proyecto-sigue',
  decoration: { elements: [kicker,
    { kind: 'text', id: 'notas-titulo', content: '{attr.notas}', fontFamily: DISPLAY,
      fontSize: pt(15), fontWeight: 700, color: col('sea'),
      placement: { ...at('#notas', 'top-left', 0, -3), size: { width: mm(W) } } }] },
  frames: [
    { name: 'pasos', style: 'proyecto', width: mm(W),
      placement: at('container', 'top-left', 0, 9) },
    answer('notas', 6),
  ],
  groups: [{ name: 'trabajo', kind: 'stack', gap: mm(16), frames: ['pasos', 'notas'] }],
};
```

El requadre dels passos no té alçada fixa: fa el que fa el seu text i s’atura al peu de l’àrea. Un marc que pot continuar en una altra pàgina continua abans de compondre el seu text més petit, així que el requadre es talla entre dues línies a cos complet, acaba amb la marca de la llengua (*Continúa*, *Continued*, *À suivre*, segons `locale`) i continua al marc del mateix nom d’una pàgina de `proyecto-sigue` ([quan el text continua](https://postext.dev/ca/docs/composed-pages.md#quan-el-text-continua)). La pàgina afegida dibuixa les línies de les observacions sota la resta del requadre, amb el títol que la tanca dona a `notas="Mis observaciones"`, de manera que les paraules són al Markdown i canvien amb cada edició.

### 4 · Dibuixa la coberta fins a la sang

```js
// script.js, línies 110–131
// and a line for the child's name
const cover = {
  id: 'portada', header: false, footer: false,
  decoration: { elements: [
    { kind: 'image', id: 'cielo', resourceId: 'portada', decorative: true,
      placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(178) } } },
    // The arrows are vector, over the painting: the same frame, so they stay on its features.
    { kind: 'image', id: 'ciclo', resourceId: 'ciclo', decorative: true,
      placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(178) } } },
    { kind: 'rule', id: 'nombre-linea', direction: 'horizontal', thickness: pt(1),
      color: col('sea'), placement: { ...at('#nombre', 'bottom-left', 0, 1),
        size: { width: mm(W) } } },
  ] },
  frames: [
    { name: 'titulo', takes: 'h1', width: mm(W), placement: at('container', 'top-left', 0, 162) },
    { name: 'subtitulo', flow: true, width: mm(W) },
    { name: 'nombre', style: 'campo', width: mm(W), minHeight: mm(12) },
    { name: 'colofon', style: 'colofon', width: mm(W), placement: at('container', 'bottom-left') },
  ],
  groups: [{ name: 'portada', kind: 'stack', gap: mm(4),
    frames: ['titulo', 'subtitulo', 'nombre'] }],
};
```

La coberta també és una pàgina composta: el dibuix és decoració ancorada a la sang, i el títol, la línia de la col·lecció i el camp del nom formen una pila que comença 162 mm per sota de la caixa. El filet del nom va ancorat al peu del seu marc, de manera que una etiqueta que ocupi dues línies en una altra llengua manté la línia sota les paraules. `header: false` i `footer: false` deixen la coberta sense foli.

## La recepta completa

Un sol fitxer, compost a partir de la carpeta de la recepta amb el text d'exemple i el kit comú del Receptari ja inclosos; construeix la seva pròpia pàgina. Per executar-lo, posa'l en un `<script type="module">` d'una pàgina buida o enganxa'l al tauler JS d'un pen nou de CodePen (com a mòdul). Importa postext des d'esm.sh, així que no cal instal·lar ni compilar res.

- Carpeta de la recepta: https://github.com/drnachio/postext/tree/main/cookbook/activity-book-growing-boxes

### script.js

```js
// ═══ Postext Cookbook · Nº 159 · Activity book with boxes that grow ══════════════
// https://postext.dev/en/cookbook/activity-book-growing-boxes
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Andika, Baloo 2, Lexend (SIL OFL 1.1) · Needs postext ≥ 1.39.0
import {
  buildDocumentWithFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'es'; // @lang: the language of the sample document ('en' | 'es' | 'fr')
const RECIPE = 'activity-book-growing-boxes';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: one ink, the water blue, the sun, and the pale fields of the boxes
const palette = {
  ink: '#1f2d38', // text
  sea: '#1d659c', // titles, tabs, list numbers
  sky: '#e2f0f9', // activity boxes
  sun: '#f0a531', // the project's box
  sand: '#fcf0d8', // the materials box
  rule: '#93bcd8', // answer lines, blanks
  paper: '#ffffff',
};
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: 'sea (defaults)', value: { hex: palette.sea, model: 'hex' } },
];
// #endregion

const [TEXT, DISPLAY, LABEL] = ['Andika', 'Baloo 2', 'Lexend']; // Andika: for early readers
const W = 174; // mm: the width of the type area, and of every box
const LINE = 8; // mm between two answer lines: room for a child's handwriting
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });

// The head every sheet shares: the unit over the title band, the text with its drawing.
const kicker = { kind: 'text', id: 'tema', content: '{attr.tema}', fontFamily: LABEL,
  fontSize: pt(8.5), fontWeight: 600, color: col('sea'), textTransform: 'uppercase',
  letterSpacing: pt(1.4), placement: at('container', 'top-left') };
const opening = [
  { name: 'titulo', takes: 'h1', style: 'banda', width: mm(W),
    placement: at('container', 'top-left', 0, 6) },
  { name: 'texto', flow: true, width: mm(W - 52), minHeight: mm(36),
    placement: at('#titulo', 'below', 0, 4) },
  { name: 'dibujo', width: mm(44), placement: at('#titulo', 'below', W - 44, 4) },
];

// #region answer: boxes in a stack grow with their text; empty ruled frames hold the answers
// An empty frame is an answer space: the Markdown sends it nothing (optional: no slotEmpty).
// Its `rules` draw a line at the foot of every LINE mm of its height, so the lines are part
// of the frame and move with it when a box above grows. minHeight too: a box that runs out of
// room may not take the lines away from the child.
const answer = (name, lines) => ({ name, optional: true, width: mm(W), height: mm(LINE * lines),
  minHeight: mm(LINE * lines),
  rules: { every: mm(LINE), color: col('rule'), width: pt(0.75) } });
// A box is as tall as its text, never less than drawn: a longer text makes it taller and
// pushes everything after it in the group down the page.
const box = (name, style, minHeight) => ({ name, style, width: mm(W), minHeight: mm(minHeight) });
const sheet = {
  id: 'ficha',
  decoration: { elements: [kicker] },
  frames: [
    ...opening,
    // The group starts where its first box is placed: under the text, and runs down from there.
    { ...box('act-1', 'actividad', 22), placement: at('#texto', 'below', 0, 6) },
    answer('lineas-1', 3),
    box('act-2', 'actividad', 22),
    // The last box goes on overleaf, with the answer space after it, when its text outgrows
    // the page; the other two push it down instead.
    { ...box('act-3', 'actividad', 22), overflow: { continueIn: 'next-page' } },
    answer('lineas-3', 2),
  ],
  groups: [{ name: 'actividades', kind: 'stack', gap: mm(4.5),
    frames: ['act-1', 'lineas-1', 'act-2', 'act-3', 'lineas-3'] }],
};
// #endregion

// #region continue: the project's steps go on on a page of their own, after their mark
const project = {
  id: 'proyecto',
  overflowTemplate: 'proyecto-sigue',
  decoration: { elements: [kicker] },
  frames: [
    ...opening,
    { ...box('material', 'material', 20), placement: at('#texto', 'below', 0, 9) },
    // As tall as its text, never past the foot of the page, at full size: the rest ends
    // with the language's mark (Continúa, Continued, À suivre) and goes on on an added page.
    { name: 'pasos', style: 'proyecto', width: mm(W), overflow: { continueIn: 'next-page' } },
  ],
  groups: [{ name: 'trabajo', kind: 'stack', gap: mm(9), frames: ['material', 'pasos'] }],
};
// The added page: the rest of the steps at the head, then lines for the child's notes,
// under a heading the page fence names (notas="…").
const projectGoesOn = {
  id: 'proyecto-sigue',
  decoration: { elements: [kicker,
    { kind: 'text', id: 'notas-titulo', content: '{attr.notas}', fontFamily: DISPLAY,
      fontSize: pt(15), fontWeight: 700, color: col('sea'),
      placement: { ...at('#notas', 'top-left', 0, -3), size: { width: mm(W) } } }] },
  frames: [
    { name: 'pasos', style: 'proyecto', width: mm(W),
      placement: at('container', 'top-left', 0, 9) },
    answer('notas', 6),
  ],
  groups: [{ name: 'trabajo', kind: 'stack', gap: mm(16), frames: ['pasos', 'notas'] }],
};
// #endregion

// #region cover: a painted landscape to the bleed with the cycle's arrows over it, the title,
// and a line for the child's name
const cover = {
  id: 'portada', header: false, footer: false,
  decoration: { elements: [
    { kind: 'image', id: 'cielo', resourceId: 'portada', decorative: true,
      placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(178) } } },
    // The arrows are vector, over the painting: the same frame, so they stay on its features.
    { kind: 'image', id: 'ciclo', resourceId: 'ciclo', decorative: true,
      placement: { ...at('bleed', 'top-left'), size: { width: 'fill', height: mm(178) } } },
    { kind: 'rule', id: 'nombre-linea', direction: 'horizontal', thickness: pt(1),
      color: col('sea'), placement: { ...at('#nombre', 'bottom-left', 0, 1),
        size: { width: mm(W) } } },
  ] },
  frames: [
    { name: 'titulo', takes: 'h1', width: mm(W), placement: at('container', 'top-left', 0, 162) },
    { name: 'subtitulo', flow: true, width: mm(W) },
    { name: 'nombre', style: 'campo', width: mm(W), minHeight: mm(12) },
    { name: 'colofon', style: 'colofon', width: mm(W), placement: at('container', 'bottom-left') },
  ],
  groups: [{ name: 'portada', kind: 'stack', gap: mm(4),
    frames: ['titulo', 'subtitulo', 'nombre'] }],
};
// #endregion

// A box with a tab: the tab's words come from the Markdown (label="…").
const tabbed = (id, fill, tab, tabInk, extra = {}) => ({
  id, backgroundEnabled: true, background: col(fill), borderRadius: mm(3),
  border: { enabled: false },
  padding: { top: mm(3), right: mm(5), bottom: mm(3.5), left: mm(5) },
  label: { position: 'top-left', background: col(tab), color: col(tabInk), fontFamily: LABEL,
    fontSize: pt(9), fontWeight: 600, height: mm(6), paddingX: mm(3), offset: mm(6),
    inset: mm(4), rule: { enabled: false, color: col(tab) } },
  body: { fontFamily: TEXT, fontSize: pt(11.5), lineHeight: pt(16), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), firstLineIndent: pt(0) },
  ...extra,
});
const plain = (id, size, lead, color, extra = {}) => ({ id, backgroundEnabled: false,
  border: { enabled: false }, padding: { top: mm(0), right: mm(0), bottom: mm(0), left: mm(0) },
  body: { fontFamily: LABEL, fontSize: pt(size), lineHeight: pt(lead), color: col(color),
    boldColor: col(color), italicColor: col(color), firstLineIndent: pt(0) }, ...extra });

const folio = (id, parity, edge, x) => ({ kind: 'text', id, content: '{pageNumber}', parity,
  fontFamily: DISPLAY, fontSize: pt(11), fontWeight: 800, color: col('paper'),
  align: 'center', box: { backgroundColor: col('sea'), borderRadius: mm(4) },
  placement: { ...at('page', edge, x, -9), size: { width: mm(8), height: mm(8) } } });
const bookTitle = (id, parity, edge, x) => ({ kind: 'text', id, content: '{title} · {subtitle}',
  parity, fontFamily: LABEL, fontSize: pt(7.5), fontWeight: 500, color: col('sea'),
  textTransform: 'uppercase', letterSpacing: pt(1.1), placement: at('page', edge, x, -11) });

const config = {
  locale: t({ es: 'es', en: 'en-gb', fr: 'fr' }), // hyphenation and the continuation mark
  resourceTypes: [{ id: 'dibujo', name: t({ es: 'Dibujo', en: 'Drawing', fr: 'Dessin' }),
    shortLabel: '', numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal',
    captionPrefix: '', defaultPlacement: { position: 'here' } }],
  colorPalette,
  page: {
    sizePreset: 'custom', width: mm(210), height: mm(280), dpi: 150,
    margins: { top: mm(20), bottom: mm(22), left: mm(20), right: mm(16), mirror: true },
  },
  layout: { layoutType: 'single' },
  bodyText: {
    fontFamily: TEXT, fontSize: pt(11.5), lineHeight: pt(16), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true,
    hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true,
  },
  headings: {
    fontFamily: DISPLAY, color: col('sea'), fontWeight: 700,
    balancing: { enabled: false },
    levels: [
      // Every sheet is a composed page, which starts a page of its own.
      { level: 1, fontSize: pt(25), lineHeight: pt(30), fontWeight: 800, color: col('paper'),
        breakBefore: { enabled: false }, marginTop: pt(0), marginBottom: pt(0) },
      { level: 3, fontSize: pt(13.5), lineHeight: pt(17), marginTop: pt(6), marginBottom: pt(2) },
    ],
  },
  headingStyles: [{ id: 'portada', fontSize: pt(54), lineHeight: pt(54), fontWeight: 800,
    color: col('sea'), marginTop: pt(0), marginBottom: pt(0) }],
  unorderedLists: { bulletChar: '•', color: col('sea'), fontWeight: 700, itemSpacing: pt(3) },
  orderedLists: { numberFormat: 'arabic', fontFamily: DISPLAY, fontWeight: 800, color: col('sea'),
    itemSpacing: pt(4) },
  chipStyles: [
    // An empty chip, :chip[ ]{style="hueco"}, is a blank to write in: padding and an outline.
    { id: 'hueco', fontFamily: LABEL, background: col('paper'), borderColor: col('rule'),
      borderWidth: pt(0.9), borderRadius: mm(1.4), paddingX: mm(13), paddingY: em(0.1) },
    { id: 'casilla', fontFamily: LABEL, background: col('paper'), borderColor: col('sea'),
      borderWidth: pt(0.9), borderRadius: mm(1), paddingX: em(0.55), paddingY: em(0.05),
      gap: em(0.5) },
  ],
  calloutStyles: [
    tabbed('actividad', 'sky', 'sea', 'paper'),
    tabbed('material', 'sand', 'sun', 'ink'),
    tabbed('proyecto', 'paper', 'sun', 'ink',
      { border: { enabled: true, color: col('sun'), width: pt(1.5) } }),
    { ...plain('banda', 25, 30, 'paper'), backgroundEnabled: true, background: col('sea'),
      borderRadius: mm(3), padding: { top: mm(2.5), right: mm(5), bottom: mm(3), left: mm(5) } },
    plain('campo', 10, 14, 'sea', { padding: { top: mm(5), right: mm(0), bottom: mm(0),
      left: mm(0) } }),
    plain('colofon', 7.5, 10, 'ink'),
  ],
  header: { elements: [] },
  footer: { elements: [
    folio('folio-par', 'even', 'bottom-left', 20),
    bookTitle('titulo-par', 'even', 'bottom-left', 32),
    folio('folio-impar', 'odd', 'bottom-right', -20),
    bookTitle('titulo-impar', 'odd', 'bottom-right', -32),
  ] },
  pageTemplates: [cover, sheet, project, projectGoesOn],
};

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
title: "El agua, de viaje"
subtitle: "Cuaderno de actividades"
---

::::page{template="portada"}
# El agua, de viaje {style="portada"}

Cuaderno de actividades de Ciencias de la Naturaleza · 4.º de Primaria · Unidad 3

:::frame{slot="nombre"}
Nombre y apellidos
:::

:::frame{slot="colofon"}
Compuesto en Andika, Baloo 2 y Lexend (SIL OFL) · Texto original (CC BY 4.0) · Ilustraciones generadas con modelos de difusión
:::
::::

::::page{template="ficha" tema="Unidad 3 · Ficha 1"}
# ¿Dónde está el agua?

Casi tres cuartas partes de la Tierra están cubiertas de agua. La mayoría es **agua salada** y llena los mares y los océanos. El **agua dulce**, la que bebemos, es muy poca: corre por los ríos, descansa en los lagos, se esconde bajo el suelo o está helada en los polos.

::resource{id="planeta" slot="dibujo"}

:::frame{slot="act-1" label="1 · Lee y contesta"}
Marta vive en Zaragoza. El agua de su grifo sale del río Ebro, pasa por una planta potabilizadora y viaja por tuberías hasta su casa. ¿De dónde llega el agua que sale por tu grifo? ¿Por qué crees que hay que limpiarla antes de beberla?
:::

:::frame{slot="act-2" label="2 · Completa"}
- El agua de los mares y los océanos es :chip[ ]{style="hueco"} y no se puede beber.
- En los ríos, los lagos y bajo el suelo hay agua :chip[ ]{style="hueco"}.
- En los polos, casi toda el agua está en forma de :chip[ ]{style="hueco"}.
:::

:::frame{slot="act-3" label="3 · Dibuja y escribe"}
Dibuja un lugar de tu localidad donde haya agua: una fuente, un río, un embalse o la playa. Después escribe en las líneas cómo se llama y para qué lo usan las personas.

:::space{lines=3}
:::
::::

::::page{template="ficha" tema="Unidad 3 · Ficha 2"}
# Sólida, líquida y gaseosa

El agua cambia de estado con el calor y con el frío. Por debajo de cero grados se convierte en **hielo**, que es sólido. Cuando se calienta, el hielo se funde y vuelve a ser **líquido**. Si hierve, se transforma en **vapor**, un gas que no vemos.

::resource{id="estados" slot="dibujo"}

:::frame{slot="act-1" label="1 · Observa"}
Pon un cubito de hielo en un plato y déjalo encima de la mesa. Míralo cada diez minutos durante media hora. ¿Qué le pasa al cubito? ¿Qué hay en el plato al final? Escribe por qué crees que ocurre.
:::

:::frame{slot="act-2" label="2 · Marca las frases verdaderas"}
- :chip[ ]{style="casilla"} El hielo es agua en estado sólido.
- :chip[ ]{style="casilla"} El vapor de agua se puede coger con la mano.
- :chip[ ]{style="casilla"} Un charco se seca porque el agua se evapora con el sol.
- :chip[ ]{style="casilla"} El agua del congelador se convierte en vapor.
:::

:::frame{slot="act-3" label="3 · Explica"}
Cuando se cuece pasta, sale vapor de la cazuela. Si acercas una tapa fría, se llena de gotitas. ¿De dónde salen esas gotas?
:::
::::

::::page{template="proyecto" tema="Unidad 3 · Proyecto" notas="Mis observaciones"}
# Construye un pluviómetro

Un pluviómetro mide cuánta lluvia cae en un lugar. En las estaciones meteorológicas usan aparatos muy precisos, pero tú puedes fabricar uno con una botella y apuntar la lluvia de una semana entera.

::resource{id="pluviometro" slot="dibujo"}

:::frame{slot="material" label="Necesitas"}
- Una botella de plástico de dos litros, vacía y limpia.
- Unas tijeras, una regla de 20 centímetros y cinta adhesiva.
- Un rotulador permanente y un puñado de piedras pequeñas.
:::

:::frame{slot="pasos" label="Paso a paso"}
1. Pide a una persona adulta que corte la botella por donde empieza a estrecharse. Guarda la parte de arriba: será el embudo.
2. Mete las piedras en el fondo. Así la botella no se caerá con el viento.
3. Echa agua hasta tapar las piedras y marca esa altura con el rotulador. Esa línea es el cero de tu pluviómetro.
4. Pega la regla por fuera con cinta adhesiva, de modo que el cero de la regla quede justo en la línea que has marcado.
5. Da la vuelta a la parte de arriba y encájala en la botella, con la boca hacia abajo. El embudo recoge la lluvia y no deja que el agua se evapore tan deprisa.
6. Busca un sitio despejado del patio o de la terraza, lejos de los árboles y de los tejados, que desvían la lluvia.
7. Cada día, a la misma hora, mira cuántos milímetros ha subido el agua desde el cero y apúntalo en tu registro. Después vacía el agua hasta la línea del cero.

### Mi registro de la semana

- Lunes: :chip[ ]{style="hueco"} milímetros
- Martes: :chip[ ]{style="hueco"} milímetros
- Miércoles: :chip[ ]{style="hueco"} milímetros
- Jueves: :chip[ ]{style="hueco"} milímetros
- Viernes: :chip[ ]{style="hueco"} milímetros

### Piensa

¿Qué día llovió más? Suma los cinco días: ¿cuántos milímetros ha llovido en total? Compara tu resultado con el de un compañero que haya puesto su pluviómetro en otro sitio.
:::
::::
`; // content.<lang>.md, inlined by the Cookbook

// #region art: a painted cover and three vignettes; only the cycle's arrows are vector
// The pictures were painted with a diffusion model on white (the cover on a white edge it fades
// into), cut to the frames' aspect and declared with their pixels. The cover's arrows are an
// SVG in the same frame as the painting, 210 × 178 mm, with their points read off the painting
// in percent of its width and height: the sea's mist, the clouds, the rain, the river.
const P = palette;
const ARROW_X = 2.1; // mm per percent of the cover's width
const ARROW_Y = 1.78; // mm per percent of its height
// A smooth stroke through the points, with the head turned to the last stretch.
const arrow = (...pts) => {
  const p = pts.map(([x, y]) => [x * ARROW_X, y * ARROW_Y]);
  let d = `M${p[0][0].toFixed(1)} ${p[0][1].toFixed(1)}`;
  for (let i = 0; i < p.length - 1; i++) {
    const [a, b] = [p[Math.max(i - 1, 0)], p[i + 2] ?? p[i + 1]];
    const c1 = [p[i][0] + (p[i + 1][0] - a[0]) / 6, p[i][1] + (p[i + 1][1] - a[1]) / 6];
    const c2 = [p[i + 1][0] - (b[0] - p[i][0]) / 6, p[i + 1][1] - (b[1] - p[i][1]) / 6];
    d += ` C${c1.map((v) => v.toFixed(1)).join(' ')} ${c2.map((v) => v.toFixed(1)).join(' ')} `
      + `${p[i + 1][0].toFixed(1)} ${p[i + 1][1].toFixed(1)}`;
  }
  const [t, e] = [p[p.length - 2], p[p.length - 1]];
  const ang = Math.atan2(e[1] - t[1], e[0] - t[0]);
  const tip = (back, side) => `${(e[0] + back * Math.cos(ang) - side * Math.sin(ang)).toFixed(1)},`
    + `${(e[1] + back * Math.sin(ang) + side * Math.cos(ang)).toFixed(1)}`;
  const head = `${tip(3.4, 0)} ${tip(-1, 2.5)} ${tip(-1, -2.5)}`;
  return `<path d="${d}" fill="none" stroke="${P.sea}" stroke-width="2.2" stroke-linecap="round"/>`
    + `<polygon points="${head}" fill="${P.sea}" stroke="${P.sea}" stroke-width="1.4" `
    + 'stroke-linejoin="round"/>'
    + `<path d="${d}" fill="none" stroke="${P.paper}" stroke-width="1.1" stroke-linecap="round"/>`
    + `<polygon points="${head}" fill="${P.paper}"/>`;
};
const CYCLE = [
  [84, 54, 81, 42, 82, 30], // evaporation: the mist rises off the sea
  [93, 54, 95, 42, 92, 31],
  [64, 21, 54, 17, 45, 12], // the clouds drift inland to the mountains
  [29, 8, 28, 14, 27, 20], // precipitation: rain on the peaks
  [22, 43.6, 26, 45.3, 30, 47.8], // run-off: the river down from the waterfall
  [37, 57.5, 46, 59.3, 55, 60.8], // and out across the plain to the sea
];
const cycleSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 178" width="2100" `
  + `height="1780">${CYCLE.map((a) => arrow(...Array.from({ length: a.length / 2 },
    (_, i) => [a[2 * i], a[2 * i + 1]]))).join('')}</svg>`;
await loadSvg('ciclo.svg', cycleSvg);

const ALT = {
  portada: t({
    es: 'El ciclo del agua en un paisaje: el sol calienta el mar, el vapor sube a las nubes, '
      + 'la lluvia cae sobre las montañas nevadas y el río baja de nuevo al mar',
    en: 'The water cycle in a landscape: the sun warms the sea, vapour rises to the clouds, '
      + 'rain falls on the snowy mountains and the river runs back down to the sea',
    fr: 'Le cycle de l’eau dans un paysage : le soleil chauffe la mer, la vapeur monte aux '
      + 'nuages, la pluie tombe sur les montagnes enneigées et la rivière redescend vers la mer' }),
  ciclo: t({ es: 'Flechas: el vapor sube del mar, las nubes van hacia la montaña, la lluvia cae '
      + 'y el río vuelve al mar',
    en: 'Arrows: vapour rises from the sea, the clouds drift to the mountains, rain falls and '
      + 'the river returns to the sea',
    fr: 'Flèches : la vapeur monte de la mer, les nuages vont vers la montagne, la pluie tombe '
      + 'et la rivière retourne à la mer' }),
  planeta: t({ es: 'La Tierra vista desde el espacio, casi toda azul, y una gota de agua',
    en: 'The Earth seen from space, mostly blue, and a drop of water',
    fr: 'La Terre vue de l’espace, presque toute bleue, et une goutte d’eau' }),
  estados: t({ es: 'Un cubito de hielo que se derrite, un vaso de agua y una taza que echa vapor',
    en: 'An ice cube melting, a glass of water and a steaming cup',
    fr: 'Un glaçon qui fond, un verre d’eau et une tasse qui fume' }),
  pluviometro: t({ es: 'Una botella cortada con una regla pegada, piedras y un embudo bajo '
      + 'la lluvia: el pluviómetro',
    en: 'A cut bottle with a ruler taped on, stones and a funnel in the rain: '
      + 'the rain gauge',
    fr: 'Une bouteille coupée avec une règle collée, des cailloux et un entonnoir sous la pluie : '
      + 'le pluviomètre' }),
};
// Bitmaps: file, pixels and ppi (the vignettes are 44 mm wide, the cover 210 mm).
const BITMAPS = {
  portada: ['portada-1440.jpg', 1440, 1221, 174],
  planeta: ['planeta-960.jpg', 960, 873, 554],
  estados: ['estados-960.jpg', 960, 873, 554],
  pluviometro: ['pluviometro-960.jpg', 960, 873, 554],
};
const resources = [
  ...(await Promise.all(Object.entries(BITMAPS).map(async ([id, [fileId, w, h, ppi]]) => {
    await loadImage(fileId, asset(fileId));
    return { id, typeId: 'dibujo', kind: 'bitmap', caption: '', altText: ALT[id], createdAt: 0,
      updatedAt: 0, bitmap: { fileId, format: 'jpeg', width: w, height: h, resolution: ppi } };
  }))),
  { id: 'ciclo', typeId: 'dibujo', kind: 'svg', caption: '', altText: ALT.ciclo, createdAt: 0,
    updatedAt: 0, svg: { fileId: 'ciclo.svg', width: 2100, height: 1780 } },
];
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // text, display and label faces, loaded before the build
  Andika: ['400', '400i', '700'], 'Baloo 2': ['700', '800'], Lexend: ['500', '600'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const doc = await buildDocumentWithFonts({ markdown, resources }, config, kitFonts(FONTS));
showPages(doc, { title: t({ es: 'El agua, de viaje', en: 'Water on the move',
  fr: 'L’eau en voyage' }) });
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider, 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 ───────────────────────────────────────────────────────────────────────
```

## Variants

### Dona més línies a una activitat

El nombre de línies és l’alçada del marc de resposta: el seu `rules` dibuixa tantes línies com hi caben. Canvia’l a la plantilla i totes les fitxes que la fan servir tindran aquestes línies.

```diff
-    answer('lineas-1', 3),
+    answer('lineas-1', 5),
```

### Deixa que els passos es redueixin abans de continuar

Un marc que pot continuar en una altra pàgina continua abans de compondre el seu text més petit. Amb `fit.preferContinue: false` l’escala compon primer els passos més petits, fins a `fit.minScale` (90 %), i només els porta a una altra pàgina si això no n’hi ha prou. En un llibre per a infants importa més el cos de la lletra que estalviar una pàgina, així que la recepta deixa el valor per defecte.

```diff
-      overflow: { continueIn: 'next-page' } },
+      fit: { preferContinue: false }, overflow: { continueIn: 'next-page' } },
```

## Errors freqüents

- Un marc que no rep res dona l’avís `slotEmpty` si no porta `optional: true`. Aquí el porten tots els marcs de resposta.
- En una pila, el grup col·loca els requadres i no el seu propi `placement`, llevat del primer: col·loca el primer requadre del grup, o la pila començarà a dalt de l’àrea, damunt del títol.

## Crèdits

- Recepta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Imatges: The water cycle in a landscape: snowy mountains, a river, a coast and the sea, under sun and rain clouds.: Generated With Diffusion Models, original
- Imatges: The Earth seen from space, with a drop of water.: Generated With Diffusion Models, original
- Imatges: An ice cube melting, a glass of water and a steaming cup.: Generated With Diffusion Models, original
- Imatges: A rain gauge made from a cut bottle, with a ruler and stones.: Generated With Diffusion Models, original
- Tipus de lletra: Andika (OFL-1.1), Baloo 2 (OFL-1.1), Lexend (OFL-1.1)
- Codi: MIT · Contingut d'exemple: CC-BY-4.0

## Relacionades

- [Núm. 022 · Fitxa amb caixes de resposta i banc de paraules](https://postext.dev/ca/cookbook/worksheet-answer-boxes.md): Una fitxa de ciències de quatre pàgines: caixes de resposta blanques en targetes verd clar, a 2 mm de cada pregunta, i xips per a bancs de paraules i buits. · Nivell 2 (Intermedi) · Quaderns i exercicis
- [Núm. 049 · Examen amb full de respostes](https://postext.dev/ca/cookbook/exam-paper.md): Un examen d'història de quatre pàgines: bombolles i puntuacions en xips, la puntuació en una tabulació, preguntes numerades 1, a), i) i ratlles d'una taula. · Nivell 2 (Intermedi) · Quaderns i exercicis
- [Núm. 060 · Cartilla de lectura amb síl·labes en xips](https://postext.dev/ca/cookbook/reading-primer-syllables.md): Una unitat de cartilla dedicada a la ema, amb cada síl·laba en un xip del color de la seva vocal i sis paraules en una taula, cadascuna sota la seva aquarel·la. · Nivell 2 (Intermedi) · Quaderns i exercicis