reamkit 1.20.0 → 1.22.0

package/dist/esm/layout/page-doc.js

@@ -5,30 +5,46 @@ function paintPlan(commands) {
 	const borders = [];
 	const shapes = [];
 	const lines = [];
-	for (const c of commands) switch (c.type) {
-		case "fill":
-			fills.push(c);
-			break;
-		case "image":
-			images.push(c);
-			break;
-		case "border":
-			borders.push(c);
-			break;
-		case "shape":
-			shapes.push(c);
-			break;
-		case "line":
-			lines.push(c);
-			break;
-		default: assertNeverPageItem(c);
+	const pictures = /* @__PURE__ */ new Map();
+	const behind = [];
+	for (const c of commands) {
+		if (c.behind === true) {
+			behind.push(c);
+			continue;
+		}
+		if (c.pictureId !== void 0) {
+			const group = pictures.get(c.pictureId);
+			if (group) group.push(c);
+			else pictures.set(c.pictureId, [c]);
+			continue;
+		}
+		switch (c.type) {
+			case "fill":
+				fills.push(c);
+				break;
+			case "image":
+				images.push(c);
+				break;
+			case "border":
+				borders.push(c);
+				break;
+			case "shape":
+				shapes.push(c);
+				break;
+			case "line":
+				lines.push(c);
+				break;
+			default: assertNeverPageItem(c);
+		}
 	}
 	return {
+		behind,
 		fills,
 		images,
 		borders,
 		shapes,
-		lines
+		lines,
+		pictures: [...pictures.values()]
 	};
 }
 function assertNeverPageItem(item) {

package/dist/esm/layout/styled-layout.js

@@ -951,7 +951,7 @@ function layoutBodyElement(el, options, fontResources, imageResources, contentWi
 		const meta = el.image.resource ? imageResources?.get(el.image.resource)?.metafile : void 0;
 		return meta ? layoutMetafileBlock(el.image, meta, options, fontResources, contentWidth, maxHeight, box) : layoutImageBlock(el.image, imageResources, contentWidth, maxHeight, box);
 	}
-	if (el.kind === "chart") return layoutChartBlock(el.chart, options, fontResources, contentWidth, maxHeight);
+	if (el.kind === "chart") return layoutChartBlock(el.chart, options, fontResources, contentWidth, maxHeight, imageResources);
 	return layoutShapeBlock(el.shape, options, fontResources, imageResources, contentWidth, maxHeight, box);
 }
 function layoutImageBlock(image, imageResources, contentWidth, maxHeight, box) {
@@ -999,6 +999,7 @@ function layoutImageBlock(image, imageResources, contentWidth, maxHeight, box) {
 		resourceName: res?.resourceName ?? "",
 		...image.outline ? { outline: image.outline } : {},
 		...image.wash ? { wash: image.wash } : {},
+		...image.alpha !== void 0 && image.alpha < 1 ? { alpha: image.alpha } : {},
 		...image.crop ? { crop: image.crop } : {},
 		...image.rotation60k ? { rotationDeg: image.rotation60k / 6e4 } : {},
 		...image.flipH ? { flipH: true } : {},
@@ -1073,7 +1074,7 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 				continue;
 			}
 			if (el.kind === "chart") {
-				const laid = layoutChartBlock(el.chart, options, fontResources, innerWidth);
+				const laid = layoutChartBlock(el.chart, options, fontResources, innerWidth, void 0, imageResources);
 				const line = {
 					tokens: [],
 					contentWidthPt: laid.widthPt,
@@ -1185,6 +1186,8 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 		...fillImageResourceName ? { fillImageResourceName } : {},
 		...fillImageTile ? { fillImageTile } : {},
 		...fillImageResourceName && shape.fill.imageCrop ? { fillImageCrop: shape.fill.imageCrop } : {},
+		...fillImageResourceName && shape.fill.imageFillRect ? { fillImageRect: shape.fill.imageFillRect } : {},
+		...fillImageResourceName && shape.fill.duotone ? { fillImageDuotone: shape.fill.duotone } : {},
 		...fillColorHex ? { fillColorHex } : {},
 		...fillGradient ? { fillGradient } : {},
 		...shape.fill.alpha !== void 0 && shape.fill.alpha < 1 ? { fillAlpha: shape.fill.alpha } : {},
@@ -1226,7 +1229,7 @@ function layoutMetafileBlock(image, pic, options, fontResources, contentWidth, m
 	const placed = layoutImageBlock(image, void 0, contentWidth, maxHeight, box);
 	const widthPt = placed.widthPt;
 	const heightPt = placed.heightPt;
-	const layout = rotateDrawing(metafileDrawing(pic, widthPt, heightPt, options, fontResources), (image.rotation60k ?? 0) / 6e4, widthPt / 2, heightPt / 2);
+	const layout = rotateDrawing(metafileDrawing(pic, widthPt, heightPt, options, fontResources, image.colorChange), (image.rotation60k ?? 0) / 6e4, widthPt / 2, heightPt / 2);
 	const pp = image.paragraphProperties;
 	return {
 		kind: "chart",
@@ -1253,6 +1256,7 @@ function rotateDrawing(layout, deg, cx, cy) {
 	});
 	return {
 		shapes: layout.shapes.map((sh) => ({
+			...sh.seq !== void 0 ? { seq: sh.seq } : {},
 			...sh,
 			paths: sh.paths.map((path) => ({
 				...path,
@@ -1297,16 +1301,29 @@ function rotateDrawing(layout, deg, cx, cy) {
 * `heightPt` one and turned y-up about its bottom-left corner — the frame both
 * a chart block and an inline picture token are drawn in.
 */
-function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
+function metafileDrawing(pic, widthPt, heightPt, options, fontResources, colorChange) {
+	const recolour = (hex) => {
+		if (hex === void 0 || colorChange === void 0) return hex;
+		if (hex.toUpperCase() !== colorChange.fromHex.toUpperCase()) return hex;
+		return colorChange.transparent ? null : colorChange.toHex;
+	};
 	const sx = widthPt / pic.width;
 	const sy = heightPt / pic.height;
 	const mapX = (x) => (x - pic.left) * sx;
 	const mapY = (y) => heightPt - (y - pic.top) * sy;
 	const shapes = [];
 	const texts = [];
+	let seq = 0;
 	for (const prim of pic.prims) {
 		if (prim.kind === "path") {
+			const fill = recolour(prim.fillColorHex);
+			const strokeHex = recolour(prim.stroke?.colorHex);
+			if (fill === null && (prim.stroke === void 0 || strokeHex === null)) {
+				seq++;
+				continue;
+			}
 			shapes.push({
+				seq: seq++,
 				paths: prim.paths.map((path) => ({
 					...path,
 					segments: path.segments.map((seg) => seg.op === "close" ? seg : seg.op === "cubic" ? {
@@ -1323,9 +1340,10 @@ function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
 						y: mapY(seg.y)
 					})
 				})),
-				...prim.fillColorHex !== void 0 ? { fillColorHex: prim.fillColorHex } : {},
-				...prim.stroke ? { stroke: {
+				...fill !== void 0 && fill !== null ? { fillColorHex: fill } : {},
+				...prim.stroke && strokeHex !== null ? { stroke: {
 					...prim.stroke,
+					...strokeHex !== void 0 ? { colorHex: strokeHex } : {},
 					widthPt: Math.max(.25, prim.stroke.widthPt * sx)
 				} } : {}
 			});
@@ -1336,10 +1354,16 @@ function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
 		const font = fontResources.get(variant);
 		if (!font) continue;
 		const sizePt = Math.max(1, prim.sizeLu * sy);
-		const line = makeChartLabelLine(prim.text, font, sizePt, prim.colorHex);
+		const textHex = recolour(prim.colorHex);
+		if (textHex === null) {
+			seq++;
+			continue;
+		}
+		const line = makeChartLabelLine(prim.text, font, sizePt, textHex ?? prim.colorHex);
 		const shift = prim.alignH === "center" ? -line.contentWidthPt / 2 : prim.alignH === "right" ? -line.contentWidthPt : 0;
 		const baselineY = mapY(prim.y) - (prim.alignBaseline ? 0 : sizePt * .8);
 		texts.push({
+			seq: seq++,
 			line,
 			x: mapX(prim.x) + shift,
 			y: baselineY,
@@ -1351,7 +1375,7 @@ function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
 		texts
 	};
 }
-function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight) {
+function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight, imageResources) {
 	let widthPt = block.width;
 	let heightPt = block.height;
 	if (widthPt > contentWidth && widthPt > 0) {
@@ -1373,11 +1397,20 @@ function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight
 	};
 	const pp = block.paragraphProperties;
 	const altText = block.altText ?? chart?.title;
+	const bgRes = chart?.frameFillImage ? imageResources?.get(chart.frameFillImage.resource) : void 0;
+	const bgTile = chart?.frameFillImage?.tiled === true && bgRes?.prepared ? {
+		widthPt: bgRes.prepared.widthPx * 72 / 96,
+		heightPt: bgRes.prepared.heightPx * 72 / 96
+	} : void 0;
 	return {
 		kind: "chart",
 		widthPt,
 		heightPt,
 		layout,
+		...bgRes ? { background: {
+			resourceName: bgRes.resourceName,
+			...bgTile ? { tile: bgTile } : {}
+		} } : {},
 		resolvedAlignment: pp.alignment ?? "left",
 		spacingBeforePt: pp.spacingBefore ?? 0,
 		spacingAfterPt: pp.spacingAfter ?? 0,
@@ -1653,6 +1686,7 @@ function collectImageResources(body, headersFooters, options) {
 		}
 	};
 	visit(body);
+	for (const chart of options.charts?.values() ?? []) if (chart.frameFillImage) seen.add(chart.frameFillImage.resource);
 	if (options.pageBackgroundFill?.imageResource !== void 0) seen.add(options.pageBackgroundFill.imageResource);
 	for (const hf of headersFooters.values()) visit(hf);
 	for (const note of options.footnotes?.values() ?? []) visit(note);
@@ -1688,8 +1722,47 @@ function collectImageResources(body, headersFooters, options) {
 }
 function chartPageItems(laid, x, bottomYUp, pageHeight, structId) {
 	const fig = structId !== void 0 ? { structId } : {};
-	const out = [];
-	for (const sh of laid.layout.shapes) out.push({
+	const ordered = laid.layout.shapes.some((sh) => sh.seq !== void 0);
+	const picture = ordered ? { pictureId: nextPictureId++ } : {};
+	const backdrop = [];
+	if (laid.background) {
+		const box = {
+			x,
+			y: pageHeight - (bottomYUp + laid.heightPt),
+			width: laid.widthPt,
+			height: laid.heightPt
+		};
+		const tile = laid.background.tile;
+		const clip = {
+			paths: [rectPath(laid.widthPt, laid.heightPt)],
+			transform: flipTransform([
+				1,
+				0,
+				0,
+				1,
+				x,
+				bottomYUp
+			], pageHeight)
+		};
+		const items = tile ? PageAssembler.tileItems(laid.background.resourceName, tile, box) : [{
+			type: "image",
+			x: pt(box.x),
+			y: pt(box.y),
+			width: pt(box.width),
+			height: pt(box.height),
+			imageResourceName: laid.background.resourceName
+		}];
+		for (const item of items) {
+			if (item.type !== "image") continue;
+			backdrop.push({
+				...item,
+				clip,
+				...fig,
+				...picture
+			});
+		}
+	}
+	const shapes = laid.layout.shapes.map((sh) => ({
 		type: "shape",
 		shape: {
 			paths: sh.paths,
@@ -1704,18 +1777,25 @@ function chartPageItems(laid, x, bottomYUp, pageHeight, structId) {
 				bottomYUp
 			], pageHeight)
 		},
-		...fig
-	});
-	for (const t of laid.layout.texts) out.push({
+		...fig,
+		...picture,
+		seq: sh.seq ?? 0
+	}));
+	const texts = laid.layout.texts.map((t) => ({
 		type: "line",
 		line: t.line,
 		originX: pt(x + t.x),
 		baselineY: pt(pageHeight - (bottomYUp + t.y)),
 		...t.rotationDeg ? { rotationDeg: t.rotationDeg } : {},
-		...fig
-	});
-	return out;
+		...fig,
+		...picture,
+		seq: t.seq ?? Number.MAX_SAFE_INTEGER
+	}));
+	const all = [...shapes, ...texts];
+	if (ordered) all.sort((a, b) => a.seq - b.seq);
+	return [...backdrop, ...all.map(({ seq: _seq, ...item }) => item)];
 }
+var nextPictureId = 1;
 function emitShapeText(sh, x, bottomYUp, sink, pageHeight, figId) {
 	if (sh.textLines.length === 0) return;
 	if (sh.vertical) {
@@ -1767,10 +1847,11 @@ function emitShapeText(sh, x, bottomYUp, sink, pageHeight, figId) {
 			}
 			return;
 		}
+		const indentLeft = line.resolved.indentLeft + (line.firstLine ? line.resolved.indentFirstLine : 0);
 		sink.push({
 			type: "line",
 			line,
-			originX: pt(x + sh.insetLeftPt + lineOffset),
+			originX: pt(x + sh.insetLeftPt + indentLeft + lineOffset),
 			baselineY: pt(pageHeight - (textY + lineBaselineOffset(line, line.resolved))),
 			...figId !== void 0 ? { structId: figId } : {}
 		});
@@ -1806,6 +1887,7 @@ function emitCellFloat(cf, ctx, frame) {
 			imageResourceName: cf.block.resourceName,
 			...cf.block.crop ? { crop: cf.block.crop } : {},
 			...cf.block.wash ? { wash: cf.block.wash } : {},
+			...cf.block.alpha !== void 0 ? { alpha: cf.block.alpha } : {},
 			...cf.block.rotationDeg ? { rotationDeg: cf.block.rotationDeg } : {},
 			...cf.block.flipH ? { flipH: true } : {},
 			...cf.block.flipV ? { flipV: true } : {}
@@ -1832,20 +1914,30 @@ function emitShapeItems(sh, x, bottomYUp, sink, pageHeight, figId) {
 			sink.push({
 				...item,
 				clip,
+				...fig,
+				...sh.fillAlpha !== void 0 ? { alpha: sh.fillAlpha } : {}
+			});
+		}
+		else {
+			const r = sh.fillImageRect;
+			const boxX = x + (r ? r.left * sh.widthPt : 0);
+			const boxW = sh.widthPt * (r ? 1 - r.left - r.right : 1);
+			const boxH = sh.heightPt * (r ? 1 - r.top - r.bottom : 1);
+			const boxTop = pageHeight - (bottomYUp + sh.heightPt) + (r ? r.top * sh.heightPt : 0);
+			sink.push({
+				type: "image",
+				x: pt(boxX),
+				y: pt(boxTop),
+				width: pt(boxW),
+				height: pt(boxH),
+				imageResourceName: sh.fillImageResourceName,
+				...sh.fillImageCrop ? { crop: sh.fillImageCrop } : {},
+				...sh.fillAlpha !== void 0 ? { alpha: sh.fillAlpha } : {},
+				...sh.fillImageDuotone ? { duotone: sh.fillImageDuotone } : {},
+				clip,
 				...fig
 			});
 		}
-		else sink.push({
-			type: "image",
-			x: pt(x),
-			y: pt(pageHeight - (bottomYUp + sh.heightPt)),
-			width: pt(sh.widthPt),
-			height: pt(sh.heightPt),
-			imageResourceName: sh.fillImageResourceName,
-			...sh.fillImageCrop ? { crop: sh.fillImageCrop } : {},
-			clip,
-			...fig
-		});
 	}
 	if (sh.markerPaths && sh.stroke) sink.push({
 		type: "shape",
@@ -1982,6 +2074,7 @@ function drawBlocksSequentially(blocks, startX, startY, pageHeight, contentWidth
 				imageResourceName: block.resourceName,
 				...block.crop ? { crop: block.crop } : {},
 				...block.wash ? { wash: block.wash } : {},
+				...block.alpha !== void 0 ? { alpha: block.alpha } : {},
 				...block.rotationDeg ? { rotationDeg: block.rotationDeg } : {},
 				...block.flipH ? { flipH: true } : {},
 				...block.flipV ? { flipV: true } : {}
@@ -2114,7 +2207,7 @@ function collectFontResources(body, headersFooters, options, imageResources) {
 			};
 			used.set(fontKey, bucket);
 		}
-		const shaped = shapeText(run.text, parsed.glyphForCodepoint, parsed.advanceWidths, parsed.ligatures, parsed.kerning, parsed.joiningForms);
+		const shaped = shapeText(run.listMarker === true ? markerText(run.text, parsed) : run.text, parsed.glyphForCodepoint, parsed.advanceWidths, parsed.ligatures, parsed.kerning, parsed.joiningForms);
 		for (const g of shaped.gids) bucket.gids.add(g);
 		if (run.text.includes("	")) for (const stop of resolveParagraphProperties(para.properties, options.styles).tabs) {
 			const ch = stop.leader === void 0 ? void 0 : TAB_LEADER_CHARS.get(stop.leader);
@@ -2597,28 +2690,55 @@ function tokenizePlansLtr(plans) {
 			continue;
 		}
 		const highlight = (plan.run.commentRangeRefs?.length ?? 0) > 0;
-		for (const t of tokenizeText(plan.run.text)) tokens.push({
-			kind: "text",
-			text: t.text,
-			isSpace: t.isSpace,
-			...t.tab ? { tab: true } : {},
-			...plan.run.href !== void 0 ? { href: plan.run.href } : {},
-			...plan.run.footnoteRef !== void 0 ? { footnoteRef: plan.run.footnoteRef } : {},
-			...plan.run.anchor !== void 0 ? { anchor: plan.run.anchor } : {},
-			...plan.run.listMarker ? { listMarker: true } : {},
-			...plan.run.columnBreak ? { columnBreak: true } : {},
-			...highlight ? { highlight: true } : {},
-			resolvedRun: plan.resolvedRun,
-			font: plan.font,
-			fontSizePt: plan.fontSizePt,
-			...plan.risePt !== void 0 ? { risePt: plan.risePt } : {},
-			widthPt: measureRunText(plan, t.text),
-			bidiLevel: 0
-		});
+		for (const t of tokenizeText(plan.run.text)) {
+			const text = plan.run.listMarker === true ? markerText(t.text, plan.font.parsed) : t.text;
+			tokens.push({
+				kind: "text",
+				text,
+				isSpace: t.isSpace,
+				...t.tab ? { tab: true } : {},
+				...plan.run.href !== void 0 ? { href: plan.run.href } : {},
+				...plan.run.footnoteRef !== void 0 ? { footnoteRef: plan.run.footnoteRef } : {},
+				...plan.run.anchor !== void 0 ? { anchor: plan.run.anchor } : {},
+				...plan.run.listMarker ? { listMarker: true } : {},
+				...plan.run.columnBreak ? { columnBreak: true } : {},
+				...highlight ? { highlight: true } : {},
+				resolvedRun: plan.resolvedRun,
+				font: plan.font,
+				fontSizePt: plan.fontSizePt,
+				...plan.risePt !== void 0 ? { risePt: plan.risePt } : {},
+				widthPt: measureRunText(plan, text),
+				bidiLevel: 0
+			});
+		}
 	}
 	return tokens;
 }
 /**
+* A LIST MARKER the font has no glyph for, swapped for the dot every text font
+* carries.
+*
+* §21.1.2.4.5 — a bullet is stated in a face of its own, and the symbol faces
+* are not alphabets: Wingdings `l` is a filled circle, U+25CF once translated.
+* The font a document is RENDERED with may have no such character — Roboto does
+* not — and a missing glyph is a box: 45541_Header wore a row of them down
+* eleven slides. The marker is the one place where the shape matters more than
+* the code point, so it takes the nearest thing the font can draw.
+*
+* @param text The marker's text.
+* @param font The font it is set in.
+* @returns The text to draw.
+*/
+function markerText(text, parsed) {
+	let out = "";
+	for (const ch of text) {
+		const cp = ch.codePointAt(0) ?? 0;
+		const missing = cp > 127 && parsed.glyphForCodepoint(cp) === 0;
+		out += missing && parsed.glyphForCodepoint(8226) !== 0 ? "•" : ch;
+	}
+	return out;
+}
+/**
 * §17.3.2.35 — a run's text measured with the space it puts between its
 * characters. PDF adds the same amount per glyph through `Tc`, so the width the
 * line is broken at and the width the page draws agree.
@@ -2677,7 +2797,8 @@ function tokenizePlansBidi(plans, realLevels) {
 		let curLevel = -1;
 		const flush = (endExclusive) => {
 			if (endExclusive <= bufStart) return;
-			const text = chars.slice(bufStart, endExclusive).join("");
+			const raw = chars.slice(bufStart, endExclusive).join("");
+			const text = plan.run.listMarker === true ? markerText(raw, plan.font.parsed) : raw;
 			tokens.push({
 				kind: "text",
 				text,
@@ -4328,7 +4449,10 @@ var PageAssembler = class PageAssembler {
 				...this.pageBorderItems(),
 				...this.columnSeparatorItems(),
 				...header.commands,
-				...PageAssembler.byZ(this.floatsBehind),
+				...PageAssembler.byZ(this.floatsBehind).map((item) => ({
+					...item,
+					behind: true
+				})),
 				...this.current,
 				...PageAssembler.byZ(this.floatsFront),
 				...this.renderNotesBand(),
@@ -4701,6 +4825,7 @@ function paginateSections(blocks, sectionCtxs, builder, defaultLang = "en-US", n
 					imageResourceName: block.resourceName,
 					...block.crop ? { crop: block.crop } : {},
 					...block.wash ? { wash: block.wash } : {},
+					...block.alpha !== void 0 ? { alpha: block.alpha } : {},
 					...block.rotationDeg ? { rotationDeg: block.rotationDeg } : {},
 					...block.flipH ? { flipH: true } : {},
 					...block.flipV ? { flipV: true } : {},

package/dist/esm/pdf/shading.d.ts

@@ -25,4 +25,23 @@ export declare function shapeBbox(shape: VectorShape): Bbox | undefined;
  * @returns A reference to the `/Pattern` object, for a `/Pattern cs /Pn scn` fill.
  */
 export declare function buildGradientPattern(doc: PdfDocument, gradient: ShapeGradient, bbox: Bbox, ctm: readonly [number, number, number, number, number, number]): PdfRef;
+/**
+ * §11.6.5.2 — the luminosity soft mask a gradient with per-stop TRANSPARENCY is
+ * painted through.
+ *
+ * A PDF shading has one colour per point and no alpha, so a gradient that fades
+ * out is drawn as the colour shading masked by a second shading of the same
+ * geometry whose GREY is the transparency: white where the stop is opaque,
+ * black where it is clear. 45541_Footer's master lays a white band down the
+ * left of every slide that starts half transparent, and painted flat it covered
+ * the artwork behind it.
+ *
+ * @param doc      The document to add the objects to.
+ * @param gradient The gradient fill.
+ * @param bbox     The shape's local-space bounding box.
+ * @param ctm      The shape's CTM, as the form's `/Matrix`.
+ * @returns The mask form XObject, or `undefined` when every stop is opaque or
+ *          the sweep has no shading type that can carry a mask.
+ */
+export declare function buildGradientAlphaMask(doc: PdfDocument, gradient: ShapeGradient, bbox: Bbox, ctm: readonly [number, number, number, number, number, number]): PdfRef | undefined;
 export {};

package/dist/esm/pdf/shading.js

@@ -49,7 +49,7 @@ function buildGradientPattern(doc, gradient, bbox, ctm) {
 		Matrix: [...ctm]
 	}));
 }
-function axialShading(angleDeg, b, fnRef) {
+function axialShading(angleDeg, b, fnRef, cs = "DeviceRGB") {
 	const rad = angleDeg * Math.PI / 180;
 	const dx = Math.cos(rad);
 	const dy = -Math.sin(rad);
@@ -70,7 +70,7 @@ function axialShading(angleDeg, b, fnRef) {
 	}
 	return dict({
 		ShadingType: 2,
-		ColorSpace: name("DeviceRGB"),
+		ColorSpace: name(cs),
 		Coords: [
 			cx + (tmin - cproj) * dx,
 			cy + (tmin - cproj) * dy,
@@ -81,13 +81,13 @@ function axialShading(angleDeg, b, fnRef) {
 		Extend: [true, true]
 	});
 }
-function radialShading(b, fnRef, center) {
+function radialShading(b, fnRef, center, cs = "DeviceRGB") {
 	const cx = center ? b.minX + center.x * (b.maxX - b.minX) : (b.minX + b.maxX) / 2;
 	const cy = center ? b.maxY - center.y * (b.maxY - b.minY) : (b.minY + b.maxY) / 2;
 	const r = Math.hypot(b.maxX - b.minX, b.maxY - b.minY) / 2;
 	return dict({
 		ShadingType: 3,
-		ColorSpace: name("DeviceRGB"),
+		ColorSpace: name(cs),
 		Coords: [
 			cx,
 			cy,
@@ -171,6 +171,77 @@ function ps(n) {
 	const s = n.toFixed(6).replace(/0+$/u, "").replace(/\.$/u, "");
 	return s === "" || s === "-0" ? "0" : s;
 }
+/**
+* §11.6.5.2 — the luminosity soft mask a gradient with per-stop TRANSPARENCY is
+* painted through.
+*
+* A PDF shading has one colour per point and no alpha, so a gradient that fades
+* out is drawn as the colour shading masked by a second shading of the same
+* geometry whose GREY is the transparency: white where the stop is opaque,
+* black where it is clear. 45541_Footer's master lays a white band down the
+* left of every slide that starts half transparent, and painted flat it covered
+* the artwork behind it.
+*
+* @param doc      The document to add the objects to.
+* @param gradient The gradient fill.
+* @param bbox     The shape's local-space bounding box.
+* @param ctm      The shape's CTM, as the form's `/Matrix`.
+* @returns The mask form XObject, or `undefined` when every stop is opaque or
+*          the sweep has no shading type that can carry a mask.
+*/
+function buildGradientAlphaMask(doc, gradient, bbox, ctm) {
+	if (!gradient.stops.some((s) => (s.alpha ?? 1) < 1)) return void 0;
+	if (gradient.kind === "radial" && gradient.sweep === "rect") return void 0;
+	const fn = doc.add(buildAlphaRamp(gradient.stops));
+	const shading = gradient.kind === "radial" ? radialShading(bbox, fn, gradient.center, "DeviceGray") : axialShading(gradient.angle ?? 0, bbox, fn, "DeviceGray");
+	return doc.add(stream({
+		Type: name("XObject"),
+		Subtype: name("Form"),
+		BBox: [
+			bbox.minX,
+			bbox.minY,
+			bbox.maxX,
+			bbox.maxY
+		],
+		Matrix: [...ctm],
+		Group: dict({
+			S: name("Transparency"),
+			CS: name("DeviceGray")
+		}),
+		Resources: dict({ Shading: dict({ Sm: doc.add(shading) }) })
+	}, new TextEncoder().encode("q /Sm sh Q")));
+}
+function buildAlphaRamp(stopsIn) {
+	const stops = normalizeStops(stopsIn);
+	if (stops.length <= 2) return dict({
+		FunctionType: 2,
+		Domain: [0, 1],
+		C0: [stops[0].alpha],
+		C1: [stops[stops.length - 1].alpha],
+		N: 1
+	});
+	const functions = [];
+	const bounds = [];
+	const encode = [];
+	for (let i = 0; i < stops.length - 1; i++) {
+		functions.push(dict({
+			FunctionType: 2,
+			Domain: [0, 1],
+			C0: [stops[i].alpha],
+			C1: [stops[i + 1].alpha],
+			N: 1
+		}));
+		if (i > 0) bounds.push(stops[i].offset);
+		encode.push(0, 1);
+	}
+	return dict({
+		FunctionType: 3,
+		Domain: [0, 1],
+		Functions: functions,
+		Bounds: bounds,
+		Encode: encode
+	});
+}
 function buildRamp(stopsIn) {
 	const stops = normalizeStops(stopsIn);
 	if (stops.length <= 2) return dict({
@@ -205,19 +276,21 @@ function buildRamp(stopsIn) {
 function normalizeStops(stops) {
 	const out = stops.map((s) => ({
 		offset: Math.max(0, Math.min(1, s.offset)),
-		colorHex: s.colorHex
+		colorHex: s.colorHex,
+		alpha: Math.max(0, Math.min(1, s.alpha ?? 1))
 	})).sort((a, b) => a.offset - b.offset);
 	if (out.length === 0) return [{
 		offset: 0,
-		colorHex: "000000"
+		colorHex: "000000",
+		alpha: 1
 	}];
 	out[0] = {
-		offset: 0,
-		colorHex: out[0].colorHex
+		...out[0],
+		offset: 0
 	};
 	out[out.length - 1] = {
-		offset: 1,
-		colorHex: out[out.length - 1].colorHex
+		...out[out.length - 1],
+		offset: 1
 	};
 	return out;
 }
@@ -235,4 +308,4 @@ function rgb01(hex) {
 	];
 }
 //#endregion
-export { buildGradientPattern, shapeBbox };
+export { buildGradientAlphaMask, buildGradientPattern, shapeBbox };