postext 1.4.1 → 1.5.0

package/dist/pipeline/calloutLayout.js

@@ -40,14 +40,16 @@
  */
 import { spaceDirectiveLines } from '../parse/attrs';
 import { dimensionToPx } from '../units';
-import { createBoundingBox, createVDTBlock, } from '../vdt';
+import { createBoundingBox, createVDTBlock, pictureTraits, } from '../vdt';
 import { buildFontString, measureBlock, measureRichBlock, measureTextWidth } from '../measure';
 import { applyStyleAttrs, isMarkerBlock } from './buildHelpers';
 import { resetLinePositions } from './placement';
+import { raggedLooseLines } from './raggedLines';
 import { resolveBodyStyle, resolveBlockquoteStyle } from './styles';
-import { computeLevelIndentsPx, computeOrderedLevelIndentsPx } from './lists';
+import { computeLevelIndentsPx, computeOrderedLevelIndentsPx, listBulletPosition, listItemGapPx } from './lists';
 import { measureContentBlock } from './measureContentBlock';
 import { uppercasePreservingLength } from './buildBlockKind';
+import { headingIsHidden } from './headingStyles';
 /** Map every `containerStart{callout}` index to its range. Resolved up front
  *  (like `:::paragraphs`) because keep-with-next rollbacks rewind the
  *  placement loop and replay blocks. Unclosed containers are auto-closed by
@@ -74,7 +76,8 @@ export function planCallouts(contentBlocks) {
     return plan;
 }
 /** The style a `:::callout{type="…"}` selects: the matching id, else the
- *  first configured style (the sandbox flags unknown types as a warning). */
+ *  first configured style (`collectContentWarnings` reports an unknown type
+ *  in `doc.contentWarnings`). */
 export function pickCalloutStyle(styles, type) {
     if (styles.length === 0)
         return undefined;
@@ -91,7 +94,8 @@ export function pickCalloutStyle(styles, type) {
 /** Shallow copy of `resolved` whose `bodyText`, `unorderedLists` and
  *  `orderedLists` carry the callout style's `body` / `lists` overrides, so
  *  `resolveBodyStyle`, the list item resolvers and the indent cascade yield
- *  the callout typography without any callout-specific branches. Child
+ *  the callout typography without any callout-specific branches (the
+ *  body's `italic` / `smallCaps` ride on `bodyText` for that). Child
  *  headings (rare) keep the normal heading styles. */
 export function deriveCalloutResolvedConfig(resolved, style) {
     const { body, lists } = style;
@@ -99,9 +103,16 @@ export function deriveCalloutResolvedConfig(resolved, style) {
     const ol = resolved.orderedLists;
     // Level-specific bullets/colours only follow the override when it actually
     // differs from the general value they were resolved from — a style that
-    // inherits keeps the document's per-level bullets intact.
+    // inherits keeps the document's per-level bullets intact (and so does one
+    // that repeats the document's bullet or colour: its nested levels keep
+    // their dashes).
     const bulletOverride = lists.bulletChar !== ul.bulletChar;
     const colorOverride = lists.color.hex !== ul.color.hex;
+    // The numbers of ordered lists take the box's colour whenever the style
+    // sets it, also to the document's bullet colour (EF-92): the ordered lists
+    // have a colour of their own, which an unset `lists.color` leaves alone.
+    // A resolved style without the flag (built by hand) keeps the old rule.
+    const numberColorOverride = lists.colorSet === true || colorOverride;
     return {
         ...resolved,
         bodyText: {
@@ -112,6 +123,10 @@ export function deriveCalloutResolvedConfig(resolved, style) {
             color: body.color,
             boldColor: body.boldColor ?? body.color,
             ...(body.italicColor ? { italicColor: body.italicColor } : {}),
+            fontWeight: body.fontWeight,
+            boldFontWeight: body.boldFontWeight,
+            ...(body.italic ? { italic: true } : {}),
+            ...(body.smallCaps ? { smallCaps: true } : {}),
             textAlign: body.textAlign,
             hyphenation: { ...resolved.bodyText.hyphenation, enabled: body.hyphenation },
             paragraphSpacing: body.paragraphSpacing,
@@ -136,11 +151,11 @@ export function deriveCalloutResolvedConfig(resolved, style) {
         },
         orderedLists: {
             ...ol,
-            color: colorOverride ? lists.color : ol.color,
+            color: numberColorOverride ? lists.color : ol.color,
             indent: lists.indent,
             gap: lists.gap,
             itemSpacing: lists.itemSpacing,
-            levels: ol.levels.map((l) => ({ ...l, color: colorOverride ? lists.color : l.color })),
+            levels: ol.levels.map((l) => ({ ...l, color: numberColorOverride ? lists.color : l.color })),
         },
     };
 }
@@ -160,6 +175,10 @@ export function deriveCalloutMeasureContext(ctx, style) {
         orderedLevelIndentsPx: computeOrderedLevelIndentsPx(resolved, bodyStyle.fontSizePx, ctx.orderedMetrics.maxWidthByDepth),
     };
 }
+/** The measures of `layoutCallout`'s first child across widths (see
+ *  `CalloutLayoutInput.lineWidths`), per resolved configuration and
+ *  content block: a build lays a split box out again on every pass. */
+const acrossWidthsMemo = new WeakMap();
 const VALID_SPANS = new Set(['column', 'page', 'side']);
 const VALID_PLACEMENTS = new Set(['here', 'auto', 'top', 'bottom', 'fixed']);
 /** Per-instance span / placement: fence attribute when valid, else the style. */
@@ -226,6 +245,8 @@ function offsetBlock(blk, ox, oy) {
         blk.separatorX += ox;
     if (blk.bulletY !== undefined)
         blk.bulletY += oy;
+    if (blk.bulletBaselineY !== undefined)
+        blk.bulletBaselineY += oy;
     if (blk.resourceBlock)
         offsetResourceBlock(blk.resourceBlock, ox, oy);
     // A nested box's frame carries its decoration on the overlay.
@@ -243,6 +264,10 @@ function offsetDesignBlock(b, ox, oy) {
         for (const line of b.lines)
             line.baselineY += oy;
     }
+    if (b.kind === 'box' && b.clip) {
+        b.clip.x += ox;
+        b.clip.y += oy;
+    }
 }
 /** Move a laid-out callout from frame-relative to absolute page coordinates
  *  with the frame's top-left at `(x, y)`. */
@@ -291,40 +316,58 @@ export function layoutCallout(input) {
     const stripeLeft = sideStripe && style.stripe.side === 'left';
     const stripeRight = sideStripe && style.stripe.side === 'right';
     const topStripe = stripeOn && style.stripe.side === 'top';
-    const hasIcon = !input.continuation && iconPresent(style.icon);
-    const iconSize = hasIcon ? px(style.icon.size) : 0;
-    const iconBoxW = hasIcon && style.icon.width ? Math.max(iconSize, px(style.icon.width)) : iconSize;
+    // The icon is drawn on the head only (`hasIcon`), but its geometry is
+    // the box's on every fragment.
+    const iconOn = iconPresent(style.icon);
+    const hasIcon = !input.continuation && iconOn;
+    const iconSize = iconOn ? px(style.icon.size) : 0;
+    const iconBoxW = iconOn && style.icon.width ? Math.max(iconSize, px(style.icon.width)) : iconSize;
     const gapPx = px(style.titleStyle.gap);
     // The icon takes its own column only when there is no side stripe to sit
-    // over. A continuation that opens inside a paragraph (`lineFrom`) keeps
-    // that column empty: its lines were counted at the head's inner width,
-    // so the text must wrap the same way — line `lineFrom` on, nothing lost
-    // or doubled.
-    const openingMidRun = !!input.continuation && (input.lineFrom ?? 0) > 0;
+    // over. A continuation keeps that column, empty (EF-114): a box has one
+    // measure in columns of one width, and a continuation that opens inside a
+    // paragraph (`lineFrom`) wraps its text as the head counted it, line
+    // `lineFrom` on, nothing lost or doubled. In a column of another width
+    // the paragraph is broken again as the fragments before counted it
+    // (`lineWidths`).
     const cornerIcon = style.icon.position === 'corner';
     // A corner badge hangs on the top-right corner — or the left one, for an
     // `'outer'` badge on a verso of mirrored margins (`'inner'` on a recto).
     const cornerRight = style.icon.cornerSide === 'right'
         || (style.icon.cornerSide === 'outer' && !input.mirrored)
         || (style.icon.cornerSide === 'inner' && !!input.mirrored);
-    const iconColumnKept = (hasIcon || (openingMidRun && iconPresent(style.icon))) && !sideStripe && !cornerIcon;
+    const iconColumnKept = iconOn && !sideStripe && !cornerIcon;
     const iconColumn = iconColumnKept ? iconBoxW + gapPx : 0;
+    // A corner badge is centred on its corner by the width it is drawn at: a
+    // wide strip (`icon.width`) hangs half its width past the border, not
+    // half its height (EF-142).
+    const cornerIconW = cornerIcon && iconOn ? iconFootprintWidth(style.icon, iconSize, iconBoxW, ctx) : iconSize;
     const innerX = (stripeLeft ? stripeW : 0) + padL + iconColumn;
     const innerTop = (topStripe ? stripeW : 0) + padT;
     // --- Title -----------------------------------------------------------------
+    // A continuation repeats the title, with its suffix, only when the style
+    // asks for it (`repeatTitle`); the repeat is pagination furniture.
+    const repeatedTitle = !!input.continuation && style.repeatTitle && rawTitle.trim().length > 0;
+    const suffix = repeatedTitle ? style.continuedSuffix.trim() : '';
+    const shownTitle = suffix.length > 0 ? `${rawTitle} ${suffix}` : rawTitle;
     const titleText = style.titleStyle.textTransform === 'uppercase'
-        ? uppercasePreservingLength(rawTitle)
-        : rawTitle;
+        ? uppercasePreservingLength(shownTitle)
+        : shownTitle;
     const titleFontPx = dimensionToPx(style.titleStyle.fontSize, dpi, em);
     const titleFont = buildFontString(style.titleStyle.fontFamily, titleFontPx, style.titleStyle.fontWeight.toString(), style.titleStyle.italic ? 'italic' : 'normal');
-    const titleLineHeight = titleFontPx * 1.2;
+    // The title's leading (EF-182): `em` / `rem` count its own size; 1.2 em
+    // unless the style sets one.
+    const titleLh = style.titleStyle.lineHeight ?? { value: 1.2, unit: 'em' };
+    const titleLineHeight = titleLh.unit === 'em' || titleLh.unit === 'rem'
+        ? titleFontPx * titleLh.value
+        : dimensionToPx(titleLh, dpi, titleFontPx);
     const titleTrackingPx = Math.max(0, dimensionToPx(style.titleStyle.letterSpacing, dpi, titleFontPx));
     // A corner badge on the left hangs half over the title's side: the title
     // starts past it (its inner half plus the icon gap), at least — a
     // configured `indent` only adds beyond that room.
-    const cornerLeftRoom = hasIcon && cornerIcon && !cornerRight ? Math.max(0, iconSize / 2 + gapPx - padL) : 0;
+    const cornerLeftRoom = hasIcon && cornerIcon && !cornerRight ? Math.max(0, cornerIconW / 2 + gapPx - padL) : 0;
     const titleIndentPx = Math.max(cornerLeftRoom, dimensionToPx(style.titleStyle.indent, dpi, titleFontPx));
-    const hasTitle = !input.continuation && titleText.trim().length > 0;
+    const hasTitle = (!input.continuation || repeatedTitle) && titleText.trim().length > 0;
     const titleWidthOf = (t) => measureTextWidth(t, titleFont) + titleTrackingPx * t.length;
     // Box width: `fill` uses the given width less the marker column; `auto`
     // shrink-wraps the title.
@@ -365,6 +408,7 @@ export function layoutCallout(input) {
             })),
             clip: false,
             ...(titleTrackingPx > 0 ? { letterSpacingPx: titleTrackingPx } : {}),
+            ...(repeatedTitle ? { artifact: true } : {}),
         };
         cursorY += titleHeight;
     }
@@ -377,40 +421,157 @@ export function layoutCallout(input) {
     const units = [];
     const nestPath = input.nestPath && input.nestPath.length > 0 ? input.nestPath : undefined;
     const columnGapPx = px(style.columnGap);
-    /** A `:::space` between children: body lines of the box's own type,
-     *  dropped at the top of the box (or of a `:::columns` group). */
+    /** A `:::space` between children: body lines of the box's own type.
+     *  Before the first child it is dropped, like at the top of a column —
+     *  the padding already sets the content off the frame — unless it opens
+     *  the head of a box under its title, or the box holds nothing else (an
+     *  answer box sized by its space); at the top of a `:::columns` group or
+     *  of a split box's continuation it always vanishes. */
     const addSpace = (raw, st) => {
-        if (raw.type !== 'directive' || raw.directiveName !== 'space' || st.first)
+        if (raw.type !== 'directive' || raw.directiveName !== 'space')
+            return;
+        if (st.first && !st.keepLeadingSpace)
             return;
         st.cursorY += (spaceDirectiveLines(raw.directiveAttrs) ?? 1) * bodyStyle.lineHeightPx;
     };
+    /** The gap an inline resource keeps in the box (`layout.inlineResourceGapInBoxes`):
+     *  a line of the box's text, above it and, with `inlineResourceGap:
+     *  'around'`, below it. None when off (postext 1.4). */
+    const resourceGapPx = input.resolved.layout.inlineResourceGapInBoxes ? bodyStyle.lineHeightPx : 0;
+    const resourceGapBelow = input.resolved.layout.inlineResourceGap !== 'above';
     const isFirstRealOf = (k) => children.slice(0, k).every((c) => c.type === 'directive' || isMarkerBlock(c));
     const isLastRealOf = (k) => children.slice(k + 1).every((c) => c.type === 'directive' || isMarkerBlock(c));
+    /** The widths of `lineWidths` as a child's measure: a child set `width`
+     *  wide in a box `input.width` wide is that much narrower at every box
+     *  width (the box's padding, stripe, icon and marker columns stay). */
+    const childWidthAt = (boxWidth, width) => Math.max(1, width - (input.width - boxWidth));
+    /** The first child of a continuation that goes on in a column of another
+     *  width than the fragments before it (`lineWidths`), measured as they
+     *  counted its lines and, from `lineFrom` on, for this box: the lines
+     *  the earlier fragments placed keep their breaks. `undefined` when the
+     *  child is measured at `width` alone: no width changed, the child is
+     *  not the first one or opens at its head, or its placed lines cannot
+     *  be set again as they were (then it is sliced from a measure at
+     *  `width`, as before). */
+    const measureFirstChildAcrossWidths = (raw, blockIdx, k, width, styleOverride) => {
+        const history = input.lineWidths;
+        const lineFrom = input.lineFrom ?? 0;
+        if (!history || history.length === 0 || lineFrom <= 0 || !isFirstRealOf(k))
+            return undefined;
+        if (history.every((h) => Math.abs(h.width - input.width) <= 0.5))
+            return undefined;
+        // A split tries many cuts from the same start, and these measures are
+        // not cached by the measurement cache (they break at several widths).
+        let perBlock = acrossWidthsMemo.get(input.resolved);
+        if (!perBlock)
+            acrossWidthsMemo.set(input.resolved, (perBlock = new WeakMap()));
+        let memo = perBlock.get(raw);
+        if (!memo)
+            perBlock.set(raw, (memo = new Map()));
+        const styleAt = input.resolved.calloutStyles.indexOf(style);
+        // Every fragment's measure: the head's, then each one after it, which
+        // keeps the lines the fragments before it placed and breaks the rest
+        // for its own width. The one this fragment is set from is the last.
+        const last = history[history.length - 1];
+        const widths = Math.abs(last.width - input.width) <= 0.5
+            ? history
+            : [...history, { fromLine: lineFrom, width: input.width }];
+        const steps = widths.map((h) => ({ fromLine: h.fromLine, columnWidth: childWidthAt(h.width, width) }));
+        const base = steps[0].columnWidth;
+        let prev;
+        for (let i = 0; i < steps.length; i++) {
+            const key = `${styleAt}|${blockIdx}|${steps.slice(0, i + 1).map((st) => `${st.fromLine}:${st.columnWidth}`).join(',')}`;
+            if (memo.has(key)) {
+                prev = memo.get(key);
+                if (!prev)
+                    return undefined;
+                continue;
+            }
+            let next;
+            if (i === 0) {
+                next = measureContentBlock(raw, blockIdx, base, derivedCtx, { styleOverride }) ?? undefined;
+            }
+            else if (prev) {
+                const keep = steps[i].fromLine;
+                const breaks = prev.measured.breaks;
+                const keepBreaks = breaks && breaks.at.length >= keep ? { path: breaks.path, at: breaks.at.slice(0, keep) } : undefined;
+                const again = measureContentBlock(raw, blockIdx, base, derivedCtx, {
+                    styleOverride,
+                    restColumnWidths: steps.slice(1, i + 1),
+                    ...(keepBreaks ? { keepBreaks } : {}),
+                    // No shorter setting for a runt: its tracking would part the
+                    // lines kept from the ones placed before.
+                    looseness: 0,
+                });
+                const a = again?.measured.lines ?? [];
+                const b = prev.measured.lines;
+                next = again && (again.letterSpacingPx ?? 0) === (prev.letterSpacingPx ?? 0) && a.length > keep && b.length >= keep
+                    && b.slice(0, keep).every((l, j) => a[j].text === l.text && a[j].hyphenated === l.hyphenated)
+                    ? again
+                    : undefined;
+            }
+            memo.set(key, next);
+            if (!next)
+                return undefined;
+            prev = next;
+        }
+        return prev && prev.measured.lines.length > lineFrom ? prev : undefined;
+    };
     /** Lay out one child at `width` from `x`, appending it to `into` and
      *  advancing the stack. */
     const placeChild = (raw, k, width, x, st, into, unitsInto) => {
         const blockIdx = childStartIdx + k;
-        const measuredBlock = measureContentBlock(raw, blockIdx, width, derivedCtx, {
-            styleOverride: input.paragraphStyleFor?.(blockIdx),
-        });
+        // Inside a `:::paragraphs` container: its style, and for the block that
+        // closes it the tail style, which carries the container's bottom margin.
+        const container = input.paragraphContainers?.byBlock[blockIdx];
+        const next = children[k + 1];
+        const isContainerTail = container !== undefined && next?.type === 'containerEnd' && next.containerId === container.id;
+        const styleOverride = container ? (isContainerTail ? container.tailStyle : container.style) : undefined;
+        const measuredBlock = measureFirstChildAcrossWidths(raw, blockIdx, k, width, styleOverride)
+            ?? measureContentBlock(raw, blockIdx, width, derivedCtx, { styleOverride });
         if (!measuredBlock)
             return undefined;
-        const { kind, measured, prefixLen, absoluteSourceMap, mathDisplayRender, resourceBlock } = measuredBlock;
-        const { style: bs, vdtType, headingLevel, numberPrefix, listBullet, listDepth, listKind, bulletXOffsetInColumn, strikethroughText } = kind;
-        // Spacing above: margin collapsing, list-item spacing inside a run.
+        const { kind, measured, prefixLen, absoluteSourceMap, mathDisplayRender, resourceBlock, letterSpacingPx } = measuredBlock;
+        const { vdtType, headingLevel, numberPrefix, headingNumber, listBullet, listDepth, listKind, bulletXOffsetInColumn, strikethroughText } = kind;
+        // A structural heading (`hidden`) keeps its lines' text but prints
+        // nothing and takes no room: no line height, no margins, and the
+        // spacing around it collapses as if it were not there.
+        const hiddenHeading = vdtType === 'heading' && headingIsHidden(raw, derivedCtx.headingLevels?.forBlock(raw) ?? derivedCtx.resolved.headings.levels.find((l) => l.level === raw.level));
+        const bs = hiddenHeading ? { ...kind.style, lineHeightPx: 0, marginTopPx: 0, marginBottomPx: 0 } : kind.style;
+        // An inline resource keeps the gap as in running text (EF-117): a line
+        // of the box's text above it, and below it with `'around'`.
+        const inlineResource = vdtType === 'resource' && !!resourceBlock;
+        const marginTopPx = inlineResource ? Math.max(bs.marginTopPx, resourceGapPx) : bs.marginTopPx;
+        const marginBottomPx = inlineResource && resourceGapBelow ? Math.max(bs.marginBottomPx, resourceGapPx) : bs.marginBottomPx;
+        // Spacing above: margin collapsing, list-item spacing inside a run. A
+        // pull (a negative container margin) applies as it is, unless the
+        // block has a top margin of its own — as in running text.
         let spacing;
-        if (st.first) {
+        if (hiddenHeading) {
+            spacing = 0;
+        }
+        else if (st.first) {
+            spacing = st.prevMarginBottom;
+        }
+        else if (st.pull && marginTopPx <= 0) {
             spacing = st.prevMarginBottom;
         }
         else if (vdtType === 'listItem' && st.prevWasListItem) {
-            spacing = listBullet ? listBullet.itemSpacingPx : 0;
+            // The shallower list's spacing, as in running text (EF-165).
+            const here = { spacingPx: listBullet ? listBullet.itemSpacingPx : 0, depth: listDepth ?? 1 };
+            spacing = st.prevListItem ? listItemGapPx(st.prevListItem, here) : here.spacingPx;
         }
         else {
-            spacing = Math.max(st.prevMarginBottom, bs.marginTopPx);
+            spacing = Math.max(st.prevMarginBottom, marginTopPx);
         }
         st.cursorY += spacing;
         const blk = createVDTBlock(input.nextChildId(), vdtType, bs.fontString, bs.color, bs.textAlign);
         applyStyleAttrs(blk, bs);
+        // The tracking the lines were measured with (a runt set one line
+        // shorter, a heading level's `letterSpacing`): painted as measured,
+        // as in the flow (EF-111).
+        if (letterSpacingPx !== undefined)
+            blk.letterSpacing = letterSpacingPx;
         blk.contentIndex = blockIdx;
         blk.containerId = containerId;
         blk.dirty = false;
@@ -420,6 +581,10 @@ export function layoutCallout(input) {
             blk.calloutPath = [...nestPath];
         if (numberPrefix)
             blk.numberPrefix = numberPrefix;
+        if (headingNumber !== undefined)
+            blk.headingNumber = headingNumber;
+        if (hiddenHeading)
+            blk.hidden = true;
         blk.sourceMap = absoluteSourceMap;
         blk.plainPrefixLen = prefixLen;
         // Line-level cut of the first / last child (split boxes): the kept
@@ -432,7 +597,10 @@ export function layoutCallout(input) {
         const lineTo = isTextRun && isLastReal && input.lineTo !== undefined
             ? Math.max(lineFrom + 1, Math.min(input.lineTo, measured.lines.length))
             : measured.lines.length;
-        const keptLines = isTextRun ? measured.lines.slice(Math.min(lineFrom, measured.lines.length - 1), lineTo) : measured.lines;
+        // A justified line the breaker could not fill is set ragged, as in the
+        // running text (EF-104): a box's narrow measure is where it happens most.
+        const textLines = isTextRun ? raggedLooseLines(measured.lines, bs.textAlign) : measured.lines;
+        const keptLines = isTextRun ? textLines.slice(Math.min(lineFrom, textLines.length - 1), lineTo) : measured.lines;
         const openedMidRun = lineFrom > 0;
         let height;
         if (vdtType === 'resource' && resourceBlock) {
@@ -490,7 +658,10 @@ export function layoutCallout(input) {
                 blk.strikethroughText = true;
             const firstLine = blk.lines[0];
             if (firstLine) {
-                blk.bulletY = firstLine.baseline - listBullet.textFontSizePx * 0.3 + listBullet.verticalOffsetPx;
+                const at = listBulletPosition(listBullet, firstLine.baseline);
+                blk.bulletY = at.bulletY;
+                if (at.bulletBaselineY !== undefined)
+                    blk.bulletBaselineY = at.bulletBaselineY;
             }
         }
         else if (listBullet) {
@@ -500,11 +671,47 @@ export function layoutCallout(input) {
         into.push(blk);
         unitsInto.push({ kind: 'block', block: blk });
         st.cursorY += height;
-        st.prevMarginBottom = bs.marginBottomPx;
-        st.prevWasListItem = vdtType === 'listItem';
-        st.first = false;
+        if (!hiddenHeading) {
+            st.prevMarginBottom = marginBottomPx;
+            // A negative container bottom margin pulls the next block up.
+            st.pull = isContainerTail && bs.marginBottomPx < 0;
+            st.prevWasListItem = vdtType === 'listItem';
+            st.prevListItem = vdtType === 'listItem' ? { spacingPx: listBullet ? listBullet.itemSpacingPx : 0, depth: listDepth ?? 1 } : undefined;
+            st.first = false;
+        }
         return blk;
     };
+    /** A `:::paragraphs` fence among the children: the container's top margin
+     *  on entry, and its bottom margin on exit when the block before is not a
+     *  paragraph (a closing paragraph carries it in its tail style). Each
+     *  collapses with the spacing already there, as in running text; a
+     *  negative one pulls (see `Stack.pull`). At the top of the box it
+     *  vanishes, as at the top of a column. Under a closing paragraph the
+     *  space is at least the box's paragraph spacing, as between two
+     *  paragraphs of its text (`bodyText.paragraphContainerSpacing:
+     *  'collapse'`, EF-181). */
+    const containerMargin = (raw, k, st) => {
+        if ((raw.type !== 'containerStart' && raw.type !== 'containerEnd') || raw.containerId === undefined)
+            return;
+        const pc = input.paragraphContainers?.byId.get(raw.containerId);
+        if (!pc || st.first)
+            return;
+        if (raw.type === 'containerEnd' && children[k - 1]?.type === 'paragraph') {
+            if (input.resolved.bodyText.paragraphContainerSpacing === 'collapse' && !st.pull && bodyStyle.marginBottomPx > st.prevMarginBottom) {
+                st.prevMarginBottom = bodyStyle.marginBottomPx;
+            }
+            return;
+        }
+        const margin = raw.type === 'containerStart' ? pc.marginTopPx : pc.marginBottomPx;
+        if (margin < 0) {
+            st.prevMarginBottom += margin;
+            st.pull = true;
+        }
+        else if (margin > st.prevMarginBottom) {
+            st.prevMarginBottom = margin;
+            st.pull = false;
+        }
+    };
     /** Lay out the nested box whose fence opens with `open` (content index
      *  `openIdx`) over `children[k0 … k1 - 1]` — `k1` is its closing marker's
      *  position, or `children.length` when the range ends inside it — at
@@ -529,10 +736,17 @@ export function layoutCallout(input) {
             containerId,
             frameId: input.nextChildId(),
             nextChildId: input.nextChildId,
-            ...(input.paragraphStyleFor ? { paragraphStyleFor: input.paragraphStyleFor } : {}),
+            ...(input.paragraphContainers ? { paragraphContainers: input.paragraphContainers } : {}),
             ...(input.bodyOffset !== undefined ? { bodyOffset: input.bodyOffset } : {}),
             continuation: !!reopened,
+            // Cut before its closing marker, the nested box goes on in the next
+            // fragment too.
+            ...(!closed ? { continues: true } : {}),
             ...(reopened && input.lineFrom !== undefined ? { lineFrom: input.lineFrom } : {}),
+            // The nested box is `input.width - width` narrower at every width.
+            ...(reopened && input.lineWidths
+                ? { lineWidths: input.lineWidths.map((h) => ({ fromLine: h.fromLine, width: childWidthAt(h.width, width) })) }
+                : {}),
             ...(!closed && input.lineTo !== undefined ? { lineTo: input.lineTo } : {}),
             ...(reopened && reopened.openRest.length > 0 ? { openNested: reopened.openRest } : {}),
             mirrored: input.mirrored,
@@ -565,6 +779,7 @@ export function layoutCallout(input) {
         });
         st.cursorY += nested.totalHeight;
         st.prevMarginBottom = nested.marginBottomPx;
+        st.pull = false;
         st.prevWasListItem = false;
         st.first = false;
         return blocks;
@@ -587,6 +802,7 @@ export function layoutCallout(input) {
         delete tail.bulletColor;
         delete tail.bulletOffsetX;
         delete tail.bulletY;
+        delete tail.bulletBaselineY;
         delete tail.separatorText;
         delete tail.separatorFontString;
         delete tail.separatorColor;
@@ -603,7 +819,7 @@ export function layoutCallout(input) {
         // Spacing above the group: as a block with no margin of its own.
         const spacing = st.first ? st.prevMarginBottom : st.prevMarginBottom;
         const groupTop = st.cursorY + spacing;
-        const gst = { cursorY: 0, prevMarginBottom: 0, prevWasListItem: false, first: true };
+        const gst = { cursorY: 0, prevMarginBottom: 0, pull: false, prevWasListItem: false, first: true, keepLeadingSpace: false };
         /** The group's items: a child block, or a nested box's blocks (frame first). */
         const stack = [];
         for (let k = k0; k < k1; k++) {
@@ -619,6 +835,7 @@ export function layoutCallout(input) {
                 }
             }
             addSpace(raw, gst);
+            containerMargin(raw, k, gst);
             if (raw.type === 'directive' || isMarkerBlock(raw))
                 continue;
             if (placeChild(raw, k, colW, innerX, gst, into, unitsInto))
@@ -719,10 +936,19 @@ export function layoutCallout(input) {
         });
         st.cursorY = groupTop + groupHeight;
         st.prevMarginBottom = 0;
+        st.pull = false;
         st.prevWasListItem = false;
         st.first = false;
     };
-    const st = { cursorY, prevMarginBottom: hasTitle ? gapPx : 0, prevWasListItem: false, first: true };
+    const holdsContent = children.some((c) => c.type !== 'directive' && !isMarkerBlock(c));
+    const st = {
+        cursorY,
+        prevMarginBottom: hasTitle ? gapPx : 0,
+        pull: false,
+        prevWasListItem: false,
+        first: true,
+        keepLeadingSpace: !input.continuation && (hasTitle || !holdsContent),
+    };
     if (!isAuto) {
         let k0 = 0;
         // A continuation opening inside a nested box redraws it (and the boxes
@@ -753,11 +979,47 @@ export function layoutCallout(input) {
                 continue;
             }
             addSpace(raw, st);
+            containerMargin(raw, k, st);
             if (raw.type === 'directive' || isMarkerBlock(raw))
                 continue;
             placeChild(raw, k, innerWidth, innerX, st, childBlocks, units);
         }
     }
+    // --- Continuation marker ---------------------------------------------------
+    // "Continued" under the last line of a fragment that goes on, in the box's
+    // body face and size, aligned in the inner width; like the repeated title
+    // it is pagination furniture.
+    const continuesText = style.continuesMarkerEnabled && !isAuto ? style.continuesMarker.trim() : '';
+    let continuesBlock;
+    let continuesMarkerPx = 0;
+    if (continuesText.length > 0) {
+        const font = buildFontString(style.body.fontFamily, em, style.body.fontWeight.toString(), style.continuesMarkerItalic ? 'italic' : 'normal');
+        const lh = bodyStyle.lineHeightPx;
+        const { lines } = measureRichBlock([{ text: continuesText, bold: false, italic: false }], font, font, font, font, innerWidth, lh, { textAlign: 'left' });
+        continuesMarkerPx = lines.length * lh;
+        if (input.continues && lines.length > 0) {
+            const top = st.cursorY;
+            const align = style.continuesMarkerAlign;
+            continuesBlock = {
+                kind: 'text',
+                bbox: createBoundingBox(innerX, top, innerWidth, continuesMarkerPx),
+                fontString: font,
+                color: bodyStyle.color,
+                lines: lines.map((ln, i) => {
+                    const slack = Math.max(0, innerWidth - ln.bbox.width);
+                    return {
+                        text: ln.text,
+                        xOffset: align === 'right' ? slack : align === 'center' ? slack / 2 : 0,
+                        baselineY: top + i * lh + lh * 0.8,
+                        width: ln.bbox.width,
+                    };
+                }),
+                clip: false,
+                artifact: true,
+            };
+            st.cursorY += continuesMarkerPx;
+        }
+    }
     cursorY = st.cursorY;
     // An icon taller than the content grows the inner area to fit it; with
     // `align: 'center'` the title and children are centred on the icon.
@@ -768,6 +1030,8 @@ export function layoutCallout(input) {
         if (style.icon.align === 'center') {
             if (titleBlock)
                 offsetDesignBlock(titleBlock, 0, extra / 2);
+            if (continuesBlock)
+                offsetDesignBlock(continuesBlock, 0, extra / 2);
             for (const blk of childBlocks)
                 offsetBlock(blk, 0, extra / 2);
         }
@@ -795,10 +1059,17 @@ export function layoutCallout(input) {
             : stripeLeft
                 ? createBoundingBox(0, 0, stripeW, boxHeight)
                 : createBoundingBox(boxWidth - stripeW, 0, stripeW, boxHeight);
+        // On a rounded frame the stripe follows the corners: it is clipped to
+        // the frame's rounded rectangle (the radius clamped as the frame's is),
+        // so its square ends never stick out past the background and border.
+        const frameRadius = Math.max(0, Math.min(px(style.borderRadius), boxWidth / 2, boxHeight / 2));
         overlayBlocks.push({
             kind: 'box',
             bbox: stripeBox,
             box: { backgroundColor: style.stripe.color.hex, borderWidthPx: 0, borderRadiusPx: 0 },
+            ...(frameRadius > 0
+                ? { clip: { x: 0, y: 0, width: boxWidth, height: boxHeight, radii: [frameRadius, frameRadius, frameRadius, frameRadius] } }
+                : {}),
         });
     }
     let iconFileId;
@@ -809,7 +1080,7 @@ export function layoutCallout(input) {
         // A corner badge hangs on its corner half past the border, flush with
         // the top edge.
         const iconX = cornerIcon
-            ? (cornerRight ? boxWidth - iconSize / 2 : -iconSize / 2)
+            ? (cornerRight ? boxWidth - cornerIconW / 2 : -cornerIconW / 2)
             : sideStripe
                 ? (stripeLeft ? (stripeW - iconSize) / 2 : boxWidth - stripeW + (stripeW - iconSize) / 2)
                 : innerX - iconColumn;
@@ -827,6 +1098,8 @@ export function layoutCallout(input) {
     }
     if (titleBlock)
         overlayBlocks.push(titleBlock);
+    if (continuesBlock)
+        overlayBlocks.push(continuesBlock);
     // --- Label tab ---------------------------------------------------------------
     // The fence's `label` on a tab hugging a top corner, rising `offset`
     // above the box; an icon beside it and a rule along the top edge.
@@ -874,7 +1147,7 @@ export function layoutCallout(input) {
                     w = dims.width * k;
                     h = dims.height * k;
                 }
-                overlayBlocks.push({ kind: 'image', bbox: createBoundingBox(onRight ? iconX + iconW - w : iconX, tabY + (tabH - h) / 2, w, h), fileId });
+                overlayBlocks.push({ kind: 'image', bbox: createBoundingBox(onRight ? iconX + iconW - w : iconX, tabY + (tabH - h) / 2, w, h), fileId, ...pictureTraits(resource, fileId) });
                 edgeX = onRight ? iconX + iconW - w : iconX + w;
             }
         }
@@ -979,6 +1252,7 @@ export function layoutCallout(input) {
         totalHeight: frameHeight,
         marginTopPx: px(style.marginTop),
         marginBottomPx: px(style.marginBottom),
+        continuesMarkerPx,
     };
 }
 /** Whether an icon / marker spec draws anything. */
@@ -999,6 +1273,19 @@ function fitInSquare(x, y, size, w, h) {
     const fh = h * scale;
     return createBoundingBox(x + (size - fw) / 2, y + (size - fh) / 2, fw, fh);
 }
+/** How wide the icon `buildIconBlock` draws for `spec` in a slot `size`
+ *  tall and `boxWidth` wide: the fitted picture of a wide resource icon (a
+ *  strip), else the square. A corner badge is centred on its corner by
+ *  this width (EF-142). */
+function iconFootprintWidth(spec, size, boxWidth, ctx) {
+    if (spec.kind !== 'resource' || boxWidth <= size)
+        return size;
+    const resource = ctx.resourceById.get(spec.resourceId);
+    const dims = resource?.bitmap ?? resource?.svg;
+    if (!dims?.width || !dims.height)
+        return size;
+    return dims.width * Math.min(boxWidth / dims.width, size / dims.height);
+}
 /** The design block for an icon spec drawn in the square `(x, y, size)`:
  *  an image block for a resource (aspect-fitted; `undefined` when the
  *  resource is missing), a centred text block for a glyph. */
@@ -1017,7 +1304,7 @@ function buildIconBlock(spec, x, y, size, ctx, boxWidth = size) {
             bbox = createBoundingBox(x, y + (size - fh) / 2, fw, fh);
         }
         return {
-            block: { kind: 'image', bbox, fileId },
+            block: { kind: 'image', bbox, fileId, ...pictureTraits(resource, fileId) },
             fileId,
             format: resource?.bitmap?.format,
         };