postext 1.34.0 → 1.34.1

package/dist/__tests__/composed/fixtures/page8.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A stand-in for page 8 of a primary-school social-science textbook (#855):
+ * a topic page with a tabbed title, running text with key words, three
+ * boxes with tabs (blue, green, yellow), each with its pictures beside it.
+ * The words are written for this fixture (Spanish and English); the form is
+ * a page template in the configuration, the content all in the Markdown.
+ * The pictures are solid placeholders (`fixtures/page8/*.png`).
+ */
+import type { PostextConfig, Resource, ResourceType } from '../../../types';
+export declare const PAGE8_TYPES: ResourceType[];
+/** The fixture's pictures: solid placeholders of the photos' proportions. */
+export declare const PAGE8_RESOURCES: Resource[];
+/** The template and styles: form only, no words but the page's folio. */
+export declare const PAGE8_CONFIG: PostextConfig;
+export declare function page8Fixture(locale: 'es' | 'en'): {
+    markdown: string;
+    config: PostextConfig;
+    resources: Resource[];
+};
+//# sourceMappingURL=page8.d.ts.map

package/dist/__tests__/composed/fixtures/page8.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page8.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/composed/fixtures/page8.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAoG5E,eAAO,MAAM,WAAW,EAAE,YAAY,EAErC,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,eAAe,EAAE,QAAQ,EAarB,CAAC;AAElB,yEAAyE;AACzE,eAAO,MAAM,YAAY,EAAE,aAwC1B,CAAC;AAEF,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,aAAa,CAAC;IAAC,SAAS,EAAE,QAAQ,EAAE,CAAA;CAAE,CAEpH"}

package/dist/__tests__/composed/fixtures/page8.js

@@ -0,0 +1,159 @@
+const mm = (value) => ({ value, unit: 'mm' });
+const pt = (value) => ({ value, unit: 'pt' });
+const hex = (h) => ({ hex: h, model: 'hex' });
+const MARKDOWN = {
+    es: `::::page{template="tema-cajas" fondo="banda-tema" tema="Retos del planeta"}
+# El dinero y la vida de cada día
+
+## Lo que compramos y vendemos
+
+Cada familia necesita :chip[alimentos]{style="clave"}, ropa y una casa. Los consigue en tiendas y mercados, que a su vez los reciben de quienes los cultivan o los fabrican. Este ir y venir de cosas y de trabajo es la :chip[actividad económica.]{style="clave"}
+
+- Las :chip[tiendas y empresas.]{style="clave"} Preparan productos y servicios y los ofrecen a un precio.
+- Las :chip[familias.]{style="clave"} Pagan esos productos con lo que ganan trabajando cada mes.
+
+:::frame{slot="dinero" label="Para qué sirve el dinero"}
+El dinero nos deja cambiar nuestro trabajo por las cosas que necesitamos, porque todo el mundo acepta su valor.
+
+Antes casi todo se pagaba con monedas y billetes, en **efectivo**. Hoy también pagamos con **tarjetas**, con el teléfono o con una **transferencia** desde el banco.
+:::
+
+::resource{id="foto-dinero" slot="dinero-fotos"}
+
+:::frame{slot="gasto" label="En qué lo gastamos"}
+Lo que una familia paga para vivir es su gasto. Hay varias clases:
+
+- **Fijo:** se repite cada mes, como el alquiler o la luz.
+- **Variable:** cambia de un mes a otro, como la comida o la ropa.
+- **Imprevisto:** llega sin avisar, como arreglar la bicicleta.
+:::
+
+::resource{id="foto-gasto" slot="gasto-fotos"}
+
+:::frame{slot="ahorro" label="Pedir prestado y ahorrar"}
+Para comprar algo muy caro, como un coche, a veces hay que pedir un **préstamo** al banco y devolverlo poco a poco. Si gastamos menos de lo que ganamos, podemos **ahorrar** para más adelante. Un **presupuesto** ayuda a decidir cada mes cuánto guardar.
+:::
+
+::resource{id="foto-ahorro" slot="ahorro-fotos"}
+::::
+`,
+    en: `::::page{template="tema-cajas" fondo="banda-tema" tema="Planet challenges"}
+# Money and everyday life
+
+## What we buy and sell
+
+Every family needs :chip[food]{style="clave"}, clothes and a home. They get them in shops and markets, which in turn get them from the people who grow or make them. This coming and going of goods and work is :chip[economic activity.]{style="clave"}
+
+- :chip[Shops and companies.]{style="clave"} They make goods and services and offer them at a price.
+- :chip[Families.]{style="clave"} They pay for them with what they earn at work each month.
+
+:::frame{slot="dinero" label="What money is for"}
+Money lets us swap our work for the things we need, because everybody accepts what it is worth.
+
+Not long ago almost everything was paid in coins and notes, in **cash**. Today we also pay with **cards**, with a phone or with a **bank transfer**.
+:::
+
+::resource{id="foto-dinero" slot="dinero-fotos"}
+
+:::frame{slot="gasto" label="What we spend it on"}
+What a family pays to live is its spending. There are several kinds:
+
+- **Fixed:** it comes back every month, like the rent or the electricity.
+- **Variable:** it changes from month to month, like food or clothes.
+- **Unexpected:** it arrives without warning, like mending the bicycle.
+:::
+
+::resource{id="foto-gasto" slot="gasto-fotos"}
+
+:::frame{slot="ahorro" label="Borrowing and saving"}
+To buy something very dear, like a car, a family may ask the bank for a **loan** and pay it back little by little. When we spend less than we earn, we can **save** for later. A **budget** helps us decide each month how much to keep.
+:::
+
+::resource{id="foto-ahorro" slot="ahorro-fotos"}
+::::
+`,
+};
+const box = (id, fill, ring, tabSide) => ({
+    id,
+    backgroundEnabled: true,
+    background: hex(fill),
+    border: { enabled: false },
+    borderRadius: mm(1.5),
+    padding: { top: mm(3), right: mm(4), bottom: mm(3.5), left: mm(4) },
+    label: {
+        position: tabSide,
+        background: hex('#ffffff'),
+        color: hex('#231f20'),
+        fontSize: pt(11),
+        height: mm(6.4),
+        paddingX: mm(2.5),
+        offset: mm(6.4),
+        inset: mm(0),
+        rule: { enabled: false, color: hex(ring) },
+    },
+    body: { fontSize: pt(10.5), lineHeight: pt(15) },
+});
+export const PAGE8_TYPES = [
+    { id: 'foto', name: 'Foto', shortLabel: 'Foto', numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal', captionPrefix: '', defaultPlacement: { position: 'here' } },
+];
+/** The fixture's pictures: solid placeholders of the photos' proportions. */
+export const PAGE8_RESOURCES = [
+    ['foto-dinero', 150, 100],
+    ['foto-gasto', 190, 140],
+    ['foto-ahorro', 115, 95],
+    ['banda-tema', 230, 288],
+].map(([id, width, height]) => ({
+    id: id,
+    typeId: 'foto',
+    kind: 'bitmap',
+    caption: '',
+    createdAt: 0,
+    updatedAt: 0,
+    bitmap: { fileId: `${id}.png`, format: 'png', width: width, height: height, resolution: 72 },
+}));
+/** The template and styles: form only, no words but the page's folio. */
+export const PAGE8_CONFIG = {
+    page: { sizePreset: 'custom', width: mm(230), height: mm(288), margins: { top: mm(24), bottom: mm(22), left: mm(22), right: mm(22), mirror: true } },
+    bodyText: { fontSize: pt(12), lineHeight: pt(18) },
+    headings: {
+        balancing: { enabled: false },
+        levels: [
+            { level: 1, fontSize: pt(22), lineHeight: pt(26), breakBefore: { enabled: false } },
+            { level: 2, fontSize: pt(15), lineHeight: pt(20) },
+        ],
+    },
+    chipStyles: [{ id: 'clave', background: hex('#ffe500'), fontWeight: 700 }],
+    resourceTypes: PAGE8_TYPES,
+    footer: { elements: [{ kind: 'text', id: 'folio', content: '{pageNumber}', fontSize: pt(10), placement: { anchor: { to: 'container', edge: 'bottom-left' } } }] },
+    calloutStyles: [
+        { id: 'tab-titulo', backgroundEnabled: true, background: hex('#ffffff'), border: { enabled: false }, borderRadius: mm(1), padding: { top: mm(1.5), right: mm(4), bottom: mm(1.5), left: mm(4) } },
+        box('caja-azul', '#d8ecf9', '#0885bf', 'top-left'),
+        box('caja-verde', '#e6f3b4', '#66ae3e', 'top-right'),
+        box('caja-amarilla', '#fdf0c4', '#f99d1c', 'top-left'),
+    ],
+    pageTemplates: [{
+            id: 'tema-cajas',
+            header: false,
+            decoration: {
+                elements: [
+                    { kind: 'image', id: 'fondo', resourceId: '{attr.fondo}', decorative: true, placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { width: 'fill', height: 'fill' } } },
+                    { kind: 'box', id: 'tarjeta', placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { x: mm(-6), y: mm(-4) }, size: { width: mm(198), height: mm(250) } }, style: { backgroundColor: hex('#ffffff'), borderRadius: mm(4) } },
+                    { kind: 'text', id: 'tema', content: '{attr.tema}', fontSize: pt(9), color: hex('#ffffff'), placement: { anchor: { to: 'page', edge: 'top-right' }, offset: { x: mm(-10), y: mm(6) } } },
+                ],
+            },
+            frames: [
+                { name: 'titulo', takes: 'h1', style: 'tab-titulo', width: mm(170), placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { x: mm(-4), y: mm(-2) } } },
+                { name: 'texto', flow: true, placement: { anchor: { to: '#titulo', edge: 'below' }, offset: { x: mm(4), y: mm(2) } }, width: mm(182) },
+                { name: 'dinero', style: 'caja-azul', padding: { right: mm(62) }, placement: { anchor: { to: '#texto', edge: 'below' }, offset: { y: mm(9) } }, width: mm(186) },
+                { name: 'dinero-fotos', layer: 2, width: mm(58), placement: { anchor: { to: '#dinero', edge: 'top-right' }, offset: { x: mm(-2), y: mm(2) } } },
+                { name: 'gasto', style: 'caja-verde', padding: { left: mm(82) }, minHeight: mm(62), placement: { anchor: { to: '#dinero', edge: 'below' }, offset: { y: mm(12) } }, width: mm(186) },
+                { name: 'gasto-fotos', layer: 2, width: mm(76), placement: { anchor: { to: '#gasto', edge: 'top-left' }, offset: { x: mm(3), y: mm(9) } } },
+                { name: 'ahorro', style: 'caja-amarilla', padding: { right: mm(50) }, placement: { anchor: { to: '#gasto', edge: 'below' }, offset: { y: mm(12) } }, width: mm(186) },
+                { name: 'ahorro-fotos', layer: 2, width: mm(44), placement: { anchor: { to: '#ahorro', edge: 'right' }, offset: { x: mm(-3) } } },
+            ],
+        }],
+};
+export function page8Fixture(locale) {
+    return { markdown: MARKDOWN[locale], config: { ...PAGE8_CONFIG, locale }, resources: PAGE8_RESOURCES };
+}
+//# sourceMappingURL=page8.js.map

package/dist/__tests__/composed/fixtures/page8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page8.js","sourceRoot":"","sources":["../../../../src/__tests__/composed/fixtures/page8.ts"],"names":[],"mappings":"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"}

package/dist/__tests__/composed/layout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout.test.d.ts.map

package/dist/__tests__/composed/layout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/composed/layout.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/composed/layout.test.js

@@ -0,0 +1,387 @@
+import { describe, it, expect } from 'vitest';
+import { buildDocument } from '../../pipeline/build';
+import { createMeasurementCache } from '../../measure';
+import { formatWarning } from '../../pipeline/contentWarnings';
+import { anchorOn, frameOrder, gridCellRect, placeBox, framePlaceable } from '../../composed/geometry';
+import { normalizeFrame, resolvePageTemplate } from '../../composed/templates';
+import { composedPaintOrder, frameBounds } from '../../composed/paint';
+import { wrapComposedPages, FRAME_ATTR } from '../../composed/wrap';
+import { parseMarkdownWithIssues } from '../../parse';
+import { page8Fixture } from './fixtures/page8';
+// Deterministic text measurement stub (no DOM in the node test env): seven
+// px per character, whatever the face.
+class StubCtx {
+    font = '';
+    measureText(s) {
+        return { width: s.length * 7 };
+    }
+}
+globalThis.OffscreenCanvas = class {
+    getContext() {
+        return new StubCtx();
+    }
+};
+const mm = (value) => ({ value, unit: 'mm' });
+const DPI = 300;
+const px = (v) => (v / 25.4) * DPI;
+const PAGE = {
+    page: { width: mm(200), height: mm(260), margins: { top: mm(20), bottom: mm(20), left: mm(20), right: mm(20) } },
+    headings: { balancing: { enabled: false }, levels: [{ level: 1, breakBefore: { enabled: false } }] },
+};
+const build = (md, templates, extra = {}) => buildDocument({ markdown: md }, { ...PAGE, ...extra, pageTemplates: templates }, createMeasurementCache());
+const composedPage = (doc) => doc.pages.find((p) => p.composed);
+const frame = (doc, name) => composedPage(doc).composed.frames.find((f) => f.name === name);
+const blocksOf = (doc, f) => f.blockIds.map((id) => composedPage(doc).floats.find((b) => b.id === id));
+const textOf = (blocks) => blocks.flatMap((b) => b.lines.map((l) => l.text)).join(' ');
+const words = (n, w = 'word') => Array.from({ length: n }, (_, i) => `${w}${i}`).join(' ');
+const AREA = { x: 100, y: 200, width: 1000, height: 1500 };
+const GEO = { areas: { area: AREA, page: { x: 0, y: 0, width: 1200, height: 1800 }, bleed: { x: -30, y: -30, width: 1260, height: 1860 } }, dpi: DPI, emPx: 40 };
+const resolved = (f, template = {}) => resolvePageTemplate({ pageTemplates: [{ id: 't', ...template, frames: [f, ...(template.frames ?? [])] }] }, 't').frames.find((x) => x.name === f.name);
+describe('frame geometry (#855)', () => {
+    it('a frame with no placement takes the area’s top-left and width; its height follows its content', () => {
+        const f = framePlaceable(normalizeFrame({ name: 'a' }));
+        expect(placeBox(f, {}, GEO, () => undefined, () => 123)).toEqual({ x: 100, y: 200, width: 1000, height: 123 });
+        // Never past the area's foot.
+        expect(placeBox(f, {}, GEO, () => undefined, () => 9999).height).toBe(1500);
+        const filled = framePlaceable(normalizeFrame({ name: 'a', height: 'fill' }));
+        expect(placeBox(filled, {}, GEO, () => undefined, () => 1).height).toBe(1500);
+    });
+    it('anchors on the nine-point grid of the area, the trim and the bleed, with offsets', () => {
+        const f = framePlaceable(normalizeFrame({ name: 'a', width: mm(50), height: mm(20), placement: { anchor: { to: 'container', edge: 'bottom-right' }, offset: { x: mm(-5), y: mm(-5) } } }));
+        const r = placeBox(f, {}, GEO, () => undefined, () => 0);
+        expect(r.x + r.width).toBeCloseTo(1100 - px(5), 6);
+        expect(r.y + r.height).toBeCloseTo(1700 - px(5), 6);
+        const onTrim = framePlaceable(normalizeFrame({ name: 'b', width: 'fill', height: mm(10), placement: { anchor: { to: 'page', edge: 'top' } } }));
+        expect(placeBox(onTrim, {}, GEO, () => undefined, () => 0)).toMatchObject({ x: 0, y: 0, width: 1200 });
+        const onBleed = framePlaceable(normalizeFrame({ name: 'c', width: 'fill', height: 'fill', placement: { anchor: { to: 'bleed', edge: 'top-left' } } }));
+        expect(placeBox(onBleed, {}, GEO, () => undefined, () => 0)).toEqual({ x: -30, y: -30, width: 1260, height: 1860 });
+    });
+    it('sizes in percent of the area, and min/max (min wins)', () => {
+        const f = framePlaceable(normalizeFrame({ name: 'a', width: { percent: 50 }, height: { percent: 10 }, maxWidth: mm(10), minWidth: mm(20), placement: { anchor: { to: 'container', edge: 'top-left' } } }));
+        const r = placeBox(f, {}, GEO, () => undefined, () => 0);
+        expect(r.width).toBeCloseTo(px(20), 6);
+        expect(r.height).toBe(150);
+    });
+    it('hangs a frame off another with element edges, and a nine-point edge on a frame reads that point of its box', () => {
+        const ref = { x: 300, y: 400, width: 200, height: 100 };
+        expect(anchorOn('below', ref, true)).toEqual({ x: 300, y: 500, pinX: 'start', pinY: 'start' });
+        expect(anchorOn('right-of', ref, true)).toEqual({ x: 500, y: 400, pinX: 'start', pinY: 'start' });
+        expect(anchorOn('top-right', ref, true)).toEqual({ x: 500, y: 400, pinX: 'end', pinY: 'start' });
+        const f = framePlaceable(normalizeFrame({ name: 'b', width: mm(10), height: mm(10), placement: { anchor: { to: '#a', edge: 'below' }, offset: { y: mm(2) } } }));
+        const r = placeBox(f, {}, GEO, (n) => (n === 'a' ? ref : undefined), () => 0);
+        expect(r.x).toBe(300);
+        expect(r.y).toBeCloseTo(500 + px(2), 6);
+    });
+    it('places a frame in a grid cell, its own height or the cell’s', () => {
+        const template = resolvePageTemplate({ pageTemplates: [{ id: 't', grid: { columns: 2, rows: 3, columnGap: mm(0), rowGap: mm(0) }, frames: [{ name: 'a', grid: { col: 2, row: 2 } }, { name: 'b', grid: { col: 1, row: 1, cols: 2 }, height: 'auto' }] }] }, 't');
+        const cell = gridCellRect(template, template.frames[0].grid, AREA, GEO);
+        expect(cell).toEqual({ x: 600, y: 700, width: 500, height: 500 });
+        expect(placeBox(framePlaceable(template.frames[0]), template, GEO, () => undefined, () => 7)).toEqual(cell);
+        expect(placeBox(framePlaceable(template.frames[1]), template, GEO, () => undefined, () => 7)).toEqual({ x: 100, y: 200, width: 1000, height: 7 });
+    });
+    it('orders frames after what they anchor to, the frame their chain comes from, pushing frames first', () => {
+        const template = resolvePageTemplate({ pageTemplates: [{ id: 't', frames: [
+                        { name: 'caption', placement: { anchor: { to: '#photo', edge: 'below' } } },
+                        { name: 'text', next: 'more' },
+                        { name: 'more', placement: { anchor: { to: 'container', edge: 'bottom-left' } } },
+                        { name: 'photo', exclude: 'push', placement: { anchor: { to: '#text', edge: 'right-of' } } },
+                    ] }] }, 't');
+        const order = frameOrder(template).map((f) => f.name);
+        expect(order.indexOf('text')).toBeLessThan(order.indexOf('photo'));
+        expect(order.indexOf('photo')).toBeLessThan(order.indexOf('caption'));
+        expect(order.indexOf('text')).toBeLessThan(order.indexOf('more'));
+        // The pushing frame goes as early as its anchors allow.
+        expect(order.indexOf('photo')).toBeLessThan(order.indexOf('more'));
+    });
+    it('reads `heightSet` from what the template wrote', () => {
+        expect(framePlaceable(resolved({ name: 'a', height: 'auto' })).heightSet).toBe(true);
+        expect(framePlaceable(resolved({ name: 'a' })).heightSet).toBe(false);
+    });
+});
+describe('regrouping a composed page into stories (#855)', () => {
+    const templates = [{ id: 't', frames: [{ name: 'title', takes: 'h1' }, { name: 'text', flow: true }, { name: 'box', next: 'box2' }, { name: 'box2' }] }];
+    const md = '::::page{template="t"}\n# Title\n\nIntro.\n\n:::frame{slot="box2" label="Two"}\nSecond.\n:::\n\n:::frame{slot="box" label="One"}\nFirst.\n:::\n\nOutro.\n::::';
+    it('one story per chain, its frames’ pieces in chain order; stories in the order they first appear', () => {
+        const { blocks, wrapped } = wrapComposedPages(parseMarkdownWithIssues(md).blocks, { pageTemplates: templates });
+        expect(wrapped).toBe(true);
+        const heads = blocks.filter((b) => b.type === 'containerStart' && b.containerAttrs?.[FRAME_ATTR]).map((b) => b.containerAttrs[FRAME_ATTR]);
+        expect(heads).toEqual(['title', 'text', 'box']);
+        const box = blocks.findIndex((b) => b.containerAttrs?.[FRAME_ATTR] === 'box');
+        expect(blocks[box].containerAttrs.label).toBe('One');
+        const inBox = blocks.slice(box + 1, blocks.findIndex((b, i) => i > box && b.type === 'containerEnd' && b.containerId === blocks[box].containerId)).map((b) => b.text);
+        expect(inBox).toEqual(['First.', 'Second.']);
+    });
+    it('leaves a page of unknown template as it is', () => {
+        const parsed = parseMarkdownWithIssues('::::page{template="nope"}\nText.\n::::').blocks;
+        expect(wrapComposedPages(parsed, { pageTemplates: templates }).wrapped).toBe(false);
+    });
+});
+describe('composed pages laid out (#855)', () => {
+    const TWO = {
+        id: 'two',
+        frames: [
+            { name: 'title', takes: 'h1', placement: { anchor: { to: 'container', edge: 'top-left' } } },
+            { name: 'text', flow: true, placement: { anchor: { to: '#title', edge: 'below' }, offset: { y: mm(3) } } },
+        ],
+    };
+    it('owns a page of role composed; what follows starts on the next page; nothing flows on it', () => {
+        const doc = build('Before.\n\n::::page{template="two"}\n# Title\n\nBody text.\n::::\n\nAfter.', [TWO]);
+        expect(doc.pages).toHaveLength(3);
+        const page = doc.pages[1];
+        expect(page.role).toBe('composed');
+        expect(page.columns).toHaveLength(1);
+        expect(page.columns[0].blocks).toHaveLength(0);
+        expect(textOf(doc.pages[2].columns.flatMap((c) => c.blocks))).toBe('After.');
+    });
+    it('records the frames with stable ids, config paths and the blocks they hold', () => {
+        const doc = build('::::page{template="two"}\n# Title\n\nBody text.\n::::', [TWO]);
+        const composed = composedPage(doc).composed;
+        expect(composed.template).toBe('two');
+        expect(composed.configPath).toBe('/pageTemplates/0');
+        expect(composed.frames.map((f) => [f.id, f.configPath])).toEqual([['cp0:title', '/pageTemplates/0/frames/0'], ['cp0:text', '/pageTemplates/0/frames/1']]);
+        const title = frame(doc, 'title');
+        const blocks = blocksOf(doc, title);
+        expect(blocks[0].type).toBe('callout');
+        expect(blocks[0].id).toBe('cp0:title');
+        expect(textOf(blocks)).toBe('Title');
+        // Frame blocks are in `doc.blocks` with their sources (caret mapping).
+        for (const b of blocks)
+            expect(doc.blocks).toContain(b);
+        const heading = blocks.find((b) => b.type === 'heading');
+        expect(heading.sourceStart).toBeGreaterThan(0);
+        expect(title.sourceStart).toBeDefined();
+        expect(heading.containerId).toBe(blocks[0].containerId);
+    });
+    it('an auto height is the content’s height; the text frame hangs below the title', () => {
+        const doc = build('::::page{template="two"}\n# Title\n\nBody text.\n::::', [TWO]);
+        const title = frame(doc, 'title');
+        const text = frame(doc, 'text');
+        const [box, heading] = blocksOf(doc, title);
+        expect(title.rect.height).toBeCloseTo(box.bbox.height, 6);
+        expect(heading.bbox.y + heading.bbox.height).toBeLessThanOrEqual(title.rect.y + title.rect.height + 0.01);
+        expect(text.rect.y).toBeCloseTo(title.rect.y + title.rect.height + px(3), 6);
+    });
+    it('places content of a taller fixed frame as verticalAlign says', () => {
+        const at = (verticalAlign) => {
+            const doc = build('::::page{template="v"}\nOne line.\n::::', [{ id: 'v', frames: [{ name: 'f', flow: true, height: mm(50), verticalAlign, placement: { anchor: { to: 'container', edge: 'top-left' } } }] }]);
+            const f = frame(doc, 'f');
+            const para = blocksOf(doc, f).find((b) => b.type === 'paragraph');
+            return { top: para.bbox.y - f.rect.y, bottom: f.rect.y + f.rect.height - (para.bbox.y + para.bbox.height), box: blocksOf(doc, f)[0] };
+        };
+        const top = at('top');
+        const middle = at('middle');
+        const bottom = at('bottom');
+        expect(top.top).toBeCloseTo(0, 3);
+        expect(middle.top).toBeCloseTo(middle.bottom, 3);
+        expect(bottom.bottom).toBeCloseTo(0, 3);
+        // The box is drawn as tall as the frame.
+        expect(top.box.bbox.height).toBeCloseTo(px(50), 3);
+    });
+    it('chains a story from one frame to the next (`next`): nothing lost, nothing doubled', () => {
+        const story = words(120);
+        const tpl = { id: 'chain', frames: [
+                { name: 'a', flow: true, next: 'b', width: mm(70), height: mm(30), placement: { anchor: { to: 'container', edge: 'top-left' } } },
+                { name: 'b', width: mm(50), height: mm(150), placement: { anchor: { to: 'container', edge: 'top-right' } } },
+            ] };
+        const doc = build(`::::page{template="chain"}\n${story}\n::::`, [tpl]);
+        const a = frame(doc, 'a');
+        const b = frame(doc, 'b');
+        expect(a.continuesTo).toBe(b.id);
+        expect(b.continuedFrom).toBe(a.id);
+        expect(a.overflowPx).toBe(0);
+        const aText = textOf(blocksOf(doc, a));
+        const bText = textOf(blocksOf(doc, b));
+        expect(aText.length).toBeGreaterThan(0);
+        expect(bText.length).toBeGreaterThan(0);
+        expect(`${aText} ${bText}`.replace(/-\s/g, '').split(/\s+/).join(' ')).toBe(story);
+        // Each piece is set at its own frame's measure.
+        const aLines = blocksOf(doc, a).find((x) => x.type === 'paragraph').lines;
+        const bLines = blocksOf(doc, b).find((x) => x.type === 'paragraph').lines;
+        expect(Math.max(...aLines.map((l) => l.bbox.width))).toBeGreaterThan(Math.max(...bLines.map((l) => l.bbox.width)));
+        // The second piece's box joins the first (tagging) and carries no tab.
+        expect(blocksOf(doc, b)[0].id).toBe('cp0:a-cont-1');
+    });
+    it('reads overflow.continueIn: "#frame" as next', () => {
+        const tpl = { id: 'ci', frames: [
+                { name: 'a', flow: true, overflow: { continueIn: '#b' }, width: mm(70), height: mm(20), placement: { anchor: { to: 'container', edge: 'top-left' } } },
+                { name: 'b', width: mm(70), height: mm(150), placement: { anchor: { to: 'container', edge: 'top-right' } } },
+            ] };
+        const doc = build(`::::page{template="ci"}\n${words(100)}\n::::`, [tpl]);
+        expect(frame(doc, 'a').continuesTo).toBe('cp0:b');
+        expect(frame(doc, 'a').overflowPx).toBe(0);
+        expect(textOf(blocksOf(doc, frame(doc, 'b'))).length).toBeGreaterThan(0);
+    });
+    it('clips what no frame can hold and says so (frameOverflow), keeping it in the document', () => {
+        const story = words(200);
+        const tpl = { id: 'small', frames: [{ name: 'a', flow: true, width: mm(60), height: mm(20), placement: { anchor: { to: 'container', edge: 'top-left' } } }] };
+        const doc = build(`::::page{template="small"}\n${story}\n::::`, [tpl]);
+        const a = frame(doc, 'a');
+        expect(a.overflowPx).toBeGreaterThan(0);
+        expect(textOf(blocksOf(doc, a)).replace(/-\s/g, '').split(/\s+/).join(' ')).toBe(story);
+        const w = doc.contentWarnings.find((x) => x.kind === 'frameOverflow');
+        expect(w).toMatchObject({ kind: 'frameOverflow', template: 'small', frame: 'a', fenceIndex: 0, configPath: '/pageTemplates/0/frames/0', pageIndex: 0 });
+        expect(w.kind === 'frameOverflow' && w.overflowMm).toBeCloseTo((a.overflowPx / DPI) * 25.4, 0);
+        expect(composedPage(doc).composed.log).toEqual([{ frame: 'a', kind: 'overflow', toMm: w.overflowMm }]);
+        expect(formatWarning(w)).toContain('Frame "a" of template "small"');
+    });
+    it('wraps a frame’s text round a frame that pushes it (exclude: push)', () => {
+        const story = words(150);
+        const tpl = (exclude) => ({ id: 'push', frames: [
+                { name: 'text', flow: true, width: mm(120), placement: { anchor: { to: 'container', edge: 'top-left' } } },
+                { name: 'photo', exclude, layer: 2, width: mm(40), height: mm(30), placement: { anchor: { to: '#text', edge: 'top-right' } } },
+            ] });
+        const lines = (doc) => blocksOf(doc, frame(doc, 'text')).filter((b) => b.type === 'paragraph').flatMap((b) => b.lines);
+        const pushed = build(`::::page{template="push"}\n${story}\n::::`, [tpl('push')]);
+        const plain = build(`::::page{template="push"}\n${story}\n::::`, [tpl('none')]);
+        const photo = frame(pushed, 'photo');
+        const beside = lines(pushed).filter((l) => l.bbox.y < photo.rect.y + photo.rect.height);
+        expect(beside.length).toBeGreaterThan(0);
+        for (const l of beside)
+            expect(l.bbox.x + l.bbox.width).toBeLessThanOrEqual(photo.rect.x + 0.5);
+        expect(lines(pushed).length).toBeGreaterThan(lines(plain).length);
+        expect(photo.push).toBe(true);
+    });
+    it('a styled frame draws its callout style, with the tab from the frame fence', () => {
+        const tpl = { id: 's', frames: [{ name: 'box', style: 'caja', placement: { anchor: { to: 'container', edge: 'top-left' } }, width: mm(100) }] };
+        const doc = build('::::page{template="s"}\n:::frame{slot="box" label="Money"}\nInside the box.\n:::\n::::', [tpl], {
+            calloutStyles: [{ id: 'caja', backgroundEnabled: true, background: { hex: '#d8ecf9' }, label: { position: 'top-left', offset: mm(5), height: mm(5) } }],
+        });
+        const box = blocksOf(doc, frame(doc, 'box'))[0];
+        expect(box.callout.styleId).toBe('caja');
+        const labelText = box.designOverlay.blocks.flatMap((b) => (b.kind === 'text' ? b.lines.map((l) => l.text) : []));
+        expect(labelText).toContain('Money');
+        expect(box.bbox.width).toBeCloseTo(px(100), 3);
+        expect(frame(doc, 'box').styleId).toBe('caja');
+    });
+    it('padding of the frame overrides its style’s, side by side', () => {
+        const tpl = (padding) => ({ id: 'p', frames: [{ name: 'box', style: 'caja', ...(padding ? { padding } : {}), width: mm(150), placement: { anchor: { to: 'container', edge: 'top-left' } } }] });
+        const md = '::::page{template="p"}\n:::frame{slot="box"}\nText.\n:::\n::::';
+        const cfg = { calloutStyles: [{ id: 'caja', padding: { top: mm(2), right: mm(2), bottom: mm(2), left: mm(2) } }] };
+        const plain = build(md, [tpl()], cfg);
+        const padded = build(md, [tpl({ left: mm(60) })], cfg);
+        const xOf = (doc) => blocksOf(doc, frame(doc, 'box')).find((b) => b.type === 'paragraph').bbox.x;
+        expect(xOf(padded) - xOf(plain)).toBeCloseTo(px(58), 3);
+    });
+    it('sets a frame in columns with the :::columns machinery', () => {
+        const doc = build(`::::page{template="c"}\n${words(40, 'a')}\n\n${words(40, 'b')}\n::::`, [{ id: 'c', frames: [{ name: 'f', flow: true, columns: 2, columnGap: mm(5), width: mm(150), placement: { anchor: { to: 'container', edge: 'top-left' } } }] }]);
+        const xs = new Set(blocksOf(doc, frame(doc, 'f')).filter((b) => b.type === 'paragraph').map((b) => Math.round(b.bbox.x)));
+        expect(xs.size).toBe(2);
+    });
+    it('records layer and turn; paints frames in layer order around the decoration', () => {
+        const tpl = { id: 'l', decoration: { elements: [{ kind: 'box', id: 'bg', placement: { anchor: { to: 'container', edge: 'top-left' }, size: { width: mm(10), height: mm(10) } }, style: { backgroundColor: { hex: '#ff0000' } } }] }, frames: [
+                { name: 'over', layer: 3, rotate: 12, placement: { anchor: { to: 'container', edge: 'top-left' } } },
+                { name: 'under', layer: -1, placement: { anchor: { to: 'container', edge: 'bottom-left' } } },
+                { name: 'mid', flow: true, placement: { anchor: { to: 'container', edge: 'center' } }, width: mm(50) },
+            ] };
+        const doc = build('::::page{template="l"}\n:::frame{slot="over"}\nOver.\n:::\n:::frame{slot="under"}\nUnder.\n:::\nMid.\n::::', [tpl]);
+        const page = composedPage(doc);
+        expect(frame(doc, 'over')).toMatchObject({ layer: 3, rotate: 12 });
+        const order = composedPaintOrder(page).map((i) => (i.kind === 'frame' ? i.frame.name : 'decoration'));
+        expect(order).toEqual(['under', 'decoration', 'mid', 'over']);
+        expect(page.composed.decoration).toBeDefined();
+        const b = frameBounds(frame(doc, 'over'));
+        expect(b.height).toBeGreaterThan(frame(doc, 'over').rect.height);
+    });
+    it('lays the decoration with the frames’ boxes and the page fence’s attributes', () => {
+        const tpl = { id: 'd', decoration: { elements: [
+                    { kind: 'text', id: 'tema', content: '{attr.tema}', placement: { anchor: { to: '#box', edge: 'below' } } },
+                    { kind: 'image', id: 'bg', resourceId: '{attr.fondo}', decorative: true, placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { width: 'fill', height: 'fill' } } },
+                ] }, frames: [{ name: 'box', flow: true, width: mm(80), placement: { anchor: { to: 'container', edge: 'top-left' }, offset: { y: mm(10) } } }] };
+        const md = '---\ntitle: T\n---\n::::page{template="d" tema="Savings" fondo="green"}\nText.\n::::';
+        const doc = buildDocument({ markdown: md, resources: [{ id: 'green', typeId: 'figure', kind: 'bitmap', caption: '', createdAt: 0, updatedAt: 0, bitmap: { fileId: 'g', format: 'png', width: 10, height: 10 } }] }, { ...PAGE, pageTemplates: [tpl] }, createMeasurementCache());
+        const page = composedPage(doc);
+        const deco = page.composed.decoration.blocks;
+        const text = deco.find((b) => b.kind === 'text');
+        const box = frame(doc, 'box');
+        expect(text.kind === 'text' && text.lines[0].text).toBe('Savings');
+        expect(text.bbox.y).toBeCloseTo(box.rect.y + box.rect.height, 3);
+        expect(text.bbox.x).toBeCloseTo(box.rect.x, 3);
+        // The text maps back to the attribute's value in the chapter file.
+        expect(md.slice(text.kind === 'text' ? text.sourceStart : 0, text.kind === 'text' ? text.sourceEnd : 0)).toBe('Savings');
+        expect(page.composed.attrSources.tema && md.slice(page.composed.attrSources.tema.sourceStart, page.composed.attrSources.tema.sourceEnd)).toBe('Savings');
+        expect(deco.some((b) => b.kind === 'image' && b.fileId === 'g')).toBe(true);
+    });
+    it('hides, replaces or inherits the running heads per template', () => {
+        const slot = (content) => ({ elements: [{ kind: 'text', id: 'x', content, placement: { anchor: { to: 'container', edge: 'top-left' } } }] });
+        const texts = (s) => s?.blocks.flatMap((b) => (b.kind === 'text' ? b.lines.map((l) => l.text) : [])) ?? [];
+        const run = (header, footer) => {
+            const doc = build('Before.\n\n::::page{template="h"}\nText.\n::::', [{ id: 'h', ...(header !== undefined ? { header } : {}), ...(footer !== undefined ? { footer } : {}), frames: [{ name: 'f', flow: true }] }], { header: slot('HEAD {attr.tema}'), footer: slot('FOOT {pageNumber}') });
+            return composedPage(doc);
+        };
+        expect(run(false).header).toBeUndefined();
+        expect(texts(run(false).footer)).toEqual(['FOOT 2']);
+        expect(texts(run(slot('OWN'), false).header)).toEqual(['OWN']);
+        expect(run(slot('OWN'), false).footer).toBeUndefined();
+        expect(texts(run(undefined).header)).toEqual(['HEAD ']);
+    });
+    it('reads `{attr.x}` of the page fence in the running heads of its page', () => {
+        const doc = build('::::page{template="h" tema="Savings"}\nText.\n::::', [{ id: 'h', frames: [{ name: 'f', flow: true }] }], { header: { elements: [{ kind: 'text', id: 'x', content: '{attr.tema}', placement: { anchor: { to: 'container', edge: 'top-left' } } }] } });
+        const header = composedPage(doc).header;
+        expect(header.blocks.flatMap((b) => (b.kind === 'text' ? b.lines.map((l) => l.text) : []))).toEqual(['Savings']);
+    });
+    it('sets content no frame takes in the flow after the page, never losing it', () => {
+        const tpl = { id: 'n', frames: [{ name: 'box' }] };
+        const doc = build('::::page{template="n"}\n:::frame{slot="box"}\nIn the box.\n:::\n\nLoose text.\n::::\n\nAfter.', [tpl]);
+        expect(textOf(blocksOf(doc, frame(doc, 'box')))).toBe('In the box.');
+        const later = doc.pages.slice(1).flatMap((p) => p.columns.flatMap((c) => c.blocks));
+        expect(textOf(later)).toBe('Loose text. After.');
+        expect(later[0].pageIndex).toBe(1);
+    });
+    it('a picture sent to a frame is set in it, not floated', () => {
+        const resources = [{ id: 'pic', typeId: 'figure', kind: 'bitmap', caption: 'A picture', createdAt: 0, updatedAt: 0, bitmap: { fileId: 'p', format: 'png', width: 400, height: 300 } }];
+        const doc = buildDocument({ markdown: '::::page{template="r"}\nText.\n\n::resource{id="pic" slot="photo"}\n::::', resources }, { ...PAGE, pageTemplates: [{ id: 'r', frames: [{ name: 'text', flow: true, width: mm(80) }, { name: 'photo', width: mm(50), placement: { anchor: { to: 'container', edge: 'top-right' } } }] }] }, createMeasurementCache());
+        const photo = frame(doc, 'photo');
+        const pic = blocksOf(doc, photo).find((b) => b.type === 'resource');
+        expect(pic.resourceBlock).toBeDefined();
+        expect(pic.bbox.x).toBeGreaterThanOrEqual(photo.rect.x - 0.01);
+        expect(doc.pages.every((p) => p === composedPage(doc) || (p.floats ?? []).length === 0)).toBe(true);
+    });
+    it('a page of unknown template is set in the flow on pages of its own', () => {
+        const doc = build('A.\n\n::::page{template="nope"}\nInside.\n::::\n\nB.', [TWO]);
+        expect(doc.pages.some((p) => p.composed)).toBe(false);
+        expect(doc.pages.map((p) => textOf(p.columns.flatMap((c) => c.blocks)))).toEqual(['A.', 'Inside.', 'B.']);
+    });
+    it('the parity of the page picks the template’s variant', () => {
+        const tpl = { id: 'var', frames: [{ name: 'f', flow: true, width: mm(100) }], variants: { verso: { frames: [{ name: 'f', width: mm(60) }] } } };
+        const doc = build('::::page{template="var"}\nOne.\n::::\n\n::::page{template="var"}\nTwo.\n::::', [tpl]);
+        const pages = doc.pages.filter((p) => p.composed);
+        expect(pages.map((p) => p.composed.variant)).toEqual([undefined, 'verso']);
+        expect(pages[0].composed.frames[0].rect.width).toBeCloseTo(px(100), 3);
+        expect(pages[1].composed.frames[0].rect.width).toBeCloseTo(px(60), 3);
+        expect(pages[1].composed.frames[0].id).toBe('cp1:f');
+    });
+});
+describe('the page-8 stand-in (#855)', () => {
+    for (const locale of ['es', 'en']) {
+        it(`sets every word of the ${locale} page in its frames, on one page, none in the config`, () => {
+            const { markdown, config, resources } = page8Fixture(locale);
+            const doc = buildDocument({ markdown, resources }, config, createMeasurementCache());
+            expect(doc.pages).toHaveLength(1);
+            const page = doc.pages[0];
+            expect(page.role).toBe('composed');
+            const names = page.composed.frames.map((f) => f.name);
+            expect(names).toEqual(['titulo', 'texto', 'dinero', 'dinero-fotos', 'gasto', 'gasto-fotos', 'ahorro', 'ahorro-fotos']);
+            for (const name of ['dinero', 'gasto', 'ahorro']) {
+                const f = page.composed.frames.find((x) => x.name === name);
+                expect(f.overflowPx).toBe(0);
+                expect(blocksOf(doc, f)[0].designOverlay.blocks.some((b) => b.kind === 'text')).toBe(true);
+            }
+            for (const name of ['dinero-fotos', 'gasto-fotos', 'ahorro-fotos']) {
+                const f = page.composed.frames.find((x) => x.name === name);
+                expect(blocksOf(doc, f).some((b) => b.type === 'resource')).toBe(true);
+            }
+            // The boxes stack down the page, each below the one before.
+            const ys = ['titulo', 'texto', 'dinero', 'gasto', 'ahorro'].map((n) => page.composed.frames.find((f) => f.name === n).rect.y);
+            expect([...ys].sort((a, b) => a - b)).toEqual(ys);
+            // The configuration holds no sentence of the page.
+            const text = JSON.stringify(config);
+            for (const b of page.floats)
+                for (const l of b.lines)
+                    if (l.text.length > 20)
+                        expect(text).not.toContain(l.text);
+            expect((doc.contentWarnings ?? []).filter((w) => w.kind === 'frameOverflow')).toEqual([]);
+            expect(page.composed.decoration.blocks.some((b) => b.kind === 'image')).toBe(true);
+        });
+    }
+});
+//# sourceMappingURL=layout.test.js.map